@pooder/kit 2.0.0 → 3.0.0

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BackgroundTool: () => BackgroundTool,
+  CanvasService: () => CanvasService,
   DielineTool: () => DielineTool,
   FilmTool: () => FilmTool,
   HoleTool: () => HoleTool,
@@ -43,118 +44,152 @@ module.exports = __toCommonJS(index_exports);
 
 // src/background.ts
 var import_core = require("@pooder/core");
+var import_fabric = require("fabric");
 var BackgroundTool = class {
-  constructor() {
-    this.name = "BackgroundTool";
-    this.options = {
-      color: "",
-      url: ""
+  constructor(options) {
+    this.id = "pooder.kit.background";
+    this.metadata = {
+      name: "BackgroundTool"
     };
-    this.schema = {
-      color: {
-        type: "color",
-        label: "Background Color"
-      },
-      url: {
-        type: "string",
-        label: "Image URL"
-      }
-    };
-    this.commands = {
-      reset: {
-        execute: (editor) => {
-          this.updateBackground(editor, this.options);
-          return true;
+    this.color = "";
+    this.url = "";
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+  activate(context) {
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for BackgroundTool");
+      return;
+    }
+    const configService = context.services.get("ConfigurationService");
+    if (configService) {
+      this.color = configService.get("background.color", this.color);
+      this.url = configService.get("background.url", this.url);
+      configService.onAnyChange((e) => {
+        if (e.key.startsWith("background.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[BackgroundTool] Config change detected: ${e.key} -> ${e.value}, prop: ${prop}`
+          );
+          if (prop && prop in this) {
+            console.log(
+              `[BackgroundTool] Updating option ${prop} to ${e.value}`
+            );
+            this[prop] = e.value;
+            this.updateBackground();
+          } else {
+            console.warn(
+              `[BackgroundTool] Property ${prop} not found in options`
+            );
+          }
         }
-      },
-      clear: {
-        execute: (editor) => {
-          this.options = {
-            color: "transparent",
-            url: ""
-          };
-          this.updateBackground(editor, this.options);
-          return true;
+      });
+    }
+    this.initLayer();
+    this.updateBackground();
+  }
+  deactivate(context) {
+    if (this.canvasService) {
+      const layer = this.canvasService.getLayer("background");
+      if (layer) {
+        this.canvasService.canvas.remove(layer);
+      }
+      this.canvasService = void 0;
+    }
+  }
+  contribute() {
+    return {
+      [import_core.ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "background.color",
+          type: "color",
+          label: "Background Color",
+          default: ""
+        },
+        {
+          id: "background.url",
+          type: "string",
+          label: "Image URL",
+          default: ""
         }
-      },
-      setBackgroundColor: {
-        execute: (editor, color) => {
-          if (this.options.color === color) return true;
-          this.options.color = color;
-          this.updateBackground(editor, this.options);
-          return true;
+      ],
+      [import_core.ContributionPointIds.COMMANDS]: [
+        {
+          command: "reset",
+          title: "Reset Background",
+          handler: () => {
+            this.updateBackground();
+            return true;
+          }
         },
-        schema: {
-          color: {
-            type: "string",
-            // Should be 'color' if supported by CommandArgSchema, but using 'string' for now as per previous plan
-            label: "Background Color",
-            required: true
+        {
+          command: "clear",
+          title: "Clear Background",
+          handler: () => {
+            this.color = "transparent";
+            this.url = "";
+            this.updateBackground();
+            return true;
           }
-        }
-      },
-      setBackgroundImage: {
-        execute: (editor, url) => {
-          if (this.options.url === url) return true;
-          this.options.url = url;
-          this.updateBackground(editor, this.options);
-          return true;
         },
-        schema: {
-          url: {
-            type: "string",
-            label: "Image URL",
-            required: true
+        {
+          command: "setBackgroundColor",
+          title: "Set Background Color",
+          handler: (color) => {
+            if (this.color === color) return true;
+            this.color = color;
+            this.updateBackground();
+            return true;
+          }
+        },
+        {
+          command: "setBackgroundImage",
+          title: "Set Background Image",
+          handler: (url) => {
+            if (this.url === url) return true;
+            this.url = url;
+            this.updateBackground();
+            return true;
           }
         }
-      }
+      ]
     };
   }
-  initLayer(editor) {
-    let backgroundLayer = editor.getLayer("background");
+  initLayer() {
+    if (!this.canvasService) return;
+    let backgroundLayer = this.canvasService.getLayer("background");
     if (!backgroundLayer) {
-      backgroundLayer = new import_core.PooderLayer([], {
-        width: editor.canvas.width,
-        height: editor.canvas.height,
+      backgroundLayer = this.canvasService.createLayer("background", {
+        width: this.canvasService.canvas.width,
+        height: this.canvasService.canvas.height,
         selectable: false,
-        evented: false,
-        data: {
-          id: "background"
-        }
+        evented: false
       });
-      editor.canvas.add(backgroundLayer);
-      editor.canvas.sendObjectToBack(backgroundLayer);
-    }
-  }
-  onMount(editor) {
-    this.initLayer(editor);
-    this.updateBackground(editor, this.options);
-  }
-  onUnmount(editor) {
-    const layer = editor.getLayer("background");
-    if (layer) {
-      editor.canvas.remove(layer);
+      this.canvasService.canvas.sendObjectToBack(backgroundLayer);
     }
   }
-  onUpdate(editor, state) {
-    this.updateBackground(editor, this.options);
-  }
-  async updateBackground(editor, options) {
-    const layer = editor.getLayer("background");
+  async updateBackground() {
+    if (!this.canvasService) return;
+    const layer = this.canvasService.getLayer("background");
     if (!layer) {
       console.warn("[BackgroundTool] Background layer not found");
       return;
     }
-    const { color, url } = options;
-    const width = editor.state.width;
-    const height = editor.state.height;
-    let rect = editor.getObject("background-color-rect", "background");
+    const { color, url } = this;
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
+    let rect = this.canvasService.getObject(
+      "background-color-rect",
+      "background"
+    );
     if (rect) {
       rect.set({
         fill: color
       });
     } else {
-      rect = new import_core.Rect({
+      rect = new import_fabric.Rect({
         width,
         height,
         fill: color,
@@ -167,7 +202,10 @@ var BackgroundTool = class {
       layer.add(rect);
       layer.sendObjectToBack(rect);
     }
-    let img = editor.getObject("background-image", "background");
+    let img = this.canvasService.getObject(
+      "background-image",
+      "background"
+    );
     try {
       if (img) {
         if (img.getSrc() !== url) {
@@ -179,7 +217,7 @@ var BackgroundTool = class {
         }
       } else {
         if (url) {
-          img = await import_core.Image.fromURL(url, { crossOrigin: "anonymous" });
+          img = await import_fabric.FabricImage.fromURL(url, { crossOrigin: "anonymous" });
           img.set({
             originX: "left",
             originY: "top",
@@ -196,25 +234,253 @@ var BackgroundTool = class {
           layer.add(img);
         }
       }
-      editor.canvas.requestRenderAll();
+      this.canvasService.requestRenderAll();
     } catch (e) {
       console.error("[BackgroundTool] Failed to load image", e);
     }
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
   }
 };
 
 // src/dieline.ts
 var import_core2 = require("@pooder/core");
+var import_fabric2 = require("fabric");
+
+// src/tracer.ts
+var ImageTracer = class {
+  /**
+   * Main entry point: Traces an image URL to an SVG path string.
+   * @param imageUrl The URL or Base64 string of the image.
+   * @param options Configuration options.
+   */
+  static async trace(imageUrl, options = {}) {
+    var _a, _b;
+    const img = await this.loadImage(imageUrl);
+    const width = img.width;
+    const height = img.height;
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Could not get 2D context");
+    ctx.drawImage(img, 0, 0);
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const points = this.marchingSquares(imageData, (_a = options.threshold) != null ? _a : 10);
+    let finalPoints = points;
+    if (options.scaleToWidth && options.scaleToHeight && points.length > 0) {
+      finalPoints = this.scalePoints(
+        points,
+        options.scaleToWidth,
+        options.scaleToHeight
+      );
+    }
+    const simplifiedPoints = this.douglasPeucker(
+      finalPoints,
+      (_b = options.simplifyTolerance) != null ? _b : 0.5
+    );
+    return this.pointsToSVG(simplifiedPoints);
+  }
+  static loadImage(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "Anonymous";
+      img.onload = () => resolve(img);
+      img.onerror = (e) => reject(e);
+      img.src = url;
+    });
+  }
+  /**
+   * Moore-Neighbor Tracing Algorithm
+   * More robust for irregular shapes than simple Marching Squares walker.
+   */
+  static marchingSquares(imageData, alphaThreshold) {
+    const width = imageData.width;
+    const height = imageData.height;
+    const data = imageData.data;
+    const isSolid = (x, y) => {
+      if (x < 0 || x >= width || y < 0 || y >= height) return false;
+      const index = (y * width + x) * 4;
+      const r = data[index];
+      const g = data[index + 1];
+      const b = data[index + 2];
+      const a = data[index + 3];
+      if (a <= alphaThreshold) return false;
+      if (r > 240 && g > 240 && b > 240) return false;
+      return true;
+    };
+    let startX = -1;
+    let startY = -1;
+    searchLoop: for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        if (isSolid(x, y)) {
+          startX = x;
+          startY = y;
+          break searchLoop;
+        }
+      }
+    }
+    if (startX === -1) return [];
+    const points = [];
+    let cx = startX;
+    let cy = startY;
+    const neighbors = [
+      { x: 0, y: -1 },
+      { x: 1, y: -1 },
+      { x: 1, y: 0 },
+      { x: 1, y: 1 },
+      { x: 0, y: 1 },
+      { x: -1, y: 1 },
+      { x: -1, y: 0 },
+      { x: -1, y: -1 }
+    ];
+    let backtrack = 6;
+    const maxSteps = width * height * 3;
+    let steps = 0;
+    do {
+      points.push({ x: cx, y: cy });
+      let found = false;
+      for (let i = 0; i < 8; i++) {
+        const idx = (backtrack + 1 + i) % 8;
+        const nx = cx + neighbors[idx].x;
+        const ny = cy + neighbors[idx].y;
+        if (isSolid(nx, ny)) {
+          cx = nx;
+          cy = ny;
+          backtrack = (idx + 4) % 8;
+          backtrack = (idx + 4 + 1) % 8;
+          backtrack = (idx + 4 + 1) % 8;
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        break;
+      }
+      steps++;
+    } while ((cx !== startX || cy !== startY) && steps < maxSteps);
+    return points;
+  }
+  /**
+   * Douglas-Peucker Line Simplification
+   */
+  static douglasPeucker(points, tolerance) {
+    if (points.length <= 2) return points;
+    const sqTolerance = tolerance * tolerance;
+    let maxSqDist = 0;
+    let index = 0;
+    const first = points[0];
+    const last = points[points.length - 1];
+    for (let i = 1; i < points.length - 1; i++) {
+      const sqDist = this.getSqSegDist(points[i], first, last);
+      if (sqDist > maxSqDist) {
+        index = i;
+        maxSqDist = sqDist;
+      }
+    }
+    if (maxSqDist > sqTolerance) {
+      const left = this.douglasPeucker(points.slice(0, index + 1), tolerance);
+      const right = this.douglasPeucker(points.slice(index), tolerance);
+      return left.slice(0, left.length - 1).concat(right);
+    } else {
+      return [first, last];
+    }
+  }
+  static getSqSegDist(p, p1, p2) {
+    let x = p1.x;
+    let y = p1.y;
+    let dx = p2.x - x;
+    let dy = p2.y - y;
+    if (dx !== 0 || dy !== 0) {
+      const t = ((p.x - x) * dx + (p.y - y) * dy) / (dx * dx + dy * dy);
+      if (t > 1) {
+        x = p2.x;
+        y = p2.y;
+      } else if (t > 0) {
+        x += dx * t;
+        y += dy * t;
+      }
+    }
+    dx = p.x - x;
+    dy = p.y - y;
+    return dx * dx + dy * dy;
+  }
+  static scalePoints(points, targetWidth, targetHeight) {
+    if (points.length === 0) return points;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of points) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+    const srcW = maxX - minX;
+    const srcH = maxY - minY;
+    if (srcW === 0 || srcH === 0) return points;
+    const scaleX = targetWidth / srcW;
+    const scaleY = targetHeight / srcH;
+    return points.map((p) => ({
+      x: (p.x - minX) * scaleX,
+      y: (p.y - minY) * scaleY
+    }));
+  }
+  static pointsToSVG(points) {
+    if (points.length === 0) return "";
+    const head = points[0];
+    const tail = points.slice(1);
+    return `M ${head.x} ${head.y} ` + tail.map((p) => `L ${p.x} ${p.y}`).join(" ") + " Z";
+  }
+};
+
+// src/coordinate.ts
+var Coordinate = class {
+  /**
+   * Convert an absolute value to a normalized value (0-1).
+   * @param value Absolute value (e.g., pixels)
+   * @param total Total dimension size (e.g., canvas width)
+   */
+  static toNormalized(value, total) {
+    return total === 0 ? 0 : value / total;
+  }
+  /**
+   * Convert a normalized value (0-1) to an absolute value.
+   * @param normalized Normalized value (0-1)
+   * @param total Total dimension size (e.g., canvas width)
+   */
+  static toAbsolute(normalized, total) {
+    return normalized * total;
+  }
+  /**
+   * Normalize a point's coordinates.
+   */
+  static normalizePoint(point, size) {
+    return {
+      x: this.toNormalized(point.x, size.width),
+      y: this.toNormalized(point.y, size.height)
+    };
+  }
+  /**
+   * Denormalize a point's coordinates to absolute pixels.
+   */
+  static denormalizePoint(point, size) {
+    return {
+      x: this.toAbsolute(point.x, size.width),
+      y: this.toAbsolute(point.y, size.height)
+    };
+  }
+};
 
 // src/geometry.ts
 var import_paper = __toESM(require("paper"));
 function ensurePaper(width, height) {
   if (!import_paper.default.project) {
     import_paper.default.setup(new import_paper.default.Size(width, height));
+  } else {
+    import_paper.default.view.viewSize = new import_paper.default.Size(width, height);
   }
 }
 function createBaseShape(options) {
-  const { shape, width, height, radius, x, y } = options;
+  const { shape, width, height, radius, x, y, pathData } = options;
   const center = new import_paper.default.Point(x, y);
   if (shape === "rect") {
     return new import_paper.default.Path.Rectangle({
@@ -228,11 +494,24 @@ function createBaseShape(options) {
       center,
       radius: Math.max(0, r)
     });
-  } else {
+  } else if (shape === "ellipse") {
     return new import_paper.default.Path.Ellipse({
       center,
       radius: [Math.max(0, width / 2), Math.max(0, height / 2)]
     });
+  } else if (shape === "custom" && pathData) {
+    const path = new import_paper.default.Path();
+    path.pathData = pathData;
+    path.position = center;
+    if (width > 0 && height > 0 && path.bounds.width > 0 && path.bounds.height > 0) {
+      path.scale(width / path.bounds.width, height / path.bounds.height);
+    }
+    return path;
+  } else {
+    return new import_paper.default.Path.Rectangle({
+      point: [x - width / 2, y - height / 2],
+      size: [Math.max(0, width), Math.max(0, height)]
+    });
   }
 }
 function getDielineShape(options) {
@@ -246,10 +525,6 @@ function getDielineShape(options) {
         center: [hole.x, hole.y],
         radius: hole.outerRadius
       });
-      if (!mainShape.intersects(lug) && !mainShape.contains(lug.position)) {
-        lug.remove();
-        return;
-      }
       const cut = new import_paper.default.Path.Circle({
         center: [hole.x, hole.y],
         radius: hole.innerRadius
@@ -257,31 +532,49 @@ function getDielineShape(options) {
       if (!lugsPath) {
         lugsPath = lug;
       } else {
-        const temp = lugsPath.unite(lug);
-        lugsPath.remove();
-        lug.remove();
-        lugsPath = temp;
+        try {
+          const temp = lugsPath.unite(lug);
+          lugsPath.remove();
+          lug.remove();
+          lugsPath = temp;
+        } catch (e) {
+          console.error("Geometry: Failed to unite lug", e);
+          lug.remove();
+        }
       }
       if (!cutsPath) {
         cutsPath = cut;
       } else {
-        const temp = cutsPath.unite(cut);
-        cutsPath.remove();
-        cut.remove();
-        cutsPath = temp;
+        try {
+          const temp = cutsPath.unite(cut);
+          cutsPath.remove();
+          cut.remove();
+          cutsPath = temp;
+        } catch (e) {
+          console.error("Geometry: Failed to unite cut", e);
+          cut.remove();
+        }
       }
     });
     if (lugsPath) {
-      const temp = mainShape.unite(lugsPath);
-      mainShape.remove();
-      lugsPath.remove();
-      mainShape = temp;
+      try {
+        const temp = mainShape.unite(lugsPath);
+        mainShape.remove();
+        lugsPath.remove();
+        mainShape = temp;
+      } catch (e) {
+        console.error("Geometry: Failed to unite lugsPath to mainShape", e);
+      }
     }
     if (cutsPath) {
-      const temp = mainShape.subtract(cutsPath);
-      mainShape.remove();
-      cutsPath.remove();
-      mainShape = temp;
+      try {
+        const temp = mainShape.subtract(cutsPath);
+        mainShape.remove();
+        cutsPath.remove();
+        mainShape = temp;
+      } catch (e) {
+        console.error("Geometry: Failed to subtract cutsPath from mainShape", e);
+      }
     }
   }
   return mainShape;
@@ -315,13 +608,37 @@ function generateBleedZonePath(options, offset) {
   ensurePaper(maxDim, maxDim);
   import_paper.default.project.activeLayer.removeChildren();
   const shapeOriginal = getDielineShape(options);
-  const offsetOptions = {
-    ...options,
-    width: Math.max(0, options.width + offset * 2),
-    height: Math.max(0, options.height + offset * 2),
-    radius: options.radius === 0 ? 0 : Math.max(0, options.radius + offset)
-  };
-  const shapeOffset = getDielineShape(offsetOptions);
+  let shapeOffset;
+  if (options.shape === "custom") {
+    const stroker = shapeOriginal.clone();
+    stroker.strokeColor = new import_paper.default.Color("black");
+    stroker.strokeWidth = Math.abs(offset) * 2;
+    stroker.strokeJoin = "round";
+    stroker.strokeCap = "round";
+    let expanded;
+    try {
+      expanded = stroker.expand({ stroke: true, fill: false, insert: false });
+    } catch (e) {
+      stroker.remove();
+      shapeOffset = shapeOriginal.clone();
+      return shapeOffset.pathData;
+    }
+    stroker.remove();
+    if (offset > 0) {
+      shapeOffset = shapeOriginal.unite(expanded);
+    } else {
+      shapeOffset = shapeOriginal.subtract(expanded);
+    }
+    expanded.remove();
+  } else {
+    const offsetOptions = {
+      ...options,
+      width: Math.max(0, options.width + offset * 2),
+      height: Math.max(0, options.height + offset * 2),
+      radius: options.radius === 0 ? 0 : Math.max(0, options.radius + offset)
+    };
+    shapeOffset = getDielineShape(offsetOptions);
+  }
   let bleedZone;
   if (offset > 0) {
     bleedZone = shapeOffset.subtract(shapeOriginal);
@@ -344,256 +661,301 @@ function getNearestPointOnDieline(point, options) {
   shape.remove();
   return result;
 }
+function getPathBounds(pathData) {
+  const path = new import_paper.default.Path();
+  path.pathData = pathData;
+  const bounds = path.bounds;
+  path.remove();
+  return { width: bounds.width, height: bounds.height };
+}
 
 // src/dieline.ts
 var DielineTool = class {
-  constructor() {
-    this.name = "DielineTool";
-    this.options = {
-      shape: "rect",
-      width: 300,
-      height: 300,
-      radius: 0,
-      offset: 0,
-      style: "solid",
-      insideColor: "rgba(0,0,0,0)",
-      outsideColor: "#ffffff",
-      showBleedLines: true
-    };
-    this.schema = {
-      shape: {
-        type: "select",
-        options: ["rect", "circle", "ellipse"],
-        label: "Shape"
-      },
-      width: { type: "number", min: 10, max: 2e3, label: "Width" },
-      height: { type: "number", min: 10, max: 2e3, label: "Height" },
-      radius: { type: "number", min: 0, max: 500, label: "Corner Radius" },
-      position: { type: "string", label: "Position" },
-      // Complex object, simplified for now or need custom handler
-      borderLength: { type: "number", min: 0, max: 500, label: "Margin" },
-      offset: { type: "number", min: -100, max: 100, label: "Bleed Offset" },
-      showBleedLines: { type: "boolean", label: "Show Bleed Lines" },
-      style: {
-        type: "select",
-        options: ["solid", "dashed"],
-        label: "Line Style"
-      },
-      insideColor: { type: "color", label: "Inside Color" },
-      outsideColor: { type: "color", label: "Outside Color" }
+  constructor(options) {
+    this.id = "pooder.kit.dieline";
+    this.metadata = {
+      name: "DielineTool"
     };
-    this.commands = {
-      reset: {
-        execute: (editor) => {
-          this.options = {
-            shape: "rect",
-            width: 300,
-            height: 300,
-            radius: 0,
-            offset: 0,
-            style: "solid",
-            insideColor: "rgba(0,0,0,0)",
-            outsideColor: "#ffffff",
-            showBleedLines: true
-          };
-          this.updateDieline(editor);
-          return true;
+    this.shape = "rect";
+    this.width = 500;
+    this.height = 500;
+    this.radius = 0;
+    this.offset = 0;
+    this.style = "solid";
+    this.insideColor = "rgba(0,0,0,0)";
+    this.outsideColor = "#ffffff";
+    this.showBleedLines = true;
+    this.holes = [];
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+  activate(context) {
+    this.context = context;
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for DielineTool");
+      return;
+    }
+    const configService = context.services.get("ConfigurationService");
+    if (configService) {
+      this.shape = configService.get("dieline.shape", this.shape);
+      this.width = configService.get("dieline.width", this.width);
+      this.height = configService.get("dieline.height", this.height);
+      this.radius = configService.get("dieline.radius", this.radius);
+      this.borderLength = configService.get(
+        "dieline.borderLength",
+        this.borderLength
+      );
+      this.offset = configService.get("dieline.offset", this.offset);
+      this.style = configService.get("dieline.style", this.style);
+      this.insideColor = configService.get(
+        "dieline.insideColor",
+        this.insideColor
+      );
+      this.outsideColor = configService.get(
+        "dieline.outsideColor",
+        this.outsideColor
+      );
+      this.showBleedLines = configService.get(
+        "dieline.showBleedLines",
+        this.showBleedLines
+      );
+      this.holes = configService.get("dieline.holes", this.holes);
+      this.pathData = configService.get("dieline.pathData", this.pathData);
+      configService.onAnyChange((e) => {
+        if (e.key.startsWith("dieline.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[DielineTool] Config change detected: ${e.key} -> ${e.value}`
+          );
+          if (prop && prop in this) {
+            this[prop] = e.value;
+            this.updateDieline();
+          }
         }
-      },
-      destroy: {
-        execute: (editor) => {
-          this.destroyLayer(editor);
-          return true;
+      });
+    }
+    this.createLayer();
+    this.updateDieline();
+  }
+  deactivate(context) {
+    this.destroyLayer();
+    this.canvasService = void 0;
+    this.context = void 0;
+  }
+  contribute() {
+    return {
+      [import_core2.ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "dieline.shape",
+          type: "select",
+          label: "Shape",
+          options: ["rect", "circle", "ellipse", "custom"],
+          default: this.shape
+        },
+        {
+          id: "dieline.width",
+          type: "number",
+          label: "Width",
+          min: 10,
+          max: 2e3,
+          default: this.width
+        },
+        {
+          id: "dieline.height",
+          type: "number",
+          label: "Height",
+          min: 10,
+          max: 2e3,
+          default: this.height
+        },
+        {
+          id: "dieline.radius",
+          type: "number",
+          label: "Corner Radius",
+          min: 0,
+          max: 500,
+          default: this.radius
+        },
+        {
+          id: "dieline.position",
+          type: "json",
+          label: "Position (Normalized)",
+          default: this.position
+        },
+        {
+          id: "dieline.borderLength",
+          type: "number",
+          label: "Margin",
+          min: 0,
+          max: 500,
+          default: this.borderLength
+        },
+        {
+          id: "dieline.offset",
+          type: "number",
+          label: "Bleed Offset",
+          min: -100,
+          max: 100,
+          default: this.offset
+        },
+        {
+          id: "dieline.showBleedLines",
+          type: "boolean",
+          label: "Show Bleed Lines",
+          default: this.showBleedLines
+        },
+        {
+          id: "dieline.style",
+          type: "select",
+          label: "Line Style",
+          options: ["solid", "dashed"],
+          default: this.style
+        },
+        {
+          id: "dieline.insideColor",
+          type: "color",
+          label: "Inside Color",
+          default: this.insideColor
+        },
+        {
+          id: "dieline.outsideColor",
+          type: "color",
+          label: "Outside Color",
+          default: this.outsideColor
+        },
+        {
+          id: "dieline.holes",
+          type: "json",
+          label: "Holes",
+          default: this.holes
         }
-      },
-      setDimensions: {
-        execute: (editor, width, height) => {
-          if (this.options.width === width && this.options.height === height)
+      ],
+      [import_core2.ContributionPointIds.COMMANDS]: [
+        {
+          command: "reset",
+          title: "Reset Dieline",
+          handler: () => {
+            this.shape = "rect";
+            this.width = 300;
+            this.height = 300;
+            this.radius = 0;
+            this.offset = 0;
+            this.style = "solid";
+            this.insideColor = "rgba(0,0,0,0)";
+            this.outsideColor = "#ffffff";
+            this.showBleedLines = true;
+            this.holes = [];
+            this.pathData = void 0;
+            this.updateDieline();
             return true;
-          this.options.width = width;
-          this.options.height = height;
-          this.updateDieline(editor);
-          return true;
+          }
         },
-        schema: {
-          width: {
-            type: "number",
-            label: "Width",
-            min: 10,
-            max: 2e3,
-            required: true
-          },
-          height: {
-            type: "number",
-            label: "Height",
-            min: 10,
-            max: 2e3,
-            required: true
+        {
+          command: "setDimensions",
+          title: "Set Dimensions",
+          handler: (width, height) => {
+            if (this.width === width && this.height === height) return true;
+            this.width = width;
+            this.height = height;
+            this.updateDieline();
+            return true;
           }
-        }
-      },
-      setShape: {
-        execute: (editor, shape) => {
-          if (this.options.shape === shape) return true;
-          this.options.shape = shape;
-          this.updateDieline(editor);
-          return true;
         },
-        schema: {
-          shape: {
-            type: "string",
-            label: "Shape",
-            options: ["rect", "circle", "ellipse"],
-            required: true
+        {
+          command: "setShape",
+          title: "Set Shape",
+          handler: (shape) => {
+            if (this.shape === shape) return true;
+            this.shape = shape;
+            this.updateDieline();
+            return true;
           }
-        }
-      },
-      setBleed: {
-        execute: (editor, bleed) => {
-          if (this.options.offset === bleed) return true;
-          this.options.offset = bleed;
-          this.updateDieline(editor);
-          return true;
         },
-        schema: {
-          bleed: {
-            type: "number",
-            label: "Bleed",
-            min: -100,
-            max: 100,
-            required: true
+        {
+          command: "setBleed",
+          title: "Set Bleed",
+          handler: (bleed) => {
+            if (this.offset === bleed) return true;
+            this.offset = bleed;
+            this.updateDieline();
+            return true;
+          }
+        },
+        {
+          command: "setHoles",
+          title: "Set Holes",
+          handler: (holes) => {
+            this.holes = holes;
+            this.updateDieline(false);
+            return true;
+          }
+        },
+        {
+          command: "getGeometry",
+          title: "Get Geometry",
+          handler: () => {
+            return this.getGeometry();
+          }
+        },
+        {
+          command: "exportCutImage",
+          title: "Export Cut Image",
+          handler: () => {
+            return this.exportCutImage();
+          }
+        },
+        {
+          command: "detectEdge",
+          title: "Detect Edge from Image",
+          handler: async (imageUrl, options) => {
+            try {
+              const pathData = await ImageTracer.trace(imageUrl, options);
+              const bounds = getPathBounds(pathData);
+              const currentMax = Math.max(this.width, this.height);
+              const scale = currentMax / Math.max(bounds.width, bounds.height);
+              this.width = bounds.width * scale;
+              this.height = bounds.height * scale;
+              this.shape = "custom";
+              this.pathData = pathData;
+              this.updateDieline();
+              return pathData;
+            } catch (e) {
+              console.error("Edge detection failed", e);
+              throw e;
+            }
           }
         }
-      },
-      exportCutImage: {
-        execute: (editor) => {
-          var _a, _b, _c, _d;
-          const { shape, width, height, radius, position } = this.options;
-          const canvasW = editor.canvas.width || 800;
-          const canvasH = editor.canvas.height || 600;
-          const cx = (_a = position == null ? void 0 : position.x) != null ? _a : canvasW / 2;
-          const cy = (_b = position == null ? void 0 : position.y) != null ? _b : canvasH / 2;
-          const holeTool = editor.getExtension("HoleTool");
-          const holes = holeTool ? holeTool.options.holes || [] : [];
-          const innerRadius = holeTool ? holeTool.options.innerRadius || 15 : 15;
-          const outerRadius = holeTool ? holeTool.options.outerRadius || 25 : 25;
-          const holeData = holes.map((h) => ({
-            x: h.x,
-            y: h.y,
-            innerRadius,
-            outerRadius
-          }));
-          const pathData = generateDielinePath({
-            shape,
-            width,
-            height,
-            radius,
-            x: cx,
-            y: cy,
-            holes: holeData
-          });
-          const clipPath = new import_core2.Path(pathData, {
-            left: 0,
-            top: 0,
-            originX: "left",
-            originY: "top",
-            absolutePositioned: true
-          });
-          const layer = this.getLayer(editor, "dieline-overlay");
-          const wasVisible = (_c = layer == null ? void 0 : layer.visible) != null ? _c : true;
-          if (layer) layer.visible = false;
-          const holeMarkers = editor.canvas.getObjects().filter((o) => {
-            var _a2;
-            return ((_a2 = o.data) == null ? void 0 : _a2.type) === "hole-marker";
-          });
-          holeMarkers.forEach((o) => o.visible = false);
-          const rulerLayer = editor.canvas.getObjects().find((obj) => {
-            var _a2;
-            return ((_a2 = obj.data) == null ? void 0 : _a2.id) === "ruler-overlay";
-          });
-          const rulerWasVisible = (_d = rulerLayer == null ? void 0 : rulerLayer.visible) != null ? _d : true;
-          if (rulerLayer) rulerLayer.visible = false;
-          const originalClip = editor.canvas.clipPath;
-          editor.canvas.clipPath = clipPath;
-          const bbox = clipPath.getBoundingRect();
-          const holeDataRelative = holes.map((h) => ({
-            x: h.x - bbox.left,
-            y: h.y - bbox.top,
-            innerRadius,
-            outerRadius
-          }));
-          const clipPathCorrected = new import_core2.Path(pathData, {
-            absolutePositioned: true,
-            left: 0,
-            top: 0
-          });
-          const tempPath = new import_core2.Path(pathData);
-          const tempBounds = tempPath.getBoundingRect();
-          clipPathCorrected.set({
-            left: tempBounds.left,
-            top: tempBounds.top,
-            originX: "left",
-            originY: "top"
-          });
-          editor.canvas.clipPath = clipPathCorrected;
-          const exportBbox = clipPathCorrected.getBoundingRect();
-          const dataURL = editor.canvas.toDataURL({
-            format: "png",
-            multiplier: 2,
-            left: exportBbox.left,
-            top: exportBbox.top,
-            width: exportBbox.width,
-            height: exportBbox.height
-          });
-          editor.canvas.clipPath = originalClip;
-          if (layer) layer.visible = wasVisible;
-          if (rulerLayer) rulerLayer.visible = rulerWasVisible;
-          holeMarkers.forEach((o) => o.visible = true);
-          editor.canvas.requestRenderAll();
-          return dataURL;
-        }
-      }
+      ]
     };
   }
-  onMount(editor) {
-    this.createLayer(editor);
-    this.updateDieline(editor);
-  }
-  onUnmount(editor) {
-    this.destroyLayer(editor);
-  }
-  onUpdate(editor, state) {
-    this.updateDieline(editor);
+  getLayer() {
+    var _a;
+    return (_a = this.canvasService) == null ? void 0 : _a.getLayer("dieline-overlay");
   }
-  onDestroy(editor) {
-    this.destroyLayer(editor);
-  }
-  getLayer(editor, id) {
-    return editor.canvas.getObjects().find((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.id) === id;
+  createLayer() {
+    if (!this.canvasService) return;
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
+    const layer = this.canvasService.createLayer("dieline-overlay", {
+      width,
+      height,
+      selectable: false,
+      evented: false
     });
-  }
-  createLayer(editor) {
-    let layer = this.getLayer(editor, "dieline-overlay");
-    if (!layer) {
-      const width = editor.canvas.width || 800;
-      const height = editor.canvas.height || 600;
-      layer = new import_core2.PooderLayer([], {
-        width,
-        height,
-        selectable: false,
-        evented: false,
-        data: { id: "dieline-overlay" }
-      });
-      editor.canvas.add(layer);
+    this.canvasService.canvas.bringObjectToFront(layer);
+    const userLayer = this.canvasService.getLayer("user");
+    if (userLayer) {
+      const userIndex = this.canvasService.canvas.getObjects().indexOf(userLayer);
+      this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
     }
-    editor.canvas.bringObjectToFront(layer);
   }
-  destroyLayer(editor) {
-    const layer = this.getLayer(editor, "dieline-overlay");
+  destroyLayer() {
+    if (!this.canvasService) return;
+    const layer = this.getLayer();
     if (layer) {
-      editor.canvas.remove(layer);
+      this.canvasService.canvas.remove(layer);
     }
   }
   createHatchPattern(color = "rgba(0, 0, 0, 0.3)") {
@@ -614,10 +976,12 @@ var DielineTool = class {
       ctx.lineTo(size, 0);
       ctx.stroke();
     }
-    return new import_core2.Pattern({ source: canvas, repetition: "repeat" });
+    return new import_fabric2.Pattern({ source: canvas, repetition: "repeat" });
   }
-  updateDieline(editor) {
-    var _a, _b;
+  updateDieline(emitEvent = true) {
+    if (!this.canvasService) return;
+    const layer = this.getLayer();
+    if (!layer) return;
     const {
       shape,
       radius,
@@ -627,33 +991,31 @@ var DielineTool = class {
       outsideColor,
       position,
       borderLength,
-      showBleedLines
-    } = this.options;
-    let { width, height } = this.options;
-    const canvasW = editor.canvas.width || 800;
-    const canvasH = editor.canvas.height || 600;
+      showBleedLines,
+      holes
+    } = this;
+    let { width, height } = this;
+    const canvasW = this.canvasService.canvas.width || 800;
+    const canvasH = this.canvasService.canvas.height || 600;
     if (borderLength && borderLength > 0) {
       width = Math.max(0, canvasW - borderLength * 2);
       height = Math.max(0, canvasH - borderLength * 2);
     }
-    const cx = (_a = position == null ? void 0 : position.x) != null ? _a : canvasW / 2;
-    const cy = (_b = position == null ? void 0 : position.y) != null ? _b : canvasH / 2;
-    const layer = this.getLayer(editor, "dieline-overlay");
-    if (!layer) return;
+    const normalizedPos = position != null ? position : { x: 0.5, y: 0.5 };
+    const cx = Coordinate.toAbsolute(normalizedPos.x, canvasW);
+    const cy = Coordinate.toAbsolute(normalizedPos.y, canvasH);
     layer.remove(...layer.getObjects());
-    const holeTool = editor.getExtension("HoleTool");
-    if (holeTool && typeof holeTool.enforceConstraints === "function") {
-      holeTool.enforceConstraints(editor);
-    }
-    const holes = holeTool ? holeTool.options.holes || [] : [];
-    const innerRadius = holeTool ? holeTool.options.innerRadius || 15 : 15;
-    const outerRadius = holeTool ? holeTool.options.outerRadius || 25 : 25;
-    const holeData = holes.map((h) => ({
-      x: h.x,
-      y: h.y,
-      innerRadius,
-      outerRadius
-    }));
+    const absoluteHoles = (holes || []).map((h) => {
+      const p = Coordinate.denormalizePoint(
+        { x: h.x, y: h.y },
+        { width: canvasW, height: canvasH }
+      );
+      return {
+        ...h,
+        x: p.x,
+        y: p.y
+      };
+    });
     const cutW = Math.max(0, width + offset * 2);
     const cutH = Math.max(0, height + offset * 2);
     const cutR = radius === 0 ? 0 : Math.max(0, radius + offset);
@@ -666,9 +1028,10 @@ var DielineTool = class {
       radius: cutR,
       x: cx,
       y: cy,
-      holes: holeData
+      holes: absoluteHoles,
+      pathData: this.pathData
     });
-    const mask = new import_core2.Path(maskPathData, {
+    const mask = new import_fabric2.Path(maskPathData, {
       fill: outsideColor,
       stroke: null,
       selectable: false,
@@ -687,9 +1050,10 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: holeData
+        holes: absoluteHoles,
+        pathData: this.pathData
       });
-      const insideObj = new import_core2.Path(productPathData, {
+      const insideObj = new import_fabric2.Path(productPathData, {
         fill: insideColor,
         stroke: null,
         selectable: false,
@@ -709,14 +1073,15 @@ var DielineTool = class {
           radius,
           x: cx,
           y: cy,
-          holes: holeData
+          holes: absoluteHoles,
+          pathData: this.pathData
         },
         offset
       );
       if (showBleedLines !== false) {
         const pattern = this.createHatchPattern("red");
         if (pattern) {
-          const bleedObj = new import_core2.Path(bleedPathData, {
+          const bleedObj = new import_fabric2.Path(bleedPathData, {
             fill: pattern,
             stroke: null,
             selectable: false,
@@ -735,9 +1100,10 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        holes: holeData
+        holes: absoluteHoles,
+        pathData: this.pathData
       });
-      const offsetBorderObj = new import_core2.Path(offsetPathData, {
+      const offsetBorderObj = new import_fabric2.Path(offsetPathData, {
         fill: null,
         stroke: "#666",
         // Grey
@@ -758,9 +1124,11 @@ var DielineTool = class {
       radius,
       x: cx,
       y: cy,
-      holes: holeData
+      holes: absoluteHoles,
+      // FIX: Use absoluteHoles instead of holes
+      pathData: this.pathData
     });
-    const borderObj = new import_core2.Path(borderPathData, {
+    const borderObj = new import_fabric2.Path(borderPathData, {
       fill: "transparent",
       stroke: "red",
       strokeWidth: 1,
@@ -771,104 +1139,236 @@ var DielineTool = class {
       originY: "top"
     });
     layer.add(borderObj);
-    editor.canvas.requestRenderAll();
+    const userLayer = this.canvasService.getLayer("user");
+    if (layer && userLayer) {
+      const layerIndex = this.canvasService.canvas.getObjects().indexOf(layer);
+      const userIndex = this.canvasService.canvas.getObjects().indexOf(userLayer);
+      if (layerIndex < userIndex) {
+        this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
+      }
+    } else {
+      this.canvasService.canvas.bringObjectToFront(layer);
+    }
+    const rulerLayer = this.canvasService.getLayer("ruler-overlay");
+    if (rulerLayer) {
+      this.canvasService.canvas.bringObjectToFront(rulerLayer);
+    }
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
+    if (emitEvent && this.context) {
+      const geometry = this.getGeometry();
+      if (geometry) {
+        this.context.eventBus.emit("dieline:geometry:change", geometry);
+      }
+    }
   }
-  getGeometry(editor) {
+  getGeometry() {
     var _a, _b;
-    const { shape, width, height, radius, position, borderLength } = this.options;
-    const canvasW = editor.canvas.width || 800;
-    const canvasH = editor.canvas.height || 600;
+    if (!this.canvasService) return null;
+    const { shape, width, height, radius, position, borderLength, offset } = this;
+    const canvasW = this.canvasService.canvas.width || 800;
+    const canvasH = this.canvasService.canvas.height || 600;
     let visualWidth = width;
     let visualHeight = height;
     if (borderLength && borderLength > 0) {
       visualWidth = Math.max(0, canvasW - borderLength * 2);
       visualHeight = Math.max(0, canvasH - borderLength * 2);
     }
-    const cx = (_a = position == null ? void 0 : position.x) != null ? _a : canvasW / 2;
-    const cy = (_b = position == null ? void 0 : position.y) != null ? _b : canvasH / 2;
+    const cx = Coordinate.toAbsolute((_a = position == null ? void 0 : position.x) != null ? _a : 0.5, canvasW);
+    const cy = Coordinate.toAbsolute((_b = position == null ? void 0 : position.y) != null ? _b : 0.5, canvasH);
     return {
       shape,
       x: cx,
       y: cy,
       width: visualWidth,
       height: visualHeight,
-      radius
+      radius,
+      offset,
+      borderLength,
+      pathData: this.pathData
     };
   }
+  exportCutImage() {
+    var _a, _b, _c, _d;
+    if (!this.canvasService) return null;
+    const canvas = this.canvasService.canvas;
+    const { shape, width, height, radius, position, holes } = this;
+    const canvasW = canvas.width || 800;
+    const canvasH = canvas.height || 600;
+    const cx = Coordinate.toAbsolute((_a = position == null ? void 0 : position.x) != null ? _a : 0.5, canvasW);
+    const cy = Coordinate.toAbsolute((_b = position == null ? void 0 : position.y) != null ? _b : 0.5, canvasH);
+    const absoluteHoles = (holes || []).map((h) => {
+      const p = Coordinate.denormalizePoint(
+        { x: h.x, y: h.y },
+        { width: canvasW, height: canvasH }
+      );
+      return {
+        ...h,
+        x: p.x,
+        y: p.y
+      };
+    });
+    const pathData = generateDielinePath({
+      shape,
+      width,
+      height,
+      radius,
+      x: cx,
+      y: cy,
+      holes: absoluteHoles,
+      pathData: this.pathData
+    });
+    const clipPath = new import_fabric2.Path(pathData, {
+      left: 0,
+      top: 0,
+      originX: "left",
+      originY: "top",
+      absolutePositioned: true
+    });
+    const layer = this.getLayer();
+    const wasVisible = (_c = layer == null ? void 0 : layer.visible) != null ? _c : true;
+    if (layer) layer.visible = false;
+    const holeMarkers = canvas.getObjects().filter((o) => {
+      var _a2;
+      return ((_a2 = o.data) == null ? void 0 : _a2.type) === "hole-marker";
+    });
+    holeMarkers.forEach((o) => o.visible = false);
+    const rulerLayer = canvas.getObjects().find((obj) => {
+      var _a2;
+      return ((_a2 = obj.data) == null ? void 0 : _a2.id) === "ruler-overlay";
+    });
+    const rulerWasVisible = (_d = rulerLayer == null ? void 0 : rulerLayer.visible) != null ? _d : true;
+    if (rulerLayer) rulerLayer.visible = false;
+    const originalClip = canvas.clipPath;
+    canvas.clipPath = clipPath;
+    const bbox = clipPath.getBoundingRect();
+    const clipPathCorrected = new import_fabric2.Path(pathData, {
+      absolutePositioned: true,
+      left: 0,
+      top: 0
+    });
+    const tempPath = new import_fabric2.Path(pathData);
+    const tempBounds = tempPath.getBoundingRect();
+    clipPathCorrected.set({
+      left: tempBounds.left,
+      top: tempBounds.top,
+      originX: "left",
+      originY: "top"
+    });
+    canvas.clipPath = clipPathCorrected;
+    const exportBbox = clipPathCorrected.getBoundingRect();
+    const dataURL = canvas.toDataURL({
+      format: "png",
+      multiplier: 2,
+      left: exportBbox.left,
+      top: exportBbox.top,
+      width: exportBbox.width,
+      height: exportBbox.height
+    });
+    canvas.clipPath = originalClip;
+    if (layer) layer.visible = wasVisible;
+    if (rulerLayer) rulerLayer.visible = rulerWasVisible;
+    holeMarkers.forEach((o) => o.visible = true);
+    canvas.requestRenderAll();
+    return dataURL;
+  }
 };
 
 // src/film.ts
 var import_core3 = require("@pooder/core");
+var import_fabric3 = require("fabric");
 var FilmTool = class {
-  constructor() {
-    this.name = "FilmTool";
-    this.options = {
-      url: "",
-      opacity: 0.5
+  constructor(options) {
+    this.id = "pooder.kit.film";
+    this.metadata = {
+      name: "FilmTool"
     };
-    this.schema = {
-      url: {
-        type: "string",
-        label: "Film Image URL"
-      },
-      opacity: {
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 0.1,
-        label: "Opacity"
-      }
-    };
-    this.commands = {
-      setFilmImage: {
-        execute: (editor, url, opacity) => {
-          if (this.options.url === url && this.options.opacity === opacity)
-            return true;
-          this.options.url = url;
-          this.options.opacity = opacity;
-          this.updateFilm(editor, this.options);
-          return true;
-        },
-        schema: {
-          url: {
-            type: "string",
-            label: "Image URL",
-            required: true
-          },
-          opacity: {
-            type: "number",
-            label: "Opacity",
-            min: 0,
-            max: 1,
-            required: true
+    this.url = "";
+    this.opacity = 0.5;
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+  activate(context) {
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for FilmTool");
+      return;
+    }
+    const configService = context.services.get("ConfigurationService");
+    if (configService) {
+      this.url = configService.get("film.url", this.url);
+      this.opacity = configService.get("film.opacity", this.opacity);
+      configService.onAnyChange((e) => {
+        if (e.key.startsWith("film.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[FilmTool] Config change detected: ${e.key} -> ${e.value}`
+          );
+          if (prop && prop in this) {
+            this[prop] = e.value;
+            this.updateFilm();
           }
         }
+      });
+    }
+    this.initLayer();
+    this.updateFilm();
+  }
+  deactivate(context) {
+    if (this.canvasService) {
+      const layer = this.canvasService.getLayer("overlay");
+      if (layer) {
+        const img = this.canvasService.getObject("film-image", "overlay");
+        if (img) {
+          layer.remove(img);
+          this.canvasService.requestRenderAll();
+        }
       }
-    };
-  }
-  onMount(editor) {
-    this.initLayer(editor);
-    this.updateFilm(editor, this.options);
-  }
-  onUnmount(editor) {
-    const layer = editor.getLayer("overlay");
-    if (layer) {
-      const img = editor.getObject("film-image", "overlay");
-      if (img) {
-        layer.remove(img);
-        editor.canvas.requestRenderAll();
-      }
+      this.canvasService = void 0;
     }
   }
-  onUpdate(editor, state) {
-    this.updateFilm(editor, this.options);
+  contribute() {
+    return {
+      [import_core3.ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "film.url",
+          type: "string",
+          label: "Film Image URL",
+          default: ""
+        },
+        {
+          id: "film.opacity",
+          type: "number",
+          label: "Opacity",
+          min: 0,
+          max: 1,
+          step: 0.1,
+          default: 0.5
+        }
+      ],
+      [import_core3.ContributionPointIds.COMMANDS]: [
+        {
+          command: "setFilmImage",
+          title: "Set Film Image",
+          handler: (url, opacity) => {
+            if (this.url === url && this.opacity === opacity) return true;
+            this.url = url;
+            this.opacity = opacity;
+            this.updateFilm();
+            return true;
+          }
+        }
+      ]
+    };
   }
-  initLayer(editor) {
-    let overlayLayer = editor.getLayer("overlay");
+  initLayer() {
+    if (!this.canvasService) return;
+    let overlayLayer = this.canvasService.getLayer("overlay");
     if (!overlayLayer) {
-      const width = editor.state.width;
-      const height = editor.state.height;
-      const layer = new import_core3.PooderLayer([], {
+      const width = this.canvasService.canvas.width || 800;
+      const height = this.canvasService.canvas.height || 600;
+      const layer = this.canvasService.createLayer("overlay", {
         width,
         height,
         left: 0,
@@ -878,33 +1378,30 @@ var FilmTool = class {
         selectable: false,
         evented: false,
         subTargetCheck: false,
-        interactive: false,
-        data: {
-          id: "overlay"
-        }
+        interactive: false
       });
-      editor.canvas.add(layer);
-      editor.canvas.bringObjectToFront(layer);
+      this.canvasService.canvas.bringObjectToFront(layer);
     }
   }
-  async updateFilm(editor, options) {
-    const layer = editor.getLayer("overlay");
+  async updateFilm() {
+    if (!this.canvasService) return;
+    const layer = this.canvasService.getLayer("overlay");
     if (!layer) {
       console.warn("[FilmTool] Overlay layer not found");
       return;
     }
-    const { url, opacity } = options;
+    const { url, opacity } = this;
     if (!url) {
-      const img2 = editor.getObject("film-image", "overlay");
+      const img2 = this.canvasService.getObject("film-image", "overlay");
       if (img2) {
         layer.remove(img2);
-        editor.canvas.requestRenderAll();
+        this.canvasService.requestRenderAll();
       }
       return;
     }
-    const width = editor.state.width;
-    const height = editor.state.height;
-    let img = editor.getObject("film-image", "overlay");
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
+    let img = this.canvasService.getObject("film-image", "overlay");
     try {
       if (img) {
         if (img.getSrc() !== url) {
@@ -912,7 +1409,7 @@ var FilmTool = class {
         }
         img.set({ opacity });
       } else {
-        img = await import_core3.Image.fromURL(url, { crossOrigin: "anonymous" });
+        img = await import_fabric3.FabricImage.fromURL(url, { crossOrigin: "anonymous" });
         img.scaleToWidth(width);
         if (img.getScaledHeight() < height) img.scaleToHeight(height);
         img.set({
@@ -927,204 +1424,263 @@ var FilmTool = class {
         });
         layer.add(img);
       }
-      editor.canvas.requestRenderAll();
+      this.canvasService.requestRenderAll();
     } catch (error) {
       console.error("[FilmTool] Failed to load film image", url, error);
     }
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
   }
 };
 
 // src/hole.ts
 var import_core4 = require("@pooder/core");
+var import_fabric4 = require("fabric");
 var HoleTool = class {
-  constructor() {
-    this.name = "HoleTool";
-    this.options = {
-      innerRadius: 15,
-      outerRadius: 25,
-      style: "solid",
-      holes: [],
-      constraintTarget: "bleed"
-    };
-    this.schema = {
-      innerRadius: {
-        type: "number",
-        min: 1,
-        max: 100,
-        label: "Inner Radius"
-      },
-      outerRadius: {
-        type: "number",
-        min: 1,
-        max: 100,
-        label: "Outer Radius"
-      },
-      style: {
-        type: "select",
-        options: ["solid", "dashed"],
-        label: "Line Style"
-      },
-      constraintTarget: {
-        type: "select",
-        options: ["original", "bleed"],
-        label: "Constraint Target"
-      },
-      holes: {
-        type: "json",
-        label: "Holes"
-      }
+  constructor(options) {
+    this.id = "pooder.kit.hole";
+    this.metadata = {
+      name: "HoleTool"
     };
+    this.innerRadius = 15;
+    this.outerRadius = 25;
+    this.style = "solid";
+    this.holes = [];
+    this.constraintTarget = "bleed";
+    this.isUpdatingConfig = false;
     this.handleMoving = null;
     this.handleModified = null;
-    this.commands = {
-      reset: {
-        execute: (editor) => {
-          let defaultPos = { x: editor.canvas.width / 2, y: 50 };
-          const g = this.getDielineGeometry(editor);
-          if (g) {
-            const topCenter = { x: g.x, y: g.y - g.height / 2 };
-            defaultPos = getNearestPointOnDieline(topCenter, {
-              ...g,
-              holes: []
-            });
+    this.handleDielineChange = null;
+    // Cache geometry to enforce constraints during drag
+    this.currentGeometry = null;
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+  activate(context) {
+    this.context = context;
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for HoleTool");
+      return;
+    }
+    const configService = context.services.get(
+      "ConfigurationService"
+    );
+    if (configService) {
+      this.innerRadius = configService.get(
+        "hole.innerRadius",
+        this.innerRadius
+      );
+      this.outerRadius = configService.get(
+        "hole.outerRadius",
+        this.outerRadius
+      );
+      this.style = configService.get("hole.style", this.style);
+      this.constraintTarget = configService.get(
+        "hole.constraintTarget",
+        this.constraintTarget
+      );
+      const dielineHoles = configService.get("dieline.holes", []);
+      if (this.canvasService) {
+        const { width, height } = this.canvasService.canvas;
+        this.holes = dielineHoles.map((h) => {
+          const p = Coordinate.denormalizePoint(h, {
+            width: width || 800,
+            height: height || 600
+          });
+          return { x: p.x, y: p.y };
+        });
+      }
+      configService.onAnyChange((e) => {
+        if (this.isUpdatingConfig) return;
+        if (e.key.startsWith("hole.")) {
+          const prop = e.key.split(".")[1];
+          if (prop && prop in this) {
+            this[prop] = e.value;
+            this.redraw();
+            this.syncHolesToDieline();
           }
-          this.options = {
-            innerRadius: 15,
-            outerRadius: 25,
-            style: "solid",
-            holes: [defaultPos]
-          };
-          this.redraw(editor);
-          const dielineTool = editor.getExtension("DielineTool");
-          if (dielineTool && dielineTool.updateDieline) {
-            dielineTool.updateDieline(editor);
+        }
+        if (e.key === "dieline.holes") {
+          const holes = e.value || [];
+          if (this.canvasService) {
+            const { width, height } = this.canvasService.canvas;
+            this.holes = holes.map((h) => {
+              const p = Coordinate.denormalizePoint(h, {
+                width: width || 800,
+                height: height || 600
+              });
+              return { x: p.x, y: p.y };
+            });
+            this.redraw();
           }
-          return true;
         }
-      },
-      addHole: {
-        execute: (editor, x, y) => {
-          if (!this.options.holes) this.options.holes = [];
-          this.options.holes.push({ x, y });
-          this.redraw(editor);
-          const dielineTool = editor.getExtension("DielineTool");
-          if (dielineTool && dielineTool.updateDieline) {
-            dielineTool.updateDieline(editor);
+      });
+    }
+    this.setup();
+  }
+  deactivate(context) {
+    this.teardown();
+    this.canvasService = void 0;
+    this.context = void 0;
+  }
+  contribute() {
+    return {
+      [import_core4.ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "hole.innerRadius",
+          type: "number",
+          label: "Inner Radius",
+          min: 1,
+          max: 100,
+          default: 15
+        },
+        {
+          id: "hole.outerRadius",
+          type: "number",
+          label: "Outer Radius",
+          min: 1,
+          max: 100,
+          default: 25
+        },
+        {
+          id: "hole.style",
+          type: "select",
+          label: "Line Style",
+          options: ["solid", "dashed"],
+          default: "solid"
+        },
+        {
+          id: "hole.constraintTarget",
+          type: "select",
+          label: "Constraint Target",
+          options: ["original", "bleed"],
+          default: "bleed"
+        }
+      ],
+      [import_core4.ContributionPointIds.COMMANDS]: [
+        {
+          command: "resetHoles",
+          title: "Reset Holes",
+          handler: () => {
+            if (!this.canvasService) return false;
+            let defaultPos = { x: this.canvasService.canvas.width / 2, y: 50 };
+            if (this.currentGeometry) {
+              const g = this.currentGeometry;
+              const topCenter = { x: g.x, y: g.y - g.height / 2 };
+              defaultPos = getNearestPointOnDieline(topCenter, {
+                ...g,
+                holes: []
+              });
+            }
+            this.innerRadius = 15;
+            this.outerRadius = 25;
+            this.style = "solid";
+            this.holes = [defaultPos];
+            this.redraw();
+            this.syncHolesToDieline();
+            return true;
           }
-          return true;
         },
-        schema: {
-          x: {
-            type: "number",
-            label: "X Position",
-            required: true
-          },
-          y: {
-            type: "number",
-            label: "Y Position",
-            required: true
+        {
+          command: "addHole",
+          title: "Add Hole",
+          handler: (x, y) => {
+            if (!this.holes) this.holes = [];
+            this.holes.push({ x, y });
+            this.redraw();
+            this.syncHolesToDieline();
+            return true;
           }
-        }
-      },
-      clearHoles: {
-        execute: (editor) => {
-          this.options.holes = [];
-          this.redraw(editor);
-          const dielineTool = editor.getExtension("DielineTool");
-          if (dielineTool && dielineTool.updateDieline) {
-            dielineTool.updateDieline(editor);
+        },
+        {
+          command: "clearHoles",
+          title: "Clear Holes",
+          handler: () => {
+            this.holes = [];
+            this.redraw();
+            this.syncHolesToDieline();
+            return true;
           }
-          return true;
         }
-      }
+      ]
     };
   }
-  onMount(editor) {
-    this.setup(editor);
-  }
-  onUnmount(editor) {
-    this.teardown(editor);
-  }
-  onDestroy(editor) {
-    this.teardown(editor);
-  }
-  getDielineGeometry(editor) {
-    const dielineTool = editor.getExtension("DielineTool");
-    if (!dielineTool) return null;
-    const geometry = dielineTool.getGeometry(editor);
-    if (!geometry) return null;
-    const offset = this.options.constraintTarget === "original" ? 0 : dielineTool.options.offset || 0;
-    return {
-      ...geometry,
-      width: Math.max(0, geometry.width + offset * 2),
-      height: Math.max(0, geometry.height + offset * 2),
-      radius: Math.max(0, geometry.radius + offset)
-    };
-  }
-  enforceConstraints(editor) {
-    const geometry = this.getDielineGeometry(editor);
-    if (!geometry) return;
-    const objects = editor.canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
-    });
-    let changed = false;
-    objects.sort(
-      (a, b) => {
-        var _a, _b, _c, _d;
-        return ((_b = (_a = a.data) == null ? void 0 : _a.index) != null ? _b : 0) - ((_d = (_c = b.data) == null ? void 0 : _c.index) != null ? _d : 0);
-      }
-    );
-    const newHoles = [];
-    objects.forEach((obj) => {
-      const currentPos = new import_core4.Point(obj.left, obj.top);
-      const newPos = this.calculateConstrainedPosition(currentPos, geometry);
-      if (currentPos.distanceFrom(newPos) > 0.1) {
-        obj.set({
-          left: newPos.x,
-          top: newPos.y
-        });
-        obj.setCoords();
-        changed = true;
+  setup() {
+    if (!this.canvasService || !this.context) return;
+    const canvas = this.canvasService.canvas;
+    if (!this.handleDielineChange) {
+      this.handleDielineChange = (geometry) => {
+        this.currentGeometry = geometry;
+        const changed = this.enforceConstraints();
+        if (changed) {
+          this.syncHolesToDieline();
+        }
+      };
+      this.context.eventBus.on(
+        "dieline:geometry:change",
+        this.handleDielineChange
+      );
+    }
+    const commandService = this.context.services.get("CommandService");
+    if (commandService) {
+      try {
+        const geometry = commandService.executeCommand("getGeometry");
+        if (geometry) {
+          Promise.resolve(geometry).then((g) => {
+            if (g) {
+              this.currentGeometry = g;
+              this.enforceConstraints();
+              this.initializeHoles();
+            }
+          });
+        }
+      } catch (e) {
       }
-      newHoles.push({ x: obj.left, y: obj.top });
-    });
-    if (changed) {
-      this.options.holes = newHoles;
-      editor.canvas.requestRenderAll();
     }
-  }
-  setup(editor) {
     if (!this.handleMoving) {
       this.handleMoving = (e) => {
         var _a;
         const target = e.target;
         if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "hole-marker") return;
-        const geometry = this.getDielineGeometry(editor);
-        if (!geometry) return;
-        const p = new import_core4.Point(target.left, target.top);
-        const newPos = this.calculateConstrainedPosition(p, geometry);
+        if (!this.currentGeometry) return;
+        const effectiveOffset = this.constraintTarget === "original" ? 0 : this.currentGeometry.offset;
+        const constraintGeometry = {
+          ...this.currentGeometry,
+          width: Math.max(0, this.currentGeometry.width + effectiveOffset * 2),
+          height: Math.max(
+            0,
+            this.currentGeometry.height + effectiveOffset * 2
+          ),
+          radius: Math.max(0, this.currentGeometry.radius + effectiveOffset)
+        };
+        const p = new import_fabric4.Point(target.left, target.top);
+        const newPos = this.calculateConstrainedPosition(p, constraintGeometry);
         target.set({
           left: newPos.x,
           top: newPos.y
         });
       };
-      editor.canvas.on("object:moving", this.handleMoving);
+      canvas.on("object:moving", this.handleMoving);
     }
     if (!this.handleModified) {
       this.handleModified = (e) => {
         var _a;
         const target = e.target;
         if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "hole-marker") return;
-        this.syncHolesFromCanvas(editor);
+        this.syncHolesFromCanvas();
       };
-      editor.canvas.on("object:modified", this.handleModified);
+      canvas.on("object:modified", this.handleModified);
     }
-    const opts = this.options;
-    if (!opts.holes || opts.holes.length === 0) {
-      let defaultPos = { x: editor.canvas.width / 2, y: 50 };
-      const g = this.getDielineGeometry(editor);
-      if (g) {
+    this.initializeHoles();
+  }
+  initializeHoles() {
+    if (!this.canvasService) return;
+    if (!this.holes || this.holes.length === 0) {
+      let defaultPos = { x: this.canvasService.canvas.width / 2, y: 50 };
+      if (this.currentGeometry) {
+        const g = this.currentGeometry;
         const topCenter = { x: g.x, y: g.y - g.height / 2 };
         const snapped = getNearestPointOnDieline(topCenter, {
           ...g,
@@ -1132,65 +1688,97 @@ var HoleTool = class {
         });
         defaultPos = snapped;
       }
-      opts.holes = [defaultPos];
-    }
-    this.options = { ...opts };
-    this.redraw(editor);
-    const dielineTool = editor.getExtension("DielineTool");
-    if (dielineTool && dielineTool.updateDieline) {
-      dielineTool.updateDieline(editor);
+      this.holes = [defaultPos];
     }
+    this.redraw();
+    this.syncHolesToDieline();
   }
-  teardown(editor) {
+  teardown() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
     if (this.handleMoving) {
-      editor.canvas.off("object:moving", this.handleMoving);
+      canvas.off("object:moving", this.handleMoving);
       this.handleMoving = null;
     }
     if (this.handleModified) {
-      editor.canvas.off("object:modified", this.handleModified);
+      canvas.off("object:modified", this.handleModified);
       this.handleModified = null;
     }
-    const objects = editor.canvas.getObjects().filter((obj) => {
+    if (this.handleDielineChange && this.context) {
+      this.context.eventBus.off(
+        "dieline:geometry:change",
+        this.handleDielineChange
+      );
+      this.handleDielineChange = null;
+    }
+    const objects = canvas.getObjects().filter((obj) => {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
-    objects.forEach((obj) => editor.canvas.remove(obj));
-    editor.canvas.requestRenderAll();
-  }
-  onUpdate(editor, state) {
-    this.enforceConstraints(editor);
-    this.redraw(editor);
-    const dielineTool = editor.getExtension("DielineTool");
-    if (dielineTool && dielineTool.updateDieline) {
-      dielineTool.updateDieline(editor);
+    objects.forEach((obj) => canvas.remove(obj));
+    if (this.context) {
+      const commandService = this.context.services.get("CommandService");
+      if (commandService) {
+        try {
+          commandService.executeCommand("setHoles", []);
+        } catch (e) {
+        }
+      }
     }
+    this.canvasService.requestRenderAll();
   }
-  syncHolesFromCanvas(editor) {
-    const objects = editor.canvas.getObjects().filter((obj) => {
+  syncHolesFromCanvas() {
+    if (!this.canvasService) return;
+    const objects = this.canvasService.canvas.getObjects().filter((obj) => {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
     const holes = objects.map((obj) => ({ x: obj.left, y: obj.top }));
-    this.options.holes = holes;
-    const dielineTool = editor.getExtension("DielineTool");
-    if (dielineTool && dielineTool.updateDieline) {
-      dielineTool.updateDieline(editor);
+    this.holes = holes;
+    this.syncHolesToDieline();
+  }
+  syncHolesToDieline() {
+    if (!this.context || !this.canvasService) return;
+    const { holes, innerRadius, outerRadius } = this;
+    const currentHoles = holes || [];
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
+    const configService = this.context.services.get(
+      "ConfigurationService"
+    );
+    if (configService) {
+      this.isUpdatingConfig = true;
+      try {
+        const normalizedHoles = currentHoles.map((h) => {
+          const p = Coordinate.normalizePoint(h, { width, height });
+          return {
+            x: p.x,
+            y: p.y,
+            innerRadius,
+            outerRadius
+          };
+        });
+        configService.update("dieline.holes", normalizedHoles);
+      } finally {
+        this.isUpdatingConfig = false;
+      }
     }
   }
-  redraw(editor) {
-    const canvas = editor.canvas;
+  redraw() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
     const existing = canvas.getObjects().filter((obj) => {
       var _a;
       return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
     });
     existing.forEach((obj) => canvas.remove(obj));
-    const { innerRadius, outerRadius, style, holes } = this.options;
+    const { innerRadius, outerRadius, style, holes } = this;
     if (!holes || holes.length === 0) {
-      canvas.requestRenderAll();
+      this.canvasService.requestRenderAll();
       return;
     }
     holes.forEach((hole, index) => {
-      const innerCircle = new import_core4.Circle({
+      const innerCircle = new import_fabric4.Circle({
         radius: innerRadius,
         fill: "transparent",
         stroke: "red",
@@ -1198,7 +1786,7 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const outerCircle = new import_core4.Circle({
+      const outerCircle = new import_fabric4.Circle({
         radius: outerRadius,
         fill: "transparent",
         stroke: "#666",
@@ -1207,7 +1795,7 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const holeGroup = new import_core4.Group([outerCircle, innerCircle], {
+      const holeGroup = new import_fabric4.Group([outerCircle, innerCircle], {
         left: hole.x,
         top: hole.y,
         originX: "center",
@@ -1244,7 +1832,68 @@ var HoleTool = class {
       canvas.add(holeGroup);
       canvas.bringObjectToFront(holeGroup);
     });
-    canvas.requestRenderAll();
+    const markers = canvas.getObjects().filter((o) => {
+      var _a;
+      return ((_a = o.data) == null ? void 0 : _a.type) === "hole-marker";
+    });
+    markers.forEach((m) => canvas.bringObjectToFront(m));
+    this.canvasService.requestRenderAll();
+  }
+  enforceConstraints() {
+    const geometry = this.currentGeometry;
+    if (!geometry || !this.canvasService) {
+      console.log(
+        "[HoleTool] Skipping enforceConstraints: No geometry or canvas service"
+      );
+      return false;
+    }
+    const effectiveOffset = this.constraintTarget === "original" ? 0 : geometry.offset;
+    const constraintGeometry = {
+      ...geometry,
+      width: Math.max(0, geometry.width + effectiveOffset * 2),
+      height: Math.max(0, geometry.height + effectiveOffset * 2),
+      radius: Math.max(0, geometry.radius + effectiveOffset)
+    };
+    const objects = this.canvasService.canvas.getObjects().filter((obj) => {
+      var _a;
+      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
+    });
+    console.log(
+      `[HoleTool] Enforcing constraints on ${objects.length} markers`
+    );
+    let changed = false;
+    objects.sort(
+      (a, b) => {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = a.data) == null ? void 0 : _a.index) != null ? _b : 0) - ((_d = (_c = b.data) == null ? void 0 : _c.index) != null ? _d : 0);
+      }
+    );
+    const newHoles = [];
+    objects.forEach((obj) => {
+      const currentPos = new import_fabric4.Point(obj.left, obj.top);
+      const newPos = this.calculateConstrainedPosition(
+        currentPos,
+        constraintGeometry
+      );
+      if (currentPos.distanceFrom(newPos) > 0.1) {
+        console.log(
+          `[HoleTool] Moving hole from (${currentPos.x}, ${currentPos.y}) to (${newPos.x}, ${newPos.y})`
+        );
+        obj.set({
+          left: newPos.x,
+          top: newPos.y
+        });
+        obj.setCoords();
+        changed = true;
+      }
+      newHoles.push({ x: obj.left, y: obj.top });
+    });
+    if (changed) {
+      this.holes = newHoles;
+      this.canvasService.requestRenderAll();
+      return true;
+    }
+    return false;
   }
   calculateConstrainedPosition(p, g) {
     const options = {
@@ -1256,10 +1905,10 @@ var HoleTool = class {
       { x: p.x, y: p.y },
       options
     );
-    const nearestP = new import_core4.Point(nearest.x, nearest.y);
+    const nearestP = new import_fabric4.Point(nearest.x, nearest.y);
     const dist = p.distanceFrom(nearestP);
     const v = p.subtract(nearestP);
-    const center = new import_core4.Point(g.x, g.y);
+    const center = new import_fabric4.Point(g.x, g.y);
     const centerToNearest = nearestP.subtract(center);
     const distToCenter = p.distanceFrom(center);
     const nearestDistToCenter = nearestP.distanceFrom(center);
@@ -1269,12 +1918,11 @@ var HoleTool = class {
     }
     let clampedDist = signedDist;
     if (signedDist > 0) {
-      clampedDist = Math.min(signedDist, this.options.innerRadius);
+      clampedDist = Math.min(signedDist, this.innerRadius);
     } else {
-      clampedDist = Math.max(signedDist, -this.options.outerRadius);
+      clampedDist = Math.max(signedDist, -this.outerRadius);
     }
     if (dist < 1e-3) return nearestP;
-    const dir = v.scalarDivide(dist);
     const scale = Math.abs(clampedDist) / (dist || 1);
     const offset = v.scalarMultiply(scale);
     return nearestP.add(offset);
@@ -1283,111 +1931,153 @@ var HoleTool = class {
 
 // src/image.ts
 var import_core5 = require("@pooder/core");
+var import_fabric5 = require("fabric");
 var ImageTool = class {
-  constructor() {
-    this.name = "ImageTool";
-    this._loadingUrl = null;
-    this.options = {
-      url: "",
-      opacity: 1
-    };
-    this.schema = {
-      url: {
-        type: "string",
-        label: "Image URL"
-      },
-      opacity: {
-        type: "number",
-        min: 0,
-        max: 1,
-        step: 0.1,
-        label: "Opacity"
-      },
-      width: {
-        type: "number",
-        label: "Width",
-        min: 0,
-        max: 5e3
-      },
-      height: {
-        type: "number",
-        label: "Height",
-        min: 0,
-        max: 5e3
-      },
-      angle: {
-        type: "number",
-        label: "Rotation",
-        min: 0,
-        max: 360
-      },
-      left: {
-        type: "number",
-        label: "Left",
-        min: 0,
-        max: 1e3
-      },
-      top: {
-        type: "number",
-        label: "Top",
-        min: 0,
-        max: 1e3
-      }
-    };
-    this.commands = {
-      setUserImage: {
-        execute: (editor, url, opacity, width, height, angle, left, top) => {
-          if (this.options.url === url && this.options.opacity === opacity && this.options.width === width && this.options.height === height && this.options.angle === angle && this.options.left === left && this.options.top === top)
-            return true;
-          this.options = { url, opacity, width, height, angle, left, top };
-          this.updateImage(editor, this.options);
-          return true;
-        },
-        schema: {
-          url: {
-            type: "string",
-            label: "Image URL",
-            required: true
-          },
-          opacity: {
-            type: "number",
-            label: "Opacity",
-            min: 0,
-            max: 1,
-            required: true
-          },
-          width: { type: "number", label: "Width" },
-          height: { type: "number", label: "Height" },
-          angle: { type: "number", label: "Angle" },
-          left: { type: "number", label: "Left" },
-          top: { type: "number", label: "Top" }
-        }
-      }
+  constructor(options) {
+    this.id = "pooder.kit.image";
+    this.metadata = {
+      name: "ImageTool"
     };
+    this._loadingUrl = null;
+    this.url = "";
+    this.opacity = 1;
+    if (options) {
+      Object.assign(this, options);
+    }
   }
-  onMount(editor) {
-    this.ensureLayer(editor);
-    this.updateImage(editor, this.options);
-  }
-  onUnmount(editor) {
-    const layer = editor.getLayer("user");
-    if (layer) {
-      const userImage = editor.getObject("user-image", "user");
-      if (userImage) {
-        layer.remove(userImage);
-        editor.canvas.requestRenderAll();
+  activate(context) {
+    this.context = context;
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for ImageTool");
+      return;
+    }
+    const configService = context.services.get("ConfigurationService");
+    if (configService) {
+      this.url = configService.get("image.url", this.url);
+      this.opacity = configService.get("image.opacity", this.opacity);
+      this.width = configService.get("image.width", this.width);
+      this.height = configService.get("image.height", this.height);
+      this.angle = configService.get("image.angle", this.angle);
+      this.left = configService.get("image.left", this.left);
+      this.top = configService.get("image.top", this.top);
+      configService.onAnyChange((e) => {
+        if (e.key.startsWith("image.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[ImageTool] Config change detected: ${e.key} -> ${e.value}`
+          );
+          if (prop && prop in this) {
+            this[prop] = e.value;
+            this.updateImage();
+          }
+        }
+      });
+    }
+    this.ensureLayer();
+    this.updateImage();
+  }
+  deactivate(context) {
+    if (this.canvasService) {
+      const layer = this.canvasService.getLayer("user");
+      if (layer) {
+        const userImage = this.canvasService.getObject("user-image", "user");
+        if (userImage) {
+          layer.remove(userImage);
+          this.canvasService.requestRenderAll();
+        }
       }
+      this.canvasService = void 0;
+      this.context = void 0;
     }
   }
-  onUpdate(editor, state) {
-    this.updateImage(editor, this.options);
+  contribute() {
+    return {
+      [import_core5.ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "image.url",
+          type: "string",
+          label: "Image URL",
+          default: this.url
+        },
+        {
+          id: "image.opacity",
+          type: "number",
+          label: "Opacity",
+          min: 0,
+          max: 1,
+          step: 0.1,
+          default: this.opacity
+        },
+        {
+          id: "image.width",
+          type: "number",
+          label: "Width",
+          min: 0,
+          max: 5e3,
+          default: this.width
+        },
+        {
+          id: "image.height",
+          type: "number",
+          label: "Height",
+          min: 0,
+          max: 5e3,
+          default: this.height
+        },
+        {
+          id: "image.angle",
+          type: "number",
+          label: "Rotation",
+          min: 0,
+          max: 360,
+          default: this.angle
+        },
+        {
+          id: "image.left",
+          type: "number",
+          label: "Left (Normalized)",
+          min: 0,
+          max: 1,
+          default: this.left
+        },
+        {
+          id: "image.top",
+          type: "number",
+          label: "Top (Normalized)",
+          min: 0,
+          max: 1,
+          default: this.top
+        }
+      ],
+      [import_core5.ContributionPointIds.COMMANDS]: [
+        {
+          command: "setUserImage",
+          title: "Set User Image",
+          handler: (url, opacity, width, height, angle, left, top) => {
+            if (this.url === url && this.opacity === opacity && this.width === width && this.height === height && this.angle === angle && this.left === left && this.top === top)
+              return true;
+            this.url = url;
+            this.opacity = opacity;
+            this.width = width;
+            this.height = height;
+            this.angle = angle;
+            this.left = left;
+            this.top = top;
+            this.updateImage();
+            return true;
+          }
+        }
+      ]
+    };
   }
-  ensureLayer(editor) {
-    let userLayer = editor.getLayer("user");
+  ensureLayer() {
+    if (!this.canvasService) return;
+    let userLayer = this.canvasService.getLayer("user");
     if (!userLayer) {
-      userLayer = new import_core5.PooderLayer([], {
-        width: editor.state.width,
-        height: editor.state.height,
+      userLayer = this.canvasService.createLayer("user", {
+        width: this.canvasService.canvas.width,
+        height: this.canvasService.canvas.height,
         left: 0,
         top: 0,
         originX: "left",
@@ -1395,42 +2085,64 @@ var ImageTool = class {
         selectable: false,
         evented: true,
         subTargetCheck: true,
-        interactive: true,
-        data: {
-          id: "user"
-        }
+        interactive: true
       });
-      editor.canvas.add(userLayer);
+      const dielineLayer = this.canvasService.getLayer("dieline-overlay");
+      if (dielineLayer) {
+        const index = this.canvasService.canvas.getObjects().indexOf(dielineLayer);
+        if (index >= 0) {
+          this.canvasService.canvas.moveObjectTo(userLayer, index);
+        }
+      } else {
+        const bgLayer = this.canvasService.getLayer("background");
+        if (bgLayer) {
+          this.canvasService.canvas.sendObjectToBack(bgLayer);
+        }
+      }
+      this.canvasService.requestRenderAll();
     }
   }
-  updateImage(editor, opts) {
+  updateImage() {
     var _a, _b;
-    let { url, opacity, width, height, angle, left, top } = opts;
-    const layer = editor.getLayer("user");
+    if (!this.canvasService) return;
+    let { url, opacity, width, height, angle, left, top } = this;
+    const layer = this.canvasService.getLayer("user");
     if (!layer) {
       console.warn("[ImageTool] User layer not found");
       return;
     }
-    const userImage = editor.getObject("user-image", "user");
+    const userImage = this.canvasService.getObject("user-image", "user");
     if (this._loadingUrl === url) return;
     if (userImage) {
       const currentSrc = ((_a = userImage.getSrc) == null ? void 0 : _a.call(userImage)) || ((_b = userImage._element) == null ? void 0 : _b.src);
       if (currentSrc !== url) {
-        this.loadImage(editor, layer, opts);
+        this.loadImage(layer);
       } else {
         const updates = {};
-        const centerX = editor.state.width / 2;
-        const centerY = editor.state.height / 2;
+        const canvasW = this.canvasService.canvas.width || 800;
+        const canvasH = this.canvasService.canvas.height || 600;
+        const centerX = canvasW / 2;
+        const centerY = canvasH / 2;
         if (userImage.opacity !== opacity) updates.opacity = opacity;
         if (angle !== void 0 && userImage.angle !== angle)
           updates.angle = angle;
+        if (userImage.originX !== "center") {
+          userImage.set({
+            originX: "center",
+            originY: "center",
+            left: userImage.left + userImage.width * userImage.scaleX / 2,
+            top: userImage.top + userImage.height * userImage.scaleY / 2
+          });
+        }
         if (left !== void 0) {
-          const localLeft = left - centerX;
+          const globalLeft = Coordinate.toAbsolute(left, canvasW);
+          const localLeft = globalLeft - centerX;
           if (Math.abs(userImage.left - localLeft) > 1)
             updates.left = localLeft;
         }
         if (top !== void 0) {
-          const localTop = top - centerY;
+          const globalTop = Coordinate.toAbsolute(top, canvasH);
+          const localTop = globalTop - centerY;
           if (Math.abs(userImage.top - localTop) > 1) updates.top = localTop;
         }
         if (width !== void 0 && userImage.width)
@@ -1439,44 +2151,145 @@ var ImageTool = class {
           updates.scaleY = height / userImage.height;
         if (Object.keys(updates).length > 0) {
           userImage.set(updates);
-          editor.canvas.requestRenderAll();
+          layer.dirty = true;
+          this.canvasService.requestRenderAll();
         }
       }
     } else {
-      this.loadImage(editor, layer, opts);
+      this.loadImage(layer);
     }
   }
-  loadImage(editor, layer, opts) {
-    const { url } = opts;
+  loadImage(layer) {
+    if (!this.canvasService) return;
+    const { url } = this;
+    if (!url) return;
     this._loadingUrl = url;
-    import_core5.Image.fromURL(url).then((image) => {
+    import_fabric5.FabricImage.fromURL(url, { crossOrigin: "anonymous" }).then((image) => {
+      var _a, _b, _c, _d, _e, _f;
       if (this._loadingUrl !== url) return;
       this._loadingUrl = null;
-      const currentOpts = this.options;
-      const { opacity, width, height, angle, left, top } = currentOpts;
-      const existingImage = editor.getObject("user-image", "user");
+      let { opacity, width, height, angle, left, top } = this;
+      if (this.context) {
+        const configService = this.context.services.get(
+          "ConfigurationService"
+        );
+        const dielineWidth = configService.get("dieline.width");
+        const dielineHeight = configService.get("dieline.height");
+        console.log(
+          "[ImageTool] Dieline config debug:",
+          {
+            widthVal: dielineWidth,
+            heightVal: dielineHeight,
+            // Debug: dump all keys to see what is available
+            allKeys: Array.from(
+              ((_a = configService.configValues) == null ? void 0 : _a.keys()) || []
+            )
+          },
+          configService
+        );
+        if (width === void 0 && height === void 0) {
+          const scale = Math.min(
+            dielineWidth / (image.width || 1),
+            dielineHeight / (image.height || 1)
+          );
+          width = (image.width || 1) * scale;
+          height = (image.height || 1) * scale;
+          this.width = width;
+          this.height = height;
+        }
+        if (left === void 0 && top === void 0) {
+          const dielinePos = configService == null ? void 0 : configService.get("dieline.position");
+          if (dielinePos) {
+            this.left = dielinePos.x;
+            this.top = dielinePos.y;
+          } else {
+            this.left = 0.5;
+            this.top = 0.5;
+          }
+          left = this.left;
+          top = this.top;
+        }
+      }
+      const existingImage = this.canvasService.getObject(
+        "user-image",
+        "user"
+      );
       if (existingImage) {
         const defaultLeft = existingImage.left;
         const defaultTop = existingImage.top;
         const defaultAngle = existingImage.angle;
         const defaultScaleX = existingImage.scaleX;
         const defaultScaleY = existingImage.scaleY;
+        const canvasW = ((_b = this.canvasService) == null ? void 0 : _b.canvas.width) || 800;
+        const canvasH = ((_c = this.canvasService) == null ? void 0 : _c.canvas.height) || 600;
+        const centerX = canvasW / 2;
+        const centerY = canvasH / 2;
+        let targetLeft = left !== void 0 ? left : defaultLeft;
+        let targetTop = top !== void 0 ? top : defaultTop;
+        const configService = (_d = this.context) == null ? void 0 : _d.services.get(
+          "ConfigurationService"
+        );
+        console.log("[ImageTool] Loading EXISTING image...", {
+          canvasW,
+          canvasH,
+          centerX,
+          centerY,
+          incomingLeft: left,
+          incomingTop: top,
+          dielinePos: configService == null ? void 0 : configService.get("dieline.position"),
+          existingImage: !!existingImage
+        });
+        if (left !== void 0) {
+          const globalLeft = Coordinate.toAbsolute(left, canvasW);
+          targetLeft = globalLeft;
+          console.log("[ImageTool] Calculated targetLeft", {
+            globalLeft,
+            targetLeft
+          });
+        }
+        if (top !== void 0) {
+          const globalTop = Coordinate.toAbsolute(top, canvasH);
+          targetTop = globalTop;
+          console.log("[ImageTool] Calculated targetTop", {
+            globalTop,
+            targetTop
+          });
+        }
         image.set({
-          left: left !== void 0 ? left : defaultLeft,
-          top: top !== void 0 ? top : defaultTop,
+          originX: "center",
+          // Use center origin for easier positioning
+          originY: "center",
+          left: targetLeft,
+          top: targetTop,
           angle: angle !== void 0 ? angle : defaultAngle,
           scaleX: width !== void 0 && image.width ? width / image.width : defaultScaleX,
           scaleY: height !== void 0 && image.height ? height / image.height : defaultScaleY
         });
         layer.remove(existingImage);
       } else {
+        image.set({
+          originX: "center",
+          originY: "center"
+        });
         if (width !== void 0 && image.width)
           image.scaleX = width / image.width;
         if (height !== void 0 && image.height)
           image.scaleY = height / image.height;
         if (angle !== void 0) image.angle = angle;
-        if (left !== void 0) image.left = left;
-        if (top !== void 0) image.top = top;
+        const canvasW = ((_e = this.canvasService) == null ? void 0 : _e.canvas.width) || 800;
+        const canvasH = ((_f = this.canvasService) == null ? void 0 : _f.canvas.height) || 600;
+        const centerX = canvasW / 2;
+        const centerY = canvasH / 2;
+        if (left !== void 0) {
+          image.left = Coordinate.toAbsolute(left, canvasW);
+        } else {
+          image.left = centerX;
+        }
+        if (top !== void 0) {
+          image.top = Coordinate.toAbsolute(top, canvasH);
+        } else {
+          image.top = centerY;
+        }
       }
       image.set({
         opacity: opacity !== void 0 ? opacity : 1,
@@ -1486,18 +2299,22 @@ var ImageTool = class {
       });
       layer.add(image);
       image.on("modified", (e) => {
+        var _a2, _b2;
         const matrix = image.calcTransformMatrix();
-        const globalPoint = import_core5.util.transformPoint(new import_core5.Point(0, 0), matrix);
-        this.options.left = globalPoint.x;
-        this.options.top = globalPoint.y;
-        this.options.angle = e.target.angle;
-        if (image.width)
-          this.options.width = e.target.width * e.target.scaleX;
-        if (image.height)
-          this.options.height = e.target.height * e.target.scaleY;
-        editor.emit("update");
+        const globalPoint = import_fabric5.util.transformPoint(new import_fabric5.Point(0, 0), matrix);
+        const canvasW = ((_a2 = this.canvasService) == null ? void 0 : _a2.canvas.width) || 800;
+        const canvasH = ((_b2 = this.canvasService) == null ? void 0 : _b2.canvas.height) || 600;
+        this.left = Coordinate.toNormalized(globalPoint.x, canvasW);
+        this.top = Coordinate.toNormalized(globalPoint.y, canvasH);
+        this.angle = e.target.angle;
+        if (image.width) this.width = e.target.width * e.target.scaleX;
+        if (image.height) this.height = e.target.height * e.target.scaleY;
+        if (this.context) {
+          this.context.eventBus.emit("update");
+        }
       });
-      editor.canvas.requestRenderAll();
+      layer.dirty = true;
+      this.canvasService.requestRenderAll();
     }).catch((err) => {
       if (this._loadingUrl === url) this._loadingUrl = null;
       console.error("Failed to load image", url, err);
@@ -1507,69 +2324,108 @@ var ImageTool = class {
 
 // src/white-ink.ts
 var import_core6 = require("@pooder/core");
+var import_fabric6 = require("fabric");
 var WhiteInkTool = class {
-  constructor() {
-    this.name = "WhiteInkTool";
-    this.options = {
-      customMask: "",
-      opacity: 1,
-      enableClip: false
-    };
-    this.schema = {
-      customMask: { type: "string", label: "Custom Mask URL" },
-      opacity: { type: "number", min: 0, max: 1, step: 0.01, label: "Opacity" },
-      enableClip: { type: "boolean", label: "Enable Clip" }
+  constructor(options) {
+    this.id = "pooder.kit.white-ink";
+    this.metadata = {
+      name: "WhiteInkTool"
     };
-    this.commands = {
-      setWhiteInkImage: {
-        execute: (editor, customMask, opacity, enableClip = true) => {
-          if (this.options.customMask === customMask && this.options.opacity === opacity && this.options.enableClip === enableClip)
-            return true;
-          this.options.customMask = customMask;
-          this.options.opacity = opacity;
-          this.options.enableClip = enableClip;
-          this.updateWhiteInk(editor, this.options);
-          return true;
-        },
-        schema: {
-          customMask: {
-            type: "string",
-            label: "Custom Mask URL",
-            required: true
-          },
-          opacity: {
-            type: "number",
-            label: "Opacity",
-            min: 0,
-            max: 1,
-            required: true
-          },
-          enableClip: {
-            type: "boolean",
-            label: "Enable Clip",
-            default: true,
-            required: false
+    this.customMask = "";
+    this.opacity = 1;
+    this.enableClip = false;
+    this._loadingUrl = null;
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+  activate(context) {
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for WhiteInkTool");
+      return;
+    }
+    const configService = context.services.get("ConfigurationService");
+    if (configService) {
+      this.customMask = configService.get(
+        "whiteInk.customMask",
+        this.customMask
+      );
+      this.opacity = configService.get("whiteInk.opacity", this.opacity);
+      this.enableClip = configService.get(
+        "whiteInk.enableClip",
+        this.enableClip
+      );
+      configService.onAnyChange((e) => {
+        if (e.key.startsWith("whiteInk.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[WhiteInkTool] Config change detected: ${e.key} -> ${e.value}`
+          );
+          if (prop && prop in this) {
+            this[prop] = e.value;
+            this.updateWhiteInk();
           }
         }
-      }
-    };
-  }
-  onMount(editor) {
-    this.setup(editor);
-    this.updateWhiteInk(editor, this.options);
+      });
+    }
+    this.setup();
+    this.updateWhiteInk();
   }
-  onUnmount(editor) {
-    this.teardown(editor);
+  deactivate(context) {
+    this.teardown();
+    this.canvasService = void 0;
   }
-  onDestroy(editor) {
-    this.teardown(editor);
+  contribute() {
+    return {
+      [import_core6.ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "whiteInk.customMask",
+          type: "string",
+          label: "Custom Mask URL",
+          default: ""
+        },
+        {
+          id: "whiteInk.opacity",
+          type: "number",
+          label: "Opacity",
+          min: 0,
+          max: 1,
+          step: 0.01,
+          default: 1
+        },
+        {
+          id: "whiteInk.enableClip",
+          type: "boolean",
+          label: "Enable Clip",
+          default: false
+        }
+      ],
+      [import_core6.ContributionPointIds.COMMANDS]: [
+        {
+          command: "setWhiteInkImage",
+          title: "Set White Ink Image",
+          handler: (customMask, opacity, enableClip = true) => {
+            if (this.customMask === customMask && this.opacity === opacity && this.enableClip === enableClip)
+              return true;
+            this.customMask = customMask;
+            this.opacity = opacity;
+            this.enableClip = enableClip;
+            this.updateWhiteInk();
+            return true;
+          }
+        }
+      ]
+    };
   }
-  setup(editor) {
-    let userLayer = editor.getLayer("user");
+  setup() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+    let userLayer = this.canvasService.getLayer("user");
     if (!userLayer) {
-      userLayer = new import_core6.PooderLayer([], {
-        width: editor.state.width,
-        height: editor.state.height,
+      userLayer = this.canvasService.createLayer("user", {
+        width: canvas.width,
+        height: canvas.height,
         left: 0,
         top: 0,
         originX: "left",
@@ -1577,61 +2433,58 @@ var WhiteInkTool = class {
         selectable: false,
         evented: true,
         subTargetCheck: true,
-        interactive: true,
-        data: {
-          id: "user"
-        }
+        interactive: true
       });
-      editor.canvas.add(userLayer);
+      canvas.add(userLayer);
     }
     if (!this.syncHandler) {
       this.syncHandler = (e) => {
         var _a;
         const target = e.target;
         if (target && ((_a = target.data) == null ? void 0 : _a.id) === "user-image") {
-          this.syncWithUserImage(editor);
+          this.syncWithUserImage();
         }
       };
-      editor.canvas.on("object:moving", this.syncHandler);
-      editor.canvas.on("object:scaling", this.syncHandler);
-      editor.canvas.on("object:rotating", this.syncHandler);
-      editor.canvas.on("object:modified", this.syncHandler);
+      canvas.on("object:moving", this.syncHandler);
+      canvas.on("object:scaling", this.syncHandler);
+      canvas.on("object:rotating", this.syncHandler);
+      canvas.on("object:modified", this.syncHandler);
     }
   }
-  teardown(editor) {
+  teardown() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
     if (this.syncHandler) {
-      editor.canvas.off("object:moving", this.syncHandler);
-      editor.canvas.off("object:scaling", this.syncHandler);
-      editor.canvas.off("object:rotating", this.syncHandler);
-      editor.canvas.off("object:modified", this.syncHandler);
+      canvas.off("object:moving", this.syncHandler);
+      canvas.off("object:scaling", this.syncHandler);
+      canvas.off("object:rotating", this.syncHandler);
+      canvas.off("object:modified", this.syncHandler);
       this.syncHandler = void 0;
     }
-    const layer = editor.getLayer("user");
+    const layer = this.canvasService.getLayer("user");
     if (layer) {
-      const whiteInk = editor.getObject("white-ink", "user");
+      const whiteInk = this.canvasService.getObject("white-ink", "user");
       if (whiteInk) {
         layer.remove(whiteInk);
       }
     }
-    const userImage = editor.getObject("user-image", "user");
+    const userImage = this.canvasService.getObject("user-image", "user");
     if (userImage && userImage.clipPath) {
       userImage.set({ clipPath: void 0 });
     }
-    editor.canvas.requestRenderAll();
+    this.canvasService.requestRenderAll();
   }
-  onUpdate(editor, state) {
-    this.updateWhiteInk(editor, this.options);
-  }
-  updateWhiteInk(editor, opts) {
+  updateWhiteInk() {
     var _a, _b;
-    const { customMask, opacity, enableClip } = opts;
-    const layer = editor.getLayer("user");
+    if (!this.canvasService) return;
+    const { customMask, opacity, enableClip } = this;
+    const layer = this.canvasService.getLayer("user");
     if (!layer) {
       console.warn("[WhiteInkTool] User layer not found");
       return;
     }
-    const whiteInk = editor.getObject("white-ink", "user");
-    const userImage = editor.getObject("user-image", "user");
+    const whiteInk = this.canvasService.getObject("white-ink", "user");
+    const userImage = this.canvasService.getObject("user-image", "user");
     if (!customMask) {
       if (whiteInk) {
         layer.remove(whiteInk);
@@ -1639,50 +2492,51 @@ var WhiteInkTool = class {
       if (userImage && userImage.clipPath) {
         userImage.set({ clipPath: void 0 });
       }
-      editor.canvas.requestRenderAll();
+      layer.dirty = true;
+      this.canvasService.requestRenderAll();
       return;
     }
     if (whiteInk) {
       const currentSrc = ((_a = whiteInk.getSrc) == null ? void 0 : _a.call(whiteInk)) || ((_b = whiteInk._element) == null ? void 0 : _b.src);
       if (currentSrc !== customMask) {
-        this.loadWhiteInk(
-          editor,
-          layer,
-          customMask,
-          opacity,
-          enableClip,
-          whiteInk
-        );
+        this.loadWhiteInk(layer, customMask, opacity, enableClip, whiteInk);
       } else {
         if (whiteInk.opacity !== opacity) {
           whiteInk.set({ opacity });
-          editor.canvas.requestRenderAll();
+          layer.dirty = true;
+          this.canvasService.requestRenderAll();
         }
       }
     } else {
-      this.loadWhiteInk(editor, layer, customMask, opacity, enableClip);
+      this.loadWhiteInk(layer, customMask, opacity, enableClip);
     }
     if (userImage) {
       if (enableClip) {
         if (!userImage.clipPath) {
-          this.applyClipPath(editor, customMask);
+          this.applyClipPath(customMask);
         }
       } else {
         if (userImage.clipPath) {
           userImage.set({ clipPath: void 0 });
-          editor.canvas.requestRenderAll();
+          layer.dirty = true;
+          this.canvasService.requestRenderAll();
         }
       }
     }
   }
-  loadWhiteInk(editor, layer, url, opacity, enableClip, oldImage) {
-    import_core6.Image.fromURL(url, { crossOrigin: "anonymous" }).then((image) => {
+  loadWhiteInk(layer, url, opacity, enableClip, oldImage) {
+    if (!this.canvasService) return;
+    if (this._loadingUrl === url) return;
+    this._loadingUrl = url;
+    import_fabric6.FabricImage.fromURL(url, { crossOrigin: "anonymous" }).then((image) => {
       var _a;
+      if (this._loadingUrl !== url) return;
+      this._loadingUrl = null;
       if (oldImage) {
         layer.remove(oldImage);
       }
       (_a = image.filters) == null ? void 0 : _a.push(
-        new import_core6.filters.BlendColor({
+        new import_fabric6.filters.BlendColor({
           color: "#FFFFFF",
           mode: "add"
         })
@@ -1697,26 +2551,29 @@ var WhiteInkTool = class {
         }
       });
       layer.add(image);
-      const userImage = editor.getObject("user-image", "user");
+      const userImage = this.canvasService.getObject("user-image", "user");
       if (userImage) {
         layer.remove(userImage);
         layer.add(userImage);
       }
       if (enableClip) {
-        this.applyClipPath(editor, url);
+        this.applyClipPath(url);
       } else if (userImage) {
         userImage.set({ clipPath: void 0 });
       }
-      this.syncWithUserImage(editor);
-      editor.canvas.requestRenderAll();
+      this.syncWithUserImage();
+      layer.dirty = true;
+      this.canvasService.requestRenderAll();
     }).catch((err) => {
       console.error("Failed to load white ink mask", url, err);
+      this._loadingUrl = null;
     });
   }
-  applyClipPath(editor, url) {
-    const userImage = editor.getObject("user-image", "user");
+  applyClipPath(url) {
+    if (!this.canvasService) return;
+    const userImage = this.canvasService.getObject("user-image", "user");
     if (!userImage) return;
-    import_core6.Image.fromURL(url, { crossOrigin: "anonymous" }).then((maskImage) => {
+    import_fabric6.FabricImage.fromURL(url, { crossOrigin: "anonymous" }).then((maskImage) => {
       maskImage.set({
         originX: "center",
         originY: "center",
@@ -1727,14 +2584,17 @@ var WhiteInkTool = class {
         scaleY: userImage.height / maskImage.height
       });
       userImage.set({ clipPath: maskImage });
-      editor.canvas.requestRenderAll();
+      const layer = this.canvasService.getLayer("user");
+      if (layer) layer.dirty = true;
+      this.canvasService.requestRenderAll();
     }).catch((err) => {
       console.error("Failed to load clip path", url, err);
     });
   }
-  syncWithUserImage(editor) {
-    const userImage = editor.getObject("user-image", "user");
-    const whiteInk = editor.getObject("white-ink", "user");
+  syncWithUserImage() {
+    if (!this.canvasService) return;
+    const userImage = this.canvasService.getObject("user-image", "user");
+    const whiteInk = this.canvasService.getObject("white-ink", "user");
     if (userImage && whiteInk) {
       whiteInk.set({
         left: userImage.left,
@@ -1755,114 +2615,172 @@ var WhiteInkTool = class {
 
 // src/ruler.ts
 var import_core7 = require("@pooder/core");
+var import_fabric7 = require("fabric");
 var RulerTool = class {
-  constructor() {
-    this.name = "RulerTool";
-    this.options = {
-      unit: "px",
-      thickness: 20,
-      backgroundColor: "#f0f0f0",
-      textColor: "#333333",
-      lineColor: "#999999",
-      fontSize: 10
+  constructor(options) {
+    this.id = "pooder.kit.ruler";
+    this.metadata = {
+      name: "RulerTool"
     };
-    this.schema = {
-      unit: {
-        type: "select",
-        options: ["px", "mm", "cm", "in"],
-        label: "Unit"
-      },
-      thickness: { type: "number", min: 10, max: 100, label: "Thickness" },
-      backgroundColor: { type: "color", label: "Background Color" },
-      textColor: { type: "color", label: "Text Color" },
-      lineColor: { type: "color", label: "Line Color" },
-      fontSize: { type: "number", min: 8, max: 24, label: "Font Size" }
-    };
-    this.commands = {
-      setUnit: {
-        execute: (editor, unit) => {
-          if (this.options.unit === unit) return true;
-          this.options.unit = unit;
-          this.updateRuler(editor);
-          return true;
-        },
-        schema: {
-          unit: {
-            type: "string",
-            label: "Unit",
-            options: ["px", "mm", "cm", "in"],
-            required: true
+    this.unit = "px";
+    this.thickness = 20;
+    this.backgroundColor = "#f0f0f0";
+    this.textColor = "#333333";
+    this.lineColor = "#999999";
+    this.fontSize = 10;
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+  activate(context) {
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for RulerTool");
+      return;
+    }
+    const configService = context.services.get("ConfigurationService");
+    if (configService) {
+      this.unit = configService.get("ruler.unit", this.unit);
+      this.thickness = configService.get("ruler.thickness", this.thickness);
+      this.backgroundColor = configService.get(
+        "ruler.backgroundColor",
+        this.backgroundColor
+      );
+      this.textColor = configService.get("ruler.textColor", this.textColor);
+      this.lineColor = configService.get("ruler.lineColor", this.lineColor);
+      this.fontSize = configService.get("ruler.fontSize", this.fontSize);
+      configService.onAnyChange((e) => {
+        if (e.key.startsWith("ruler.")) {
+          const prop = e.key.split(".")[1];
+          if (prop && prop in this) {
+            this[prop] = e.value;
+            this.updateRuler();
           }
         }
-      },
-      setTheme: {
-        execute: (editor, theme) => {
-          const newOptions = { ...this.options, ...theme };
-          if (JSON.stringify(newOptions) === JSON.stringify(this.options))
+      });
+    }
+    this.createLayer();
+    this.updateRuler();
+  }
+  deactivate(context) {
+    this.destroyLayer();
+    this.canvasService = void 0;
+  }
+  contribute() {
+    return {
+      [import_core7.ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "ruler.unit",
+          type: "select",
+          label: "Unit",
+          options: ["px", "mm", "cm", "in"],
+          default: "px"
+        },
+        {
+          id: "ruler.thickness",
+          type: "number",
+          label: "Thickness",
+          min: 10,
+          max: 100,
+          default: 20
+        },
+        {
+          id: "ruler.backgroundColor",
+          type: "color",
+          label: "Background Color",
+          default: "#f0f0f0"
+        },
+        {
+          id: "ruler.textColor",
+          type: "color",
+          label: "Text Color",
+          default: "#333333"
+        },
+        {
+          id: "ruler.lineColor",
+          type: "color",
+          label: "Line Color",
+          default: "#999999"
+        },
+        {
+          id: "ruler.fontSize",
+          type: "number",
+          label: "Font Size",
+          min: 8,
+          max: 24,
+          default: 10
+        }
+      ],
+      [import_core7.ContributionPointIds.COMMANDS]: [
+        {
+          command: "setUnit",
+          title: "Set Ruler Unit",
+          handler: (unit) => {
+            if (this.unit === unit) return true;
+            this.unit = unit;
+            this.updateRuler();
             return true;
-          this.options = newOptions;
-          this.updateRuler(editor);
-          return true;
+          }
         },
-        schema: {
-          theme: {
-            type: "object",
-            label: "Theme",
-            required: true
+        {
+          command: "setTheme",
+          title: "Set Ruler Theme",
+          handler: (theme) => {
+            const oldState = {
+              backgroundColor: this.backgroundColor,
+              textColor: this.textColor,
+              lineColor: this.lineColor,
+              fontSize: this.fontSize,
+              thickness: this.thickness
+            };
+            const newState = { ...oldState, ...theme };
+            if (JSON.stringify(newState) === JSON.stringify(oldState))
+              return true;
+            Object.assign(this, newState);
+            this.updateRuler();
+            return true;
           }
         }
-      }
+      ]
     };
   }
-  onMount(editor) {
-    this.createLayer(editor);
-    this.updateRuler(editor);
-  }
-  onUnmount(editor) {
-    this.destroyLayer(editor);
+  getLayer() {
+    var _a;
+    return (_a = this.canvasService) == null ? void 0 : _a.getLayer("ruler-overlay");
   }
-  onUpdate(editor, state) {
-    this.updateRuler(editor);
-  }
-  onDestroy(editor) {
-    this.destroyLayer(editor);
-  }
-  getLayer(editor) {
-    return editor.canvas.getObjects().find((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.id) === "ruler-overlay";
+  createLayer() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+    const width = canvas.width || 800;
+    const height = canvas.height || 600;
+    const layer = this.canvasService.createLayer("ruler-overlay", {
+      width,
+      height,
+      selectable: false,
+      evented: false,
+      left: 0,
+      top: 0,
+      originX: "left",
+      originY: "top"
     });
+    canvas.bringObjectToFront(layer);
   }
-  createLayer(editor) {
-    let layer = this.getLayer(editor);
-    if (!layer) {
-      const width = editor.canvas.width || 800;
-      const height = editor.canvas.height || 600;
-      layer = new import_core7.PooderLayer([], {
-        width,
-        height,
-        selectable: false,
-        evented: false,
-        data: { id: "ruler-overlay" }
-      });
-      editor.canvas.add(layer);
-    }
-    editor.canvas.bringObjectToFront(layer);
-  }
-  destroyLayer(editor) {
-    const layer = this.getLayer(editor);
+  destroyLayer() {
+    if (!this.canvasService) return;
+    const layer = this.getLayer();
     if (layer) {
-      editor.canvas.remove(layer);
+      this.canvasService.canvas.remove(layer);
     }
   }
-  updateRuler(editor) {
-    const layer = this.getLayer(editor);
+  updateRuler() {
+    if (!this.canvasService) return;
+    const layer = this.getLayer();
     if (!layer) return;
     layer.remove(...layer.getObjects());
-    const { thickness, backgroundColor, lineColor, textColor, fontSize } = this.options;
-    const width = editor.canvas.width || 800;
-    const height = editor.canvas.height || 600;
-    const topBg = new import_core7.Rect({
+    const { thickness, backgroundColor, lineColor, textColor, fontSize } = this;
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
+    const topBg = new import_fabric7.Rect({
       left: 0,
       top: 0,
       width,
@@ -1871,7 +2789,7 @@ var RulerTool = class {
       selectable: false,
       evented: false
     });
-    const leftBg = new import_core7.Rect({
+    const leftBg = new import_fabric7.Rect({
       left: 0,
       top: 0,
       width: thickness,
@@ -1880,7 +2798,7 @@ var RulerTool = class {
       selectable: false,
       evented: false
     });
-    const cornerBg = new import_core7.Rect({
+    const cornerBg = new import_fabric7.Rect({
       left: 0,
       top: 0,
       width: thickness,
@@ -1891,7 +2809,9 @@ var RulerTool = class {
       selectable: false,
       evented: false
     });
-    layer.add(topBg, leftBg, cornerBg);
+    layer.add(topBg);
+    layer.add(leftBg);
+    layer.add(cornerBg);
     const step = 100;
     const subStep = 10;
     const midStep = 50;
@@ -1900,7 +2820,7 @@ var RulerTool = class {
       let len = thickness * 0.25;
       if (x % step === 0) len = thickness * 0.8;
       else if (x % midStep === 0) len = thickness * 0.5;
-      const line = new import_core7.Line([x, thickness - len, x, thickness], {
+      const line = new import_fabric7.Line([x, thickness - len, x, thickness], {
         stroke: lineColor,
         strokeWidth: 1,
         selectable: false,
@@ -1908,7 +2828,7 @@ var RulerTool = class {
       });
       layer.add(line);
       if (x % step === 0) {
-        const text = new import_core7.Text(x.toString(), {
+        const text = new import_fabric7.Text(x.toString(), {
           left: x + 2,
           top: 2,
           fontSize,
@@ -1925,7 +2845,7 @@ var RulerTool = class {
       let len = thickness * 0.25;
       if (y % step === 0) len = thickness * 0.8;
       else if (y % midStep === 0) len = thickness * 0.5;
-      const line = new import_core7.Line([thickness - len, y, thickness, y], {
+      const line = new import_fabric7.Line([thickness - len, y, thickness, y], {
         stroke: lineColor,
         strokeWidth: 1,
         selectable: false,
@@ -1933,7 +2853,7 @@ var RulerTool = class {
       });
       layer.add(line);
       if (y % step === 0) {
-        const text = new import_core7.Text(y.toString(), {
+        const text = new import_fabric7.Text(y.toString(), {
           angle: -90,
           left: thickness / 2 - fontSize / 3,
           // approximate centering
@@ -1949,62 +2869,80 @@ var RulerTool = class {
         layer.add(text);
       }
     }
-    editor.canvas.bringObjectToFront(layer);
-    editor.canvas.requestRenderAll();
+    this.canvasService.canvas.bringObjectToFront(layer);
+    this.canvasService.canvas.requestRenderAll();
   }
 };
 
 // src/mirror.ts
+var import_core8 = require("@pooder/core");
 var MirrorTool = class {
-  constructor() {
-    this.name = "MirrorTool";
-    this.options = {
-      enabled: false
+  constructor(options) {
+    this.id = "pooder.kit.mirror";
+    this.metadata = {
+      name: "MirrorTool"
     };
-    this.schema = {
-      enabled: {
-        type: "boolean",
-        label: "Mirror View"
-      }
-    };
-    this.commands = {
-      toggleMirror: {
-        execute: (editor) => {
-          this.options.enabled = !this.options.enabled;
-          this.applyMirror(editor, this.options.enabled);
-          return true;
-        }
-      },
-      setMirror: {
-        execute: (editor, enabled) => {
-          if (this.options.enabled === enabled) return true;
-          this.options.enabled = enabled;
-          this.applyMirror(editor, enabled);
-          return true;
-        },
-        schema: {
-          enabled: {
-            type: "boolean",
-            label: "Enabled",
-            required: true
-          }
-        }
-      }
+    this.enabled = false;
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+  toJSON() {
+    return {
+      enabled: this.enabled
     };
   }
-  onMount(editor) {
-    if (this.options.enabled) {
-      this.applyMirror(editor, true);
+  loadFromJSON(json) {
+    this.enabled = json.enabled;
+  }
+  activate(context) {
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for MirrorTool");
+      return;
+    }
+    const configService = context.services.get("ConfigurationService");
+    if (configService) {
+      this.enabled = configService.get("mirror.enabled", this.enabled);
+      configService.onAnyChange((e) => {
+        if (e.key === "mirror.enabled") {
+          this.applyMirror(e.value);
+        }
+      });
+    }
+    if (this.enabled) {
+      this.applyMirror(true);
     }
   }
-  onUpdate(editor) {
-    this.applyMirror(editor, this.options.enabled);
+  deactivate(context) {
+    this.applyMirror(false);
+    this.canvasService = void 0;
   }
-  onUnmount(editor) {
-    this.applyMirror(editor, false);
+  contribute() {
+    return {
+      [import_core8.ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "mirror.enabled",
+          type: "boolean",
+          label: "Enable Mirror",
+          default: false
+        }
+      ],
+      [import_core8.ContributionPointIds.COMMANDS]: [
+        {
+          command: "setMirror",
+          title: "Set Mirror",
+          handler: (enabled) => {
+            this.applyMirror(enabled);
+            return true;
+          }
+        }
+      ]
+    };
   }
-  applyMirror(editor, enabled) {
-    const canvas = editor.canvas;
+  applyMirror(enabled) {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
     if (!canvas) return;
     const width = canvas.width || 800;
     let vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
@@ -2015,17 +2953,85 @@ var MirrorTool = class {
       vpt[4] = width - vpt[4];
       canvas.setViewportTransform(vpt);
       canvas.requestRenderAll();
+      this.enabled = true;
     } else if (!enabled && isFlipped) {
       vpt[0] = -vpt[0];
       vpt[4] = width - vpt[4];
       canvas.setViewportTransform(vpt);
       canvas.requestRenderAll();
+      this.enabled = false;
+    }
+  }
+};
+
+// src/CanvasService.ts
+var import_fabric8 = require("fabric");
+var CanvasService = class {
+  constructor(el, options) {
+    if (el instanceof import_fabric8.Canvas) {
+      this.canvas = el;
+    } else {
+      this.canvas = new import_fabric8.Canvas(el, {
+        preserveObjectStacking: true,
+        ...options
+      });
+    }
+  }
+  dispose() {
+    this.canvas.dispose();
+  }
+  /**
+   * Get a layer (Group) by its ID.
+   * We assume layers are Groups directly on the canvas with a data.id property.
+   */
+  getLayer(id) {
+    return this.canvas.getObjects().find((obj) => {
+      var _a;
+      return ((_a = obj.data) == null ? void 0 : _a.id) === id;
+    });
+  }
+  /**
+   * Create a layer (Group) with the given ID if it doesn't exist.
+   */
+  createLayer(id, options = {}) {
+    let layer = this.getLayer(id);
+    if (!layer) {
+      const defaultOptions = {
+        selectable: false,
+        evented: false,
+        ...options,
+        data: { ...options.data, id }
+      };
+      layer = new import_fabric8.Group([], defaultOptions);
+      this.canvas.add(layer);
+    }
+    return layer;
+  }
+  /**
+   * Find an object by ID, optionally within a specific layer.
+   */
+  getObject(id, layerId) {
+    if (layerId) {
+      const layer = this.getLayer(layerId);
+      if (!layer) return void 0;
+      return layer.getObjects().find((obj) => {
+        var _a;
+        return ((_a = obj.data) == null ? void 0 : _a.id) === id;
+      });
     }
+    return this.canvas.getObjects().find((obj) => {
+      var _a;
+      return ((_a = obj.data) == null ? void 0 : _a.id) === id;
+    });
+  }
+  requestRenderAll() {
+    this.canvas.requestRenderAll();
   }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BackgroundTool,
+  CanvasService,
   DielineTool,
   FilmTool,
   HoleTool,