@pooder/kit 3.4.0 → 4.0.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, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const img = await this.loadImage(imageUrl);
     const width = img.width;
     const height = img.height;
@@ -232,23 +233,37 @@ var ImageTracer = class {
       Math.floor(Math.max(width, height) * 0.02)
     );
     const radius = (_b = options.morphologyRadius) != null ? _b : adaptiveRadius;
-    let mask = this.createMask(imageData, threshold);
+    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.dilate(mask, width, height, radius);
-      mask = this.erode(mask, width, height, radius);
-      mask = this.fillHoles(mask, width, height);
+      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, width, height);
+    const allContourPoints = this.traceAllContours(mask, paddedWidth, paddedHeight);
     if (allContourPoints.length === 0) {
-      const w = (_c = options.scaleToWidth) != null ? _c : width;
-      const h = (_d = options.scaleToHeight) != null ? _d : height;
+      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 primaryContour) {
+    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;
@@ -260,95 +275,119 @@ var ImageTracer = class {
       width: maxX - minX,
       height: maxY - minY
     };
-    let finalPoints = primaryContour;
+    let finalPoints = unpaddedPoints;
     if (options.scaleToWidth && options.scaleToHeight) {
       finalPoints = this.scalePoints(
-        primaryContour,
+        unpaddedPoints,
         options.scaleToWidth,
         options.scaleToHeight,
         globalBounds
       );
     }
-    const simplifiedPoints = this.douglasPeucker(
-      finalPoints,
-      (_e = options.simplifyTolerance) != null ? _e : 2
-    );
-    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) {
+  static createMask(imageData, threshold, padding, paddedWidth, paddedHeight) {
     const { width, height, data } = imageData;
-    const mask = new Uint8Array(width * height);
-    for (let i = 0; i < width * height; i++) {
-      const idx = i * 4;
-      const r = data[idx];
-      const g = data[idx + 1];
-      const b = data[idx + 2];
-      const a = data[idx + 3];
-      if (a > threshold && !(r > 240 && g > 240 && b > 240)) {
-        mask[i] = 1;
-      } else {
-        mask[i] = 0;
+    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;
       }
     }
-    return mask;
-  }
-  /**
-   * Fast 1D-separable Dilation
-   */
-  static dilate(mask, width, height, radius) {
-    const horizontal = new Uint8Array(width * height);
     for (let y = 0; y < height; y++) {
-      let count = 0;
-      for (let x = -radius; x < width; x++) {
-        if (x + radius < width && mask[y * width + x + radius]) count++;
-        if (x - radius - 1 >= 0 && mask[y * width + x - radius - 1]) count--;
-        if (x >= 0) horizontal[y * width + x] = count > 0 ? 1 : 0;
-      }
-    }
-    const vertical = new Uint8Array(width * height);
-    for (let x = 0; x < width; x++) {
-      let count = 0;
-      for (let y = -radius; y < height; y++) {
-        if (y + radius < height && horizontal[(y + radius) * width + x])
-          count++;
-        if (y - radius - 1 >= 0 && horizontal[(y - radius - 1) * width + x])
-          count--;
-        if (y >= 0) vertical[y * width + x] = count > 0 ? 1 : 0;
+      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 vertical;
+    return mask;
   }
   /**
-   * Fast 1D-separable Erosion
+   * Fast circular morphology using a distance-transform inspired separable approach.
+   * O(N * R) complexity, where R is the radius.
    */
-  static erode(mask, width, height, radius) {
-    const horizontal = new Uint8Array(width * height);
-    for (let y = 0; y < height; y++) {
-      let count = 0;
-      for (let x = -radius; x < width; x++) {
-        if (x + radius < width && mask[y * width + x + radius]) count++;
-        if (x - radius - 1 >= 0 && mask[y * width + x - radius - 1]) count--;
-        if (x >= 0) {
-          const winWidth = Math.min(x + radius, width - 1) - Math.max(x - radius, 0) + 1;
-          horizontal[y * width + x] = count === winWidth ? 1 : 0;
+  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 vertical = new Uint8Array(width * height);
-    for (let x = 0; x < width; x++) {
-      let count = 0;
-      for (let y = -radius; y < height; y++) {
-        if (y + radius < height && horizontal[(y + radius) * width + x])
-          count++;
-        if (y - radius - 1 >= 0 && horizontal[(y - radius - 1) * width + x])
-          count--;
-        if (y >= 0) {
-          const winHeight = Math.min(y + radius, height - 1) - Math.max(y - radius, 0) + 1;
-          vertical[y * width + x] = count === winHeight ? 1 : 0;
+      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;
     }
-    return vertical;
   }
   /**
    * Fills internal holes in the binary mask using flood fill from edges.
@@ -548,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
@@ -622,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) {
@@ -719,112 +724,131 @@ 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 getDielineShape(options) {
+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 getPerimeterShape(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 edgeFeatures = features.filter(
+      (f) => !f.placement || f.placement === "edge"
+    );
+    const adds = [];
+    const subtracts = [];
+    edgeFeatures.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;
+}
+function applySurfaceFeatures(shape, features, options) {
+  const internalFeatures = features.filter((f) => f.placement === "internal");
+  if (internalFeatures.length === 0) return shape;
+  let result = shape;
+  for (const f of internalFeatures) {
+    const pos = resolveFeaturePosition(f, options);
+    const center = new paper2.Point(pos.x, pos.y);
+    const item = createFeatureItem(f, center);
+    try {
+      if (f.operation === "add") {
+        const temp = result.unite(item);
+        result.remove();
+        item.remove();
+        result = temp;
+      } else {
+        const temp = result.subtract(item);
+        result.remove();
+        item.remove();
+        result = temp;
       }
+    } catch (e) {
+      console.error("Geometry: Failed to apply surface feature", e);
+      item.remove();
     }
   }
-  return mainShape;
+  return result;
 }
 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();
-  const mainShape = getDielineShape(options);
-  const pathData = mainShape.pathData;
-  mainShape.remove();
+  paper2.project.activeLayer.removeChildren();
+  const perimeter = getPerimeterShape(options);
+  const finalShape = applySurfaceFeatures(perimeter, options.features, options);
+  const pathData = finalShape.pathData;
+  finalShape.remove();
   return pathData;
 }
 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]
   });
-  const mainShape = getDielineShape(options);
+  const perimeter = getPerimeterShape(options);
+  const mainShape = applySurfaceFeatures(perimeter, options.features, options);
   const finalMask = maskRect.subtract(mainShape);
   maskRect.remove();
   mainShape.remove();
@@ -832,43 +856,15 @@ 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 pOriginal = getPerimeterShape(originalOptions);
+  const shapeOriginal = applySurfaceFeatures(pOriginal, originalOptions.features, originalOptions);
+  const pOffset = getPerimeterShape(offsetOptions);
+  const shapeOffset = applySurfaceFeatures(pOffset, offsetOptions.features, offsetOptions);
   let bleedZone;
   if (offset > 0) {
     bleedZone = shapeOffset.subtract(shapeOriginal);
@@ -883,16 +879,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();
@@ -911,20 +907,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) {
@@ -936,38 +953,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();
         }
       });
     }
@@ -980,6 +1052,7 @@ var DielineTool = class {
     this.context = void 0;
   }
   contribute() {
+    const s = this.state;
     return {
       [ContributionPointIds2.CONFIGURATIONS]: [
         {
@@ -987,14 +1060,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",
@@ -1002,7 +1075,7 @@ var DielineTool = class {
           label: "Width",
           min: 10,
           max: 2e3,
-          default: this.width
+          default: s.width
         },
         {
           id: "dieline.height",
@@ -1010,7 +1083,7 @@ var DielineTool = class {
           label: "Height",
           min: 10,
           max: 2e3,
-          default: this.height
+          default: s.height
         },
         {
           id: "dieline.radius",
@@ -1018,20 +1091,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",
@@ -1039,38 +1106,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]: [
@@ -1092,24 +1212,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;
@@ -1168,15 +1282,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;
   }
@@ -1189,14 +1303,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);
@@ -1213,37 +1327,18 @@ 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 cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
     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);
@@ -1256,8 +1351,8 @@ var DielineTool = class {
       radius: cutR,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData
+      features: cutFeatures,
+      pathData: this.state.pathData
     });
     const mask = new Path(maskPathData, {
       fill: outsideColor,
@@ -1278,8 +1373,9 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: absoluteHoles,
-        pathData: this.pathData,
+        features: cutFeatures,
+        // Use same features as mask for consistency
+        pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH
       });
@@ -1303,15 +1399,27 @@ var DielineTool = class {
           radius: visualRadius,
           x: cx,
           y: cy,
-          holes: absoluteHoles,
-          pathData: this.pathData,
+          features: cutFeatures,
+          pathData: this.state.pathData,
+          canvasWidth: canvasW,
+          canvasHeight: canvasH
+        },
+        {
+          shape,
+          width: cutW,
+          height: cutH,
+          radius: cutR,
+          x: cx,
+          y: cy,
+          features: cutFeatures,
+          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,
@@ -1332,18 +1440,16 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: absoluteHoles,
-        pathData: this.pathData,
+        features: cutFeatures,
+        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",
@@ -1358,16 +1464,16 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData,
+      features: absoluteFeatures,
+      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",
@@ -1399,7 +1505,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);
@@ -1422,16 +1528,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);
@@ -1446,55 +1553,43 @@ 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 cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
+    const generatedPathData = generateDielinePath({
       shape,
       width: visualWidth,
       height: visualHeight,
       radius: visualRadius,
       x: cx,
       y: cy,
-      holes: absoluteHoles,
-      pathData: this.pathData,
+      features: cutFeatures,
+      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,
@@ -1665,25 +1760,28 @@ 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.isToolActive = false;
     this.handleMoving = null;
     this.handleModified = null;
     this.handleDielineChange = null;
-    // Cache geometry to enforce constraints during drag
     this.currentGeometry = null;
+    this.onToolActivated = (event) => {
+      this.isToolActive = event.id === this.id;
+      this.updateVisibility();
+    };
     if (options) {
       Object.assign(this, options);
     }
@@ -1692,135 +1790,82 @@ 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();
         }
       });
     }
+    context.eventBus.on("tool:activated", this.onToolActivated);
     this.setup();
   }
   deactivate(context) {
+    context.eventBus.off("tool:activated", this.onToolActivated);
     this.teardown();
     this.canvasService = void 0;
     this.context = void 0;
   }
+  updateVisibility() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+    const markers = canvas.getObjects().filter((obj) => {
+      var _a;
+      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
+    });
+    markers.forEach((marker) => {
+      marker.set({
+        visible: this.isToolActive,
+        // Or just selectable: false if we want them visible but locked
+        selectable: this.isToolActive,
+        evented: this.isToolActive
+      });
+    });
+    canvas.requestRenderAll();
+  }
   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: "addDoubleLayerHole",
+          title: "Add Double Layer Hole",
+          handler: () => {
+            return this.addDoubleLayerHole();
           }
         },
         {
-          command: "clearHoles",
-          title: "Clear Holes",
+          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;
           }
@@ -1828,6 +1873,82 @@ 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,
+      placement: "edge",
+      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",
+      placement: "edge",
+      x: 0.5,
+      y: 0,
+      radius: lugRadius,
+      // 20mm
+      rotation: 0
+    };
+    const hole = {
+      id: `${timestamp}-hole`,
+      groupId,
+      operation: "subtract",
+      shape: "circle",
+      placement: "edge",
+      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) {
+    return geometry;
+  }
   setup() {
     if (!this.canvasService || !this.context) return;
     const canvas = this.canvasService.canvas;
@@ -1835,10 +1956,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",
@@ -1848,69 +1966,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, feature);
         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;
@@ -1932,357 +2082,274 @@ 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);
-      }
+  constrainPosition(p, geometry, limit, feature) {
+    if (feature && feature.placement === "internal") {
+      const minX = geometry.x - geometry.width / 2;
+      const maxX = geometry.x + geometry.width / 2;
+      const minY = geometry.y - geometry.height / 2;
+      const maxY = geometry.y + geometry.height / 2;
       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"
+        x: Math.max(minX, Math.min(maxX, p.x)),
+        y: Math.max(minY, Math.min(maxY, p.y))
       };
+    }
+    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({
+        visible: this.isToolActive,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
+        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",
-        selectable: true,
+      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, {
+        visible: this.isToolActive,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
         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,
+        feature
+      );
+      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();
   }
 };
 
@@ -2301,6 +2368,11 @@ var ImageTool = class {
     this.objectMap = /* @__PURE__ */ new Map();
     this.loadResolvers = /* @__PURE__ */ new Map();
     this.isUpdatingConfig = false;
+    this.isToolActive = false;
+    this.onToolActivated = (event) => {
+      this.isToolActive = event.id === this.id;
+      this.updateInteractivity();
+    };
   }
   activate(context) {
     this.context = context;
@@ -2309,6 +2381,7 @@ var ImageTool = class {
       console.warn("CanvasService not found for ImageTool");
       return;
     }
+    context.eventBus.on("tool:activated", this.onToolActivated);
     const configService = context.services.get(
       "ConfigurationService"
     );
@@ -2326,6 +2399,7 @@ var ImageTool = class {
     this.updateImages();
   }
   deactivate(context) {
+    context.eventBus.off("tool:activated", this.onToolActivated);
     if (this.canvasService) {
       const layer = this.canvasService.getLayer("user");
       if (layer) {
@@ -2339,6 +2413,18 @@ var ImageTool = class {
       this.context = void 0;
     }
   }
+  updateInteractivity() {
+    var _a;
+    this.objectMap.forEach((obj) => {
+      obj.set({
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
+        hasControls: this.isToolActive,
+        hasBorders: this.isToolActive
+      });
+    });
+    (_a = this.canvasService) == null ? void 0 : _a.requestRenderAll();
+  }
   contribute() {
     return {
       [ContributionPointIds5.CONFIGURATIONS]: [
@@ -2526,6 +2612,14 @@ var ImageTool = class {
     const layout = this.getLayoutInfo();
     this.items.forEach((item, index) => {
       let obj = this.objectMap.get(item.id);
+      if (obj && obj.getSrc) {
+        const currentSrc = obj.getSrc();
+        if (currentSrc !== item.url) {
+          layer.remove(obj);
+          this.objectMap.delete(item.id);
+          obj = void 0;
+        }
+      }
       if (!obj) {
         this.loadImage(item, layer, layout);
       } else {
@@ -2582,7 +2676,11 @@ var ImageTool = class {
         originY: "center",
         data: { id: item.id },
         uniformScaling: true,
-        lockScalingFlip: true
+        lockScalingFlip: true,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
+        hasControls: this.isToolActive,
+        hasBorders: this.isToolActive
       });
       image.setControlsVisibility({
         mt: false,
@@ -3439,6 +3537,24 @@ var CanvasService = class {
         ...options
       });
     }
+    if (options == null ? void 0 : options.eventBus) {
+      this.setEventBus(options.eventBus);
+    }
+  }
+  setEventBus(eventBus) {
+    this.eventBus = eventBus;
+    this.setupEvents();
+  }
+  setupEvents() {
+    if (!this.eventBus) return;
+    const bus = this.eventBus;
+    const forward = (name) => (e) => bus.emit(name, e);
+    this.canvas.on("selection:created", forward("selection:created"));
+    this.canvas.on("selection:updated", forward("selection:updated"));
+    this.canvas.on("selection:cleared", forward("selection:cleared"));
+    this.canvas.on("object:modified", forward("object:modified"));
+    this.canvas.on("object:added", forward("object:added"));
+    this.canvas.on("object:removed", forward("object:removed"));
   }
   dispose() {
     this.canvas.dispose();
@@ -3495,8 +3611,8 @@ export {
   BackgroundTool,
   CanvasService,
   DielineTool,
+  FeatureTool,
   FilmTool,
-  HoleTool,
   ImageTool,
   MirrorTool,
   RulerTool,