@pooder/kit 6.0.0 → 6.1.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// src/extensions/background.ts
+// src/extensions/background/BackgroundTool.ts
 import {
   ContributionPointIds
 } from "@pooder/core";
@@ -157,7 +157,7 @@ function getHeartShapeParams(style) {
   };
 }
 
-// src/extensions/sceneLayoutModel.ts
+// src/shared/scene/sceneLayoutModel.ts
 var DEFAULT_SIZE_STATE = {
   unit: "mm",
   actualWidthMm: 500,
@@ -392,8 +392,117 @@ function buildSceneGeometry(configService, layout) {
   };
 }
 
-// src/extensions/background.ts
+// src/shared/constants/layers.ts
 var BACKGROUND_LAYER_ID = "background";
+var IMAGE_OBJECT_LAYER_ID = "image.user";
+var IMAGE_OVERLAY_LAYER_ID = "image-overlay";
+var WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
+var WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
+var WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
+var DIELINE_LAYER_ID = "dieline-overlay";
+var FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
+var RULER_LAYER_ID = "ruler-overlay";
+var FILM_LAYER_ID = "overlay";
+
+// src/shared/imaging/sourceSizeCache.ts
+function normalizeSourceSize(size) {
+  const width = Number(size.width || 0);
+  const height = Number(size.height || 0);
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
+  if (width <= 0 || height <= 0) return null;
+  return { width, height };
+}
+function getCoverScale(frame, source) {
+  const frameWidth = Math.max(1, Number(frame.width || 0));
+  const frameHeight = Math.max(1, Number(frame.height || 0));
+  const sourceWidth = Math.max(1, Number(source.width || 0));
+  const sourceHeight = Math.max(1, Number(source.height || 0));
+  return Math.max(frameWidth / sourceWidth, frameHeight / sourceHeight);
+}
+function createSourceSizeCache(loadSize) {
+  const sizesBySrc = /* @__PURE__ */ new Map();
+  const pendingBySrc = /* @__PURE__ */ new Map();
+  const rememberSourceSize = (src, size) => {
+    const normalized = normalizeSourceSize(size);
+    if (!src || !normalized) return null;
+    sizesBySrc.set(src, normalized);
+    return normalized;
+  };
+  const getSourceSize = (src) => {
+    if (!src) return null;
+    const cached = sizesBySrc.get(src);
+    if (!cached) return null;
+    return { width: cached.width, height: cached.height };
+  };
+  const ensureImageSize = async (src) => {
+    if (!src) return null;
+    const cached = sizesBySrc.get(src);
+    if (cached) return { width: cached.width, height: cached.height };
+    const pending = pendingBySrc.get(src);
+    if (pending) {
+      return pending;
+    }
+    const task = loadSize(src);
+    pendingBySrc.set(src, task);
+    try {
+      const size = await task;
+      if (size) {
+        rememberSourceSize(src, size);
+      }
+      return size;
+    } finally {
+      if (pendingBySrc.get(src) === task) {
+        pendingBySrc.delete(src);
+      }
+    }
+  };
+  const deleteSourceSize = (src) => {
+    if (!src) return;
+    sizesBySrc.delete(src);
+    pendingBySrc.delete(src);
+  };
+  const clear = () => {
+    sizesBySrc.clear();
+    pendingBySrc.clear();
+  };
+  return {
+    ensureImageSize,
+    rememberSourceSize,
+    getSourceSize,
+    deleteSourceSize,
+    clear
+  };
+}
+
+// src/shared/runtime/subscriptions.ts
+var SubscriptionBag = class {
+  constructor() {
+    this.disposables = [];
+  }
+  add(disposable) {
+    if (disposable) {
+      this.disposables.push(disposable);
+    }
+    return disposable;
+  }
+  on(eventBus, event, handler) {
+    eventBus.on(event, handler);
+    this.disposables.push({
+      dispose: () => eventBus.off(event, handler)
+    });
+  }
+  onConfigChange(configService, handler) {
+    this.add(configService.onAnyChange(handler));
+  }
+  disposeAll() {
+    while (this.disposables.length > 0) {
+      const disposable = this.disposables.pop();
+      disposable == null ? void 0 : disposable.dispose();
+    }
+  }
+};
+
+// src/extensions/background/BackgroundTool.ts
 var BACKGROUND_CONFIG_KEY = "background.config";
 var DEFAULT_WIDTH = 800;
 var DEFAULT_HEIGHT = 600;
@@ -409,7 +518,7 @@ var DEFAULT_BACKGROUND_CONFIG = {
       order: 0,
       enabled: true,
       exportable: false,
-      color: "#fff"
+      color: "#eee"
     }
   ]
 };
@@ -520,10 +629,12 @@ var BackgroundTool = class {
     };
     this.config = cloneConfig(DEFAULT_BACKGROUND_CONFIG);
     this.specs = [];
+    this.subscriptions = new SubscriptionBag();
     this.renderSeq = 0;
     this.latestSceneLayout = null;
-    this.sourceSizeBySrc = /* @__PURE__ */ new Map();
-    this.pendingSizeBySrc = /* @__PURE__ */ new Map();
+    this.sourceSizeCache = createSourceSizeCache(
+      (src) => this.loadImageSize(src)
+    );
     this.onCanvasResized = () => {
       this.latestSceneLayout = null;
       this.updateBackground();
@@ -537,7 +648,8 @@ var BackgroundTool = class {
     }
   }
   activate(context) {
-    var _a, _b;
+    var _a;
+    this.subscriptions.disposeAll();
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for BackgroundTool");
@@ -553,8 +665,8 @@ var BackgroundTool = class {
           DEFAULT_BACKGROUND_CONFIG
         )
       );
-      (_a = this.configChangeDisposable) == null ? void 0 : _a.dispose();
-      this.configChangeDisposable = this.configService.onAnyChange(
+      this.subscriptions.onConfigChange(
+        this.configService,
         (e) => {
           if (e.key === BACKGROUND_CONFIG_KEY) {
             this.config = normalizeConfig(e.value);
@@ -568,7 +680,7 @@ var BackgroundTool = class {
         }
       );
     }
-    (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
       () => ({
@@ -583,20 +695,26 @@ var BackgroundTool = class {
       }),
       { priority: 0 }
     );
-    context.eventBus.on("canvas:resized", this.onCanvasResized);
-    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
+    this.subscriptions.on(
+      context.eventBus,
+      "canvas:resized",
+      this.onCanvasResized
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "scene:layout:change",
+      this.onSceneLayoutChanged
+    );
     this.updateBackground();
   }
   deactivate(context) {
-    var _a, _b;
-    context.eventBus.off("canvas:resized", this.onCanvasResized);
-    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
+    var _a;
+    this.subscriptions.disposeAll();
     this.renderSeq += 1;
     this.specs = [];
     this.latestSceneLayout = null;
-    (_a = this.configChangeDisposable) == null ? void 0 : _a.dispose();
-    this.configChangeDisposable = void 0;
-    (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
+    this.sourceSizeCache.clear();
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
     this.renderProducerDisposable = void 0;
     if (!this.canvasService) return;
     void this.canvasService.flushRenderFromProducers();
@@ -804,7 +922,7 @@ var BackgroundTool = class {
   buildImageLayerSpec(layer) {
     const src = String(layer.src || "").trim();
     if (!src) return [];
-    const sourceSize = this.sourceSizeBySrc.get(src);
+    const sourceSize = this.sourceSizeCache.getSourceSize(src);
     if (!sourceSize) return [];
     const rect = this.resolveAnchorRect(layer.anchor);
     const placement = this.resolveImagePlacement(rect, sourceSize, layer.fit);
@@ -863,24 +981,6 @@ var BackgroundTool = class {
     });
     return Array.from(urls);
   }
-  async ensureImageSize(src) {
-    if (!src) return null;
-    const cached = this.sourceSizeBySrc.get(src);
-    if (cached) return cached;
-    const pending = this.pendingSizeBySrc.get(src);
-    if (pending) {
-      return pending;
-    }
-    const task = this.loadImageSize(src);
-    this.pendingSizeBySrc.set(src, task);
-    try {
-      return await task;
-    } finally {
-      if (this.pendingSizeBySrc.get(src) === task) {
-        this.pendingSizeBySrc.delete(src);
-      }
-    }
-  }
   async loadImageSize(src) {
     try {
       const image = await FabricImage.fromURL(src, {
@@ -889,9 +989,7 @@ var BackgroundTool = class {
       const width = Number((image == null ? void 0 : image.width) || 0);
       const height = Number((image == null ? void 0 : image.height) || 0);
       if (width > 0 && height > 0) {
-        const size = { width, height };
-        this.sourceSizeBySrc.set(src, size);
-        return size;
+        return { width, height };
       }
     } catch (error) {
       console.error("[BackgroundTool] Failed to load image", src, error);
@@ -907,7 +1005,9 @@ var BackgroundTool = class {
     const currentConfig = cloneConfig(this.config);
     const activeUrls = this.collectActiveImageUrls(currentConfig);
     if (activeUrls.length > 0) {
-      await Promise.all(activeUrls.map((url) => this.ensureImageSize(url)));
+      await Promise.all(
+        activeUrls.map((url) => this.sourceSizeCache.ensureImageSize(url))
+      );
       if (seq !== this.renderSeq) return;
     }
     this.specs = this.buildBackgroundSpecs(currentConfig);
@@ -917,15 +1017,17 @@ var BackgroundTool = class {
   }
 };
 
-// src/extensions/image.ts
+// src/extensions/image/ImageTool.ts
 import {
   ContributionPointIds as ContributionPointIds2
 } from "@pooder/core";
 import {
   Canvas as FabricCanvas,
+  Control,
   Image as FabricImage2,
   Pattern,
-  Point
+  Point,
+  controlsUtils
 } from "fabric";
 
 // src/extensions/geometry.ts
@@ -1547,9 +1649,379 @@ function getPathBounds(pathData) {
   };
 }
 
-// src/extensions/image.ts
-var IMAGE_OBJECT_LAYER_ID = "image.user";
-var IMAGE_OVERLAY_LAYER_ID = "image-overlay";
+// src/shared/scene/frame.ts
+function emptyFrameRect() {
+  return { left: 0, top: 0, width: 0, height: 0 };
+}
+function resolveCutFrameRect(canvasService, configService) {
+  if (!canvasService || !configService) {
+    return emptyFrameRect();
+  }
+  const sizeState = readSizeState(configService);
+  const layout = computeSceneLayout(canvasService, sizeState);
+  if (!layout) {
+    return emptyFrameRect();
+  }
+  return canvasService.toSceneRect({
+    left: layout.cutRect.left,
+    top: layout.cutRect.top,
+    width: layout.cutRect.width,
+    height: layout.cutRect.height
+  });
+}
+function toLayoutSceneRect(rect) {
+  return {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    space: "scene"
+  };
+}
+
+// src/shared/runtime/sessionState.ts
+function cloneWithJson(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+function applyCommittedSnapshot(session, nextCommitted, options) {
+  const clone = options.clone;
+  session.committed = clone(nextCommitted);
+  const shouldPreserveDirtyWorking = options.toolActive && options.preserveDirtyWorking !== false && session.hasWorkingChanges;
+  if (!shouldPreserveDirtyWorking) {
+    session.working = clone(session.committed);
+    session.hasWorkingChanges = false;
+  }
+}
+function runDeferredConfigUpdate(state, action, cooldownMs = 0) {
+  state.isUpdatingConfig = true;
+  action();
+  if (cooldownMs <= 0) {
+    state.isUpdatingConfig = false;
+    return;
+  }
+  setTimeout(() => {
+    state.isUpdatingConfig = false;
+  }, cooldownMs);
+}
+
+// src/extensions/image/commands.ts
+function createImageCommands(tool) {
+  return [
+    {
+      command: "addImage",
+      id: "addImage",
+      title: "Add Image",
+      handler: async (url, options) => {
+        const result = await tool.upsertImageEntry(url, {
+          mode: "add",
+          addOptions: options
+        });
+        return result.id;
+      }
+    },
+    {
+      command: "upsertImage",
+      id: "upsertImage",
+      title: "Upsert Image",
+      handler: async (url, options = {}) => {
+        return await tool.upsertImageEntry(url, options);
+      }
+    },
+    {
+      command: "getWorkingImages",
+      id: "getWorkingImages",
+      title: "Get Working Images",
+      handler: () => {
+        return tool.cloneItems(tool.workingItems);
+      }
+    },
+    {
+      command: "setWorkingImage",
+      id: "setWorkingImage",
+      title: "Set Working Image",
+      handler: (id, updates) => {
+        tool.updateImageInWorking(id, updates);
+      }
+    },
+    {
+      command: "resetWorkingImages",
+      id: "resetWorkingImages",
+      title: "Reset Working Images",
+      handler: () => {
+        tool.workingItems = tool.cloneItems(tool.items);
+        tool.hasWorkingChanges = false;
+        tool.updateImages();
+        tool.emitWorkingChange();
+      }
+    },
+    {
+      command: "completeImages",
+      id: "completeImages",
+      title: "Complete Images",
+      handler: async () => {
+        return await tool.commitWorkingImagesAsCropped();
+      }
+    },
+    {
+      command: "exportUserCroppedImage",
+      id: "exportUserCroppedImage",
+      title: "Export User Cropped Image",
+      handler: async (options = {}) => {
+        return await tool.exportUserCroppedImage(options);
+      }
+    },
+    {
+      command: "fitImageToArea",
+      id: "fitImageToArea",
+      title: "Fit Image to Area",
+      handler: async (id, area) => {
+        await tool.fitImageToArea(id, area);
+      }
+    },
+    {
+      command: "fitImageToDefaultArea",
+      id: "fitImageToDefaultArea",
+      title: "Fit Image to Default Area",
+      handler: async (id) => {
+        await tool.fitImageToDefaultArea(id);
+      }
+    },
+    {
+      command: "focusImage",
+      id: "focusImage",
+      title: "Focus Image",
+      handler: (id, options = {}) => {
+        return tool.setImageFocus(id, options);
+      }
+    },
+    {
+      command: "removeImage",
+      id: "removeImage",
+      title: "Remove Image",
+      handler: (id) => {
+        const removed = tool.items.find((item) => item.id === id);
+        const next = tool.items.filter((item) => item.id !== id);
+        if (next.length !== tool.items.length) {
+          tool.purgeSourceSizeCacheForItem(removed);
+          if (tool.focusedImageId === id) {
+            tool.setImageFocus(null, {
+              syncCanvasSelection: true,
+              skipRender: true
+            });
+          }
+          tool.updateConfig(next);
+        }
+      }
+    },
+    {
+      command: "updateImage",
+      id: "updateImage",
+      title: "Update Image",
+      handler: async (id, updates, options = {}) => {
+        await tool.updateImage(id, updates, options);
+      }
+    },
+    {
+      command: "clearImages",
+      id: "clearImages",
+      title: "Clear Images",
+      handler: () => {
+        tool.sourceSizeCache.clear();
+        tool.setImageFocus(null, {
+          syncCanvasSelection: true,
+          skipRender: true
+        });
+        tool.updateConfig([]);
+      }
+    },
+    {
+      command: "bringToFront",
+      id: "bringToFront",
+      title: "Bring Image to Front",
+      handler: (id) => {
+        const index = tool.items.findIndex((item) => item.id === id);
+        if (index !== -1 && index < tool.items.length - 1) {
+          const next = [...tool.items];
+          const [item] = next.splice(index, 1);
+          next.push(item);
+          tool.updateConfig(next);
+        }
+      }
+    },
+    {
+      command: "sendToBack",
+      id: "sendToBack",
+      title: "Send Image to Back",
+      handler: (id) => {
+        const index = tool.items.findIndex((item) => item.id === id);
+        if (index > 0) {
+          const next = [...tool.items];
+          const [item] = next.splice(index, 1);
+          next.unshift(item);
+          tool.updateConfig(next);
+        }
+      }
+    }
+  ];
+}
+
+// src/extensions/image/config.ts
+function createImageConfigurations() {
+  return [
+    {
+      id: "image.items",
+      type: "array",
+      label: "Images",
+      default: []
+    },
+    {
+      id: "image.debug",
+      type: "boolean",
+      label: "Image Debug Log",
+      default: false
+    },
+    {
+      id: "image.control.cornerSize",
+      type: "number",
+      label: "Image Control Corner Size",
+      min: 4,
+      max: 64,
+      step: 1,
+      default: 14
+    },
+    {
+      id: "image.control.touchCornerSize",
+      type: "number",
+      label: "Image Control Touch Corner Size",
+      min: 8,
+      max: 96,
+      step: 1,
+      default: 24
+    },
+    {
+      id: "image.control.cornerStyle",
+      type: "select",
+      label: "Image Control Corner Style",
+      options: ["circle", "rect"],
+      default: "circle"
+    },
+    {
+      id: "image.control.cornerColor",
+      type: "color",
+      label: "Image Control Corner Color",
+      default: "#ffffff"
+    },
+    {
+      id: "image.control.cornerStrokeColor",
+      type: "color",
+      label: "Image Control Corner Stroke Color",
+      default: "#1677ff"
+    },
+    {
+      id: "image.control.transparentCorners",
+      type: "boolean",
+      label: "Image Control Transparent Corners",
+      default: false
+    },
+    {
+      id: "image.control.borderColor",
+      type: "color",
+      label: "Image Control Border Color",
+      default: "#1677ff"
+    },
+    {
+      id: "image.control.borderScaleFactor",
+      type: "number",
+      label: "Image Control Border Width",
+      min: 0.5,
+      max: 8,
+      step: 0.1,
+      default: 1.5
+    },
+    {
+      id: "image.control.padding",
+      type: "number",
+      label: "Image Control Padding",
+      min: 0,
+      max: 64,
+      step: 1,
+      default: 0
+    },
+    {
+      id: "image.frame.strokeColor",
+      type: "color",
+      label: "Image Frame Stroke Color",
+      default: "#808080"
+    },
+    {
+      id: "image.frame.strokeWidth",
+      type: "number",
+      label: "Image Frame Stroke Width",
+      min: 0,
+      max: 20,
+      step: 0.5,
+      default: 2
+    },
+    {
+      id: "image.frame.strokeStyle",
+      type: "select",
+      label: "Image Frame Stroke Style",
+      options: ["solid", "dashed", "hidden"],
+      default: "dashed"
+    },
+    {
+      id: "image.frame.dashLength",
+      type: "number",
+      label: "Image Frame Dash Length",
+      min: 1,
+      max: 40,
+      step: 1,
+      default: 8
+    },
+    {
+      id: "image.frame.innerBackground",
+      type: "color",
+      label: "Image Frame Inner Background",
+      default: "rgba(0,0,0,0)"
+    },
+    {
+      id: "image.frame.outerBackground",
+      type: "color",
+      label: "Image Frame Outer Background",
+      default: "#f5f5f5"
+    }
+  ];
+}
+
+// src/extensions/image/ImageTool.ts
+var IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
+  "rotate",
+  "scale"
+];
+var IMAGE_CONTROL_DESCRIPTORS = [
+  {
+    key: "tl",
+    capability: "rotate",
+    create: () => new Control({
+      x: -0.5,
+      y: -0.5,
+      actionName: "rotate",
+      actionHandler: controlsUtils.rotationWithSnapping,
+      cursorStyleHandler: controlsUtils.rotationStyleHandler
+    })
+  },
+  {
+    key: "br",
+    capability: "scale",
+    create: () => new Control({
+      x: 0.5,
+      y: 0.5,
+      actionName: "scale",
+      actionHandler: controlsUtils.scalingEqually,
+      cursorStyleHandler: controlsUtils.scaleCursorStyleHandler
+    })
+  }
+];
 var ImageTool = class {
   constructor() {
     this.id = "pooder.kit.image";
@@ -1560,7 +2032,9 @@ var ImageTool = class {
     this.workingItems = [];
     this.hasWorkingChanges = false;
     this.loadResolvers = /* @__PURE__ */ new Map();
-    this.sourceSizeBySrc = /* @__PURE__ */ new Map();
+    this.sourceSizeCache = createSourceSizeCache(
+      (src) => this.loadImageSize(src)
+    );
     this.isUpdatingConfig = false;
     this.isToolActive = false;
     this.isImageSelectionActive = false;
@@ -1568,6 +2042,8 @@ var ImageTool = class {
     this.renderSeq = 0;
     this.imageSpecs = [];
     this.overlaySpecs = [];
+    this.subscriptions = new SubscriptionBag();
+    this.imageControlsByCapabilityKey = /* @__PURE__ */ new Map();
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
@@ -1664,6 +2140,7 @@ var ImageTool = class {
   }
   activate(context) {
     var _a;
+    this.subscriptions.disposeAll();
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
@@ -1705,37 +2182,55 @@ var ImageTool = class {
       }),
       { priority: 300 }
     );
-    context.eventBus.on("tool:activated", this.onToolActivated);
-    context.eventBus.on("object:modified", this.onObjectModified);
-    context.eventBus.on("selection:created", this.onSelectionChanged);
-    context.eventBus.on("selection:updated", this.onSelectionChanged);
-    context.eventBus.on("selection:cleared", this.onSelectionCleared);
-    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
-    context.eventBus.on("scene:geometry:change", this.onSceneGeometryChanged);
+    this.subscriptions.on(context.eventBus, "tool:activated", this.onToolActivated);
+    this.subscriptions.on(context.eventBus, "object:modified", this.onObjectModified);
+    this.subscriptions.on(
+      context.eventBus,
+      "selection:created",
+      this.onSelectionChanged
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "selection:updated",
+      this.onSelectionChanged
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "selection:cleared",
+      this.onSelectionCleared
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "scene:layout:change",
+      this.onSceneLayoutChanged
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "scene:geometry:change",
+      this.onSceneGeometryChanged
+    );
     const configService = context.services.get(
       "ConfigurationService"
     );
     if (configService) {
-      this.items = this.normalizeItems(
-        configService.get("image.items", []) || []
-      );
-      this.workingItems = this.cloneItems(this.items);
-      this.hasWorkingChanges = false;
-      configService.onAnyChange((e) => {
-        if (this.isUpdatingConfig) return;
-        if (e.key === "image.items") {
-          this.items = this.normalizeItems(e.value || []);
-          if (!this.isToolActive || !this.hasWorkingChanges) {
-            this.workingItems = this.cloneItems(this.items);
-            this.hasWorkingChanges = false;
+      this.applyCommittedItems(configService.get("image.items", []) || []);
+      this.subscriptions.onConfigChange(
+        configService,
+        (e) => {
+          if (this.isUpdatingConfig) return;
+          if (e.key === "image.items") {
+            this.applyCommittedItems(e.value || []);
+            this.updateImages();
+            return;
+          }
+          if (e.key.startsWith("size.") || e.key.startsWith("image.frame.") || e.key.startsWith("image.control.")) {
+            if (e.key.startsWith("image.control.")) {
+              this.imageControlsByCapabilityKey.clear();
+            }
+            this.updateImages();
           }
-          this.updateImages();
-          return;
-        }
-        if (e.key.startsWith("size.") || e.key.startsWith("image.frame.")) {
-          this.updateImages();
         }
-      });
+      );
     }
     const toolSessionService = context.services.get("ToolSessionService");
     this.dirtyTrackerDisposable = toolSessionService == null ? void 0 : toolSessionService.registerDirtyTracker(
@@ -1746,20 +2241,16 @@ var ImageTool = class {
   }
   deactivate(context) {
     var _a, _b;
-    context.eventBus.off("tool:activated", this.onToolActivated);
-    context.eventBus.off("object:modified", this.onObjectModified);
-    context.eventBus.off("selection:created", this.onSelectionChanged);
-    context.eventBus.off("selection:updated", this.onSelectionChanged);
-    context.eventBus.off("selection:cleared", this.onSelectionCleared);
-    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
-    context.eventBus.off("scene:geometry:change", this.onSceneGeometryChanged);
+    this.subscriptions.disposeAll();
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
     this.cropShapeHatchPattern = void 0;
     this.cropShapeHatchPatternColor = void 0;
     this.cropShapeHatchPatternKey = void 0;
+    this.sourceSizeCache.clear();
     this.imageSpecs = [];
     this.overlaySpecs = [];
+    this.imageControlsByCapabilityKey.clear();
     this.clearRenderedImages();
     (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
     this.renderProducerDisposable = void 0;
@@ -1782,6 +2273,90 @@ var ImageTool = class {
   isImageEditingVisible() {
     return this.isToolActive || this.isImageSelectionActive || !!this.focusedImageId;
   }
+  getEnabledImageControlCapabilities() {
+    return IMAGE_DEFAULT_CONTROL_CAPABILITIES;
+  }
+  getImageControls(capabilities) {
+    const normalized = [...new Set(capabilities)].sort();
+    const cacheKey = normalized.join("|");
+    const cached = this.imageControlsByCapabilityKey.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const enabled = new Set(normalized);
+    const controls = {};
+    IMAGE_CONTROL_DESCRIPTORS.forEach((descriptor) => {
+      if (!enabled.has(descriptor.capability)) return;
+      controls[descriptor.key] = descriptor.create();
+    });
+    this.imageControlsByCapabilityKey.set(cacheKey, controls);
+    return controls;
+  }
+  getImageControlVisualConfig() {
+    var _a, _b, _c, _d;
+    const cornerSizeRaw = Number(
+      (_a = this.getConfig("image.control.cornerSize", 14)) != null ? _a : 14
+    );
+    const touchCornerSizeRaw = Number(
+      (_b = this.getConfig("image.control.touchCornerSize", 24)) != null ? _b : 24
+    );
+    const borderScaleFactorRaw = Number(
+      (_c = this.getConfig("image.control.borderScaleFactor", 1.5)) != null ? _c : 1.5
+    );
+    const paddingRaw = Number(
+      (_d = this.getConfig("image.control.padding", 0)) != null ? _d : 0
+    );
+    const cornerStyleRaw = this.getConfig(
+      "image.control.cornerStyle",
+      "circle"
+    ) || "circle";
+    const cornerStyle = cornerStyleRaw === "rect" ? "rect" : "circle";
+    return {
+      cornerSize: Number.isFinite(cornerSizeRaw) ? Math.max(4, Math.min(64, cornerSizeRaw)) : 14,
+      touchCornerSize: Number.isFinite(touchCornerSizeRaw) ? Math.max(8, Math.min(96, touchCornerSizeRaw)) : 24,
+      cornerStyle,
+      cornerColor: this.getConfig("image.control.cornerColor", "#ffffff") || "#ffffff",
+      cornerStrokeColor: this.getConfig("image.control.cornerStrokeColor", "#1677ff") || "#1677ff",
+      transparentCorners: !!this.getConfig(
+        "image.control.transparentCorners",
+        false
+      ),
+      borderColor: this.getConfig("image.control.borderColor", "#1677ff") || "#1677ff",
+      borderScaleFactor: Number.isFinite(borderScaleFactorRaw) ? Math.max(0.5, Math.min(8, borderScaleFactorRaw)) : 1.5,
+      padding: Number.isFinite(paddingRaw) ? Math.max(0, Math.min(64, paddingRaw)) : 0
+    };
+  }
+  applyImageObjectInteractionState(obj) {
+    var _a;
+    if (!obj) return;
+    const visible = this.isImageEditingVisible();
+    const visual = this.getImageControlVisualConfig();
+    obj.set({
+      selectable: visible,
+      evented: visible,
+      hasControls: visible,
+      hasBorders: visible,
+      lockScalingFlip: true,
+      cornerSize: visual.cornerSize,
+      touchCornerSize: visual.touchCornerSize,
+      cornerStyle: visual.cornerStyle,
+      cornerColor: visual.cornerColor,
+      cornerStrokeColor: visual.cornerStrokeColor,
+      transparentCorners: visual.transparentCorners,
+      borderColor: visual.borderColor,
+      borderScaleFactor: visual.borderScaleFactor,
+      padding: visual.padding
+    });
+    obj.controls = this.getImageControls(
+      this.getEnabledImageControlCapabilities()
+    );
+    (_a = obj.setCoords) == null ? void 0 : _a.call(obj);
+  }
+  refreshImageObjectInteractionState() {
+    this.getImageObjects().forEach(
+      (obj) => this.applyImageObjectInteractionState(obj)
+    );
+  }
   isDebugEnabled() {
     return !!this.getConfig("image.debug", false);
   }
@@ -1811,205 +2386,8 @@ var ImageTool = class {
           }
         }
       ],
-      [ContributionPointIds2.CONFIGURATIONS]: [
-        {
-          id: "image.items",
-          type: "array",
-          label: "Images",
-          default: []
-        },
-        {
-          id: "image.debug",
-          type: "boolean",
-          label: "Image Debug Log",
-          default: false
-        },
-        {
-          id: "image.frame.strokeColor",
-          type: "color",
-          label: "Image Frame Stroke Color",
-          default: "#808080"
-        },
-        {
-          id: "image.frame.strokeWidth",
-          type: "number",
-          label: "Image Frame Stroke Width",
-          min: 0,
-          max: 20,
-          step: 0.5,
-          default: 2
-        },
-        {
-          id: "image.frame.strokeStyle",
-          type: "select",
-          label: "Image Frame Stroke Style",
-          options: ["solid", "dashed", "hidden"],
-          default: "dashed"
-        },
-        {
-          id: "image.frame.dashLength",
-          type: "number",
-          label: "Image Frame Dash Length",
-          min: 1,
-          max: 40,
-          step: 1,
-          default: 8
-        },
-        {
-          id: "image.frame.innerBackground",
-          type: "color",
-          label: "Image Frame Inner Background",
-          default: "rgba(0,0,0,0)"
-        },
-        {
-          id: "image.frame.outerBackground",
-          type: "color",
-          label: "Image Frame Outer Background",
-          default: "#f5f5f5"
-        }
-      ],
-      [ContributionPointIds2.COMMANDS]: [
-        {
-          command: "addImage",
-          title: "Add Image",
-          handler: async (url, options) => {
-            const result = await this.upsertImageEntry(url, {
-              mode: "add",
-              addOptions: options
-            });
-            return result.id;
-          }
-        },
-        {
-          command: "upsertImage",
-          title: "Upsert Image",
-          handler: async (url, options = {}) => {
-            return await this.upsertImageEntry(url, options);
-          }
-        },
-        {
-          command: "getWorkingImages",
-          title: "Get Working Images",
-          handler: () => {
-            return this.cloneItems(this.workingItems);
-          }
-        },
-        {
-          command: "setWorkingImage",
-          title: "Set Working Image",
-          handler: (id, updates) => {
-            this.updateImageInWorking(id, updates);
-          }
-        },
-        {
-          command: "resetWorkingImages",
-          title: "Reset Working Images",
-          handler: () => {
-            this.workingItems = this.cloneItems(this.items);
-            this.hasWorkingChanges = false;
-            this.updateImages();
-            this.emitWorkingChange();
-          }
-        },
-        {
-          command: "completeImages",
-          title: "Complete Images",
-          handler: async () => {
-            return await this.commitWorkingImagesAsCropped();
-          }
-        },
-        {
-          command: "exportUserCroppedImage",
-          title: "Export User Cropped Image",
-          handler: async (options = {}) => {
-            return await this.exportUserCroppedImage(options);
-          }
-        },
-        {
-          command: "fitImageToArea",
-          title: "Fit Image to Area",
-          handler: async (id, area) => {
-            await this.fitImageToArea(id, area);
-          }
-        },
-        {
-          command: "fitImageToDefaultArea",
-          title: "Fit Image to Default Area",
-          handler: async (id) => {
-            await this.fitImageToDefaultArea(id);
-          }
-        },
-        {
-          command: "focusImage",
-          title: "Focus Image",
-          handler: (id, options = {}) => {
-            return this.setImageFocus(id, options);
-          }
-        },
-        {
-          command: "removeImage",
-          title: "Remove Image",
-          handler: (id) => {
-            const removed = this.items.find((item) => item.id === id);
-            const next = this.items.filter((item) => item.id !== id);
-            if (next.length !== this.items.length) {
-              this.purgeSourceSizeCacheForItem(removed);
-              if (this.focusedImageId === id) {
-                this.setImageFocus(null, {
-                  syncCanvasSelection: true,
-                  skipRender: true
-                });
-              }
-              this.updateConfig(next);
-            }
-          }
-        },
-        {
-          command: "updateImage",
-          title: "Update Image",
-          handler: async (id, updates, options = {}) => {
-            await this.updateImage(id, updates, options);
-          }
-        },
-        {
-          command: "clearImages",
-          title: "Clear Images",
-          handler: () => {
-            this.sourceSizeBySrc.clear();
-            this.setImageFocus(null, {
-              syncCanvasSelection: true,
-              skipRender: true
-            });
-            this.updateConfig([]);
-          }
-        },
-        {
-          command: "bringToFront",
-          title: "Bring Image to Front",
-          handler: (id) => {
-            const index = this.items.findIndex((item) => item.id === id);
-            if (index !== -1 && index < this.items.length - 1) {
-              const next = [...this.items];
-              const [item] = next.splice(index, 1);
-              next.push(item);
-              this.updateConfig(next);
-            }
-          }
-        },
-        {
-          command: "sendToBack",
-          title: "Send Image to Back",
-          handler: (id) => {
-            const index = this.items.findIndex((item) => item.id === id);
-            if (index > 0) {
-              const next = [...this.items];
-              const [item] = next.splice(index, 1);
-              next.unshift(item);
-              this.updateConfig(next);
-            }
-          }
-        }
-      ]
+      [ContributionPointIds2.CONFIGURATIONS]: createImageConfigurations(),
+      [ContributionPointIds2.COMMANDS]: createImageCommands(this)
     };
   }
   normalizeItem(item) {
@@ -2061,12 +2439,7 @@ var ImageTool = class {
       } else {
         const obj = this.getImageObject(id);
         if (obj) {
-          obj.set({
-            selectable: true,
-            evented: true,
-            hasControls: true,
-            hasBorders: true
-          });
+          this.applyImageObjectInteractionState(obj);
           canvas.setActiveObject(obj);
         }
       }
@@ -2140,47 +2513,45 @@ var ImageTool = class {
     if (!configService) return fallback;
     return (_a = configService.get(key, fallback)) != null ? _a : fallback;
   }
+  applyCommittedItems(nextItems) {
+    const session = {
+      committed: this.items,
+      working: this.workingItems,
+      hasWorkingChanges: this.hasWorkingChanges
+    };
+    applyCommittedSnapshot(session, this.normalizeItems(nextItems), {
+      clone: (items) => this.cloneItems(items),
+      toolActive: this.isToolActive,
+      preserveDirtyWorking: true
+    });
+    this.items = session.committed;
+    this.workingItems = session.working;
+    this.hasWorkingChanges = session.hasWorkingChanges;
+  }
   updateConfig(newItems, skipCanvasUpdate = false) {
     if (!this.context) return;
-    this.isUpdatingConfig = true;
-    this.items = this.normalizeItems(newItems);
-    if (!this.isToolActive || !this.hasWorkingChanges) {
-      this.workingItems = this.cloneItems(this.items);
-      this.hasWorkingChanges = false;
-    }
-    const configService = this.context.services.get(
-      "ConfigurationService"
+    this.applyCommittedItems(newItems);
+    runDeferredConfigUpdate(
+      this,
+      () => {
+        var _a;
+        const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+          "ConfigurationService"
+        );
+        configService == null ? void 0 : configService.update("image.items", this.items);
+        if (!skipCanvasUpdate) {
+          this.updateImages();
+        }
+      },
+      50
     );
-    configService == null ? void 0 : configService.update("image.items", this.items);
-    if (!skipCanvasUpdate) {
-      this.updateImages();
-    }
-    setTimeout(() => {
-      this.isUpdatingConfig = false;
-    }, 50);
   }
   getFrameRect() {
     var _a;
-    if (!this.canvasService) {
-      return { left: 0, top: 0, width: 0, height: 0 };
-    }
     const configService = (_a = this.context) == null ? void 0 : _a.services.get(
       "ConfigurationService"
     );
-    if (!configService) {
-      return { left: 0, top: 0, width: 0, height: 0 };
-    }
-    const sizeState = readSizeState(configService);
-    const layout = computeSceneLayout(this.canvasService, sizeState);
-    if (!layout) {
-      return { left: 0, top: 0, width: 0, height: 0 };
-    }
-    return this.canvasService.toSceneRect({
-      left: layout.cutRect.left,
-      top: layout.cutRect.top,
-      width: layout.cutRect.width,
-      height: layout.cutRect.height
-    });
+    return resolveCutFrameRect(this.canvasService, configService);
   }
   getFrameRectScreen(frame) {
     if (!this.canvasService) {
@@ -2189,13 +2560,7 @@ var ImageTool = class {
     return this.canvasService.toScreenRect(frame || this.getFrameRect());
   }
   toLayoutSceneRect(rect) {
-    return {
-      left: rect.left,
-      top: rect.top,
-      width: rect.width,
-      height: rect.height,
-      space: "scene"
-    };
+    return toLayoutSceneRect(rect);
   }
   async resolveDefaultFitArea() {
     if (!this.canvasService) return null;
@@ -2253,31 +2618,31 @@ var ImageTool = class {
     const sources = [item.url, item.sourceUrl, item.committedUrl].filter(
       (value) => typeof value === "string" && value.length > 0
     );
-    sources.forEach((src) => this.sourceSizeBySrc.delete(src));
+    sources.forEach((src) => this.sourceSizeCache.deleteSourceSize(src));
   }
   rememberSourceSize(src, obj) {
     const width = Number((obj == null ? void 0 : obj.width) || 0);
     const height = Number((obj == null ? void 0 : obj.height) || 0);
     if (src && width > 0 && height > 0) {
-      this.sourceSizeBySrc.set(src, { width, height });
+      this.sourceSizeCache.rememberSourceSize(src, { width, height });
     }
   }
   getSourceSize(src, obj) {
-    const cached = src ? this.sourceSizeBySrc.get(src) : void 0;
+    const cached = src ? this.sourceSizeCache.getSourceSize(src) : void 0;
     if (cached) return cached;
     const width = Number((obj == null ? void 0 : obj.width) || 0);
     const height = Number((obj == null ? void 0 : obj.height) || 0);
     if (src && width > 0 && height > 0) {
       const size = { width, height };
-      this.sourceSizeBySrc.set(src, size);
+      this.sourceSizeCache.rememberSourceSize(src, size);
       return size;
     }
     return { width: 1, height: 1 };
   }
   async ensureSourceSize(src) {
-    if (!src) return null;
-    const cached = this.sourceSizeBySrc.get(src);
-    if (cached) return cached;
+    return this.sourceSizeCache.ensureImageSize(src);
+  }
+  async loadImageSize(src) {
     try {
       const image = await FabricImage2.fromURL(src, {
         crossOrigin: "anonymous"
@@ -2285,9 +2650,7 @@ var ImageTool = class {
       const width = Number((image == null ? void 0 : image.width) || 0);
       const height = Number((image == null ? void 0 : image.height) || 0);
       if (width > 0 && height > 0) {
-        const size = { width, height };
-        this.sourceSizeBySrc.set(src, size);
-        return size;
+        return { width, height };
       }
     } catch (error) {
       this.debug("image:size:load-failed", {
@@ -2298,11 +2661,7 @@ var ImageTool = class {
     return null;
   }
   getCoverScale(frame, size) {
-    const sw = Math.max(1, size.width);
-    const sh = Math.max(1, size.height);
-    const fw = Math.max(1, frame.width);
-    const fh = Math.max(1, frame.height);
-    return Math.max(fw / sw, fh / sh);
+    return getCoverScale(frame, size);
   }
   getFrameVisualConfig() {
     var _a, _b;
@@ -2863,6 +3222,7 @@ var ImageTool = class {
     this.overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
     await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
+    this.refreshImageObjectInteractionState();
     renderItems.forEach((item) => {
       if (!this.getImageObject(item.id)) return;
       const resolver = this.loadResolvers.get(item.id);
@@ -3053,7 +3413,7 @@ var ImageTool = class {
         })
       );
       if (previousCommitted && previousCommitted !== url) {
-        this.sourceSizeBySrc.delete(previousCommitted);
+        this.sourceSizeCache.deleteSourceSize(previousCommitted);
       }
     }
     this.hasWorkingChanges = false;
@@ -3149,7 +3509,7 @@ var ImageTool = class {
   }
 };
 
-// src/extensions/size.ts
+// src/extensions/size/SizeTool.ts
 import {
   ContributionPointIds as ContributionPointIds3
 } from "@pooder/core";
@@ -3369,1140 +3729,324 @@ var SizeTool = class {
       const anchor = changed === "height" ? nextHeightMm : changed === "width" ? nextWidthMm : (_b = providedWidthMm != null ? providedWidthMm : providedHeightMm) != null ? _b : nextWidthMm;
       nextWidthMm = anchor;
       nextHeightMm = anchor;
-    } else if (state.constraintMode === "lockAspect") {
-      const ratio = Math.max(1e-4, state.aspectRatio);
-      if (changed === "height") {
-        nextWidthMm = nextHeightMm * ratio;
-      } else {
-        nextHeightMm = nextWidthMm / ratio;
-      }
-    }
-    nextWidthMm = sanitizeMmValue(nextWidthMm, limits);
-    nextHeightMm = sanitizeMmValue(nextHeightMm, limits);
-    if (state.constraintMode === "equal") {
-      const value = Math.max(nextWidthMm, nextHeightMm);
-      nextWidthMm = value;
-      nextHeightMm = value;
-    } else if (state.constraintMode === "lockAspect") {
-      const ratio = Math.max(1e-4, state.aspectRatio);
-      if (changed === "height") {
-        nextWidthMm = sanitizeMmValue(nextHeightMm * ratio, limits);
-      } else {
-        nextHeightMm = sanitizeMmValue(nextWidthMm / ratio, limits);
-      }
-    }
-    configService.update("size.actualWidthMm", nextWidthMm);
-    configService.update("size.actualHeightMm", nextHeightMm);
-    configService.update("size.unit", inputUnit);
-    this.emitStateChanged();
-    return this.getStateForUI();
-  }
-  setConstraintMode(modeRaw) {
-    const configService = this.getConfigService();
-    if (!configService) return null;
-    const state = readSizeState(configService);
-    const mode = normalizeConstraintMode(modeRaw);
-    configService.update("size.constraintMode", mode);
-    if (mode === "lockAspect") {
-      const ratio = state.actualWidthMm / Math.max(1e-3, state.actualHeightMm);
-      configService.update("size.aspectRatio", ratio);
-    }
-    if (mode === "equal") {
-      const value = sanitizeMmValue(
-        Math.max(state.actualWidthMm, state.actualHeightMm),
-        {
-          minMm: state.minMm,
-          maxMm: state.maxMm,
-          stepMm: state.stepMm
-        }
-      );
-      configService.update("size.actualWidthMm", value);
-      configService.update("size.actualHeightMm", value);
-      configService.update("size.aspectRatio", 1);
-    }
-    this.emitStateChanged();
-    return this.getStateForUI();
-  }
-  setUnit(unitRaw) {
-    const configService = this.getConfigService();
-    if (!configService) return null;
-    const unit = normalizeUnit(unitRaw);
-    configService.update("size.unit", unit);
-    this.emitStateChanged();
-    return this.getStateForUI();
-  }
-  setCut(cutModeRaw, cutMarginMm = 0) {
-    const configService = this.getConfigService();
-    if (!configService) return null;
-    const cutMode = normalizeCutMode(cutModeRaw);
-    const margin = Math.max(0, Number(cutMarginMm) || 0);
-    configService.update("size.cutMode", cutMode);
-    configService.update("size.cutMarginMm", margin);
-    this.emitStateChanged();
-    return this.getStateForUI();
-  }
-  getSelectedImageSize(id) {
-    var _a, _b, _c;
-    const configService = this.getConfigService();
-    if (!configService || !this.canvasService) return null;
-    const sizeState = readSizeState(configService);
-    const layout = computeSceneLayout(this.canvasService, sizeState);
-    if (!layout || layout.scale <= 0) return null;
-    const all = this.canvasService.canvas.getObjects();
-    const active = this.canvasService.canvas.getActiveObject();
-    const activeId = ((_a = active == null ? void 0 : active.data) == null ? void 0 : _a.layerId) === "image.user" ? (_b = active == null ? void 0 : active.data) == null ? void 0 : _b.id : null;
-    const targetId = id || activeId;
-    const target = all.find(
-      (obj) => {
-        var _a2, _b2;
-        return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === "image.user" && ((_b2 = obj == null ? void 0 : obj.data) == null ? void 0 : _b2.id) === targetId;
-      }
-    ) || all.find((obj) => {
-      var _a2;
-      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === "image.user";
-    });
-    if (!target) return null;
-    const objectWidthPx = Math.abs((target.width || 0) * (target.scaleX || 1));
-    const objectHeightPx = Math.abs(
-      (target.height || 0) * (target.scaleY || 1)
-    );
-    if (objectWidthPx <= 0 || objectHeightPx <= 0) return null;
-    const widthMm = objectWidthPx / layout.scale;
-    const heightMm = objectHeightPx / layout.scale;
-    return {
-      id: ((_c = target == null ? void 0 : target.data) == null ? void 0 : _c.id) || null,
-      widthMm,
-      heightMm,
-      width: fromMm(widthMm, sizeState.unit),
-      height: fromMm(heightMm, sizeState.unit),
-      unit: sizeState.unit
-    };
-  }
-};
-
-// src/extensions/dieline.ts
-import {
-  ContributionPointIds as ContributionPointIds4
-} from "@pooder/core";
-import { Canvas as FabricCanvas2, Path, Pattern as Pattern2 } from "fabric";
-
-// src/extensions/tracer.ts
-import paper2 from "paper";
-
-// src/extensions/maskOps.ts
-function createMask(imageData, options) {
-  const { width, height, data } = imageData;
-  const {
-    threshold,
-    padding,
-    paddedWidth,
-    paddedHeight,
-    maskMode = "auto",
-    whiteThreshold = 240,
-    alphaOpaqueCutoff = 250
-  } = options;
-  const resolvedMode = maskMode === "auto" ? inferMaskMode(imageData, alphaOpaqueCutoff) : maskMode;
-  const mask = new Uint8Array(paddedWidth * paddedHeight);
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 4;
-      const r = data[srcIdx];
-      const g = data[srcIdx + 1];
-      const b = data[srcIdx + 2];
-      const a = data[srcIdx + 3];
-      const destIdx = (y + padding) * paddedWidth + (x + padding);
-      if (resolvedMode === "alpha") {
-        if (a > threshold) mask[destIdx] = 1;
-      } else {
-        if (a > threshold && !(r > whiteThreshold && g > whiteThreshold && b > whiteThreshold)) {
-          mask[destIdx] = 1;
-        }
-      }
-    }
-  }
-  return mask;
-}
-function inferMaskMode(imageData, alphaOpaqueCutoff) {
-  const analysis = analyzeAlpha(imageData, alphaOpaqueCutoff);
-  if (analysis.minAlpha === 255) return "whitebg";
-  if (analysis.veryTransparentRatio >= 5e-4) return "alpha";
-  if (analysis.belowOpaqueRatio >= 0.01) return "alpha";
-  return "whitebg";
-}
-function analyzeAlpha(imageData, alphaOpaqueCutoff) {
-  const { data } = imageData;
-  const total = data.length / 4;
-  let belowOpaque = 0;
-  let veryTransparent = 0;
-  let minAlpha = 255;
-  for (let i = 3; i < data.length; i += 4) {
-    const a = data[i];
-    if (a < minAlpha) minAlpha = a;
-    if (a < alphaOpaqueCutoff) belowOpaque++;
-    if (a < 32) veryTransparent++;
-  }
-  return {
-    total,
-    minAlpha,
-    belowOpaqueRatio: belowOpaque / total,
-    veryTransparentRatio: veryTransparent / total
-  };
-}
-function circularMorphology(mask, width, height, radius, op) {
-  const r = Math.max(0, Math.floor(radius));
-  if (r <= 0) {
-    return mask.slice();
-  }
-  const dilateDisk = (m, radiusPx) => {
-    const horizontalDist = new Int32Array(width * height);
-    for (let y = 0; y < height; y++) {
-      let lastSolid = -radiusPx * 2;
-      for (let x = 0; x < width; x++) {
-        if (m[y * width + x]) lastSolid = x;
-        horizontalDist[y * width + x] = x - lastSolid;
-      }
-      lastSolid = width + radiusPx * 2;
-      for (let x = width - 1; x >= 0; x--) {
-        if (m[y * width + x]) lastSolid = x;
-        horizontalDist[y * width + x] = Math.min(
-          horizontalDist[y * width + x],
-          lastSolid - x
-        );
-      }
-    }
-    const result = new Uint8Array(width * height);
-    const r2 = radiusPx * radiusPx;
-    for (let x = 0; x < width; x++) {
-      for (let y = 0; y < height; y++) {
-        let found = false;
-        const minY = Math.max(0, y - radiusPx);
-        const maxY = Math.min(height - 1, y + radiusPx);
-        for (let dy = minY; dy <= maxY; dy++) {
-          const dY = dy - y;
-          const hDist = horizontalDist[dy * width + x];
-          if (hDist * hDist + dY * dY <= r2) {
-            found = true;
-            break;
-          }
-        }
-        if (found) result[y * width + x] = 1;
-      }
-    }
-    return result;
-  };
-  const erodeDiamond = (m, radiusPx) => {
-    if (radiusPx <= 0) return m.slice();
-    let current = m;
-    for (let step = 0; step < radiusPx; step++) {
-      const next = new Uint8Array(width * height);
-      for (let y = 1; y < height - 1; y++) {
-        const row = y * width;
-        for (let x = 1; x < width - 1; x++) {
-          const idx = row + x;
-          if (current[idx] && current[idx - 1] && current[idx + 1] && current[idx - width] && current[idx + width]) {
-            next[idx] = 1;
-          }
-        }
-      }
-      current = next;
-    }
-    return current;
-  };
-  const restoreBridgePixels = (source, eroded) => {
-    const restored = eroded.slice();
-    for (let y = 1; y < height - 1; y++) {
-      const row = y * width;
-      for (let x = 1; x < width - 1; x++) {
-        const idx = row + x;
-        if (!source[idx] || restored[idx]) continue;
-        const up = source[idx - width] === 1;
-        const down = source[idx + width] === 1;
-        const left = source[idx - 1] === 1;
-        const right = source[idx + 1] === 1;
-        const upLeft = source[idx - width - 1] === 1;
-        const upRight = source[idx - width + 1] === 1;
-        const downLeft = source[idx + width - 1] === 1;
-        const downRight = source[idx + width + 1] === 1;
-        const keepsBridge = left && right || up && down || upLeft && downRight || upRight && downLeft;
-        if (keepsBridge) {
-          restored[idx] = 1;
-        }
-      }
-    }
-    return restored;
-  };
-  const erodePreservingBridges = (m, radiusPx) => {
-    const eroded = erodeDiamond(m, radiusPx);
-    return restoreBridgePixels(m, eroded);
-  };
-  switch (op) {
-    case "dilate":
-      return dilateDisk(mask, r);
-    case "erode":
-      return erodePreservingBridges(mask, r);
-    case "closing": {
-      const erodeRadius = Math.max(1, Math.floor(r * 0.65));
-      return erodePreservingBridges(dilateDisk(mask, r), erodeRadius);
-    }
-    case "opening":
-      return dilateDisk(erodePreservingBridges(mask, r), r);
-    default:
-      return mask;
-  }
-}
-function fillHoles(mask, width, height) {
-  const background = new Uint8Array(width * height);
-  const queue = [];
-  for (let x = 0; x < width; x++) {
-    if (mask[x] === 0) {
-      background[x] = 1;
-      queue.push(x);
-    }
-    const lastRowIdx = (height - 1) * width + x;
-    if (mask[lastRowIdx] === 0) {
-      background[lastRowIdx] = 1;
-      queue.push(lastRowIdx);
-    }
-  }
-  for (let y = 1; y < height - 1; y++) {
-    const leftIdx = y * width;
-    const rightIdx = y * width + (width - 1);
-    if (mask[leftIdx] === 0) {
-      background[leftIdx] = 1;
-      queue.push(leftIdx);
-    }
-    if (mask[rightIdx] === 0) {
-      background[rightIdx] = 1;
-      queue.push(rightIdx);
-    }
-  }
-  let head = 0;
-  while (head < queue.length) {
-    const idx = queue[head++];
-    const x = idx % width;
-    const y = (idx - x) / width;
-    const up = y > 0 ? idx - width : -1;
-    const down = y < height - 1 ? idx + width : -1;
-    const left = x > 0 ? idx - 1 : -1;
-    const right = x < width - 1 ? idx + 1 : -1;
-    if (up >= 0 && mask[up] === 0 && background[up] === 0) {
-      background[up] = 1;
-      queue.push(up);
-    }
-    if (down >= 0 && mask[down] === 0 && background[down] === 0) {
-      background[down] = 1;
-      queue.push(down);
-    }
-    if (left >= 0 && mask[left] === 0 && background[left] === 0) {
-      background[left] = 1;
-      queue.push(left);
-    }
-    if (right >= 0 && mask[right] === 0 && background[right] === 0) {
-      background[right] = 1;
-      queue.push(right);
-    }
-  }
-  const filledMask = new Uint8Array(width * height);
-  for (let i = 0; i < width * height; i++) {
-    filledMask[i] = background[i] === 0 ? 1 : 0;
-  }
-  return filledMask;
-}
-function polygonSignedArea(points) {
-  if (points.length < 3) return 0;
-  let sum = 0;
-  for (let i = 0; i < points.length; i++) {
-    const a = points[i];
-    const b = points[(i + 1) % points.length];
-    sum += a.x * b.y - b.x * a.y;
-  }
-  return sum / 2;
-}
-
-// src/extensions/tracer.ts
-var ImageTracer = class {
-  /**
-   * Main entry point: Traces an image URL to an SVG path string.
-   * @param imageUrl The URL or Base64 string of the image.
-   * @param options Configuration options.
-   */
-  static async trace(imageUrl, options = {}) {
-    const { pathData } = await this.traceWithBounds(imageUrl, options);
-    return pathData;
-  }
-  static async traceWithBounds(imageUrl, options = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const img = await this.loadImage(imageUrl);
-    const width = img.width;
-    const height = img.height;
-    if (width <= 0 || height <= 0) {
-      const w = (_a = options.scaleToWidth) != null ? _a : 0;
-      const h = (_b = options.scaleToHeight) != null ? _b : 0;
-      return {
-        pathData: `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`,
-        baseBounds: { x: 0, y: 0, width: w, height: h },
-        bounds: { x: 0, y: 0, width: w, height: h }
-      };
-    }
-    const debug = options.debug === true;
-    const debugLog = (message, payload) => {
-      if (!debug) return;
-      if (payload) {
-        console.info(`[ImageTracer] ${message}`, payload);
-        return;
-      }
-      console.info(`[ImageTracer] ${message}`);
-    };
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) throw new Error("Could not get 2D context");
-    ctx.drawImage(img, 0, 0);
-    const imageData = ctx.getImageData(0, 0, width, height);
-    const threshold = (_c = options.threshold) != null ? _c : 10;
-    const expand = Math.max(0, Math.floor((_d = options.expand) != null ? _d : 0));
-    const simplifyTolerance = (_e = options.simplifyTolerance) != null ? _e : 2.5;
-    const useSmoothing = options.smoothing !== false;
-    const componentMode = "all";
-    const minComponentArea = 0;
-    const maxDim = Math.max(width, height);
-    const maskMode = "auto";
-    const whiteThreshold = 240;
-    const alphaOpaqueCutoff = 250;
-    const preprocessDilateRadius = Math.max(
-      2,
-      Math.floor(Math.max(maxDim * 0.012, expand * 0.35))
-    );
-    const preprocessErodeRadius = Math.max(
-      1,
-      Math.floor(preprocessDilateRadius * 0.65)
-    );
-    const smoothDilateRadius = Math.max(
-      1,
-      Math.floor(preprocessDilateRadius * 0.25)
-    );
-    const smoothErodeRadius = Math.max(1, Math.floor(smoothDilateRadius * 0.8));
-    const connectStartDilateRadius = Math.max(
-      1,
-      Math.floor(Math.max(maxDim * 6e-3, expand * 0.2))
-    );
-    const connectMaxDilateRadius = Math.max(
-      connectStartDilateRadius,
-      Math.floor(Math.max(maxDim * 0.2, expand * 2.5))
-    );
-    const connectErodeRatio = 0.65;
-    debugLog("traceWithBounds:start", {
-      width,
-      height,
-      threshold,
-      expand,
-      simplifyTolerance,
-      smoothing: useSmoothing,
-      strategy: {
-        maskMode,
-        whiteThreshold,
-        alphaOpaqueCutoff,
-        fillHoles: true,
-        preprocessDilateRadius,
-        preprocessErodeRadius,
-        smoothDilateRadius,
-        smoothErodeRadius,
-        connectEnabled: true,
-        connectStartDilateRadius,
-        connectMaxDilateRadius,
-        connectErodeRatio
-      }
-    });
-    const padding = Math.max(
-      preprocessDilateRadius,
-      smoothDilateRadius,
-      connectMaxDilateRadius,
-      expand
-    ) + 2;
-    const paddedWidth = width + padding * 2;
-    const paddedHeight = height + padding * 2;
-    const summarizeMaskContours = (m) => {
-      const summary = this.summarizeAllContours(
-        m,
-        paddedWidth,
-        paddedHeight,
-        minComponentArea
-      );
-      return {
-        rawContourCount: summary.rawCount,
-        selectedContourCount: summary.selectedCount
-      };
-    };
-    let mask = createMask(imageData, {
-      threshold,
-      padding,
-      paddedWidth,
-      paddedHeight,
-      maskMode,
-      whiteThreshold,
-      alphaOpaqueCutoff
-    });
-    if (debug) {
-      debugLog(
-        "traceWithBounds:mask:after-create",
-        summarizeMaskContours(mask)
-      );
-    }
-    mask = circularMorphology(
-      mask,
-      paddedWidth,
-      paddedHeight,
-      preprocessDilateRadius,
-      "dilate"
-    );
-    mask = fillHoles(mask, paddedWidth, paddedHeight);
-    mask = circularMorphology(
-      mask,
-      paddedWidth,
-      paddedHeight,
-      preprocessErodeRadius,
-      "erode"
-    );
-    mask = fillHoles(mask, paddedWidth, paddedHeight);
-    if (debug) {
-      debugLog("traceWithBounds:mask:after-preprocess", {
-        dilateRadius: preprocessDilateRadius,
-        erodeRadius: preprocessErodeRadius,
-        ...summarizeMaskContours(mask)
-      });
-    }
-    mask = circularMorphology(
-      mask,
-      paddedWidth,
-      paddedHeight,
-      smoothDilateRadius,
-      "dilate"
-    );
-    mask = fillHoles(mask, paddedWidth, paddedHeight);
-    mask = circularMorphology(
-      mask,
-      paddedWidth,
-      paddedHeight,
-      smoothErodeRadius,
-      "erode"
-    );
-    mask = fillHoles(mask, paddedWidth, paddedHeight);
-    if (debug) {
-      debugLog("traceWithBounds:mask:after-smooth", {
-        dilateRadius: smoothDilateRadius,
-        erodeRadius: smoothErodeRadius,
-        ...summarizeMaskContours(mask)
-      });
-    }
-    const beforeConnectSummary = summarizeMaskContours(mask);
-    if (beforeConnectSummary.selectedContourCount <= 1) {
-      debugLog("traceWithBounds:mask:connect-skipped", {
-        reason: "already-single-component",
-        before: beforeConnectSummary
-      });
-    } else {
-      const connectResult = this.findForceConnectResult(
-        mask,
-        paddedWidth,
-        paddedHeight,
-        minComponentArea,
-        connectStartDilateRadius,
-        connectMaxDilateRadius,
-        connectErodeRatio
-      );
-      if (debug) {
-        debugLog("traceWithBounds:mask:after-connect", {
-          before: beforeConnectSummary,
-          appliedDilateRadius: connectResult.appliedDilateRadius,
-          appliedErodeRadius: connectResult.appliedErodeRadius,
-          reachedSingleComponent: connectResult.reachedSingleComponent,
-          after: {
-            rawContourCount: connectResult.rawContourCount,
-            selectedContourCount: connectResult.selectedContourCount
-          }
-        });
-      }
-      mask = connectResult.mask;
-    }
-    if (debug) {
-      const afterConnectSummary = summarizeMaskContours(mask);
-      if (afterConnectSummary.selectedContourCount > 1) {
-        debugLog("traceWithBounds:mask:connect-warning", {
-          reason: "still-multi-component-after-connect-search",
-          summary: afterConnectSummary
-        });
-      }
-    }
-    const baseMask = mask;
-    const baseContoursRaw = this.traceAllContours(
-      baseMask,
-      paddedWidth,
-      paddedHeight
-    );
-    const baseContours = this.selectContours(
-      baseContoursRaw,
-      componentMode,
-      minComponentArea
-    );
-    if (!baseContours.length) {
-      const w = (_f = options.scaleToWidth) != null ? _f : width;
-      const h = (_g = options.scaleToHeight) != null ? _g : height;
-      debugLog("fallback:no-base-contour", { width: w, height: h });
-      return {
-        pathData: `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`,
-        baseBounds: { x: 0, y: 0, width: w, height: h },
-        bounds: { x: 0, y: 0, width: w, height: h }
-      };
-    }
-    const baseUnpaddedContours = baseContours.map(
-      (contour) => contour.map((p) => ({
-        x: p.x - padding,
-        y: p.y - padding
-      }))
-    ).filter((contour) => contour.length > 2);
-    if (!baseUnpaddedContours.length) {
-      const w = (_h = options.scaleToWidth) != null ? _h : width;
-      const h = (_i = options.scaleToHeight) != null ? _i : height;
-      debugLog("fallback:empty-base-contours", { width: w, height: h });
-      return {
-        pathData: `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`,
-        baseBounds: { x: 0, y: 0, width: w, height: h },
-        bounds: { x: 0, y: 0, width: w, height: h }
-      };
-    }
-    let baseBounds = this.boundsFromPoints(
-      this.flattenContours(baseUnpaddedContours)
-    );
-    let maskExpanded = baseMask;
-    if (expand > 0) {
-      maskExpanded = circularMorphology(
-        baseMask,
-        paddedWidth,
-        paddedHeight,
-        expand,
-        "dilate"
-      );
-    }
-    const expandedContoursRaw = this.traceAllContours(
-      maskExpanded,
-      paddedWidth,
-      paddedHeight
-    );
-    const expandedContours = this.selectContours(
-      expandedContoursRaw,
-      componentMode,
-      minComponentArea
-    );
-    if (!expandedContours.length) {
-      debugLog("fallback:no-expanded-contour", {
-        baseBounds,
-        width,
-        height,
-        expand
-      });
-      return {
-        pathData: `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`,
-        baseBounds,
-        bounds: baseBounds
-      };
-    }
-    const expandedUnpaddedContours = expandedContours.map(
-      (contour) => contour.map((p) => ({
-        x: p.x - padding,
-        y: p.y - padding
-      }))
-    ).filter((contour) => contour.length > 2);
-    if (!expandedUnpaddedContours.length) {
-      debugLog("fallback:empty-expanded-contours", {
-        baseBounds,
-        width,
-        height,
-        expand
-      });
-      return {
-        pathData: `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`,
-        baseBounds,
-        bounds: baseBounds
-      };
-    }
-    let globalBounds = this.boundsFromPoints(
-      this.flattenContours(expandedUnpaddedContours)
-    );
-    let finalContours = expandedUnpaddedContours;
-    if (options.scaleToWidth && options.scaleToHeight) {
-      finalContours = this.scaleContours(
-        expandedUnpaddedContours,
-        options.scaleToWidth,
-        options.scaleToHeight,
-        globalBounds
-      );
-      globalBounds = this.boundsFromPoints(this.flattenContours(finalContours));
-      const baseScaledContours = this.scaleContours(
-        baseUnpaddedContours,
-        options.scaleToWidth,
-        options.scaleToHeight,
-        baseBounds
-      );
-      baseBounds = this.boundsFromPoints(
-        this.flattenContours(baseScaledContours)
-      );
-    }
-    if (expand > 0) {
-      const expectedExpandedBounds = {
-        x: baseBounds.x - expand,
-        y: baseBounds.y - expand,
-        width: baseBounds.width + expand * 2,
-        height: baseBounds.height + expand * 2
-      };
-      if (expectedExpandedBounds.width > 0 && expectedExpandedBounds.height > 0 && globalBounds.width > 0 && globalBounds.height > 0) {
-        const shouldNormalizeExpandBounds = Math.abs(globalBounds.x - expectedExpandedBounds.x) > 1 || Math.abs(globalBounds.y - expectedExpandedBounds.y) > 1 || Math.abs(globalBounds.width - expectedExpandedBounds.width) > 1 || Math.abs(globalBounds.height - expectedExpandedBounds.height) > 1;
-        if (shouldNormalizeExpandBounds) {
-          const beforeNormalize = globalBounds;
-          finalContours = this.translateContours(
-            this.scaleContours(
-              finalContours,
-              expectedExpandedBounds.width,
-              expectedExpandedBounds.height,
-              globalBounds
-            ),
-            expectedExpandedBounds.x,
-            expectedExpandedBounds.y
-          );
-          globalBounds = this.boundsFromPoints(
-            this.flattenContours(finalContours)
-          );
-          debugLog("traceWithBounds:expand-normalized", {
-            expand,
-            expectedExpandedBounds,
-            beforeNormalize,
-            afterNormalize: globalBounds
-          });
-        }
-      }
-    }
-    debugLog("traceWithBounds:contours", {
-      baseContourCount: baseContoursRaw.length,
-      baseSelectedCount: baseContours.length,
-      expandedContourCount: expandedContoursRaw.length,
-      expandedSelectedCount: expandedContours.length,
-      baseBounds,
-      expandedBounds: globalBounds,
-      expandedDeltaX: globalBounds.width - baseBounds.width,
-      expandedDeltaY: globalBounds.height - baseBounds.height,
-      expandedMayOverflowImageBounds: expand > 0,
-      useSmoothing,
-      componentMode
-    });
-    if (useSmoothing) {
-      return {
-        pathData: this.contoursToSVGPaper(finalContours, simplifyTolerance),
-        baseBounds,
-        bounds: globalBounds
-      };
-    } else {
-      const simplifiedContours = finalContours.map((points) => this.douglasPeucker(points, simplifyTolerance)).filter((points) => points.length > 2);
-      const pathData = this.contoursToSVG(simplifiedContours) || this.contoursToSVG(finalContours);
-      return {
-        pathData,
-        baseBounds,
-        bounds: globalBounds
-      };
-    }
-  }
-  static pickPrimaryContour(contours) {
-    if (contours.length === 0) return null;
-    return contours.reduce((best, cur) => {
-      if (!best) return cur;
-      const bestArea = Math.abs(polygonSignedArea(best));
-      const curArea = Math.abs(polygonSignedArea(cur));
-      if (curArea !== bestArea) return curArea > bestArea ? cur : best;
-      return cur.length > best.length ? cur : best;
-    }, contours[0]);
-  }
-  static flattenContours(contours) {
-    return contours.flatMap((contour) => contour);
-  }
-  static contourCentroid(points) {
-    if (!points.length) return { x: 0, y: 0 };
-    const sum = points.reduce(
-      (acc, p) => ({ x: acc.x + p.x, y: acc.y + p.y }),
-      { x: 0, y: 0 }
-    );
-    return {
-      x: sum.x / points.length,
-      y: sum.y / points.length
-    };
-  }
-  static pointInPolygon(point, polygon) {
-    let inside = false;
-    const { x, y } = point;
-    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-      const xi = polygon[i].x;
-      const yi = polygon[i].y;
-      const xj = polygon[j].x;
-      const yj = polygon[j].y;
-      const intersects = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi || Number.EPSILON) + xi;
-      if (intersects) inside = !inside;
-    }
-    return inside;
-  }
-  static keepOutermostContours(contours) {
-    if (contours.length <= 1) return contours;
-    const sorted = [...contours].sort(
-      (a, b) => Math.abs(polygonSignedArea(b)) - Math.abs(polygonSignedArea(a))
-    );
-    const selected = [];
-    for (const contour of sorted) {
-      const centroid = this.contourCentroid(contour);
-      const isNested = selected.some(
-        (outer) => this.pointInPolygon(centroid, outer)
-      );
-      if (!isNested) {
-        selected.push(contour);
-      }
-    }
-    return selected;
-  }
-  static summarizeAllContours(mask, width, height, minComponentArea) {
-    const raw = this.traceAllContours(mask, width, height);
-    const selected = this.selectContours(raw, "all", minComponentArea);
-    return {
-      rawCount: raw.length,
-      selectedCount: selected.length
-    };
-  }
-  static findForceConnectResult(sourceMask, width, height, minComponentArea, startDilateRadius, maxDilateRadius, erodeRatio) {
-    const initial = this.summarizeAllContours(
-      sourceMask,
-      width,
-      height,
-      minComponentArea
-    );
-    if (initial.selectedCount <= 1) {
-      return {
-        mask: sourceMask,
-        appliedDilateRadius: 0,
-        appliedErodeRadius: 0,
-        reachedSingleComponent: true,
-        rawContourCount: initial.rawCount,
-        selectedContourCount: initial.selectedCount
-      };
-    }
-    const normalizedStart = Math.max(1, Math.floor(startDilateRadius));
-    const normalizedMax = Math.max(
-      normalizedStart,
-      Math.floor(maxDilateRadius)
-    );
-    const normalizedErodeRatio = Math.max(0, erodeRatio);
-    const evaluate = (dilateRadius) => {
-      const erodeRadius = Math.max(
-        1,
-        Math.floor(dilateRadius * normalizedErodeRatio)
-      );
-      let mask = sourceMask;
-      mask = circularMorphology(mask, width, height, dilateRadius, "dilate");
-      mask = fillHoles(mask, width, height);
-      mask = circularMorphology(mask, width, height, erodeRadius, "erode");
-      mask = fillHoles(mask, width, height);
-      const summary = this.summarizeAllContours(
-        mask,
-        width,
-        height,
-        minComponentArea
-      );
-      return {
-        dilateRadius,
-        erodeRadius,
-        mask,
-        rawCount: summary.rawCount,
-        selectedCount: summary.selectedCount
-      };
-    };
-    let low = normalizedStart - 1;
-    let high = normalizedStart;
-    let highResult = evaluate(high);
-    while (high < normalizedMax && highResult.selectedCount > 1) {
-      low = high;
-      high = Math.min(
-        normalizedMax,
-        Math.max(high + 1, Math.floor(high * 1.6))
-      );
-      highResult = evaluate(high);
-    }
-    if (highResult.selectedCount > 1) {
-      return {
-        mask: highResult.mask,
-        appliedDilateRadius: highResult.dilateRadius,
-        appliedErodeRadius: highResult.erodeRadius,
-        reachedSingleComponent: false,
-        rawContourCount: highResult.rawCount,
-        selectedContourCount: highResult.selectedCount
-      };
+    } else if (state.constraintMode === "lockAspect") {
+      const ratio = Math.max(1e-4, state.aspectRatio);
+      if (changed === "height") {
+        nextWidthMm = nextHeightMm * ratio;
+      } else {
+        nextHeightMm = nextWidthMm / ratio;
+      }
     }
-    let best = highResult;
-    while (low + 1 < high) {
-      const mid = Math.floor((low + high) / 2);
-      const midResult = evaluate(mid);
-      if (midResult.selectedCount <= 1) {
-        best = midResult;
-        high = mid;
+    nextWidthMm = sanitizeMmValue(nextWidthMm, limits);
+    nextHeightMm = sanitizeMmValue(nextHeightMm, limits);
+    if (state.constraintMode === "equal") {
+      const value = Math.max(nextWidthMm, nextHeightMm);
+      nextWidthMm = value;
+      nextHeightMm = value;
+    } else if (state.constraintMode === "lockAspect") {
+      const ratio = Math.max(1e-4, state.aspectRatio);
+      if (changed === "height") {
+        nextWidthMm = sanitizeMmValue(nextHeightMm * ratio, limits);
       } else {
-        low = mid;
+        nextHeightMm = sanitizeMmValue(nextWidthMm / ratio, limits);
       }
     }
-    return {
-      mask: best.mask,
-      appliedDilateRadius: best.dilateRadius,
-      appliedErodeRadius: best.erodeRadius,
-      reachedSingleComponent: true,
-      rawContourCount: best.rawCount,
-      selectedContourCount: best.selectedCount
-    };
+    configService.update("size.actualWidthMm", nextWidthMm);
+    configService.update("size.actualHeightMm", nextHeightMm);
+    configService.update("size.unit", inputUnit);
+    this.emitStateChanged();
+    return this.getStateForUI();
   }
-  static selectContours(contours, mode, minComponentArea) {
-    if (!contours.length) return [];
-    if (mode === "largest") {
-      const primary2 = this.pickPrimaryContour(contours);
-      return primary2 ? [primary2] : [];
+  setConstraintMode(modeRaw) {
+    const configService = this.getConfigService();
+    if (!configService) return null;
+    const state = readSizeState(configService);
+    const mode = normalizeConstraintMode(modeRaw);
+    configService.update("size.constraintMode", mode);
+    if (mode === "lockAspect") {
+      const ratio = state.actualWidthMm / Math.max(1e-3, state.actualHeightMm);
+      configService.update("size.aspectRatio", ratio);
     }
-    const threshold = Math.max(0, minComponentArea);
-    if (threshold <= 0) {
-      return this.keepOutermostContours(contours);
+    if (mode === "equal") {
+      const value = sanitizeMmValue(
+        Math.max(state.actualWidthMm, state.actualHeightMm),
+        {
+          minMm: state.minMm,
+          maxMm: state.maxMm,
+          stepMm: state.stepMm
+        }
+      );
+      configService.update("size.actualWidthMm", value);
+      configService.update("size.actualHeightMm", value);
+      configService.update("size.aspectRatio", 1);
     }
-    const filtered = contours.filter(
-      (contour) => Math.abs(polygonSignedArea(contour)) >= threshold
+    this.emitStateChanged();
+    return this.getStateForUI();
+  }
+  setUnit(unitRaw) {
+    const configService = this.getConfigService();
+    if (!configService) return null;
+    const unit = normalizeUnit(unitRaw);
+    configService.update("size.unit", unit);
+    this.emitStateChanged();
+    return this.getStateForUI();
+  }
+  setCut(cutModeRaw, cutMarginMm = 0) {
+    const configService = this.getConfigService();
+    if (!configService) return null;
+    const cutMode = normalizeCutMode(cutModeRaw);
+    const margin = Math.max(0, Number(cutMarginMm) || 0);
+    configService.update("size.cutMode", cutMode);
+    configService.update("size.cutMarginMm", margin);
+    this.emitStateChanged();
+    return this.getStateForUI();
+  }
+  getSelectedImageSize(id) {
+    var _a, _b, _c;
+    const configService = this.getConfigService();
+    if (!configService || !this.canvasService) return null;
+    const sizeState = readSizeState(configService);
+    const layout = computeSceneLayout(this.canvasService, sizeState);
+    if (!layout || layout.scale <= 0) return null;
+    const all = this.canvasService.canvas.getObjects();
+    const active = this.canvasService.canvas.getActiveObject();
+    const activeId = ((_a = active == null ? void 0 : active.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID ? (_b = active == null ? void 0 : active.data) == null ? void 0 : _b.id : null;
+    const targetId = id || activeId;
+    const target = all.find(
+      (obj) => {
+        var _a2, _b2;
+        return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID && ((_b2 = obj == null ? void 0 : obj.data) == null ? void 0 : _b2.id) === targetId;
+      }
+    ) || all.find((obj) => {
+      var _a2;
+      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID;
+    });
+    if (!target) return null;
+    const objectWidthPx = Math.abs((target.width || 0) * (target.scaleX || 1));
+    const objectHeightPx = Math.abs(
+      (target.height || 0) * (target.scaleY || 1)
     );
-    if (filtered.length > 0) {
-      return this.keepOutermostContours(filtered);
-    }
-    const primary = this.pickPrimaryContour(contours);
-    return primary ? [primary] : [];
-  }
-  static boundsFromPoints(points) {
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-    for (const p of points) {
-      if (p.x < minX) minX = p.x;
-      if (p.y < minY) minY = p.y;
-      if (p.x > maxX) maxX = p.x;
-      if (p.y > maxY) maxY = p.y;
-    }
-    if (!Number.isFinite(minX) || !Number.isFinite(minY)) {
-      return { x: 0, y: 0, width: 0, height: 0 };
-    }
+    if (objectWidthPx <= 0 || objectHeightPx <= 0) return null;
+    const widthMm = objectWidthPx / layout.scale;
+    const heightMm = objectHeightPx / layout.scale;
     return {
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY
+      id: ((_c = target == null ? void 0 : target.data) == null ? void 0 : _c.id) || null,
+      widthMm,
+      heightMm,
+      width: fromMm(widthMm, sizeState.unit),
+      height: fromMm(heightMm, sizeState.unit),
+      unit: sizeState.unit
     };
   }
-  /**
-   * Traces all contours in the mask with optimized start-point detection
-   */
-  static traceAllContours(mask, width, height) {
-    const visited = new Uint8Array(width * height);
-    const allContours = [];
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const idx = y * width + x;
-        if (mask[idx] && !visited[idx]) {
-          const isLeftEdge = x === 0 || mask[idx - 1] === 0;
-          if (isLeftEdge) {
-            const contour = this.marchingSquares(
-              mask,
-              visited,
-              x,
-              y,
-              width,
-              height
-            );
-            if (contour.length > 2) {
-              allContours.push(contour);
+};
+
+// src/extensions/dieline/DielineTool.ts
+import {
+  ContributionPointIds as ContributionPointIds4
+} from "@pooder/core";
+import { Canvas as FabricCanvas2, Path, Pattern as Pattern2 } from "fabric";
+
+// src/extensions/dieline/commands.ts
+function createDielineCommands(tool, state) {
+  return [
+    {
+      command: "updateFeaturePosition",
+      id: "updateFeaturePosition",
+      title: "Update Feature Position",
+      handler: (groupId, x, y) => {
+        var _a;
+        const configService = (_a = tool.context) == null ? void 0 : _a.services.get("ConfigurationService");
+        if (!configService) return;
+        const features = configService.get("dieline.features") || [];
+        let changed = false;
+        const newFeatures = features.map((f) => {
+          if (f.groupId === groupId) {
+            if (f.x !== x || f.y !== y) {
+              changed = true;
+              return { ...f, x, y };
             }
           }
+          return f;
+        });
+        if (changed) {
+          configService.update("dieline.features", newFeatures);
         }
       }
-    }
-    return allContours;
-  }
-  static loadImage(url) {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.crossOrigin = "Anonymous";
-      img.onload = () => resolve(img);
-      img.onerror = (e) => reject(e);
-      img.src = url;
-    });
-  }
-  /**
-   * Moore-Neighbor Tracing Algorithm
-   * More robust for irregular shapes than simple Marching Squares walker.
-   */
-  static marchingSquares(mask, visited, startX, startY, width, height) {
-    const isSolid = (x, y) => {
-      if (x < 0 || x >= width || y < 0 || y >= height) return false;
-      return mask[y * width + x] === 1;
-    };
-    const points = [];
-    let cx = startX;
-    let cy = startY;
-    const neighbors = [
-      { x: 0, y: -1 },
-      { x: 1, y: -1 },
-      { x: 1, y: 0 },
-      { x: 1, y: 1 },
-      { x: 0, y: 1 },
-      { x: -1, y: 1 },
-      { x: -1, y: 0 },
-      { x: -1, y: -1 }
-    ];
-    let backtrack = 6;
-    const maxSteps = width * height * 3;
-    let steps = 0;
-    do {
-      points.push({ x: cx, y: cy });
-      visited[cy * width + cx] = 1;
-      let found = false;
-      for (let i = 0; i < 8; i++) {
-        const idx = (backtrack + 1 + i) % 8;
-        const nx = cx + neighbors[idx].x;
-        const ny = cy + neighbors[idx].y;
-        if (isSolid(nx, ny)) {
-          cx = nx;
-          cy = ny;
-          backtrack = (idx + 4 + 1) % 8;
-          found = true;
-          break;
-        }
-      }
-      if (!found) break;
-      steps++;
-    } while ((cx !== startX || cy !== startY) && steps < maxSteps);
-    return points;
-  }
-  /**
-   * Douglas-Peucker Line Simplification
-   */
-  static douglasPeucker(points, tolerance) {
-    if (points.length <= 2) return points;
-    const sqTolerance = tolerance * tolerance;
-    let maxSqDist = 0;
-    let index = 0;
-    const first = points[0];
-    const last = points[points.length - 1];
-    for (let i = 1; i < points.length - 1; i++) {
-      const sqDist = this.getSqSegDist(points[i], first, last);
-      if (sqDist > maxSqDist) {
-        index = i;
-        maxSqDist = sqDist;
+    },
+    {
+      command: "exportCutImage",
+      id: "exportCutImage",
+      title: "Export Cut Image",
+      handler: (options) => {
+        return tool.exportCutImage(options);
       }
-    }
-    if (maxSqDist > sqTolerance) {
-      const left = this.douglasPeucker(points.slice(0, index + 1), tolerance);
-      const right = this.douglasPeucker(points.slice(index), tolerance);
-      return left.slice(0, left.length - 1).concat(right);
-    } else {
-      return [first, last];
-    }
-  }
-  static getSqSegDist(p, p1, p2) {
-    let x = p1.x;
-    let y = p1.y;
-    let dx = p2.x - x;
-    let dy = p2.y - y;
-    if (dx !== 0 || dy !== 0) {
-      const t = ((p.x - x) * dx + (p.y - y) * dy) / (dx * dx + dy * dy);
-      if (t > 1) {
-        x = p2.x;
-        y = p2.y;
-      } else if (t > 0) {
-        x += dx * t;
-        y += dy * t;
+    },
+    {
+      command: "detectEdge",
+      id: "detectEdge",
+      title: "Detect Edge from Image",
+      handler: async (imageUrl, options) => {
+        var _a, _b, _c;
+        try {
+          const detectOptions = options || {};
+          const debug = detectOptions.debug === true;
+          const tracerOptions = {
+            expand: (_a = detectOptions.expand) != null ? _a : 0,
+            smoothing: (_b = detectOptions.smoothing) != null ? _b : true,
+            simplifyTolerance: (_c = detectOptions.simplifyTolerance) != null ? _c : 2,
+            threshold: detectOptions.threshold,
+            debug
+          };
+          const loadImage = (url) => {
+            return new Promise((resolve, reject) => {
+              const img2 = new Image();
+              img2.crossOrigin = "Anonymous";
+              img2.onload = () => resolve(img2);
+              img2.onerror = (e) => reject(e);
+              img2.src = url;
+            });
+          };
+          const [img, traced] = await Promise.all([
+            loadImage(imageUrl),
+            import("./tracer-PO7CRBYY.mjs").then(
+              ({ ImageTracer }) => ImageTracer.traceWithBounds(imageUrl, tracerOptions)
+            )
+          ]);
+          const { pathData, baseBounds, bounds } = traced;
+          if (debug) {
+            console.info("[DielineTool] detectEdge", {
+              imageWidth: img.width,
+              imageHeight: img.height,
+              baseBounds,
+              expandedBounds: bounds,
+              currentDielineWidth: state.width,
+              currentDielineHeight: state.height,
+              options: tracerOptions,
+              strategy: "single-connected-silhouette"
+            });
+          }
+          return {
+            pathData,
+            rawBounds: bounds,
+            baseBounds,
+            imageWidth: img.width,
+            imageHeight: img.height
+          };
+        } catch (e) {
+          console.error("Edge detection failed", e);
+          throw e;
+        }
       }
     }
-    dx = p.x - x;
-    dy = p.y - y;
-    return dx * dx + dy * dy;
-  }
-  static scalePoints(points, targetWidth, targetHeight, bounds) {
-    if (points.length === 0) return points;
-    if (bounds.width === 0 || bounds.height === 0) return points;
-    const scaleX = targetWidth / bounds.width;
-    const scaleY = targetHeight / bounds.height;
-    return points.map((p) => ({
-      x: (p.x - bounds.x) * scaleX,
-      y: (p.y - bounds.y) * scaleY
-    }));
-  }
-  static scaleContours(contours, targetWidth, targetHeight, bounds) {
-    return contours.map(
-      (points) => this.scalePoints(points, targetWidth, targetHeight, bounds)
-    );
-  }
-  static translateContours(contours, offsetX, offsetY) {
-    return contours.map(
-      (points) => points.map((p) => ({
-        x: p.x + offsetX,
-        y: p.y + offsetY
-      }))
-    );
-  }
-  static pointsToSVG(points) {
-    if (points.length === 0) return "";
-    const head = points[0];
-    const tail = points.slice(1);
-    return `M ${head.x} ${head.y} ` + tail.map((p) => `L ${p.x} ${p.y}`).join(" ") + " Z";
-  }
-  static contoursToSVG(contours) {
-    return contours.filter((points) => points.length > 2).map((points) => this.pointsToSVG(points)).join(" ").trim();
-  }
-  static ensurePaper() {
-    if (!paper2.project) {
-      paper2.setup(new paper2.Size(100, 100));
-    }
-  }
-  static pointsToSVGPaper(points, tolerance) {
-    if (points.length < 3) return this.pointsToSVG(points);
-    this.ensurePaper();
-    const path = new paper2.Path({
-      segments: points.map((p) => [p.x, p.y]),
-      closed: true
-    });
-    path.simplify(tolerance);
-    const data = path.pathData;
-    path.remove();
-    return data;
-  }
-  static contoursToSVGPaper(contours, tolerance) {
-    const normalizedContours = contours.filter((points) => points.length > 2);
-    if (!normalizedContours.length) return "";
-    if (normalizedContours.length === 1) {
-      return this.pointsToSVGPaper(normalizedContours[0], tolerance);
-    }
-    this.ensurePaper();
-    const compound = new paper2.CompoundPath({ insert: false });
-    for (const points of normalizedContours) {
-      const child = new paper2.Path({
-        segments: points.map((p) => [p.x, p.y]),
-        closed: true,
-        insert: false
-      });
-      child.simplify(tolerance);
-      compound.addChild(child);
+  ];
+}
+
+// src/extensions/dieline/config.ts
+function createDielineConfigurations(state) {
+  return [
+    {
+      id: "dieline.shape",
+      type: "select",
+      label: "Shape",
+      options: Array.from(DIELINE_SHAPES),
+      default: state.shape
+    },
+    {
+      id: "dieline.radius",
+      type: "number",
+      label: "Corner Radius (mm)",
+      min: 0,
+      max: 500,
+      default: state.radius
+    },
+    {
+      id: "dieline.shapeStyle",
+      type: "json",
+      label: "Shape Style",
+      default: state.shapeStyle
+    },
+    {
+      id: "dieline.showBleedLines",
+      type: "boolean",
+      label: "Show Bleed Lines",
+      default: state.showBleedLines
+    },
+    {
+      id: "dieline.strokeWidth",
+      type: "number",
+      label: "Line Width",
+      min: 0.1,
+      max: 10,
+      step: 0.1,
+      default: state.mainLine.width
+    },
+    {
+      id: "dieline.strokeColor",
+      type: "color",
+      label: "Line Color",
+      default: state.mainLine.color
+    },
+    {
+      id: "dieline.dashLength",
+      type: "number",
+      label: "Dash Length",
+      min: 1,
+      max: 50,
+      default: state.mainLine.dashLength
+    },
+    {
+      id: "dieline.style",
+      type: "select",
+      label: "Line Style",
+      options: ["solid", "dashed", "hidden"],
+      default: state.mainLine.style
+    },
+    {
+      id: "dieline.offsetStrokeWidth",
+      type: "number",
+      label: "Offset Line Width",
+      min: 0.1,
+      max: 10,
+      step: 0.1,
+      default: state.offsetLine.width
+    },
+    {
+      id: "dieline.offsetStrokeColor",
+      type: "color",
+      label: "Offset Line Color",
+      default: state.offsetLine.color
+    },
+    {
+      id: "dieline.offsetDashLength",
+      type: "number",
+      label: "Offset Dash Length",
+      min: 1,
+      max: 50,
+      default: state.offsetLine.dashLength
+    },
+    {
+      id: "dieline.offsetStyle",
+      type: "select",
+      label: "Offset Line Style",
+      options: ["solid", "dashed", "hidden"],
+      default: state.offsetLine.style
+    },
+    {
+      id: "dieline.insideColor",
+      type: "color",
+      label: "Inside Color",
+      default: state.insideColor
+    },
+    {
+      id: "dieline.features",
+      type: "json",
+      label: "Edge Features",
+      default: state.features
     }
-    const data = compound.pathData || this.contoursToSVG(normalizedContours);
-    compound.remove();
-    return data;
-  }
-};
+  ];
+}
 
-// src/extensions/dieline.ts
-var IMAGE_OBJECT_LAYER_ID2 = "image.user";
-var DIELINE_LAYER_ID = "dieline-overlay";
+// src/extensions/dieline/DielineTool.ts
 var DielineTool = class {
   constructor(options) {
     this.id = "pooder.kit.dieline";
@@ -4743,7 +4287,6 @@ var DielineTool = class {
     this.context = void 0;
   }
   contribute() {
-    const s = this.state;
     return {
       [ContributionPointIds4.TOOLS]: [
         {
@@ -4756,195 +4299,8 @@ var DielineTool = class {
           }
         }
       ],
-      [ContributionPointIds4.CONFIGURATIONS]: [
-        {
-          id: "dieline.shape",
-          type: "select",
-          label: "Shape",
-          options: Array.from(DIELINE_SHAPES),
-          default: s.shape
-        },
-        {
-          id: "dieline.radius",
-          type: "number",
-          label: "Corner Radius (mm)",
-          min: 0,
-          max: 500,
-          default: s.radius
-        },
-        {
-          id: "dieline.shapeStyle",
-          type: "json",
-          label: "Shape Style",
-          default: s.shapeStyle
-        },
-        {
-          id: "dieline.showBleedLines",
-          type: "boolean",
-          label: "Show Bleed Lines",
-          default: s.showBleedLines
-        },
-        {
-          id: "dieline.strokeWidth",
-          type: "number",
-          label: "Line Width",
-          min: 0.1,
-          max: 10,
-          step: 0.1,
-          default: s.mainLine.width
-        },
-        {
-          id: "dieline.strokeColor",
-          type: "color",
-          label: "Line Color",
-          default: s.mainLine.color
-        },
-        {
-          id: "dieline.dashLength",
-          type: "number",
-          label: "Dash Length",
-          min: 1,
-          max: 50,
-          default: s.mainLine.dashLength
-        },
-        {
-          id: "dieline.style",
-          type: "select",
-          label: "Line Style",
-          options: ["solid", "dashed", "hidden"],
-          default: s.mainLine.style
-        },
-        {
-          id: "dieline.offsetStrokeWidth",
-          type: "number",
-          label: "Offset Line Width",
-          min: 0.1,
-          max: 10,
-          step: 0.1,
-          default: s.offsetLine.width
-        },
-        {
-          id: "dieline.offsetStrokeColor",
-          type: "color",
-          label: "Offset Line Color",
-          default: s.offsetLine.color
-        },
-        {
-          id: "dieline.offsetDashLength",
-          type: "number",
-          label: "Offset Dash Length",
-          min: 1,
-          max: 50,
-          default: s.offsetLine.dashLength
-        },
-        {
-          id: "dieline.offsetStyle",
-          type: "select",
-          label: "Offset Line Style",
-          options: ["solid", "dashed", "hidden"],
-          default: s.offsetLine.style
-        },
-        {
-          id: "dieline.insideColor",
-          type: "color",
-          label: "Inside Color",
-          default: s.insideColor
-        },
-        {
-          id: "dieline.features",
-          type: "json",
-          label: "Edge Features",
-          default: s.features
-        }
-      ],
-      [ContributionPointIds4.COMMANDS]: [
-        {
-          command: "updateFeaturePosition",
-          title: "Update Feature Position",
-          handler: (groupId, x, y) => {
-            var _a;
-            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
-              "ConfigurationService"
-            );
-            if (!configService) return;
-            const features = configService.get("dieline.features") || [];
-            let changed = false;
-            const newFeatures = features.map((f) => {
-              if (f.groupId === groupId) {
-                if (f.x !== x || f.y !== y) {
-                  changed = true;
-                  return { ...f, x, y };
-                }
-              }
-              return f;
-            });
-            if (changed) {
-              configService.update("dieline.features", newFeatures);
-            }
-          }
-        },
-        {
-          command: "exportCutImage",
-          title: "Export Cut Image",
-          handler: (options) => {
-            return this.exportCutImage(options);
-          }
-        },
-        {
-          command: "detectEdge",
-          title: "Detect Edge from Image",
-          handler: async (imageUrl, options) => {
-            var _a, _b, _c;
-            try {
-              const detectOptions = options || {};
-              const debug = detectOptions.debug === true;
-              const tracerOptions = {
-                expand: (_a = detectOptions.expand) != null ? _a : 0,
-                smoothing: (_b = detectOptions.smoothing) != null ? _b : true,
-                simplifyTolerance: (_c = detectOptions.simplifyTolerance) != null ? _c : 2,
-                threshold: detectOptions.threshold,
-                debug
-              };
-              const loadImage = (url) => {
-                return new Promise((resolve, reject) => {
-                  const img2 = new Image();
-                  img2.crossOrigin = "Anonymous";
-                  img2.onload = () => resolve(img2);
-                  img2.onerror = (e) => reject(e);
-                  img2.src = url;
-                });
-              };
-              const [img, traced] = await Promise.all([
-                loadImage(imageUrl),
-                ImageTracer.traceWithBounds(imageUrl, tracerOptions)
-              ]);
-              const { pathData, baseBounds, bounds } = traced;
-              if (debug) {
-                console.info("[DielineTool] detectEdge", {
-                  imageWidth: img.width,
-                  imageHeight: img.height,
-                  baseBounds,
-                  expandedBounds: bounds,
-                  currentDielineWidth: s.width,
-                  currentDielineHeight: s.height,
-                  options: tracerOptions,
-                  strategy: "single-connected-silhouette"
-                });
-              }
-              return {
-                pathData,
-                rawBounds: bounds,
-                baseBounds,
-                imageWidth: img.width,
-                imageHeight: img.height
-              };
-            } catch (e) {
-              console.error("Edge detection failed", e);
-              throw e;
-            }
-          }
-        }
-      ]
+      [ContributionPointIds4.CONFIGURATIONS]: createDielineConfigurations(this.state),
+      [ContributionPointIds4.COMMANDS]: createDielineCommands(this, this.state)
     };
   }
   createHatchPattern(color = "rgba(0, 0, 0, 0.3)") {
@@ -5218,7 +4574,11 @@ var DielineTool = class {
       {
         type: "clipPath",
         id: "dieline.clip.image",
-        targetPassIds: [IMAGE_OBJECT_LAYER_ID2],
+        visibility: {
+          op: "not",
+          expr: { op: "anySessionActive" }
+        },
+        targetPassIds: [IMAGE_OBJECT_LAYER_ID],
         source: {
           id: "dieline.effect.clip-path",
           type: "path",
@@ -5383,7 +4743,7 @@ var DielineTool = class {
     const exportBounds = pathBounds;
     const sourceImages = this.canvasService.canvas.getObjects().filter((obj) => {
       var _a2;
-      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID2;
+      return ((_a2 = obj == null ? void 0 : obj.data) == null ? void 0 : _a2.layerId) === IMAGE_OBJECT_LAYER_ID;
     });
     if (!sourceImages.length) {
       console.warn(
@@ -5455,7 +4815,7 @@ var DielineTool = class {
   }
 };
 
-// src/extensions/feature.ts
+// src/extensions/feature/FeatureTool.ts
 import {
   ContributionPointIds as ContributionPointIds5
 } from "@pooder/core";
@@ -5657,8 +5017,7 @@ function completeFeaturesStrict(features, context, update) {
   return { ok: true };
 }
 
-// src/extensions/feature.ts
-var FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
+// src/extensions/feature/FeatureTool.ts
 var FEATURE_STROKE_WIDTH = 2;
 var DEFAULT_RECT_SIZE = 10;
 var DEFAULT_CIRCLE_RADIUS = 5;
@@ -5676,6 +5035,7 @@ var FeatureTool = class {
     this.hasWorkingChanges = false;
     this.specs = [];
     this.renderSeq = 0;
+    this.subscriptions = new SubscriptionBag();
     this.handleMoving = null;
     this.handleModified = null;
     this.handleSceneGeometryChange = null;
@@ -5693,6 +5053,7 @@ var FeatureTool = class {
   }
   activate(context) {
     var _a;
+    this.subscriptions.disposeAll();
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
@@ -5721,29 +5082,32 @@ var FeatureTool = class {
       const features = configService.get("dieline.features", []) || [];
       this.workingFeatures = this.cloneFeatures(features);
       this.hasWorkingChanges = false;
-      configService.onAnyChange((e) => {
-        if (this.isUpdatingConfig) return;
-        if (e.key === "dieline.features") {
-          if (this.isFeatureSessionActive) return;
-          const next = e.value || [];
-          this.workingFeatures = this.cloneFeatures(next);
-          this.hasWorkingChanges = false;
-          this.redraw();
-          this.emitWorkingChange();
+      this.subscriptions.onConfigChange(
+        configService,
+        (e) => {
+          if (this.isUpdatingConfig) return;
+          if (e.key === "dieline.features") {
+            if (this.isFeatureSessionActive) return;
+            const next = e.value || [];
+            this.workingFeatures = this.cloneFeatures(next);
+            this.hasWorkingChanges = false;
+            this.redraw();
+            this.emitWorkingChange();
+          }
         }
-      });
+      );
     }
     const toolSessionService = context.services.get("ToolSessionService");
     this.dirtyTrackerDisposable = toolSessionService == null ? void 0 : toolSessionService.registerDirtyTracker(
       this.id,
       () => this.hasWorkingChanges
     );
-    context.eventBus.on("tool:activated", this.onToolActivated);
+    this.subscriptions.on(context.eventBus, "tool:activated", this.onToolActivated);
     this.setup();
   }
   deactivate(context) {
     var _a;
-    context.eventBus.off("tool:activated", this.onToolActivated);
+    this.subscriptions.disposeAll();
     this.restoreSessionFeaturesToConfig();
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
@@ -5886,7 +5250,7 @@ var FeatureTool = class {
     };
   }
   cloneFeatures(features) {
-    return JSON.parse(JSON.stringify(features || []));
+    return cloneWithJson(features || []);
   }
   getConfigService() {
     var _a;
@@ -6570,12 +5934,11 @@ var FeatureTool = class {
   }
 };
 
-// src/extensions/film.ts
+// src/extensions/film/FilmTool.ts
 import {
   ContributionPointIds as ContributionPointIds6
 } from "@pooder/core";
 import { FabricImage as FabricImage3 } from "fabric";
-var FILM_LAYER_ID = "overlay";
 var FILM_IMAGE_ID = "film-image";
 var DEFAULT_WIDTH2 = 800;
 var DEFAULT_HEIGHT2 = 600;
@@ -6590,8 +5953,10 @@ var FilmTool = class {
     this.specs = [];
     this.renderSeq = 0;
     this.renderImageUrl = "";
-    this.sourceSizeBySrc = /* @__PURE__ */ new Map();
-    this.pendingSizeBySrc = /* @__PURE__ */ new Map();
+    this.sourceSizeCache = createSourceSizeCache(
+      (src) => this.loadImageSize(src)
+    );
+    this.subscriptions = new SubscriptionBag();
     this.onCanvasResized = () => {
       this.updateFilm();
     };
@@ -6601,6 +5966,7 @@ var FilmTool = class {
   }
   activate(context) {
     var _a;
+    this.subscriptions.disposeAll();
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for FilmTool");
@@ -6627,28 +5993,32 @@ var FilmTool = class {
     if (configService) {
       this.url = configService.get("film.url", this.url);
       this.opacity = configService.get("film.opacity", this.opacity);
-      configService.onAnyChange((e) => {
-        if (e.key.startsWith("film.")) {
-          const prop = e.key.split(".")[1];
-          console.log(
-            `[FilmTool] Config change detected: ${e.key} -> ${e.value}`
-          );
-          if (prop && prop in this) {
-            this[prop] = e.value;
-            this.updateFilm();
+      this.subscriptions.onConfigChange(
+        configService,
+        (e) => {
+          if (e.key.startsWith("film.")) {
+            const prop = e.key.split(".")[1];
+            console.log(
+              `[FilmTool] Config change detected: ${e.key} -> ${e.value}`
+            );
+            if (prop && prop in this) {
+              this[prop] = e.value;
+              this.updateFilm();
+            }
           }
         }
-      });
+      );
     }
-    context.eventBus.on("canvas:resized", this.onCanvasResized);
+    this.subscriptions.on(context.eventBus, "canvas:resized", this.onCanvasResized);
     this.updateFilm();
   }
   deactivate(context) {
     var _a;
-    context.eventBus.off("canvas:resized", this.onCanvasResized);
+    this.subscriptions.disposeAll();
     this.renderSeq += 1;
     this.specs = [];
     this.renderImageUrl = "";
+    this.sourceSizeCache.clear();
     (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
     this.renderProducerDisposable = void 0;
     if (!this.canvasService) return;
@@ -6707,10 +6077,13 @@ var FilmTool = class {
       return [];
     }
     const { width, height } = this.getViewportSize();
-    const sourceSize = this.sourceSizeBySrc.get(imageUrl);
+    const sourceSize = this.sourceSizeCache.getSourceSize(imageUrl);
     const sourceWidth = Math.max(1, Number((sourceSize == null ? void 0 : sourceSize.width) || width));
     const sourceHeight = Math.max(1, Number((sourceSize == null ? void 0 : sourceSize.height) || height));
-    const coverScale = Math.max(width / sourceWidth, height / sourceHeight);
+    const coverScale = getCoverScale(
+      { width, height },
+      { width: sourceWidth, height: sourceHeight }
+    );
     return [
       {
         id: FILM_IMAGE_ID,
@@ -6737,24 +6110,6 @@ var FilmTool = class {
       }
     ];
   }
-  async ensureImageSize(src) {
-    if (!src) return null;
-    const cached = this.sourceSizeBySrc.get(src);
-    if (cached) return cached;
-    const pending = this.pendingSizeBySrc.get(src);
-    if (pending) {
-      return pending;
-    }
-    const task = this.loadImageSize(src);
-    this.pendingSizeBySrc.set(src, task);
-    try {
-      return await task;
-    } finally {
-      if (this.pendingSizeBySrc.get(src) === task) {
-        this.pendingSizeBySrc.delete(src);
-      }
-    }
-  }
   async loadImageSize(src) {
     try {
       const image = await FabricImage3.fromURL(src, {
@@ -6763,9 +6118,7 @@ var FilmTool = class {
       const width = Number((image == null ? void 0 : image.width) || 0);
       const height = Number((image == null ? void 0 : image.height) || 0);
       if (width > 0 && height > 0) {
-        const size = { width, height };
-        this.sourceSizeBySrc.set(src, size);
-        return size;
+        return { width, height };
       }
     } catch (error) {
       console.error("[FilmTool] Failed to load film image", src, error);
@@ -6782,7 +6135,7 @@ var FilmTool = class {
     if (!nextUrl) {
       this.renderImageUrl = "";
     } else if (nextUrl !== this.renderImageUrl) {
-      const loaded = await this.ensureImageSize(nextUrl);
+      const loaded = await this.sourceSizeCache.ensureImageSize(nextUrl);
       if (seq !== this.renderSeq) return;
       if (loaded) {
         this.renderImageUrl = nextUrl;
@@ -6795,7 +6148,7 @@ var FilmTool = class {
   }
 };
 
-// src/extensions/mirror.ts
+// src/extensions/mirror/MirrorTool.ts
 import {
   ContributionPointIds as ContributionPointIds7
 } from "@pooder/core";
@@ -6887,11 +6240,10 @@ var MirrorTool = class {
   }
 };
 
-// src/extensions/ruler.ts
+// src/extensions/ruler/RulerTool.ts
 import {
   ContributionPointIds as ContributionPointIds8
 } from "@pooder/core";
-var RULER_LAYER_ID = "ruler-overlay";
 var EXTENSION_LINE_LENGTH = 5;
 var MIN_ARROW_SIZE = 4;
 var THICKNESS_TO_STROKE_WIDTH_RATIO = 20;
@@ -7453,17 +6805,197 @@ var RulerTool = class {
   }
 };
 
-// src/extensions/white-ink.ts
+// src/extensions/white-ink/WhiteInkTool.ts
 import {
   ContributionPointIds as ContributionPointIds9
 } from "@pooder/core";
-var WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
-var WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
-var WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
-var IMAGE_OBJECT_LAYER_ID3 = "image.user";
-var WHITE_INK_DEBUG_KEY = "whiteInk.debug";
+
+// src/extensions/white-ink/commands.ts
 var WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY = "whiteInk.previewImageVisible";
 var WHITE_INK_DEFAULT_OPACITY = 0.85;
+function createWhiteInkCommands(tool) {
+  return [
+    {
+      command: "addWhiteInk",
+      id: "addWhiteInk",
+      title: "Add White Ink",
+      handler: async (url, options) => {
+        return await tool.addWhiteInkEntry(url, options);
+      }
+    },
+    {
+      command: "upsertWhiteInk",
+      id: "upsertWhiteInk",
+      title: "Upsert White Ink",
+      handler: async (url, options = {}) => {
+        return await tool.upsertWhiteInkEntry(url, options);
+      }
+    },
+    {
+      command: "getWhiteInks",
+      id: "getWhiteInks",
+      title: "Get White Inks",
+      handler: () => tool.cloneItems(tool.items)
+    },
+    {
+      command: "getWhiteInkSettings",
+      id: "getWhiteInkSettings",
+      title: "Get White Ink Settings",
+      handler: () => {
+        const first = tool.getEffectiveWhiteInkItem(tool.items);
+        const primarySource = tool.getPrimaryImageSource();
+        const sourceUrl = tool.resolveSourceUrl(first) || primarySource;
+        return {
+          id: (first == null ? void 0 : first.id) || null,
+          url: sourceUrl,
+          sourceUrl,
+          opacity: WHITE_INK_DEFAULT_OPACITY,
+          printWithWhiteInk: tool.printWithWhiteInk,
+          previewImageVisible: tool.previewImageVisible
+        };
+      }
+    },
+    {
+      command: "setWhiteInkPrintEnabled",
+      id: "setWhiteInkPrintEnabled",
+      title: "Set White Ink Preview Enabled",
+      handler: (enabled) => {
+        var _a;
+        tool.printWithWhiteInk = !!enabled;
+        const configService = (_a = tool.context) == null ? void 0 : _a.services.get("ConfigurationService");
+        configService == null ? void 0 : configService.update("whiteInk.printWithWhiteInk", tool.printWithWhiteInk);
+        tool.updateWhiteInks();
+        return { ok: true };
+      }
+    },
+    {
+      command: "setWhiteInkPreviewImageVisible",
+      id: "setWhiteInkPreviewImageVisible",
+      title: "Set White Ink Cover Visible",
+      handler: (visible) => {
+        var _a;
+        tool.previewImageVisible = !!visible;
+        const configService = (_a = tool.context) == null ? void 0 : _a.services.get("ConfigurationService");
+        configService == null ? void 0 : configService.update(
+          WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY,
+          tool.previewImageVisible
+        );
+        tool.updateWhiteInks();
+        return { ok: true };
+      }
+    },
+    {
+      command: "getWorkingWhiteInks",
+      id: "getWorkingWhiteInks",
+      title: "Get Working White Inks",
+      handler: () => tool.cloneItems(tool.workingItems)
+    },
+    {
+      command: "setWorkingWhiteInk",
+      id: "setWorkingWhiteInk",
+      title: "Set Working White Ink",
+      handler: (id, updates) => {
+        tool.updateWhiteInkInWorking(id, updates);
+      }
+    },
+    {
+      command: "updateWhiteInk",
+      id: "updateWhiteInk",
+      title: "Update White Ink",
+      handler: async (id, updates, options = {}) => {
+        await tool.updateWhiteInkItem(id, updates, options);
+      }
+    },
+    {
+      command: "removeWhiteInk",
+      id: "removeWhiteInk",
+      title: "Remove White Ink",
+      handler: (id) => {
+        tool.removeWhiteInk(id);
+      }
+    },
+    {
+      command: "clearWhiteInks",
+      id: "clearWhiteInks",
+      title: "Clear White Inks",
+      handler: () => {
+        tool.clearWhiteInks();
+      }
+    },
+    {
+      command: "resetWorkingWhiteInks",
+      id: "resetWorkingWhiteInks",
+      title: "Reset Working White Inks",
+      handler: () => {
+        tool.workingItems = tool.cloneItems(tool.items);
+        tool.hasWorkingChanges = false;
+        tool.updateWhiteInks();
+      }
+    },
+    {
+      command: "completeWhiteInks",
+      id: "completeWhiteInks",
+      title: "Complete White Inks",
+      handler: async () => {
+        return await tool.completeWhiteInks();
+      }
+    },
+    {
+      command: "setWhiteInkImage",
+      id: "setWhiteInkImage",
+      title: "Set White Ink Image",
+      handler: async (url) => {
+        if (!url) {
+          tool.clearWhiteInks();
+          return { ok: true };
+        }
+        const targetId = tool.resolveReplaceTargetId(null);
+        const upsertResult = await tool.upsertWhiteInkEntry(url, {
+          id: targetId || void 0,
+          mode: targetId ? "replace" : "add",
+          createIfMissing: true,
+          addOptions: {}
+        });
+        return { ok: true, id: upsertResult.id };
+      }
+    }
+  ];
+}
+
+// src/extensions/white-ink/config.ts
+function createWhiteInkConfigurations() {
+  return [
+    {
+      id: "whiteInk.items",
+      type: "array",
+      label: "White Ink Images",
+      default: []
+    },
+    {
+      id: "whiteInk.printWithWhiteInk",
+      type: "boolean",
+      label: "Preview White Ink",
+      default: true
+    },
+    {
+      id: "whiteInk.previewImageVisible",
+      type: "boolean",
+      label: "Show Cover During White Ink Preview",
+      default: true
+    },
+    {
+      id: "whiteInk.debug",
+      type: "boolean",
+      label: "White Ink Debug Log",
+      default: false
+    }
+  ];
+}
+
+// src/extensions/white-ink/WhiteInkTool.ts
+var WHITE_INK_DEBUG_KEY = "whiteInk.debug";
+var WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY2 = "whiteInk.previewImageVisible";
+var WHITE_INK_DEFAULT_OPACITY2 = 0.85;
 var WHITE_INK_AUTO_ITEM_ID = "white-ink-auto";
 var WHITE_INK_COVER_OPACITY_FACTOR = 0.45;
 var WHITE_INK_COVER_OPACITY_MIN = 0.15;
@@ -7479,7 +7011,9 @@ var WhiteInkTool = class {
     this.items = [];
     this.workingItems = [];
     this.hasWorkingChanges = false;
-    this.sourceSizeBySrc = /* @__PURE__ */ new Map();
+    this.sourceSizeCache = createSourceSizeCache(
+      (src) => this.loadImageSize(src)
+    );
     this.previewMaskBySource = /* @__PURE__ */ new Map();
     this.pendingPreviewMaskBySource = /* @__PURE__ */ new Map();
     this.isUpdatingConfig = false;
@@ -7490,6 +7024,7 @@ var WhiteInkTool = class {
     this.whiteSpecs = [];
     this.coverSpecs = [];
     this.overlaySpecs = [];
+    this.subscriptions = new SubscriptionBag();
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
@@ -7507,19 +7042,19 @@ var WhiteInkTool = class {
     this.onObjectAdded = (e) => {
       var _a, _b;
       const layerId = (_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.data) == null ? void 0 : _b.layerId;
-      if (layerId !== IMAGE_OBJECT_LAYER_ID3) return;
+      if (layerId !== IMAGE_OBJECT_LAYER_ID) return;
       this.updateWhiteInks();
     };
     this.onObjectModified = (e) => {
       var _a, _b;
       const layerId = (_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.data) == null ? void 0 : _b.layerId;
-      if (layerId !== IMAGE_OBJECT_LAYER_ID3) return;
+      if (layerId !== IMAGE_OBJECT_LAYER_ID) return;
       this.updateWhiteInks();
     };
     this.onObjectRemoved = (e) => {
       var _a, _b;
       const layerId = (_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.data) == null ? void 0 : _b.layerId;
-      if (layerId !== IMAGE_OBJECT_LAYER_ID3) return;
+      if (layerId !== IMAGE_OBJECT_LAYER_ID) return;
       this.updateWhiteInks();
     };
     this.onImageWorkingChanged = () => {
@@ -7528,6 +7063,7 @@ var WhiteInkTool = class {
   }
   activate(context) {
     var _a;
+    this.subscriptions.disposeAll();
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
@@ -7561,62 +7097,73 @@ var WhiteInkTool = class {
       }),
       { priority: 260 }
     );
-    context.eventBus.on("tool:activated", this.onToolActivated);
-    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
-    context.eventBus.on("object:added", this.onObjectAdded);
-    context.eventBus.on("object:modified", this.onObjectModified);
-    context.eventBus.on("object:removed", this.onObjectRemoved);
-    context.eventBus.on("image:working:change", this.onImageWorkingChanged);
+    this.subscriptions.on(context.eventBus, "tool:activated", this.onToolActivated);
+    this.subscriptions.on(
+      context.eventBus,
+      "scene:layout:change",
+      this.onSceneLayoutChanged
+    );
+    this.subscriptions.on(context.eventBus, "object:added", this.onObjectAdded);
+    this.subscriptions.on(
+      context.eventBus,
+      "object:modified",
+      this.onObjectModified
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "object:removed",
+      this.onObjectRemoved
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "image:working:change",
+      this.onImageWorkingChanged
+    );
     const configService = context.services.get(
       "ConfigurationService"
     );
     if (configService) {
-      this.items = this.normalizeItems(
-        configService.get("whiteInk.items", []) || []
-      );
-      this.workingItems = this.cloneItems(this.items);
-      this.hasWorkingChanges = false;
+      this.applyCommittedItems(configService.get("whiteInk.items", []) || []);
       this.printWithWhiteInk = !!configService.get(
         "whiteInk.printWithWhiteInk",
         true
       );
       this.previewImageVisible = !!configService.get(
-        WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY,
+        WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY2,
         true
       );
       this.migrateLegacyConfigIfNeeded(configService);
-      configService.onAnyChange((e) => {
-        if (this.isUpdatingConfig) return;
-        if (e.key === "whiteInk.items") {
-          this.items = this.normalizeItems(e.value || []);
-          if (!this.isToolActive || !this.hasWorkingChanges) {
-            this.workingItems = this.cloneItems(this.items);
-            this.hasWorkingChanges = false;
+      this.subscriptions.onConfigChange(
+        configService,
+        (e) => {
+          if (this.isUpdatingConfig) return;
+          if (e.key === "whiteInk.items") {
+            this.applyCommittedItems(e.value || []);
+            this.updateWhiteInks();
+            return;
+          }
+          if (e.key === "whiteInk.printWithWhiteInk") {
+            this.printWithWhiteInk = !!e.value;
+            this.updateWhiteInks();
+            return;
+          }
+          if (e.key === WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY2) {
+            this.previewImageVisible = !!e.value;
+            this.updateWhiteInks();
+            return;
+          }
+          if (e.key === "image.items") {
+            this.updateWhiteInks();
+            return;
+          }
+          if (e.key === WHITE_INK_DEBUG_KEY) {
+            return;
+          }
+          if (e.key.startsWith("size.")) {
+            this.updateWhiteInks();
           }
-          this.updateWhiteInks();
-          return;
-        }
-        if (e.key === "whiteInk.printWithWhiteInk") {
-          this.printWithWhiteInk = !!e.value;
-          this.updateWhiteInks();
-          return;
-        }
-        if (e.key === WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY) {
-          this.previewImageVisible = !!e.value;
-          this.updateWhiteInks();
-          return;
-        }
-        if (e.key === "image.items") {
-          this.updateWhiteInks();
-          return;
-        }
-        if (e.key === WHITE_INK_DEBUG_KEY) {
-          return;
-        }
-        if (e.key.startsWith("size.")) {
-          this.updateWhiteInks();
         }
-      });
+      );
     }
     const toolSessionService = context.services.get("ToolSessionService");
     this.dirtyTrackerDisposable = toolSessionService == null ? void 0 : toolSessionService.registerDirtyTracker(
@@ -7627,14 +7174,10 @@ var WhiteInkTool = class {
   }
   deactivate(context) {
     var _a, _b;
-    context.eventBus.off("tool:activated", this.onToolActivated);
-    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
-    context.eventBus.off("object:added", this.onObjectAdded);
-    context.eventBus.off("object:modified", this.onObjectModified);
-    context.eventBus.off("object:removed", this.onObjectRemoved);
-    context.eventBus.off("image:working:change", this.onImageWorkingChanged);
+    this.subscriptions.disposeAll();
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
+    this.sourceSizeCache.clear();
     this.clearRenderedWhiteInks();
     (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
     this.renderProducerDisposable = void 0;
@@ -7662,171 +7205,8 @@ var WhiteInkTool = class {
           }
         }
       ],
-      [ContributionPointIds9.CONFIGURATIONS]: [
-        {
-          id: "whiteInk.items",
-          type: "array",
-          label: "White Ink Images",
-          default: []
-        },
-        {
-          id: "whiteInk.printWithWhiteInk",
-          type: "boolean",
-          label: "Preview White Ink",
-          default: true
-        },
-        {
-          id: WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY,
-          type: "boolean",
-          label: "Show Cover During White Ink Preview",
-          default: true
-        },
-        {
-          id: WHITE_INK_DEBUG_KEY,
-          type: "boolean",
-          label: "White Ink Debug Log",
-          default: false
-        }
-      ],
-      [ContributionPointIds9.COMMANDS]: [
-        {
-          command: "addWhiteInk",
-          title: "Add White Ink",
-          handler: async (url, options) => {
-            return await this.addWhiteInkEntry(url, options);
-          }
-        },
-        {
-          command: "upsertWhiteInk",
-          title: "Upsert White Ink",
-          handler: async (url, options = {}) => {
-            return await this.upsertWhiteInkEntry(url, options);
-          }
-        },
-        {
-          command: "getWhiteInks",
-          title: "Get White Inks",
-          handler: () => this.cloneItems(this.items)
-        },
-        {
-          command: "getWhiteInkSettings",
-          title: "Get White Ink Settings",
-          handler: () => {
-            const first = this.getEffectiveWhiteInkItem(this.items);
-            const primarySource = this.getPrimaryImageSource();
-            const sourceUrl = this.resolveSourceUrl(first) || primarySource;
-            return {
-              id: (first == null ? void 0 : first.id) || null,
-              url: sourceUrl,
-              sourceUrl,
-              opacity: WHITE_INK_DEFAULT_OPACITY,
-              printWithWhiteInk: this.printWithWhiteInk,
-              previewImageVisible: this.previewImageVisible
-            };
-          }
-        },
-        {
-          command: "setWhiteInkPrintEnabled",
-          title: "Set White Ink Preview Enabled",
-          handler: (enabled) => {
-            var _a;
-            this.printWithWhiteInk = !!enabled;
-            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
-              "ConfigurationService"
-            );
-            configService == null ? void 0 : configService.update(
-              "whiteInk.printWithWhiteInk",
-              this.printWithWhiteInk
-            );
-            this.updateWhiteInks();
-            return { ok: true };
-          }
-        },
-        {
-          command: "setWhiteInkPreviewImageVisible",
-          title: "Set White Ink Cover Visible",
-          handler: (visible) => {
-            var _a;
-            this.previewImageVisible = !!visible;
-            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
-              "ConfigurationService"
-            );
-            configService == null ? void 0 : configService.update(
-              WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY,
-              this.previewImageVisible
-            );
-            this.updateWhiteInks();
-            return { ok: true };
-          }
-        },
-        {
-          command: "getWorkingWhiteInks",
-          title: "Get Working White Inks",
-          handler: () => this.cloneItems(this.workingItems)
-        },
-        {
-          command: "setWorkingWhiteInk",
-          title: "Set Working White Ink",
-          handler: (id, updates) => {
-            this.updateWhiteInkInWorking(id, updates);
-          }
-        },
-        {
-          command: "updateWhiteInk",
-          title: "Update White Ink",
-          handler: async (id, updates, options = {}) => {
-            await this.updateWhiteInkItem(id, updates, options);
-          }
-        },
-        {
-          command: "removeWhiteInk",
-          title: "Remove White Ink",
-          handler: (id) => {
-            this.removeWhiteInk(id);
-          }
-        },
-        {
-          command: "clearWhiteInks",
-          title: "Clear White Inks",
-          handler: () => {
-            this.clearWhiteInks();
-          }
-        },
-        {
-          command: "resetWorkingWhiteInks",
-          title: "Reset Working White Inks",
-          handler: () => {
-            this.workingItems = this.cloneItems(this.items);
-            this.hasWorkingChanges = false;
-            this.updateWhiteInks();
-          }
-        },
-        {
-          command: "completeWhiteInks",
-          title: "Complete White Inks",
-          handler: async () => {
-            return await this.completeWhiteInks();
-          }
-        },
-        {
-          command: "setWhiteInkImage",
-          title: "Set White Ink Image",
-          handler: async (url) => {
-            if (!url) {
-              this.clearWhiteInks();
-              return { ok: true };
-            }
-            const targetId = this.resolveReplaceTargetId(null);
-            const upsertResult = await this.upsertWhiteInkEntry(url, {
-              id: targetId || void 0,
-              mode: targetId ? "replace" : "add",
-              createIfMissing: true,
-              addOptions: {}
-            });
-            return { ok: true, id: upsertResult.id };
-          }
-        }
-      ]
+      [ContributionPointIds9.CONFIGURATIONS]: createWhiteInkConfigurations(),
+      [ContributionPointIds9.COMMANDS]: createWhiteInkCommands(this)
     };
   }
   migrateLegacyConfigIfNeeded(configService) {
@@ -7836,15 +7216,12 @@ var WhiteInkTool = class {
     const item = this.normalizeItem({
       id: this.generateId(),
       sourceUrl: legacyMask,
-      opacity: WHITE_INK_DEFAULT_OPACITY
+      opacity: WHITE_INK_DEFAULT_OPACITY2
+    });
+    this.applyCommittedItems([item]);
+    runDeferredConfigUpdate(this, () => {
+      configService.update("whiteInk.items", this.items);
     });
-    this.items = [item];
-    this.workingItems = this.cloneItems(this.items);
-    this.isUpdatingConfig = true;
-    configService.update("whiteInk.items", this.items);
-    setTimeout(() => {
-      this.isUpdatingConfig = false;
-    }, 0);
   }
   syncToolActiveFromWorkbench(fallbackId) {
     var _a;
@@ -7886,7 +7263,7 @@ var WhiteInkTool = class {
       id: String(item.id || this.generateId()),
       sourceUrl,
       url: sourceUrl,
-      opacity: WHITE_INK_DEFAULT_OPACITY
+      opacity: WHITE_INK_DEFAULT_OPACITY2
     };
   }
   normalizeItems(items) {
@@ -7905,7 +7282,7 @@ var WhiteInkTool = class {
     }
     return {
       id: WHITE_INK_AUTO_ITEM_ID,
-      opacity: WHITE_INK_DEFAULT_OPACITY
+      opacity: WHITE_INK_DEFAULT_OPACITY2
     };
   }
   generateId() {
@@ -7928,31 +7305,45 @@ var WhiteInkTool = class {
     }
     return null;
   }
+  applyCommittedItems(nextItems) {
+    const session = {
+      committed: this.items,
+      working: this.workingItems,
+      hasWorkingChanges: this.hasWorkingChanges
+    };
+    applyCommittedSnapshot(session, this.normalizeItems(nextItems), {
+      clone: (items) => this.cloneItems(items),
+      toolActive: this.isToolActive,
+      preserveDirtyWorking: true
+    });
+    this.items = session.committed;
+    this.workingItems = session.working;
+    this.hasWorkingChanges = session.hasWorkingChanges;
+  }
   updateConfig(newItems, skipCanvasUpdate = false) {
     if (!this.context) return;
-    this.isUpdatingConfig = true;
-    this.items = this.normalizeItems(newItems);
-    if (!this.isToolActive || !this.hasWorkingChanges) {
-      this.workingItems = this.cloneItems(this.items);
-      this.hasWorkingChanges = false;
-    }
-    const configService = this.context.services.get(
-      "ConfigurationService"
+    this.applyCommittedItems(newItems);
+    runDeferredConfigUpdate(
+      this,
+      () => {
+        var _a;
+        const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+          "ConfigurationService"
+        );
+        configService == null ? void 0 : configService.update("whiteInk.items", this.items);
+        if (!skipCanvasUpdate) {
+          this.updateWhiteInks();
+        }
+      },
+      50
     );
-    configService == null ? void 0 : configService.update("whiteInk.items", this.items);
-    if (!skipCanvasUpdate) {
-      this.updateWhiteInks();
-    }
-    setTimeout(() => {
-      this.isUpdatingConfig = false;
-    }, 50);
   }
   async addWhiteInkEntry(url, options) {
     const id = this.generateId();
     const item = this.normalizeItem({
       id,
       sourceUrl: url,
-      opacity: WHITE_INK_DEFAULT_OPACITY,
+      opacity: WHITE_INK_DEFAULT_OPACITY2,
       ...options
     });
     const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
@@ -8037,7 +7428,7 @@ var WhiteInkTool = class {
     this.updateConfig(next);
   }
   clearWhiteInks() {
-    this.sourceSizeBySrc.clear();
+    this.sourceSizeCache.clear();
     this.previewMaskBySource.clear();
     this.pendingPreviewMaskBySource.clear();
     this.updateConfig([]);
@@ -8049,41 +7440,19 @@ var WhiteInkTool = class {
   }
   getFrameRect() {
     var _a;
-    if (!this.canvasService) {
-      return { left: 0, top: 0, width: 0, height: 0 };
-    }
     const configService = (_a = this.context) == null ? void 0 : _a.services.get(
       "ConfigurationService"
     );
-    if (!configService) {
-      return { left: 0, top: 0, width: 0, height: 0 };
-    }
-    const sizeState = readSizeState(configService);
-    const layout = computeSceneLayout(this.canvasService, sizeState);
-    if (!layout) {
-      return { left: 0, top: 0, width: 0, height: 0 };
-    }
-    return this.canvasService.toSceneRect({
-      left: layout.cutRect.left,
-      top: layout.cutRect.top,
-      width: layout.cutRect.width,
-      height: layout.cutRect.height
-    });
+    return resolveCutFrameRect(this.canvasService, configService);
   }
   toLayoutSceneRect(rect) {
-    return {
-      left: rect.left,
-      top: rect.top,
-      width: rect.width,
-      height: rect.height,
-      space: "scene"
-    };
+    return toLayoutSceneRect(rect);
   }
   getImageObjects() {
     if (!this.canvasService) return [];
     return this.canvasService.canvas.getObjects().filter((obj) => {
       var _a;
-      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID3;
+      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID;
     });
   }
   getPrimaryImageObject() {
@@ -8155,21 +7524,16 @@ var WhiteInkTool = class {
     return snapshot.src === placement.committedUrl;
   }
   getCoverScale(frame, source) {
-    const frameW = Math.max(1, frame.width);
-    const frameH = Math.max(1, frame.height);
-    const sourceW = Math.max(1, source.width);
-    const sourceH = Math.max(1, source.height);
-    return Math.max(frameW / sourceW, frameH / sourceH);
+    return getCoverScale(frame, source);
   }
   async ensureSourceSize(sourceUrl) {
-    if (!sourceUrl) return null;
-    const cached = this.getSourceSize(sourceUrl);
-    if (cached) return cached;
+    return this.sourceSizeCache.ensureImageSize(sourceUrl);
+  }
+  async loadImageSize(sourceUrl) {
     try {
       const image = await this.loadImageElement(sourceUrl);
       const size = this.getElementSize(image);
       if (!size) return null;
-      this.rememberSourceSize(sourceUrl, size);
       return {
         width: size.width,
         height: size.height
@@ -8214,22 +7578,10 @@ var WhiteInkTool = class {
     return (obj == null ? void 0 : obj._element) || (obj == null ? void 0 : obj._originalElement) || null;
   }
   rememberSourceSize(src, size) {
-    if (!src) return;
-    if (!Number.isFinite(size.width) || !Number.isFinite(size.height)) return;
-    if (size.width <= 0 || size.height <= 0) return;
-    this.sourceSizeBySrc.set(src, {
-      width: size.width,
-      height: size.height
-    });
+    this.sourceSizeCache.rememberSourceSize(src, size);
   }
   getSourceSize(src) {
-    if (!src) return null;
-    const cached = this.sourceSizeBySrc.get(src);
-    if (!cached) return null;
-    return {
-      width: cached.width,
-      height: cached.height
-    };
+    return this.sourceSizeCache.getSourceSize(src);
   }
   computeWhiteScaleAdjust(baseSource, whiteSource) {
     if (!baseSource || !whiteSource || baseSource === whiteSource) {
@@ -8249,7 +7601,7 @@ var WhiteInkTool = class {
     };
   }
   computeCoverOpacity() {
-    const raw = WHITE_INK_DEFAULT_OPACITY * WHITE_INK_COVER_OPACITY_FACTOR;
+    const raw = WHITE_INK_DEFAULT_OPACITY2 * WHITE_INK_COVER_OPACITY_FACTOR;
     return Math.max(
       WHITE_INK_COVER_OPACITY_MIN,
       Math.min(WHITE_INK_COVER_OPACITY_MAX, raw)
@@ -8513,7 +7865,7 @@ var WhiteInkTool = class {
   purgeSourceCaches(item) {
     const sourceUrl = this.resolveSourceUrl(item);
     if (!sourceUrl) return;
-    this.sourceSizeBySrc.delete(sourceUrl);
+    this.sourceSizeCache.deleteSourceSize(sourceUrl);
     const prefix = `${sourceUrl}::`;
     Array.from(this.previewMaskBySource.keys()).forEach((cacheKey) => {
       if (cacheKey.startsWith(prefix)) {
@@ -8552,7 +7904,7 @@ var WhiteInkTool = class {
               "white-ink.main",
               snapshot,
               sources.whiteSrc,
-              WHITE_INK_DEFAULT_OPACITY,
+              WHITE_INK_DEFAULT_OPACITY2,
               WHITE_INK_OBJECT_LAYER_ID,
               "white-ink",
               sources.whiteScaleAdjustX,
@@ -8660,7 +8012,7 @@ var WhiteInkTool = class {
   }
 };
 
-// src/extensions/sceneLayout.ts
+// src/services/SceneLayoutService.ts
 import {
   COMMAND_SERVICE,
   CONFIGURATION_SERVICE
@@ -8673,6 +8025,7 @@ var SceneLayoutService = class {
   constructor() {
     this.lastLayout = null;
     this.lastGeometry = null;
+    this.subscriptions = new SubscriptionBag();
     this.commandDisposables = [];
     this.onCanvasResized = () => {
       this.refresh();
@@ -8708,16 +8061,13 @@ var SceneLayoutService = class {
         () => this.getGeometry()
       )
     );
-    this.onConfigChange = configService.onAnyChange(this.onConfigChanged);
-    context.eventBus.on("canvas:resized", this.onCanvasResized);
+    this.subscriptions.disposeAll();
+    this.subscriptions.onConfigChange(configService, this.onConfigChanged);
+    this.subscriptions.on(context.eventBus, "canvas:resized", this.onCanvasResized);
     this.refresh();
   }
   dispose(context) {
-    var _a, _b;
-    const activeContext = (_a = this.context) != null ? _a : context;
-    activeContext.eventBus.off("canvas:resized", this.onCanvasResized);
-    (_b = this.onConfigChange) == null ? void 0 : _b.dispose();
-    this.onConfigChange = void 0;
+    this.subscriptions.disposeAll();
     this.commandDisposables.forEach((item) => item.dispose());
     this.commandDisposables = [];
     this.context = void 0;
@@ -8871,6 +8221,9 @@ function evaluateVisibilityExpr(expr, context) {
     if (!toolId) return false;
     return context.isSessionActive ? context.isSessionActive(toolId) : false;
   }
+  if (expr.op === "anySessionActive") {
+    return context.hasAnyActiveSession ? context.hasAnyActiveSession() : false;
+  }
   if (expr.op === "layerExists") {
     return layerState(context, expr.layerId).exists === true;
   }
@@ -8904,6 +8257,7 @@ var CanvasService = class {
     this.visibilityRefreshScheduled = false;
     this.managedProducerPassIds = /* @__PURE__ */ new Set();
     this.managedPassMetas = /* @__PURE__ */ new Map();
+    this.managedPassEffects = [];
     this.canvasForwardersBound = false;
     this.forwardSelectionCreated = (e) => {
       var _a;
@@ -8931,9 +8285,11 @@ var CanvasService = class {
     };
     this.onToolActivated = () => {
       this.applyManagedPassVisibility();
+      void this.applyManagedPassEffects(void 0, { render: true });
     };
     this.onToolSessionChanged = () => {
       this.applyManagedPassVisibility();
+      void this.applyManagedPassEffects(void 0, { render: true });
     };
     this.onCanvasObjectChanged = () => {
       if (this.producerApplyInProgress) return;
@@ -8998,6 +8354,7 @@ var CanvasService = class {
     this.renderProducers.clear();
     this.managedProducerPassIds.clear();
     this.managedPassMetas.clear();
+    this.managedPassEffects = [];
     this.context = void 0;
     this.workbenchService = void 0;
     this.toolSessionService = void 0;
@@ -9104,6 +8461,7 @@ var CanvasService = class {
     return {
       type: "clipPath",
       key,
+      visibility: effect.visibility,
       source: {
         ...source,
         id: sourceId
@@ -9211,22 +8569,30 @@ var CanvasService = class {
     });
     return state;
   }
-  applyManagedPassVisibility(options = {}) {
+  isSessionActive(toolId) {
+    if (!this.toolSessionService) return false;
+    return this.toolSessionService.getState(toolId).status === "active";
+  }
+  hasAnyActiveSession() {
+    var _a, _b;
+    return (_b = (_a = this.toolSessionService) == null ? void 0 : _a.hasAnyActiveSession()) != null ? _b : false;
+  }
+  buildVisibilityEvalContext(layers) {
     var _a, _b;
+    return {
+      activeToolId: (_b = (_a = this.workbenchService) == null ? void 0 : _a.activeToolId) != null ? _b : null,
+      isSessionActive: (toolId) => this.isSessionActive(toolId),
+      hasAnyActiveSession: () => this.hasAnyActiveSession(),
+      layers
+    };
+  }
+  applyManagedPassVisibility(options = {}) {
     if (!this.managedPassMetas.size) return false;
     const layers = this.getPassRuntimeState();
-    const activeToolId = (_b = (_a = this.workbenchService) == null ? void 0 : _a.activeToolId) != null ? _b : null;
-    const isSessionActive = (toolId) => {
-      if (!this.toolSessionService) return false;
-      return this.toolSessionService.getState(toolId).status === "active";
-    };
+    const context = this.buildVisibilityEvalContext(layers);
     let changed = false;
     this.managedPassMetas.forEach((meta) => {
-      const visible = evaluateVisibilityExpr(meta.visibility, {
-        activeToolId,
-        isSessionActive,
-        layers
-      });
+      const visible = evaluateVisibilityExpr(meta.visibility, context);
       changed = this.setPassVisibility(meta.id, visible) || changed;
     });
     if (changed && options.render !== false) {
@@ -9294,18 +8660,24 @@ var CanvasService = class {
       }
       this.managedProducerPassIds = nextPassIds;
       this.managedPassMetas = nextManagedPassMetas;
+      this.managedPassEffects = nextEffects;
       this.syncManagedPassStacking(Array.from(nextManagedPassMetas.values()));
-      await this.applyManagedPassEffects(nextEffects);
+      await this.applyManagedPassEffects(nextEffects, { render: false });
       this.applyManagedPassVisibility({ render: false });
     } finally {
       this.producerApplyInProgress = false;
     }
     this.requestRenderAll();
   }
-  async applyManagedPassEffects(effects) {
+  async applyManagedPassEffects(effects = this.managedPassEffects, options = {}) {
     const effectTargetMap = /* @__PURE__ */ new Map();
+    const layers = this.getPassRuntimeState();
+    const visibilityContext = this.buildVisibilityEvalContext(layers);
     for (const effect of effects) {
       if (effect.type !== "clipPath") continue;
+      if (!evaluateVisibilityExpr(effect.visibility, visibilityContext)) {
+        continue;
+      }
       effect.targetPassIds.forEach((targetPassId) => {
         this.getPassCanvasObjects(targetPassId).forEach((obj) => {
           effectTargetMap.set(obj, effect);
@@ -9337,6 +8709,9 @@ var CanvasService = class {
         targetEffect.key
       );
     }
+    if (options.render !== false) {
+      this.requestRenderAll();
+    }
   }
   getObject(id, passId) {
     const normalizedId = String(id || "").trim();
@@ -9873,5 +9248,13 @@ export {
   SizeTool,
   ViewportSystem,
   WhiteInkTool,
+  getCoverScale as computeImageCoverScale,
+  getCoverScale as computeWhiteInkCoverScale,
+  createDielineCommands,
+  createDielineConfigurations,
+  createImageCommands,
+  createImageConfigurations,
+  createWhiteInkCommands,
+  createWhiteInkConfigurations,
   evaluateVisibilityExpr
 };