@pooder/kit 3.1.0 → 3.3.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,6 +446,21 @@ 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
@@ -484,9 +517,10 @@ function resolveHolePosition(hole, geometry, canvasSize) {
       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 * canvasSize.width,
-      y: hole.y * canvasSize.height
+      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 };
@@ -540,12 +574,25 @@ function getDielineShape(options) {
     let lugsPath = null;
     let cutsPath = null;
     holes.forEach((hole) => {
-      const lug = new paper.Path.Circle({
-        center: [hole.x, hole.y],
+      const center = new paper.Point(hole.x, hole.y);
+      const lug = hole.shape === "square" ? new paper.Path.Rectangle({
+        point: [
+          center.x - hole.outerRadius,
+          center.y - hole.outerRadius
+        ],
+        size: [hole.outerRadius * 2, hole.outerRadius * 2]
+      }) : new paper.Path.Circle({
+        center,
         radius: hole.outerRadius
       });
-      const cut = new paper.Path.Circle({
-        center: [hole.x, hole.y],
+      const cut = hole.shape === "square" ? new paper.Path.Rectangle({
+        point: [
+          center.x - hole.innerRadius,
+          center.y - hole.innerRadius
+        ],
+        size: [hole.innerRadius * 2, hole.innerRadius * 2]
+      }) : new paper.Path.Circle({
+        center,
         radius: hole.innerRadius
       });
       if (!lugsPath) {
@@ -592,14 +639,19 @@ 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
+        );
       }
     }
   }
   return mainShape;
 }
 function generateDielinePath(options) {
-  ensurePaper(options.width * 2, options.height * 2);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
   const mainShape = getDielineShape(options);
   const pathData = mainShape.pathData;
@@ -623,8 +675,9 @@ function generateMaskPath(options) {
   return pathData;
 }
 function generateBleedZonePath(options, offset) {
-  const maxDim = Math.max(options.width, options.height) + Math.abs(offset) * 4;
-  ensurePaper(maxDim, maxDim);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
   const shapeOriginal = getDielineShape(options);
   let shapeOffset;
@@ -685,7 +738,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
@@ -695,6 +753,7 @@ var DielineTool = class {
     this.metadata = {
       name: "DielineTool"
     };
+    this.unit = "mm";
     this.shape = "rect";
     this.width = 500;
     this.height = 500;
@@ -705,6 +764,7 @@ var DielineTool = class {
     this.outsideColor = "#ffffff";
     this.showBleedLines = true;
     this.holes = [];
+    this.padding = 140;
     if (options) {
       Object.assign(this, options);
     }
@@ -718,14 +778,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(
@@ -766,6 +824,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",
@@ -801,15 +866,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",
@@ -878,7 +942,9 @@ var DielineTool = class {
               const scale = currentMax / Math.max(bounds.width, bounds.height);
               const newWidth = bounds.width * scale;
               const newHeight = bounds.height * scale;
-              const configService = (_a = this.context) == null ? void 0 : _a.services.get("ConfigurationService");
+              const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+                "ConfigurationService"
+              );
               if (configService) {
                 configService.update("dieline.width", newWidth);
                 configService.update("dieline.height", newHeight);
@@ -943,12 +1009,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) {
-    var _a, _b;
     if (!this.canvasService) return;
     const layer = this.getLayer();
     if (!layer) return;
     const {
+      unit,
       shape,
       radius,
       offset,
@@ -956,43 +1035,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;
-    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;
+    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 pos = resolveHolePosition(
-        h,
-        geometryForHoles,
-        { 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: pos.x,
-        y: pos.y
+        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,
@@ -1025,7 +1121,9 @@ var DielineTool = class {
         x: cx,
         y: cy,
         holes: absoluteHoles,
-        pathData: this.pathData
+        pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH
       });
       const insideObj = new Path(productPathData, {
         fill: insideColor,
@@ -1042,15 +1140,17 @@ 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
+          pathData: this.pathData,
+          canvasWidth: canvasW,
+          canvasHeight: canvasH
         },
-        offset
+        visualOffset
       );
       if (showBleedLines !== false) {
         const pattern = this.createHatchPattern("red");
@@ -1075,7 +1175,9 @@ var DielineTool = class {
         x: cx,
         y: cy,
         holes: absoluteHoles,
-        pathData: this.pathData
+        pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH
       });
       const offsetBorderObj = new Path(offsetPathData, {
         fill: null,
@@ -1093,14 +1195,15 @@ 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
+      pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH
     });
     const borderObj = new Path(borderPathData, {
       fill: "transparent",
@@ -1137,115 +1240,109 @@ 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 unit = this.unit || "mm";
+      const unitScale = Coordinate.convertUnit(1, "mm", unit);
       const pos = resolveHolePosition(
-        h,
-        { x: cx, y: cy, width, height },
+        {
+          ...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: pos.x,
-        y: pos.y
+        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
+      pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH
     });
+    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;
   }
 };
 
@@ -1414,7 +1511,7 @@ var FilmTool = class {
 import {
   ContributionPointIds as ContributionPointIds4
 } from "@pooder/core";
-import { Circle, Group, Point } from "fabric";
+import { Circle, Group, Point, Rect as Rect2 } from "fabric";
 var HoleTool = class {
   constructor(options) {
     this.id = "pooder.kit.hole";
@@ -1520,13 +1617,21 @@ var HoleTool = class {
           command: "addHole",
           title: "Add Hole",
           handler: (x, y) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (!this.canvasService) return false;
-            const { width, height } = this.canvasService.canvas;
-            const normalizedHole = Coordinate.normalizePoint(
-              { x, y },
-              { width: width || 800, height: height || 600 }
-            );
+            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"
             );
@@ -1535,9 +1640,11 @@ var HoleTool = class {
               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 shape = (_d = lastHole == null ? void 0 : lastHole.shape) != null ? _d : "circle";
               const newHole = {
-                x: normalizedHole.x,
-                y: normalizedHole.y,
+                x: normalizedX,
+                y: normalizedY,
+                shape,
                 innerRadius,
                 outerRadius
               };
@@ -1569,6 +1676,7 @@ var HoleTool = class {
     if (!this.handleDielineChange) {
       this.handleDielineChange = (geometry) => {
         this.currentGeometry = geometry;
+        this.redraw();
         const changed = this.enforceConstraints();
         if (changed) {
           this.syncHolesToDieline();
@@ -1632,7 +1740,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);
     }
@@ -1679,10 +1790,16 @@ var HoleTool = class {
   }
   syncHolesFromCanvas() {
     if (!this.canvasService) return;
-    const objects = this.canvasService.canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
-    });
+    const objects = this.canvasService.canvas.getObjects().filter(
+      (obj) => {
+        var _a;
+        return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker" || obj.name === "hole-marker";
+      }
+    );
+    if (objects.length === 0 && this.holes.length > 0) {
+      console.warn("HoleTool: No markers found on canvas to sync from");
+      return;
+    }
     objects.sort(
       (a, b) => {
         var _a, _b, _c, _d;
@@ -1690,18 +1807,28 @@ var HoleTool = class {
       }
     );
     const newHoles = objects.map((obj, i) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       const original = this.holes[i];
       const newAbsX = obj.left;
       const newAbsY = obj.top;
+      if (isNaN(newAbsX) || isNaN(newAbsY)) {
+        console.error("HoleTool: Invalid marker coordinates", {
+          newAbsX,
+          newAbsY
+        });
+        return original;
+      }
+      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: width2, height: height2 } = this.currentGeometry;
+        const { x, y, width, height } = this.currentGeometry;
         let bx = x;
         let by = y;
-        const left = x - width2 / 2;
-        const right = x + width2 / 2;
-        const top = y - height2 / 2;
-        const bottom = y + height2 / 2;
+        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;
@@ -1742,25 +1869,42 @@ var HoleTool = class {
         }
         return {
           ...original,
-          offsetX: newAbsX - bx,
-          offsetY: newAbsY - by,
+          // 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
+          y: void 0,
+          // Ensure other properties are preserved
+          innerRadius: original.innerRadius,
+          outerRadius: original.outerRadius,
+          shape: original.shape || "circle"
         };
       }
-      const { width, height } = this.canvasService.canvas;
-      const p = Coordinate.normalizePoint(
-        { x: newAbsX, y: newAbsY },
-        { width: width || 800, height: height || 600 }
-      );
+      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: p.x,
-        y: p.y,
-        // Ensure radii are preserved
-        innerRadius: (_a = original == null ? void 0 : original.innerRadius) != null ? _a : 15,
-        outerRadius: (_b = original == null ? void 0 : original.outerRadius) != null ? _b : 25
+        x: normalizedX,
+        y: normalizedY,
+        // Clear offsets if we are using direct normalized coordinates
+        offsetX: void 0,
+        offsetY: void 0,
+        // Ensure other properties are preserved
+        innerRadius: (_c = original == null ? void 0 : original.innerRadius) != null ? _c : 15,
+        outerRadius: (_d = original == null ? void 0 : original.outerRadius) != null ? _d : 25,
+        shape: (original == null ? void 0 : original.shape) || "circle"
       };
     });
     this.holes = newHoles;
@@ -1798,24 +1942,54 @@ var HoleTool = class {
       x: (width || 800) / 2,
       y: (height || 600) / 2,
       width: width || 800,
-      height: height || 600
+      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,
+        {
+          ...hole,
+          offsetX: (hole.offsetX || 0) * unitScale * scale,
+          offsetY: (hole.offsetY || 0) * unitScale * scale
+        },
         geometry,
-        { width: width || 800, height: height || 600 }
+        { width: geometry.width, height: geometry.height }
+        // Use geometry dims instead of canvas
       );
-      const innerCircle = new Circle({
-        radius: hole.innerRadius,
+      const isSquare = hole.shape === "square";
+      const innerMarker = isSquare ? new Rect2({
+        width: visualInnerRadius * 2,
+        height: visualInnerRadius * 2,
+        fill: "transparent",
+        stroke: "red",
+        strokeWidth: 2,
+        originX: "center",
+        originY: "center"
+      }) : new Circle({
+        radius: visualInnerRadius,
         fill: "transparent",
         stroke: "red",
         strokeWidth: 2,
         originX: "center",
         originY: "center"
       });
-      const outerCircle = new Circle({
-        radius: hole.outerRadius,
+      const outerMarker = isSquare ? new Rect2({
+        width: visualOuterRadius * 2,
+        height: visualOuterRadius * 2,
+        fill: "transparent",
+        stroke: "#666",
+        strokeWidth: 1,
+        strokeDashArray: [5, 5],
+        originX: "center",
+        originY: "center"
+      }) : new Circle({
+        radius: visualOuterRadius,
         fill: "transparent",
         stroke: "#666",
         strokeWidth: 1,
@@ -1823,7 +1997,7 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const holeGroup = new Group([outerCircle, innerCircle], {
+      const holeGroup = new Group([outerMarker, innerMarker], {
         left: pos.x,
         top: pos.y,
         originX: "center",
@@ -1895,11 +2069,16 @@ var HoleTool = class {
       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,
-        (_a = holeData == null ? void 0 : holeData.innerRadius) != null ? _a : 15,
-        (_b = holeData == null ? void 0 : holeData.outerRadius) != null ? _b : 25
+        innerR,
+        outerR
       );
       if (currentPos.distanceFrom(newPos) > 0.1) {
         obj.set({
@@ -1953,19 +2132,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;
@@ -1976,38 +2152,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;
@@ -2017,82 +2188,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");
@@ -2124,224 +2316,194 @@ 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;
+    let bleedOffset = 0;
+    if (this.context) {
+      const configService = this.context.services.get("ConfigurationService");
+      if (configService) {
+        dielinePhysicalWidth = configService.get("dieline.width") || 500;
+        dielinePhysicalHeight = configService.get("dieline.height") || 500;
+        bleedOffset = configService.get("dieline.offset") || 0;
+        const paddingValue = configService.get("dieline.padding") || 40;
+        let padding = 0;
+        if (typeof paddingValue === "number") {
+          padding = paddingValue;
+        } else if (typeof paddingValue === "string") {
+          if (paddingValue.endsWith("%")) {
+            const percent = parseFloat(paddingValue) / 100;
+            padding = Math.min(canvasW, canvasH) * percent;
+          } else {
+            padding = parseFloat(paddingValue) || 0;
+          }
+        }
+        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,
+      bleedOffset
+    };
+  }
+  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);
-      } 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();
-        }
+    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);
       }
-    } else {
-      this.loadImage(layer);
     }
-  }
-  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);
+    const layout = this.getLayoutInfo();
+    this.items.forEach((item, index) => {
+      let obj = this.objectMap.get(item.id);
+      if (!obj) {
+        this.loadImage(item, layer, layout);
       } 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);
-        } else {
-          image.top = centerY;
-        }
+        this.updateObjectProperties(obj, item, layout);
+        layer.remove(obj);
+        layer.add(obj);
       }
+    });
+    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(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({
-        opacity: opacity !== void 0 ? opacity : 1,
-        data: {
-          id: "user-image"
-        }
+        originX: "center",
+        originY: "center",
+        data: { id: item.id },
+        uniformScaling: true,
+        lockScalingFlip: true
+      });
+      image.setControlsVisibility({
+        mt: false,
+        mb: false,
+        ml: false,
+        mr: false
       });
+      let { width, height, left, top } = item;
+      const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight, bleedOffset } = layout;
+      if (width === void 0 && height === void 0) {
+        const targetWidth = dielinePhysicalWidth + 2 * bleedOffset;
+        const targetHeight = dielinePhysicalHeight + 2 * bleedOffset;
+        const targetMax = Math.max(targetWidth, targetHeight);
+        const imageMax = Math.max(image.width || 1, image.height || 1);
+        const scale = targetMax / imageMax;
+        width = (image.width || 1) * scale;
+        height = (image.height || 1) * scale;
+        item.width = width;
+        item.height = height;
+      }
+      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
@@ -2641,19 +2803,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);
     }
@@ -2666,8 +2834,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
@@ -2675,13 +2843,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();
         }
       });
     }
@@ -2695,13 +2888,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",
@@ -2710,6 +2896,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",
@@ -2738,16 +2932,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",
@@ -2798,6 +2982,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();
@@ -2806,95 +3052,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();
   }
@@ -2993,7 +3285,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) {
@@ -3030,7 +3322,7 @@ var CanvasService = class {
         ...options,
         data: { ...options.data, id }
       };
-      layer = new Group2([], defaultOptions);
+      layer = new Group3([], defaultOptions);
       this.canvas.add(layer);
     }
     return layer;