@pooder/kit 6.1.1 → 6.2.0

package/dist/index.js

@@ -1075,13 +1075,15 @@ __export(index_exports, {
   WhiteInkTool: () => WhiteInkTool,
   computeImageCoverScale: () => getCoverScale,
   computeWhiteInkCoverScale: () => getCoverScale,
+  createDefaultDielineState: () => createDefaultDielineState,
   createDielineCommands: () => createDielineCommands,
   createDielineConfigurations: () => createDielineConfigurations,
   createImageCommands: () => createImageCommands,
   createImageConfigurations: () => createImageConfigurations,
   createWhiteInkCommands: () => createWhiteInkCommands,
   createWhiteInkConfigurations: () => createWhiteInkConfigurations,
-  evaluateVisibilityExpr: () => evaluateVisibilityExpr
+  evaluateVisibilityExpr: () => evaluateVisibilityExpr,
+  readDielineState: () => readDielineState
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1485,6 +1487,7 @@ var WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
 var WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
 var WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
 var DIELINE_LAYER_ID = "dieline-overlay";
+var FEATURE_DIELINE_LAYER_ID = "feature-dieline-overlay";
 var FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
 var RULER_LAYER_ID = "ruler-overlay";
 var FILM_LAYER_ID = "overlay";
@@ -1626,6 +1629,18 @@ function normalizeFitMode2(value, fallback) {
   }
   return fallback;
 }
+function normalizeRegionUnit(value, fallback) {
+  if (value === "px" || value === "normalized") {
+    return value;
+  }
+  return fallback;
+}
+function normalizeRegistrationFrame(value, fallback) {
+  if (value === "trim" || value === "cut" || value === "bleed" || value === "focus" || value === "viewport") {
+    return value;
+  }
+  return fallback;
+}
 function normalizeAnchor(value, fallback) {
   if (typeof value !== "string") return fallback;
   const trimmed = value.trim();
@@ -1636,6 +1651,63 @@ function normalizeOrder(value, fallback) {
   if (!Number.isFinite(numeric)) return fallback;
   return numeric;
 }
+function normalizeRegionValue(value, fallback) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : fallback;
+}
+function normalizeRegistrationRegion(raw, fallback) {
+  if (!raw || typeof raw !== "object") {
+    return fallback ? { ...fallback } : void 0;
+  }
+  const input = raw;
+  const base = fallback || {
+    left: 0,
+    top: 0,
+    width: 1,
+    height: 1,
+    unit: "normalized"
+  };
+  return {
+    left: normalizeRegionValue(input.left, base.left),
+    top: normalizeRegionValue(input.top, base.top),
+    width: normalizeRegionValue(input.width, base.width),
+    height: normalizeRegionValue(input.height, base.height),
+    unit: normalizeRegionUnit(input.unit, base.unit)
+  };
+}
+function normalizeRegistration(raw, fallback) {
+  if (!raw || typeof raw !== "object") {
+    return fallback ? {
+      sourceRegion: fallback.sourceRegion ? { ...fallback.sourceRegion } : void 0,
+      targetFrame: fallback.targetFrame,
+      fit: fallback.fit
+    } : void 0;
+  }
+  const input = raw;
+  const normalized = {
+    sourceRegion: normalizeRegistrationRegion(
+      input.sourceRegion,
+      fallback == null ? void 0 : fallback.sourceRegion
+    ),
+    targetFrame: normalizeRegistrationFrame(
+      input.targetFrame,
+      (fallback == null ? void 0 : fallback.targetFrame) || "trim"
+    ),
+    fit: normalizeFitMode2(input.fit, (fallback == null ? void 0 : fallback.fit) || "stretch")
+  };
+  if (!normalized.sourceRegion) {
+    return void 0;
+  }
+  return normalized;
+}
+function cloneRegistration(registration) {
+  if (!registration) return void 0;
+  return {
+    sourceRegion: registration.sourceRegion ? { ...registration.sourceRegion } : void 0,
+    targetFrame: registration.targetFrame,
+    fit: registration.fit
+  };
+}
 function normalizeLayer(raw, index, fallback) {
   const fallbackLayer = fallback || {
     id: `layer-${index + 1}`,
@@ -1649,7 +1721,10 @@ function normalizeLayer(raw, index, fallback) {
     src: ""
   };
   if (!raw || typeof raw !== "object") {
-    return { ...fallbackLayer };
+    return {
+      ...fallbackLayer,
+      registration: cloneRegistration(fallbackLayer.registration)
+    };
   }
   const input = raw;
   const kind = normalizeLayerKind(input.kind, fallbackLayer.kind);
@@ -1663,7 +1738,8 @@ function normalizeLayer(raw, index, fallback) {
     enabled: typeof input.enabled === "boolean" ? input.enabled : fallbackLayer.enabled,
     exportable: typeof input.exportable === "boolean" ? input.exportable : fallbackLayer.exportable,
     color: kind === "color" ? typeof input.color === "string" ? input.color : typeof fallbackLayer.color === "string" ? fallbackLayer.color : "#ffffff" : void 0,
-    src: kind === "image" ? typeof input.src === "string" ? input.src.trim() : typeof fallbackLayer.src === "string" ? fallbackLayer.src : "" : void 0
+    src: kind === "image" ? typeof input.src === "string" ? input.src.trim() : typeof fallbackLayer.src === "string" ? fallbackLayer.src : "" : void 0,
+    registration: kind === "image" ? normalizeRegistration(input.registration, fallbackLayer.registration) : void 0
   };
 }
 function normalizeConfig(raw) {
@@ -1693,7 +1769,10 @@ function normalizeConfig(raw) {
 function cloneConfig(config) {
   return {
     version: config.version,
-    layers: (config.layers || []).map((layer) => ({ ...layer }))
+    layers: (config.layers || []).map((layer) => ({
+      ...layer,
+      registration: cloneRegistration(layer.registration)
+    }))
   };
 }
 function mergeConfig(base, patch) {
@@ -1944,6 +2023,41 @@ var BackgroundTool = class {
       height: layout.trimRect.height
     };
   }
+  resolveTargetFrameRect(frame) {
+    if (frame === "viewport") {
+      return this.getViewportRect();
+    }
+    const layout = this.resolveSceneLayout();
+    if (!layout) {
+      return frame === "focus" ? this.getViewportRect() : null;
+    }
+    switch (frame) {
+      case "trim":
+      case "focus":
+        return {
+          left: layout.trimRect.left,
+          top: layout.trimRect.top,
+          width: layout.trimRect.width,
+          height: layout.trimRect.height
+        };
+      case "cut":
+        return {
+          left: layout.cutRect.left,
+          top: layout.cutRect.top,
+          width: layout.cutRect.width,
+          height: layout.cutRect.height
+        };
+      case "bleed":
+        return {
+          left: layout.bleedRect.left,
+          top: layout.bleedRect.top,
+          width: layout.bleedRect.width,
+          height: layout.bleedRect.height
+        };
+      default:
+        return null;
+    }
+  }
   resolveAnchorRect(anchor) {
     if (anchor === "focus") {
       return this.resolveFocusRect() || this.getViewportRect();
@@ -1976,6 +2090,53 @@ var BackgroundTool = class {
       scaleY: scale
     };
   }
+  resolveRegistrationRegion(region, sourceSize) {
+    const sourceWidth = Math.max(1, Number(sourceSize.width || 0));
+    const sourceHeight = Math.max(1, Number(sourceSize.height || 0));
+    const width = region.unit === "normalized" ? region.width * sourceWidth : region.width;
+    const height = region.unit === "normalized" ? region.height * sourceHeight : region.height;
+    const left = region.unit === "normalized" ? region.left * sourceWidth : region.left;
+    const top = region.unit === "normalized" ? region.top * sourceHeight : region.top;
+    if (!Number.isFinite(left) || !Number.isFinite(top) || !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+      return null;
+    }
+    return { left, top, width, height };
+  }
+  resolveRegistrationPlacement(layer, sourceSize) {
+    const registration = layer.registration;
+    if (!(registration == null ? void 0 : registration.sourceRegion)) return null;
+    const targetRect = this.resolveTargetFrameRect(
+      registration.targetFrame || "trim"
+    );
+    if (!targetRect) return null;
+    const sourceRegion = this.resolveRegistrationRegion(
+      registration.sourceRegion,
+      sourceSize
+    );
+    if (!sourceRegion) return null;
+    const fit = registration.fit || "stretch";
+    const baseScaleX = targetRect.width / sourceRegion.width;
+    const baseScaleY = targetRect.height / sourceRegion.height;
+    if (fit === "stretch") {
+      return {
+        left: targetRect.left - sourceRegion.left * baseScaleX,
+        top: targetRect.top - sourceRegion.top * baseScaleY,
+        scaleX: baseScaleX,
+        scaleY: baseScaleY
+      };
+    }
+    const uniformScale = fit === "contain" ? Math.min(baseScaleX, baseScaleY) : Math.max(baseScaleX, baseScaleY);
+    const alignedWidth = sourceRegion.width * uniformScale;
+    const alignedHeight = sourceRegion.height * uniformScale;
+    const offsetLeft = targetRect.left + (targetRect.width - alignedWidth) / 2;
+    const offsetTop = targetRect.top + (targetRect.height - alignedHeight) / 2;
+    return {
+      left: offsetLeft - sourceRegion.left * uniformScale,
+      top: offsetTop - sourceRegion.top * uniformScale,
+      scaleX: uniformScale,
+      scaleY: uniformScale
+    };
+  }
   buildColorLayerSpec(layer) {
     const rect = this.resolveAnchorRect(layer.anchor);
     return {
@@ -2009,8 +2170,11 @@ var BackgroundTool = class {
     if (!src) return [];
     const sourceSize = this.sourceSizeCache.getSourceSize(src);
     if (!sourceSize) return [];
-    const rect = this.resolveAnchorRect(layer.anchor);
-    const placement = this.resolveImagePlacement(rect, sourceSize, layer.fit);
+    const placement = this.resolveRegistrationPlacement(layer, sourceSize) || this.resolveImagePlacement(
+      this.resolveAnchorRect(layer.anchor),
+      sourceSize,
+      layer.fit
+    );
     return [
       {
         id: `background.layer.${layer.id}.image`,
@@ -3074,6 +3238,7 @@ var IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
   "rotate",
   "scale"
 ];
+var IMAGE_MOVE_SNAP_THRESHOLD_PX = 6;
 var IMAGE_CONTROL_DESCRIPTORS = [
   {
     key: "tl",
@@ -3118,12 +3283,17 @@ var ImageTool = class {
     this.renderSeq = 0;
     this.imageSpecs = [];
     this.overlaySpecs = [];
+    this.activeSnapX = null;
+    this.activeSnapY = null;
+    this.movingImageId = null;
+    this.hasRenderedSnapGuides = false;
     this.subscriptions = new SubscriptionBag();
     this.imageControlsByCapabilityKey = /* @__PURE__ */ new Map();
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
       if (!this.isToolActive) {
+        this.endMoveSnapInteraction();
         this.setImageFocus(null, {
           syncCanvasSelection: true,
           skipRender: true
@@ -3174,6 +3344,7 @@ var ImageTool = class {
       this.updateImages();
     };
     this.onSelectionCleared = () => {
+      this.endMoveSnapInteraction();
       this.setImageFocus(null, {
         syncCanvasSelection: false,
         skipRender: true
@@ -3182,6 +3353,8 @@ var ImageTool = class {
       this.updateImages();
     };
     this.onSceneLayoutChanged = () => {
+      var _a;
+      (_a = this.canvasService) == null ? void 0 : _a.requestRenderAll();
       this.updateImages();
     };
     this.onSceneGeometryChanged = () => {
@@ -3194,7 +3367,11 @@ var ImageTool = class {
       const id = (_a = target == null ? void 0 : target.data) == null ? void 0 : _a.id;
       const layerId = (_b = target == null ? void 0 : target.data) == null ? void 0 : _b.layerId;
       if (typeof id !== "string" || layerId !== IMAGE_OBJECT_LAYER_ID) return;
+      if (this.movingImageId === id) {
+        this.applyMoveSnapToTarget(target);
+      }
       const frame = this.getFrameRect();
+      this.endMoveSnapInteraction();
       if (!frame.width || !frame.height) return;
       const center = target.getCenterPoint ? target.getCenterPoint() : new import_fabric2.Point((_c = target.left) != null ? _c : 0, (_d = target.top) != null ? _d : 0);
       const centerScene = this.canvasService ? this.canvasService.toScenePoint({ x: center.x, y: center.y }) : { x: center.x, y: center.y };
@@ -3258,8 +3435,17 @@ var ImageTool = class {
       }),
       { priority: 300 }
     );
-    this.subscriptions.on(context.eventBus, "tool:activated", this.onToolActivated);
-    this.subscriptions.on(context.eventBus, "object:modified", this.onObjectModified);
+    this.bindCanvasInteractionHandlers();
+    this.subscriptions.on(
+      context.eventBus,
+      "tool:activated",
+      this.onToolActivated
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "object:modified",
+      this.onObjectModified
+    );
     this.subscriptions.on(
       context.eventBus,
       "selection:created",
@@ -3327,6 +3513,8 @@ var ImageTool = class {
     this.imageSpecs = [];
     this.overlaySpecs = [];
     this.imageControlsByCapabilityKey.clear();
+    this.endMoveSnapInteraction();
+    this.unbindCanvasInteractionHandlers();
     this.clearRenderedImages();
     (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
     this.renderProducerDisposable = void 0;
@@ -3336,6 +3524,283 @@ var ImageTool = class {
     }
     this.context = void 0;
   }
+  bindCanvasInteractionHandlers() {
+    if (!this.canvasService || this.canvasObjectMovingHandler) return;
+    this.canvasMouseUpHandler = (e) => {
+      var _a;
+      const target = this.getActiveImageTarget(e == null ? void 0 : e.target);
+      if (target && typeof ((_a = target == null ? void 0 : target.data) == null ? void 0 : _a.id) === "string" && target.data.id === this.movingImageId) {
+        this.applyMoveSnapToTarget(target);
+      }
+      this.endMoveSnapInteraction();
+    };
+    this.canvasObjectMovingHandler = (e) => {
+      this.handleCanvasObjectMoving(e);
+    };
+    this.canvasBeforeRenderHandler = () => {
+      this.handleCanvasBeforeRender();
+    };
+    this.canvasAfterRenderHandler = () => {
+      this.handleCanvasAfterRender();
+    };
+    this.canvasService.canvas.on("mouse:up", this.canvasMouseUpHandler);
+    this.canvasService.canvas.on(
+      "object:moving",
+      this.canvasObjectMovingHandler
+    );
+    this.canvasService.canvas.on(
+      "before:render",
+      this.canvasBeforeRenderHandler
+    );
+    this.canvasService.canvas.on("after:render", this.canvasAfterRenderHandler);
+  }
+  unbindCanvasInteractionHandlers() {
+    if (!this.canvasService) return;
+    if (this.canvasMouseUpHandler) {
+      this.canvasService.canvas.off("mouse:up", this.canvasMouseUpHandler);
+    }
+    if (this.canvasObjectMovingHandler) {
+      this.canvasService.canvas.off(
+        "object:moving",
+        this.canvasObjectMovingHandler
+      );
+    }
+    if (this.canvasBeforeRenderHandler) {
+      this.canvasService.canvas.off(
+        "before:render",
+        this.canvasBeforeRenderHandler
+      );
+    }
+    if (this.canvasAfterRenderHandler) {
+      this.canvasService.canvas.off(
+        "after:render",
+        this.canvasAfterRenderHandler
+      );
+    }
+    this.canvasMouseUpHandler = void 0;
+    this.canvasObjectMovingHandler = void 0;
+    this.canvasBeforeRenderHandler = void 0;
+    this.canvasAfterRenderHandler = void 0;
+  }
+  getActiveImageTarget(target) {
+    var _a, _b;
+    if (!this.isToolActive) return null;
+    if (!target) return null;
+    if (((_a = target == null ? void 0 : target.data) == null ? void 0 : _a.layerId) !== IMAGE_OBJECT_LAYER_ID) return null;
+    if (typeof ((_b = target == null ? void 0 : target.data) == null ? void 0 : _b.id) !== "string") return null;
+    return target;
+  }
+  getTargetBoundsScene(target) {
+    if (!this.canvasService || !target) return null;
+    const rawBounds = typeof target.getBoundingRect === "function" ? target.getBoundingRect() : {
+      left: Number(target.left || 0),
+      top: Number(target.top || 0),
+      width: Number(target.width || 0),
+      height: Number(target.height || 0)
+    };
+    return this.canvasService.toSceneRect({
+      left: Number(rawBounds.left || 0),
+      top: Number(rawBounds.top || 0),
+      width: Number(rawBounds.width || 0),
+      height: Number(rawBounds.height || 0)
+    });
+  }
+  getSnapThresholdScene(px) {
+    if (!this.canvasService) return px;
+    return this.canvasService.toSceneLength(px);
+  }
+  pickSnapMatch(candidates) {
+    if (!candidates.length) return null;
+    const snapThreshold = this.getSnapThresholdScene(
+      IMAGE_MOVE_SNAP_THRESHOLD_PX
+    );
+    let best = null;
+    candidates.forEach((candidate) => {
+      if (Math.abs(candidate.deltaScene) > snapThreshold) return;
+      if (!best || Math.abs(candidate.deltaScene) < Math.abs(best.deltaScene)) {
+        best = candidate;
+      }
+    });
+    return best;
+  }
+  computeMoveSnapMatches(bounds, frame) {
+    if (!bounds || frame.width <= 0 || frame.height <= 0) {
+      return { x: null, y: null };
+    }
+    const xCandidates = [
+      {
+        axis: "x",
+        lineId: "frame-left",
+        kind: "edge",
+        lineScene: frame.left,
+        deltaScene: frame.left - bounds.left
+      },
+      {
+        axis: "x",
+        lineId: "frame-center-x",
+        kind: "center",
+        lineScene: frame.left + frame.width / 2,
+        deltaScene: frame.left + frame.width / 2 - (bounds.left + bounds.width / 2)
+      },
+      {
+        axis: "x",
+        lineId: "frame-right",
+        kind: "edge",
+        lineScene: frame.left + frame.width,
+        deltaScene: frame.left + frame.width - (bounds.left + bounds.width)
+      }
+    ];
+    const yCandidates = [
+      {
+        axis: "y",
+        lineId: "frame-top",
+        kind: "edge",
+        lineScene: frame.top,
+        deltaScene: frame.top - bounds.top
+      },
+      {
+        axis: "y",
+        lineId: "frame-center-y",
+        kind: "center",
+        lineScene: frame.top + frame.height / 2,
+        deltaScene: frame.top + frame.height / 2 - (bounds.top + bounds.height / 2)
+      },
+      {
+        axis: "y",
+        lineId: "frame-bottom",
+        kind: "edge",
+        lineScene: frame.top + frame.height,
+        deltaScene: frame.top + frame.height - (bounds.top + bounds.height)
+      }
+    ];
+    return {
+      x: this.pickSnapMatch(xCandidates),
+      y: this.pickSnapMatch(yCandidates)
+    };
+  }
+  areSnapMatchesEqual(a, b) {
+    if (!a && !b) return true;
+    if (!a || !b) return false;
+    return a.lineId === b.lineId && a.axis === b.axis && a.kind === b.kind;
+  }
+  updateSnapMatchState(nextX, nextY) {
+    var _a;
+    const changed = !this.areSnapMatchesEqual(this.activeSnapX, nextX) || !this.areSnapMatchesEqual(this.activeSnapY, nextY);
+    this.activeSnapX = nextX;
+    this.activeSnapY = nextY;
+    if (changed) {
+      (_a = this.canvasService) == null ? void 0 : _a.requestRenderAll();
+    }
+  }
+  clearSnapPreview() {
+    var _a;
+    this.activeSnapX = null;
+    this.activeSnapY = null;
+    this.hasRenderedSnapGuides = false;
+    (_a = this.canvasService) == null ? void 0 : _a.requestRenderAll();
+  }
+  endMoveSnapInteraction() {
+    this.movingImageId = null;
+    this.clearSnapPreview();
+  }
+  applyMoveSnapToTarget(target) {
+    var _a, _b, _c, _d;
+    if (!this.canvasService) {
+      return { x: null, y: null };
+    }
+    const frame = this.getFrameRect();
+    if (frame.width <= 0 || frame.height <= 0) {
+      return { x: null, y: null };
+    }
+    const bounds = this.getTargetBoundsScene(target);
+    const matches = this.computeMoveSnapMatches(bounds, frame);
+    const deltaScreenX = this.canvasService.toScreenLength(
+      (_b = (_a = matches.x) == null ? void 0 : _a.deltaScene) != null ? _b : 0
+    );
+    const deltaScreenY = this.canvasService.toScreenLength(
+      (_d = (_c = matches.y) == null ? void 0 : _c.deltaScene) != null ? _d : 0
+    );
+    if (deltaScreenX || deltaScreenY) {
+      target.set({
+        left: Number(target.left || 0) + deltaScreenX,
+        top: Number(target.top || 0) + deltaScreenY
+      });
+      target.setCoords();
+    }
+    return matches;
+  }
+  handleCanvasBeforeRender() {
+    if (!this.canvasService) return;
+    if (!this.hasRenderedSnapGuides && !this.activeSnapX && !this.activeSnapY) {
+      return;
+    }
+    this.canvasService.canvas.clearContext(
+      this.canvasService.canvas.contextTop
+    );
+    this.hasRenderedSnapGuides = false;
+  }
+  drawSnapGuideLine(from, to) {
+    if (!this.canvasService) return;
+    const ctx = this.canvasService.canvas.contextTop;
+    if (!ctx) return;
+    const color = this.getConfig("image.control.borderColor", "#1677ff") || "#1677ff";
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y);
+    ctx.lineTo(to.x, to.y);
+    ctx.stroke();
+    ctx.restore();
+  }
+  handleCanvasAfterRender() {
+    if (!this.canvasService || !this.isImageEditingVisible()) {
+      return;
+    }
+    const frame = this.getFrameRect();
+    if (frame.width <= 0 || frame.height <= 0) {
+      return;
+    }
+    const frameScreen = this.getFrameRectScreen(frame);
+    let drew = false;
+    if (this.activeSnapX) {
+      const x = this.canvasService.toScreenPoint({
+        x: this.activeSnapX.lineScene,
+        y: frame.top
+      }).x;
+      this.drawSnapGuideLine(
+        { x, y: frameScreen.top },
+        { x, y: frameScreen.top + frameScreen.height }
+      );
+      drew = true;
+    }
+    if (this.activeSnapY) {
+      const y = this.canvasService.toScreenPoint({
+        x: frame.left,
+        y: this.activeSnapY.lineScene
+      }).y;
+      this.drawSnapGuideLine(
+        { x: frameScreen.left, y },
+        { x: frameScreen.left + frameScreen.width, y }
+      );
+      drew = true;
+    }
+    this.hasRenderedSnapGuides = drew;
+  }
+  handleCanvasObjectMoving(e) {
+    var _a;
+    const target = this.getActiveImageTarget(e == null ? void 0 : e.target);
+    if (!target || !this.canvasService) return;
+    this.movingImageId = typeof ((_a = target == null ? void 0 : target.data) == null ? void 0 : _a.id) === "string" ? target.data.id : null;
+    const frame = this.getFrameRect();
+    if (frame.width <= 0 || frame.height <= 0) {
+      this.endMoveSnapInteraction();
+      return;
+    }
+    const rawBounds = this.getTargetBoundsScene(target);
+    const matches = this.computeMoveSnapMatches(rawBounds, frame);
+    this.updateSnapMatchState(matches.x, matches.y);
+  }
   syncToolActiveFromWorkbench(fallbackId) {
     var _a;
     const wb = (_a = this.context) == null ? void 0 : _a.services.get("WorkbenchService");
@@ -3959,33 +4424,9 @@ var ImageTool = class {
             originY: "top",
             fill: hatchFill,
             opacity: patternFill ? 1 : 0.8,
-            stroke: null,
-            fillRule: "evenodd",
-            selectable: false,
-            evented: false,
-            excludeFromExport: true,
-            objectCaching: false
-          }
-        },
-        {
-          id: "image.cropShapePath",
-          type: "path",
-          data: { id: "image.cropShapePath", zIndex: 6 },
-          layout: {
-            reference: "custom",
-            referenceRect: frameRect,
-            alignX: "start",
-            alignY: "start",
-            offsetX: shapeBounds.x,
-            offsetY: shapeBounds.y
-          },
-          props: {
-            pathData: shapePathData,
-            originX: "left",
-            originY: "top",
-            fill: "rgba(0,0,0,0)",
             stroke: "rgba(255, 0, 0, 0.9)",
             strokeWidth: (_b = (_a = this.canvasService) == null ? void 0 : _a.toSceneLength(1)) != null ? _b : 1,
+            fillRule: "evenodd",
             selectable: false,
             evented: false,
             excludeFromExport: true,
@@ -5118,6 +5559,318 @@ function createDielineConfigurations(state) {
   ];
 }
 
+// src/extensions/dieline/model.ts
+function createDefaultDielineState() {
+  return {
+    shape: DEFAULT_DIELINE_SHAPE,
+    shapeStyle: { ...DEFAULT_DIELINE_SHAPE_STYLE },
+    width: 500,
+    height: 500,
+    radius: 0,
+    offset: 0,
+    padding: 140,
+    mainLine: {
+      width: 2.7,
+      color: "#FF0000",
+      dashLength: 5,
+      style: "solid"
+    },
+    offsetLine: {
+      width: 2.7,
+      color: "#FF0000",
+      dashLength: 5,
+      style: "solid"
+    },
+    insideColor: "rgba(0,0,0,0)",
+    showBleedLines: true,
+    features: []
+  };
+}
+function readDielineState(configService, fallback) {
+  const base = createDefaultDielineState();
+  if (fallback) {
+    Object.assign(base, fallback);
+    if (fallback.mainLine) {
+      base.mainLine = { ...base.mainLine, ...fallback.mainLine };
+    }
+    if (fallback.offsetLine) {
+      base.offsetLine = { ...base.offsetLine, ...fallback.offsetLine };
+    }
+    if (fallback.shapeStyle) {
+      base.shapeStyle = normalizeShapeStyle(fallback.shapeStyle, base.shapeStyle);
+    }
+  }
+  const sizeState = readSizeState(configService);
+  const sourceWidth = Number(configService.get("dieline.customSourceWidthPx", 0));
+  const sourceHeight = Number(
+    configService.get("dieline.customSourceHeightPx", 0)
+  );
+  return {
+    ...base,
+    shape: normalizeDielineShape(
+      configService.get("dieline.shape", base.shape),
+      base.shape
+    ),
+    shapeStyle: normalizeShapeStyle(
+      configService.get("dieline.shapeStyle", base.shapeStyle),
+      base.shapeStyle
+    ),
+    width: sizeState.actualWidthMm,
+    height: sizeState.actualHeightMm,
+    radius: parseLengthToMm(configService.get("dieline.radius", base.radius), "mm"),
+    padding: sizeState.viewPadding,
+    offset: sizeState.cutMode === "outset" ? sizeState.cutMarginMm : sizeState.cutMode === "inset" ? -sizeState.cutMarginMm : 0,
+    mainLine: {
+      width: configService.get("dieline.strokeWidth", base.mainLine.width),
+      color: configService.get("dieline.strokeColor", base.mainLine.color),
+      dashLength: configService.get(
+        "dieline.dashLength",
+        base.mainLine.dashLength
+      ),
+      style: configService.get("dieline.style", base.mainLine.style)
+    },
+    offsetLine: {
+      width: configService.get(
+        "dieline.offsetStrokeWidth",
+        base.offsetLine.width
+      ),
+      color: configService.get(
+        "dieline.offsetStrokeColor",
+        base.offsetLine.color
+      ),
+      dashLength: configService.get(
+        "dieline.offsetDashLength",
+        base.offsetLine.dashLength
+      ),
+      style: configService.get("dieline.offsetStyle", base.offsetLine.style)
+    },
+    insideColor: configService.get("dieline.insideColor", base.insideColor),
+    showBleedLines: configService.get(
+      "dieline.showBleedLines",
+      base.showBleedLines
+    ),
+    features: configService.get("dieline.features", base.features),
+    pathData: configService.get("dieline.pathData", base.pathData),
+    customSourceWidthPx: Number.isFinite(sourceWidth) && sourceWidth > 0 ? sourceWidth : void 0,
+    customSourceHeightPx: Number.isFinite(sourceHeight) && sourceHeight > 0 ? sourceHeight : void 0
+  };
+}
+
+// src/extensions/dieline/renderBuilder.ts
+var DEFAULT_IDS = {
+  inside: "dieline.inside",
+  bleedZone: "dieline.bleed-zone",
+  offsetBorder: "dieline.offset-border",
+  border: "dieline.border",
+  clip: "dieline.clip.image",
+  clipSource: "dieline.effect.clip-path"
+};
+function scaleFeatures(state, scale) {
+  return (state.features || []).map((feature) => ({
+    ...feature,
+    x: feature.x,
+    y: feature.y,
+    width: (feature.width || 0) * scale,
+    height: (feature.height || 0) * scale,
+    radius: (feature.radius || 0) * scale
+  }));
+}
+function buildDielineRenderBundle(options) {
+  const ids = { ...DEFAULT_IDS, ...options.ids || {} };
+  const {
+    state,
+    sceneLayout,
+    canvasWidth,
+    canvasHeight,
+    hasImages,
+    createHatchPattern,
+    includeImageClipEffect = true,
+    clipTargetPassIds = [IMAGE_OBJECT_LAYER_ID],
+    clipVisibility
+  } = options;
+  const { shape, shapeStyle, radius, mainLine, offsetLine, insideColor } = state;
+  const scale = sceneLayout.scale;
+  const cx = sceneLayout.trimRect.centerX;
+  const cy = sceneLayout.trimRect.centerY;
+  const visualWidth = sceneLayout.trimRect.width;
+  const visualHeight = sceneLayout.trimRect.height;
+  const visualRadius = radius * scale;
+  const cutW = sceneLayout.cutRect.width;
+  const cutH = sceneLayout.cutRect.height;
+  const visualOffset = (cutW - visualWidth) / 2;
+  const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
+  const absoluteFeatures = scaleFeatures(state, scale);
+  const cutFeatures = absoluteFeatures.filter((feature) => !feature.skipCut);
+  const common = {
+    shape,
+    shapeStyle,
+    pathData: state.pathData,
+    customSourceWidthPx: state.customSourceWidthPx,
+    customSourceHeightPx: state.customSourceHeightPx,
+    canvasWidth,
+    canvasHeight
+  };
+  const specs = [];
+  if (insideColor && insideColor !== "transparent" && insideColor !== "rgba(0,0,0,0)" && !hasImages) {
+    specs.push({
+      id: ids.inside,
+      type: "path",
+      space: "screen",
+      data: { id: ids.inside, type: "dieline" },
+      props: {
+        pathData: generateDielinePath({
+          ...common,
+          width: cutW,
+          height: cutH,
+          radius: cutR,
+          x: cx,
+          y: cy,
+          features: cutFeatures
+        }),
+        fill: insideColor,
+        stroke: null,
+        selectable: false,
+        evented: false,
+        originX: "left",
+        originY: "top"
+      }
+    });
+  }
+  if (Math.abs(visualOffset) > 1e-4) {
+    const trimPathInput = {
+      ...common,
+      width: visualWidth,
+      height: visualHeight,
+      radius: visualRadius,
+      x: cx,
+      y: cy,
+      features: cutFeatures
+    };
+    const cutPathInput = {
+      ...common,
+      width: cutW,
+      height: cutH,
+      radius: cutR,
+      x: cx,
+      y: cy,
+      features: cutFeatures
+    };
+    if (state.showBleedLines !== false) {
+      const pattern = createHatchPattern == null ? void 0 : createHatchPattern(mainLine.color);
+      if (pattern) {
+        specs.push({
+          id: ids.bleedZone,
+          type: "path",
+          space: "screen",
+          data: { id: ids.bleedZone, type: "dieline" },
+          props: {
+            pathData: generateBleedZonePath(
+              trimPathInput,
+              cutPathInput,
+              visualOffset
+            ),
+            fill: pattern,
+            stroke: null,
+            selectable: false,
+            evented: false,
+            objectCaching: false,
+            originX: "left",
+            originY: "top"
+          }
+        });
+      }
+    }
+    specs.push({
+      id: ids.offsetBorder,
+      type: "path",
+      space: "screen",
+      data: { id: ids.offsetBorder, type: "dieline" },
+      props: {
+        pathData: generateDielinePath(cutPathInput),
+        fill: null,
+        stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
+        strokeWidth: offsetLine.width,
+        strokeDashArray: offsetLine.style === "dashed" ? [offsetLine.dashLength, offsetLine.dashLength] : void 0,
+        selectable: false,
+        evented: false,
+        originX: "left",
+        originY: "top"
+      }
+    });
+  }
+  specs.push({
+    id: ids.border,
+    type: "path",
+    space: "screen",
+    data: { id: ids.border, type: "dieline" },
+    props: {
+      pathData: generateDielinePath({
+        ...common,
+        width: visualWidth,
+        height: visualHeight,
+        radius: visualRadius,
+        x: cx,
+        y: cy,
+        features: absoluteFeatures
+      }),
+      fill: "transparent",
+      stroke: mainLine.style === "hidden" ? null : mainLine.color,
+      strokeWidth: mainLine.width,
+      strokeDashArray: mainLine.style === "dashed" ? [mainLine.dashLength, mainLine.dashLength] : void 0,
+      selectable: false,
+      evented: false,
+      originX: "left",
+      originY: "top"
+    }
+  });
+  if (!includeImageClipEffect) {
+    return { specs, effects: [] };
+  }
+  const clipPathData = generateDielinePath({
+    ...common,
+    width: cutW,
+    height: cutH,
+    radius: cutR,
+    x: cx,
+    y: cy,
+    features: cutFeatures
+  });
+  if (!clipPathData) {
+    return { specs, effects: [] };
+  }
+  return {
+    specs,
+    effects: [
+      {
+        type: "clipPath",
+        id: ids.clip,
+        visibility: clipVisibility,
+        targetPassIds: clipTargetPassIds,
+        source: {
+          id: ids.clipSource,
+          type: "path",
+          space: "screen",
+          data: {
+            id: ids.clipSource,
+            type: "dieline-effect",
+            effect: "clipPath"
+          },
+          props: {
+            pathData: clipPathData,
+            fill: "#000000",
+            stroke: null,
+            originX: "left",
+            originY: "top",
+            selectable: false,
+            evented: false,
+            excludeFromExport: true
+          }
+        }
+      }
+    ]
+  };
+}
+
 // src/extensions/dieline/DielineTool.ts
 var DielineTool = class {
   constructor(options) {
@@ -5125,30 +5878,7 @@ var DielineTool = class {
     this.metadata = {
       name: "DielineTool"
     };
-    this.state = {
-      shape: DEFAULT_DIELINE_SHAPE,
-      shapeStyle: { ...DEFAULT_DIELINE_SHAPE_STYLE },
-      width: 500,
-      height: 500,
-      radius: 0,
-      offset: 0,
-      padding: 140,
-      mainLine: {
-        width: 2.7,
-        color: "#FF0000",
-        dashLength: 5,
-        style: "solid"
-      },
-      offsetLine: {
-        width: 2.7,
-        color: "#FF0000",
-        dashLength: 5,
-        style: "solid"
-      },
-      insideColor: "rgba(0,0,0,0)",
-      showBleedLines: true,
-      features: []
-    };
+    this.state = createDefaultDielineState();
     this.specs = [];
     this.effects = [];
     this.renderSeq = 0;
@@ -5187,156 +5917,34 @@ var DielineTool = class {
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
       () => ({
-        passes: [
-          {
-            id: DIELINE_LAYER_ID,
-            stack: 700,
-            order: 0,
-            replace: true,
-            visibility: {
-              op: "not",
-              expr: {
-                op: "activeToolIn",
-                ids: ["pooder.kit.image", "pooder.kit.white-ink"]
-              }
-            },
-            effects: this.effects,
-            objects: this.specs
-          }
-        ]
-      }),
-      { priority: 250 }
-    );
-    const configService = context.services.get(
-      "ConfigurationService"
-    );
-    if (configService) {
-      const s = this.state;
-      const sizeState = readSizeState(configService);
-      s.shape = normalizeDielineShape(
-        configService.get("dieline.shape", s.shape),
-        s.shape
-      );
-      s.shapeStyle = normalizeShapeStyle(
-        configService.get("dieline.shapeStyle", s.shapeStyle),
-        s.shapeStyle
-      );
-      s.width = sizeState.actualWidthMm;
-      s.height = sizeState.actualHeightMm;
-      s.radius = parseLengthToMm(
-        configService.get("dieline.radius", s.radius),
-        "mm"
-      );
-      s.padding = sizeState.viewPadding;
-      s.offset = sizeState.cutMode === "outset" ? sizeState.cutMarginMm : sizeState.cutMode === "inset" ? -sizeState.cutMarginMm : 0;
-      s.mainLine.width = configService.get(
-        "dieline.strokeWidth",
-        s.mainLine.width
-      );
-      s.mainLine.color = configService.get(
-        "dieline.strokeColor",
-        s.mainLine.color
-      );
-      s.mainLine.dashLength = configService.get(
-        "dieline.dashLength",
-        s.mainLine.dashLength
-      );
-      s.mainLine.style = configService.get("dieline.style", s.mainLine.style);
-      s.offsetLine.width = configService.get(
-        "dieline.offsetStrokeWidth",
-        s.offsetLine.width
-      );
-      s.offsetLine.color = configService.get(
-        "dieline.offsetStrokeColor",
-        s.offsetLine.color
-      );
-      s.offsetLine.dashLength = configService.get(
-        "dieline.offsetDashLength",
-        s.offsetLine.dashLength
-      );
-      s.offsetLine.style = configService.get(
-        "dieline.offsetStyle",
-        s.offsetLine.style
-      );
-      s.insideColor = configService.get("dieline.insideColor", s.insideColor);
-      s.showBleedLines = configService.get(
-        "dieline.showBleedLines",
-        s.showBleedLines
-      );
-      s.features = configService.get("dieline.features", s.features);
-      s.pathData = configService.get("dieline.pathData", s.pathData);
-      const sourceWidth = Number(
-        configService.get("dieline.customSourceWidthPx", 0)
-      );
-      const sourceHeight = Number(
-        configService.get("dieline.customSourceHeightPx", 0)
-      );
-      s.customSourceWidthPx = Number.isFinite(sourceWidth) && sourceWidth > 0 ? sourceWidth : void 0;
-      s.customSourceHeightPx = Number.isFinite(sourceHeight) && sourceHeight > 0 ? sourceHeight : void 0;
-      configService.onAnyChange((e) => {
-        if (e.key.startsWith("size.")) {
-          const nextSize = readSizeState(configService);
-          s.width = nextSize.actualWidthMm;
-          s.height = nextSize.actualHeightMm;
-          s.padding = nextSize.viewPadding;
-          s.offset = nextSize.cutMode === "outset" ? nextSize.cutMarginMm : nextSize.cutMode === "inset" ? -nextSize.cutMarginMm : 0;
-          this.updateDieline();
-          return;
-        }
-        if (e.key.startsWith("dieline.")) {
-          switch (e.key) {
-            case "dieline.shape":
-              s.shape = normalizeDielineShape(e.value, s.shape);
-              break;
-            case "dieline.shapeStyle":
-              s.shapeStyle = normalizeShapeStyle(e.value, s.shapeStyle);
-              break;
-            case "dieline.radius":
-              s.radius = parseLengthToMm(e.value, "mm");
-              break;
-            case "dieline.strokeWidth":
-              s.mainLine.width = e.value;
-              break;
-            case "dieline.strokeColor":
-              s.mainLine.color = e.value;
-              break;
-            case "dieline.dashLength":
-              s.mainLine.dashLength = e.value;
-              break;
-            case "dieline.style":
-              s.mainLine.style = e.value;
-              break;
-            case "dieline.offsetStrokeWidth":
-              s.offsetLine.width = e.value;
-              break;
-            case "dieline.offsetStrokeColor":
-              s.offsetLine.color = e.value;
-              break;
-            case "dieline.offsetDashLength":
-              s.offsetLine.dashLength = e.value;
-              break;
-            case "dieline.offsetStyle":
-              s.offsetLine.style = e.value;
-              break;
-            case "dieline.insideColor":
-              s.insideColor = e.value;
-              break;
-            case "dieline.showBleedLines":
-              s.showBleedLines = e.value;
-              break;
-            case "dieline.features":
-              s.features = e.value;
-              break;
-            case "dieline.pathData":
-              s.pathData = e.value;
-              break;
-            case "dieline.customSourceWidthPx":
-              s.customSourceWidthPx = Number.isFinite(Number(e.value)) && Number(e.value) > 0 ? Number(e.value) : void 0;
-              break;
-            case "dieline.customSourceHeightPx":
-              s.customSourceHeightPx = Number.isFinite(Number(e.value)) && Number(e.value) > 0 ? Number(e.value) : void 0;
-              break;
+        passes: [
+          {
+            id: DIELINE_LAYER_ID,
+            stack: 700,
+            order: 0,
+            replace: true,
+            visibility: {
+              op: "not",
+              expr: {
+                op: "activeToolIn",
+                ids: ["pooder.kit.image", "pooder.kit.white-ink"]
+              }
+            },
+            effects: this.effects,
+            objects: this.specs
           }
+        ]
+      }),
+      { priority: 250 }
+    );
+    const configService = context.services.get(
+      "ConfigurationService"
+    );
+    if (configService) {
+      Object.assign(this.state, readDielineState(configService, this.state));
+      configService.onAnyChange((e) => {
+        if (e.key.startsWith("size.") || e.key.startsWith("dieline.")) {
+          Object.assign(this.state, readDielineState(configService, this.state));
           this.updateDieline();
         }
       });
@@ -5407,272 +6015,34 @@ var DielineTool = class {
     const items = configService.get("image.items", []);
     return Array.isArray(items) && items.length > 0;
   }
-  syncSizeState(configService) {
-    const sizeState = readSizeState(configService);
-    this.state.width = sizeState.actualWidthMm;
-    this.state.height = sizeState.actualHeightMm;
-    this.state.padding = sizeState.viewPadding;
-    this.state.offset = sizeState.cutMode === "outset" ? sizeState.cutMarginMm : sizeState.cutMode === "inset" ? -sizeState.cutMarginMm : 0;
-  }
   buildDielineSpecs(sceneLayout) {
     var _a, _b;
-    const {
-      shape,
-      shapeStyle,
-      radius,
-      mainLine,
-      offsetLine,
-      insideColor,
-      showBleedLines,
-      features
-    } = this.state;
     const hasImages = this.hasImageItems();
-    const canvasW = sceneLayout.canvasWidth || ((_a = this.canvasService) == null ? void 0 : _a.canvas.width) || 800;
-    const canvasH = sceneLayout.canvasHeight || ((_b = this.canvasService) == null ? void 0 : _b.canvas.height) || 600;
-    const scale = sceneLayout.scale;
-    const cx = sceneLayout.trimRect.centerX;
-    const cy = sceneLayout.trimRect.centerY;
-    const visualWidth = sceneLayout.trimRect.width;
-    const visualHeight = sceneLayout.trimRect.height;
-    const visualRadius = radius * scale;
-    const cutW = sceneLayout.cutRect.width;
-    const cutH = sceneLayout.cutRect.height;
-    const visualOffset = (cutW - visualWidth) / 2;
-    const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
-    const absoluteFeatures = (features || []).map((f) => ({
-      ...f,
-      x: f.x,
-      y: f.y,
-      width: (f.width || 0) * scale,
-      height: (f.height || 0) * scale,
-      radius: (f.radius || 0) * scale
-    }));
-    const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
-    const specs = [];
-    if (insideColor && insideColor !== "transparent" && insideColor !== "rgba(0,0,0,0)" && !hasImages) {
-      const productPathData = generateDielinePath({
-        shape,
-        width: cutW,
-        height: cutH,
-        radius: cutR,
-        x: cx,
-        y: cy,
-        features: cutFeatures,
-        shapeStyle,
-        pathData: this.state.pathData,
-        customSourceWidthPx: this.state.customSourceWidthPx,
-        customSourceHeightPx: this.state.customSourceHeightPx,
-        canvasWidth: canvasW,
-        canvasHeight: canvasH
-      });
-      specs.push({
-        id: "dieline.inside",
-        type: "path",
-        space: "screen",
-        data: { id: "dieline.inside", type: "dieline" },
-        props: {
-          pathData: productPathData,
-          fill: insideColor,
-          stroke: null,
-          selectable: false,
-          evented: false,
-          originX: "left",
-          originY: "top"
-        }
-      });
-    }
-    if (Math.abs(visualOffset) > 1e-4) {
-      const bleedPathData = generateBleedZonePath(
-        {
-          shape,
-          width: visualWidth,
-          height: visualHeight,
-          radius: visualRadius,
-          x: cx,
-          y: cy,
-          features: cutFeatures,
-          shapeStyle,
-          pathData: this.state.pathData,
-          customSourceWidthPx: this.state.customSourceWidthPx,
-          customSourceHeightPx: this.state.customSourceHeightPx,
-          canvasWidth: canvasW,
-          canvasHeight: canvasH
-        },
-        {
-          shape,
-          width: cutW,
-          height: cutH,
-          radius: cutR,
-          x: cx,
-          y: cy,
-          features: cutFeatures,
-          shapeStyle,
-          pathData: this.state.pathData,
-          customSourceWidthPx: this.state.customSourceWidthPx,
-          customSourceHeightPx: this.state.customSourceHeightPx,
-          canvasWidth: canvasW,
-          canvasHeight: canvasH
-        },
-        visualOffset
-      );
-      if (showBleedLines !== false) {
-        const pattern = this.createHatchPattern(mainLine.color);
-        if (pattern) {
-          specs.push({
-            id: "dieline.bleed-zone",
-            type: "path",
-            space: "screen",
-            data: { id: "dieline.bleed-zone", type: "dieline" },
-            props: {
-              pathData: bleedPathData,
-              fill: pattern,
-              stroke: null,
-              selectable: false,
-              evented: false,
-              objectCaching: false,
-              originX: "left",
-              originY: "top"
-            }
-          });
-        }
-      }
-      const offsetPathData = generateDielinePath({
-        shape,
-        width: cutW,
-        height: cutH,
-        radius: cutR,
-        x: cx,
-        y: cy,
-        features: cutFeatures,
-        shapeStyle,
-        pathData: this.state.pathData,
-        customSourceWidthPx: this.state.customSourceWidthPx,
-        customSourceHeightPx: this.state.customSourceHeightPx,
-        canvasWidth: canvasW,
-        canvasHeight: canvasH
-      });
-      specs.push({
-        id: "dieline.offset-border",
-        type: "path",
-        space: "screen",
-        data: { id: "dieline.offset-border", type: "dieline" },
-        props: {
-          pathData: offsetPathData,
-          fill: null,
-          stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
-          strokeWidth: offsetLine.width,
-          strokeDashArray: offsetLine.style === "dashed" ? [offsetLine.dashLength, offsetLine.dashLength] : void 0,
-          selectable: false,
-          evented: false,
-          originX: "left",
-          originY: "top"
-        }
-      });
-    }
-    const borderPathData = generateDielinePath({
-      shape,
-      width: visualWidth,
-      height: visualHeight,
-      radius: visualRadius,
-      x: cx,
-      y: cy,
-      features: absoluteFeatures,
-      shapeStyle,
-      pathData: this.state.pathData,
-      customSourceWidthPx: this.state.customSourceWidthPx,
-      customSourceHeightPx: this.state.customSourceHeightPx,
-      canvasWidth: canvasW,
-      canvasHeight: canvasH
-    });
-    specs.push({
-      id: "dieline.border",
-      type: "path",
-      space: "screen",
-      data: { id: "dieline.border", type: "dieline" },
-      props: {
-        pathData: borderPathData,
-        fill: "transparent",
-        stroke: mainLine.style === "hidden" ? null : mainLine.color,
-        strokeWidth: mainLine.width,
-        strokeDashArray: mainLine.style === "dashed" ? [mainLine.dashLength, mainLine.dashLength] : void 0,
-        selectable: false,
-        evented: false,
-        originX: "left",
-        originY: "top"
-      }
-    });
-    return specs;
+    return buildDielineRenderBundle({
+      state: this.state,
+      sceneLayout,
+      canvasWidth: sceneLayout.canvasWidth || ((_a = this.canvasService) == null ? void 0 : _a.canvas.width) || 800,
+      canvasHeight: sceneLayout.canvasHeight || ((_b = this.canvasService) == null ? void 0 : _b.canvas.height) || 600,
+      hasImages,
+      createHatchPattern: (color) => this.createHatchPattern(color),
+      includeImageClipEffect: false
+    }).specs;
   }
   buildImageClipEffects(sceneLayout) {
     var _a, _b;
-    const { shape, shapeStyle, radius, features } = this.state;
-    const canvasW = sceneLayout.canvasWidth || ((_a = this.canvasService) == null ? void 0 : _a.canvas.width) || 800;
-    const canvasH = sceneLayout.canvasHeight || ((_b = this.canvasService) == null ? void 0 : _b.canvas.height) || 600;
-    const scale = sceneLayout.scale;
-    const cx = sceneLayout.trimRect.centerX;
-    const cy = sceneLayout.trimRect.centerY;
-    const visualWidth = sceneLayout.trimRect.width;
-    const visualRadius = radius * scale;
-    const cutW = sceneLayout.cutRect.width;
-    const cutH = sceneLayout.cutRect.height;
-    const visualOffset = (cutW - visualWidth) / 2;
-    const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
-    const absoluteFeatures = (features || []).map((f) => ({
-      ...f,
-      x: f.x,
-      y: f.y,
-      width: (f.width || 0) * scale,
-      height: (f.height || 0) * scale,
-      radius: (f.radius || 0) * scale
-    }));
-    const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
-    const clipPathData = generateDielinePath({
-      shape,
-      width: cutW,
-      height: cutH,
-      radius: cutR,
-      x: cx,
-      y: cy,
-      features: cutFeatures,
-      shapeStyle,
-      pathData: this.state.pathData,
-      customSourceWidthPx: this.state.customSourceWidthPx,
-      customSourceHeightPx: this.state.customSourceHeightPx,
-      canvasWidth: canvasW,
-      canvasHeight: canvasH
-    });
-    if (!clipPathData) return [];
-    return [
-      {
-        type: "clipPath",
-        id: "dieline.clip.image",
-        visibility: {
-          op: "not",
-          expr: { op: "anySessionActive" }
-        },
-        targetPassIds: [IMAGE_OBJECT_LAYER_ID],
-        source: {
-          id: "dieline.effect.clip-path",
-          type: "path",
-          space: "screen",
-          data: {
-            id: "dieline.effect.clip-path",
-            type: "dieline-effect",
-            effect: "clipPath"
-          },
-          props: {
-            pathData: clipPathData,
-            fill: "#000000",
-            stroke: null,
-            originX: "left",
-            originY: "top",
-            selectable: false,
-            evented: false,
-            excludeFromExport: true
-          }
-        }
-      }
-    ];
+    return buildDielineRenderBundle({
+      state: this.state,
+      sceneLayout,
+      canvasWidth: sceneLayout.canvasWidth || ((_a = this.canvasService) == null ? void 0 : _a.canvas.width) || 800,
+      canvasHeight: sceneLayout.canvasHeight || ((_b = this.canvasService) == null ? void 0 : _b.canvas.height) || 600,
+      hasImages: this.hasImageItems(),
+      includeImageClipEffect: true,
+      clipTargetPassIds: [IMAGE_OBJECT_LAYER_ID],
+      clipVisibility: {
+        op: "not",
+        expr: { op: "anySessionActive" }
+      }
+    }).effects;
   }
   updateDieline(_emitEvent = true) {
     void this.updateDielineAsync();
@@ -5682,7 +6052,7 @@ var DielineTool = class {
     const configService = this.getConfigService();
     if (!configService) return;
     const seq = ++this.renderSeq;
-    this.syncSizeState(configService);
+    Object.assign(this.state, readDielineState(configService, this.state));
     const sceneLayout = computeSceneLayout(
       this.canvasService,
       readSizeState(configService)
@@ -5737,7 +6107,7 @@ var DielineTool = class {
       );
       return null;
     }
-    this.syncSizeState(configService);
+    this.state = readDielineState(configService, this.state);
     const sceneLayout = computeSceneLayout(
       this.canvasService,
       readSizeState(configService)
@@ -5889,6 +6259,7 @@ var DielineTool = class {
 
 // src/extensions/feature/FeatureTool.ts
 var import_core5 = require("@pooder/core");
+var import_fabric4 = require("fabric");
 
 // src/extensions/constraints.ts
 var ConstraintRegistry = class {
@@ -6103,7 +6474,9 @@ var FeatureTool = class {
     this.isFeatureSessionActive = false;
     this.sessionOriginalFeatures = null;
     this.hasWorkingChanges = false;
-    this.specs = [];
+    this.markerSpecs = [];
+    this.sessionDielineSpecs = [];
+    this.sessionDielineEffects = [];
     this.renderSeq = 0;
     this.subscriptions = new SubscriptionBag();
     this.handleMoving = null;
@@ -6113,7 +6486,7 @@ var FeatureTool = class {
     this.onToolActivated = (event) => {
       this.isToolActive = event.id === this.id;
       if (!this.isToolActive) {
-        this.restoreSessionFeaturesToConfig();
+        this.suspendFeatureSession();
       }
       this.updateVisibility();
     };
@@ -6133,16 +6506,38 @@ var FeatureTool = class {
     (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
-      () => ({
-        passes: [
+      () => {
+        const passes = [
           {
             id: FEATURE_OVERLAY_LAYER_ID,
             stack: 880,
             order: 0,
-            objects: this.specs
+            replace: true,
+            objects: this.markerSpecs
           }
-        ]
-      }),
+        ];
+        if (this.isSessionVisible()) {
+          passes.push(
+            {
+              id: DIELINE_LAYER_ID,
+              stack: 700,
+              order: 0,
+              replace: false,
+              visibility: { op: "const", value: false },
+              objects: []
+            },
+            {
+              id: FEATURE_DIELINE_LAYER_ID,
+              stack: 705,
+              order: 0,
+              replace: true,
+              effects: this.sessionDielineEffects,
+              objects: this.sessionDielineSpecs
+            }
+          );
+        }
+        return { passes };
+      },
       { priority: 350 }
     );
     const configService = context.services.get(
@@ -6157,12 +6552,22 @@ var FeatureTool = class {
         (e) => {
           if (this.isUpdatingConfig) return;
           if (e.key === "dieline.features") {
-            if (this.isFeatureSessionActive) return;
+            if (this.isFeatureSessionActive && this.hasFeatureSessionDraft()) {
+              return;
+            }
+            if (this.hasFeatureSessionDraft()) {
+              this.clearFeatureSessionState();
+            }
             const next = e.value || [];
             this.workingFeatures = this.cloneFeatures(next);
             this.hasWorkingChanges = false;
             this.redraw();
             this.emitWorkingChange();
+            return;
+          }
+          if (e.key.startsWith("size.") || e.key.startsWith("dieline.")) {
+            void this.refreshGeometry();
+            this.redraw({ enforceConstraints: true });
           }
         }
       );
@@ -6178,7 +6583,8 @@ var FeatureTool = class {
   deactivate(context) {
     var _a;
     this.subscriptions.disposeAll();
-    this.restoreSessionFeaturesToConfig();
+    this.restoreCommittedFeaturesToConfig();
+    this.clearFeatureSessionState();
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
     this.teardown();
@@ -6188,6 +6594,9 @@ var FeatureTool = class {
   updateVisibility() {
     this.redraw();
   }
+  isSessionVisible() {
+    return this.isToolActive && this.isFeatureSessionActive;
+  }
   contribute() {
     return {
       [import_core5.ContributionPointIds.TOOLS]: [
@@ -6214,15 +6623,16 @@ var FeatureTool = class {
             if (this.isFeatureSessionActive) {
               return { ok: true };
             }
-            const original = this.getCommittedFeatures();
-            this.sessionOriginalFeatures = this.cloneFeatures(original);
+            if (!this.hasFeatureSessionDraft()) {
+              const original = this.getCommittedFeatures();
+              this.sessionOriginalFeatures = this.cloneFeatures(original);
+              this.setWorkingFeatures(this.cloneFeatures(original));
+              this.hasWorkingChanges = false;
+            }
             this.isFeatureSessionActive = true;
             await this.refreshGeometry();
-            this.setWorkingFeatures(this.cloneFeatures(original));
-            this.hasWorkingChanges = false;
             this.redraw();
             this.emitWorkingChange();
-            this.updateCommittedFeatures([]);
             return { ok: true };
           }
         },
@@ -6258,25 +6668,6 @@ var FeatureTool = class {
             return true;
           }
         },
-        {
-          command: "getWorkingFeatures",
-          title: "Get Working Features",
-          handler: () => {
-            return this.cloneFeatures(this.workingFeatures);
-          }
-        },
-        {
-          command: "setWorkingFeatures",
-          title: "Set Working Features",
-          handler: async (features) => {
-            await this.refreshGeometry();
-            this.setWorkingFeatures(this.cloneFeatures(features || []));
-            this.hasWorkingChanges = true;
-            this.redraw();
-            this.emitWorkingChange();
-            return { ok: true };
-          }
-        },
         {
           command: "rollbackFeatureSession",
           title: "Rollback Feature Session",
@@ -6343,17 +6734,24 @@ var FeatureTool = class {
       this.isUpdatingConfig = false;
     }
   }
+  hasFeatureSessionDraft() {
+    return Array.isArray(this.sessionOriginalFeatures);
+  }
   clearFeatureSessionState() {
     this.isFeatureSessionActive = false;
     this.sessionOriginalFeatures = null;
   }
-  restoreSessionFeaturesToConfig() {
-    if (!this.isFeatureSessionActive) return;
+  restoreCommittedFeaturesToConfig() {
+    if (!this.hasFeatureSessionDraft()) return;
     const original = this.cloneFeatures(
       this.sessionOriginalFeatures || this.getCommittedFeatures()
     );
     this.updateCommittedFeatures(original);
-    this.clearFeatureSessionState();
+  }
+  suspendFeatureSession() {
+    if (!this.isFeatureSessionActive) return;
+    this.restoreCommittedFeaturesToConfig();
+    this.isFeatureSessionActive = false;
   }
   emitWorkingChange() {
     var _a;
@@ -6375,7 +6773,7 @@ var FeatureTool = class {
   }
   async resetWorkingFeaturesFromSource() {
     const next = this.cloneFeatures(
-      this.isFeatureSessionActive && this.sessionOriginalFeatures ? this.sessionOriginalFeatures : this.getCommittedFeatures()
+      this.sessionOriginalFeatures || this.getCommittedFeatures()
     );
     await this.refreshGeometry();
     this.setWorkingFeatures(next);
@@ -6599,11 +6997,35 @@ var FeatureTool = class {
       this.handleSceneGeometryChange = null;
     }
     this.renderSeq += 1;
-    this.specs = [];
+    this.markerSpecs = [];
+    this.sessionDielineSpecs = [];
+    this.sessionDielineEffects = [];
     (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
     this.renderProducerDisposable = void 0;
     void this.canvasService.flushRenderFromProducers();
   }
+  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 import_fabric4.Pattern({
+      source: canvas
+    });
+  }
   getDraggableMarkerTarget(target) {
     var _a, _b;
     if (!this.isFeatureSessionActive || !this.isToolActive) return null;
@@ -6679,6 +7101,7 @@ var FeatureTool = class {
     next[index] = updatedFeature;
     this.setWorkingFeatures(next);
     this.hasWorkingChanges = true;
+    this.redraw();
     this.emitWorkingChange();
   }
   syncGroupFromCanvas(target) {
@@ -6717,6 +7140,7 @@ var FeatureTool = class {
     if (!changed) return;
     this.setWorkingFeatures(next);
     this.hasWorkingChanges = true;
+    this.redraw();
     this.emitWorkingChange();
   }
   redraw(options = {}) {
@@ -6725,7 +7149,10 @@ var FeatureTool = class {
   async redrawAsync(options = {}) {
     if (!this.canvasService) return;
     const seq = ++this.renderSeq;
-    this.specs = this.buildFeatureSpecs();
+    this.markerSpecs = this.buildMarkerSpecs();
+    const sessionRender = this.buildSessionDielineRender();
+    this.sessionDielineSpecs = sessionRender.specs;
+    this.sessionDielineEffects = sessionRender.effects;
     if (seq !== this.renderSeq) return;
     await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
@@ -6733,7 +7160,49 @@ var FeatureTool = class {
       this.enforceConstraints();
     }
   }
-  buildFeatureSpecs() {
+  buildSessionDielineRender() {
+    if (!this.isSessionVisible() || !this.canvasService) {
+      return { specs: [], effects: [] };
+    }
+    const configService = this.getConfigService();
+    if (!configService) {
+      return { specs: [], effects: [] };
+    }
+    const sceneLayout = computeSceneLayout(
+      this.canvasService,
+      readSizeState(configService)
+    );
+    if (!sceneLayout) {
+      return { specs: [], effects: [] };
+    }
+    const state = readDielineState(configService);
+    state.features = this.cloneFeatures(this.workingFeatures);
+    return buildDielineRenderBundle({
+      state,
+      sceneLayout,
+      canvasWidth: sceneLayout.canvasWidth || this.canvasService.canvas.width || 800,
+      canvasHeight: sceneLayout.canvasHeight || this.canvasService.canvas.height || 600,
+      hasImages: this.hasImageItems(),
+      createHatchPattern: (color) => this.createHatchPattern(color),
+      clipTargetPassIds: [IMAGE_OBJECT_LAYER_ID],
+      clipVisibility: { op: "const", value: true },
+      ids: {
+        inside: "feature.session.dieline.inside",
+        bleedZone: "feature.session.dieline.bleed-zone",
+        offsetBorder: "feature.session.dieline.offset-border",
+        border: "feature.session.dieline.border",
+        clip: "feature.session.dieline.clip.image",
+        clipSource: "feature.session.dieline.effect.clip-path"
+      }
+    });
+  }
+  hasImageItems() {
+    const configService = this.getConfigService();
+    if (!configService) return false;
+    const items = configService.get("image.items", []);
+    return Array.isArray(items) && items.length > 0;
+  }
+  buildMarkerSpecs() {
     if (!this.isFeatureSessionActive || !this.currentGeometry || this.workingFeatures.length === 0) {
       return [];
     }
@@ -7006,7 +7475,7 @@ var FeatureTool = class {
 
 // src/extensions/film/FilmTool.ts
 var import_core6 = require("@pooder/core");
-var import_fabric4 = require("fabric");
+var import_fabric5 = require("fabric");
 var FILM_IMAGE_ID = "film-image";
 var DEFAULT_WIDTH2 = 800;
 var DEFAULT_HEIGHT2 = 600;
@@ -7180,7 +7649,7 @@ var FilmTool = class {
   }
   async loadImageSize(src) {
     try {
-      const image = await import_fabric4.FabricImage.fromURL(src, {
+      const image = await import_fabric5.FabricImage.fromURL(src, {
         crossOrigin: "anonymous"
       });
       const width = Number((image == null ? void 0 : image.width) || 0);
@@ -9175,7 +9644,7 @@ var SceneLayoutService = class {
 };
 
 // src/services/CanvasService.ts
-var import_fabric5 = require("fabric");
+var import_fabric6 = require("fabric");
 var import_core11 = require("@pooder/core");
 
 // src/services/ViewportSystem.ts
@@ -9351,10 +9820,10 @@ var CanvasService = class {
       if (this.producerApplyInProgress) return;
       this.scheduleManagedPassVisibilityRefresh();
     };
-    if (el instanceof import_fabric5.Canvas) {
+    if (el instanceof import_fabric6.Canvas) {
       this.canvas = el;
     } else {
-      this.canvas = new import_fabric5.Canvas(el, {
+      this.canvas = new import_fabric6.Canvas(el, {
         preserveObjectStacking: true,
         ...options
       });
@@ -10249,7 +10718,7 @@ var CanvasService = class {
     var _a, _b;
     if (spec.type === "rect") {
       const props = this.resolveFabricProps(spec, spec.props || {});
-      const rect = new import_fabric5.Rect({
+      const rect = new import_fabric6.Rect({
         ...props,
         data: { ...spec.data || {}, id: spec.id }
       });
@@ -10260,7 +10729,7 @@ var CanvasService = class {
       const pathData = this.readPathDataFromSpec(spec);
       if (!pathData) return void 0;
       const props = this.resolveFabricProps(spec, spec.props || {});
-      const path = new import_fabric5.Path(pathData, {
+      const path = new import_fabric6.Path(pathData, {
         ...props,
         data: { ...spec.data || {}, id: spec.id }
       });
@@ -10269,7 +10738,7 @@ var CanvasService = class {
     }
     if (spec.type === "image") {
       if (!spec.src) return void 0;
-      const image = await import_fabric5.Image.fromURL(spec.src, { crossOrigin: "anonymous" });
+      const image = await import_fabric6.Image.fromURL(spec.src, { crossOrigin: "anonymous" });
       const props = this.resolveFabricProps(spec, spec.props || {});
       image.set({
         ...props,
@@ -10281,7 +10750,7 @@ var CanvasService = class {
     if (spec.type === "text") {
       const content = String((_b = (_a = spec.props) == null ? void 0 : _a.text) != null ? _b : "");
       const props = this.resolveFabricProps(spec, spec.props || {});
-      const text = new import_fabric5.Text(content, {
+      const text = new import_fabric6.Text(content, {
         ...props,
         data: { ...spec.data || {}, id: spec.id }
       });
@@ -10307,11 +10776,13 @@ var CanvasService = class {
   WhiteInkTool,
   computeImageCoverScale,
   computeWhiteInkCoverScale,
+  createDefaultDielineState,
   createDielineCommands,
   createDielineConfigurations,
   createImageCommands,
   createImageConfigurations,
   createWhiteInkCommands,
   createWhiteInkConfigurations,
-  evaluateVisibilityExpr
+  evaluateVisibilityExpr,
+  readDielineState
 });