@pooder/kit 4.1.0 → 4.3.0

package/dist/index.mjs

@@ -677,6 +677,29 @@ var Coordinate = class {
   }
 };
 
+// src/units.ts
+function parseLengthToMm(input, defaultUnit) {
+  var _a, _b;
+  if (typeof input === "number") {
+    if (!Number.isFinite(input)) return 0;
+    return Coordinate.convertUnit(input, defaultUnit, "mm");
+  }
+  const raw = input.trim();
+  if (!raw) return 0;
+  const match = raw.match(/^([+-]?\d+(?:\.\d+)?)\s*(px|mm|cm|in)?$/i);
+  if (!match) return 0;
+  const value = Number(match[1]);
+  if (!Number.isFinite(value)) return 0;
+  const unit = (_b = (_a = match[2]) == null ? void 0 : _a.toLowerCase()) != null ? _b : defaultUnit;
+  return Coordinate.convertUnit(value, unit, "mm");
+}
+function formatMm(valueMm, displayUnit, fractionDigits = 2) {
+  if (!Number.isFinite(valueMm)) return "0";
+  const value = Coordinate.convertUnit(valueMm, "mm", displayUnit);
+  const rounded = Number(value.toFixed(fractionDigits));
+  return rounded.toString();
+}
+
 // src/geometry.ts
 import paper2 from "paper";
 function resolveFeaturePosition(feature, geometry) {
@@ -758,7 +781,7 @@ function getPerimeterShape(options) {
   const { features } = options;
   if (features && features.length > 0) {
     const edgeFeatures = features.filter(
-      (f) => !f.placement || f.placement === "edge"
+      (f) => !f.renderBehavior || f.renderBehavior === "edge"
     );
     const adds = [];
     const subtracts = [];
@@ -766,10 +789,78 @@ function getPerimeterShape(options) {
       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);
+      if (f.bridge && f.bridge.type === "vertical") {
+        const itemBounds = item.bounds;
+        const mainBounds = mainShape.bounds;
+        const bridgeTop = mainBounds.top;
+        const bridgeBottom = itemBounds.top;
+        if (bridgeBottom > bridgeTop) {
+          const startY = bridgeBottom + 1;
+          const bridgeRect = new paper2.Path.Rectangle({
+            from: [itemBounds.left, bridgeTop],
+            to: [itemBounds.right, startY],
+            insert: false
+          });
+          const gaps = bridgeRect.subtract(mainShape);
+          bridgeRect.remove();
+          let bridgePart = null;
+          const isBottomPart = (part) => {
+            return Math.abs(part.bounds.bottom - startY) < 2;
+          };
+          if (gaps instanceof paper2.CompoundPath) {
+            const children = gaps.children;
+            let maxBottom = -Infinity;
+            let bestChild = null;
+            for (const child of children) {
+              if (child.bounds.bottom > maxBottom) {
+                maxBottom = child.bounds.bottom;
+                bestChild = child;
+              }
+            }
+            if (bestChild && isBottomPart(bestChild)) {
+              bridgePart = bestChild.clone();
+            }
+          } else if (gaps instanceof paper2.Path) {
+            if (isBottomPart(gaps)) {
+              bridgePart = gaps.clone();
+            }
+          }
+          gaps.remove();
+          if (bridgePart) {
+            const bounds = bridgePart.bounds;
+            if (bounds.height > 0) {
+              const overlap = 1;
+              const scaleY = (bounds.height + overlap) / bounds.height;
+              bridgePart.scale(1, scaleY, new paper2.Point(bounds.center.x, bounds.bottom));
+            }
+            const unitedItem = item.unite(bridgePart);
+            item.remove();
+            bridgePart.remove();
+            if (f.operation === "add") {
+              adds.push(unitedItem);
+            } else {
+              subtracts.push(unitedItem);
+            }
+          } else {
+            if (f.operation === "add") {
+              adds.push(item);
+            } else {
+              subtracts.push(item);
+            }
+          }
+        } else {
+          if (f.operation === "add") {
+            adds.push(item);
+          } else {
+            subtracts.push(item);
+          }
+        }
       } else {
-        subtracts.push(item);
+        if (f.operation === "add") {
+          adds.push(item);
+        } else {
+          subtracts.push(item);
+        }
       }
     });
     if (adds.length > 0) {
@@ -802,10 +893,12 @@ function getPerimeterShape(options) {
   return mainShape;
 }
 function applySurfaceFeatures(shape, features, options) {
-  const internalFeatures = features.filter((f) => f.placement === "internal");
-  if (internalFeatures.length === 0) return shape;
+  const surfaceFeatures = features.filter(
+    (f) => f.renderBehavior === "surface"
+  );
+  if (surfaceFeatures.length === 0) return shape;
   let result = shape;
-  for (const f of internalFeatures) {
+  for (const f of surfaceFeatures) {
     const pos = resolveFeaturePosition(f, options);
     const center = new paper2.Point(pos.x, pos.y);
     const item = createFeatureItem(f, center);
@@ -862,9 +955,17 @@ function generateBleedZonePath(originalOptions, offsetOptions, offset) {
   ensurePaper(paperWidth, paperHeight);
   paper2.project.activeLayer.removeChildren();
   const pOriginal = getPerimeterShape(originalOptions);
-  const shapeOriginal = applySurfaceFeatures(pOriginal, originalOptions.features, originalOptions);
+  const shapeOriginal = applySurfaceFeatures(
+    pOriginal,
+    originalOptions.features,
+    originalOptions
+  );
   const pOffset = getPerimeterShape(offsetOptions);
-  const shapeOffset = applySurfaceFeatures(pOffset, offsetOptions.features, offsetOptions);
+  const shapeOffset = applySurfaceFeatures(
+    pOffset,
+    offsetOptions.features,
+    offsetOptions
+  );
   let bleedZone;
   if (offset > 0) {
     bleedZone = shapeOffset.subtract(shapeOriginal);
@@ -877,13 +978,29 @@ function generateBleedZonePath(originalOptions, offsetOptions, offset) {
   bleedZone.remove();
   return pathData;
 }
+function getLowestPointOnDieline(options) {
+  ensurePaper(options.width * 2, options.height * 2);
+  paper2.project.activeLayer.removeChildren();
+  const shape = createBaseShape(options);
+  const bounds = shape.bounds;
+  const result = {
+    x: bounds.center.x,
+    y: bounds.bottom
+  };
+  shape.remove();
+  return result;
+}
 function getNearestPointOnDieline(point, options) {
   ensurePaper(options.width * 2, options.height * 2);
   paper2.project.activeLayer.removeChildren();
   const shape = createBaseShape(options);
   const p = new paper2.Point(point.x, point.y);
-  const nearest = shape.getNearestPoint(p);
-  const result = { x: nearest.x, y: nearest.y };
+  const location = shape.getNearestLocation(p);
+  const result = {
+    x: location.point.x,
+    y: location.point.y,
+    normal: location.normal ? { x: location.normal.x, y: location.normal.y } : void 0
+  };
   shape.remove();
   return result;
 }
@@ -900,105 +1017,6 @@ function getPathBounds(pathData) {
   };
 }
 
-// src/constraints.ts
-var ConstraintRegistry = class {
-  static register(type, handler) {
-    this.handlers.set(type, handler);
-  }
-  static apply(x, y, feature, context) {
-    if (!feature.constraints || !feature.constraints.type) {
-      return { x, y };
-    }
-    const handler = this.handlers.get(feature.constraints.type);
-    if (handler) {
-      return handler(x, y, feature, context);
-    }
-    return { x, y };
-  }
-};
-ConstraintRegistry.handlers = /* @__PURE__ */ new Map();
-var edgeConstraint = (x, y, feature, context) => {
-  var _a;
-  const { dielineWidth, dielineHeight } = context;
-  const params = ((_a = feature.constraints) == null ? void 0 : _a.params) || {};
-  const allowedEdges = params.allowedEdges || [
-    "top",
-    "bottom",
-    "left",
-    "right"
-  ];
-  const confine = params.confine || false;
-  const offset = params.offset || 0;
-  const distances = [];
-  if (allowedEdges.includes("top"))
-    distances.push({ edge: "top", dist: y * dielineHeight });
-  if (allowedEdges.includes("bottom"))
-    distances.push({ edge: "bottom", dist: (1 - y) * dielineHeight });
-  if (allowedEdges.includes("left"))
-    distances.push({ edge: "left", dist: x * dielineWidth });
-  if (allowedEdges.includes("right"))
-    distances.push({ edge: "right", dist: (1 - x) * dielineWidth });
-  if (distances.length === 0) return { x, y };
-  distances.sort((a, b) => a.dist - b.dist);
-  const nearest = distances[0].edge;
-  let newX = x;
-  let newY = y;
-  const fw = feature.width || 0;
-  const fh = feature.height || 0;
-  switch (nearest) {
-    case "top":
-      newY = 0 + offset / dielineHeight;
-      if (confine) {
-        const minX = fw / 2 / dielineWidth;
-        const maxX = 1 - minX;
-        newX = Math.max(minX, Math.min(newX, maxX));
-      }
-      break;
-    case "bottom":
-      newY = 1 - offset / dielineHeight;
-      if (confine) {
-        const minX = fw / 2 / dielineWidth;
-        const maxX = 1 - minX;
-        newX = Math.max(minX, Math.min(newX, maxX));
-      }
-      break;
-    case "left":
-      newX = 0 + offset / dielineWidth;
-      if (confine) {
-        const minY = fh / 2 / dielineHeight;
-        const maxY = 1 - minY;
-        newY = Math.max(minY, Math.min(newY, maxY));
-      }
-      break;
-    case "right":
-      newX = 1 - offset / dielineWidth;
-      if (confine) {
-        const minY = fh / 2 / dielineHeight;
-        const maxY = 1 - minY;
-        newY = Math.max(minY, Math.min(newY, maxY));
-      }
-      break;
-  }
-  return { x: newX, y: newY };
-};
-var internalConstraint = (x, y, feature, context) => {
-  var _a;
-  const { dielineWidth, dielineHeight } = context;
-  const params = ((_a = feature.constraints) == null ? void 0 : _a.params) || {};
-  const margin = params.margin || 0;
-  const fw = feature.width || 0;
-  const fh = feature.height || 0;
-  const minX = (margin + fw / 2) / dielineWidth;
-  const maxX = 1 - (margin + fw / 2) / dielineWidth;
-  const minY = (margin + fh / 2) / dielineHeight;
-  const maxY = 1 - (margin + fh / 2) / dielineHeight;
-  const clampedX = minX > maxX ? 0.5 : Math.max(minX, Math.min(x, maxX));
-  const clampedY = minY > maxY ? 0.5 : Math.max(minY, Math.min(y, maxY));
-  return { x: clampedX, y: clampedY };
-};
-ConstraintRegistry.register("edge", edgeConstraint);
-ConstraintRegistry.register("internal", internalConstraint);
-
 // src/dieline.ts
 var DielineTool = class {
   constructor(options) {
@@ -1007,7 +1025,7 @@ var DielineTool = class {
       name: "DielineTool"
     };
     this.state = {
-      unit: "mm",
+      displayUnit: "mm",
       shape: "rect",
       width: 500,
       height: 500,
@@ -1053,50 +1071,88 @@ var DielineTool = class {
     const configService = context.services.get("ConfigurationService");
     if (configService) {
       const s = this.state;
-      s.unit = configService.get("dieline.unit", s.unit);
+      s.displayUnit = configService.get("dieline.displayUnit", s.displayUnit);
       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.width = parseLengthToMm(
+        configService.get("dieline.width", s.width),
+        "mm"
+      );
+      s.height = parseLengthToMm(
+        configService.get("dieline.height", s.height),
+        "mm"
+      );
+      s.radius = parseLengthToMm(
+        configService.get("dieline.radius", s.radius),
+        "mm"
+      );
       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.offset = parseLengthToMm(
+        configService.get("dieline.offset", s.offset),
+        "mm"
+      );
+      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.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.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.")) {
-          console.log(`[DielineTool] Config change detected: ${e.key} -> ${e.value}`);
           switch (e.key) {
-            case "dieline.unit":
-              s.unit = e.value;
+            case "dieline.displayUnit":
+              s.displayUnit = e.value;
               break;
             case "dieline.shape":
               s.shape = e.value;
               break;
             case "dieline.width":
-              s.width = e.value;
+              s.width = parseLengthToMm(e.value, "mm");
               break;
             case "dieline.height":
-              s.height = e.value;
+              s.height = parseLengthToMm(e.value, "mm");
               break;
             case "dieline.radius":
-              s.radius = e.value;
+              s.radius = parseLengthToMm(e.value, "mm");
               break;
             case "dieline.padding":
               s.padding = e.value;
               break;
             case "dieline.offset":
-              s.offset = e.value;
+              s.offset = parseLengthToMm(e.value, "mm");
               break;
             case "dieline.strokeWidth":
               s.mainLine.width = e.value;
@@ -1155,11 +1211,11 @@ var DielineTool = class {
     return {
       [ContributionPointIds2.CONFIGURATIONS]: [
         {
-          id: "dieline.unit",
+          id: "dieline.displayUnit",
           type: "select",
-          label: "Unit",
-          options: ["px", "mm", "cm", "in"],
-          default: s.unit
+          label: "Display Unit",
+          options: ["mm", "cm", "in"],
+          default: s.displayUnit
         },
         {
           id: "dieline.shape",
@@ -1171,7 +1227,7 @@ var DielineTool = class {
         {
           id: "dieline.width",
           type: "number",
-          label: "Width",
+          label: "Width (mm)",
           min: 10,
           max: 2e3,
           default: s.width
@@ -1179,7 +1235,7 @@ var DielineTool = class {
         {
           id: "dieline.height",
           type: "number",
-          label: "Height",
+          label: "Height (mm)",
           min: 10,
           max: 2e3,
           default: s.height
@@ -1187,7 +1243,7 @@ var DielineTool = class {
         {
           id: "dieline.radius",
           type: "number",
-          label: "Corner Radius",
+          label: "Corner Radius (mm)",
           min: 0,
           max: 500,
           default: s.radius
@@ -1202,7 +1258,7 @@ var DielineTool = class {
         {
           id: "dieline.offset",
           type: "number",
-          label: "Bleed Offset",
+          label: "Bleed Offset (mm)",
           min: -100,
           max: 100,
           default: s.offset
@@ -1303,18 +1359,12 @@ var DielineTool = class {
             );
             if (!configService) return;
             const features = configService.get("dieline.features") || [];
-            const dielineWidth = configService.get("dieline.width") || 500;
-            const dielineHeight = configService.get("dieline.height") || 500;
             let changed = false;
             const newFeatures = features.map((f) => {
               if (f.groupId === groupId) {
-                const constrained = ConstraintRegistry.apply(x, y, f, {
-                  dielineWidth,
-                  dielineHeight
-                });
-                if (f.x !== constrained.x || f.y !== constrained.y) {
+                if (f.x !== x || f.y !== y) {
                   changed = true;
-                  return { ...f, x: constrained.x, y: constrained.y };
+                  return { ...f, x, y };
                 }
               }
               return f;
@@ -1429,7 +1479,7 @@ var DielineTool = class {
     const layer = this.getLayer();
     if (!layer) return;
     const {
-      unit,
+      displayUnit,
       shape,
       radius,
       offset,
@@ -1440,15 +1490,13 @@ var DielineTool = class {
       showBleedLines,
       features
     } = this.state;
-    let { width, height } = this.state;
+    const { width, height } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
     const paddingPx = this.resolvePadding(canvasW, canvasH);
-    const layout = Coordinate.calculateLayout(
-      { width: canvasW, height: canvasH },
-      { width, height },
-      paddingPx
-    );
+    this.canvasService.viewport.setPadding(paddingPx);
+    this.canvasService.viewport.updatePhysical(width, height);
+    const layout = this.canvasService.viewport.layout;
     const scale = layout.scale;
     const cx = layout.offsetX + layout.width / 2;
     const cy = layout.offsetY + layout.height / 2;
@@ -1635,15 +1683,22 @@ var DielineTool = class {
   }
   getGeometry() {
     if (!this.canvasService) return null;
-    const { unit, shape, width, height, radius, offset, mainLine, pathData } = this.state;
+    const {
+      displayUnit,
+      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);
-    const layout = Coordinate.calculateLayout(
-      { width: canvasW, height: canvasH },
-      { width, height },
-      paddingPx
-    );
+    this.canvasService.viewport.setPadding(paddingPx);
+    this.canvasService.viewport.updatePhysical(width, height);
+    const layout = this.canvasService.viewport.layout;
     const scale = layout.scale;
     const cx = layout.offsetX + layout.width / 2;
     const cy = layout.offsetY + layout.height / 2;
@@ -1651,14 +1706,14 @@ var DielineTool = class {
     const visualHeight = layout.height;
     return {
       shape,
-      unit,
+      unit: "mm",
+      displayUnit,
       x: cx,
       y: cy,
       width: visualWidth,
       height: visualHeight,
       radius: radius * scale,
       offset: offset * scale,
-      // Pass scale to help other tools (like FeatureTool) convert units
       scale,
       strokeWidth: mainLine.width,
       pathData
@@ -1668,15 +1723,13 @@ var DielineTool = class {
     if (!this.canvasService) return null;
     const userLayer = this.canvasService.getLayer("user");
     if (!userLayer) return null;
-    const { shape, width, height, radius, features, unit, pathData } = this.state;
+    const { shape, width, height, radius, features, pathData } = this.state;
     const canvasW = this.canvasService.canvas.width || 800;
     const canvasH = this.canvasService.canvas.height || 600;
     const paddingPx = this.resolvePadding(canvasW, canvasH);
-    const layout = Coordinate.calculateLayout(
-      { width: canvasW, height: canvasH },
-      { width, height },
-      paddingPx
-    );
+    this.canvasService.viewport.setPadding(paddingPx);
+    this.canvasService.viewport.updatePhysical(width, height);
+    const layout = this.canvasService.viewport.layout;
     const scale = layout.scale;
     const cx = layout.offsetX + layout.width / 2;
     const cy = layout.offsetY + layout.height / 2;
@@ -1895,13 +1948,212 @@ import {
   ContributionPointIds as ContributionPointIds4
 } from "@pooder/core";
 import { Circle, Group, Point, Rect as Rect2 } from "fabric";
+
+// src/constraints.ts
+var ConstraintRegistry = class {
+  static register(type, handler) {
+    this.handlers.set(type, handler);
+  }
+  static apply(x, y, feature, context, constraints) {
+    const list = constraints || feature.constraints;
+    if (!list || list.length === 0) {
+      return { x, y };
+    }
+    let currentX = x;
+    let currentY = y;
+    for (const constraint of list) {
+      const handler = this.handlers.get(constraint.type);
+      if (handler) {
+        const result = handler(currentX, currentY, feature, context, constraint.params || {});
+        currentX = result.x;
+        currentY = result.y;
+      }
+    }
+    return { x: currentX, y: currentY };
+  }
+};
+ConstraintRegistry.handlers = /* @__PURE__ */ new Map();
+var pathConstraint = (x, y, feature, context, params) => {
+  const { dielineWidth, dielineHeight, geometry } = context;
+  if (!geometry) return { x, y };
+  const minX = geometry.x - geometry.width / 2;
+  const minY = geometry.y - geometry.height / 2;
+  const absX = minX + x * geometry.width;
+  const absY = minY + y * geometry.height;
+  const nearest = getNearestPointOnDieline(
+    { x: absX, y: absY },
+    geometry
+  );
+  let finalX = nearest.x;
+  let finalY = nearest.y;
+  const hasOffsetParams = params.minOffset !== void 0 || params.maxOffset !== void 0;
+  if (hasOffsetParams && nearest.normal) {
+    const dx = absX - nearest.x;
+    const dy = absY - nearest.y;
+    const nx2 = nearest.normal.x;
+    const ny2 = nearest.normal.y;
+    const dist = dx * nx2 + dy * ny2;
+    const scale = dielineWidth > 0 ? geometry.width / dielineWidth : 1;
+    const rawMin = params.minOffset !== void 0 ? params.minOffset : 0;
+    const rawMax = params.maxOffset !== void 0 ? params.maxOffset : 0;
+    const minOffset = rawMin * scale;
+    const maxOffset = rawMax * scale;
+    const clampedDist = Math.max(minOffset, Math.min(dist, maxOffset));
+    finalX = nearest.x + nx2 * clampedDist;
+    finalY = nearest.y + ny2 * clampedDist;
+  }
+  const nx = geometry.width > 0 ? (finalX - minX) / geometry.width : 0.5;
+  const ny = geometry.height > 0 ? (finalY - minY) / geometry.height : 0.5;
+  return { x: nx, y: ny };
+};
+var edgeConstraint = (x, y, feature, context, params) => {
+  const { dielineWidth, dielineHeight } = context;
+  const allowedEdges = params.allowedEdges || [
+    "top",
+    "bottom",
+    "left",
+    "right"
+  ];
+  const confine = params.confine || false;
+  const offset = params.offset || 0;
+  const distances = [];
+  if (allowedEdges.includes("top"))
+    distances.push({ edge: "top", dist: y * dielineHeight });
+  if (allowedEdges.includes("bottom"))
+    distances.push({ edge: "bottom", dist: (1 - y) * dielineHeight });
+  if (allowedEdges.includes("left"))
+    distances.push({ edge: "left", dist: x * dielineWidth });
+  if (allowedEdges.includes("right"))
+    distances.push({ edge: "right", dist: (1 - x) * dielineWidth });
+  if (distances.length === 0) return { x, y };
+  distances.sort((a, b) => a.dist - b.dist);
+  const nearest = distances[0].edge;
+  let newX = x;
+  let newY = y;
+  const fw = feature.width || 0;
+  const fh = feature.height || 0;
+  switch (nearest) {
+    case "top":
+      newY = 0 + offset / dielineHeight;
+      if (confine) {
+        const minX = fw / 2 / dielineWidth;
+        const maxX = 1 - minX;
+        newX = Math.max(minX, Math.min(newX, maxX));
+      }
+      break;
+    case "bottom":
+      newY = 1 - offset / dielineHeight;
+      if (confine) {
+        const minX = fw / 2 / dielineWidth;
+        const maxX = 1 - minX;
+        newX = Math.max(minX, Math.min(newX, maxX));
+      }
+      break;
+    case "left":
+      newX = 0 + offset / dielineWidth;
+      if (confine) {
+        const minY = fh / 2 / dielineHeight;
+        const maxY = 1 - minY;
+        newY = Math.max(minY, Math.min(newY, maxY));
+      }
+      break;
+    case "right":
+      newX = 1 - offset / dielineWidth;
+      if (confine) {
+        const minY = fh / 2 / dielineHeight;
+        const maxY = 1 - minY;
+        newY = Math.max(minY, Math.min(newY, maxY));
+      }
+      break;
+  }
+  return { x: newX, y: newY };
+};
+var internalConstraint = (x, y, feature, context, params) => {
+  const { dielineWidth, dielineHeight } = context;
+  const margin = params.margin || 0;
+  const fw = feature.width || 0;
+  const fh = feature.height || 0;
+  const minX = (margin + fw / 2) / dielineWidth;
+  const maxX = 1 - (margin + fw / 2) / dielineWidth;
+  const minY = (margin + fh / 2) / dielineHeight;
+  const maxY = 1 - (margin + fh / 2) / dielineHeight;
+  const clampedX = minX > maxX ? 0.5 : Math.max(minX, Math.min(x, maxX));
+  const clampedY = minY > maxY ? 0.5 : Math.max(minY, Math.min(y, maxY));
+  return { x: clampedX, y: clampedY };
+};
+var tangentBottomConstraint = (x, y, feature, context, params) => {
+  const { dielineWidth, dielineHeight } = context;
+  const gap = params.gap || 0;
+  const confineX = params.confineX !== false;
+  const extentY = feature.shape === "circle" ? feature.radius || 0 : (feature.height || 0) / 2;
+  const newY = 1 + (extentY + gap) / dielineHeight;
+  let newX = x;
+  if (confineX) {
+    const extentX = feature.shape === "circle" ? feature.radius || 0 : (feature.width || 0) / 2;
+    const minX = extentX / dielineWidth;
+    const maxX = 1 - extentX / dielineWidth;
+    newX = minX > maxX ? 0.5 : Math.max(minX, Math.min(newX, maxX));
+  }
+  return { x: newX, y: newY };
+};
+var lowestTangentConstraint = (x, y, feature, context, params) => {
+  const { dielineWidth, dielineHeight, geometry } = context;
+  if (!geometry) return { x, y };
+  const lowest = getLowestPointOnDieline(geometry);
+  const minY = geometry.y - geometry.height / 2;
+  const normY = (lowest.y - minY) / geometry.height;
+  const gap = params.gap || 0;
+  const confineX = params.confineX !== false;
+  const extentY = feature.shape === "circle" ? feature.radius || 0 : (feature.height || 0) / 2;
+  const newY = normY + (extentY + gap) / dielineHeight;
+  let newX = x;
+  if (confineX) {
+    const extentX = feature.shape === "circle" ? feature.radius || 0 : (feature.width || 0) / 2;
+    const minX = extentX / dielineWidth;
+    const maxX = 1 - extentX / dielineWidth;
+    newX = minX > maxX ? 0.5 : Math.max(minX, Math.min(newX, maxX));
+  }
+  return { x: newX, y: newY };
+};
+ConstraintRegistry.register("path", pathConstraint);
+ConstraintRegistry.register("edge", edgeConstraint);
+ConstraintRegistry.register("internal", internalConstraint);
+ConstraintRegistry.register("tangent-bottom", tangentBottomConstraint);
+ConstraintRegistry.register("lowest-tangent", lowestTangentConstraint);
+
+// src/featureComplete.ts
+function validateFeaturesStrict(features, context) {
+  const eps = 1e-6;
+  const issues = [];
+  for (const f of features) {
+    if (!f.constraints || f.constraints.length === 0) continue;
+    const constrained = ConstraintRegistry.apply(f.x, f.y, f, context, f.constraints);
+    if (Math.abs(constrained.x - f.x) > eps || Math.abs(constrained.y - f.y) > eps) {
+      issues.push({
+        featureId: f.id,
+        groupId: f.groupId,
+        reason: "Position violates constraint strategy"
+      });
+    }
+  }
+  return { ok: issues.length === 0, issues: issues.length ? issues : void 0 };
+}
+function completeFeaturesStrict(features, context, update) {
+  const validation = validateFeaturesStrict(features, context);
+  if (!validation.ok) return validation;
+  const next = JSON.parse(JSON.stringify(features || []));
+  update(next);
+  return { ok: true };
+}
+
+// src/feature.ts
 var FeatureTool = class {
   constructor(options) {
     this.id = "pooder.kit.feature";
     this.metadata = {
       name: "FeatureTool"
     };
-    this.features = [];
+    this.workingFeatures = [];
     this.isUpdatingConfig = false;
     this.isToolActive = false;
     this.handleMoving = null;
@@ -1927,12 +2179,15 @@ var FeatureTool = class {
       "ConfigurationService"
     );
     if (configService) {
-      this.features = configService.get("dieline.features", []);
+      const features = configService.get("dieline.features", []) || [];
+      this.workingFeatures = this.cloneFeatures(features);
       configService.onAnyChange((e) => {
         if (this.isUpdatingConfig) return;
         if (e.key === "dieline.features") {
-          this.features = e.value || [];
+          const next = e.value || [];
+          this.workingFeatures = this.cloneFeatures(next);
           this.redraw();
+          this.emitWorkingChange();
         }
       });
     }
@@ -1990,57 +2245,172 @@ var FeatureTool = class {
           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.features", []);
-            }
+            this.setWorkingFeatures([]);
+            this.redraw();
+            this.emitWorkingChange();
             return true;
           }
+        },
+        {
+          command: "getWorkingFeatures",
+          title: "Get Working Features",
+          handler: () => {
+            return this.cloneFeatures(this.workingFeatures);
+          }
+        },
+        {
+          command: "setWorkingFeatures",
+          title: "Set Working Features",
+          handler: async (features) => {
+            await this.refreshGeometry();
+            this.setWorkingFeatures(this.cloneFeatures(features || []));
+            this.redraw();
+            this.emitWorkingChange();
+            return { ok: true };
+          }
+        },
+        {
+          command: "updateWorkingGroupPosition",
+          title: "Update Working Group Position",
+          handler: (groupId, x, y) => {
+            return this.updateWorkingGroupPosition(groupId, x, y);
+          }
+        },
+        {
+          command: "completeFeatures",
+          title: "Complete Features",
+          handler: () => {
+            return this.completeFeatures();
+          }
         }
       ]
     };
   }
-  addFeature(type) {
+  cloneFeatures(features) {
+    return JSON.parse(JSON.stringify(features || []));
+  }
+  emitWorkingChange() {
     var _a;
-    if (!this.canvasService) return false;
-    const configService = (_a = this.context) == null ? void 0 : _a.services.get(
-      "ConfigurationService"
+    (_a = this.context) == null ? void 0 : _a.eventBus.emit("feature:working:change", {
+      features: this.cloneFeatures(this.workingFeatures)
+    });
+  }
+  async refreshGeometry() {
+    if (!this.context) return;
+    const commandService = this.context.services.get("CommandService");
+    if (!commandService) return;
+    try {
+      const g = await Promise.resolve(commandService.executeCommand("getGeometry"));
+      if (g) this.currentGeometry = g;
+    } catch (e) {
+    }
+  }
+  setWorkingFeatures(next) {
+    this.workingFeatures = next;
+  }
+  updateWorkingGroupPosition(groupId, x, y) {
+    var _a, _b, _c;
+    if (!groupId) return { ok: false };
+    const configService = (_a = this.context) == null ? void 0 : _a.services.get("ConfigurationService");
+    if (!configService) return { ok: false };
+    const dielineWidth = parseLengthToMm(
+      (_b = configService.get("dieline.width")) != null ? _b : 500,
+      "mm"
+    );
+    const dielineHeight = parseLengthToMm(
+      (_c = configService.get("dieline.height")) != null ? _c : 500,
+      "mm"
+    );
+    let changed = false;
+    const next = this.workingFeatures.map((f) => {
+      if (f.groupId !== groupId) return f;
+      let nx = x;
+      let ny = y;
+      if (f.constraints && dielineWidth > 0 && dielineHeight > 0) {
+        const constrained = ConstraintRegistry.apply(nx, ny, f, {
+          dielineWidth,
+          dielineHeight
+        });
+        nx = constrained.x;
+        ny = constrained.y;
+      }
+      if (f.x !== nx || f.y !== ny) {
+        changed = true;
+        return { ...f, x: nx, y: ny };
+      }
+      return f;
+    });
+    if (!changed) return { ok: true };
+    this.setWorkingFeatures(next);
+    this.redraw();
+    this.enforceConstraints();
+    this.emitWorkingChange();
+    return { ok: true };
+  }
+  completeFeatures() {
+    var _a, _b, _c;
+    const configService = (_a = this.context) == null ? void 0 : _a.services.get("ConfigurationService");
+    if (!configService) {
+      return {
+        ok: false,
+        issues: [
+          { featureId: "unknown", reason: "ConfigurationService not found" }
+        ]
+      };
+    }
+    const dielineWidth = parseLengthToMm(
+      (_b = configService.get("dieline.width")) != null ? _b : 500,
+      "mm"
     );
-    const unit = (configService == null ? void 0 : configService.get("dieline.unit", "mm")) || "mm";
-    const defaultSize = Coordinate.convertUnit(10, "mm", unit);
+    const dielineHeight = parseLengthToMm(
+      (_c = configService.get("dieline.height")) != null ? _c : 500,
+      "mm"
+    );
+    const result = completeFeaturesStrict(
+      this.workingFeatures,
+      { dielineWidth, dielineHeight },
+      (next) => {
+        this.isUpdatingConfig = true;
+        try {
+          configService.update("dieline.features", next);
+        } finally {
+          this.isUpdatingConfig = false;
+        }
+        this.workingFeatures = this.cloneFeatures(next);
+        this.emitWorkingChange();
+      }
+    );
+    if (!result.ok) {
+      return {
+        ok: false,
+        issues: result.issues
+      };
+    }
+    return { ok: true };
+  }
+  addFeature(type) {
+    if (!this.canvasService) return false;
     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
+      width: 10,
+      height: 10,
+      rotation: 0,
+      renderBehavior: "edge",
+      // Default constraint: path (snap to edge)
+      constraints: [{ type: "path" }]
     };
-    if (configService) {
-      const current = configService.get(
-        "dieline.features",
-        []
-      );
-      configService.update("dieline.features", [...current, newFeature]);
-    }
+    this.setWorkingFeatures([...this.workingFeatures || [], newFeature]);
+    this.redraw();
+    this.emitWorkingChange();
     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 = {
@@ -2048,32 +2418,28 @@ var FeatureTool = class {
       groupId,
       operation: "add",
       shape: "circle",
-      placement: "edge",
       x: 0.5,
       y: 0,
-      radius: lugRadius,
-      // 20mm
-      rotation: 0
+      radius: 20,
+      rotation: 0,
+      renderBehavior: "edge",
+      constraints: [{ type: "path" }]
     };
     const hole = {
       id: `${timestamp}-hole`,
       groupId,
       operation: "subtract",
       shape: "circle",
-      placement: "edge",
       x: 0.5,
       y: 0,
-      radius: holeRadius,
-      // 15mm
-      rotation: 0
+      radius: 15,
+      rotation: 0,
+      renderBehavior: "edge",
+      constraints: [{ type: "path" }]
     };
-    if (configService) {
-      const current = configService.get(
-        "dieline.features",
-        []
-      );
-      configService.update("dieline.features", [...current, lug, hole]);
-    }
+    this.setWorkingFeatures([...this.workingFeatures || [], lug, hole]);
+    this.redraw();
+    this.emitWorkingChange();
     return true;
   }
   getGeometryForFeature(geometry, feature) {
@@ -2117,12 +2483,12 @@ var FeatureTool = class {
         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]];
+            feature = this.workingFeatures[indices[0]];
           }
         } else {
           const index = (_d = target.data) == null ? void 0 : _d.index;
           if (index !== void 0) {
-            feature = this.features[index];
+            feature = this.workingFeatures[index];
           }
         }
         const geometry = this.getGeometryForFeature(
@@ -2143,7 +2509,7 @@ var FeatureTool = class {
     }
     if (!this.handleModified) {
       this.handleModified = (e) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const target = e.target;
         if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "feature-marker") return;
         if ((_b = target.data) == null ? void 0 : _b.isGroup) {
@@ -2151,11 +2517,11 @@ var FeatureTool = class {
           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 newFeatures = [...this.workingFeatures];
           const { x, y } = this.currentGeometry;
           groupObj.getObjects().forEach((child, i) => {
             const originalIndex = indices[i];
-            const feature = this.features[originalIndex];
+            const feature = this.workingFeatures[originalIndex];
             const geometry = this.getGeometryForFeature(
               this.currentGeometry,
               feature
@@ -2173,18 +2539,8 @@ var FeatureTool = class {
               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;
-            }
-          }
+          this.setWorkingFeatures(newFeatures);
+          this.emitWorkingChange();
         } else {
           this.syncFeatureFromCanvas(target);
         }
@@ -2218,56 +2574,41 @@ var FeatureTool = class {
     this.canvasService.requestRenderAll();
   }
   constrainPosition(p, geometry, limit, feature) {
-    if (feature && feature.constraints) {
-      const minX = geometry.x - geometry.width / 2;
-      const minY = geometry.y - geometry.height / 2;
-      const nx = geometry.width > 0 ? (p.x - minX) / geometry.width : 0.5;
-      const ny = geometry.height > 0 ? (p.y - minY) / geometry.height : 0.5;
-      const scale2 = geometry.scale || 1;
-      const dielineWidth = geometry.width / scale2;
-      const dielineHeight = geometry.height / scale2;
-      const constrained = ConstraintRegistry.apply(nx, ny, feature, {
-        dielineWidth,
-        dielineHeight
-      });
-      return {
-        x: minX + constrained.x * geometry.width,
-        y: minY + constrained.y * geometry.height
-      };
-    }
-    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 {
-        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: []
-    });
-    const dx = p.x - nearest.x;
-    const dy = p.y - nearest.y;
-    const dist = Math.sqrt(dx * dx + dy * dy);
-    if (dist <= limit) {
+    var _a;
+    if (!feature) {
       return { x: p.x, y: p.y };
     }
-    const scale = limit / dist;
+    const minX = geometry.x - geometry.width / 2;
+    const minY = geometry.y - geometry.height / 2;
+    const nx = geometry.width > 0 ? (p.x - minX) / geometry.width : 0.5;
+    const ny = geometry.height > 0 ? (p.y - minY) / geometry.height : 0.5;
+    const scale = geometry.scale || 1;
+    const dielineWidth = geometry.width / scale;
+    const dielineHeight = geometry.height / scale;
+    const activeConstraints = (_a = feature.constraints) == null ? void 0 : _a.filter((c) => !c.validateOnly);
+    const constrained = ConstraintRegistry.apply(
+      nx,
+      ny,
+      feature,
+      {
+        dielineWidth,
+        dielineHeight,
+        geometry
+      },
+      activeConstraints
+    );
     return {
-      x: nearest.x + dx * scale,
-      y: nearest.y + dy * scale
+      x: minX + constrained.x * geometry.width,
+      y: minY + constrained.y * geometry.height
     };
   }
   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)
+    if (index === void 0 || index < 0 || index >= this.workingFeatures.length)
       return;
-    const feature = this.features[index];
+    const feature = this.workingFeatures[index];
     const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
     const { width, height, x, y } = geometry;
     const left = x - width / 2;
@@ -2280,20 +2621,10 @@ var FeatureTool = class {
       y: normalizedY
       // Could also update rotation if we allowed rotating markers
     };
-    const newFeatures = [...this.features];
+    const newFeatures = [...this.workingFeatures];
     newFeatures[index] = updatedFeature;
-    this.features = newFeatures;
-    const configService = this.context.services.get(
-      "ConfigurationService"
-    );
-    if (configService) {
-      this.isUpdatingConfig = true;
-      try {
-        configService.update("dieline.features", this.features);
-      } finally {
-        this.isUpdatingConfig = false;
-      }
-    }
+    this.setWorkingFeatures(newFeatures);
+    this.emitWorkingChange();
   }
   redraw() {
     if (!this.canvasService || !this.currentGeometry) return;
@@ -2304,7 +2635,7 @@ var FeatureTool = class {
       return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
     });
     existing.forEach((obj) => canvas.remove(obj));
-    if (!this.features || this.features.length === 0) {
+    if (!this.workingFeatures || this.workingFeatures.length === 0) {
       this.canvasService.requestRenderAll();
       return;
     }
@@ -2312,7 +2643,7 @@ var FeatureTool = class {
     const finalScale = scale;
     const groups = {};
     const singles = [];
-    this.features.forEach((f, i) => {
+    this.workingFeatures.forEach((f, i) => {
       if (f.groupId) {
         if (!groups[f.groupId]) groups[f.groupId] = [];
         groups[f.groupId].push({ feature: f, index: i });
@@ -2359,6 +2690,33 @@ var FeatureTool = class {
       if (feature.rotation) {
         shape.rotate(feature.rotation);
       }
+      if (feature.bridge && feature.bridge.type === "vertical") {
+        const bridgeIndicator = new Rect2({
+          width: visualWidth,
+          height: 100 * featureScale,
+          // Arbitrary long length to show direction
+          fill: "transparent",
+          stroke: "#888",
+          strokeWidth: 1,
+          strokeDashArray: [2, 2],
+          originX: "center",
+          originY: "bottom",
+          // Anchor at bottom so it extends up
+          left: pos.x,
+          top: pos.y - visualHeight / 2,
+          // Start from top of feature
+          opacity: 0.5,
+          selectable: false,
+          evented: false
+        });
+        const group = new Group([bridgeIndicator, shape], {
+          originX: "center",
+          originY: "center",
+          left: pos.x,
+          top: pos.y
+        });
+        return group;
+      }
       return shape;
     };
     singles.forEach(({ feature, index }) => {
@@ -2380,25 +2738,6 @@ var FeatureTool = class {
         lockScalingY: true,
         data: { type: "feature-marker", index, isGroup: false }
       });
-      marker.set("opacity", 0);
-      marker.on("mouseover", () => {
-        marker.set("opacity", 1);
-        canvas.requestRenderAll();
-      });
-      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);
     });
@@ -2435,25 +2774,6 @@ var FeatureTool = class {
           indices: members.map((m) => m.index)
         }
       });
-      groupObj.set("opacity", 0);
-      groupObj.on("mouseover", () => {
-        groupObj.set("opacity", 1);
-        canvas.requestRenderAll();
-      });
-      groupObj.on("mouseout", () => {
-        if (canvas.getActiveObject() !== groupObj) {
-          groupObj.set("opacity", 0);
-          canvas.requestRenderAll();
-        }
-      });
-      groupObj.on("selected", () => {
-        groupObj.set("opacity", 1);
-        canvas.requestRenderAll();
-      });
-      groupObj.on("deselected", () => {
-        groupObj.set("opacity", 0);
-        canvas.requestRenderAll();
-      });
       canvas.add(groupObj);
       canvas.bringObjectToFront(groupObj);
     });
@@ -2472,12 +2792,12 @@ var FeatureTool = class {
       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]];
+          feature = this.workingFeatures[indices[0]];
         }
       } else {
         const index = (_c = marker.data) == null ? void 0 : _c.index;
         if (index !== void 0) {
-          feature = this.features[index];
+          feature = this.workingFeatures[index];
         }
       }
       const geometry = this.getGeometryForFeature(
@@ -3207,7 +3527,7 @@ var RulerTool = class {
     // Dieline context for sync
     this.dielineWidth = 500;
     this.dielineHeight = 500;
-    this.dielineUnit = "mm";
+    this.dielineDisplayUnit = "mm";
     this.dielinePadding = 40;
     this.dielineOffset = 0;
     if (options) {
@@ -3231,7 +3551,10 @@ var RulerTool = class {
       this.textColor = configService.get("ruler.textColor", this.textColor);
       this.lineColor = configService.get("ruler.lineColor", this.lineColor);
       this.fontSize = configService.get("ruler.fontSize", this.fontSize);
-      this.dielineUnit = configService.get("dieline.unit", this.dielineUnit);
+      this.dielineDisplayUnit = configService.get(
+        "dieline.displayUnit",
+        this.dielineDisplayUnit
+      );
       this.dielineWidth = configService.get("dieline.width", this.dielineWidth);
       this.dielineHeight = configService.get(
         "dieline.height",
@@ -3254,7 +3577,8 @@ var RulerTool = class {
             shouldUpdate = true;
           }
         } else if (e.key.startsWith("dieline.")) {
-          if (e.key === "dieline.unit") this.dielineUnit = e.value;
+          if (e.key === "dieline.displayUnit")
+            this.dielineDisplayUnit = e.value;
           if (e.key === "dieline.width") this.dielineWidth = e.value;
           if (e.key === "dieline.height") this.dielineHeight = e.value;
           if (e.key === "dieline.padding") this.dielinePadding = e.value;
@@ -3441,26 +3765,27 @@ var RulerTool = class {
     const width = this.canvasService.canvas.width || 800;
     const height = this.canvasService.canvas.height || 600;
     const paddingPx = this.resolvePadding(width, height);
-    const layout = Coordinate.calculateLayout(
-      { width, height },
-      { width: this.dielineWidth, height: this.dielineHeight },
-      paddingPx
+    this.canvasService.viewport.setPadding(paddingPx);
+    this.canvasService.viewport.updatePhysical(
+      this.dielineWidth,
+      this.dielineHeight
     );
+    const layout = this.canvasService.viewport.layout;
     const scale = layout.scale;
     const offsetX = layout.offsetX;
     const offsetY = layout.offsetY;
     const visualWidth = layout.width;
     const visualHeight = layout.height;
-    const rawOffset = this.dielineOffset || 0;
-    const effectiveOffset = rawOffset > 0 ? rawOffset : 0;
-    const expandPixels = effectiveOffset * scale;
+    const rawOffsetMm = this.dielineOffset || 0;
+    const effectiveOffsetMm = rawOffsetMm > 0 ? rawOffsetMm : 0;
+    const expandPixels = effectiveOffsetMm * scale;
     const gap = this.gap || 15;
     const rulerLeft = offsetX - expandPixels;
     const rulerTop = offsetY - expandPixels;
     const rulerRight = offsetX + visualWidth + expandPixels;
     const rulerBottom = offsetY + visualHeight + expandPixels;
-    const displayWidth = this.dielineWidth + effectiveOffset * 2;
-    const displayHeight = this.dielineHeight + effectiveOffset * 2;
+    const displayWidthMm = this.dielineWidth + effectiveOffsetMm * 2;
+    const displayHeightMm = this.dielineHeight + effectiveOffsetMm * 2;
     const topRulerY = rulerTop - gap;
     const topRulerXStart = rulerLeft;
     const topRulerXEnd = rulerRight;
@@ -3503,8 +3828,8 @@ var RulerTool = class {
         }
       )
     );
-    const widthStr = parseFloat(displayWidth.toFixed(2)).toString();
-    const topTextContent = `${widthStr} ${this.dielineUnit}`;
+    const widthStr = formatMm(displayWidthMm, this.dielineDisplayUnit);
+    const topTextContent = `${widthStr} ${this.dielineDisplayUnit}`;
     const topText = new Text(topTextContent, {
       left: topRulerXStart + (rulerRight - rulerLeft) / 2,
       top: topRulerY,
@@ -3559,8 +3884,8 @@ var RulerTool = class {
         }
       )
     );
-    const heightStr = parseFloat(displayHeight.toFixed(2)).toString();
-    const leftTextContent = `${heightStr} ${this.dielineUnit}`;
+    const heightStr = formatMm(displayHeightMm, this.dielineDisplayUnit);
+    const leftTextContent = `${heightStr} ${this.dielineDisplayUnit}`;
     const leftText = new Text(leftTextContent, {
       left: leftRulerX,
       top: leftRulerYStart + (rulerBottom - rulerTop) / 2,
@@ -3674,6 +3999,81 @@ var MirrorTool = class {
 
 // src/CanvasService.ts
 import { Canvas, Group as Group3 } from "fabric";
+
+// src/ViewportSystem.ts
+var ViewportSystem = class {
+  constructor(containerSize = { width: 0, height: 0 }, physicalSize = { width: 0, height: 0 }, padding = 40) {
+    this._containerSize = { width: 0, height: 0 };
+    this._physicalSize = { width: 0, height: 0 };
+    this._padding = 0;
+    this._layout = {
+      scale: 1,
+      offsetX: 0,
+      offsetY: 0,
+      width: 0,
+      height: 0
+    };
+    this._containerSize = containerSize;
+    this._physicalSize = physicalSize;
+    this._padding = padding;
+    this.updateLayout();
+  }
+  get layout() {
+    return this._layout;
+  }
+  get scale() {
+    return this._layout.scale;
+  }
+  get offset() {
+    return { x: this._layout.offsetX, y: this._layout.offsetY };
+  }
+  updateContainer(width, height) {
+    if (this._containerSize.width === width && this._containerSize.height === height)
+      return;
+    this._containerSize = { width, height };
+    this.updateLayout();
+  }
+  updatePhysical(width, height) {
+    if (this._physicalSize.width === width && this._physicalSize.height === height)
+      return;
+    this._physicalSize = { width, height };
+    this.updateLayout();
+  }
+  setPadding(padding) {
+    if (this._padding === padding) return;
+    this._padding = padding;
+    this.updateLayout();
+  }
+  updateLayout() {
+    this._layout = Coordinate.calculateLayout(
+      this._containerSize,
+      this._physicalSize,
+      this._padding
+    );
+  }
+  toPixel(value) {
+    return value * this._layout.scale;
+  }
+  toPhysical(value) {
+    return this._layout.scale === 0 ? 0 : value / this._layout.scale;
+  }
+  toPixelPoint(point) {
+    return {
+      x: point.x * this._layout.scale + this._layout.offsetX,
+      y: point.y * this._layout.scale + this._layout.offsetY
+    };
+  }
+  // Convert screen coordinate (e.g. mouse event) to physical coordinate (relative to content origin)
+  toPhysicalPoint(point) {
+    if (this._layout.scale === 0) return { x: 0, y: 0 };
+    return {
+      x: (point.x - this._layout.offsetX) / this._layout.scale,
+      y: (point.y - this._layout.offsetY) / this._layout.scale
+    };
+  }
+};
+
+// src/CanvasService.ts
 var CanvasService = class {
   constructor(el, options) {
     if (el instanceof Canvas) {
@@ -3684,6 +4084,10 @@ var CanvasService = class {
         ...options
       });
     }
+    this.viewport = new ViewportSystem();
+    if (this.canvas.width !== void 0 && this.canvas.height !== void 0) {
+      this.viewport.updateContainer(this.canvas.width, this.canvas.height);
+    }
     if (options == null ? void 0 : options.eventBus) {
       this.setEventBus(options.eventBus);
     }
@@ -3763,5 +4167,7 @@ export {
   ImageTool,
   MirrorTool,
   RulerTool,
-  WhiteInkTool
+  WhiteInkTool,
+  formatMm,
+  parseLengthToMm
 };