@pooder/kit 3.0.1 → 3.2.0

package/dist/index.mjs

@@ -394,6 +394,24 @@ var ImageTracer = class {
 
 // src/coordinate.ts
 var Coordinate = class {
+  /**
+   * Calculate layout to fit content within container while preserving aspect ratio.
+   */
+  static calculateLayout(container, content, padding = 0) {
+    const availableWidth = Math.max(0, container.width - padding * 2);
+    const availableHeight = Math.max(0, container.height - padding * 2);
+    if (content.width === 0 || content.height === 0) {
+      return { scale: 1, offsetX: 0, offsetY: 0, width: 0, height: 0 };
+    }
+    const scaleX = availableWidth / content.width;
+    const scaleY = availableHeight / content.height;
+    const scale = Math.min(scaleX, scaleY);
+    const width = content.width * scale;
+    const height = content.height * scale;
+    const offsetX = (container.width - width) / 2;
+    const offsetY = (container.height - height) / 2;
+    return { scale, offsetX, offsetY, width, height };
+  }
   /**
    * Convert an absolute value to a normalized value (0-1).
    * @param value Absolute value (e.g., pixels)
@@ -428,10 +446,85 @@ var Coordinate = class {
       y: this.toAbsolute(point.y, size.height)
     };
   }
+  static convertUnit(value, from, to) {
+    if (from === to) return value;
+    const toMM = {
+      px: 0.264583,
+      // 1px = 0.264583mm (96 DPI)
+      mm: 1,
+      cm: 10,
+      in: 25.4
+    };
+    const mmValue = value * (from === "px" ? toMM.px : toMM[from] || 1);
+    if (to === "px") {
+      return mmValue / toMM.px;
+    }
+    return mmValue / (toMM[to] || 1);
+  }
 };
 
 // src/geometry.ts
 import paper from "paper";
+function resolveHolePosition(hole, geometry, canvasSize) {
+  if (hole.anchor) {
+    const { x, y, width, height } = geometry;
+    let bx = x;
+    let by = y;
+    const left = x - width / 2;
+    const right = x + width / 2;
+    const top = y - height / 2;
+    const bottom = y + height / 2;
+    switch (hole.anchor) {
+      case "top-left":
+        bx = left;
+        by = top;
+        break;
+      case "top-center":
+        bx = x;
+        by = top;
+        break;
+      case "top-right":
+        bx = right;
+        by = top;
+        break;
+      case "center-left":
+        bx = left;
+        by = y;
+        break;
+      case "center":
+        bx = x;
+        by = y;
+        break;
+      case "center-right":
+        bx = right;
+        by = y;
+        break;
+      case "bottom-left":
+        bx = left;
+        by = bottom;
+        break;
+      case "bottom-center":
+        bx = x;
+        by = bottom;
+        break;
+      case "bottom-right":
+        bx = right;
+        by = bottom;
+        break;
+    }
+    return {
+      x: bx + (hole.offsetX || 0),
+      y: by + (hole.offsetY || 0)
+    };
+  } else if (hole.x !== void 0 && hole.y !== void 0) {
+    const { x, width, y, height } = geometry;
+    return {
+      x: hole.x * width + (x - width / 2) + (hole.offsetX || 0),
+      y: hole.y * height + (y - height / 2) + (hole.offsetY || 0)
+    };
+  }
+  return { x: 0, y: 0 };
+}
 function ensurePaper(width, height) {
   if (!paper.project) {
     paper.setup(new paper.Size(width, height));
@@ -533,7 +626,10 @@ function getDielineShape(options) {
         cutsPath.remove();
         mainShape = temp;
       } catch (e) {
-        console.error("Geometry: Failed to subtract cutsPath from mainShape", e);
+        console.error(
+          "Geometry: Failed to subtract cutsPath from mainShape",
+          e
+        );
       }
     }
   }
@@ -626,7 +722,12 @@ function getPathBounds(pathData) {
   path.pathData = pathData;
   const bounds = path.bounds;
   path.remove();
-  return { width: bounds.width, height: bounds.height };
+  return {
+    x: bounds.x,
+    y: bounds.y,
+    width: bounds.width,
+    height: bounds.height
+  };
 }
 
 // src/dieline.ts
@@ -636,6 +737,7 @@ var DielineTool = class {
     this.metadata = {
       name: "DielineTool"
     };
+    this.unit = "mm";
     this.shape = "rect";
     this.width = 500;
     this.height = 500;
@@ -646,6 +748,7 @@ var DielineTool = class {
     this.outsideColor = "#ffffff";
     this.showBleedLines = true;
     this.holes = [];
+    this.padding = 140;
     if (options) {
       Object.assign(this, options);
     }
@@ -659,14 +762,12 @@ var DielineTool = class {
     }
     const configService = context.services.get("ConfigurationService");
     if (configService) {
+      this.unit = configService.get("dieline.unit", this.unit);
       this.shape = configService.get("dieline.shape", this.shape);
       this.width = configService.get("dieline.width", this.width);
       this.height = configService.get("dieline.height", this.height);
       this.radius = configService.get("dieline.radius", this.radius);
-      this.borderLength = configService.get(
-        "dieline.borderLength",
-        this.borderLength
-      );
+      this.padding = configService.get("dieline.padding", this.padding);
       this.offset = configService.get("dieline.offset", this.offset);
       this.style = configService.get("dieline.style", this.style);
       this.insideColor = configService.get(
@@ -707,6 +808,13 @@ var DielineTool = class {
   contribute() {
     return {
       [ContributionPointIds2.CONFIGURATIONS]: [
+        {
+          id: "dieline.unit",
+          type: "select",
+          label: "Unit",
+          options: ["px", "mm", "cm", "in"],
+          default: this.unit
+        },
         {
           id: "dieline.shape",
           type: "select",
@@ -742,15 +850,14 @@ var DielineTool = class {
           id: "dieline.position",
           type: "json",
           label: "Position (Normalized)",
-          default: this.position
+          default: this.radius
         },
         {
-          id: "dieline.borderLength",
-          type: "number",
-          label: "Margin",
-          min: 0,
-          max: 500,
-          default: this.borderLength
+          id: "dieline.padding",
+          type: "select",
+          label: "View Padding",
+          options: [0, 10, 20, 40, 60, 100, "2%", "5%", "10%", "15%", "20%"],
+          default: this.padding
         },
         {
           id: "dieline.offset",
@@ -793,65 +900,6 @@ var DielineTool = class {
         }
       ],
       [ContributionPointIds2.COMMANDS]: [
-        {
-          command: "reset",
-          title: "Reset Dieline",
-          handler: () => {
-            this.shape = "rect";
-            this.width = 300;
-            this.height = 300;
-            this.radius = 0;
-            this.offset = 0;
-            this.style = "solid";
-            this.insideColor = "rgba(0,0,0,0)";
-            this.outsideColor = "#ffffff";
-            this.showBleedLines = true;
-            this.holes = [];
-            this.pathData = void 0;
-            this.updateDieline();
-            return true;
-          }
-        },
-        {
-          command: "setDimensions",
-          title: "Set Dimensions",
-          handler: (width, height) => {
-            if (this.width === width && this.height === height) return true;
-            this.width = width;
-            this.height = height;
-            this.updateDieline();
-            return true;
-          }
-        },
-        {
-          command: "setShape",
-          title: "Set Shape",
-          handler: (shape) => {
-            if (this.shape === shape) return true;
-            this.shape = shape;
-            this.updateDieline();
-            return true;
-          }
-        },
-        {
-          command: "setBleed",
-          title: "Set Bleed",
-          handler: (bleed) => {
-            if (this.offset === bleed) return true;
-            this.offset = bleed;
-            this.updateDieline();
-            return true;
-          }
-        },
-        {
-          command: "setHoles",
-          title: "Set Holes",
-          handler: (holes) => {
-            this.holes = holes;
-            this.updateDieline(false);
-            return true;
-          }
-        },
         {
           command: "getGeometry",
           title: "Get Geometry",
@@ -870,16 +918,23 @@ var DielineTool = class {
           command: "detectEdge",
           title: "Detect Edge from Image",
           handler: async (imageUrl, options) => {
+            var _a;
             try {
               const pathData = await ImageTracer.trace(imageUrl, options);
               const bounds = getPathBounds(pathData);
               const currentMax = Math.max(this.width, this.height);
               const scale = currentMax / Math.max(bounds.width, bounds.height);
-              this.width = bounds.width * scale;
-              this.height = bounds.height * scale;
-              this.shape = "custom";
-              this.pathData = pathData;
-              this.updateDieline();
+              const newWidth = bounds.width * scale;
+              const newHeight = bounds.height * scale;
+              const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+                "ConfigurationService"
+              );
+              if (configService) {
+                configService.update("dieline.width", newWidth);
+                configService.update("dieline.height", newHeight);
+                configService.update("dieline.shape", "custom");
+                configService.update("dieline.pathData", pathData);
+              }
               return pathData;
             } catch (e) {
               console.error("Edge detection failed", e);
@@ -938,11 +993,25 @@ var DielineTool = class {
     }
     return new Pattern({ source: canvas, repetition: "repeat" });
   }
+  resolvePadding(containerWidth, containerHeight) {
+    if (typeof this.padding === "number") {
+      return this.padding;
+    }
+    if (typeof this.padding === "string") {
+      if (this.padding.endsWith("%")) {
+        const percent = parseFloat(this.padding) / 100;
+        return Math.min(containerWidth, containerHeight) * percent;
+      }
+      return parseFloat(this.padding) || 0;
+    }
+    return 0;
+  }
   updateDieline(emitEvent = true) {
     if (!this.canvasService) return;
     const layer = this.getLayer();
     if (!layer) return;
     const {
+      unit,
       shape,
       radius,
       offset,
@@ -950,35 +1019,60 @@ var DielineTool = class {
       insideColor,
       outsideColor,
       position,
-      borderLength,
       showBleedLines,
       holes
     } = this;
     let { width, height } = this;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
-    if (borderLength && borderLength > 0) {
-      width = Math.max(0, canvasW - borderLength * 2);
-      height = Math.max(0, canvasH - borderLength * 2);
-    }
-    const normalizedPos = position != null ? position : { x: 0.5, y: 0.5 };
-    const cx = Coordinate.toAbsolute(normalizedPos.x, canvasW);
-    const cy = Coordinate.toAbsolute(normalizedPos.y, canvasH);
+    const paddingPx = this.resolvePadding(canvasW, canvasH);
+    const layout = Coordinate.calculateLayout(
+      { width: canvasW, height: canvasH },
+      { width, height },
+      paddingPx
+    );
+    const scale = layout.scale;
+    const cx = layout.offsetX + layout.width / 2;
+    const cy = layout.offsetY + layout.height / 2;
+    const visualWidth = layout.width;
+    const visualHeight = layout.height;
+    const visualRadius = radius * scale;
+    const visualOffset = offset * scale;
     layer.remove(...layer.getObjects());
+    const geometryForHoles = {
+      x: cx,
+      y: cy,
+      width: visualWidth,
+      height: visualHeight
+      // Pass scale/unit context if needed by resolveHolePosition (though currently unused there)
+    };
     const absoluteHoles = (holes || []).map((h) => {
-      const p = Coordinate.denormalizePoint(
-        { x: h.x, y: h.y },
-        { width: canvasW, height: canvasH }
-      );
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+      const offsetScale = unitScale * scale;
+      const hWithPixelOffsets = {
+        ...h,
+        offsetX: (h.offsetX || 0) * offsetScale,
+        offsetY: (h.offsetY || 0) * offsetScale
+      };
+      const pos = resolveHolePosition(hWithPixelOffsets, geometryForHoles, {
+        width: canvasW,
+        height: canvasH
+      });
       return {
         ...h,
-        x: p.x,
-        y: p.y
+        x: pos.x,
+        y: pos.y,
+        // Scale hole radii: mm -> current unit -> pixels
+        innerRadius: h.innerRadius * offsetScale,
+        outerRadius: h.outerRadius * offsetScale,
+        // Store scaled offsets in the result for consistency, though pos is already resolved
+        offsetX: hWithPixelOffsets.offsetX,
+        offsetY: hWithPixelOffsets.offsetY
       };
     });
-    const cutW = Math.max(0, width + offset * 2);
-    const cutH = Math.max(0, height + offset * 2);
-    const cutR = radius === 0 ? 0 : Math.max(0, radius + offset);
+    const cutW = Math.max(0, visualWidth + visualOffset * 2);
+    const cutH = Math.max(0, visualHeight + visualOffset * 2);
+    const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
     const maskPathData = generateMaskPath({
       canvasWidth: canvasW,
       canvasHeight: canvasH,
@@ -1028,15 +1122,15 @@ var DielineTool = class {
       const bleedPathData = generateBleedZonePath(
         {
           shape,
-          width,
-          height,
-          radius,
+          width: visualWidth,
+          height: visualHeight,
+          radius: visualRadius,
           x: cx,
           y: cy,
           holes: absoluteHoles,
           pathData: this.pathData
         },
-        offset
+        visualOffset
       );
       if (showBleedLines !== false) {
         const pattern = this.createHatchPattern("red");
@@ -1079,13 +1173,12 @@ var DielineTool = class {
     }
     const borderPathData = generateDielinePath({
       shape,
-      width,
-      height,
-      radius,
+      width: visualWidth,
+      height: visualHeight,
+      radius: visualRadius,
       x: cx,
       y: cy,
       holes: absoluteHoles,
-      // FIX: Use absoluteHoles instead of holes
       pathData: this.pathData
     });
     const borderObj = new Path(borderPathData, {
@@ -1123,114 +1216,107 @@ var DielineTool = class {
     }
   }
   getGeometry() {
-    var _a, _b;
     if (!this.canvasService) return null;
-    const { shape, width, height, radius, position, borderLength, offset } = this;
+    const { unit, shape, width, height, radius, position, offset } = this;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
-    let visualWidth = width;
-    let visualHeight = height;
-    if (borderLength && borderLength > 0) {
-      visualWidth = Math.max(0, canvasW - borderLength * 2);
-      visualHeight = Math.max(0, canvasH - borderLength * 2);
-    }
-    const cx = Coordinate.toAbsolute((_a = position == null ? void 0 : position.x) != null ? _a : 0.5, canvasW);
-    const cy = Coordinate.toAbsolute((_b = position == null ? void 0 : position.y) != null ? _b : 0.5, canvasH);
+    const paddingPx = this.resolvePadding(canvasW, canvasH);
+    const layout = Coordinate.calculateLayout(
+      { width: canvasW, height: canvasH },
+      { width, height },
+      paddingPx
+    );
+    const scale = layout.scale;
+    const cx = layout.offsetX + layout.width / 2;
+    const cy = layout.offsetY + layout.height / 2;
+    const visualWidth = layout.width;
+    const visualHeight = layout.height;
     return {
       shape,
+      unit,
       x: cx,
       y: cy,
       width: visualWidth,
       height: visualHeight,
-      radius,
-      offset,
-      borderLength,
+      radius: radius * scale,
+      offset: offset * scale,
+      // Pass scale to help other tools (like HoleTool) convert units
+      scale,
       pathData: this.pathData
     };
   }
-  exportCutImage() {
-    var _a, _b, _c, _d;
+  async exportCutImage() {
     if (!this.canvasService) return null;
-    const canvas = this.canvasService.canvas;
+    const userLayer = this.canvasService.getLayer("user");
+    if (!userLayer) return null;
     const { shape, width, height, radius, position, holes } = this;
-    const canvasW = canvas.width || 800;
-    const canvasH = canvas.height || 600;
-    const cx = Coordinate.toAbsolute((_a = position == null ? void 0 : position.x) != null ? _a : 0.5, canvasW);
-    const cy = Coordinate.toAbsolute((_b = position == null ? void 0 : position.y) != null ? _b : 0.5, canvasH);
+    const canvasW = this.canvasService.canvas.width || 800;
+    const canvasH = this.canvasService.canvas.height || 600;
+    const paddingPx = this.resolvePadding(canvasW, canvasH);
+    const layout = Coordinate.calculateLayout(
+      { width: canvasW, height: canvasH },
+      { width, height },
+      paddingPx
+    );
+    const scale = layout.scale;
+    const cx = layout.offsetX + layout.width / 2;
+    const cy = layout.offsetY + layout.height / 2;
+    const visualWidth = layout.width;
+    const visualHeight = layout.height;
+    const visualRadius = radius * scale;
     const absoluteHoles = (holes || []).map((h) => {
-      const p = Coordinate.denormalizePoint(
-        { x: h.x, y: h.y },
+      const unit = this.unit || "mm";
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+      const pos = resolveHolePosition(
+        {
+          ...h,
+          offsetX: (h.offsetX || 0) * unitScale * scale,
+          offsetY: (h.offsetY || 0) * unitScale * scale
+        },
+        { x: cx, y: cy, width: visualWidth, height: visualHeight },
         { width: canvasW, height: canvasH }
       );
       return {
         ...h,
-        x: p.x,
-        y: p.y
+        x: pos.x,
+        y: pos.y,
+        innerRadius: h.innerRadius * unitScale * scale,
+        outerRadius: h.outerRadius * unitScale * scale,
+        offsetX: (h.offsetX || 0) * unitScale * scale,
+        offsetY: (h.offsetY || 0) * unitScale * scale
       };
     });
     const pathData = generateDielinePath({
       shape,
-      width,
-      height,
-      radius,
+      width: visualWidth,
+      height: visualHeight,
+      radius: visualRadius,
       x: cx,
       y: cy,
       holes: absoluteHoles,
       pathData: this.pathData
     });
+    const clonedLayer = await userLayer.clone();
     const clipPath = new Path(pathData, {
-      left: 0,
-      top: 0,
       originX: "left",
       originY: "top",
-      absolutePositioned: true
-    });
-    const layer = this.getLayer();
-    const wasVisible = (_c = layer == null ? void 0 : layer.visible) != null ? _c : true;
-    if (layer) layer.visible = false;
-    const holeMarkers = canvas.getObjects().filter((o) => {
-      var _a2;
-      return ((_a2 = o.data) == null ? void 0 : _a2.type) === "hole-marker";
-    });
-    holeMarkers.forEach((o) => o.visible = false);
-    const rulerLayer = canvas.getObjects().find((obj) => {
-      var _a2;
-      return ((_a2 = obj.data) == null ? void 0 : _a2.id) === "ruler-overlay";
-    });
-    const rulerWasVisible = (_d = rulerLayer == null ? void 0 : rulerLayer.visible) != null ? _d : true;
-    if (rulerLayer) rulerLayer.visible = false;
-    const originalClip = canvas.clipPath;
-    canvas.clipPath = clipPath;
-    const bbox = clipPath.getBoundingRect();
-    const clipPathCorrected = new Path(pathData, {
-      absolutePositioned: true,
       left: 0,
-      top: 0
-    });
-    const tempPath = new Path(pathData);
-    const tempBounds = tempPath.getBoundingRect();
-    clipPathCorrected.set({
-      left: tempBounds.left,
-      top: tempBounds.top,
-      originX: "left",
-      originY: "top"
+      top: 0,
+      absolutePositioned: true
+      // Important for groups
     });
-    canvas.clipPath = clipPathCorrected;
-    const exportBbox = clipPathCorrected.getBoundingRect();
-    const dataURL = canvas.toDataURL({
+    clonedLayer.clipPath = clipPath;
+    const bounds = clipPath.getBoundingRect();
+    const dataUrl = clonedLayer.toDataURL({
       format: "png",
       multiplier: 2,
-      left: exportBbox.left,
-      top: exportBbox.top,
-      width: exportBbox.width,
-      height: exportBbox.height
+      // Better quality
+      left: bounds.left,
+      top: bounds.top,
+      width: bounds.width,
+      height: bounds.height
     });
-    canvas.clipPath = originalClip;
-    if (layer) layer.visible = wasVisible;
-    if (rulerLayer) rulerLayer.visible = rulerWasVisible;
-    holeMarkers.forEach((o) => o.visible = true);
-    canvas.requestRenderAll();
-    return dataURL;
+    return dataUrl;
   }
 };
 
@@ -1406,9 +1492,6 @@ var HoleTool = class {
     this.metadata = {
       name: "HoleTool"
     };
-    this.innerRadius = 15;
-    this.outerRadius = 25;
-    this.style = "solid";
     this.holes = [];
     this.constraintTarget = "bleed";
     this.isUpdatingConfig = false;
@@ -1432,53 +1515,20 @@ var HoleTool = class {
       "ConfigurationService"
     );
     if (configService) {
-      this.innerRadius = configService.get(
-        "hole.innerRadius",
-        this.innerRadius
-      );
-      this.outerRadius = configService.get(
-        "hole.outerRadius",
-        this.outerRadius
-      );
-      this.style = configService.get("hole.style", this.style);
       this.constraintTarget = configService.get(
         "hole.constraintTarget",
         this.constraintTarget
       );
-      const dielineHoles = configService.get("dieline.holes", []);
-      if (this.canvasService) {
-        const { width, height } = this.canvasService.canvas;
-        this.holes = dielineHoles.map((h) => {
-          const p = Coordinate.denormalizePoint(h, {
-            width: width || 800,
-            height: height || 600
-          });
-          return { x: p.x, y: p.y };
-        });
-      }
+      this.holes = configService.get("dieline.holes", []);
       configService.onAnyChange((e) => {
         if (this.isUpdatingConfig) return;
-        if (e.key.startsWith("hole.")) {
-          const prop = e.key.split(".")[1];
-          if (prop && prop in this) {
-            this[prop] = e.value;
-            this.redraw();
-            this.syncHolesToDieline();
-          }
+        if (e.key === "hole.constraintTarget") {
+          this.constraintTarget = e.value;
+          this.enforceConstraints();
         }
         if (e.key === "dieline.holes") {
-          const holes = e.value || [];
-          if (this.canvasService) {
-            const { width, height } = this.canvasService.canvas;
-            this.holes = holes.map((h) => {
-              const p = Coordinate.denormalizePoint(h, {
-                width: width || 800,
-                height: height || 600
-              });
-              return { x: p.x, y: p.y };
-            });
-            this.redraw();
-          }
+          this.holes = e.value || [];
+          this.redraw();
         }
       });
     }
@@ -1492,29 +1542,6 @@ var HoleTool = class {
   contribute() {
     return {
       [ContributionPointIds4.CONFIGURATIONS]: [
-        {
-          id: "hole.innerRadius",
-          type: "number",
-          label: "Inner Radius",
-          min: 1,
-          max: 100,
-          default: 15
-        },
-        {
-          id: "hole.outerRadius",
-          type: "number",
-          label: "Outer Radius",
-          min: 1,
-          max: 100,
-          default: 25
-        },
-        {
-          id: "hole.style",
-          type: "select",
-          label: "Line Style",
-          options: ["solid", "dashed"],
-          default: "solid"
-        },
         {
           id: "hole.constraintTarget",
           type: "select",
@@ -1528,6 +1555,7 @@ var HoleTool = class {
           command: "resetHoles",
           title: "Reset Holes",
           handler: () => {
+            var _a;
             if (!this.canvasService) return false;
             let defaultPos = { x: this.canvasService.canvas.width / 2, y: 50 };
             if (this.currentGeometry) {
@@ -1538,12 +1566,24 @@ var HoleTool = class {
                 holes: []
               });
             }
-            this.innerRadius = 15;
-            this.outerRadius = 25;
-            this.style = "solid";
-            this.holes = [defaultPos];
-            this.redraw();
-            this.syncHolesToDieline();
+            const { width, height } = this.canvasService.canvas;
+            const normalizedHole = Coordinate.normalizePoint(defaultPos, {
+              width: width || 800,
+              height: height || 600
+            });
+            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+              "ConfigurationService"
+            );
+            if (configService) {
+              configService.update("dieline.holes", [
+                {
+                  x: normalizedHole.x,
+                  y: normalizedHole.y,
+                  innerRadius: 15,
+                  outerRadius: 25
+                }
+              ]);
+            }
             return true;
           }
         },
@@ -1551,10 +1591,37 @@ var HoleTool = class {
           command: "addHole",
           title: "Add Hole",
           handler: (x, y) => {
-            if (!this.holes) this.holes = [];
-            this.holes.push({ x, y });
-            this.redraw();
-            this.syncHolesToDieline();
+            var _a, _b, _c;
+            if (!this.canvasService) return false;
+            let normalizedX = 0.5;
+            let normalizedY = 0.5;
+            if (this.currentGeometry) {
+              const { x: gx, y: gy, width: gw, height: gh } = this.currentGeometry;
+              const left = gx - gw / 2;
+              const top = gy - gh / 2;
+              normalizedX = gw > 0 ? (x - left) / gw : 0.5;
+              normalizedY = gh > 0 ? (y - top) / gh : 0.5;
+            } else {
+              const { width, height } = this.canvasService.canvas;
+              normalizedX = Coordinate.toNormalized(x, width || 800);
+              normalizedY = Coordinate.toNormalized(y, height || 600);
+            }
+            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+              "ConfigurationService"
+            );
+            if (configService) {
+              const currentHoles = configService.get("dieline.holes", []);
+              const lastHole = currentHoles[currentHoles.length - 1];
+              const innerRadius = (_b = lastHole == null ? void 0 : lastHole.innerRadius) != null ? _b : 15;
+              const outerRadius = (_c = lastHole == null ? void 0 : lastHole.outerRadius) != null ? _c : 25;
+              const newHole = {
+                x: normalizedX,
+                y: normalizedY,
+                innerRadius,
+                outerRadius
+              };
+              configService.update("dieline.holes", [...currentHoles, newHole]);
+            }
             return true;
           }
         },
@@ -1562,9 +1629,13 @@ var HoleTool = class {
           command: "clearHoles",
           title: "Clear Holes",
           handler: () => {
-            this.holes = [];
-            this.redraw();
-            this.syncHolesToDieline();
+            var _a;
+            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+              "ConfigurationService"
+            );
+            if (configService) {
+              configService.update("dieline.holes", []);
+            }
             return true;
           }
         }
@@ -1605,10 +1676,12 @@ var HoleTool = class {
     }
     if (!this.handleMoving) {
       this.handleMoving = (e) => {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const target = e.target;
         if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "hole-marker") return;
         if (!this.currentGeometry) return;
+        const index = (_c = (_b = target.data) == null ? void 0 : _b.index) != null ? _c : -1;
+        const holeData = this.holes[index];
         const effectiveOffset = this.constraintTarget === "original" ? 0 : this.currentGeometry.offset;
         const constraintGeometry = {
           ...this.currentGeometry,
@@ -1620,7 +1693,12 @@ var HoleTool = class {
           radius: Math.max(0, this.currentGeometry.radius + effectiveOffset)
         };
         const p = new Point(target.left, target.top);
-        const newPos = this.calculateConstrainedPosition(p, constraintGeometry);
+        const newPos = this.calculateConstrainedPosition(
+          p,
+          constraintGeometry,
+          (_d = holeData == null ? void 0 : holeData.innerRadius) != null ? _d : 15,
+          (_e = holeData == null ? void 0 : holeData.outerRadius) != null ? _e : 25
+        );
         target.set({
           left: newPos.x,
           top: newPos.y
@@ -1633,7 +1711,10 @@ var HoleTool = class {
         var _a;
         const target = e.target;
         if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "hole-marker") return;
-        this.syncHolesFromCanvas();
+        const changed = this.enforceConstraints();
+        if (!changed) {
+          this.syncHolesFromCanvas();
+        }
       };
       canvas.on("object:modified", this.handleModified);
     }
@@ -1641,19 +1722,6 @@ var HoleTool = class {
   }
   initializeHoles() {
     if (!this.canvasService) return;
-    if (!this.holes || this.holes.length === 0) {
-      let defaultPos = { x: this.canvasService.canvas.width / 2, y: 50 };
-      if (this.currentGeometry) {
-        const g = this.currentGeometry;
-        const topCenter = { x: g.x, y: g.y - g.height / 2 };
-        const snapped = getNearestPointOnDieline(topCenter, {
-          ...g,
-          holes: []
-        });
-        defaultPos = snapped;
-      }
-      this.holes = [defaultPos];
-    }
     this.redraw();
     this.syncHolesToDieline();
   }
@@ -1697,32 +1765,110 @@ var HoleTool = class {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
-    const holes = objects.map((obj) => ({ x: obj.left, y: obj.top }));
-    this.holes = holes;
+    objects.sort(
+      (a, b) => {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = a.data) == null ? void 0 : _a.index) != null ? _b : 0) - ((_d = (_c = b.data) == null ? void 0 : _c.index) != null ? _d : 0);
+      }
+    );
+    const newHoles = objects.map((obj, i) => {
+      var _a, _b, _c, _d;
+      const original = this.holes[i];
+      const newAbsX = obj.left;
+      const newAbsY = obj.top;
+      const scale = ((_a = this.currentGeometry) == null ? void 0 : _a.scale) || 1;
+      const unit = ((_b = this.currentGeometry) == null ? void 0 : _b.unit) || "mm";
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+      if (original && original.anchor && this.currentGeometry) {
+        const { x, y, width, height } = this.currentGeometry;
+        let bx = x;
+        let by = y;
+        const left = x - width / 2;
+        const right = x + width / 2;
+        const top = y - height / 2;
+        const bottom = y + height / 2;
+        switch (original.anchor) {
+          case "top-left":
+            bx = left;
+            by = top;
+            break;
+          case "top-center":
+            bx = x;
+            by = top;
+            break;
+          case "top-right":
+            bx = right;
+            by = top;
+            break;
+          case "center-left":
+            bx = left;
+            by = y;
+            break;
+          case "center":
+            bx = x;
+            by = y;
+            break;
+          case "center-right":
+            bx = right;
+            by = y;
+            break;
+          case "bottom-left":
+            bx = left;
+            by = bottom;
+            break;
+          case "bottom-center":
+            bx = x;
+            by = bottom;
+            break;
+          case "bottom-right":
+            bx = right;
+            by = bottom;
+            break;
+        }
+        return {
+          ...original,
+          // Denormalize offset back to physical units (mm)
+          offsetX: (newAbsX - bx) / scale / unitScale,
+          offsetY: (newAbsY - by) / scale / unitScale,
+          // Clear direct coordinates if we use anchor
+          x: void 0,
+          y: void 0
+        };
+      }
+      let normalizedX = 0.5;
+      let normalizedY = 0.5;
+      if (this.currentGeometry) {
+        const { x, y, width, height } = this.currentGeometry;
+        const left = x - width / 2;
+        const top = y - height / 2;
+        normalizedX = width > 0 ? (newAbsX - left) / width : 0.5;
+        normalizedY = height > 0 ? (newAbsY - top) / height : 0.5;
+      } else {
+        const { width, height } = this.canvasService.canvas;
+        normalizedX = Coordinate.toNormalized(newAbsX, width || 800);
+        normalizedY = Coordinate.toNormalized(newAbsY, height || 600);
+      }
+      return {
+        ...original,
+        x: normalizedX,
+        y: normalizedY,
+        // Ensure radii are preserved
+        innerRadius: (_c = original == null ? void 0 : original.innerRadius) != null ? _c : 15,
+        outerRadius: (_d = original == null ? void 0 : original.outerRadius) != null ? _d : 25
+      };
+    });
+    this.holes = newHoles;
     this.syncHolesToDieline();
   }
   syncHolesToDieline() {
     if (!this.context || !this.canvasService) return;
-    const { holes, innerRadius, outerRadius } = this;
-    const currentHoles = holes || [];
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
     const configService = this.context.services.get(
       "ConfigurationService"
     );
     if (configService) {
       this.isUpdatingConfig = true;
       try {
-        const normalizedHoles = currentHoles.map((h) => {
-          const p = Coordinate.normalizePoint(h, { width, height });
-          return {
-            x: p.x,
-            y: p.y,
-            innerRadius,
-            outerRadius
-          };
-        });
-        configService.update("dieline.holes", normalizedHoles);
+        configService.update("dieline.holes", this.holes);
       } finally {
         this.isUpdatingConfig = false;
       }
@@ -1731,19 +1877,43 @@ var HoleTool = class {
   redraw() {
     if (!this.canvasService) return;
     const canvas = this.canvasService.canvas;
+    const { width, height } = canvas;
     const existing = canvas.getObjects().filter((obj) => {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
     existing.forEach((obj) => canvas.remove(obj));
-    const { innerRadius, outerRadius, style, holes } = this;
+    const holes = this.holes;
     if (!holes || holes.length === 0) {
       this.canvasService.requestRenderAll();
       return;
     }
+    const geometry = this.currentGeometry || {
+      x: (width || 800) / 2,
+      y: (height || 600) / 2,
+      width: width || 800,
+      height: height || 600,
+      scale: 1
+      // Default scale if no geometry loaded
+    };
     holes.forEach((hole, index) => {
+      const scale = geometry.scale || 1;
+      const unit = geometry.unit || "mm";
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+      const visualInnerRadius = hole.innerRadius * unitScale * scale;
+      const visualOuterRadius = hole.outerRadius * unitScale * scale;
+      const pos = resolveHolePosition(
+        {
+          ...hole,
+          offsetX: (hole.offsetX || 0) * unitScale * scale,
+          offsetY: (hole.offsetY || 0) * unitScale * scale
+        },
+        geometry,
+        { width: geometry.width, height: geometry.height }
+        // Use geometry dims instead of canvas
+      );
       const innerCircle = new Circle({
-        radius: innerRadius,
+        radius: visualInnerRadius,
         fill: "transparent",
         stroke: "red",
         strokeWidth: 2,
@@ -1751,17 +1921,17 @@ var HoleTool = class {
         originY: "center"
       });
       const outerCircle = new Circle({
-        radius: outerRadius,
+        radius: visualOuterRadius,
         fill: "transparent",
         stroke: "#666",
         strokeWidth: 1,
-        strokeDashArray: style === "dashed" ? [5, 5] : void 0,
+        strokeDashArray: [5, 5],
         originX: "center",
         originY: "center"
       });
       const holeGroup = new Group([outerCircle, innerCircle], {
-        left: hole.x,
-        top: hole.y,
+        left: pos.x,
+        top: pos.y,
         originX: "center",
         originY: "center",
         selectable: true,
@@ -1806,9 +1976,6 @@ var HoleTool = class {
   enforceConstraints() {
     const geometry = this.currentGeometry;
     if (!geometry || !this.canvasService) {
-      console.log(
-        "[HoleTool] Skipping enforceConstraints: No geometry or canvas service"
-      );
       return false;
     }
     const effectiveOffset = this.constraintTarget === "original" ? 0 : geometry.offset;
@@ -1822,9 +1989,6 @@ var HoleTool = class {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
-    console.log(
-      `[HoleTool] Enforcing constraints on ${objects.length} markers`
-    );
     let changed = false;
     objects.sort(
       (a, b) => {
@@ -1833,16 +1997,22 @@ var HoleTool = class {
       }
     );
     const newHoles = [];
-    objects.forEach((obj) => {
+    objects.forEach((obj, i) => {
+      var _a, _b;
       const currentPos = new Point(obj.left, obj.top);
+      const holeData = this.holes[i];
+      const scale = geometry.scale || 1;
+      const unit = geometry.unit || "mm";
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
+      const innerR = ((_a = holeData == null ? void 0 : holeData.innerRadius) != null ? _a : 15) * unitScale * scale;
+      const outerR = ((_b = holeData == null ? void 0 : holeData.outerRadius) != null ? _b : 25) * unitScale * scale;
       const newPos = this.calculateConstrainedPosition(
         currentPos,
-        constraintGeometry
+        constraintGeometry,
+        innerR,
+        outerR
       );
       if (currentPos.distanceFrom(newPos) > 0.1) {
-        console.log(
-          `[HoleTool] Moving hole from (${currentPos.x}, ${currentPos.y}) to (${newPos.x}, ${newPos.y})`
-        );
         obj.set({
           left: newPos.x,
           top: newPos.y
@@ -1850,16 +2020,14 @@ var HoleTool = class {
         obj.setCoords();
         changed = true;
       }
-      newHoles.push({ x: obj.left, y: obj.top });
     });
     if (changed) {
-      this.holes = newHoles;
-      this.canvasService.requestRenderAll();
+      this.syncHolesFromCanvas();
       return true;
     }
     return false;
   }
-  calculateConstrainedPosition(p, g) {
+  calculateConstrainedPosition(p, g, innerRadius, outerRadius) {
     const options = {
       ...g,
       holes: []
@@ -1873,7 +2041,6 @@ var HoleTool = class {
     const dist = p.distanceFrom(nearestP);
     const v = p.subtract(nearestP);
     const center = new Point(g.x, g.y);
-    const centerToNearest = nearestP.subtract(center);
     const distToCenter = p.distanceFrom(center);
     const nearestDistToCenter = nearestP.distanceFrom(center);
     let signedDist = dist;
@@ -1882,9 +2049,9 @@ var HoleTool = class {
     }
     let clampedDist = signedDist;
     if (signedDist > 0) {
-      clampedDist = Math.min(signedDist, this.innerRadius);
+      clampedDist = Math.min(signedDist, innerRadius);
     } else {
-      clampedDist = Math.max(signedDist, -this.outerRadius);
+      clampedDist = Math.max(signedDist, -outerRadius);
     }
     if (dist < 1e-3) return nearestP;
     const scale = Math.abs(clampedDist) / (dist || 1);
@@ -1897,19 +2064,16 @@ var HoleTool = class {
 import {
   ContributionPointIds as ContributionPointIds5
 } from "@pooder/core";
-import { FabricImage as Image4, Point as Point2, util } from "fabric";
+import { Image as Image4, Point as Point2, util } from "fabric";
 var ImageTool = class {
-  constructor(options) {
+  constructor() {
     this.id = "pooder.kit.image";
     this.metadata = {
       name: "ImageTool"
     };
-    this._loadingUrl = null;
-    this.url = "";
-    this.opacity = 1;
-    if (options) {
-      Object.assign(this, options);
-    }
+    this.items = [];
+    this.objectMap = /* @__PURE__ */ new Map();
+    this.isUpdatingConfig = false;
   }
   activate(context) {
     this.context = context;
@@ -1920,38 +2084,33 @@ var ImageTool = class {
     }
     const configService = context.services.get("ConfigurationService");
     if (configService) {
-      this.url = configService.get("image.url", this.url);
-      this.opacity = configService.get("image.opacity", this.opacity);
-      this.width = configService.get("image.width", this.width);
-      this.height = configService.get("image.height", this.height);
-      this.angle = configService.get("image.angle", this.angle);
-      this.left = configService.get("image.left", this.left);
-      this.top = configService.get("image.top", this.top);
+      this.items = configService.get("image.items", []) || [];
       configService.onAnyChange((e) => {
-        if (e.key.startsWith("image.")) {
-          const prop = e.key.split(".")[1];
-          console.log(
-            `[ImageTool] Config change detected: ${e.key} -> ${e.value}`
-          );
-          if (prop && prop in this) {
-            this[prop] = e.value;
-            this.updateImage();
-          }
+        if (this.isUpdatingConfig) return;
+        let shouldUpdate = false;
+        if (e.key === "image.items") {
+          this.items = e.value || [];
+          shouldUpdate = true;
+        } else if (e.key.startsWith("dieline.") && e.key !== "dieline.holes") {
+          shouldUpdate = true;
+        }
+        if (shouldUpdate) {
+          this.updateImages();
         }
       });
     }
     this.ensureLayer();
-    this.updateImage();
+    this.updateImages();
   }
   deactivate(context) {
     if (this.canvasService) {
       const layer = this.canvasService.getLayer("user");
       if (layer) {
-        const userImage = this.canvasService.getObject("user-image", "user");
-        if (userImage) {
-          layer.remove(userImage);
-          this.canvasService.requestRenderAll();
-        }
+        this.objectMap.forEach((obj) => {
+          layer.remove(obj);
+        });
+        this.objectMap.clear();
+        this.canvasService.requestRenderAll();
       }
       this.canvasService = void 0;
       this.context = void 0;
@@ -1961,82 +2120,103 @@ var ImageTool = class {
     return {
       [ContributionPointIds5.CONFIGURATIONS]: [
         {
-          id: "image.url",
-          type: "string",
-          label: "Image URL",
-          default: this.url
-        },
+          id: "image.items",
+          type: "array",
+          label: "Images",
+          default: []
+        }
+      ],
+      [ContributionPointIds5.COMMANDS]: [
         {
-          id: "image.opacity",
-          type: "number",
-          label: "Opacity",
-          min: 0,
-          max: 1,
-          step: 0.1,
-          default: this.opacity
+          command: "addImage",
+          title: "Add Image",
+          handler: (url, options) => {
+            const newItem = {
+              id: this.generateId(),
+              url,
+              opacity: 1,
+              ...options
+            };
+            this.updateConfig([...this.items, newItem]);
+            return newItem.id;
+          }
         },
         {
-          id: "image.width",
-          type: "number",
-          label: "Width",
-          min: 0,
-          max: 5e3,
-          default: this.width
+          command: "removeImage",
+          title: "Remove Image",
+          handler: (id) => {
+            const newItems = this.items.filter((item) => item.id !== id);
+            if (newItems.length !== this.items.length) {
+              this.updateConfig(newItems);
+            }
+          }
         },
         {
-          id: "image.height",
-          type: "number",
-          label: "Height",
-          min: 0,
-          max: 5e3,
-          default: this.height
+          command: "updateImage",
+          title: "Update Image",
+          handler: (id, updates) => {
+            const index = this.items.findIndex((item) => item.id === id);
+            if (index !== -1) {
+              const newItems = [...this.items];
+              newItems[index] = { ...newItems[index], ...updates };
+              this.updateConfig(newItems);
+            }
+          }
         },
         {
-          id: "image.angle",
-          type: "number",
-          label: "Rotation",
-          min: 0,
-          max: 360,
-          default: this.angle
+          command: "clearImages",
+          title: "Clear Images",
+          handler: () => {
+            this.updateConfig([]);
+          }
         },
         {
-          id: "image.left",
-          type: "number",
-          label: "Left (Normalized)",
-          min: 0,
-          max: 1,
-          default: this.left
+          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 newItems = [...this.items];
+              const [item] = newItems.splice(index, 1);
+              newItems.push(item);
+              this.updateConfig(newItems);
+            }
+          }
         },
         {
-          id: "image.top",
-          type: "number",
-          label: "Top (Normalized)",
-          min: 0,
-          max: 1,
-          default: this.top
-        }
-      ],
-      [ContributionPointIds5.COMMANDS]: [
-        {
-          command: "setUserImage",
-          title: "Set User Image",
-          handler: (url, opacity, width, height, angle, left, top) => {
-            if (this.url === url && this.opacity === opacity && this.width === width && this.height === height && this.angle === angle && this.left === left && this.top === top)
-              return true;
-            this.url = url;
-            this.opacity = opacity;
-            this.width = width;
-            this.height = height;
-            this.angle = angle;
-            this.left = left;
-            this.top = top;
-            this.updateImage();
-            return true;
+          command: "sendToBack",
+          title: "Send Image to Back",
+          handler: (id) => {
+            const index = this.items.findIndex((item) => item.id === id);
+            if (index > 0) {
+              const newItems = [...this.items];
+              const [item] = newItems.splice(index, 1);
+              newItems.unshift(item);
+              this.updateConfig(newItems);
+            }
           }
         }
       ]
     };
   }
+  generateId() {
+    return Math.random().toString(36).substring(2, 9);
+  }
+  updateConfig(newItems, skipCanvasUpdate = false) {
+    if (!this.context) return;
+    this.isUpdatingConfig = true;
+    this.items = newItems;
+    const configService = this.context.services.get("ConfigurationService");
+    if (configService) {
+      configService.update("image.items", newItems);
+    }
+    if (!skipCanvasUpdate) {
+      this.updateImages();
+    }
+    setTimeout(() => {
+      this.isUpdatingConfig = false;
+    }, 50);
+  }
   ensureLayer() {
     if (!this.canvasService) return;
     let userLayer = this.canvasService.getLayer("user");
@@ -2068,224 +2248,176 @@ var ImageTool = class {
       this.canvasService.requestRenderAll();
     }
   }
-  updateImage() {
+  getLayoutInfo() {
     var _a, _b;
+    const canvasW = ((_a = this.canvasService) == null ? void 0 : _a.canvas.width) || 800;
+    const canvasH = ((_b = this.canvasService) == null ? void 0 : _b.canvas.height) || 600;
+    let layoutScale = 1;
+    let layoutOffsetX = 0;
+    let layoutOffsetY = 0;
+    let visualWidth = canvasW;
+    let visualHeight = canvasH;
+    let dielinePhysicalWidth = 500;
+    let dielinePhysicalHeight = 500;
+    if (this.context) {
+      const configService = this.context.services.get("ConfigurationService");
+      if (configService) {
+        dielinePhysicalWidth = configService.get("dieline.width") || 500;
+        dielinePhysicalHeight = configService.get("dieline.height") || 500;
+        const padding = configService.get("dieline.padding") || 40;
+        const layout = Coordinate.calculateLayout(
+          { width: canvasW, height: canvasH },
+          { width: dielinePhysicalWidth, height: dielinePhysicalHeight },
+          padding
+        );
+        layoutScale = layout.scale;
+        layoutOffsetX = layout.offsetX;
+        layoutOffsetY = layout.offsetY;
+        visualWidth = layout.width;
+        visualHeight = layout.height;
+      }
+    }
+    return {
+      layoutScale,
+      layoutOffsetX,
+      layoutOffsetY,
+      visualWidth,
+      visualHeight,
+      dielinePhysicalWidth,
+      dielinePhysicalHeight
+    };
+  }
+  updateImages() {
     if (!this.canvasService) return;
-    let { url, opacity, width, height, angle, left, top } = this;
     const layer = this.canvasService.getLayer("user");
     if (!layer) {
       console.warn("[ImageTool] User layer not found");
       return;
     }
-    const userImage = this.canvasService.getObject("user-image", "user");
-    if (this._loadingUrl === url) return;
-    if (userImage) {
-      const currentSrc = ((_a = userImage.getSrc) == null ? void 0 : _a.call(userImage)) || ((_b = userImage._element) == null ? void 0 : _b.src);
-      if (currentSrc !== url) {
-        this.loadImage(layer);
+    const currentIds = new Set(this.items.map((i) => i.id));
+    for (const [id, obj] of this.objectMap) {
+      if (!currentIds.has(id)) {
+        layer.remove(obj);
+        this.objectMap.delete(id);
+      }
+    }
+    const layout = this.getLayoutInfo();
+    this.items.forEach((item, index) => {
+      let obj = this.objectMap.get(item.id);
+      if (!obj) {
+        this.loadImage(item, layer, layout);
       } else {
-        const updates = {};
-        const canvasW = this.canvasService.canvas.width || 800;
-        const canvasH = this.canvasService.canvas.height || 600;
-        const centerX = canvasW / 2;
-        const centerY = canvasH / 2;
-        if (userImage.opacity !== opacity) updates.opacity = opacity;
-        if (angle !== void 0 && userImage.angle !== angle)
-          updates.angle = angle;
-        if (userImage.originX !== "center") {
-          userImage.set({
-            originX: "center",
-            originY: "center",
-            left: userImage.left + userImage.width * userImage.scaleX / 2,
-            top: userImage.top + userImage.height * userImage.scaleY / 2
-          });
-        }
-        if (left !== void 0) {
-          const globalLeft = Coordinate.toAbsolute(left, canvasW);
-          const localLeft = globalLeft - centerX;
-          if (Math.abs(userImage.left - localLeft) > 1)
-            updates.left = localLeft;
-        }
-        if (top !== void 0) {
-          const globalTop = Coordinate.toAbsolute(top, canvasH);
-          const localTop = globalTop - centerY;
-          if (Math.abs(userImage.top - localTop) > 1) updates.top = localTop;
-        }
-        if (width !== void 0 && userImage.width)
-          updates.scaleX = width / userImage.width;
-        if (height !== void 0 && userImage.height)
-          updates.scaleY = height / userImage.height;
-        if (Object.keys(updates).length > 0) {
-          userImage.set(updates);
-          layer.dirty = true;
-          this.canvasService.requestRenderAll();
-        }
+        this.updateObjectProperties(obj, item, layout);
+        layer.remove(obj);
+        layer.add(obj);
       }
-    } else {
-      this.loadImage(layer);
+    });
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
+  }
+  updateObjectProperties(obj, item, layout) {
+    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = layout;
+    const updates = {};
+    if (obj.opacity !== item.opacity) updates.opacity = item.opacity;
+    if (item.angle !== void 0 && obj.angle !== item.angle) updates.angle = item.angle;
+    if (item.left !== void 0) {
+      const globalLeft = layoutOffsetX + item.left * visualWidth;
+      if (Math.abs(obj.left - globalLeft) > 1) updates.left = globalLeft;
+    }
+    if (item.top !== void 0) {
+      const globalTop = layoutOffsetY + item.top * visualHeight;
+      if (Math.abs(obj.top - globalTop) > 1) updates.top = globalTop;
+    }
+    if (item.width !== void 0 && obj.width) {
+      const targetScaleX = item.width * layoutScale / obj.width;
+      if (Math.abs(obj.scaleX - targetScaleX) > 1e-3) updates.scaleX = targetScaleX;
+    }
+    if (item.height !== void 0 && obj.height) {
+      const targetScaleY = item.height * layoutScale / obj.height;
+      if (Math.abs(obj.scaleY - targetScaleY) > 1e-3) updates.scaleY = targetScaleY;
+    }
+    if (obj.originX !== "center") {
+      updates.originX = "center";
+      updates.originY = "center";
+    }
+    if (Object.keys(updates).length > 0) {
+      obj.set(updates);
     }
   }
-  loadImage(layer) {
-    if (!this.canvasService) return;
-    const { url } = this;
-    if (!url) return;
-    this._loadingUrl = url;
-    Image4.fromURL(url, { crossOrigin: "anonymous" }).then((image) => {
-      var _a, _b, _c, _d, _e, _f;
-      if (this._loadingUrl !== url) return;
-      this._loadingUrl = null;
-      let { opacity, width, height, angle, left, top } = this;
-      if (this.context) {
-        const configService = this.context.services.get(
-          "ConfigurationService"
-        );
-        const dielineWidth = configService.get("dieline.width");
-        const dielineHeight = configService.get("dieline.height");
-        console.log(
-          "[ImageTool] Dieline config debug:",
-          {
-            widthVal: dielineWidth,
-            heightVal: dielineHeight,
-            // Debug: dump all keys to see what is available
-            allKeys: Array.from(
-              ((_a = configService.configValues) == null ? void 0 : _a.keys()) || []
-            )
-          },
-          configService
-        );
-        if (width === void 0 && height === void 0) {
-          const scale = Math.min(
-            dielineWidth / (image.width || 1),
-            dielineHeight / (image.height || 1)
-          );
-          width = (image.width || 1) * scale;
-          height = (image.height || 1) * scale;
-          this.width = width;
-          this.height = height;
-        }
-        if (left === void 0 && top === void 0) {
-          const dielinePos = configService == null ? void 0 : configService.get("dieline.position");
-          if (dielinePos) {
-            this.left = dielinePos.x;
-            this.top = dielinePos.y;
-          } else {
-            this.left = 0.5;
-            this.top = 0.5;
-          }
-          left = this.left;
-          top = this.top;
-        }
-      }
-      const existingImage = this.canvasService.getObject(
-        "user-image",
-        "user"
-      );
-      if (existingImage) {
-        const defaultLeft = existingImage.left;
-        const defaultTop = existingImage.top;
-        const defaultAngle = existingImage.angle;
-        const defaultScaleX = existingImage.scaleX;
-        const defaultScaleY = existingImage.scaleY;
-        const canvasW = ((_b = this.canvasService) == null ? void 0 : _b.canvas.width) || 800;
-        const canvasH = ((_c = this.canvasService) == null ? void 0 : _c.canvas.height) || 600;
-        const centerX = canvasW / 2;
-        const centerY = canvasH / 2;
-        let targetLeft = left !== void 0 ? left : defaultLeft;
-        let targetTop = top !== void 0 ? top : defaultTop;
-        const configService = (_d = this.context) == null ? void 0 : _d.services.get(
-          "ConfigurationService"
-        );
-        console.log("[ImageTool] Loading EXISTING image...", {
-          canvasW,
-          canvasH,
-          centerX,
-          centerY,
-          incomingLeft: left,
-          incomingTop: top,
-          dielinePos: configService == null ? void 0 : configService.get("dieline.position"),
-          existingImage: !!existingImage
-        });
-        if (left !== void 0) {
-          const globalLeft = Coordinate.toAbsolute(left, canvasW);
-          targetLeft = globalLeft;
-          console.log("[ImageTool] Calculated targetLeft", {
-            globalLeft,
-            targetLeft
-          });
-        }
-        if (top !== void 0) {
-          const globalTop = Coordinate.toAbsolute(top, canvasH);
-          targetTop = globalTop;
-          console.log("[ImageTool] Calculated targetTop", {
-            globalTop,
-            targetTop
-          });
-        }
-        image.set({
-          originX: "center",
-          // Use center origin for easier positioning
-          originY: "center",
-          left: targetLeft,
-          top: targetTop,
-          angle: angle !== void 0 ? angle : defaultAngle,
-          scaleX: width !== void 0 && image.width ? width / image.width : defaultScaleX,
-          scaleY: height !== void 0 && image.height ? height / image.height : defaultScaleY
-        });
-        layer.remove(existingImage);
-      } else {
-        image.set({
-          originX: "center",
-          originY: "center"
-        });
-        if (width !== void 0 && image.width)
-          image.scaleX = width / image.width;
-        if (height !== void 0 && image.height)
-          image.scaleY = height / image.height;
-        if (angle !== void 0) image.angle = angle;
-        const canvasW = ((_e = this.canvasService) == null ? void 0 : _e.canvas.width) || 800;
-        const canvasH = ((_f = this.canvasService) == null ? void 0 : _f.canvas.height) || 600;
-        const centerX = canvasW / 2;
-        const centerY = canvasH / 2;
-        if (left !== void 0) {
-          image.left = Coordinate.toAbsolute(left, canvasW);
-        } else {
-          image.left = centerX;
-        }
-        if (top !== void 0) {
-          image.top = Coordinate.toAbsolute(top, canvasH);
+  loadImage(item, layer, layout) {
+    Image4.fromURL(item.url, { crossOrigin: "anonymous" }).then((image) => {
+      var _a;
+      if (!this.items.find((i) => i.id === item.id)) return;
+      image.set({
+        originX: "center",
+        originY: "center",
+        data: { id: item.id }
+      });
+      let { width, height, left, top } = item;
+      const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight } = layout;
+      if (width === void 0 && height === void 0) {
+        const imgAspect = (image.width || 1) / (image.height || 1);
+        const dielineAspect = dielinePhysicalWidth / dielinePhysicalHeight;
+        if (imgAspect > dielineAspect) {
+          const w = dielinePhysicalWidth;
+          width = w;
+          height = w / imgAspect;
         } else {
-          image.top = centerY;
+          const h = dielinePhysicalHeight;
+          height = h;
+          width = h * imgAspect;
         }
+        item.width = width;
+        item.height = height;
       }
-      image.set({
-        opacity: opacity !== void 0 ? opacity : 1,
-        data: {
-          id: "user-image"
-        }
-      });
+      if (left === void 0 && top === void 0) {
+        left = 0.5;
+        top = 0.5;
+        item.left = left;
+        item.top = top;
+      }
+      this.updateObjectProperties(image, item, layout);
       layer.add(image);
+      this.objectMap.set(item.id, image);
       image.on("modified", (e) => {
-        var _a2, _b2;
-        const matrix = image.calcTransformMatrix();
-        const globalPoint = util.transformPoint(new Point2(0, 0), matrix);
-        const canvasW = ((_a2 = this.canvasService) == null ? void 0 : _a2.canvas.width) || 800;
-        const canvasH = ((_b2 = this.canvasService) == null ? void 0 : _b2.canvas.height) || 600;
-        this.left = Coordinate.toNormalized(globalPoint.x, canvasW);
-        this.top = Coordinate.toNormalized(globalPoint.y, canvasH);
-        this.angle = e.target.angle;
-        if (image.width) this.width = e.target.width * e.target.scaleX;
-        if (image.height) this.height = e.target.height * e.target.scaleY;
-        if (this.context) {
-          this.context.eventBus.emit("update");
-        }
+        this.handleObjectModified(item.id, image);
       });
       layer.dirty = true;
-      this.canvasService.requestRenderAll();
+      (_a = this.canvasService) == null ? void 0 : _a.requestRenderAll();
+      if (item.width !== width || item.height !== height || item.left !== left || item.top !== top) {
+        this.updateImageInConfig(item.id, { width, height, left, top });
+      }
     }).catch((err) => {
-      if (this._loadingUrl === url) this._loadingUrl = null;
-      console.error("Failed to load image", url, err);
+      console.error("Failed to load image", item.url, err);
     });
   }
+  handleObjectModified(id, image) {
+    const layout = this.getLayoutInfo();
+    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = layout;
+    const matrix = image.calcTransformMatrix();
+    const globalPoint = util.transformPoint(new Point2(0, 0), matrix);
+    const updates = {};
+    updates.left = (globalPoint.x - layoutOffsetX) / visualWidth;
+    updates.top = (globalPoint.y - layoutOffsetY) / visualHeight;
+    updates.angle = image.angle;
+    if (image.width) {
+      const pixelWidth = image.width * image.scaleX;
+      updates.width = pixelWidth / layoutScale;
+    }
+    if (image.height) {
+      const pixelHeight = image.height * image.scaleY;
+      updates.height = pixelHeight / layoutScale;
+    }
+    this.updateImageInConfig(id, updates);
+  }
+  updateImageInConfig(id, updates) {
+    const index = this.items.findIndex((i) => i.id === id);
+    if (index !== -1) {
+      const newItems = [...this.items];
+      newItems[index] = { ...newItems[index], ...updates };
+      this.updateConfig(newItems, true);
+    }
+  }
 };
 
 // src/white-ink.ts
@@ -2585,19 +2717,25 @@ var WhiteInkTool = class {
 import {
   ContributionPointIds as ContributionPointIds7
 } from "@pooder/core";
-import { Rect as Rect2, Line, Text } from "fabric";
+import { Line, Text, Group as Group2, Polygon } from "fabric";
 var RulerTool = class {
   constructor(options) {
     this.id = "pooder.kit.ruler";
     this.metadata = {
       name: "RulerTool"
     };
-    this.unit = "px";
     this.thickness = 20;
+    this.gap = 15;
     this.backgroundColor = "#f0f0f0";
     this.textColor = "#333333";
     this.lineColor = "#999999";
     this.fontSize = 10;
+    // Dieline context for sync
+    this.dielineWidth = 500;
+    this.dielineHeight = 500;
+    this.dielineUnit = "mm";
+    this.dielinePadding = 40;
+    this.dielineOffset = 0;
     if (options) {
       Object.assign(this, options);
     }
@@ -2610,8 +2748,8 @@ var RulerTool = class {
     }
     const configService = context.services.get("ConfigurationService");
     if (configService) {
-      this.unit = configService.get("ruler.unit", this.unit);
       this.thickness = configService.get("ruler.thickness", this.thickness);
+      this.gap = configService.get("ruler.gap", this.gap);
       this.backgroundColor = configService.get(
         "ruler.backgroundColor",
         this.backgroundColor
@@ -2619,13 +2757,38 @@ var RulerTool = class {
       this.textColor = configService.get("ruler.textColor", this.textColor);
       this.lineColor = configService.get("ruler.lineColor", this.lineColor);
       this.fontSize = configService.get("ruler.fontSize", this.fontSize);
+      this.dielineUnit = configService.get("dieline.unit", this.dielineUnit);
+      this.dielineWidth = configService.get("dieline.width", this.dielineWidth);
+      this.dielineHeight = configService.get(
+        "dieline.height",
+        this.dielineHeight
+      );
+      this.dielinePadding = configService.get(
+        "dieline.padding",
+        this.dielinePadding
+      );
+      this.dielineOffset = configService.get(
+        "dieline.offset",
+        this.dielineOffset
+      );
       configService.onAnyChange((e) => {
+        let shouldUpdate = false;
         if (e.key.startsWith("ruler.")) {
           const prop = e.key.split(".")[1];
           if (prop && prop in this) {
             this[prop] = e.value;
-            this.updateRuler();
+            shouldUpdate = true;
           }
+        } else if (e.key.startsWith("dieline.")) {
+          if (e.key === "dieline.unit") this.dielineUnit = e.value;
+          if (e.key === "dieline.width") this.dielineWidth = e.value;
+          if (e.key === "dieline.height") this.dielineHeight = e.value;
+          if (e.key === "dieline.padding") this.dielinePadding = e.value;
+          if (e.key === "dieline.offset") this.dielineOffset = e.value;
+          shouldUpdate = true;
+        }
+        if (shouldUpdate) {
+          this.updateRuler();
         }
       });
     }
@@ -2639,13 +2802,6 @@ var RulerTool = class {
   contribute() {
     return {
       [ContributionPointIds7.CONFIGURATIONS]: [
-        {
-          id: "ruler.unit",
-          type: "select",
-          label: "Unit",
-          options: ["px", "mm", "cm", "in"],
-          default: "px"
-        },
         {
           id: "ruler.thickness",
           type: "number",
@@ -2654,6 +2810,14 @@ var RulerTool = class {
           max: 100,
           default: 20
         },
+        {
+          id: "ruler.gap",
+          type: "number",
+          label: "Gap",
+          min: 0,
+          max: 100,
+          default: 15
+        },
         {
           id: "ruler.backgroundColor",
           type: "color",
@@ -2682,16 +2846,6 @@ var RulerTool = class {
         }
       ],
       [ContributionPointIds7.COMMANDS]: [
-        {
-          command: "setUnit",
-          title: "Set Ruler Unit",
-          handler: (unit) => {
-            if (this.unit === unit) return true;
-            this.unit = unit;
-            this.updateRuler();
-            return true;
-          }
-        },
         {
           command: "setTheme",
           title: "Set Ruler Theme",
@@ -2742,6 +2896,68 @@ var RulerTool = class {
       this.canvasService.canvas.remove(layer);
     }
   }
+  createArrowLine(x1, y1, x2, y2, color) {
+    const line = new Line([x1, y1, x2, y2], {
+      stroke: color,
+      strokeWidth: this.thickness / 20,
+      // Scale stroke width relative to thickness (default 1)
+      selectable: false,
+      evented: false
+    });
+    const arrowSize = Math.max(4, this.thickness * 0.3);
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const endArrow = new Polygon(
+      [
+        { x: 0, y: 0 },
+        { x: -arrowSize, y: -arrowSize / 2 },
+        { x: -arrowSize, y: arrowSize / 2 }
+      ],
+      {
+        fill: color,
+        left: x2,
+        top: y2,
+        originX: "right",
+        originY: "center",
+        angle: angle * 180 / Math.PI,
+        selectable: false,
+        evented: false
+      }
+    );
+    const startArrow = new Polygon(
+      [
+        { x: 0, y: 0 },
+        { x: arrowSize, y: -arrowSize / 2 },
+        { x: arrowSize, y: arrowSize / 2 }
+      ],
+      {
+        fill: color,
+        left: x1,
+        top: y1,
+        originX: "left",
+        originY: "center",
+        angle: angle * 180 / Math.PI,
+        selectable: false,
+        evented: false
+      }
+    );
+    return new Group2([line, startArrow, endArrow], {
+      selectable: false,
+      evented: false
+    });
+  }
+  resolvePadding(containerWidth, containerHeight) {
+    if (typeof this.dielinePadding === "number") {
+      return this.dielinePadding;
+    }
+    if (typeof this.dielinePadding === "string") {
+      if (this.dielinePadding.endsWith("%")) {
+        const percent = parseFloat(this.dielinePadding) / 100;
+        return Math.min(containerWidth, containerHeight) * percent;
+      }
+      return parseFloat(this.dielinePadding) || 0;
+    }
+    return 0;
+  }
   updateRuler() {
     if (!this.canvasService) return;
     const layer = this.getLayer();
@@ -2750,95 +2966,141 @@ var RulerTool = class {
     const { thickness, backgroundColor, lineColor, textColor, fontSize } = this;
     const width = this.canvasService.canvas.width || 800;
     const height = this.canvasService.canvas.height || 600;
-    const topBg = new Rect2({
-      left: 0,
-      top: 0,
-      width,
-      height: thickness,
-      fill: backgroundColor,
-      selectable: false,
-      evented: false
-    });
-    const leftBg = new Rect2({
-      left: 0,
-      top: 0,
-      width: thickness,
-      height,
-      fill: backgroundColor,
-      selectable: false,
-      evented: false
-    });
-    const cornerBg = new Rect2({
-      left: 0,
-      top: 0,
-      width: thickness,
-      height: thickness,
-      fill: backgroundColor,
-      stroke: lineColor,
-      strokeWidth: 1,
+    const paddingPx = this.resolvePadding(width, height);
+    const layout = Coordinate.calculateLayout(
+      { width, height },
+      { width: this.dielineWidth, height: this.dielineHeight },
+      paddingPx
+    );
+    const scale = layout.scale;
+    const offsetX = layout.offsetX;
+    const offsetY = layout.offsetY;
+    const visualWidth = layout.width;
+    const visualHeight = layout.height;
+    const rawOffset = this.dielineOffset || 0;
+    const effectiveOffset = rawOffset > 0 ? rawOffset : 0;
+    const expandPixels = effectiveOffset * scale;
+    const gap = this.gap || 15;
+    const rulerLeft = offsetX - expandPixels;
+    const rulerTop = offsetY - expandPixels;
+    const rulerRight = offsetX + visualWidth + expandPixels;
+    const rulerBottom = offsetY + visualHeight + expandPixels;
+    const displayWidth = this.dielineWidth + effectiveOffset * 2;
+    const displayHeight = this.dielineHeight + effectiveOffset * 2;
+    const topRulerY = rulerTop - gap;
+    const topRulerXStart = rulerLeft;
+    const topRulerXEnd = rulerRight;
+    const leftRulerX = rulerLeft - gap;
+    const leftRulerYStart = rulerTop;
+    const leftRulerYEnd = rulerBottom;
+    const topDimLine = this.createArrowLine(
+      topRulerXStart,
+      topRulerY,
+      topRulerXEnd,
+      topRulerY,
+      lineColor
+    );
+    layer.add(topDimLine);
+    const extLen = 5;
+    layer.add(
+      new Line(
+        [
+          topRulerXStart,
+          topRulerY - extLen,
+          topRulerXStart,
+          topRulerY + extLen
+        ],
+        {
+          stroke: lineColor,
+          strokeWidth: 1,
+          selectable: false,
+          evented: false
+        }
+      )
+    );
+    layer.add(
+      new Line(
+        [topRulerXEnd, topRulerY - extLen, topRulerXEnd, topRulerY + extLen],
+        {
+          stroke: lineColor,
+          strokeWidth: 1,
+          selectable: false,
+          evented: false
+        }
+      )
+    );
+    const widthStr = parseFloat(displayWidth.toFixed(2)).toString();
+    const topTextContent = `${widthStr} ${this.dielineUnit}`;
+    const topText = new Text(topTextContent, {
+      left: topRulerXStart + (rulerRight - rulerLeft) / 2,
+      top: topRulerY,
+      fontSize,
+      fill: textColor,
+      fontFamily: "Arial",
+      originX: "center",
+      originY: "center",
+      backgroundColor,
+      // Background mask for readability
       selectable: false,
       evented: false
     });
-    layer.add(topBg);
-    layer.add(leftBg);
-    layer.add(cornerBg);
-    const step = 100;
-    const subStep = 10;
-    const midStep = 50;
-    for (let x = 0; x <= width; x += subStep) {
-      if (x < thickness) continue;
-      let len = thickness * 0.25;
-      if (x % step === 0) len = thickness * 0.8;
-      else if (x % midStep === 0) len = thickness * 0.5;
-      const line = new Line([x, thickness - len, x, thickness], {
-        stroke: lineColor,
-        strokeWidth: 1,
-        selectable: false,
-        evented: false
-      });
-      layer.add(line);
-      if (x % step === 0) {
-        const text = new Text(x.toString(), {
-          left: x + 2,
-          top: 2,
-          fontSize,
-          fill: textColor,
-          fontFamily: "Arial",
+    layer.add(topText);
+    const leftDimLine = this.createArrowLine(
+      leftRulerX,
+      leftRulerYStart,
+      leftRulerX,
+      leftRulerYEnd,
+      lineColor
+    );
+    layer.add(leftDimLine);
+    layer.add(
+      new Line(
+        [
+          leftRulerX - extLen,
+          leftRulerYStart,
+          leftRulerX + extLen,
+          leftRulerYStart
+        ],
+        {
+          stroke: lineColor,
+          strokeWidth: 1,
           selectable: false,
           evented: false
-        });
-        layer.add(text);
-      }
-    }
-    for (let y = 0; y <= height; y += subStep) {
-      if (y < thickness) continue;
-      let len = thickness * 0.25;
-      if (y % step === 0) len = thickness * 0.8;
-      else if (y % midStep === 0) len = thickness * 0.5;
-      const line = new Line([thickness - len, y, thickness, y], {
-        stroke: lineColor,
-        strokeWidth: 1,
-        selectable: false,
-        evented: false
-      });
-      layer.add(line);
-      if (y % step === 0) {
-        const text = new Text(y.toString(), {
-          angle: -90,
-          left: thickness / 2 - fontSize / 3,
-          // approximate centering
-          top: y + fontSize,
-          fontSize,
-          fill: textColor,
-          fontFamily: "Arial",
-          originX: "center",
-          originY: "center",
+        }
+      )
+    );
+    layer.add(
+      new Line(
+        [
+          leftRulerX - extLen,
+          leftRulerYEnd,
+          leftRulerX + extLen,
+          leftRulerYEnd
+        ],
+        {
+          stroke: lineColor,
+          strokeWidth: 1,
           selectable: false,
           evented: false
-        });
-        layer.add(text);
-      }
-    }
+        }
+      )
+    );
+    const heightStr = parseFloat(displayHeight.toFixed(2)).toString();
+    const leftTextContent = `${heightStr} ${this.dielineUnit}`;
+    const leftText = new Text(leftTextContent, {
+      left: leftRulerX,
+      top: leftRulerYStart + (rulerBottom - rulerTop) / 2,
+      angle: -90,
+      fontSize,
+      fill: textColor,
+      fontFamily: "Arial",
+      originX: "center",
+      originY: "center",
+      backgroundColor,
+      selectable: false,
+      evented: false
+    });
+    layer.add(leftText);
     this.canvasService.canvas.bringObjectToFront(layer);
     this.canvasService.canvas.requestRenderAll();
   }
@@ -2937,7 +3199,7 @@ var MirrorTool = class {
 };
 
 // src/CanvasService.ts
-import { Canvas, Group as Group2 } from "fabric";
+import { Canvas, Group as Group3 } from "fabric";
 var CanvasService = class {
   constructor(el, options) {
     if (el instanceof Canvas) {
@@ -2974,7 +3236,7 @@ var CanvasService = class {
         ...options,
         data: { ...options.data, id }
       };
-      layer = new Group2([], defaultOptions);
+      layer = new Group3([], defaultOptions);
       this.canvas.add(layer);
     }
     return layer;