@pooder/kit 0.0.2

package/dist/index.mjs

@@ -0,0 +1,1654 @@
+// src/background.ts
+import { Image, PooderLayer, Rect } from "@pooder/core";
+var BackgroundTool = class {
+  constructor() {
+    this.name = "BackgroundTool";
+    this.options = {
+      color: "",
+      url: ""
+    };
+    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;
+        }
+      },
+      clear: {
+        execute: (editor) => {
+          this.options = {
+            color: "transparent",
+            url: ""
+          };
+          this.updateBackground(editor, this.options);
+          return true;
+        }
+      },
+      setBackgroundColor: {
+        execute: (editor, color) => {
+          if (this.options.color === color) return true;
+          this.options.color = color;
+          this.updateBackground(editor, this.options);
+          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
+          }
+        }
+      },
+      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
+          }
+        }
+      }
+    };
+  }
+  initLayer(editor) {
+    let backgroundLayer = editor.getLayer("background");
+    if (!backgroundLayer) {
+      backgroundLayer = new PooderLayer([], {
+        width: editor.canvas.width,
+        height: editor.canvas.height,
+        selectable: false,
+        evented: false,
+        data: {
+          id: "background"
+        }
+      });
+      editor.canvas.add(backgroundLayer);
+      editor.canvas.sendObjectToBack(backgroundLayer);
+    }
+    this.updateBackground(editor, this.options);
+  }
+  onMount(editor) {
+    this.initLayer(editor);
+  }
+  onUnmount(editor) {
+    const layer = editor.getLayer("background");
+    if (layer) {
+      editor.canvas.remove(layer);
+    }
+  }
+  onUpdate(editor, state) {
+    this.updateBackground(editor, this.options);
+  }
+  async updateBackground(editor, options) {
+    const layer = editor.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");
+    if (rect) {
+      rect.set({
+        fill: color
+      });
+    } else {
+      rect = new Rect({
+        width,
+        height,
+        fill: color,
+        selectable: false,
+        evented: false,
+        data: {
+          id: "background-color-rect"
+        }
+      });
+      layer.add(rect);
+      layer.sendObjectToBack(rect);
+    }
+    let img = editor.getObject("background-image", "background");
+    try {
+      if (img) {
+        if (img.getSrc() !== url) {
+          if (url) {
+            await img.setSrc(url);
+          } else {
+            layer.remove(img);
+          }
+        }
+      } else {
+        if (url) {
+          img = await Image.fromURL(url, { crossOrigin: "anonymous" });
+          img.set({
+            originX: "left",
+            originY: "top",
+            left: 0,
+            top: 0,
+            selectable: false,
+            evented: false,
+            data: {
+              id: "background-image"
+            }
+          });
+          img.scaleToWidth(width);
+          if (img.getScaledHeight() < height)
+            img.scaleToHeight(height);
+          layer.add(img);
+        }
+      }
+      editor.canvas.requestRenderAll();
+    } catch (e) {
+      console.error("[BackgroundTool] Failed to load image", e);
+    }
+  }
+};
+
+// src/dieline.ts
+import { Path, PooderLayer as PooderLayer2, Pattern } from "@pooder/core";
+
+// src/geometry.ts
+import paper from "paper";
+function ensurePaper(width, height) {
+  if (!paper.project) {
+    paper.setup(new paper.Size(width, height));
+  }
+}
+function createBaseShape(options) {
+  const { shape, width, height, radius, x, y } = options;
+  const center = new paper.Point(x, y);
+  if (shape === "rect") {
+    return new paper.Path.Rectangle({
+      point: [x - width / 2, y - height / 2],
+      size: [Math.max(0, width), Math.max(0, height)],
+      radius: Math.max(0, radius)
+    });
+  } else if (shape === "circle") {
+    const r = Math.min(width, height) / 2;
+    return new paper.Path.Circle({
+      center,
+      radius: Math.max(0, r)
+    });
+  } else {
+    return new paper.Path.Ellipse({
+      center,
+      radius: [Math.max(0, width / 2), Math.max(0, height / 2)]
+    });
+  }
+}
+function getDielineShape(options) {
+  let mainShape = createBaseShape(options);
+  const { holes } = options;
+  if (holes && holes.length > 0) {
+    let lugsPath = null;
+    let cutsPath = null;
+    holes.forEach((hole) => {
+      const lug = new paper.Path.Circle({
+        center: [hole.x, hole.y],
+        radius: hole.outerRadius
+      });
+      if (!mainShape.intersects(lug) && !mainShape.contains(lug.position)) {
+        lug.remove();
+        return;
+      }
+      const cut = new paper.Path.Circle({
+        center: [hole.x, hole.y],
+        radius: hole.innerRadius
+      });
+      if (!lugsPath) {
+        lugsPath = lug;
+      } else {
+        const temp = lugsPath.unite(lug);
+        lugsPath.remove();
+        lug.remove();
+        lugsPath = temp;
+      }
+      if (!cutsPath) {
+        cutsPath = cut;
+      } else {
+        const temp = cutsPath.unite(cut);
+        cutsPath.remove();
+        cut.remove();
+        cutsPath = temp;
+      }
+    });
+    if (lugsPath) {
+      const temp = mainShape.unite(lugsPath);
+      mainShape.remove();
+      lugsPath.remove();
+      mainShape = temp;
+    }
+    if (cutsPath) {
+      const temp = mainShape.subtract(cutsPath);
+      mainShape.remove();
+      cutsPath.remove();
+      mainShape = temp;
+    }
+  }
+  return mainShape;
+}
+function generateDielinePath(options) {
+  ensurePaper(options.width * 2, options.height * 2);
+  paper.project.activeLayer.removeChildren();
+  const mainShape = getDielineShape(options);
+  const pathData = mainShape.pathData;
+  mainShape.remove();
+  return pathData;
+}
+function generateMaskPath(options) {
+  ensurePaper(options.canvasWidth, options.canvasHeight);
+  paper.project.activeLayer.removeChildren();
+  const { canvasWidth, canvasHeight } = options;
+  const maskRect = new paper.Path.Rectangle({
+    point: [0, 0],
+    size: [canvasWidth, canvasHeight]
+  });
+  const mainShape = getDielineShape(options);
+  const finalMask = maskRect.subtract(mainShape);
+  maskRect.remove();
+  mainShape.remove();
+  const pathData = finalMask.pathData;
+  finalMask.remove();
+  return pathData;
+}
+function generateBleedZonePath(options, offset) {
+  const maxDim = Math.max(options.width, options.height) + Math.abs(offset) * 4;
+  ensurePaper(maxDim, maxDim);
+  paper.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 bleedZone;
+  if (offset > 0) {
+    bleedZone = shapeOffset.subtract(shapeOriginal);
+  } else {
+    bleedZone = shapeOriginal.subtract(shapeOffset);
+  }
+  const pathData = bleedZone.pathData;
+  shapeOriginal.remove();
+  shapeOffset.remove();
+  bleedZone.remove();
+  return pathData;
+}
+function getNearestPointOnDieline(point, options) {
+  ensurePaper(options.width * 2, options.height * 2);
+  paper.project.activeLayer.removeChildren();
+  const shape = createBaseShape(options);
+  const p = new paper.Point(point.x, point.y);
+  const nearest = shape.getNearestPoint(p);
+  const result = { x: nearest.x, y: nearest.y };
+  shape.remove();
+  return result;
+}
+
+// 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"
+    };
+    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" },
+      style: {
+        type: "select",
+        options: ["solid", "dashed"],
+        label: "Line Style"
+      },
+      insideColor: { type: "color", label: "Inside Color" },
+      outsideColor: { type: "color", label: "Outside Color" }
+    };
+    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"
+          };
+          this.updateDieline(editor);
+          return true;
+        }
+      },
+      destroy: {
+        execute: (editor) => {
+          this.destroyLayer(editor);
+          return true;
+        }
+      },
+      setDimensions: {
+        execute: (editor, width, height) => {
+          if (this.options.width === width && this.options.height === height) 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
+          }
+        }
+      },
+      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
+          }
+        }
+      },
+      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
+          }
+        }
+      }
+    };
+  }
+  onMount(editor) {
+    this.createLayer(editor);
+  }
+  onUnmount(editor) {
+    this.destroyLayer(editor);
+  }
+  onUpdate(editor, state) {
+    this.updateDieline(editor);
+  }
+  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(editor) {
+    let layer = this.getLayer(editor, "dieline-overlay");
+    if (!layer) {
+      const width = editor.canvas.width || 800;
+      const height = editor.canvas.height || 600;
+      layer = new PooderLayer2([], {
+        width,
+        height,
+        selectable: false,
+        evented: false,
+        data: { id: "dieline-overlay" }
+      });
+      editor.canvas.add(layer);
+    }
+    editor.canvas.bringObjectToFront(layer);
+    this.updateDieline(editor);
+  }
+  destroyLayer(editor) {
+    const layer = this.getLayer(editor, "dieline-overlay");
+    if (layer) {
+      editor.canvas.remove(layer);
+    }
+  }
+  createHatchPattern(color = "rgba(0, 0, 0, 0.3)") {
+    if (typeof document === "undefined") {
+      return void 0;
+    }
+    const size = 20;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.clearRect(0, 0, size, size);
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(0, size);
+      ctx.lineTo(size, 0);
+      ctx.stroke();
+    }
+    return new Pattern({ source: canvas, repetition: "repeat" });
+  }
+  updateDieline(editor) {
+    var _a, _b;
+    const { shape, radius, offset, style, insideColor, outsideColor, position, borderLength } = this.options;
+    let { width, height } = this.options;
+    const canvasW = editor.canvas.width || 800;
+    const canvasH = editor.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;
+    layer.remove(...layer.getObjects());
+    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 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);
+    const maskPathData = generateMaskPath({
+      canvasWidth: canvasW,
+      canvasHeight: canvasH,
+      shape,
+      width: cutW,
+      height: cutH,
+      radius: cutR,
+      x: cx,
+      y: cy,
+      holes: holeData
+    });
+    const mask = new Path(maskPathData, {
+      fill: outsideColor,
+      stroke: null,
+      selectable: false,
+      evented: false,
+      originX: "left",
+      originY: "top",
+      left: 0,
+      top: 0
+    });
+    layer.add(mask);
+    if (insideColor && insideColor !== "transparent" && insideColor !== "rgba(0,0,0,0)") {
+      const productPathData = generateDielinePath({
+        shape,
+        width: cutW,
+        height: cutH,
+        radius: cutR,
+        x: cx,
+        y: cy,
+        holes: holeData
+      });
+      const insideObj = new Path(productPathData, {
+        fill: insideColor,
+        stroke: null,
+        selectable: false,
+        evented: false,
+        originX: "left",
+        // paper.js paths are absolute
+        originY: "top"
+      });
+      layer.add(insideObj);
+    }
+    if (offset !== 0) {
+      const bleedPathData = generateBleedZonePath({
+        shape,
+        width,
+        height,
+        radius,
+        x: cx,
+        y: cy,
+        holes: holeData
+      }, offset);
+      const pattern = this.createHatchPattern("red");
+      if (pattern) {
+        const bleedObj = new Path(bleedPathData, {
+          fill: pattern,
+          stroke: null,
+          selectable: false,
+          evented: false,
+          objectCaching: false,
+          originX: "left",
+          originY: "top"
+        });
+        layer.add(bleedObj);
+      }
+      const offsetPathData = generateDielinePath({
+        shape,
+        width: cutW,
+        height: cutH,
+        radius: cutR,
+        x: cx,
+        y: cy,
+        holes: holeData
+      });
+      const offsetBorderObj = new Path(offsetPathData, {
+        fill: null,
+        stroke: "#666",
+        // Grey
+        strokeWidth: 1,
+        strokeDashArray: [4, 4],
+        // Dashed
+        selectable: false,
+        evented: false,
+        originX: "left",
+        originY: "top"
+      });
+      layer.add(offsetBorderObj);
+    }
+    const borderPathData = generateDielinePath({
+      shape,
+      width,
+      height,
+      radius,
+      x: cx,
+      y: cy,
+      holes: holeData
+    });
+    const borderObj = new Path(borderPathData, {
+      fill: "transparent",
+      stroke: "red",
+      strokeWidth: 1,
+      strokeDashArray: style === "dashed" ? [5, 5] : void 0,
+      selectable: false,
+      evented: false,
+      originX: "left",
+      originY: "top"
+    });
+    layer.add(borderObj);
+    editor.canvas.requestRenderAll();
+  }
+  getGeometry(editor) {
+    var _a, _b;
+    const { shape, width, height, radius, position, borderLength } = this.options;
+    const canvasW = editor.canvas.width || 800;
+    const canvasH = editor.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;
+    return {
+      shape,
+      x: cx,
+      y: cy,
+      width: visualWidth,
+      height: visualHeight,
+      radius
+    };
+  }
+};
+
+// src/film.ts
+import { Image as Image2, PooderLayer as PooderLayer3 } from "@pooder/core";
+var FilmTool = class {
+  constructor() {
+    this.name = "FilmTool";
+    this.options = {
+      url: "",
+      opacity: 0.5
+    };
+    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
+          }
+        }
+      }
+    };
+  }
+  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();
+      }
+    }
+  }
+  onUpdate(editor, state) {
+  }
+  initLayer(editor) {
+    let overlayLayer = editor.getLayer("overlay");
+    if (!overlayLayer) {
+      const width = editor.state.width;
+      const height = editor.state.height;
+      const layer = new PooderLayer3([], {
+        width,
+        height,
+        left: 0,
+        top: 0,
+        originX: "left",
+        originY: "top",
+        selectable: false,
+        evented: false,
+        subTargetCheck: false,
+        interactive: false,
+        data: {
+          id: "overlay"
+        }
+      });
+      editor.canvas.add(layer);
+      editor.canvas.bringObjectToFront(layer);
+    }
+  }
+  async updateFilm(editor, options) {
+    const layer = editor.getLayer("overlay");
+    if (!layer) {
+      console.warn("[FilmTool] Overlay layer not found");
+      return;
+    }
+    const { url, opacity } = options;
+    if (!url) {
+      const img2 = editor.getObject("film-image", "overlay");
+      if (img2) {
+        layer.remove(img2);
+        editor.canvas.requestRenderAll();
+      }
+      return;
+    }
+    const width = editor.state.width;
+    const height = editor.state.height;
+    let img = editor.getObject("film-image", "overlay");
+    try {
+      if (img) {
+        if (img.getSrc() !== url) {
+          await img.setSrc(url);
+        }
+        img.set({ opacity });
+      } else {
+        img = await Image2.fromURL(url, { crossOrigin: "anonymous" });
+        img.scaleToWidth(width);
+        if (img.getScaledHeight() < height)
+          img.scaleToHeight(height);
+        img.set({
+          originX: "left",
+          originY: "top",
+          left: 0,
+          top: 0,
+          opacity,
+          selectable: false,
+          evented: false,
+          data: { id: "film-image" }
+        });
+        layer.add(img);
+      }
+      editor.canvas.requestRenderAll();
+    } catch (error) {
+      console.error("[FilmTool] Failed to load film image", url, error);
+    }
+  }
+};
+
+// src/hole.ts
+import { Circle as Circle2, Group, Point } from "@pooder/core";
+var HoleTool = class {
+  constructor() {
+    this.name = "HoleTool";
+    this.options = {
+      innerRadius: 15,
+      outerRadius: 25,
+      style: "solid",
+      holes: []
+    };
+    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"
+      },
+      holes: {
+        type: "json",
+        label: "Holes"
+      }
+    };
+    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.options = {
+            innerRadius: 15,
+            outerRadius: 25,
+            style: "solid",
+            holes: [defaultPos]
+          };
+          this.redraw(editor);
+          const dielineTool = editor.getExtension("DielineTool");
+          if (dielineTool && dielineTool.updateDieline) {
+            dielineTool.updateDieline(editor);
+          }
+          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);
+          }
+          return true;
+        },
+        schema: {
+          x: {
+            type: "number",
+            label: "X Position",
+            required: true
+          },
+          y: {
+            type: "number",
+            label: "Y Position",
+            required: true
+          }
+        }
+      },
+      clearHoles: {
+        execute: (editor) => {
+          this.options.holes = [];
+          this.redraw(editor);
+          const dielineTool = editor.getExtension("DielineTool");
+          if (dielineTool && dielineTool.updateDieline) {
+            dielineTool.updateDieline(editor);
+          }
+          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 = 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)
+    };
+  }
+  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 Point(target.left, target.top);
+        const newPos = this.calculateConstrainedPosition(p, geometry);
+        target.set({
+          left: newPos.x,
+          top: newPos.y
+        });
+      };
+      editor.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);
+      };
+      editor.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) {
+        const topCenter = { x: g.x, y: g.y - g.height / 2 };
+        const snapped = getNearestPointOnDieline(topCenter, { ...g, holes: [] });
+        defaultPos = snapped;
+      }
+      opts.holes = [defaultPos];
+    }
+    this.options = { ...opts };
+    this.redraw(editor);
+    const dielineTool = editor.getExtension("DielineTool");
+    if (dielineTool && dielineTool.updateDieline) {
+      dielineTool.updateDieline(editor);
+    }
+  }
+  teardown(editor) {
+    if (this.handleMoving) {
+      editor.canvas.off("object:moving", this.handleMoving);
+      this.handleMoving = null;
+    }
+    if (this.handleModified) {
+      editor.canvas.off("object:modified", this.handleModified);
+      this.handleModified = null;
+    }
+    const objects = editor.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) {
+  }
+  syncHolesFromCanvas(editor) {
+    const objects = editor.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);
+    }
+  }
+  redraw(editor) {
+    const canvas = editor.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;
+    if (!holes || holes.length === 0) {
+      canvas.requestRenderAll();
+      return;
+    }
+    holes.forEach((hole, index) => {
+      const innerCircle = new Circle2({
+        radius: innerRadius,
+        fill: "transparent",
+        stroke: "red",
+        strokeWidth: 2,
+        originX: "center",
+        originY: "center"
+      });
+      const outerCircle = new Circle2({
+        radius: outerRadius,
+        fill: "transparent",
+        stroke: "#666",
+        strokeWidth: 1,
+        strokeDashArray: style === "dashed" ? [5, 5] : void 0,
+        originX: "center",
+        originY: "center"
+      });
+      const holeGroup = new Group([outerCircle, innerCircle], {
+        left: hole.x,
+        top: hole.y,
+        originX: "center",
+        originY: "center",
+        selectable: true,
+        hasControls: false,
+        // Don't allow resizing/rotating
+        hasBorders: false,
+        subTargetCheck: false,
+        opacity: 0,
+        // Default hidden
+        hoverCursor: "move",
+        data: { type: "hole-marker", index }
+      });
+      holeGroup.name = "hole-marker";
+      holeGroup.on("mouseover", () => {
+        holeGroup.set("opacity", 1);
+        canvas.requestRenderAll();
+      });
+      holeGroup.on("mouseout", () => {
+        if (canvas.getActiveObject() !== holeGroup) {
+          holeGroup.set("opacity", 0);
+          canvas.requestRenderAll();
+        }
+      });
+      holeGroup.on("selected", () => {
+        holeGroup.set("opacity", 1);
+        canvas.requestRenderAll();
+      });
+      holeGroup.on("deselected", () => {
+        holeGroup.set("opacity", 0);
+        canvas.requestRenderAll();
+      });
+      canvas.add(holeGroup);
+      canvas.bringObjectToFront(holeGroup);
+    });
+    canvas.requestRenderAll();
+  }
+  calculateConstrainedPosition(p, g) {
+    const options = {
+      ...g,
+      holes: []
+      // We don't need holes for boundary calculation
+    };
+    const nearest = getNearestPointOnDieline({ x: p.x, y: p.y }, options);
+    const nearestP = new Point(nearest.x, nearest.y);
+    const dist = p.distanceFrom(nearestP);
+    const v = p.subtract(nearestP);
+    const center = new Point(g.x, g.y);
+    const centerToNearest = nearestP.subtract(center);
+    const distToCenter = p.distanceFrom(center);
+    const nearestDistToCenter = nearestP.distanceFrom(center);
+    let signedDist = dist;
+    if (distToCenter < nearestDistToCenter) {
+      signedDist = -dist;
+    }
+    let clampedDist = signedDist;
+    if (signedDist > 0) {
+      clampedDist = Math.min(signedDist, this.options.innerRadius);
+    } else {
+      clampedDist = Math.max(signedDist, -this.options.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);
+  }
+};
+
+// src/image.ts
+import { Image as Image3, PooderLayer as PooderLayer4 } from "@pooder/core";
+var ImageTool = class {
+  constructor() {
+    this.name = "ImageTool";
+    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"
+      }
+    };
+    this.commands = {
+      setUserImage: {
+        execute: (editor, url, opacity) => {
+          if (this.options.url === url && this.options.opacity === opacity) return true;
+          this.options.url = url;
+          this.options.opacity = opacity;
+          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
+          }
+        }
+      }
+    };
+  }
+  onMount(editor) {
+    this.ensureLayer(editor);
+  }
+  onUnmount(editor) {
+    const layer = editor.getLayer("user");
+    if (layer) {
+      const userImage = editor.getObject("user-image", "user");
+      if (userImage) {
+        layer.remove(userImage);
+        editor.canvas.requestRenderAll();
+      }
+    }
+  }
+  onUpdate(editor, state) {
+    this.updateImage(editor, this.options);
+  }
+  ensureLayer(editor) {
+    let userLayer = editor.getLayer("user");
+    if (!userLayer) {
+      userLayer = new PooderLayer4([], {
+        width: editor.state.width,
+        height: editor.state.height,
+        left: 0,
+        top: 0,
+        originX: "left",
+        originY: "top",
+        selectable: false,
+        evented: true,
+        subTargetCheck: true,
+        interactive: true,
+        data: {
+          id: "user"
+        }
+      });
+      editor.canvas.add(userLayer);
+    }
+  }
+  updateImage(editor, opts) {
+    var _a, _b;
+    let { url, opacity } = opts;
+    const layer = editor.getLayer("user");
+    if (!layer) {
+      console.warn("[ImageTool] User layer not found");
+      return;
+    }
+    const userImage = editor.getObject("user-image", "user");
+    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, url, opacity, userImage);
+      } else {
+        if (userImage.opacity !== opacity) {
+          userImage.set({ opacity });
+          editor.canvas.requestRenderAll();
+        }
+      }
+    } else {
+      this.loadImage(editor, layer, url, opacity);
+    }
+  }
+  loadImage(editor, layer, url, opacity, oldImage) {
+    Image3.fromURL(url).then((image) => {
+      if (oldImage) {
+        const { left, top, scaleX, scaleY, angle } = oldImage;
+        image.set({ left, top, scaleX, scaleY, angle });
+        layer.remove(oldImage);
+      }
+      image.set({
+        opacity,
+        data: {
+          id: "user-image"
+        }
+      });
+      layer.add(image);
+      editor.canvas.requestRenderAll();
+    }).catch((err) => {
+      console.error("Failed to load image", url, err);
+    });
+  }
+};
+
+// src/white-ink.ts
+import {
+  Image as Image4,
+  filters,
+  PooderLayer as PooderLayer5
+} from "@pooder/core";
+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" }
+    };
+    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
+          }
+        }
+      }
+    };
+  }
+  onMount(editor) {
+    this.setup(editor);
+  }
+  onUnmount(editor) {
+    this.teardown(editor);
+  }
+  onDestroy(editor) {
+    this.teardown(editor);
+  }
+  setup(editor) {
+    let userLayer = editor.getLayer("user");
+    if (!userLayer) {
+      userLayer = new PooderLayer5([], {
+        width: editor.state.width,
+        height: editor.state.height,
+        left: 0,
+        top: 0,
+        originX: "left",
+        originY: "top",
+        selectable: false,
+        evented: true,
+        subTargetCheck: true,
+        interactive: true,
+        data: {
+          id: "user"
+        }
+      });
+      editor.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);
+        }
+      };
+      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);
+    }
+    this.updateWhiteInk(editor, this.options);
+  }
+  teardown(editor) {
+    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);
+      this.syncHandler = void 0;
+    }
+    const layer = editor.getLayer("user");
+    if (layer) {
+      const whiteInk = editor.getObject("white-ink", "user");
+      if (whiteInk) {
+        layer.remove(whiteInk);
+      }
+    }
+    const userImage = editor.getObject("user-image", "user");
+    if (userImage && userImage.clipPath) {
+      userImage.set({ clipPath: void 0 });
+    }
+    editor.canvas.requestRenderAll();
+  }
+  onUpdate(editor, state) {
+    this.updateWhiteInk(editor, this.options);
+  }
+  updateWhiteInk(editor, opts) {
+    var _a, _b;
+    const { customMask, opacity, enableClip } = opts;
+    const layer = editor.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");
+    if (!customMask) {
+      if (whiteInk) {
+        layer.remove(whiteInk);
+      }
+      if (userImage && userImage.clipPath) {
+        userImage.set({ clipPath: void 0 });
+      }
+      editor.canvas.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);
+      } else {
+        if (whiteInk.opacity !== opacity) {
+          whiteInk.set({ opacity });
+          editor.canvas.requestRenderAll();
+        }
+      }
+    } else {
+      this.loadWhiteInk(editor, layer, customMask, opacity, enableClip);
+    }
+    if (userImage) {
+      if (enableClip) {
+        if (!userImage.clipPath) {
+          this.applyClipPath(editor, customMask);
+        }
+      } else {
+        if (userImage.clipPath) {
+          userImage.set({ clipPath: void 0 });
+          editor.canvas.requestRenderAll();
+        }
+      }
+    }
+  }
+  loadWhiteInk(editor, layer, url, opacity, enableClip, oldImage) {
+    Image4.fromURL(url, { crossOrigin: "anonymous" }).then((image) => {
+      var _a;
+      if (oldImage) {
+        layer.remove(oldImage);
+      }
+      (_a = image.filters) == null ? void 0 : _a.push(new filters.BlendColor({
+        color: "#FFFFFF",
+        mode: "add"
+      }));
+      image.applyFilters();
+      image.set({
+        opacity,
+        selectable: false,
+        evented: false,
+        data: {
+          id: "white-ink"
+        }
+      });
+      layer.add(image);
+      const userImage = editor.getObject("user-image", "user");
+      if (userImage) {
+        layer.remove(userImage);
+        layer.add(userImage);
+      }
+      if (enableClip) {
+        this.applyClipPath(editor, url);
+      } else if (userImage) {
+        userImage.set({ clipPath: void 0 });
+      }
+      this.syncWithUserImage(editor);
+      editor.canvas.requestRenderAll();
+    }).catch((err) => {
+      console.error("Failed to load white ink mask", url, err);
+    });
+  }
+  applyClipPath(editor, url) {
+    const userImage = editor.getObject("user-image", "user");
+    if (!userImage) return;
+    Image4.fromURL(url, { crossOrigin: "anonymous" }).then((maskImage) => {
+      maskImage.set({
+        originX: "center",
+        originY: "center",
+        left: 0,
+        top: 0,
+        // Scale to fit userImage if dimensions differ
+        scaleX: userImage.width / maskImage.width,
+        scaleY: userImage.height / maskImage.height
+      });
+      userImage.set({ clipPath: maskImage });
+      editor.canvas.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");
+    if (userImage && whiteInk) {
+      whiteInk.set({
+        left: userImage.left,
+        top: userImage.top,
+        scaleX: userImage.scaleX,
+        scaleY: userImage.scaleY,
+        angle: userImage.angle,
+        skewX: userImage.skewX,
+        skewY: userImage.skewY,
+        flipX: userImage.flipX,
+        flipY: userImage.flipY,
+        originX: userImage.originX,
+        originY: userImage.originY
+      });
+    }
+  }
+};
+
+// src/ruler.ts
+import { PooderLayer as PooderLayer6, Rect as Rect3, Line, Text } from "@pooder/core";
+var RulerTool = class {
+  constructor() {
+    this.name = "RulerTool";
+    this.options = {
+      unit: "px",
+      thickness: 20,
+      backgroundColor: "#f0f0f0",
+      textColor: "#333333",
+      lineColor: "#999999",
+      fontSize: 10
+    };
+    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
+          }
+        }
+      },
+      setTheme: {
+        execute: (editor, theme) => {
+          const newOptions = { ...this.options, ...theme };
+          if (JSON.stringify(newOptions) === JSON.stringify(this.options)) return true;
+          this.options = newOptions;
+          this.updateRuler(editor);
+          return true;
+        },
+        schema: {
+          theme: {
+            type: "object",
+            label: "Theme",
+            required: true
+          }
+        }
+      }
+    };
+  }
+  onMount(editor) {
+    this.createLayer(editor);
+  }
+  onUnmount(editor) {
+    this.destroyLayer(editor);
+  }
+  onUpdate(editor, state) {
+  }
+  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(editor) {
+    let layer = this.getLayer(editor);
+    if (!layer) {
+      const width = editor.canvas.width || 800;
+      const height = editor.canvas.height || 600;
+      layer = new PooderLayer6([], {
+        width,
+        height,
+        selectable: false,
+        evented: false,
+        data: { id: "ruler-overlay" }
+      });
+      editor.canvas.add(layer);
+    }
+    editor.canvas.bringObjectToFront(layer);
+    this.updateRuler(editor);
+  }
+  destroyLayer(editor) {
+    const layer = this.getLayer(editor);
+    if (layer) {
+      editor.canvas.remove(layer);
+    }
+  }
+  updateRuler(editor) {
+    const layer = this.getLayer(editor);
+    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 Rect3({
+      left: 0,
+      top: 0,
+      width,
+      height: thickness,
+      fill: backgroundColor,
+      selectable: false,
+      evented: false
+    });
+    const leftBg = new Rect3({
+      left: 0,
+      top: 0,
+      width: thickness,
+      height,
+      fill: backgroundColor,
+      selectable: false,
+      evented: false
+    });
+    const cornerBg = new Rect3({
+      left: 0,
+      top: 0,
+      width: thickness,
+      height: thickness,
+      fill: backgroundColor,
+      stroke: lineColor,
+      strokeWidth: 1,
+      selectable: false,
+      evented: false
+    });
+    layer.add(topBg, leftBg, cornerBg);
+    const step = 100;
+    const subStep = 10;
+    const midStep = 50;
+    for (let x = 0; x <= width; x += subStep) {
+      if (x < thickness) continue;
+      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 Line([x, thickness - len, x, thickness], {
+        stroke: lineColor,
+        strokeWidth: 1,
+        selectable: false,
+        evented: false
+      });
+      layer.add(line);
+      if (x % step === 0) {
+        const text = new Text(x.toString(), {
+          left: x + 2,
+          top: 2,
+          fontSize,
+          fill: textColor,
+          fontFamily: "Arial",
+          selectable: false,
+          evented: false
+        });
+        layer.add(text);
+      }
+    }
+    for (let y = 0; y <= height; y += subStep) {
+      if (y < thickness) continue;
+      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 Line([thickness - len, y, thickness, y], {
+        stroke: lineColor,
+        strokeWidth: 1,
+        selectable: false,
+        evented: false
+      });
+      layer.add(line);
+      if (y % step === 0) {
+        const text = new Text(y.toString(), {
+          angle: -90,
+          left: thickness / 2 - fontSize / 3,
+          // approximate centering
+          top: y + fontSize,
+          fontSize,
+          fill: textColor,
+          fontFamily: "Arial",
+          originX: "center",
+          originY: "center",
+          selectable: false,
+          evented: false
+        });
+        layer.add(text);
+      }
+    }
+    editor.canvas.bringObjectToFront(layer);
+    editor.canvas.requestRenderAll();
+  }
+};
+export {
+  BackgroundTool,
+  DielineTool,
+  FilmTool,
+  HoleTool,
+  ImageTool,
+  RulerTool,
+  WhiteInkTool
+};