@pooder/kit 3.3.0 → 3.5.0

package/dist/index.mjs

@@ -208,6 +208,7 @@ import {
 import { Path, Pattern } from "fabric";
 
 // src/tracer.ts
+import paper from "paper";
 var ImageTracer = class {
   /**
    * Main entry point: Traces an image URL to an SVG path string.
@@ -215,7 +216,7 @@ var ImageTracer = class {
    * @param options Configuration options.
    */
   static async trace(imageUrl, options = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g;
     const img = await this.loadImage(imageUrl);
     const width = img.width;
     const height = img.height;
@@ -226,20 +227,250 @@ var ImageTracer = class {
     if (!ctx) throw new Error("Could not get 2D context");
     ctx.drawImage(img, 0, 0);
     const imageData = ctx.getImageData(0, 0, width, height);
-    const points = this.marchingSquares(imageData, (_a = options.threshold) != null ? _a : 10);
-    let finalPoints = points;
-    if (options.scaleToWidth && options.scaleToHeight && points.length > 0) {
+    const threshold = (_a = options.threshold) != null ? _a : 10;
+    const adaptiveRadius = Math.max(
+      5,
+      Math.floor(Math.max(width, height) * 0.02)
+    );
+    const radius = (_b = options.morphologyRadius) != null ? _b : adaptiveRadius;
+    const expand = (_c = options.expand) != null ? _c : 0;
+    const padding = radius + expand + 2;
+    const paddedWidth = width + padding * 2;
+    const paddedHeight = height + padding * 2;
+    let mask = this.createMask(imageData, threshold, padding, paddedWidth, paddedHeight);
+    if (radius > 0) {
+      mask = this.circularMorphology(mask, paddedWidth, paddedHeight, radius, "closing");
+      mask = this.fillHoles(mask, paddedWidth, paddedHeight);
+      const smoothRadius = Math.max(2, Math.floor(radius * 0.3));
+      mask = this.circularMorphology(mask, paddedWidth, paddedHeight, smoothRadius, "closing");
+    } else {
+      mask = this.fillHoles(mask, paddedWidth, paddedHeight);
+    }
+    if (expand > 0) {
+      mask = this.circularMorphology(mask, paddedWidth, paddedHeight, expand, "dilate");
+    }
+    const allContourPoints = this.traceAllContours(mask, paddedWidth, paddedHeight);
+    if (allContourPoints.length === 0) {
+      const w = (_d = options.scaleToWidth) != null ? _d : width;
+      const h = (_e = options.scaleToHeight) != null ? _e : height;
+      return `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`;
+    }
+    const primaryContour = allContourPoints.sort(
+      (a, b) => b.length - a.length
+    )[0];
+    const unpaddedPoints = primaryContour.map((p) => ({
+      x: p.x - padding,
+      y: p.y - padding
+    }));
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of unpaddedPoints) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+    const globalBounds = {
+      minX,
+      minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+    let finalPoints = unpaddedPoints;
+    if (options.scaleToWidth && options.scaleToHeight) {
       finalPoints = this.scalePoints(
-        points,
+        unpaddedPoints,
         options.scaleToWidth,
-        options.scaleToHeight
+        options.scaleToHeight,
+        globalBounds
       );
     }
-    const simplifiedPoints = this.douglasPeucker(
-      finalPoints,
-      (_b = options.simplifyTolerance) != null ? _b : 0.5
-    );
-    return this.pointsToSVG(simplifiedPoints);
+    const useSmoothing = options.smoothing !== false;
+    if (useSmoothing) {
+      return this.pointsToSVGPaper(finalPoints, (_f = options.simplifyTolerance) != null ? _f : 2.5);
+    } else {
+      const simplifiedPoints = this.douglasPeucker(
+        finalPoints,
+        (_g = options.simplifyTolerance) != null ? _g : 2
+      );
+      return this.pointsToSVG(simplifiedPoints);
+    }
+  }
+  static createMask(imageData, threshold, padding, paddedWidth, paddedHeight) {
+    const { width, height, data } = imageData;
+    const mask = new Uint8Array(paddedWidth * paddedHeight);
+    let hasTransparency = false;
+    for (let i = 3; i < data.length; i += 4) {
+      if (data[i] < 255) {
+        hasTransparency = true;
+        break;
+      }
+    }
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const srcIdx = (y * width + x) * 4;
+        const r = data[srcIdx];
+        const g = data[srcIdx + 1];
+        const b = data[srcIdx + 2];
+        const a = data[srcIdx + 3];
+        const destIdx = (y + padding) * paddedWidth + (x + padding);
+        if (hasTransparency) {
+          if (a > threshold) {
+            mask[destIdx] = 1;
+          }
+        } else {
+          if (!(r > 240 && g > 240 && b > 240)) {
+            mask[destIdx] = 1;
+          }
+        }
+      }
+    }
+    return mask;
+  }
+  /**
+   * Fast circular morphology using a distance-transform inspired separable approach.
+   * O(N * R) complexity, where R is the radius.
+   */
+  static circularMorphology(mask, width, height, radius, op) {
+    const dilate = (m, r) => {
+      const horizontalDist = new Int32Array(width * height);
+      for (let y = 0; y < height; y++) {
+        let lastSolid = -r * 2;
+        for (let x = 0; x < width; x++) {
+          if (m[y * width + x]) lastSolid = x;
+          horizontalDist[y * width + x] = x - lastSolid;
+        }
+        lastSolid = width + r * 2;
+        for (let x = width - 1; x >= 0; x--) {
+          if (m[y * width + x]) lastSolid = x;
+          horizontalDist[y * width + x] = Math.min(
+            horizontalDist[y * width + x],
+            lastSolid - x
+          );
+        }
+      }
+      const result = new Uint8Array(width * height);
+      const r2 = r * r;
+      for (let x = 0; x < width; x++) {
+        for (let y = 0; y < height; y++) {
+          let found = false;
+          const minY = Math.max(0, y - r);
+          const maxY = Math.min(height - 1, y + r);
+          for (let dy = minY; dy <= maxY; dy++) {
+            const dY = dy - y;
+            const hDist = horizontalDist[dy * width + x];
+            if (hDist * hDist + dY * dY <= r2) {
+              found = true;
+              break;
+            }
+          }
+          if (found) result[y * width + x] = 1;
+        }
+      }
+      return result;
+    };
+    const erode = (m, r) => {
+      const inverted = new Uint8Array(m.length);
+      for (let i = 0; i < m.length; i++) inverted[i] = m[i] ? 0 : 1;
+      const dilatedInverted = dilate(inverted, r);
+      const result = new Uint8Array(m.length);
+      for (let i = 0; i < m.length; i++) result[i] = dilatedInverted[i] ? 0 : 1;
+      return result;
+    };
+    switch (op) {
+      case "dilate":
+        return dilate(mask, radius);
+      case "erode":
+        return erode(mask, radius);
+      case "closing":
+        return erode(dilate(mask, radius), radius);
+      case "opening":
+        return dilate(erode(mask, radius), radius);
+      default:
+        return mask;
+    }
+  }
+  /**
+   * Fills internal holes in the binary mask using flood fill from edges.
+   */
+  static fillHoles(mask, width, height) {
+    const background = new Uint8Array(width * height);
+    const queue = [];
+    for (let x = 0; x < width; x++) {
+      if (mask[x] === 0) {
+        background[x] = 1;
+        queue.push([x, 0]);
+      }
+      const lastRow = (height - 1) * width + x;
+      if (mask[lastRow] === 0) {
+        background[lastRow] = 1;
+        queue.push([x, height - 1]);
+      }
+    }
+    for (let y = 1; y < height - 1; y++) {
+      if (mask[y * width] === 0) {
+        background[y * width] = 1;
+        queue.push([0, y]);
+      }
+      if (mask[y * width + width - 1] === 0) {
+        background[y * width + width - 1] = 1;
+        queue.push([width - 1, y]);
+      }
+    }
+    const dirs = [
+      [0, 1],
+      [0, -1],
+      [1, 0],
+      [-1, 0]
+    ];
+    let head = 0;
+    while (head < queue.length) {
+      const [cx, cy] = queue[head++];
+      for (const [dx, dy] of dirs) {
+        const nx = cx + dx;
+        const ny = cy + dy;
+        if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+          const nidx = ny * width + nx;
+          if (mask[nidx] === 0 && background[nidx] === 0) {
+            background[nidx] = 1;
+            queue.push([nx, ny]);
+          }
+        }
+      }
+    }
+    const filledMask = new Uint8Array(width * height);
+    for (let i = 0; i < width * height; i++) {
+      filledMask[i] = background[i] === 0 ? 1 : 0;
+    }
+    return filledMask;
+  }
+  /**
+   * Traces all contours in the mask with optimized start-point detection
+   */
+  static traceAllContours(mask, width, height) {
+    const visited = new Uint8Array(width * height);
+    const allContours = [];
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        if (mask[idx] && !visited[idx]) {
+          const isLeftEdge = x === 0 || mask[idx - 1] === 0;
+          if (isLeftEdge) {
+            const contour = this.marchingSquares(
+              mask,
+              visited,
+              x,
+              y,
+              width,
+              height
+            );
+            if (contour.length > 2) {
+              allContours.push(contour);
+            }
+          }
+        }
+      }
+    }
+    return allContours;
   }
   static loadImage(url) {
     return new Promise((resolve, reject) => {
@@ -254,33 +485,11 @@ var ImageTracer = class {
    * Moore-Neighbor Tracing Algorithm
    * More robust for irregular shapes than simple Marching Squares walker.
    */
-  static marchingSquares(imageData, alphaThreshold) {
-    const width = imageData.width;
-    const height = imageData.height;
-    const data = imageData.data;
+  static marchingSquares(mask, visited, startX, startY, width, height) {
     const isSolid = (x, y) => {
       if (x < 0 || x >= width || y < 0 || y >= height) return false;
-      const index = (y * width + x) * 4;
-      const r = data[index];
-      const g = data[index + 1];
-      const b = data[index + 2];
-      const a = data[index + 3];
-      if (a <= alphaThreshold) return false;
-      if (r > 240 && g > 240 && b > 240) return false;
-      return true;
+      return mask[y * width + x] === 1;
     };
-    let startX = -1;
-    let startY = -1;
-    searchLoop: for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        if (isSolid(x, y)) {
-          startX = x;
-          startY = y;
-          break searchLoop;
-        }
-      }
-    }
-    if (startX === -1) return [];
     const points = [];
     let cx = startX;
     let cy = startY;
@@ -299,6 +508,7 @@ var ImageTracer = class {
     let steps = 0;
     do {
       points.push({ x: cx, y: cy });
+      visited[cy * width + cx] = 1;
       let found = false;
       for (let i = 0; i < 8; i++) {
         const idx = (backtrack + 1 + i) % 8;
@@ -307,16 +517,12 @@ var ImageTracer = class {
         if (isSolid(nx, ny)) {
           cx = nx;
           cy = ny;
-          backtrack = (idx + 4) % 8;
-          backtrack = (idx + 4 + 1) % 8;
           backtrack = (idx + 4 + 1) % 8;
           found = true;
           break;
         }
       }
-      if (!found) {
-        break;
-      }
+      if (!found) break;
       steps++;
     } while ((cx !== startX || cy !== startY) && steps < maxSteps);
     return points;
@@ -365,23 +571,14 @@ var ImageTracer = class {
     dy = p.y - y;
     return dx * dx + dy * dy;
   }
-  static scalePoints(points, targetWidth, targetHeight) {
+  static scalePoints(points, targetWidth, targetHeight, bounds) {
     if (points.length === 0) return points;
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const p of points) {
-      if (p.x < minX) minX = p.x;
-      if (p.y < minY) minY = p.y;
-      if (p.x > maxX) maxX = p.x;
-      if (p.y > maxY) maxY = p.y;
-    }
-    const srcW = maxX - minX;
-    const srcH = maxY - minY;
-    if (srcW === 0 || srcH === 0) return points;
-    const scaleX = targetWidth / srcW;
-    const scaleY = targetHeight / srcH;
+    if (bounds.width === 0 || bounds.height === 0) return points;
+    const scaleX = targetWidth / bounds.width;
+    const scaleY = targetHeight / bounds.height;
     return points.map((p) => ({
-      x: (p.x - minX) * scaleX,
-      y: (p.y - minY) * scaleY
+      x: (p.x - bounds.minX) * scaleX,
+      y: (p.y - bounds.minY) * scaleY
     }));
   }
   static pointsToSVG(points) {
@@ -390,6 +587,23 @@ var ImageTracer = class {
     const tail = points.slice(1);
     return `M ${head.x} ${head.y} ` + tail.map((p) => `L ${p.x} ${p.y}`).join(" ") + " Z";
   }
+  static ensurePaper() {
+    if (!paper.project) {
+      paper.setup(new paper.Size(100, 100));
+    }
+  }
+  static pointsToSVGPaper(points, tolerance) {
+    if (points.length < 3) return this.pointsToSVG(points);
+    this.ensurePaper();
+    const path = new paper.Path({
+      segments: points.map((p) => [p.x, p.y]),
+      closed: true
+    });
+    path.simplify(tolerance);
+    const data = path.pathData;
+    path.remove();
+    return data;
+  }
 };
 
 // src/coordinate.ts
@@ -464,96 +678,45 @@ var Coordinate = class {
 };
 
 // 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 };
+import paper2 from "paper";
+function resolveFeaturePosition(feature, geometry) {
+  const { x, y, width, height } = geometry;
+  const left = x - width / 2;
+  const top = y - height / 2;
+  return {
+    x: left + feature.x * width,
+    y: top + feature.y * height
+  };
 }
 function ensurePaper(width, height) {
-  if (!paper.project) {
-    paper.setup(new paper.Size(width, height));
+  if (!paper2.project) {
+    paper2.setup(new paper2.Size(width, height));
   } else {
-    paper.view.viewSize = new paper.Size(width, height);
+    paper2.view.viewSize = new paper2.Size(width, height);
   }
 }
 function createBaseShape(options) {
   const { shape, width, height, radius, x, y, pathData } = options;
-  const center = new paper.Point(x, y);
+  const center = new paper2.Point(x, y);
   if (shape === "rect") {
-    return new paper.Path.Rectangle({
+    return new paper2.Path.Rectangle({
       point: [x - width / 2, y - height / 2],
       size: [Math.max(0, width), Math.max(0, height)],
       radius: Math.max(0, radius)
     });
   } else if (shape === "circle") {
     const r = Math.min(width, height) / 2;
-    return new paper.Path.Circle({
+    return new paper2.Path.Circle({
       center,
       radius: Math.max(0, r)
     });
   } else if (shape === "ellipse") {
-    return new paper.Path.Ellipse({
+    return new paper2.Path.Ellipse({
       center,
       radius: [Math.max(0, width / 2), Math.max(0, height / 2)]
     });
   } else if (shape === "custom" && pathData) {
-    const path = new paper.Path();
+    const path = new paper2.Path();
     path.pathData = pathData;
     path.position = center;
     if (width > 0 && height > 0 && path.bounds.width > 0 && path.bounds.height > 0) {
@@ -561,89 +724,76 @@ function createBaseShape(options) {
     }
     return path;
   } else {
-    return new paper.Path.Rectangle({
+    return new paper2.Path.Rectangle({
       point: [x - width / 2, y - height / 2],
       size: [Math.max(0, width), Math.max(0, height)]
     });
   }
 }
+function createFeatureItem(feature, center) {
+  let item;
+  if (feature.shape === "rect") {
+    const w = feature.width || 10;
+    const h = feature.height || 10;
+    const r = feature.radius || 0;
+    item = new paper2.Path.Rectangle({
+      point: [center.x - w / 2, center.y - h / 2],
+      size: [w, h],
+      radius: r
+    });
+  } else {
+    const r = feature.radius || 5;
+    item = new paper2.Path.Circle({
+      center,
+      radius: r
+    });
+  }
+  if (feature.rotation) {
+    item.rotate(feature.rotation, center);
+  }
+  return item;
+}
 function getDielineShape(options) {
   let mainShape = createBaseShape(options);
-  const { holes } = options;
-  if (holes && holes.length > 0) {
-    let lugsPath = null;
-    let cutsPath = null;
-    holes.forEach((hole) => {
-      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 = 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) {
-        lugsPath = lug;
+  const { features } = options;
+  if (features && features.length > 0) {
+    const adds = [];
+    const subtracts = [];
+    features.forEach((f) => {
+      const pos = resolveFeaturePosition(f, options);
+      const center = new paper2.Point(pos.x, pos.y);
+      const item = createFeatureItem(f, center);
+      if (f.operation === "add") {
+        adds.push(item);
       } else {
+        subtracts.push(item);
+      }
+    });
+    if (adds.length > 0) {
+      for (const item of adds) {
         try {
-          const temp = lugsPath.unite(lug);
-          lugsPath.remove();
-          lug.remove();
-          lugsPath = temp;
+          const temp = mainShape.unite(item);
+          mainShape.remove();
+          item.remove();
+          mainShape = temp;
         } catch (e) {
-          console.error("Geometry: Failed to unite lug", e);
-          lug.remove();
+          console.error("Geometry: Failed to unite feature", e);
+          item.remove();
         }
       }
-      if (!cutsPath) {
-        cutsPath = cut;
-      } else {
+    }
+    if (subtracts.length > 0) {
+      for (const item of subtracts) {
         try {
-          const temp = cutsPath.unite(cut);
-          cutsPath.remove();
-          cut.remove();
-          cutsPath = temp;
+          const temp = mainShape.subtract(item);
+          mainShape.remove();
+          item.remove();
+          mainShape = temp;
         } catch (e) {
-          console.error("Geometry: Failed to unite cut", e);
-          cut.remove();
+          console.error("Geometry: Failed to subtract feature", e);
+          item.remove();
         }
       }
-    });
-    if (lugsPath) {
-      try {
-        const temp = mainShape.unite(lugsPath);
-        mainShape.remove();
-        lugsPath.remove();
-        mainShape = temp;
-      } catch (e) {
-        console.error("Geometry: Failed to unite lugsPath to mainShape", e);
-      }
-    }
-    if (cutsPath) {
-      try {
-        const temp = mainShape.subtract(cutsPath);
-        mainShape.remove();
-        cutsPath.remove();
-        mainShape = temp;
-      } catch (e) {
-        console.error(
-          "Geometry: Failed to subtract cutsPath from mainShape",
-          e
-        );
-      }
     }
   }
   return mainShape;
@@ -652,7 +802,7 @@ function generateDielinePath(options) {
   const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
   const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
   ensurePaper(paperWidth, paperHeight);
-  paper.project.activeLayer.removeChildren();
+  paper2.project.activeLayer.removeChildren();
   const mainShape = getDielineShape(options);
   const pathData = mainShape.pathData;
   mainShape.remove();
@@ -660,9 +810,9 @@ function generateDielinePath(options) {
 }
 function generateMaskPath(options) {
   ensurePaper(options.canvasWidth, options.canvasHeight);
-  paper.project.activeLayer.removeChildren();
+  paper2.project.activeLayer.removeChildren();
   const { canvasWidth, canvasHeight } = options;
-  const maskRect = new paper.Path.Rectangle({
+  const maskRect = new paper2.Path.Rectangle({
     point: [0, 0],
     size: [canvasWidth, canvasHeight]
   });
@@ -674,43 +824,13 @@ function generateMaskPath(options) {
   finalMask.remove();
   return pathData;
 }
-function generateBleedZonePath(options, offset) {
-  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
-  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+function generateBleedZonePath(originalOptions, offsetOptions, offset) {
+  const paperWidth = originalOptions.canvasWidth || originalOptions.width * 2 || 2e3;
+  const paperHeight = originalOptions.canvasHeight || originalOptions.height * 2 || 2e3;
   ensurePaper(paperWidth, paperHeight);
-  paper.project.activeLayer.removeChildren();
-  const shapeOriginal = getDielineShape(options);
-  let shapeOffset;
-  if (options.shape === "custom") {
-    const stroker = shapeOriginal.clone();
-    stroker.strokeColor = new paper.Color("black");
-    stroker.strokeWidth = Math.abs(offset) * 2;
-    stroker.strokeJoin = "round";
-    stroker.strokeCap = "round";
-    let expanded;
-    try {
-      expanded = stroker.expand({ stroke: true, fill: false, insert: false });
-    } catch (e) {
-      stroker.remove();
-      shapeOffset = shapeOriginal.clone();
-      return shapeOffset.pathData;
-    }
-    stroker.remove();
-    if (offset > 0) {
-      shapeOffset = shapeOriginal.unite(expanded);
-    } else {
-      shapeOffset = shapeOriginal.subtract(expanded);
-    }
-    expanded.remove();
-  } else {
-    const offsetOptions = {
-      ...options,
-      width: Math.max(0, options.width + offset * 2),
-      height: Math.max(0, options.height + offset * 2),
-      radius: options.radius === 0 ? 0 : Math.max(0, options.radius + offset)
-    };
-    shapeOffset = getDielineShape(offsetOptions);
-  }
+  paper2.project.activeLayer.removeChildren();
+  const shapeOriginal = getDielineShape(originalOptions);
+  const shapeOffset = getDielineShape(offsetOptions);
   let bleedZone;
   if (offset > 0) {
     bleedZone = shapeOffset.subtract(shapeOriginal);
@@ -725,16 +845,16 @@ function generateBleedZonePath(options, offset) {
 }
 function getNearestPointOnDieline(point, options) {
   ensurePaper(options.width * 2, options.height * 2);
-  paper.project.activeLayer.removeChildren();
+  paper2.project.activeLayer.removeChildren();
   const shape = createBaseShape(options);
-  const p = new paper.Point(point.x, point.y);
+  const p = new paper2.Point(point.x, point.y);
   const nearest = shape.getNearestPoint(p);
   const result = { x: nearest.x, y: nearest.y };
   shape.remove();
   return result;
 }
 function getPathBounds(pathData) {
-  const path = new paper.Path();
+  const path = new paper2.Path();
   path.pathData = pathData;
   const bounds = path.bounds;
   path.remove();
@@ -753,20 +873,41 @@ var DielineTool = class {
     this.metadata = {
       name: "DielineTool"
     };
-    this.unit = "mm";
-    this.shape = "rect";
-    this.width = 500;
-    this.height = 500;
-    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.padding = 140;
+    this.state = {
+      unit: "mm",
+      shape: "rect",
+      width: 500,
+      height: 500,
+      radius: 0,
+      offset: 0,
+      padding: 140,
+      mainLine: {
+        width: 2.7,
+        color: "#FF0000",
+        dashLength: 5,
+        style: "solid"
+      },
+      offsetLine: {
+        width: 2.7,
+        color: "#FF0000",
+        dashLength: 5,
+        style: "solid"
+      },
+      insideColor: "rgba(0,0,0,0)",
+      outsideColor: "#ffffff",
+      showBleedLines: true,
+      features: []
+    };
     if (options) {
-      Object.assign(this, options);
+      if (options.mainLine) {
+        Object.assign(this.state.mainLine, options.mainLine);
+        delete options.mainLine;
+      }
+      if (options.offsetLine) {
+        Object.assign(this.state.offsetLine, options.offsetLine);
+        delete options.offsetLine;
+      }
+      Object.assign(this.state, options);
     }
   }
   activate(context) {
@@ -778,38 +919,93 @@ 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.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(
-        "dieline.insideColor",
-        this.insideColor
-      );
-      this.outsideColor = configService.get(
-        "dieline.outsideColor",
-        this.outsideColor
-      );
-      this.showBleedLines = configService.get(
-        "dieline.showBleedLines",
-        this.showBleedLines
-      );
-      this.holes = configService.get("dieline.holes", this.holes);
-      this.pathData = configService.get("dieline.pathData", this.pathData);
+      const s = this.state;
+      s.unit = configService.get("dieline.unit", s.unit);
+      s.shape = configService.get("dieline.shape", s.shape);
+      s.width = configService.get("dieline.width", s.width);
+      s.height = configService.get("dieline.height", s.height);
+      s.radius = configService.get("dieline.radius", s.radius);
+      s.padding = configService.get("dieline.padding", s.padding);
+      s.offset = configService.get("dieline.offset", s.offset);
+      s.mainLine.width = configService.get("dieline.strokeWidth", s.mainLine.width);
+      s.mainLine.color = configService.get("dieline.strokeColor", s.mainLine.color);
+      s.mainLine.dashLength = configService.get("dieline.dashLength", s.mainLine.dashLength);
+      s.mainLine.style = configService.get("dieline.style", s.mainLine.style);
+      s.offsetLine.width = configService.get("dieline.offsetStrokeWidth", s.offsetLine.width);
+      s.offsetLine.color = configService.get("dieline.offsetStrokeColor", s.offsetLine.color);
+      s.offsetLine.dashLength = configService.get("dieline.offsetDashLength", s.offsetLine.dashLength);
+      s.offsetLine.style = configService.get("dieline.offsetStyle", s.offsetLine.style);
+      s.insideColor = configService.get("dieline.insideColor", s.insideColor);
+      s.outsideColor = configService.get("dieline.outsideColor", s.outsideColor);
+      s.showBleedLines = configService.get("dieline.showBleedLines", s.showBleedLines);
+      s.features = configService.get("dieline.features", s.features);
+      s.pathData = configService.get("dieline.pathData", s.pathData);
       configService.onAnyChange((e) => {
         if (e.key.startsWith("dieline.")) {
-          const prop = e.key.split(".")[1];
-          console.log(
-            `[DielineTool] Config change detected: ${e.key} -> ${e.value}`
-          );
-          if (prop && prop in this) {
-            this[prop] = e.value;
-            this.updateDieline();
+          console.log(`[DielineTool] Config change detected: ${e.key} -> ${e.value}`);
+          switch (e.key) {
+            case "dieline.unit":
+              s.unit = e.value;
+              break;
+            case "dieline.shape":
+              s.shape = e.value;
+              break;
+            case "dieline.width":
+              s.width = e.value;
+              break;
+            case "dieline.height":
+              s.height = e.value;
+              break;
+            case "dieline.radius":
+              s.radius = e.value;
+              break;
+            case "dieline.padding":
+              s.padding = e.value;
+              break;
+            case "dieline.offset":
+              s.offset = e.value;
+              break;
+            case "dieline.strokeWidth":
+              s.mainLine.width = e.value;
+              break;
+            case "dieline.strokeColor":
+              s.mainLine.color = e.value;
+              break;
+            case "dieline.dashLength":
+              s.mainLine.dashLength = e.value;
+              break;
+            case "dieline.style":
+              s.mainLine.style = e.value;
+              break;
+            case "dieline.offsetStrokeWidth":
+              s.offsetLine.width = e.value;
+              break;
+            case "dieline.offsetStrokeColor":
+              s.offsetLine.color = e.value;
+              break;
+            case "dieline.offsetDashLength":
+              s.offsetLine.dashLength = e.value;
+              break;
+            case "dieline.offsetStyle":
+              s.offsetLine.style = e.value;
+              break;
+            case "dieline.insideColor":
+              s.insideColor = e.value;
+              break;
+            case "dieline.outsideColor":
+              s.outsideColor = e.value;
+              break;
+            case "dieline.showBleedLines":
+              s.showBleedLines = e.value;
+              break;
+            case "dieline.features":
+              s.features = e.value;
+              break;
+            case "dieline.pathData":
+              s.pathData = e.value;
+              break;
           }
+          this.updateDieline();
         }
       });
     }
@@ -822,6 +1018,7 @@ var DielineTool = class {
     this.context = void 0;
   }
   contribute() {
+    const s = this.state;
     return {
       [ContributionPointIds2.CONFIGURATIONS]: [
         {
@@ -829,14 +1026,14 @@ var DielineTool = class {
           type: "select",
           label: "Unit",
           options: ["px", "mm", "cm", "in"],
-          default: this.unit
+          default: s.unit
         },
         {
           id: "dieline.shape",
           type: "select",
           label: "Shape",
           options: ["rect", "circle", "ellipse", "custom"],
-          default: this.shape
+          default: s.shape
         },
         {
           id: "dieline.width",
@@ -844,7 +1041,7 @@ var DielineTool = class {
           label: "Width",
           min: 10,
           max: 2e3,
-          default: this.width
+          default: s.width
         },
         {
           id: "dieline.height",
@@ -852,7 +1049,7 @@ var DielineTool = class {
           label: "Height",
           min: 10,
           max: 2e3,
-          default: this.height
+          default: s.height
         },
         {
           id: "dieline.radius",
@@ -860,20 +1057,14 @@ var DielineTool = class {
           label: "Corner Radius",
           min: 0,
           max: 500,
-          default: this.radius
-        },
-        {
-          id: "dieline.position",
-          type: "json",
-          label: "Position (Normalized)",
-          default: this.radius
+          default: s.radius
         },
         {
           id: "dieline.padding",
           type: "select",
           label: "View Padding",
           options: [0, 10, 20, 40, 60, 100, "2%", "5%", "10%", "15%", "20%"],
-          default: this.padding
+          default: s.padding
         },
         {
           id: "dieline.offset",
@@ -881,38 +1072,91 @@ var DielineTool = class {
           label: "Bleed Offset",
           min: -100,
           max: 100,
-          default: this.offset
+          default: s.offset
         },
         {
           id: "dieline.showBleedLines",
           type: "boolean",
           label: "Show Bleed Lines",
-          default: this.showBleedLines
+          default: s.showBleedLines
+        },
+        {
+          id: "dieline.strokeWidth",
+          type: "number",
+          label: "Line Width",
+          min: 0.1,
+          max: 10,
+          step: 0.1,
+          default: s.mainLine.width
+        },
+        {
+          id: "dieline.strokeColor",
+          type: "color",
+          label: "Line Color",
+          default: s.mainLine.color
+        },
+        {
+          id: "dieline.dashLength",
+          type: "number",
+          label: "Dash Length",
+          min: 1,
+          max: 50,
+          default: s.mainLine.dashLength
         },
         {
           id: "dieline.style",
           type: "select",
           label: "Line Style",
-          options: ["solid", "dashed"],
-          default: this.style
+          options: ["solid", "dashed", "hidden"],
+          default: s.mainLine.style
+        },
+        {
+          id: "dieline.offsetStrokeWidth",
+          type: "number",
+          label: "Offset Line Width",
+          min: 0.1,
+          max: 10,
+          step: 0.1,
+          default: s.offsetLine.width
+        },
+        {
+          id: "dieline.offsetStrokeColor",
+          type: "color",
+          label: "Offset Line Color",
+          default: s.offsetLine.color
+        },
+        {
+          id: "dieline.offsetDashLength",
+          type: "number",
+          label: "Offset Dash Length",
+          min: 1,
+          max: 50,
+          default: s.offsetLine.dashLength
+        },
+        {
+          id: "dieline.offsetStyle",
+          type: "select",
+          label: "Offset Line Style",
+          options: ["solid", "dashed", "hidden"],
+          default: s.offsetLine.style
         },
         {
           id: "dieline.insideColor",
           type: "color",
           label: "Inside Color",
-          default: this.insideColor
+          default: s.insideColor
         },
         {
           id: "dieline.outsideColor",
           type: "color",
           label: "Outside Color",
-          default: this.outsideColor
+          default: s.outsideColor
         },
         {
-          id: "dieline.holes",
+          id: "dieline.features",
           type: "json",
-          label: "Holes",
-          default: this.holes
+          label: "Edge Features",
+          default: s.features
         }
       ],
       [ContributionPointIds2.COMMANDS]: [
@@ -934,24 +1178,18 @@ 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 currentMax = Math.max(s.width, s.height);
               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"
-              );
-              if (configService) {
-                configService.update("dieline.width", newWidth);
-                configService.update("dieline.height", newHeight);
-                configService.update("dieline.shape", "custom");
-                configService.update("dieline.pathData", pathData);
-              }
-              return pathData;
+              return {
+                pathData,
+                width: newWidth,
+                height: newHeight
+              };
             } catch (e) {
               console.error("Edge detection failed", e);
               throw e;
@@ -1010,15 +1248,15 @@ var DielineTool = class {
     return new Pattern({ source: canvas, repetition: "repeat" });
   }
   resolvePadding(containerWidth, containerHeight) {
-    if (typeof this.padding === "number") {
-      return this.padding;
+    if (typeof this.state.padding === "number") {
+      return this.state.padding;
     }
-    if (typeof this.padding === "string") {
-      if (this.padding.endsWith("%")) {
-        const percent = parseFloat(this.padding) / 100;
+    if (typeof this.state.padding === "string") {
+      if (this.state.padding.endsWith("%")) {
+        const percent = parseFloat(this.state.padding) / 100;
         return Math.min(containerWidth, containerHeight) * percent;
       }
-      return parseFloat(this.padding) || 0;
+      return parseFloat(this.state.padding) || 0;
     }
     return 0;
   }
@@ -1031,14 +1269,14 @@ var DielineTool = class {
       shape,
       radius,
       offset,
-      style,
+      mainLine,
+      offsetLine,
       insideColor,
       outsideColor,
-      position,
       showBleedLines,
-      holes
-    } = this;
-    let { width, height } = this;
+      features
+    } = this.state;
+    let { width, height } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
     const paddingPx = this.resolvePadding(canvasW, canvasH);
@@ -1055,40 +1293,27 @@ var DielineTool = class {
     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 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
-      });
+    const absoluteFeatures = (features || []).map((f) => {
+      const featureScale = scale;
       return {
-        ...h,
-        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
+        ...f,
+        x: f.x,
+        y: f.y,
+        width: (f.width || 0) * featureScale,
+        height: (f.height || 0) * featureScale,
+        radius: (f.radius || 0) * featureScale
       };
     });
+    const originalFeatures = absoluteFeatures.filter(
+      (f) => !f.target || f.target === "original" || f.target === "both"
+    );
+    const offsetFeatures = absoluteFeatures.filter(
+      (f) => f.target === "offset" || f.target === "both"
+    );
     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 maskFeatures = visualOffset !== 0 ? offsetFeatures : originalFeatures;
     const maskPathData = generateMaskPath({
       canvasWidth: canvasW,
       canvasHeight: canvasH,
@@ -1098,8 +1323,8 @@ var DielineTool = class {
       radius: cutR,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData
+      features: maskFeatures,
+      pathData: this.state.pathData
     });
     const mask = new Path(maskPathData, {
       fill: outsideColor,
@@ -1120,8 +1345,9 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: absoluteHoles,
-        pathData: this.pathData,
+        features: maskFeatures,
+        // Use same features as mask for consistency
+        pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH
       });
@@ -1145,15 +1371,27 @@ var DielineTool = class {
           radius: visualRadius,
           x: cx,
           y: cy,
-          holes: absoluteHoles,
-          pathData: this.pathData,
+          features: originalFeatures,
+          pathData: this.state.pathData,
+          canvasWidth: canvasW,
+          canvasHeight: canvasH
+        },
+        {
+          shape,
+          width: cutW,
+          height: cutH,
+          radius: cutR,
+          x: cx,
+          y: cy,
+          features: offsetFeatures,
+          pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
         },
         visualOffset
       );
       if (showBleedLines !== false) {
-        const pattern = this.createHatchPattern("red");
+        const pattern = this.createHatchPattern(mainLine.color);
         if (pattern) {
           const bleedObj = new Path(bleedPathData, {
             fill: pattern,
@@ -1174,18 +1412,16 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: absoluteHoles,
-        pathData: this.pathData,
+        features: offsetFeatures,
+        pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH
       });
       const offsetBorderObj = new Path(offsetPathData, {
         fill: null,
-        stroke: "#666",
-        // Grey
-        strokeWidth: 1,
-        strokeDashArray: [4, 4],
-        // Dashed
+        stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
+        strokeWidth: offsetLine.width,
+        strokeDashArray: offsetLine.style === "dashed" ? [offsetLine.dashLength, offsetLine.dashLength] : void 0,
         selectable: false,
         evented: false,
         originX: "left",
@@ -1200,16 +1436,16 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData,
+      features: originalFeatures,
+      pathData: this.state.pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
     });
     const borderObj = new Path(borderPathData, {
       fill: "transparent",
-      stroke: "red",
-      strokeWidth: 1,
-      strokeDashArray: style === "dashed" ? [5, 5] : void 0,
+      stroke: mainLine.style === "hidden" ? null : mainLine.color,
+      strokeWidth: mainLine.width,
+      strokeDashArray: mainLine.style === "dashed" ? [mainLine.dashLength, mainLine.dashLength] : void 0,
       selectable: false,
       evented: false,
       originX: "left",
@@ -1241,7 +1477,7 @@ var DielineTool = class {
   }
   getGeometry() {
     if (!this.canvasService) return null;
-    const { unit, shape, width, height, radius, position, offset } = this;
+    const { unit, shape, width, height, radius, offset, mainLine, pathData } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
     const paddingPx = this.resolvePadding(canvasW, canvasH);
@@ -1264,16 +1500,17 @@ var DielineTool = class {
       height: visualHeight,
       radius: radius * scale,
       offset: offset * scale,
-      // Pass scale to help other tools (like HoleTool) convert units
+      // Pass scale to help other tools (like FeatureTool) convert units
       scale,
-      pathData: this.pathData
+      strokeWidth: mainLine.width,
+      pathData
     };
   }
   async exportCutImage() {
     if (!this.canvasService) return null;
     const userLayer = this.canvasService.getLayer("user");
     if (!userLayer) return null;
-    const { shape, width, height, radius, position, holes } = this;
+    const { shape, width, height, radius, features, unit, pathData } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
     const paddingPx = this.resolvePadding(canvasW, canvasH);
@@ -1288,55 +1525,45 @@ var DielineTool = class {
     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,
-          offsetX: (h.offsetX || 0) * unitScale * scale,
-          offsetY: (h.offsetY || 0) * unitScale * scale
-        },
-        { x: cx, y: cy, width: visualWidth, height: visualHeight },
-        { width: canvasW, height: canvasH }
-      );
+    const absoluteFeatures = (features || []).map((f) => {
+      const featureScale = scale;
       return {
-        ...h,
-        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
+        ...f,
+        x: f.x,
+        y: f.y,
+        width: (f.width || 0) * featureScale,
+        height: (f.height || 0) * featureScale,
+        radius: (f.radius || 0) * featureScale
       };
     });
-    const pathData = generateDielinePath({
+    const originalFeatures = absoluteFeatures.filter(
+      (f) => !f.target || f.target === "original" || f.target === "both"
+    );
+    const generatedPathData = generateDielinePath({
       shape,
       width: visualWidth,
       height: visualHeight,
       radius: visualRadius,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData,
+      features: originalFeatures,
+      pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
     });
     const clonedLayer = await userLayer.clone();
-    const clipPath = new Path(pathData, {
+    const clipPath = new Path(generatedPathData, {
       originX: "left",
       originY: "top",
       left: 0,
       top: 0,
       absolutePositioned: true
-      // Important for groups
     });
     clonedLayer.clipPath = clipPath;
     const bounds = clipPath.getBoundingRect();
     const dataUrl = clonedLayer.toDataURL({
       format: "png",
       multiplier: 2,
-      // Better quality
       left: bounds.left,
       top: bounds.top,
       width: bounds.width,
@@ -1507,24 +1734,22 @@ var FilmTool = class {
   }
 };
 
-// src/hole.ts
+// src/feature.ts
 import {
   ContributionPointIds as ContributionPointIds4
 } from "@pooder/core";
 import { Circle, Group, Point, Rect as Rect2 } from "fabric";
-var HoleTool = class {
+var FeatureTool = class {
   constructor(options) {
-    this.id = "pooder.kit.hole";
+    this.id = "pooder.kit.feature";
     this.metadata = {
-      name: "HoleTool"
+      name: "FeatureTool"
     };
-    this.holes = [];
-    this.constraintTarget = "bleed";
+    this.features = [];
     this.isUpdatingConfig = false;
     this.handleMoving = null;
     this.handleModified = null;
     this.handleDielineChange = null;
-    // Cache geometry to enforce constraints during drag
     this.currentGeometry = null;
     if (options) {
       Object.assign(this, options);
@@ -1534,26 +1759,18 @@ var HoleTool = class {
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
-      console.warn("CanvasService not found for HoleTool");
+      console.warn("CanvasService not found for FeatureTool");
       return;
     }
     const configService = context.services.get(
       "ConfigurationService"
     );
     if (configService) {
-      this.constraintTarget = configService.get(
-        "hole.constraintTarget",
-        this.constraintTarget
-      );
-      this.holes = configService.get("dieline.holes", []);
+      this.features = configService.get("dieline.features", []);
       configService.onAnyChange((e) => {
         if (this.isUpdatingConfig) return;
-        if (e.key === "hole.constraintTarget") {
-          this.constraintTarget = e.value;
-          this.enforceConstraints();
-        }
-        if (e.key === "dieline.holes") {
-          this.holes = e.value || [];
+        if (e.key === "dieline.features") {
+          this.features = e.value || [];
           this.redraw();
         }
       });
@@ -1567,102 +1784,38 @@ var HoleTool = class {
   }
   contribute() {
     return {
-      [ContributionPointIds4.CONFIGURATIONS]: [
-        {
-          id: "hole.constraintTarget",
-          type: "select",
-          label: "Constraint Target",
-          options: ["original", "bleed"],
-          default: "bleed"
-        }
-      ],
       [ContributionPointIds4.COMMANDS]: [
         {
-          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) {
-              const g = this.currentGeometry;
-              const topCenter = { x: g.x, y: g.y - g.height / 2 };
-              defaultPos = getNearestPointOnDieline(topCenter, {
-                ...g,
-                holes: []
-              });
-            }
-            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;
+          command: "addFeature",
+          title: "Add Edge Feature",
+          handler: (type = "subtract") => {
+            return this.addFeature(type);
           }
         },
         {
           command: "addHole",
           title: "Add Hole",
-          handler: (x, y) => {
-            var _a, _b, _c, _d;
-            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 shape = (_d = lastHole == null ? void 0 : lastHole.shape) != null ? _d : "circle";
-              const newHole = {
-                x: normalizedX,
-                y: normalizedY,
-                shape,
-                innerRadius,
-                outerRadius
-              };
-              configService.update("dieline.holes", [...currentHoles, newHole]);
-            }
-            return true;
+          handler: () => {
+            return this.addFeature("subtract");
           }
         },
         {
-          command: "clearHoles",
-          title: "Clear Holes",
+          command: "addDoubleLayerHole",
+          title: "Add Double Layer Hole",
+          handler: () => {
+            return this.addDoubleLayerHole();
+          }
+        },
+        {
+          command: "clearFeatures",
+          title: "Clear Features",
           handler: () => {
             var _a;
             const configService = (_a = this.context) == null ? void 0 : _a.services.get(
               "ConfigurationService"
             );
             if (configService) {
-              configService.update("dieline.holes", []);
+              configService.update("dieline.features", []);
             }
             return true;
           }
@@ -1670,6 +1823,88 @@ var HoleTool = class {
       ]
     };
   }
+  addFeature(type) {
+    var _a;
+    if (!this.canvasService) return false;
+    const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+      "ConfigurationService"
+    );
+    const unit = (configService == null ? void 0 : configService.get("dieline.unit", "mm")) || "mm";
+    const defaultSize = Coordinate.convertUnit(10, "mm", unit);
+    const newFeature = {
+      id: Date.now().toString(),
+      operation: type,
+      target: "original",
+      shape: "rect",
+      x: 0.5,
+      y: 0,
+      // Top edge
+      width: defaultSize,
+      height: defaultSize,
+      rotation: 0
+    };
+    if (configService) {
+      const current = configService.get(
+        "dieline.features",
+        []
+      );
+      configService.update("dieline.features", [...current, newFeature]);
+    }
+    return true;
+  }
+  addDoubleLayerHole() {
+    var _a;
+    if (!this.canvasService) return false;
+    const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+      "ConfigurationService"
+    );
+    const unit = (configService == null ? void 0 : configService.get("dieline.unit", "mm")) || "mm";
+    const lugRadius = Coordinate.convertUnit(20, "mm", unit);
+    const holeRadius = Coordinate.convertUnit(15, "mm", unit);
+    const groupId = Date.now().toString();
+    const timestamp = Date.now();
+    const lug = {
+      id: `${timestamp}-lug`,
+      groupId,
+      operation: "add",
+      shape: "circle",
+      x: 0.5,
+      y: 0,
+      radius: lugRadius,
+      // 20mm
+      rotation: 0
+    };
+    const hole = {
+      id: `${timestamp}-hole`,
+      groupId,
+      operation: "subtract",
+      shape: "circle",
+      x: 0.5,
+      y: 0,
+      radius: holeRadius,
+      // 15mm
+      rotation: 0
+    };
+    if (configService) {
+      const current = configService.get(
+        "dieline.features",
+        []
+      );
+      configService.update("dieline.features", [...current, lug, hole]);
+    }
+    return true;
+  }
+  getGeometryForFeature(geometry, feature) {
+    if ((feature == null ? void 0 : feature.target) === "offset" && geometry.offset !== 0) {
+      return {
+        ...geometry,
+        width: geometry.width + geometry.offset * 2,
+        height: geometry.height + geometry.offset * 2,
+        radius: geometry.radius === 0 ? 0 : Math.max(0, geometry.radius + geometry.offset)
+      };
+    }
+    return geometry;
+  }
   setup() {
     if (!this.canvasService || !this.context) return;
     const canvas = this.canvasService.canvas;
@@ -1677,10 +1912,7 @@ var HoleTool = class {
       this.handleDielineChange = (geometry) => {
         this.currentGeometry = geometry;
         this.redraw();
-        const changed = this.enforceConstraints();
-        if (changed) {
-          this.syncHolesToDieline();
-        }
+        this.enforceConstraints();
       };
       this.context.eventBus.on(
         "dieline:geometry:change",
@@ -1690,69 +1922,101 @@ var HoleTool = class {
     const commandService = this.context.services.get("CommandService");
     if (commandService) {
       try {
-        const geometry = commandService.executeCommand("getGeometry");
-        if (geometry) {
-          Promise.resolve(geometry).then((g) => {
+        Promise.resolve(commandService.executeCommand("getGeometry")).then(
+          (g) => {
             if (g) {
               this.currentGeometry = g;
-              this.enforceConstraints();
-              this.initializeHoles();
+              this.redraw();
             }
-          });
-        }
+          }
+        );
       } catch (e) {
       }
     }
     if (!this.handleMoving) {
       this.handleMoving = (e) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const target = e.target;
-        if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "hole-marker") return;
+        if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "feature-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,
-          width: Math.max(0, this.currentGeometry.width + effectiveOffset * 2),
-          height: Math.max(
-            0,
-            this.currentGeometry.height + effectiveOffset * 2
-          ),
-          radius: Math.max(0, this.currentGeometry.radius + effectiveOffset)
-        };
-        const p = new Point(target.left, target.top);
-        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
+        let feature;
+        if ((_b = target.data) == null ? void 0 : _b.isGroup) {
+          const indices = (_c = target.data) == null ? void 0 : _c.indices;
+          if (indices && indices.length > 0) {
+            feature = this.features[indices[0]];
+          }
+        } else {
+          const index = (_d = target.data) == null ? void 0 : _d.index;
+          if (index !== void 0) {
+            feature = this.features[index];
+          }
+        }
+        const geometry = this.getGeometryForFeature(
+          this.currentGeometry,
+          feature
         );
+        const p = new Point(target.left, target.top);
+        const markerStrokeWidth = (target.strokeWidth || 2) * (target.scaleX || 1);
+        const minDim = Math.min(target.getScaledWidth(), target.getScaledHeight());
+        const limit = Math.max(0, minDim / 2 - markerStrokeWidth);
+        const snapped = this.constrainPosition(p, geometry, limit);
         target.set({
-          left: newPos.x,
-          top: newPos.y
+          left: snapped.x,
+          top: snapped.y
         });
       };
       canvas.on("object:moving", this.handleMoving);
     }
     if (!this.handleModified) {
       this.handleModified = (e) => {
-        var _a;
+        var _a, _b, _c, _d;
         const target = e.target;
-        if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "hole-marker") return;
-        const changed = this.enforceConstraints();
-        if (!changed) {
-          this.syncHolesFromCanvas();
+        if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "feature-marker") return;
+        if ((_b = target.data) == null ? void 0 : _b.isGroup) {
+          const groupObj = target;
+          const indices = (_c = groupObj.data) == null ? void 0 : _c.indices;
+          if (!indices) return;
+          const groupCenter = new Point(groupObj.left, groupObj.top);
+          const newFeatures = [...this.features];
+          const { x, y } = this.currentGeometry;
+          groupObj.getObjects().forEach((child, i) => {
+            const originalIndex = indices[i];
+            const feature = this.features[originalIndex];
+            const geometry = this.getGeometryForFeature(
+              this.currentGeometry,
+              feature
+            );
+            const { width, height } = geometry;
+            const layoutLeft = x - width / 2;
+            const layoutTop = y - height / 2;
+            const absX = groupCenter.x + (child.left || 0);
+            const absY = groupCenter.y + (child.top || 0);
+            const normalizedX = width > 0 ? (absX - layoutLeft) / width : 0.5;
+            const normalizedY = height > 0 ? (absY - layoutTop) / height : 0.5;
+            newFeatures[originalIndex] = {
+              ...newFeatures[originalIndex],
+              x: normalizedX,
+              y: normalizedY
+            };
+          });
+          this.features = newFeatures;
+          const configService = (_d = this.context) == null ? void 0 : _d.services.get(
+            "ConfigurationService"
+          );
+          if (configService) {
+            this.isUpdatingConfig = true;
+            try {
+              configService.update("dieline.features", this.features);
+            } finally {
+              this.isUpdatingConfig = false;
+            }
+          }
+        } else {
+          this.syncFeatureFromCanvas(target);
         }
       };
       canvas.on("object:modified", this.handleModified);
     }
-    this.initializeHoles();
-  }
-  initializeHoles() {
-    if (!this.canvasService) return;
-    this.redraw();
-    this.syncHolesToDieline();
   }
   teardown() {
     if (!this.canvasService) return;
@@ -1774,357 +2038,259 @@ var HoleTool = class {
     }
     const objects = canvas.getObjects().filter((obj) => {
       var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
+      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
     });
     objects.forEach((obj) => canvas.remove(obj));
-    if (this.context) {
-      const commandService = this.context.services.get("CommandService");
-      if (commandService) {
-        try {
-          commandService.executeCommand("setHoles", []);
-        } catch (e) {
-        }
-      }
-    }
     this.canvasService.requestRenderAll();
   }
-  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" || 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;
-        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;
-      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, 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,
-          // Ensure other properties are preserved
-          innerRadius: original.innerRadius,
-          outerRadius: original.outerRadius,
-          shape: original.shape || "circle"
-        };
-      }
-      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,
-        // 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"
-      };
+  constrainPosition(p, geometry, limit) {
+    const nearest = getNearestPointOnDieline({ x: p.x, y: p.y }, {
+      ...geometry,
+      features: []
     });
-    this.holes = newHoles;
-    this.syncHolesToDieline();
+    const dx = p.x - nearest.x;
+    const dy = p.y - nearest.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    if (dist <= limit) {
+      return { x: p.x, y: p.y };
+    }
+    const scale = limit / dist;
+    return {
+      x: nearest.x + dx * scale,
+      y: nearest.y + dy * scale
+    };
   }
-  syncHolesToDieline() {
-    if (!this.context || !this.canvasService) return;
+  syncFeatureFromCanvas(target) {
+    var _a;
+    if (!this.currentGeometry || !this.context) return;
+    const index = (_a = target.data) == null ? void 0 : _a.index;
+    if (index === void 0 || index < 0 || index >= this.features.length)
+      return;
+    const feature = this.features[index];
+    const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
+    const { width, height, x, y } = geometry;
+    const left = x - width / 2;
+    const top = y - height / 2;
+    const normalizedX = width > 0 ? (target.left - left) / width : 0.5;
+    const normalizedY = height > 0 ? (target.top - top) / height : 0.5;
+    const updatedFeature = {
+      ...feature,
+      x: normalizedX,
+      y: normalizedY
+      // Could also update rotation if we allowed rotating markers
+    };
+    const newFeatures = [...this.features];
+    newFeatures[index] = updatedFeature;
+    this.features = newFeatures;
     const configService = this.context.services.get(
       "ConfigurationService"
     );
     if (configService) {
       this.isUpdatingConfig = true;
       try {
-        configService.update("dieline.holes", this.holes);
+        configService.update("dieline.features", this.features);
       } finally {
         this.isUpdatingConfig = false;
       }
     }
   }
   redraw() {
-    if (!this.canvasService) return;
+    if (!this.canvasService || !this.currentGeometry) return;
     const canvas = this.canvasService.canvas;
-    const { width, height } = canvas;
+    const geometry = this.currentGeometry;
     const existing = canvas.getObjects().filter((obj) => {
       var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
+      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
     });
     existing.forEach((obj) => canvas.remove(obj));
-    const holes = this.holes;
-    if (!holes || holes.length === 0) {
+    if (!this.features || this.features.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
+    const scale = geometry.scale || 1;
+    const finalScale = scale;
+    const groups = {};
+    const singles = [];
+    this.features.forEach((f, i) => {
+      if (f.groupId) {
+        if (!groups[f.groupId]) groups[f.groupId] = [];
+        groups[f.groupId].push({ feature: f, index: i });
+      } else {
+        singles.push({ feature: f, index: i });
+      }
+    });
+    const createMarkerShape = (feature, pos) => {
+      const featureScale = scale;
+      const visualWidth = (feature.width || 10) * featureScale;
+      const visualHeight = (feature.height || 10) * featureScale;
+      const visualRadius = (feature.radius || 0) * featureScale;
+      const color = feature.color || (feature.operation === "add" ? "#00FF00" : "#FF0000");
+      const strokeDash = feature.strokeDash || (feature.operation === "subtract" ? [4, 4] : void 0);
+      let shape;
+      if (feature.shape === "rect") {
+        shape = new Rect2({
+          width: visualWidth,
+          height: visualHeight,
+          rx: visualRadius,
+          ry: visualRadius,
+          fill: "transparent",
+          stroke: color,
+          strokeWidth: 2,
+          strokeDashArray: strokeDash,
+          originX: "center",
+          originY: "center",
+          left: pos.x,
+          top: pos.y
+        });
+      } else {
+        shape = new Circle({
+          radius: visualRadius || 5 * finalScale,
+          fill: "transparent",
+          stroke: color,
+          strokeWidth: 2,
+          strokeDashArray: strokeDash,
+          originX: "center",
+          originY: "center",
+          left: pos.x,
+          top: pos.y
+        });
+      }
+      if (feature.rotation) {
+        shape.rotate(feature.rotation);
+      }
+      return shape;
     };
-    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
+    singles.forEach(({ feature, index }) => {
+      const geometry2 = this.getGeometryForFeature(
+        this.currentGeometry,
+        feature
       );
-      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 pos = resolveFeaturePosition(feature, geometry2);
+      const marker = createMarkerShape(feature, pos);
+      marker.set({
+        selectable: true,
+        hasControls: false,
+        hasBorders: false,
+        hoverCursor: "move",
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        data: { type: "feature-marker", index, isGroup: false }
       });
-      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,
-        strokeDashArray: [5, 5],
-        originX: "center",
-        originY: "center"
+      marker.set("opacity", 0);
+      marker.on("mouseover", () => {
+        marker.set("opacity", 1);
+        canvas.requestRenderAll();
       });
-      const holeGroup = new Group([outerMarker, innerMarker], {
-        left: pos.x,
-        top: pos.y,
-        originX: "center",
-        originY: "center",
+      marker.on("mouseout", () => {
+        if (canvas.getActiveObject() !== marker) {
+          marker.set("opacity", 0);
+          canvas.requestRenderAll();
+        }
+      });
+      marker.on("selected", () => {
+        marker.set("opacity", 1);
+        canvas.requestRenderAll();
+      });
+      marker.on("deselected", () => {
+        marker.set("opacity", 0);
+        canvas.requestRenderAll();
+      });
+      canvas.add(marker);
+      canvas.bringObjectToFront(marker);
+    });
+    Object.keys(groups).forEach((groupId) => {
+      const members = groups[groupId];
+      if (members.length === 0) return;
+      const shapes = members.map(({ feature }) => {
+        const geometry2 = this.getGeometryForFeature(
+          this.currentGeometry,
+          feature
+        );
+        const pos = resolveFeaturePosition(feature, geometry2);
+        return createMarkerShape(feature, pos);
+      });
+      const groupObj = new Group(shapes, {
         selectable: true,
         hasControls: false,
-        // Don't allow resizing/rotating
         hasBorders: false,
-        subTargetCheck: false,
-        opacity: 0,
-        // Default hidden
         hoverCursor: "move",
-        data: { type: "hole-marker", index }
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+        subTargetCheck: true,
+        // Allow events to pass through if needed, but we treat as one
+        interactive: false,
+        // Children not interactive
+        // @ts-ignore
+        data: {
+          type: "feature-marker",
+          isGroup: true,
+          groupId,
+          indices: members.map((m) => m.index)
+        }
       });
-      holeGroup.name = "hole-marker";
-      holeGroup.on("mouseover", () => {
-        holeGroup.set("opacity", 1);
+      groupObj.set("opacity", 0);
+      groupObj.on("mouseover", () => {
+        groupObj.set("opacity", 1);
         canvas.requestRenderAll();
       });
-      holeGroup.on("mouseout", () => {
-        if (canvas.getActiveObject() !== holeGroup) {
-          holeGroup.set("opacity", 0);
+      groupObj.on("mouseout", () => {
+        if (canvas.getActiveObject() !== groupObj) {
+          groupObj.set("opacity", 0);
           canvas.requestRenderAll();
         }
       });
-      holeGroup.on("selected", () => {
-        holeGroup.set("opacity", 1);
+      groupObj.on("selected", () => {
+        groupObj.set("opacity", 1);
         canvas.requestRenderAll();
       });
-      holeGroup.on("deselected", () => {
-        holeGroup.set("opacity", 0);
+      groupObj.on("deselected", () => {
+        groupObj.set("opacity", 0);
         canvas.requestRenderAll();
       });
-      canvas.add(holeGroup);
-      canvas.bringObjectToFront(holeGroup);
-    });
-    const markers = canvas.getObjects().filter((o) => {
-      var _a;
-      return ((_a = o.data) == null ? void 0 : _a.type) === "hole-marker";
+      canvas.add(groupObj);
+      canvas.bringObjectToFront(groupObj);
     });
-    markers.forEach((m) => canvas.bringObjectToFront(m));
     this.canvasService.requestRenderAll();
   }
   enforceConstraints() {
-    const geometry = this.currentGeometry;
-    if (!geometry || !this.canvasService) {
-      return false;
-    }
-    const effectiveOffset = this.constraintTarget === "original" ? 0 : geometry.offset;
-    const constraintGeometry = {
-      ...geometry,
-      width: Math.max(0, geometry.width + effectiveOffset * 2),
-      height: Math.max(0, geometry.height + effectiveOffset * 2),
-      radius: Math.max(0, geometry.radius + effectiveOffset)
-    };
-    const objects = this.canvasService.canvas.getObjects().filter((obj) => {
+    if (!this.canvasService || !this.currentGeometry) return;
+    const canvas = this.canvasService.canvas;
+    const markers = canvas.getObjects().filter((obj) => {
       var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
+      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
     });
-    let changed = false;
-    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);
+    markers.forEach((marker) => {
+      var _a, _b, _c;
+      let feature;
+      if ((_a = marker.data) == null ? void 0 : _a.isGroup) {
+        const indices = (_b = marker.data) == null ? void 0 : _b.indices;
+        if (indices && indices.length > 0) {
+          feature = this.features[indices[0]];
+        }
+      } else {
+        const index = (_c = marker.data) == null ? void 0 : _c.index;
+        if (index !== void 0) {
+          feature = this.features[index];
+        }
       }
-    );
-    const newHoles = [];
-    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,
-        innerR,
-        outerR
+      const geometry = this.getGeometryForFeature(
+        this.currentGeometry,
+        feature
       );
-      if (currentPos.distanceFrom(newPos) > 0.1) {
-        obj.set({
-          left: newPos.x,
-          top: newPos.y
-        });
-        obj.setCoords();
-        changed = true;
-      }
+      const markerStrokeWidth = (marker.strokeWidth || 2) * (marker.scaleX || 1);
+      const minDim = Math.min(marker.getScaledWidth(), marker.getScaledHeight());
+      const limit = Math.max(0, minDim / 2 - markerStrokeWidth);
+      const snapped = this.constrainPosition(
+        new Point(marker.left, marker.top),
+        geometry,
+        limit
+      );
+      marker.set({ left: snapped.x, top: snapped.y });
+      marker.setCoords();
     });
-    if (changed) {
-      this.syncHolesFromCanvas();
-      return true;
-    }
-    return false;
-  }
-  calculateConstrainedPosition(p, g, innerRadius, outerRadius) {
-    const options = {
-      ...g,
-      holes: []
-      // We don't need holes for boundary calculation
-    };
-    const nearest = getNearestPointOnDieline(
-      { x: p.x, y: p.y },
-      options
-    );
-    const nearestP = new Point(nearest.x, nearest.y);
-    const dist = p.distanceFrom(nearestP);
-    const v = p.subtract(nearestP);
-    const center = new Point(g.x, g.y);
-    const distToCenter = p.distanceFrom(center);
-    const nearestDistToCenter = nearestP.distanceFrom(center);
-    let signedDist = dist;
-    if (distToCenter < nearestDistToCenter) {
-      signedDist = -dist;
-    }
-    let clampedDist = signedDist;
-    if (signedDist > 0) {
-      clampedDist = Math.min(signedDist, innerRadius);
-    } else {
-      clampedDist = Math.max(signedDist, -outerRadius);
-    }
-    if (dist < 1e-3) return nearestP;
-    const scale = Math.abs(clampedDist) / (dist || 1);
-    const offset = v.scalarMultiply(scale);
-    return nearestP.add(offset);
+    canvas.requestRenderAll();
   }
 };
 
@@ -2141,6 +2307,7 @@ var ImageTool = class {
     };
     this.items = [];
     this.objectMap = /* @__PURE__ */ new Map();
+    this.loadResolvers = /* @__PURE__ */ new Map();
     this.isUpdatingConfig = false;
   }
   activate(context) {
@@ -2150,19 +2317,15 @@ var ImageTool = class {
       console.warn("CanvasService not found for ImageTool");
       return;
     }
-    const configService = context.services.get("ConfigurationService");
+    const configService = context.services.get(
+      "ConfigurationService"
+    );
     if (configService) {
       this.items = configService.get("image.items", []) || [];
       configService.onAnyChange((e) => {
         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();
         }
       });
@@ -2198,15 +2361,39 @@ var ImageTool = class {
         {
           command: "addImage",
           title: "Add Image",
-          handler: (url, options) => {
+          handler: async (url, options) => {
+            const id = this.generateId();
             const newItem = {
-              id: this.generateId(),
+              id,
               url,
               opacity: 1,
               ...options
             };
+            const promise = new Promise((resolve) => {
+              this.loadResolvers.set(id, () => resolve(id));
+            });
             this.updateConfig([...this.items, newItem]);
-            return newItem.id;
+            return promise;
+          }
+        },
+        {
+          command: "fitImageToArea",
+          title: "Fit Image to Area",
+          handler: (id, area) => {
+            var _a, _b;
+            const item = this.items.find((i) => i.id === id);
+            const obj = this.objectMap.get(id);
+            if (item && obj && obj.width && obj.height) {
+              const scale = Math.max(
+                area.width / obj.width,
+                area.height / obj.height
+              );
+              this.updateImageInConfig(id, {
+                scale,
+                left: (_a = area.left) != null ? _a : 0.5,
+                top: (_b = area.top) != null ? _b : 0.5
+              });
+            }
           }
         },
         {
@@ -2274,7 +2461,9 @@ var ImageTool = class {
     if (!this.context) return;
     this.isUpdatingConfig = true;
     this.items = newItems;
-    const configService = this.context.services.get("ConfigurationService");
+    const configService = this.context.services.get(
+      "ConfigurationService"
+    );
     if (configService) {
       configService.update("image.items", newItems);
     }
@@ -2320,53 +2509,12 @@ var ImageTool = class {
     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
+      layoutScale: 1,
+      layoutOffsetX: 0,
+      layoutOffsetY: 0,
+      visualWidth: canvasW,
+      visualHeight: canvasH
     };
   }
   updateImages() {
@@ -2389,8 +2537,8 @@ var ImageTool = class {
       if (!obj) {
         this.loadImage(item, layer, layout);
       } else {
-        this.updateObjectProperties(obj, item, layout);
         layer.remove(obj);
+        this.updateObjectProperties(obj, item, layout);
         layer.add(obj);
       }
     });
@@ -2398,10 +2546,17 @@ var ImageTool = class {
     this.canvasService.requestRenderAll();
   }
   updateObjectProperties(obj, item, layout) {
-    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = 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.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;
@@ -2410,13 +2565,12 @@ var ImageTool = class {
       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 (item.scale !== void 0) {
+      const targetScale = item.scale * layoutScale;
+      if (Math.abs(obj.scaleX - targetScale) > 1e-3) {
+        updates.scaleX = targetScale;
+        updates.scaleY = targetScale;
+      }
     }
     if (obj.originX !== "center") {
       updates.originX = "center";
@@ -2424,6 +2578,7 @@ var ImageTool = class {
     }
     if (Object.keys(updates).length > 0) {
       obj.set(updates);
+      obj.setCoords();
     }
   }
   loadImage(item, layer, layout) {
@@ -2443,18 +2598,10 @@ var ImageTool = class {
         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;
+      let { scale, left, top } = item;
+      if (scale === void 0) {
+        scale = 1;
+        item.scale = scale;
       }
       if (left === void 0 && top === void 0) {
         left = 0.5;
@@ -2465,13 +2612,18 @@ var ImageTool = class {
       this.updateObjectProperties(image, item, layout);
       layer.add(image);
       this.objectMap.set(item.id, image);
+      const resolver = this.loadResolvers.get(item.id);
+      if (resolver) {
+        resolver();
+        this.loadResolvers.delete(item.id);
+      }
       image.on("modified", (e) => {
         this.handleObjectModified(item.id, image);
       });
       layer.dirty = true;
       (_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 });
+      if (item.scale !== scale || item.left !== left || item.top !== top) {
+        this.updateImageInConfig(item.id, { scale, left, top }, true);
       }
     }).catch((err) => {
       console.error("Failed to load image", item.url, err);
@@ -2479,29 +2631,28 @@ var ImageTool = class {
   }
   handleObjectModified(id, image) {
     const layout = this.getLayoutInfo();
-    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = layout;
+    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);
+    updates.scale = image.scaleX / layoutScale;
+    this.updateImageInConfig(id, updates, true);
   }
-  updateImageInConfig(id, updates) {
+  updateImageInConfig(id, updates, skipCanvasUpdate = false) {
     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);
+      this.updateConfig(newItems, skipCanvasUpdate);
     }
   }
 };
@@ -3352,8 +3503,8 @@ export {
   BackgroundTool,
   CanvasService,
   DielineTool,
+  FeatureTool,
   FilmTool,
-  HoleTool,
   ImageTool,
   MirrorTool,
   RulerTool,