@pooder/kit 4.0.0 → 4.2.0

package/dist/index.js

@@ -38,7 +38,9 @@ __export(index_exports, {
   ImageTool: () => ImageTool,
   MirrorTool: () => MirrorTool,
   RulerTool: () => RulerTool,
-  WhiteInkTool: () => WhiteInkTool
+  WhiteInkTool: () => WhiteInkTool,
+  formatMm: () => formatMm,
+  parseLengthToMm: () => parseLengthToMm
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -717,6 +719,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
 var import_paper2 = __toESM(require("paper"));
 function resolveFeaturePosition(feature, geometry) {
@@ -948,7 +973,7 @@ var DielineTool = class {
       name: "DielineTool"
     };
     this.state = {
-      unit: "mm",
+      displayUnit: "mm",
       shape: "rect",
       width: 500,
       height: 500,
@@ -994,50 +1019,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;
@@ -1096,11 +1159,11 @@ var DielineTool = class {
     return {
       [import_core2.ContributionPointIds.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",
@@ -1112,7 +1175,7 @@ var DielineTool = class {
         {
           id: "dieline.width",
           type: "number",
-          label: "Width",
+          label: "Width (mm)",
           min: 10,
           max: 2e3,
           default: s.width
@@ -1120,7 +1183,7 @@ var DielineTool = class {
         {
           id: "dieline.height",
           type: "number",
-          label: "Height",
+          label: "Height (mm)",
           min: 10,
           max: 2e3,
           default: s.height
@@ -1128,7 +1191,7 @@ var DielineTool = class {
         {
           id: "dieline.radius",
           type: "number",
-          label: "Corner Radius",
+          label: "Corner Radius (mm)",
           min: 0,
           max: 500,
           default: s.radius
@@ -1143,7 +1206,7 @@ var DielineTool = class {
         {
           id: "dieline.offset",
           type: "number",
-          label: "Bleed Offset",
+          label: "Bleed Offset (mm)",
           min: -100,
           max: 100,
           default: s.offset
@@ -1234,6 +1297,31 @@ var DielineTool = class {
         }
       ],
       [import_core2.ContributionPointIds.COMMANDS]: [
+        {
+          command: "updateFeaturePosition",
+          title: "Update Feature Position",
+          handler: (groupId, x, y) => {
+            var _a;
+            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+              "ConfigurationService"
+            );
+            if (!configService) return;
+            const features = configService.get("dieline.features") || [];
+            let changed = false;
+            const newFeatures = features.map((f) => {
+              if (f.groupId === groupId) {
+                if (f.x !== x || f.y !== y) {
+                  changed = true;
+                  return { ...f, x, y };
+                }
+              }
+              return f;
+            });
+            if (changed) {
+              configService.update("dieline.features", newFeatures);
+            }
+          }
+        },
         {
           command: "getGeometry",
           title: "Get Geometry",
@@ -1339,7 +1427,7 @@ var DielineTool = class {
     const layer = this.getLayer();
     if (!layer) return;
     const {
-      unit,
+      displayUnit,
       shape,
       radius,
       offset,
@@ -1350,15 +1438,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;
@@ -1545,15 +1631,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;
@@ -1561,14 +1654,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
@@ -1578,15 +1671,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;
@@ -1801,13 +1892,158 @@ var FilmTool = class {
 // src/feature.ts
 var import_core4 = require("@pooder/core");
 var import_fabric4 = require("fabric");
+
+// 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 };
+};
+var tangentBottomConstraint = (x, y, feature, context) => {
+  var _a;
+  const { dielineWidth, dielineHeight } = context;
+  const params = ((_a = feature.constraints) == null ? void 0 : _a.params) || {};
+  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 };
+};
+ConstraintRegistry.register("edge", edgeConstraint);
+ConstraintRegistry.register("internal", internalConstraint);
+ConstraintRegistry.register("tangent-bottom", tangentBottomConstraint);
+
+// src/featureComplete.ts
+function validateFeaturesStrict(features, context) {
+  var _a;
+  const eps = 1e-6;
+  const issues = [];
+  for (const f of features) {
+    if (!((_a = f.constraints) == null ? void 0 : _a.type)) continue;
+    const constrained = ConstraintRegistry.apply(f.x, f.y, f, context);
+    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;
@@ -1833,12 +2069,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();
         }
       });
     }
@@ -1896,27 +2135,151 @@ 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,
@@ -1925,28 +2288,17 @@ var FeatureTool = class {
       x: 0.5,
       y: 0,
       // Top edge
-      width: defaultSize,
-      height: defaultSize,
+      width: 10,
+      height: 10,
       rotation: 0
     };
-    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 = {
@@ -1957,8 +2309,7 @@ var FeatureTool = class {
       placement: "edge",
       x: 0.5,
       y: 0,
-      radius: lugRadius,
-      // 20mm
+      radius: 20,
       rotation: 0
     };
     const hole = {
@@ -1969,17 +2320,12 @@ var FeatureTool = class {
       placement: "edge",
       x: 0.5,
       y: 0,
-      radius: holeRadius,
-      // 15mm
+      radius: 15,
       rotation: 0
     };
-    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) {
@@ -2023,12 +2369,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(
@@ -2049,7 +2395,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) {
@@ -2057,11 +2403,11 @@ var FeatureTool = class {
           const indices = (_c = groupObj.data) == null ? void 0 : _c.indices;
           if (!indices) return;
           const groupCenter = new import_fabric4.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
@@ -2079,18 +2425,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);
         }
@@ -2124,6 +2460,23 @@ 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;
@@ -2134,10 +2487,13 @@ var FeatureTool = class {
         y: Math.max(minY, Math.min(maxY, p.y))
       };
     }
-    const nearest = getNearestPointOnDieline({ x: p.x, y: p.y }, {
-      ...geometry,
-      features: []
-    });
+    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);
@@ -2154,9 +2510,9 @@ var FeatureTool = class {
     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;
@@ -2169,20 +2525,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;
@@ -2193,7 +2539,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;
     }
@@ -2201,7 +2547,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 });
@@ -2269,25 +2615,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);
     });
@@ -2324,25 +2651,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);
     });
@@ -2361,12 +2669,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(
@@ -3090,7 +3398,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) {
@@ -3114,7 +3422,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",
@@ -3137,7 +3448,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;
@@ -3324,26 +3636,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;
@@ -3386,8 +3699,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 import_fabric7.Text(topTextContent, {
       left: topRulerXStart + (rulerRight - rulerLeft) / 2,
       top: topRulerY,
@@ -3442,8 +3755,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 import_fabric7.Text(leftTextContent, {
       left: leftRulerX,
       top: leftRulerYStart + (rulerBottom - rulerTop) / 2,
@@ -3555,6 +3868,81 @@ var MirrorTool = class {
 
 // src/CanvasService.ts
 var import_fabric8 = require("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 import_fabric8.Canvas) {
@@ -3565,6 +3953,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);
     }
@@ -3645,5 +4037,7 @@ var CanvasService = class {
   ImageTool,
   MirrorTool,
   RulerTool,
-  WhiteInkTool
+  WhiteInkTool,
+  formatMm,
+  parseLengthToMm
 });