@pooder/kit 5.4.0 → 6.0.0

package/dist/index.mjs

@@ -3,291 +3,94 @@ import {
   ContributionPointIds
 } from "@pooder/core";
 import { FabricImage } from "fabric";
-var BACKGROUND_LAYER_ID = "background";
-var BACKGROUND_RECT_ID = "background-color-rect";
-var BACKGROUND_IMAGE_ID = "background-image";
-var DEFAULT_WIDTH = 800;
-var DEFAULT_HEIGHT = 600;
-var BackgroundTool = class {
-  constructor(options) {
-    this.id = "pooder.kit.background";
-    this.metadata = {
-      name: "BackgroundTool"
-    };
-    this.color = "";
-    this.url = "";
-    this.specs = [];
-    this.renderSeq = 0;
-    this.renderImageUrl = "";
-    this.sourceSizeBySrc = /* @__PURE__ */ new Map();
-    this.pendingSizeBySrc = /* @__PURE__ */ new Map();
-    this.onCanvasResized = () => {
-      this.updateBackground();
-    };
-    if (options) {
-      Object.assign(this, options);
+
+// src/coordinate.ts
+var Coordinate = class {
+  /**
+   * Calculate layout to fit content within container while preserving aspect ratio.
+   */
+  static calculateLayout(container, content, padding = 0) {
+    const availableWidth = Math.max(0, container.width - padding * 2);
+    const availableHeight = Math.max(0, container.height - padding * 2);
+    if (content.width === 0 || content.height === 0) {
+      return { scale: 1, offsetX: 0, offsetY: 0, width: 0, height: 0 };
     }
+    const scaleX = availableWidth / content.width;
+    const scaleY = availableHeight / content.height;
+    const scale = Math.min(scaleX, scaleY);
+    const width = content.width * scale;
+    const height = content.height * scale;
+    const offsetX = (container.width - width) / 2;
+    const offsetY = (container.height - height) / 2;
+    return { scale, offsetX, offsetY, width, height };
   }
-  activate(context) {
-    var _a;
-    this.canvasService = context.services.get("CanvasService");
-    if (!this.canvasService) {
-      console.warn("CanvasService not found for BackgroundTool");
-      return;
-    }
-    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
-    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
-      this.id,
-      () => ({
-        layerSpecs: {
-          [BACKGROUND_LAYER_ID]: this.specs
-        }
-      }),
-      { priority: 0 }
-    );
-    const configService = context.services.get(
-      "ConfigurationService"
-    );
-    if (configService) {
-      this.color = configService.get("background.color", this.color);
-      this.url = configService.get("background.url", this.url);
-      configService.onAnyChange((e) => {
-        if (e.key.startsWith("background.")) {
-          const prop = e.key.split(".")[1];
-          console.log(
-            `[BackgroundTool] Config change detected: ${e.key} -> ${e.value}, prop: ${prop}`
-          );
-          if (prop && prop in this) {
-            console.log(
-              `[BackgroundTool] Updating option ${prop} to ${e.value}`
-            );
-            this[prop] = e.value;
-            this.updateBackground();
-          } else {
-            console.warn(
-              `[BackgroundTool] Property ${prop} not found in options`
-            );
-          }
-        }
-      });
-    }
-    context.eventBus.on("canvas:resized", this.onCanvasResized);
-    this.updateBackground();
+  /**
+   * Convert an absolute value to a normalized value (0-1).
+   * @param value Absolute value (e.g., pixels)
+   * @param total Total dimension size (e.g., canvas width)
+   */
+  static toNormalized(value, total) {
+    return total === 0 ? 0 : value / total;
   }
-  deactivate(context) {
-    var _a;
-    context.eventBus.off("canvas:resized", this.onCanvasResized);
-    this.renderSeq += 1;
-    this.specs = [];
-    this.renderImageUrl = "";
-    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
-    this.renderProducerDisposable = void 0;
-    if (!this.canvasService) return;
-    const layer = this.canvasService.getLayer(BACKGROUND_LAYER_ID);
-    if (layer) {
-      this.canvasService.canvas.remove(layer);
-    }
-    void this.canvasService.flushRenderFromProducers();
-    this.canvasService.requestRenderAll();
-    this.canvasService = void 0;
+  /**
+   * Convert a normalized value (0-1) to an absolute value.
+   * @param normalized Normalized value (0-1)
+   * @param total Total dimension size (e.g., canvas width)
+   */
+  static toAbsolute(normalized, total) {
+    return normalized * total;
   }
-  contribute() {
+  /**
+   * Normalize a point's coordinates.
+   */
+  static normalizePoint(point, size) {
     return {
-      [ContributionPointIds.CONFIGURATIONS]: [
-        {
-          id: "background.color",
-          type: "color",
-          label: "Background Color",
-          default: ""
-        },
-        {
-          id: "background.url",
-          type: "string",
-          label: "Image URL",
-          default: ""
-        }
-      ],
-      [ContributionPointIds.COMMANDS]: [
-        {
-          command: "reset",
-          title: "Reset Background",
-          handler: () => {
-            this.updateBackground();
-            return true;
-          }
-        },
-        {
-          command: "clear",
-          title: "Clear Background",
-          handler: () => {
-            this.color = "transparent";
-            this.url = "";
-            this.updateBackground();
-            return true;
-          }
-        },
-        {
-          command: "setBackgroundColor",
-          title: "Set Background Color",
-          handler: (color) => {
-            if (this.color === color) return true;
-            this.color = color;
-            this.updateBackground();
-            return true;
-          }
-        },
-        {
-          command: "setBackgroundImage",
-          title: "Set Background Image",
-          handler: (url) => {
-            if (this.url === url) return true;
-            this.url = url;
-            this.updateBackground();
-            return true;
-          }
-        }
-      ]
+      x: this.toNormalized(point.x, size.width),
+      y: this.toNormalized(point.y, size.height)
     };
   }
-  getViewportSize() {
-    var _a, _b;
-    const width = Number(((_a = this.canvasService) == null ? void 0 : _a.canvas.width) || 0);
-    const height = Number(((_b = this.canvasService) == null ? void 0 : _b.canvas.height) || 0);
+  /**
+   * Denormalize a point's coordinates to absolute pixels.
+   */
+  static denormalizePoint(point, size) {
     return {
-      width: width > 0 ? width : DEFAULT_WIDTH,
-      height: height > 0 ? height : DEFAULT_HEIGHT
+      x: this.toAbsolute(point.x, size.width),
+      y: this.toAbsolute(point.y, size.height)
     };
   }
-  buildBackgroundSpecs(color, imageUrl) {
-    const { width, height } = this.getViewportSize();
-    const specs = [
-      {
-        id: BACKGROUND_RECT_ID,
-        type: "rect",
-        space: "screen",
-        data: {
-          id: BACKGROUND_RECT_ID,
-          layerId: BACKGROUND_LAYER_ID,
-          type: "background-color"
-        },
-        props: {
-          left: 0,
-          top: 0,
-          width,
-          height,
-          originX: "left",
-          originY: "top",
-          fill: color,
-          selectable: false,
-          evented: false,
-          excludeFromExport: true
-        }
-      }
-    ];
-    if (!imageUrl) {
-      return specs;
-    }
-    const sourceSize = this.sourceSizeBySrc.get(imageUrl);
-    const sourceWidth = Math.max(1, Number((sourceSize == null ? void 0 : sourceSize.width) || width));
-    const sourceHeight = Math.max(1, Number((sourceSize == null ? void 0 : sourceSize.height) || height));
-    const coverScale = Math.max(width / sourceWidth, height / sourceHeight);
-    specs.push({
-      id: BACKGROUND_IMAGE_ID,
-      type: "image",
-      src: imageUrl,
-      space: "screen",
-      data: {
-        id: BACKGROUND_IMAGE_ID,
-        layerId: BACKGROUND_LAYER_ID,
-        type: "background-image"
-      },
-      props: {
-        left: 0,
-        top: 0,
-        originX: "left",
-        originY: "top",
-        scaleX: coverScale,
-        scaleY: coverScale,
-        selectable: false,
-        evented: false,
-        excludeFromExport: true
-      }
-    });
-    return specs;
-  }
-  async ensureImageSize(src) {
-    if (!src) return null;
-    const cached = this.sourceSizeBySrc.get(src);
-    if (cached) return cached;
-    const pending = this.pendingSizeBySrc.get(src);
-    if (pending) {
-      return pending;
-    }
-    const task = this.loadImageSize(src);
-    this.pendingSizeBySrc.set(src, task);
-    try {
-      return await task;
-    } finally {
-      if (this.pendingSizeBySrc.get(src) === task) {
-        this.pendingSizeBySrc.delete(src);
-      }
-    }
-  }
-  async loadImageSize(src) {
-    try {
-      const image = await FabricImage.fromURL(src, {
-        crossOrigin: "anonymous"
-      });
-      const width = Number((image == null ? void 0 : image.width) || 0);
-      const height = Number((image == null ? void 0 : image.height) || 0);
-      if (width > 0 && height > 0) {
-        const size = { width, height };
-        this.sourceSizeBySrc.set(src, size);
-        return size;
-      }
-    } catch (error) {
-      console.error("[BackgroundTool] Failed to load image", src, error);
+  static convertUnit(value, from, to) {
+    if (from === to) return value;
+    const toMM = {
+      px: 0.264583,
+      // 1px = 0.264583mm (96 DPI)
+      mm: 1,
+      cm: 10,
+      in: 25.4
+    };
+    const mmValue = value * (from === "px" ? toMM.px : toMM[from] || 1);
+    if (to === "px") {
+      return mmValue / toMM.px;
     }
-    return null;
+    return mmValue / (toMM[to] || 1);
   }
-  updateBackground() {
-    void this.updateBackgroundAsync();
+};
+
+// src/units.ts
+function parseLengthToMm(input, defaultUnit) {
+  var _a, _b;
+  if (typeof input === "number") {
+    if (!Number.isFinite(input)) return 0;
+    return Coordinate.convertUnit(input, defaultUnit, "mm");
   }
-  async updateBackgroundAsync() {
-    if (!this.canvasService) return;
-    const seq = ++this.renderSeq;
-    const color = this.color;
-    const nextUrl = String(this.url || "").trim();
-    if (!nextUrl) {
-      this.renderImageUrl = "";
-    } else if (nextUrl !== this.renderImageUrl) {
-      const loaded = await this.ensureImageSize(nextUrl);
-      if (seq !== this.renderSeq) return;
-      if (loaded) {
-        this.renderImageUrl = nextUrl;
-      }
-    }
-    this.specs = this.buildBackgroundSpecs(color, this.renderImageUrl);
-    await this.canvasService.flushRenderFromProducers();
-    if (seq !== this.renderSeq) return;
-    const layer = this.canvasService.getLayer(BACKGROUND_LAYER_ID);
-    if (layer) {
-      this.canvasService.canvas.sendObjectToBack(layer);
-    }
-    this.canvasService.requestRenderAll();
-  }
-};
-
-// src/extensions/image.ts
-import {
-  ContributionPointIds as ContributionPointIds2
-} from "@pooder/core";
-import {
-  Canvas as FabricCanvas,
-  Image as FabricImage2,
-  Pattern,
-  Point
-} from "fabric";
+  const raw = input.trim();
+  if (!raw) return 0;
+  const match = raw.match(/^([+-]?\d+(?:\.\d+)?)\s*(px|mm|cm|in)?$/i);
+  if (!match) return 0;
+  const value = Number(match[1]);
+  if (!Number.isFinite(value)) return 0;
+  const unit = (_b = (_a = match[2]) == null ? void 0 : _a.toLowerCase()) != null ? _b : defaultUnit;
+  return Coordinate.convertUnit(value, unit, "mm");
+}
 
 // src/extensions/dielineShape.ts
 var BUILTIN_DIELINE_SHAPES = [
@@ -304,7 +107,7 @@ var DEFAULT_HEART_SHAPE_PARAMS = {
   tipSharpness: 0
 };
 var DEFAULT_DIELINE_SHAPE_STYLE = {
-  fitMode: "contain",
+  fitMode: "stretch",
   ...DEFAULT_HEART_SHAPE_PARAMS
 };
 function isDielineShape(value) {
@@ -354,962 +157,1393 @@ function getHeartShapeParams(style) {
   };
 }
 
-// src/extensions/geometry.ts
-import paper from "paper";
-
-// src/extensions/bridgeSelection.ts
-function pickExitIndex(hits) {
-  for (let i = 0; i < hits.length; i++) {
-    const h = hits[i];
-    if (h.insideBelow && !h.insideAbove) return i;
-  }
-  return -1;
+// src/extensions/sceneLayoutModel.ts
+var DEFAULT_SIZE_STATE = {
+  unit: "mm",
+  actualWidthMm: 500,
+  actualHeightMm: 500,
+  constraintMode: "free",
+  aspectRatio: 1,
+  cutMode: "trim",
+  cutMarginMm: 0,
+  viewPadding: 140,
+  minMm: 10,
+  maxMm: 2e3,
+  stepMm: 0.1
+};
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
 }
-function scoreOutsideAbove(samples) {
-  let score = 0;
-  for (const s of samples) {
-    if (s.outsideAbove) score++;
-  }
-  return score;
+function roundToStep(value, step) {
+  if (!Number.isFinite(step) || step <= 0) return value;
+  return Math.round(value / step) * step;
 }
-
-// src/extensions/wrappedOffsets.ts
-function wrappedDistance(total, start, end) {
-  if (!Number.isFinite(total) || total <= 0) return 0;
-  if (!Number.isFinite(start) || !Number.isFinite(end)) return 0;
-  const s = (start % total + total) % total;
-  const e = (end % total + total) % total;
-  return e >= s ? e - s : total - s + e;
+function sanitizeMmValue(valueMm, limits) {
+  if (!Number.isFinite(valueMm)) return limits.minMm;
+  const rounded = roundToStep(valueMm, limits.stepMm);
+  return clamp(rounded, limits.minMm, limits.maxMm);
 }
-function sampleWrappedOffsets(total, start, end, count) {
-  if (!Number.isFinite(total) || total <= 0) return [];
-  if (!Number.isFinite(start) || !Number.isFinite(end)) return [];
-  const n = Math.max(0, Math.floor(count));
-  if (n <= 0) return [];
-  const dist = wrappedDistance(total, start, end);
-  if (n === 1) return [(start % total + total) % total];
-  const step = dist / (n - 1);
-  const offsets = [];
-  for (let i = 0; i < n; i++) {
-    const raw = start + step * i;
-    const wrapped = (raw % total + total) % total;
-    offsets.push(wrapped);
-  }
-  return offsets;
+function normalizeUnit(value) {
+  if (value === "cm" || value === "in") return value;
+  return "mm";
 }
-
-// src/extensions/geometry.ts
-function resolveFeaturePosition(feature, geometry) {
-  const { x, y, width, height } = geometry;
-  const left = x - width / 2;
-  const top = y - height / 2;
-  return {
-    x: left + feature.x * width,
-    y: top + feature.y * height
-  };
+function normalizeConstraintMode(value) {
+  if (value === "lockAspect" || value === "equal") return value;
+  return "free";
 }
-function ensurePaper(width, height) {
-  if (!paper.project) {
-    paper.setup(new paper.Size(width, height));
-  } else {
-    paper.view.viewSize = new paper.Size(width, height);
-  }
+function normalizeCutMode(value) {
+  if (value === "outset" || value === "inset") return value;
+  return "trim";
 }
-var isBridgeDebugEnabled = () => Boolean(globalThis.__POODER_BRIDGE_DEBUG__);
-function normalizePathItem(shape) {
-  let result = shape;
-  if (typeof result.resolveCrossings === "function") result = result.resolveCrossings();
-  if (typeof result.reduce === "function") result = result.reduce({});
-  if (typeof result.reorient === "function") result = result.reorient(true, true);
-  if (typeof result.reduce === "function") result = result.reduce({});
-  return result;
+function toMm(value, fromUnit) {
+  return Coordinate.convertUnit(value, fromUnit, "mm");
 }
-function getBridgeDelta(itemBounds, overlap) {
-  return Math.max(overlap, Math.min(5, Math.max(1, itemBounds.height * 0.02)));
+function fromMm(valueMm, toUnit) {
+  return Coordinate.convertUnit(valueMm, "mm", toUnit);
 }
-function getExitHit(args) {
-  const { mainShape, x, bridgeBottom, toY, eps, delta, overlap, op } = args;
-  const ray = new paper.Path.Line({
-    from: [x, bridgeBottom],
-    to: [x, toY],
-    insert: false
-  });
-  const intersections = mainShape.getIntersections(ray) || [];
-  ray.remove();
-  const validHits = intersections.filter((i) => i.point.y < bridgeBottom - eps);
-  if (validHits.length === 0) return null;
-  validHits.sort((a, b) => b.point.y - a.point.y);
-  const flags = validHits.map((h) => {
-    const above = h.point.add(new paper.Point(0, -delta));
-    const below = h.point.add(new paper.Point(0, delta));
-    return {
-      insideAbove: mainShape.contains(above),
-      insideBelow: mainShape.contains(below)
-    };
-  });
-  const idx = pickExitIndex(flags);
-  if (idx < 0) return null;
-  if (isBridgeDebugEnabled()) {
-    console.debug("Geometry: Bridge ray", {
-      x,
-      validHits: validHits.length,
-      idx,
-      delta,
-      overlap,
-      op
-    });
+function resolvePaddingPx(raw, containerWidth, containerHeight) {
+  if (typeof raw === "number") return Math.max(0, raw);
+  if (typeof raw === "string") {
+    if (raw.endsWith("%")) {
+      const percent = parseFloat(raw) / 100;
+      if (!Number.isFinite(percent)) return 0;
+      return Math.max(0, Math.min(containerWidth, containerHeight) * percent);
+    }
+    const fixed = parseFloat(raw);
+    return Number.isFinite(fixed) ? Math.max(0, fixed) : 0;
   }
-  const hit = validHits[idx];
-  return { point: hit.point, location: hit };
+  return 0;
 }
-function selectOuterChain(args) {
-  const { mainShape, pointsA, pointsB, delta, overlap, op } = args;
-  const scoreA = scoreOutsideAbove(
-    pointsA.map((p) => ({
-      outsideAbove: !mainShape.contains(p.add(new paper.Point(0, -delta)))
-    }))
+function readSizeState(configService) {
+  const unit = normalizeUnit(
+    configService.get("size.unit", DEFAULT_SIZE_STATE.unit)
   );
-  const scoreB = scoreOutsideAbove(
-    pointsB.map((p) => ({
-      outsideAbove: !mainShape.contains(p.add(new paper.Point(0, -delta)))
-    }))
+  const minMm = Math.max(
+    0.1,
+    Number(configService.get("size.minMm", DEFAULT_SIZE_STATE.minMm))
   );
-  const ratioA = scoreA / pointsA.length;
-  const ratioB = scoreB / pointsB.length;
-  if (isBridgeDebugEnabled()) {
-    console.debug("Geometry: Bridge chain", {
-      scoreA,
-      scoreB,
-      lenA: pointsA.length,
-      lenB: pointsB.length,
-      ratioA,
-      ratioB,
-      delta,
-      overlap,
-      op
-    });
-  }
-  const ratioEps = 1e-6;
-  if (Math.abs(ratioA - ratioB) > ratioEps) {
-    return ratioA > ratioB ? pointsA : pointsB;
-  }
-  if (scoreA !== scoreB) return scoreA > scoreB ? pointsA : pointsB;
-  return pointsA.length <= pointsB.length ? pointsA : pointsB;
-}
-function fitPathItemToRect(item, rect, fitMode) {
-  const { left, top, width, height } = rect;
-  const bounds = item.bounds;
-  if (width <= 0 || height <= 0 || !Number.isFinite(bounds.width) || !Number.isFinite(bounds.height) || bounds.width <= 0 || bounds.height <= 0) {
-    item.position = new paper.Point(left + width / 2, top + height / 2);
-    return item;
-  }
-  item.translate(new paper.Point(-bounds.left, -bounds.top));
-  if (fitMode === "stretch") {
-    item.scale(width / bounds.width, height / bounds.height, new paper.Point(0, 0));
-    item.translate(new paper.Point(left, top));
-    return item;
-  }
-  const uniformScale = Math.min(width / bounds.width, height / bounds.height);
-  item.scale(uniformScale, uniformScale, new paper.Point(0, 0));
-  const scaledWidth = bounds.width * uniformScale;
-  const scaledHeight = bounds.height * uniformScale;
-  item.translate(
-    new paper.Point(
-      left + (width - scaledWidth) / 2,
-      top + (height - scaledHeight) / 2
-    )
+  const maxMm = Math.max(
+    minMm,
+    Number(configService.get("size.maxMm", DEFAULT_SIZE_STATE.maxMm))
   );
-  return item;
-}
-function createNormalizedHeartPath(params) {
-  const { lobeSpread, notchDepth, tipSharpness } = params;
-  const halfSpread = 0.22 + lobeSpread * 0.18;
-  const notchY = 0.06 + notchDepth * 0.2;
-  const shoulderY = 0.24 + notchDepth * 0.2;
-  const topLift = 0.12 + (1 - notchDepth) * 0.06;
-  const topY = notchY - topLift;
-  const sideCtrlY = shoulderY - (0.18 - notchDepth * 0.08);
-  const lowerCtrlY = 0.58 + (1 - tipSharpness) * 0.16;
-  const tipCtrlX = 0.34 - tipSharpness * 0.2;
-  const notchCtrlX = 0.06 + lobeSpread * 0.06;
-  const lobeCtrlX = 0.1 + lobeSpread * 0.08;
-  const notchCtrlY = notchY - topLift * 0.45;
-  const xPeakL = 0.5 - halfSpread;
-  const xPeakR = 0.5 + halfSpread;
-  const heartPath = new paper.Path({ insert: false });
-  heartPath.moveTo(new paper.Point(0.5, notchY));
-  heartPath.cubicCurveTo(
-    new paper.Point(0.5 - notchCtrlX, notchCtrlY),
-    new paper.Point(xPeakL + lobeCtrlX, topY),
-    new paper.Point(xPeakL, topY)
+  const stepMm = Math.max(
+    1e-3,
+    Number(configService.get("size.stepMm", DEFAULT_SIZE_STATE.stepMm))
   );
-  heartPath.cubicCurveTo(
-    new paper.Point(xPeakL - lobeCtrlX, topY),
-    new paper.Point(0, sideCtrlY),
-    new paper.Point(0, shoulderY)
+  const actualWidthMm = sanitizeMmValue(
+    parseLengthToMm(
+      configService.get("size.actualWidthMm", DEFAULT_SIZE_STATE.actualWidthMm),
+      "mm"
+    ),
+    { minMm, maxMm, stepMm }
   );
-  heartPath.cubicCurveTo(
-    new paper.Point(0, lowerCtrlY),
-    new paper.Point(tipCtrlX, 1),
-    new paper.Point(0.5, 1)
+  const actualHeightMm = sanitizeMmValue(
+    parseLengthToMm(
+      configService.get(
+        "size.actualHeightMm",
+        DEFAULT_SIZE_STATE.actualHeightMm
+      ),
+      "mm"
+    ),
+    { minMm, maxMm, stepMm }
   );
-  heartPath.cubicCurveTo(
-    new paper.Point(1 - tipCtrlX, 1),
-    new paper.Point(1, lowerCtrlY),
-    new paper.Point(1, shoulderY)
+  const aspectRaw = Number(
+    configService.get("size.aspectRatio", DEFAULT_SIZE_STATE.aspectRatio)
   );
-  heartPath.cubicCurveTo(
-    new paper.Point(1, sideCtrlY),
-    new paper.Point(xPeakR + lobeCtrlX, topY),
-    new paper.Point(xPeakR, topY)
+  const aspectRatio = Number.isFinite(aspectRaw) && aspectRaw > 0 ? aspectRaw : actualWidthMm / Math.max(1e-3, actualHeightMm);
+  const cutMarginMm = Math.max(
+    0,
+    parseLengthToMm(
+      configService.get("size.cutMarginMm", DEFAULT_SIZE_STATE.cutMarginMm),
+      "mm"
+    )
   );
-  heartPath.cubicCurveTo(
-    new paper.Point(xPeakR - lobeCtrlX, topY),
-    new paper.Point(0.5 + notchCtrlX, notchCtrlY),
-    new paper.Point(0.5, notchY)
+  const viewPadding = configService.get(
+    "size.viewPadding",
+    DEFAULT_SIZE_STATE.viewPadding
   );
-  heartPath.closed = true;
-  return heartPath;
-}
-function createHeartBaseShape(options) {
-  const { x, y, width, height } = options;
-  const w = Math.max(0, width);
-  const h = Math.max(0, height);
-  const left = x - w / 2;
-  const top = y - h / 2;
-  const fitMode = getShapeFitMode(options.shapeStyle);
-  const heartParams = getHeartShapeParams(options.shapeStyle);
-  const rawHeart = createNormalizedHeartPath(heartParams);
-  return fitPathItemToRect(rawHeart, { left, top, width: w, height: h }, fitMode);
+  return {
+    unit,
+    actualWidthMm,
+    actualHeightMm,
+    constraintMode: normalizeConstraintMode(
+      configService.get(
+        "size.constraintMode",
+        DEFAULT_SIZE_STATE.constraintMode
+      )
+    ),
+    aspectRatio,
+    cutMode: normalizeCutMode(
+      configService.get("size.cutMode", DEFAULT_SIZE_STATE.cutMode)
+    ),
+    cutMarginMm,
+    viewPadding,
+    minMm,
+    maxMm,
+    stepMm
+  };
 }
-var BUILTIN_SHAPE_BUILDERS = {
-  rect: (options) => {
-    const { x, y, width, height, radius } = options;
-    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)
-    });
-  },
-  circle: (options) => {
-    const { x, y, width, height } = options;
-    const r = Math.min(width, height) / 2;
-    return new paper.Path.Circle({
-      center: new paper.Point(x, y),
-      radius: Math.max(0, r)
-    });
-  },
-  ellipse: (options) => {
-    const { x, y, width, height } = options;
-    return new paper.Path.Ellipse({
-      center: new paper.Point(x, y),
-      radius: [Math.max(0, width / 2), Math.max(0, height / 2)]
-    });
-  },
-  heart: createHeartBaseShape
-};
-function createCustomBaseShape(options) {
-  var _a;
-  const {
-    pathData,
-    customSourceWidthPx,
-    customSourceHeightPx,
-    x,
-    y,
+function rectByCenter(centerX, centerY, width, height) {
+  return {
+    left: centerX - width / 2,
+    top: centerY - height / 2,
     width,
-    height
-  } = options;
-  if (typeof pathData !== "string" || pathData.trim().length === 0) {
-    return null;
-  }
-  const center = new paper.Point(x, y);
-  const hasMultipleSubPaths = ((_a = (pathData.match(/[Mm]/g) || []).length) != null ? _a : 0) > 1;
-  const path = hasMultipleSubPaths ? new paper.CompoundPath(pathData) : (() => {
-    const single = new paper.Path();
-    single.pathData = pathData;
-    return single;
-  })();
-  const sourceWidth = Number(customSourceWidthPx != null ? customSourceWidthPx : 0);
-  const sourceHeight = Number(customSourceHeightPx != null ? customSourceHeightPx : 0);
-  if (Number.isFinite(sourceWidth) && Number.isFinite(sourceHeight) && sourceWidth > 0 && sourceHeight > 0 && width > 0 && height > 0) {
-    const targetLeft = x - width / 2;
-    const targetTop = y - height / 2;
-    path.scale(width / sourceWidth, height / sourceHeight, new paper.Point(0, 0));
-    path.translate(new paper.Point(targetLeft, targetTop));
-    return path;
-  }
-  if (width > 0 && height > 0 && path.bounds.width > 0 && path.bounds.height > 0) {
-    path.position = center;
-    path.scale(width / path.bounds.width, height / path.bounds.height);
-    return path;
-  }
-  path.position = center;
-  return path;
-}
-function createBaseShape(options) {
-  const { shape } = options;
-  if (shape === "custom") {
-    const customShape = createCustomBaseShape(options);
-    if (customShape) return customShape;
-    return BUILTIN_SHAPE_BUILDERS[DEFAULT_DIELINE_SHAPE](options);
-  }
-  return BUILTIN_SHAPE_BUILDERS[shape](options);
+    height,
+    centerX,
+    centerY
+  };
 }
-function resolveBridgeBasePath(shape, anchor) {
-  if (shape instanceof paper.Path) {
-    return shape;
+function getCutSizeMm(size) {
+  if (size.cutMode === "trim") {
+    return { widthMm: size.actualWidthMm, heightMm: size.actualHeightMm };
   }
-  if (shape instanceof paper.CompoundPath) {
-    const children = (shape.children || []).filter(
-      (child) => child instanceof paper.Path
-    );
-    if (!children.length) return null;
-    let best = children[0];
-    let bestDistance = Infinity;
-    for (const child of children) {
-      const location = child.getNearestLocation(anchor);
-      const point = location == null ? void 0 : location.point;
-      if (!point) continue;
-      const distance = point.getDistance(anchor);
-      if (distance < bestDistance) {
-        bestDistance = distance;
-        best = child;
-      }
-    }
-    return best;
+  const delta = size.cutMarginMm * 2;
+  if (size.cutMode === "outset") {
+    return {
+      widthMm: size.actualWidthMm + delta,
+      heightMm: size.actualHeightMm + delta
+    };
   }
-  return null;
+  return {
+    widthMm: Math.max(size.minMm, size.actualWidthMm - delta),
+    heightMm: Math.max(size.minMm, size.actualHeightMm - delta)
+  };
 }
-function createFeatureItem(feature, center) {
-  let item;
-  if (feature.shape === "rect") {
-    const w = feature.width || 10;
-    const h = feature.height || 10;
-    const r = feature.radius || 0;
-    item = new paper.Path.Rectangle({
-      point: [center.x - w / 2, center.y - h / 2],
-      size: [w, h],
-      radius: r
-    });
-  } else {
-    const r = feature.radius || 5;
-    item = new paper.Path.Circle({
-      center,
-      radius: r
-    });
+function computeSceneLayout(canvasService, size) {
+  const canvasWidth = canvasService.canvas.width || 0;
+  const canvasHeight = canvasService.canvas.height || 0;
+  if (canvasWidth <= 0 || canvasHeight <= 0) return null;
+  const { widthMm: cutWidthMm, heightMm: cutHeightMm } = getCutSizeMm(size);
+  const viewWidthMm = Math.max(size.actualWidthMm, cutWidthMm);
+  const viewHeightMm = Math.max(size.actualHeightMm, cutHeightMm);
+  if (!Number.isFinite(viewWidthMm) || !Number.isFinite(viewHeightMm) || viewWidthMm <= 0 || viewHeightMm <= 0) {
+    return null;
   }
-  if (feature.rotation) {
-    item.rotate(feature.rotation, center);
+  const paddingPx = resolvePaddingPx(
+    size.viewPadding,
+    canvasWidth,
+    canvasHeight
+  );
+  canvasService.viewport.updateContainer(canvasWidth, canvasHeight);
+  canvasService.viewport.setPadding(paddingPx);
+  canvasService.viewport.updatePhysical(viewWidthMm, viewHeightMm);
+  const layout = canvasService.viewport.layout;
+  if (!Number.isFinite(layout.scale) || !Number.isFinite(layout.offsetX) || !Number.isFinite(layout.offsetY) || layout.scale <= 0) {
+    return null;
   }
-  return item;
-}
-function getPerimeterShape(options) {
-  let mainShape = createBaseShape(options);
-  const { features } = options;
-  if (features && features.length > 0) {
-    const edgeFeatures = features.filter(
-      (f) => !f.renderBehavior || f.renderBehavior === "edge"
-    );
-    const adds = [];
-    const subtracts = [];
-    edgeFeatures.forEach((f) => {
-      const pos = resolveFeaturePosition(f, options);
-      const center = new paper.Point(pos.x, pos.y);
-      const item = createFeatureItem(f, center);
-      if (f.bridge && f.bridge.type === "vertical") {
-        const itemBounds = item.bounds;
-        const mainBounds = mainShape.bounds;
-        const bridgeTop = mainBounds.top;
-        const bridgeBottom = itemBounds.top;
-        if (bridgeBottom > bridgeTop) {
-          const overlap = 2;
-          const rayPadding = 10;
-          const eps = 0.1;
-          const delta = getBridgeDelta(itemBounds, overlap);
-          const toY = bridgeTop - rayPadding;
-          const inset = Math.min(1, Math.max(0, itemBounds.width * 0.01));
-          const xLeft = itemBounds.left + inset;
-          const xRight = itemBounds.right - inset;
-          const bridgeBasePath = resolveBridgeBasePath(mainShape, center);
-          const canBridge = !!bridgeBasePath && xRight - xLeft > eps;
-          if (canBridge && bridgeBasePath) {
-            const leftHit = getExitHit({
-              mainShape: bridgeBasePath,
-              x: xLeft,
-              bridgeBottom,
-              toY,
-              eps,
-              delta,
-              overlap,
-              op: f.operation
-            });
-            const rightHit = getExitHit({
-              mainShape: bridgeBasePath,
-              x: xRight,
-              bridgeBottom,
-              toY,
-              eps,
-              delta,
-              overlap,
-              op: f.operation
-            });
-            if (leftHit && rightHit) {
-              const pathLength = bridgeBasePath.length;
-              const leftOffset = leftHit.location.offset;
-              const rightOffset = rightHit.location.offset;
-              const distanceA = wrappedDistance(pathLength, leftOffset, rightOffset);
-              const distanceB = wrappedDistance(pathLength, rightOffset, leftOffset);
-              const countFor = (d) => Math.max(8, Math.min(80, Math.ceil(d / 6)));
-              const offsetsA = sampleWrappedOffsets(
-                pathLength,
-                leftOffset,
-                rightOffset,
-                countFor(distanceA)
+  const centerX = layout.offsetX + layout.width / 2;
+  const centerY = layout.offsetY + layout.height / 2;
+  const trimWidthPx = size.actualWidthMm * layout.scale;
+  const trimHeightPx = size.actualHeightMm * layout.scale;
+  const cutWidthPx = cutWidthMm * layout.scale;
+  const cutHeightPx = cutHeightMm * layout.scale;
+  const trimRect = rectByCenter(centerX, centerY, trimWidthPx, trimHeightPx);
+  const cutRect = rectByCenter(centerX, centerY, cutWidthPx, cutHeightPx);
+  const bleedRect = rectByCenter(
+    centerX,
+    centerY,
+    Math.max(trimWidthPx, cutWidthPx),
+    Math.max(trimHeightPx, cutHeightPx)
+  );
+  return {
+    scale: layout.scale,
+    canvasWidth,
+    canvasHeight,
+    trimRect,
+    cutRect,
+    bleedRect,
+    trimWidthMm: size.actualWidthMm,
+    trimHeightMm: size.actualHeightMm,
+    cutWidthMm,
+    cutHeightMm,
+    cutMode: size.cutMode,
+    cutMarginMm: size.cutMarginMm
+  };
+}
+function buildSceneGeometry(configService, layout) {
+  const radiusMm = parseLengthToMm(
+    configService.get("dieline.radius", 0),
+    "mm"
+  );
+  const offset = (layout.cutRect.width - layout.trimRect.width) / 2;
+  const sourceWidth = Number(configService.get("dieline.customSourceWidthPx", 0));
+  const sourceHeight = Number(
+    configService.get("dieline.customSourceHeightPx", 0)
+  );
+  const shapeStyle = normalizeShapeStyle(
+    configService.get("dieline.shapeStyle", DEFAULT_DIELINE_SHAPE_STYLE)
+  );
+  return {
+    shape: normalizeDielineShape(
+      configService.get("dieline.shape", DEFAULT_DIELINE_SHAPE)
+    ),
+    shapeStyle,
+    unit: "px",
+    x: layout.trimRect.centerX,
+    y: layout.trimRect.centerY,
+    width: layout.trimRect.width,
+    height: layout.trimRect.height,
+    radius: radiusMm * layout.scale,
+    offset,
+    scale: layout.scale,
+    pathData: configService.get("dieline.pathData"),
+    customSourceWidthPx: Number.isFinite(sourceWidth) && sourceWidth > 0 ? sourceWidth : void 0,
+    customSourceHeightPx: Number.isFinite(sourceHeight) && sourceHeight > 0 ? sourceHeight : void 0
+  };
+}
+
+// src/extensions/background.ts
+var BACKGROUND_LAYER_ID = "background";
+var BACKGROUND_CONFIG_KEY = "background.config";
+var DEFAULT_WIDTH = 800;
+var DEFAULT_HEIGHT = 600;
+var DEFAULT_BACKGROUND_CONFIG = {
+  version: 1,
+  layers: [
+    {
+      id: "base-color",
+      kind: "color",
+      anchor: "viewport",
+      fit: "cover",
+      opacity: 1,
+      order: 0,
+      enabled: true,
+      exportable: false,
+      color: "#fff"
+    }
+  ]
+};
+function clampOpacity(value, fallback) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) {
+    return Math.max(0, Math.min(1, fallback));
+  }
+  return Math.max(0, Math.min(1, numeric));
+}
+function normalizeLayerKind(value, fallback) {
+  if (value === "color" || value === "image") {
+    return value;
+  }
+  return fallback;
+}
+function normalizeFitMode2(value, fallback) {
+  if (value === "contain" || value === "cover" || value === "stretch") {
+    return value;
+  }
+  return fallback;
+}
+function normalizeAnchor(value, fallback) {
+  if (typeof value !== "string") return fallback;
+  const trimmed = value.trim();
+  return trimmed || fallback;
+}
+function normalizeOrder(value, fallback) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return fallback;
+  return numeric;
+}
+function normalizeLayer(raw, index, fallback) {
+  const fallbackLayer = fallback || {
+    id: `layer-${index + 1}`,
+    kind: "image",
+    anchor: "viewport",
+    fit: "contain",
+    opacity: 1,
+    order: index,
+    enabled: true,
+    exportable: false,
+    src: ""
+  };
+  if (!raw || typeof raw !== "object") {
+    return { ...fallbackLayer };
+  }
+  const input = raw;
+  const kind = normalizeLayerKind(input.kind, fallbackLayer.kind);
+  return {
+    id: typeof input.id === "string" && input.id.trim().length > 0 ? input.id.trim() : fallbackLayer.id,
+    kind,
+    anchor: normalizeAnchor(input.anchor, fallbackLayer.anchor),
+    fit: normalizeFitMode2(input.fit, fallbackLayer.fit),
+    opacity: clampOpacity(input.opacity, fallbackLayer.opacity),
+    order: normalizeOrder(input.order, fallbackLayer.order),
+    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
+  };
+}
+function normalizeConfig(raw) {
+  if (!raw || typeof raw !== "object") {
+    return cloneConfig(DEFAULT_BACKGROUND_CONFIG);
+  }
+  const input = raw;
+  const version = Number.isFinite(Number(input.version)) ? Number(input.version) : DEFAULT_BACKGROUND_CONFIG.version;
+  const baseLayers = Array.isArray(input.layers) ? input.layers.map((layer, index) => normalizeLayer(layer, index)) : cloneConfig(DEFAULT_BACKGROUND_CONFIG).layers;
+  const uniqueLayers = [];
+  const seen = /* @__PURE__ */ new Set();
+  baseLayers.forEach((layer, index) => {
+    let nextId = layer.id || `layer-${index + 1}`;
+    let serial = 1;
+    while (seen.has(nextId)) {
+      serial += 1;
+      nextId = `${layer.id || `layer-${index + 1}`}-${serial}`;
+    }
+    seen.add(nextId);
+    uniqueLayers.push({ ...layer, id: nextId });
+  });
+  return {
+    version,
+    layers: uniqueLayers
+  };
+}
+function cloneConfig(config) {
+  return {
+    version: config.version,
+    layers: (config.layers || []).map((layer) => ({ ...layer }))
+  };
+}
+function mergeConfig(base, patch) {
+  const merged = {
+    version: patch.version === void 0 ? base.version : Number.isFinite(Number(patch.version)) ? Number(patch.version) : base.version,
+    layers: Array.isArray(patch.layers) ? patch.layers.map((layer, index) => normalizeLayer(layer, index)) : base.layers.map((layer) => ({ ...layer }))
+  };
+  return normalizeConfig(merged);
+}
+function configSignature(config) {
+  return JSON.stringify(config);
+}
+var BackgroundTool = class {
+  constructor(options) {
+    this.id = "pooder.kit.background";
+    this.metadata = {
+      name: "BackgroundTool"
+    };
+    this.config = cloneConfig(DEFAULT_BACKGROUND_CONFIG);
+    this.specs = [];
+    this.renderSeq = 0;
+    this.latestSceneLayout = null;
+    this.sourceSizeBySrc = /* @__PURE__ */ new Map();
+    this.pendingSizeBySrc = /* @__PURE__ */ new Map();
+    this.onCanvasResized = () => {
+      this.latestSceneLayout = null;
+      this.updateBackground();
+    };
+    this.onSceneLayoutChanged = (layout) => {
+      this.latestSceneLayout = layout;
+      this.updateBackground();
+    };
+    if (options && typeof options === "object") {
+      this.config = mergeConfig(this.config, options);
+    }
+  }
+  activate(context) {
+    var _a, _b;
+    this.canvasService = context.services.get("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for BackgroundTool");
+      return;
+    }
+    this.configService = context.services.get(
+      "ConfigurationService"
+    );
+    if (this.configService) {
+      this.config = normalizeConfig(
+        this.configService.get(
+          BACKGROUND_CONFIG_KEY,
+          DEFAULT_BACKGROUND_CONFIG
+        )
+      );
+      (_a = this.configChangeDisposable) == null ? void 0 : _a.dispose();
+      this.configChangeDisposable = this.configService.onAnyChange(
+        (e) => {
+          if (e.key === BACKGROUND_CONFIG_KEY) {
+            this.config = normalizeConfig(e.value);
+            this.updateBackground();
+            return;
+          }
+          if (e.key.startsWith("size.")) {
+            this.latestSceneLayout = null;
+            this.updateBackground();
+          }
+        }
+      );
+    }
+    (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        passes: [
+          {
+            id: BACKGROUND_LAYER_ID,
+            stack: 0,
+            order: 0,
+            objects: this.specs
+          }
+        ]
+      }),
+      { priority: 0 }
+    );
+    context.eventBus.on("canvas:resized", this.onCanvasResized);
+    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
+    this.updateBackground();
+  }
+  deactivate(context) {
+    var _a, _b;
+    context.eventBus.off("canvas:resized", this.onCanvasResized);
+    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
+    this.renderSeq += 1;
+    this.specs = [];
+    this.latestSceneLayout = null;
+    (_a = this.configChangeDisposable) == null ? void 0 : _a.dispose();
+    this.configChangeDisposable = void 0;
+    (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
+    this.renderProducerDisposable = void 0;
+    if (!this.canvasService) return;
+    void this.canvasService.flushRenderFromProducers();
+    this.canvasService.requestRenderAll();
+    this.canvasService = void 0;
+    this.configService = void 0;
+  }
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: BACKGROUND_CONFIG_KEY,
+          type: "json",
+          label: "Background Config",
+          default: cloneConfig(DEFAULT_BACKGROUND_CONFIG)
+        }
+      ],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "background.getConfig",
+          title: "Get Background Config",
+          handler: () => cloneConfig(this.config)
+        },
+        {
+          command: "background.resetConfig",
+          title: "Reset Background Config",
+          handler: () => {
+            this.commitConfig(cloneConfig(DEFAULT_BACKGROUND_CONFIG));
+            return true;
+          }
+        },
+        {
+          command: "background.replaceConfig",
+          title: "Replace Background Config",
+          handler: (config) => {
+            this.commitConfig(normalizeConfig(config));
+            return true;
+          }
+        },
+        {
+          command: "background.patchConfig",
+          title: "Patch Background Config",
+          handler: (patch) => {
+            this.commitConfig(mergeConfig(this.config, patch || {}));
+            return true;
+          }
+        },
+        {
+          command: "background.upsertLayer",
+          title: "Upsert Background Layer",
+          handler: (layer) => {
+            const normalized = normalizeLayer(layer, 0);
+            const existingIndex = this.config.layers.findIndex(
+              (item) => item.id === normalized.id
+            );
+            const nextLayers = [...this.config.layers];
+            if (existingIndex >= 0) {
+              nextLayers[existingIndex] = normalizeLayer(
+                { ...nextLayers[existingIndex], ...layer },
+                existingIndex,
+                nextLayers[existingIndex]
               );
-              const offsetsB = sampleWrappedOffsets(
-                pathLength,
-                rightOffset,
-                leftOffset,
-                countFor(distanceB)
+            } else {
+              nextLayers.push(
+                normalizeLayer(
+                  {
+                    ...normalized,
+                    order: Number.isFinite(Number(layer.order)) ? Number(layer.order) : nextLayers.length
+                  },
+                  nextLayers.length
+                )
               );
-              const pointsA = offsetsA.map((o) => bridgeBasePath.getPointAt(o)).filter((p) => Boolean(p));
-              const pointsB = offsetsB.map((o) => bridgeBasePath.getPointAt(o)).filter((p) => Boolean(p));
-              if (pointsA.length >= 2 && pointsB.length >= 2) {
-                let topBase = selectOuterChain({
-                  mainShape: bridgeBasePath,
-                  pointsA,
-                  pointsB,
-                  delta,
-                  overlap,
-                  op: f.operation
-                });
-                const dist2 = (a, b) => {
-                  const dx = a.x - b.x;
-                  const dy = a.y - b.y;
-                  return dx * dx + dy * dy;
-                };
-                if (dist2(topBase[0], leftHit.point) > dist2(topBase[0], rightHit.point)) {
-                  topBase = topBase.slice().reverse();
-                }
-                topBase = topBase.slice();
-                topBase[0] = leftHit.point;
-                topBase[topBase.length - 1] = rightHit.point;
-                const capShiftY = f.operation === "subtract" ? -Math.max(overlap * 2, delta) : overlap;
-                const topPoints = topBase.map(
-                  (p) => p.add(new paper.Point(0, capShiftY))
-                );
-                const bridgeBottomY = bridgeBottom + overlap * 2;
-                const bridgePoly = new paper.Path({ insert: false });
-                for (const p of topPoints) bridgePoly.add(p);
-                bridgePoly.add(new paper.Point(xRight, bridgeBottomY));
-                bridgePoly.add(new paper.Point(xLeft, bridgeBottomY));
-                bridgePoly.closed = true;
-                const unitedItem = item.unite(bridgePoly);
-                item.remove();
-                bridgePoly.remove();
-                if (f.operation === "add") {
-                  adds.push(unitedItem);
-                } else {
-                  subtracts.push(unitedItem);
-                }
-                return;
-              }
             }
+            this.commitConfig(
+              normalizeConfig({
+                ...this.config,
+                layers: nextLayers
+              })
+            );
+            return true;
           }
-          if (f.operation === "add") {
-            adds.push(item);
-          } else {
-            subtracts.push(item);
-          }
-        } else {
-          if (f.operation === "add") {
-            adds.push(item);
-          } else {
-            subtracts.push(item);
+        },
+        {
+          command: "background.removeLayer",
+          title: "Remove Background Layer",
+          handler: (id) => {
+            const nextLayers = this.config.layers.filter(
+              (layer) => layer.id !== id
+            );
+            this.commitConfig(
+              normalizeConfig({
+                ...this.config,
+                layers: nextLayers
+              })
+            );
+            return true;
           }
         }
-      } else {
-        if (f.operation === "add") {
-          adds.push(item);
-        } else {
-          subtracts.push(item);
+      ]
+    };
+  }
+  commitConfig(next) {
+    const normalized = normalizeConfig(next);
+    if (configSignature(normalized) === configSignature(this.config)) {
+      return;
+    }
+    if (this.configService) {
+      this.configService.update(BACKGROUND_CONFIG_KEY, cloneConfig(normalized));
+      return;
+    }
+    this.config = normalized;
+    this.updateBackground();
+  }
+  getViewportRect() {
+    var _a, _b;
+    const width = Number(((_a = this.canvasService) == null ? void 0 : _a.canvas.width) || 0);
+    const height = Number(((_b = this.canvasService) == null ? void 0 : _b.canvas.height) || 0);
+    return {
+      left: 0,
+      top: 0,
+      width: width > 0 ? width : DEFAULT_WIDTH,
+      height: height > 0 ? height : DEFAULT_HEIGHT
+    };
+  }
+  resolveSceneLayout() {
+    if (this.latestSceneLayout) return this.latestSceneLayout;
+    if (!this.canvasService || !this.configService) return null;
+    const layout = computeSceneLayout(
+      this.canvasService,
+      readSizeState(this.configService)
+    );
+    this.latestSceneLayout = layout;
+    return layout;
+  }
+  resolveFocusRect() {
+    const layout = this.resolveSceneLayout();
+    if (!layout) return null;
+    return {
+      left: layout.trimRect.left,
+      top: layout.trimRect.top,
+      width: layout.trimRect.width,
+      height: layout.trimRect.height
+    };
+  }
+  resolveAnchorRect(anchor) {
+    if (anchor === "focus") {
+      return this.resolveFocusRect() || this.getViewportRect();
+    }
+    if (anchor !== "viewport") {
+      return this.getViewportRect();
+    }
+    return this.getViewportRect();
+  }
+  resolveImagePlacement(target, sourceSize, fit) {
+    const targetWidth = Math.max(1, Number(target.width || 0));
+    const targetHeight = Math.max(1, Number(target.height || 0));
+    const sourceWidth = Math.max(1, Number(sourceSize.width || 0));
+    const sourceHeight = Math.max(1, Number(sourceSize.height || 0));
+    if (fit === "stretch") {
+      return {
+        left: target.left,
+        top: target.top,
+        scaleX: targetWidth / sourceWidth,
+        scaleY: targetHeight / sourceHeight
+      };
+    }
+    const scale = fit === "contain" ? Math.min(targetWidth / sourceWidth, targetHeight / sourceHeight) : Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
+    const renderWidth = sourceWidth * scale;
+    const renderHeight = sourceHeight * scale;
+    return {
+      left: target.left + (targetWidth - renderWidth) / 2,
+      top: target.top + (targetHeight - renderHeight) / 2,
+      scaleX: scale,
+      scaleY: scale
+    };
+  }
+  buildColorLayerSpec(layer) {
+    const rect = this.resolveAnchorRect(layer.anchor);
+    return {
+      id: `background.layer.${layer.id}.color`,
+      type: "rect",
+      space: "screen",
+      data: {
+        id: `background.layer.${layer.id}.color`,
+        layerId: BACKGROUND_LAYER_ID,
+        type: "background-layer",
+        layerRef: layer.id,
+        layerKind: layer.kind
+      },
+      props: {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        originX: "left",
+        originY: "top",
+        fill: layer.color || "transparent",
+        opacity: layer.opacity,
+        selectable: false,
+        evented: false,
+        excludeFromExport: !layer.exportable
+      }
+    };
+  }
+  buildImageLayerSpec(layer) {
+    const src = String(layer.src || "").trim();
+    if (!src) return [];
+    const sourceSize = this.sourceSizeBySrc.get(src);
+    if (!sourceSize) return [];
+    const rect = this.resolveAnchorRect(layer.anchor);
+    const placement = this.resolveImagePlacement(rect, sourceSize, layer.fit);
+    return [
+      {
+        id: `background.layer.${layer.id}.image`,
+        type: "image",
+        src,
+        space: "screen",
+        data: {
+          id: `background.layer.${layer.id}.image`,
+          layerId: BACKGROUND_LAYER_ID,
+          type: "background-layer",
+          layerRef: layer.id,
+          layerKind: layer.kind
+        },
+        props: {
+          left: placement.left,
+          top: placement.top,
+          originX: "left",
+          originY: "top",
+          scaleX: placement.scaleX,
+          scaleY: placement.scaleY,
+          opacity: layer.opacity,
+          selectable: false,
+          evented: false,
+          excludeFromExport: !layer.exportable
         }
       }
+    ];
+  }
+  buildBackgroundSpecs(config) {
+    const activeLayers = (config.layers || []).filter((layer) => layer.enabled).map((layer, index) => ({ layer, index })).sort((a, b) => {
+      if (a.layer.order !== b.layer.order) {
+        return a.layer.order - b.layer.order;
+      }
+      return a.index - b.index;
     });
-    if (adds.length > 0) {
-      for (const item of adds) {
-        try {
-          const temp = mainShape.unite(item);
-          mainShape.remove();
-          item.remove();
-          mainShape = normalizePathItem(temp);
-        } catch (e) {
-          console.error("Geometry: Failed to unite feature", e);
-          item.remove();
-        }
+    const specs = [];
+    activeLayers.forEach(({ layer }) => {
+      if (layer.kind === "color") {
+        specs.push(this.buildColorLayerSpec(layer));
+        return;
       }
+      specs.push(...this.buildImageLayerSpec(layer));
+    });
+    return specs;
+  }
+  collectActiveImageUrls(config) {
+    const urls = /* @__PURE__ */ new Set();
+    (config.layers || []).forEach((layer) => {
+      if (!layer.enabled || layer.kind !== "image") return;
+      const src = String(layer.src || "").trim();
+      if (!src) return;
+      urls.add(src);
+    });
+    return Array.from(urls);
+  }
+  async ensureImageSize(src) {
+    if (!src) return null;
+    const cached = this.sourceSizeBySrc.get(src);
+    if (cached) return cached;
+    const pending = this.pendingSizeBySrc.get(src);
+    if (pending) {
+      return pending;
     }
-    if (subtracts.length > 0) {
-      for (const item of subtracts) {
-        try {
-          const temp = mainShape.subtract(item);
-          mainShape.remove();
-          item.remove();
-          mainShape = normalizePathItem(temp);
-        } catch (e) {
-          console.error("Geometry: Failed to subtract feature", e);
-          item.remove();
-        }
+    const task = this.loadImageSize(src);
+    this.pendingSizeBySrc.set(src, task);
+    try {
+      return await task;
+    } finally {
+      if (this.pendingSizeBySrc.get(src) === task) {
+        this.pendingSizeBySrc.delete(src);
       }
     }
   }
-  return mainShape;
-}
-function applySurfaceFeatures(shape, features, options) {
-  const surfaceFeatures = features.filter(
-    (f) => f.renderBehavior === "surface"
-  );
-  if (surfaceFeatures.length === 0) return shape;
-  let result = shape;
-  for (const f of surfaceFeatures) {
-    const pos = resolveFeaturePosition(f, options);
-    const center = new paper.Point(pos.x, pos.y);
-    const item = createFeatureItem(f, center);
+  async loadImageSize(src) {
     try {
-      if (f.operation === "add") {
-        const temp = result.unite(item);
-        result.remove();
-        item.remove();
-        result = normalizePathItem(temp);
-      } else {
-        const temp = result.subtract(item);
-        result.remove();
-        item.remove();
-        result = normalizePathItem(temp);
+      const image = await FabricImage.fromURL(src, {
+        crossOrigin: "anonymous"
+      });
+      const width = Number((image == null ? void 0 : image.width) || 0);
+      const height = Number((image == null ? void 0 : image.height) || 0);
+      if (width > 0 && height > 0) {
+        const size = { width, height };
+        this.sourceSizeBySrc.set(src, size);
+        return size;
       }
-    } catch (e) {
-      console.error("Geometry: Failed to apply surface feature", e);
-      item.remove();
+    } catch (error) {
+      console.error("[BackgroundTool] Failed to load image", src, error);
     }
+    return null;
   }
-  return result;
+  updateBackground() {
+    void this.updateBackgroundAsync();
+  }
+  async updateBackgroundAsync() {
+    if (!this.canvasService) return;
+    const seq = ++this.renderSeq;
+    const currentConfig = cloneConfig(this.config);
+    const activeUrls = this.collectActiveImageUrls(currentConfig);
+    if (activeUrls.length > 0) {
+      await Promise.all(activeUrls.map((url) => this.ensureImageSize(url)));
+      if (seq !== this.renderSeq) return;
+    }
+    this.specs = this.buildBackgroundSpecs(currentConfig);
+    await this.canvasService.flushRenderFromProducers();
+    if (seq !== this.renderSeq) return;
+    this.canvasService.requestRenderAll();
+  }
+};
+
+// src/extensions/image.ts
+import {
+  ContributionPointIds as ContributionPointIds2
+} from "@pooder/core";
+import {
+  Canvas as FabricCanvas,
+  Image as FabricImage2,
+  Pattern,
+  Point
+} from "fabric";
+
+// src/extensions/geometry.ts
+import paper from "paper";
+
+// src/extensions/bridgeSelection.ts
+function pickExitIndex(hits) {
+  for (let i = 0; i < hits.length; i++) {
+    const h = hits[i];
+    if (h.insideBelow && !h.insideAbove) return i;
+  }
+  return -1;
 }
-function generateDielinePath(options) {
-  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
-  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
-  ensurePaper(paperWidth, paperHeight);
-  paper.project.activeLayer.removeChildren();
-  const perimeter = getPerimeterShape(options);
-  const finalShape = applySurfaceFeatures(perimeter, options.features, options);
-  const pathData = finalShape.pathData;
-  finalShape.remove();
-  return pathData;
+function scoreOutsideAbove(samples) {
+  let score = 0;
+  for (const s of samples) {
+    if (s.outsideAbove) score++;
+  }
+  return score;
 }
-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 perimeter = getPerimeterShape(options);
-  const mainShape = applySurfaceFeatures(perimeter, options.features, options);
-  const finalMask = maskRect.subtract(mainShape);
-  maskRect.remove();
-  mainShape.remove();
-  const pathData = finalMask.pathData;
-  finalMask.remove();
-  return pathData;
+
+// src/extensions/wrappedOffsets.ts
+function wrappedDistance(total, start, end) {
+  if (!Number.isFinite(total) || total <= 0) return 0;
+  if (!Number.isFinite(start) || !Number.isFinite(end)) return 0;
+  const s = (start % total + total) % total;
+  const e = (end % total + total) % total;
+  return e >= s ? e - s : total - s + e;
 }
-function generateBleedZonePath(originalOptions, offsetOptions, offset) {
-  const paperWidth = originalOptions.canvasWidth || originalOptions.width * 2 || 2e3;
-  const paperHeight = originalOptions.canvasHeight || originalOptions.height * 2 || 2e3;
-  ensurePaper(paperWidth, paperHeight);
-  paper.project.activeLayer.removeChildren();
-  const pOriginal = getPerimeterShape(originalOptions);
-  const shapeOriginal = applySurfaceFeatures(
-    pOriginal,
-    originalOptions.features,
-    originalOptions
-  );
-  const pOffset = getPerimeterShape(offsetOptions);
-  const shapeOffset = applySurfaceFeatures(
-    pOffset,
-    offsetOptions.features,
-    offsetOptions
-  );
-  let bleedZone;
-  if (offset > 0) {
-    bleedZone = shapeOffset.subtract(shapeOriginal);
-  } else {
-    bleedZone = shapeOriginal.subtract(shapeOffset);
+function sampleWrappedOffsets(total, start, end, count) {
+  if (!Number.isFinite(total) || total <= 0) return [];
+  if (!Number.isFinite(start) || !Number.isFinite(end)) return [];
+  const n = Math.max(0, Math.floor(count));
+  if (n <= 0) return [];
+  const dist = wrappedDistance(total, start, end);
+  if (n === 1) return [(start % total + total) % total];
+  const step = dist / (n - 1);
+  const offsets = [];
+  for (let i = 0; i < n; i++) {
+    const raw = start + step * i;
+    const wrapped = (raw % total + total) % total;
+    offsets.push(wrapped);
   }
-  const pathData = bleedZone.pathData;
-  shapeOriginal.remove();
-  shapeOffset.remove();
-  bleedZone.remove();
-  return pathData;
+  return offsets;
 }
-function getLowestPointOnDieline(options) {
-  ensurePaper(options.width * 2, options.height * 2);
-  paper.project.activeLayer.removeChildren();
-  const shape = createBaseShape(options);
-  const bounds = shape.bounds;
-  const result = {
-    x: bounds.center.x,
-    y: bounds.bottom
+
+// src/extensions/geometry.ts
+function resolveFeaturePosition(feature, geometry) {
+  const { x, y, width, height } = geometry;
+  const left = x - width / 2;
+  const top = y - height / 2;
+  return {
+    x: left + feature.x * width,
+    y: top + feature.y * height
   };
-  shape.remove();
-  return result;
 }
-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 location = shape.getNearestLocation(p);
-  const result = {
-    x: location.point.x,
-    y: location.point.y,
-    normal: location.normal ? { x: location.normal.x, y: location.normal.y } : void 0
-  };
-  shape.remove();
+function ensurePaper(width, height) {
+  if (!paper.project) {
+    paper.setup(new paper.Size(width, height));
+  } else {
+    paper.view.viewSize = new paper.Size(width, height);
+  }
+}
+var isBridgeDebugEnabled = () => Boolean(globalThis.__POODER_BRIDGE_DEBUG__);
+function normalizePathItem(shape) {
+  let result = shape;
+  if (typeof result.resolveCrossings === "function") result = result.resolveCrossings();
+  if (typeof result.reduce === "function") result = result.reduce({});
+  if (typeof result.reorient === "function") result = result.reorient(true, true);
+  if (typeof result.reduce === "function") result = result.reduce({});
   return result;
 }
-function getPathBounds(pathData) {
-  const path = new paper.Path();
-  path.pathData = pathData;
-  const bounds = path.bounds;
-  path.remove();
-  return {
-    x: bounds.x,
-    y: bounds.y,
-    width: bounds.width,
-    height: bounds.height
-  };
+function getBridgeDelta(itemBounds, overlap) {
+  return Math.max(overlap, Math.min(5, Math.max(1, itemBounds.height * 0.02)));
+}
+function getExitHit(args) {
+  const { mainShape, x, bridgeBottom, toY, eps, delta, overlap, op } = args;
+  const ray = new paper.Path.Line({
+    from: [x, bridgeBottom],
+    to: [x, toY],
+    insert: false
+  });
+  const intersections = mainShape.getIntersections(ray) || [];
+  ray.remove();
+  const validHits = intersections.filter((i) => i.point.y < bridgeBottom - eps);
+  if (validHits.length === 0) return null;
+  validHits.sort((a, b) => b.point.y - a.point.y);
+  const flags = validHits.map((h) => {
+    const above = h.point.add(new paper.Point(0, -delta));
+    const below = h.point.add(new paper.Point(0, delta));
+    return {
+      insideAbove: mainShape.contains(above),
+      insideBelow: mainShape.contains(below)
+    };
+  });
+  const idx = pickExitIndex(flags);
+  if (idx < 0) return null;
+  if (isBridgeDebugEnabled()) {
+    console.debug("Geometry: Bridge ray", {
+      x,
+      validHits: validHits.length,
+      idx,
+      delta,
+      overlap,
+      op
+    });
+  }
+  const hit = validHits[idx];
+  return { point: hit.point, location: hit };
 }
-
-// src/coordinate.ts
-var Coordinate = class {
-  /**
-   * Calculate layout to fit content within container while preserving aspect ratio.
-   */
-  static calculateLayout(container, content, padding = 0) {
-    const availableWidth = Math.max(0, container.width - padding * 2);
-    const availableHeight = Math.max(0, container.height - padding * 2);
-    if (content.width === 0 || content.height === 0) {
-      return { scale: 1, offsetX: 0, offsetY: 0, width: 0, height: 0 };
-    }
-    const scaleX = availableWidth / content.width;
-    const scaleY = availableHeight / content.height;
-    const scale = Math.min(scaleX, scaleY);
-    const width = content.width * scale;
-    const height = content.height * scale;
-    const offsetX = (container.width - width) / 2;
-    const offsetY = (container.height - height) / 2;
-    return { scale, offsetX, offsetY, width, height };
+function selectOuterChain(args) {
+  const { mainShape, pointsA, pointsB, delta, overlap, op } = args;
+  const scoreA = scoreOutsideAbove(
+    pointsA.map((p) => ({
+      outsideAbove: !mainShape.contains(p.add(new paper.Point(0, -delta)))
+    }))
+  );
+  const scoreB = scoreOutsideAbove(
+    pointsB.map((p) => ({
+      outsideAbove: !mainShape.contains(p.add(new paper.Point(0, -delta)))
+    }))
+  );
+  const ratioA = scoreA / pointsA.length;
+  const ratioB = scoreB / pointsB.length;
+  if (isBridgeDebugEnabled()) {
+    console.debug("Geometry: Bridge chain", {
+      scoreA,
+      scoreB,
+      lenA: pointsA.length,
+      lenB: pointsB.length,
+      ratioA,
+      ratioB,
+      delta,
+      overlap,
+      op
+    });
   }
-  /**
-   * Convert an absolute value to a normalized value (0-1).
-   * @param value Absolute value (e.g., pixels)
-   * @param total Total dimension size (e.g., canvas width)
-   */
-  static toNormalized(value, total) {
-    return total === 0 ? 0 : value / total;
+  const ratioEps = 1e-6;
+  if (Math.abs(ratioA - ratioB) > ratioEps) {
+    return ratioA > ratioB ? pointsA : pointsB;
   }
-  /**
-   * Convert a normalized value (0-1) to an absolute value.
-   * @param normalized Normalized value (0-1)
-   * @param total Total dimension size (e.g., canvas width)
-   */
-  static toAbsolute(normalized, total) {
-    return normalized * total;
+  if (scoreA !== scoreB) return scoreA > scoreB ? pointsA : pointsB;
+  return pointsA.length <= pointsB.length ? pointsA : pointsB;
+}
+function fitPathItemToRect(item, rect, fitMode) {
+  const { left, top, width, height } = rect;
+  const bounds = item.bounds;
+  if (width <= 0 || height <= 0 || !Number.isFinite(bounds.width) || !Number.isFinite(bounds.height) || bounds.width <= 0 || bounds.height <= 0) {
+    item.position = new paper.Point(left + width / 2, top + height / 2);
+    return item;
   }
-  /**
-   * Normalize a point's coordinates.
-   */
-  static normalizePoint(point, size) {
-    return {
-      x: this.toNormalized(point.x, size.width),
-      y: this.toNormalized(point.y, size.height)
-    };
+  item.translate(new paper.Point(-bounds.left, -bounds.top));
+  if (fitMode === "stretch") {
+    item.scale(width / bounds.width, height / bounds.height, new paper.Point(0, 0));
+    item.translate(new paper.Point(left, top));
+    return item;
   }
-  /**
-   * Denormalize a point's coordinates to absolute pixels.
-   */
-  static denormalizePoint(point, size) {
-    return {
-      x: this.toAbsolute(point.x, size.width),
-      y: this.toAbsolute(point.y, size.height)
-    };
+  const uniformScale = Math.min(width / bounds.width, height / bounds.height);
+  item.scale(uniformScale, uniformScale, new paper.Point(0, 0));
+  const scaledWidth = bounds.width * uniformScale;
+  const scaledHeight = bounds.height * uniformScale;
+  item.translate(
+    new paper.Point(
+      left + (width - scaledWidth) / 2,
+      top + (height - scaledHeight) / 2
+    )
+  );
+  return item;
+}
+function createNormalizedHeartPath(params) {
+  const { lobeSpread, notchDepth, tipSharpness } = params;
+  const halfSpread = 0.22 + lobeSpread * 0.18;
+  const notchY = 0.06 + notchDepth * 0.2;
+  const shoulderY = 0.24 + notchDepth * 0.2;
+  const topLift = 0.12 + (1 - notchDepth) * 0.06;
+  const topY = notchY - topLift;
+  const sideCtrlY = shoulderY - (0.18 - notchDepth * 0.08);
+  const lowerCtrlY = 0.58 + (1 - tipSharpness) * 0.16;
+  const tipCtrlX = 0.34 - tipSharpness * 0.2;
+  const notchCtrlX = 0.06 + lobeSpread * 0.06;
+  const lobeCtrlX = 0.1 + lobeSpread * 0.08;
+  const notchCtrlY = notchY - topLift * 0.45;
+  const xPeakL = 0.5 - halfSpread;
+  const xPeakR = 0.5 + halfSpread;
+  const heartPath = new paper.Path({ insert: false });
+  heartPath.moveTo(new paper.Point(0.5, notchY));
+  heartPath.cubicCurveTo(
+    new paper.Point(0.5 - notchCtrlX, notchCtrlY),
+    new paper.Point(xPeakL + lobeCtrlX, topY),
+    new paper.Point(xPeakL, topY)
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(xPeakL - lobeCtrlX, topY),
+    new paper.Point(0, sideCtrlY),
+    new paper.Point(0, shoulderY)
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(0, lowerCtrlY),
+    new paper.Point(tipCtrlX, 1),
+    new paper.Point(0.5, 1)
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(1 - tipCtrlX, 1),
+    new paper.Point(1, lowerCtrlY),
+    new paper.Point(1, shoulderY)
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(1, sideCtrlY),
+    new paper.Point(xPeakR + lobeCtrlX, topY),
+    new paper.Point(xPeakR, topY)
+  );
+  heartPath.cubicCurveTo(
+    new paper.Point(xPeakR - lobeCtrlX, topY),
+    new paper.Point(0.5 + notchCtrlX, notchCtrlY),
+    new paper.Point(0.5, notchY)
+  );
+  heartPath.closed = true;
+  return heartPath;
+}
+function createHeartBaseShape(options) {
+  const { x, y, width, height } = options;
+  const w = Math.max(0, width);
+  const h = Math.max(0, height);
+  const left = x - w / 2;
+  const top = y - h / 2;
+  const fitMode = getShapeFitMode(options.shapeStyle);
+  const heartParams = getHeartShapeParams(options.shapeStyle);
+  const rawHeart = createNormalizedHeartPath(heartParams);
+  return fitPathItemToRect(rawHeart, { left, top, width: w, height: h }, fitMode);
+}
+var BUILTIN_SHAPE_BUILDERS = {
+  rect: (options) => {
+    const { x, y, width, height, radius } = options;
+    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)
+    });
+  },
+  circle: (options) => {
+    const { x, y, width, height } = options;
+    const r = Math.min(width, height) / 2;
+    return new paper.Path.Circle({
+      center: new paper.Point(x, y),
+      radius: Math.max(0, r)
+    });
+  },
+  ellipse: (options) => {
+    const { x, y, width, height } = options;
+    return new paper.Path.Ellipse({
+      center: new paper.Point(x, y),
+      radius: [Math.max(0, width / 2), Math.max(0, height / 2)]
+    });
+  },
+  heart: createHeartBaseShape
+};
+function createCustomBaseShape(options) {
+  var _a;
+  const {
+    pathData,
+    customSourceWidthPx,
+    customSourceHeightPx,
+    x,
+    y,
+    width,
+    height
+  } = options;
+  if (typeof pathData !== "string" || pathData.trim().length === 0) {
+    return null;
   }
-  static convertUnit(value, from, to) {
-    if (from === to) return value;
-    const toMM = {
-      px: 0.264583,
-      // 1px = 0.264583mm (96 DPI)
-      mm: 1,
-      cm: 10,
-      in: 25.4
-    };
-    const mmValue = value * (from === "px" ? toMM.px : toMM[from] || 1);
-    if (to === "px") {
-      return mmValue / toMM.px;
-    }
-    return mmValue / (toMM[to] || 1);
+  const center = new paper.Point(x, y);
+  const hasMultipleSubPaths = ((_a = (pathData.match(/[Mm]/g) || []).length) != null ? _a : 0) > 1;
+  const path = hasMultipleSubPaths ? new paper.CompoundPath(pathData) : (() => {
+    const single = new paper.Path();
+    single.pathData = pathData;
+    return single;
+  })();
+  const sourceWidth = Number(customSourceWidthPx != null ? customSourceWidthPx : 0);
+  const sourceHeight = Number(customSourceHeightPx != null ? customSourceHeightPx : 0);
+  if (Number.isFinite(sourceWidth) && Number.isFinite(sourceHeight) && sourceWidth > 0 && sourceHeight > 0 && width > 0 && height > 0) {
+    const targetLeft = x - width / 2;
+    const targetTop = y - height / 2;
+    path.scale(width / sourceWidth, height / sourceHeight, new paper.Point(0, 0));
+    path.translate(new paper.Point(targetLeft, targetTop));
+    return path;
   }
-};
-
-// src/units.ts
-function parseLengthToMm(input, defaultUnit) {
-  var _a, _b;
-  if (typeof input === "number") {
-    if (!Number.isFinite(input)) return 0;
-    return Coordinate.convertUnit(input, defaultUnit, "mm");
+  if (width > 0 && height > 0 && path.bounds.width > 0 && path.bounds.height > 0) {
+    path.position = center;
+    path.scale(width / path.bounds.width, height / path.bounds.height);
+    return path;
   }
-  const raw = input.trim();
-  if (!raw) return 0;
-  const match = raw.match(/^([+-]?\d+(?:\.\d+)?)\s*(px|mm|cm|in)?$/i);
-  if (!match) return 0;
-  const value = Number(match[1]);
-  if (!Number.isFinite(value)) return 0;
-  const unit = (_b = (_a = match[2]) == null ? void 0 : _a.toLowerCase()) != null ? _b : defaultUnit;
-  return Coordinate.convertUnit(value, unit, "mm");
-}
-
-// src/extensions/sceneLayoutModel.ts
-var DEFAULT_SIZE_STATE = {
-  unit: "mm",
-  actualWidthMm: 500,
-  actualHeightMm: 500,
-  constraintMode: "free",
-  aspectRatio: 1,
-  cutMode: "trim",
-  cutMarginMm: 0,
-  viewPadding: 140,
-  minMm: 10,
-  maxMm: 2e3,
-  stepMm: 0.1
-};
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, value));
-}
-function roundToStep(value, step) {
-  if (!Number.isFinite(step) || step <= 0) return value;
-  return Math.round(value / step) * step;
-}
-function sanitizeMmValue(valueMm, limits) {
-  if (!Number.isFinite(valueMm)) return limits.minMm;
-  const rounded = roundToStep(valueMm, limits.stepMm);
-  return clamp(rounded, limits.minMm, limits.maxMm);
-}
-function normalizeUnit(value) {
-  if (value === "cm" || value === "in") return value;
-  return "mm";
-}
-function normalizeConstraintMode(value) {
-  if (value === "lockAspect" || value === "equal") return value;
-  return "free";
+  path.position = center;
+  return path;
 }
-function normalizeCutMode(value) {
-  if (value === "outset" || value === "inset") return value;
-  return "trim";
+function createBaseShape(options) {
+  const { shape } = options;
+  if (shape === "custom") {
+    const customShape = createCustomBaseShape(options);
+    if (customShape) return customShape;
+    return BUILTIN_SHAPE_BUILDERS[DEFAULT_DIELINE_SHAPE](options);
+  }
+  return BUILTIN_SHAPE_BUILDERS[shape](options);
 }
-function toMm(value, fromUnit) {
-  return Coordinate.convertUnit(value, fromUnit, "mm");
+function resolveBridgeBasePath(shape, anchor) {
+  if (shape instanceof paper.Path) {
+    return shape;
+  }
+  if (shape instanceof paper.CompoundPath) {
+    const children = (shape.children || []).filter(
+      (child) => child instanceof paper.Path
+    );
+    if (!children.length) return null;
+    let best = children[0];
+    let bestDistance = Infinity;
+    for (const child of children) {
+      const location = child.getNearestLocation(anchor);
+      const point = location == null ? void 0 : location.point;
+      if (!point) continue;
+      const distance = point.getDistance(anchor);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        best = child;
+      }
+    }
+    return best;
+  }
+  return null;
 }
-function fromMm(valueMm, toUnit) {
-  return Coordinate.convertUnit(valueMm, "mm", toUnit);
+function createFeatureItem(feature, center) {
+  let item;
+  if (feature.shape === "rect") {
+    const w = feature.width || 10;
+    const h = feature.height || 10;
+    const r = feature.radius || 0;
+    item = new paper.Path.Rectangle({
+      point: [center.x - w / 2, center.y - h / 2],
+      size: [w, h],
+      radius: r
+    });
+  } else {
+    const r = feature.radius || 5;
+    item = new paper.Path.Circle({
+      center,
+      radius: r
+    });
+  }
+  if (feature.rotation) {
+    item.rotate(feature.rotation, center);
+  }
+  return item;
 }
-function resolvePaddingPx(raw, containerWidth, containerHeight) {
-  if (typeof raw === "number") return Math.max(0, raw);
-  if (typeof raw === "string") {
-    if (raw.endsWith("%")) {
-      const percent = parseFloat(raw) / 100;
-      if (!Number.isFinite(percent)) return 0;
-      return Math.max(0, Math.min(containerWidth, containerHeight) * percent);
+function getPerimeterShape(options) {
+  let mainShape = createBaseShape(options);
+  const { features } = options;
+  if (features && features.length > 0) {
+    const edgeFeatures = features.filter(
+      (f) => !f.renderBehavior || f.renderBehavior === "edge"
+    );
+    const adds = [];
+    const subtracts = [];
+    edgeFeatures.forEach((f) => {
+      const pos = resolveFeaturePosition(f, options);
+      const center = new paper.Point(pos.x, pos.y);
+      const item = createFeatureItem(f, center);
+      if (f.bridge && f.bridge.type === "vertical") {
+        const itemBounds = item.bounds;
+        const mainBounds = mainShape.bounds;
+        const bridgeTop = mainBounds.top;
+        const bridgeBottom = itemBounds.top;
+        if (bridgeBottom > bridgeTop) {
+          const overlap = 2;
+          const rayPadding = 10;
+          const eps = 0.1;
+          const delta = getBridgeDelta(itemBounds, overlap);
+          const toY = bridgeTop - rayPadding;
+          const inset = Math.min(1, Math.max(0, itemBounds.width * 0.01));
+          const xLeft = itemBounds.left + inset;
+          const xRight = itemBounds.right - inset;
+          const bridgeBasePath = resolveBridgeBasePath(mainShape, center);
+          const canBridge = !!bridgeBasePath && xRight - xLeft > eps;
+          if (canBridge && bridgeBasePath) {
+            const leftHit = getExitHit({
+              mainShape: bridgeBasePath,
+              x: xLeft,
+              bridgeBottom,
+              toY,
+              eps,
+              delta,
+              overlap,
+              op: f.operation
+            });
+            const rightHit = getExitHit({
+              mainShape: bridgeBasePath,
+              x: xRight,
+              bridgeBottom,
+              toY,
+              eps,
+              delta,
+              overlap,
+              op: f.operation
+            });
+            if (leftHit && rightHit) {
+              const pathLength = bridgeBasePath.length;
+              const leftOffset = leftHit.location.offset;
+              const rightOffset = rightHit.location.offset;
+              const distanceA = wrappedDistance(pathLength, leftOffset, rightOffset);
+              const distanceB = wrappedDistance(pathLength, rightOffset, leftOffset);
+              const countFor = (d) => Math.max(8, Math.min(80, Math.ceil(d / 6)));
+              const offsetsA = sampleWrappedOffsets(
+                pathLength,
+                leftOffset,
+                rightOffset,
+                countFor(distanceA)
+              );
+              const offsetsB = sampleWrappedOffsets(
+                pathLength,
+                rightOffset,
+                leftOffset,
+                countFor(distanceB)
+              );
+              const pointsA = offsetsA.map((o) => bridgeBasePath.getPointAt(o)).filter((p) => Boolean(p));
+              const pointsB = offsetsB.map((o) => bridgeBasePath.getPointAt(o)).filter((p) => Boolean(p));
+              if (pointsA.length >= 2 && pointsB.length >= 2) {
+                let topBase = selectOuterChain({
+                  mainShape: bridgeBasePath,
+                  pointsA,
+                  pointsB,
+                  delta,
+                  overlap,
+                  op: f.operation
+                });
+                const dist2 = (a, b) => {
+                  const dx = a.x - b.x;
+                  const dy = a.y - b.y;
+                  return dx * dx + dy * dy;
+                };
+                if (dist2(topBase[0], leftHit.point) > dist2(topBase[0], rightHit.point)) {
+                  topBase = topBase.slice().reverse();
+                }
+                topBase = topBase.slice();
+                topBase[0] = leftHit.point;
+                topBase[topBase.length - 1] = rightHit.point;
+                const capShiftY = f.operation === "subtract" ? -Math.max(overlap * 2, delta) : overlap;
+                const topPoints = topBase.map(
+                  (p) => p.add(new paper.Point(0, capShiftY))
+                );
+                const bridgeBottomY = bridgeBottom + overlap * 2;
+                const bridgePoly = new paper.Path({ insert: false });
+                for (const p of topPoints) bridgePoly.add(p);
+                bridgePoly.add(new paper.Point(xRight, bridgeBottomY));
+                bridgePoly.add(new paper.Point(xLeft, bridgeBottomY));
+                bridgePoly.closed = true;
+                const unitedItem = item.unite(bridgePoly);
+                item.remove();
+                bridgePoly.remove();
+                if (f.operation === "add") {
+                  adds.push(unitedItem);
+                } else {
+                  subtracts.push(unitedItem);
+                }
+                return;
+              }
+            }
+          }
+          if (f.operation === "add") {
+            adds.push(item);
+          } else {
+            subtracts.push(item);
+          }
+        } else {
+          if (f.operation === "add") {
+            adds.push(item);
+          } else {
+            subtracts.push(item);
+          }
+        }
+      } else {
+        if (f.operation === "add") {
+          adds.push(item);
+        } else {
+          subtracts.push(item);
+        }
+      }
+    });
+    if (adds.length > 0) {
+      for (const item of adds) {
+        try {
+          const temp = mainShape.unite(item);
+          mainShape.remove();
+          item.remove();
+          mainShape = normalizePathItem(temp);
+        } catch (e) {
+          console.error("Geometry: Failed to unite feature", e);
+          item.remove();
+        }
+      }
+    }
+    if (subtracts.length > 0) {
+      for (const item of subtracts) {
+        try {
+          const temp = mainShape.subtract(item);
+          mainShape.remove();
+          item.remove();
+          mainShape = normalizePathItem(temp);
+        } catch (e) {
+          console.error("Geometry: Failed to subtract feature", e);
+          item.remove();
+        }
+      }
     }
-    const fixed = parseFloat(raw);
-    return Number.isFinite(fixed) ? Math.max(0, fixed) : 0;
   }
-  return 0;
+  return mainShape;
 }
-function readSizeState(configService) {
-  const unit = normalizeUnit(
-    configService.get("size.unit", DEFAULT_SIZE_STATE.unit)
-  );
-  const minMm = Math.max(
-    0.1,
-    Number(configService.get("size.minMm", DEFAULT_SIZE_STATE.minMm))
-  );
-  const maxMm = Math.max(
-    minMm,
-    Number(configService.get("size.maxMm", DEFAULT_SIZE_STATE.maxMm))
-  );
-  const stepMm = Math.max(
-    1e-3,
-    Number(configService.get("size.stepMm", DEFAULT_SIZE_STATE.stepMm))
-  );
-  const actualWidthMm = sanitizeMmValue(
-    parseLengthToMm(
-      configService.get("size.actualWidthMm", DEFAULT_SIZE_STATE.actualWidthMm),
-      "mm"
-    ),
-    { minMm, maxMm, stepMm }
-  );
-  const actualHeightMm = sanitizeMmValue(
-    parseLengthToMm(
-      configService.get(
-        "size.actualHeightMm",
-        DEFAULT_SIZE_STATE.actualHeightMm
-      ),
-      "mm"
-    ),
-    { minMm, maxMm, stepMm }
-  );
-  const aspectRaw = Number(
-    configService.get("size.aspectRatio", DEFAULT_SIZE_STATE.aspectRatio)
-  );
-  const aspectRatio = Number.isFinite(aspectRaw) && aspectRaw > 0 ? aspectRaw : actualWidthMm / Math.max(1e-3, actualHeightMm);
-  const cutMarginMm = Math.max(
-    0,
-    parseLengthToMm(
-      configService.get("size.cutMarginMm", DEFAULT_SIZE_STATE.cutMarginMm),
-      "mm"
-    )
-  );
-  const viewPadding = configService.get(
-    "size.viewPadding",
-    DEFAULT_SIZE_STATE.viewPadding
+function applySurfaceFeatures(shape, features, options) {
+  const surfaceFeatures = features.filter(
+    (f) => f.renderBehavior === "surface"
   );
-  return {
-    unit,
-    actualWidthMm,
-    actualHeightMm,
-    constraintMode: normalizeConstraintMode(
-      configService.get(
-        "size.constraintMode",
-        DEFAULT_SIZE_STATE.constraintMode
-      )
-    ),
-    aspectRatio,
-    cutMode: normalizeCutMode(
-      configService.get("size.cutMode", DEFAULT_SIZE_STATE.cutMode)
-    ),
-    cutMarginMm,
-    viewPadding,
-    minMm,
-    maxMm,
-    stepMm
-  };
+  if (surfaceFeatures.length === 0) return shape;
+  let result = shape;
+  for (const f of surfaceFeatures) {
+    const pos = resolveFeaturePosition(f, options);
+    const center = new paper.Point(pos.x, pos.y);
+    const item = createFeatureItem(f, center);
+    try {
+      if (f.operation === "add") {
+        const temp = result.unite(item);
+        result.remove();
+        item.remove();
+        result = normalizePathItem(temp);
+      } else {
+        const temp = result.subtract(item);
+        result.remove();
+        item.remove();
+        result = normalizePathItem(temp);
+      }
+    } catch (e) {
+      console.error("Geometry: Failed to apply surface feature", e);
+      item.remove();
+    }
+  }
+  return result;
 }
-function rectByCenter(centerX, centerY, width, height) {
-  return {
-    left: centerX - width / 2,
-    top: centerY - height / 2,
-    width,
-    height,
-    centerX,
-    centerY
-  };
+function generateDielinePath(options) {
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
+  paper.project.activeLayer.removeChildren();
+  const perimeter = getPerimeterShape(options);
+  const finalShape = applySurfaceFeatures(perimeter, options.features, options);
+  const pathData = finalShape.pathData;
+  finalShape.remove();
+  return pathData;
 }
-function getCutSizeMm(size) {
-  if (size.cutMode === "trim") {
-    return { widthMm: size.actualWidthMm, heightMm: size.actualHeightMm };
-  }
-  const delta = size.cutMarginMm * 2;
-  if (size.cutMode === "outset") {
-    return {
-      widthMm: size.actualWidthMm + delta,
-      heightMm: size.actualHeightMm + delta
-    };
+function generateBleedZonePath(originalOptions, offsetOptions, offset) {
+  const paperWidth = originalOptions.canvasWidth || originalOptions.width * 2 || 2e3;
+  const paperHeight = originalOptions.canvasHeight || originalOptions.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
+  paper.project.activeLayer.removeChildren();
+  const pOriginal = getPerimeterShape(originalOptions);
+  const shapeOriginal = applySurfaceFeatures(
+    pOriginal,
+    originalOptions.features,
+    originalOptions
+  );
+  const pOffset = getPerimeterShape(offsetOptions);
+  const shapeOffset = applySurfaceFeatures(
+    pOffset,
+    offsetOptions.features,
+    offsetOptions
+  );
+  let bleedZone;
+  if (offset > 0) {
+    bleedZone = shapeOffset.subtract(shapeOriginal);
+  } else {
+    bleedZone = shapeOriginal.subtract(shapeOffset);
   }
-  return {
-    widthMm: Math.max(size.minMm, size.actualWidthMm - delta),
-    heightMm: Math.max(size.minMm, size.actualHeightMm - delta)
+  const pathData = bleedZone.pathData;
+  shapeOriginal.remove();
+  shapeOffset.remove();
+  bleedZone.remove();
+  return pathData;
+}
+function getLowestPointOnDieline(options) {
+  ensurePaper(options.width * 2, options.height * 2);
+  paper.project.activeLayer.removeChildren();
+  const shape = createBaseShape(options);
+  const bounds = shape.bounds;
+  const result = {
+    x: bounds.center.x,
+    y: bounds.bottom
   };
+  shape.remove();
+  return result;
 }
-function computeSceneLayout(canvasService, size) {
-  const canvasWidth = canvasService.canvas.width || 0;
-  const canvasHeight = canvasService.canvas.height || 0;
-  if (canvasWidth <= 0 || canvasHeight <= 0) return null;
-  const { widthMm: cutWidthMm, heightMm: cutHeightMm } = getCutSizeMm(size);
-  const viewWidthMm = Math.max(size.actualWidthMm, cutWidthMm);
-  const viewHeightMm = Math.max(size.actualHeightMm, cutHeightMm);
-  if (!Number.isFinite(viewWidthMm) || !Number.isFinite(viewHeightMm) || viewWidthMm <= 0 || viewHeightMm <= 0) {
-    return null;
-  }
-  const paddingPx = resolvePaddingPx(
-    size.viewPadding,
-    canvasWidth,
-    canvasHeight
-  );
-  canvasService.viewport.updateContainer(canvasWidth, canvasHeight);
-  canvasService.viewport.setPadding(paddingPx);
-  canvasService.viewport.updatePhysical(viewWidthMm, viewHeightMm);
-  const layout = canvasService.viewport.layout;
-  if (!Number.isFinite(layout.scale) || !Number.isFinite(layout.offsetX) || !Number.isFinite(layout.offsetY) || layout.scale <= 0) {
-    return null;
-  }
-  const centerX = layout.offsetX + layout.width / 2;
-  const centerY = layout.offsetY + layout.height / 2;
-  const trimWidthPx = size.actualWidthMm * layout.scale;
-  const trimHeightPx = size.actualHeightMm * layout.scale;
-  const cutWidthPx = cutWidthMm * layout.scale;
-  const cutHeightPx = cutHeightMm * layout.scale;
-  const trimRect = rectByCenter(centerX, centerY, trimWidthPx, trimHeightPx);
-  const cutRect = rectByCenter(centerX, centerY, cutWidthPx, cutHeightPx);
-  const bleedRect = rectByCenter(
-    centerX,
-    centerY,
-    Math.max(trimWidthPx, cutWidthPx),
-    Math.max(trimHeightPx, cutHeightPx)
-  );
-  return {
-    scale: layout.scale,
-    canvasWidth,
-    canvasHeight,
-    trimRect,
-    cutRect,
-    bleedRect,
-    trimWidthMm: size.actualWidthMm,
-    trimHeightMm: size.actualHeightMm,
-    cutWidthMm,
-    cutHeightMm,
-    cutMode: size.cutMode,
-    cutMarginMm: size.cutMarginMm
+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 location = shape.getNearestLocation(p);
+  const result = {
+    x: location.point.x,
+    y: location.point.y,
+    normal: location.normal ? { x: location.normal.x, y: location.normal.y } : void 0
   };
+  shape.remove();
+  return result;
 }
-function buildSceneGeometry(configService, layout) {
-  const radiusMm = parseLengthToMm(
-    configService.get("dieline.radius", 0),
-    "mm"
-  );
-  const offset = (layout.cutRect.width - layout.trimRect.width) / 2;
-  const sourceWidth = Number(configService.get("dieline.customSourceWidthPx", 0));
-  const sourceHeight = Number(
-    configService.get("dieline.customSourceHeightPx", 0)
-  );
-  const shapeStyle = normalizeShapeStyle(
-    configService.get("dieline.shapeStyle", DEFAULT_DIELINE_SHAPE_STYLE)
-  );
+function getPathBounds(pathData) {
+  const path = new paper.Path();
+  path.pathData = pathData;
+  const bounds = path.bounds;
+  path.remove();
   return {
-    shape: normalizeDielineShape(
-      configService.get("dieline.shape", DEFAULT_DIELINE_SHAPE)
-    ),
-    shapeStyle,
-    unit: "px",
-    x: layout.trimRect.centerX,
-    y: layout.trimRect.centerY,
-    width: layout.trimRect.width,
-    height: layout.trimRect.height,
-    radius: radiusMm * layout.scale,
-    offset,
-    scale: layout.scale,
-    pathData: configService.get("dieline.pathData"),
-    customSourceWidthPx: Number.isFinite(sourceWidth) && sourceWidth > 0 ? sourceWidth : void 0,
-    customSourceHeightPx: Number.isFinite(sourceHeight) && sourceHeight > 0 ? sourceHeight : void 0
+    x: bounds.x,
+    y: bounds.y,
+    width: bounds.width,
+    height: bounds.height
   };
 }
 
@@ -1332,6 +1566,7 @@ var ImageTool = class {
     this.isImageSelectionActive = false;
     this.focusedImageId = null;
     this.renderSeq = 0;
+    this.imageSpecs = [];
     this.overlaySpecs = [];
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
@@ -1439,9 +1674,34 @@ var ImageTool = class {
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
       () => ({
-        rootLayerSpecs: {
-          [IMAGE_OVERLAY_LAYER_ID]: this.overlaySpecs
-        }
+        passes: [
+          {
+            id: IMAGE_OBJECT_LAYER_ID,
+            stack: 500,
+            order: 0,
+            visibility: {
+              op: "not",
+              expr: {
+                op: "sessionActive",
+                toolId: "pooder.kit.white-ink"
+              }
+            },
+            objects: this.imageSpecs
+          },
+          {
+            id: IMAGE_OVERLAY_LAYER_ID,
+            stack: 800,
+            order: 0,
+            visibility: {
+              op: "not",
+              expr: {
+                op: "sessionActive",
+                toolId: "pooder.kit.white-ink"
+              }
+            },
+            objects: this.overlaySpecs
+          }
+        ]
       }),
       { priority: 300 }
     );
@@ -1498,6 +1758,7 @@ var ImageTool = class {
     this.cropShapeHatchPattern = void 0;
     this.cropShapeHatchPatternColor = void 0;
     this.cropShapeHatchPatternKey = void 0;
+    this.imageSpecs = [];
     this.overlaySpecs = [];
     this.clearRenderedImages();
     (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
@@ -1973,9 +2234,7 @@ var ImageTool = class {
   }
   getOverlayObjects() {
     if (!this.canvasService) return [];
-    return this.canvasService.getRootLayerObjects(
-      IMAGE_OVERLAY_LAYER_ID
-    );
+    return this.canvasService.getPassObjects(IMAGE_OVERLAY_LAYER_ID);
   }
   getImageObject(id) {
     return this.getImageObjects().find((obj) => {
@@ -1985,9 +2244,9 @@ var ImageTool = class {
   }
   clearRenderedImages() {
     if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    this.getImageObjects().forEach((obj) => canvas.remove(obj));
-    this.canvasService.requestRenderAll();
+    this.imageSpecs = [];
+    this.overlaySpecs = [];
+    this.canvasService.requestRenderFromProducers();
   }
   purgeSourceSizeCacheForItem(item) {
     if (!item) return;
@@ -2015,6 +2274,29 @@ var ImageTool = class {
     }
     return { width: 1, height: 1 };
   }
+  async ensureSourceSize(src) {
+    if (!src) return null;
+    const cached = this.sourceSizeBySrc.get(src);
+    if (cached) return cached;
+    try {
+      const image = await FabricImage2.fromURL(src, {
+        crossOrigin: "anonymous"
+      });
+      const width = Number((image == null ? void 0 : image.width) || 0);
+      const height = Number((image == null ? void 0 : image.height) || 0);
+      if (width > 0 && height > 0) {
+        const size = { width, height };
+        this.sourceSizeBySrc.set(src, size);
+        return size;
+      }
+    } catch (error) {
+      this.debug("image:size:load-failed", {
+        src,
+        error: error instanceof Error ? error.message : String(error)
+      });
+    }
+    return null;
+  }
   getCoverScale(frame, size) {
     const sw = Math.max(1, size.width);
     const sh = Math.max(1, size.height);
@@ -2349,24 +2631,6 @@ var ImageTool = class {
       opacity: render.opacity
     };
   }
-  toScreenObjectProps(props) {
-    if (!this.canvasService) return props;
-    const next = { ...props };
-    if (Number.isFinite(next.left) || Number.isFinite(next.top)) {
-      const mapped = this.canvasService.toScreenPoint({
-        x: Number.isFinite(next.left) ? Number(next.left) : 0,
-        y: Number.isFinite(next.top) ? Number(next.top) : 0
-      });
-      if (Number.isFinite(next.left)) next.left = mapped.x;
-      if (Number.isFinite(next.top)) next.top = mapped.y;
-    }
-    const sceneScale = this.canvasService.getSceneScale();
-    const sx = Number.isFinite(next.scaleX) ? Number(next.scaleX) : 1;
-    const sy = Number.isFinite(next.scaleY) ? Number(next.scaleY) : 1;
-    next.scaleX = sx * sceneScale;
-    next.scaleY = sy * sceneScale;
-    return next;
-  }
   toSceneObjectScale(value) {
     if (!this.canvasService) return value;
     return value / this.canvasService.getSceneScale();
@@ -2377,104 +2641,27 @@ var ImageTool = class {
     if (typeof obj.getSrc === "function") return obj.getSrc();
     return (_a = obj == null ? void 0 : obj._originalElement) == null ? void 0 : _a.src;
   }
-  applyImageControlVisibility(obj) {
-    if (typeof (obj == null ? void 0 : obj.setControlsVisibility) !== "function") return;
-    obj.setControlsVisibility({
-      mt: false,
-      mb: false,
-      ml: false,
-      mr: false,
-      tl: true,
-      tr: true,
-      bl: true,
-      br: true,
-      mtr: true
-    });
-  }
-  async upsertImageObject(item, frame, seq) {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    const render = this.resolveRenderImageState(item);
-    if (!render.src) return;
-    let obj = this.getImageObject(item.id);
-    const currentSrc = this.getCurrentSrc(obj);
-    if (obj && currentSrc && currentSrc !== render.src) {
-      canvas.remove(obj);
-      obj = void 0;
-    }
-    if (!obj) {
-      const created = await FabricImage2.fromURL(render.src, {
-        crossOrigin: "anonymous"
-      });
-      if (seq !== this.renderSeq) return;
-      created.set({
+  async buildImageSpecs(items, frame) {
+    const specs = [];
+    for (const item of items) {
+      const render = this.resolveRenderImageState(item);
+      if (!render.src) continue;
+      const ensured = await this.ensureSourceSize(render.src);
+      const sourceSize = ensured || this.getSourceSize(render.src);
+      const props = this.computeCanvasProps(render, sourceSize, frame);
+      specs.push({
+        id: item.id,
+        type: "image",
+        src: render.src,
         data: {
           id: item.id,
           layerId: IMAGE_OBJECT_LAYER_ID,
           type: "image-item"
-        }
+        },
+        props
       });
-      canvas.add(created);
-      obj = created;
-    }
-    this.rememberSourceSize(render.src, obj);
-    const sourceSize = this.getSourceSize(render.src, obj);
-    const props = this.computeCanvasProps(render, sourceSize, frame);
-    const screenProps = this.toScreenObjectProps(props);
-    obj.set({
-      ...screenProps,
-      data: {
-        ...obj.data || {},
-        id: item.id,
-        layerId: IMAGE_OBJECT_LAYER_ID,
-        type: "image-item"
-      }
-    });
-    this.applyImageControlVisibility(obj);
-    obj.setCoords();
-    const resolver = this.loadResolvers.get(item.id);
-    if (resolver) {
-      resolver();
-      this.loadResolvers.delete(item.id);
-    }
-  }
-  syncImageZOrder(items) {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    const objects = canvas.getObjects();
-    let insertIndex = 0;
-    const backgroundLayer = this.canvasService.getLayer("background");
-    if (backgroundLayer) {
-      const bgIndex = objects.indexOf(backgroundLayer);
-      if (bgIndex >= 0) insertIndex = bgIndex + 1;
-    }
-    items.forEach((item) => {
-      const obj = this.getImageObject(item.id);
-      if (!obj) return;
-      canvas.moveObjectTo(obj, insertIndex);
-      insertIndex += 1;
-    });
-    const overlayObjects = this.getOverlayObjects().sort((a, b) => {
-      var _a, _b, _c, _d;
-      const az = Number((_b = (_a = a == null ? void 0 : a.data) == null ? void 0 : _a.zIndex) != null ? _b : 0);
-      const bz = Number((_d = (_c = b == null ? void 0 : b.data) == null ? void 0 : _c.zIndex) != null ? _d : 0);
-      return az - bz;
-    });
-    overlayObjects.forEach((obj) => {
-      canvas.bringObjectToFront(obj);
-    });
-    if (this.isDebugEnabled()) {
-      const stack = canvas.getObjects().map((obj, index) => {
-        var _a, _b, _c;
-        return {
-          index,
-          id: (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id,
-          layerId: (_b = obj == null ? void 0 : obj.data) == null ? void 0 : _b.layerId,
-          zIndex: (_c = obj == null ? void 0 : obj.data) == null ? void 0 : _c.zIndex
-        };
-      }).filter((item) => item.layerId === IMAGE_OVERLAY_LAYER_ID);
-      this.debug("overlay:stack", stack);
     }
+    return specs;
   }
   buildOverlaySpecs(frame, sceneGeometry) {
     const visible = this.isImageEditingVisible();
@@ -2638,7 +2825,7 @@ var ImageTool = class {
         evented: false
       }
     };
-    const specs = [...mask, ...shapeOverlay, frameSpec];
+    const specs = shapeOverlay.length > 0 ? [...mask, ...shapeOverlay] : [...mask, ...shapeOverlay, frameSpec];
     this.debug("overlay:built", {
       frame,
       shape: sceneGeometry == null ? void 0 : sceneGeometry.shape,
@@ -2668,30 +2855,32 @@ var ImageTool = class {
         skipRender: true
       });
     }
-    this.getImageObjects().forEach((obj) => {
-      var _a, _b;
-      const id = (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id;
-      if (typeof id === "string" && !desiredIds.has(id)) {
-        (_b = this.canvasService) == null ? void 0 : _b.canvas.remove(obj);
-      }
-    });
-    for (const item of renderItems) {
-      if (seq !== this.renderSeq) return;
-      await this.upsertImageObject(item, frame, seq);
-    }
+    const imageSpecs = await this.buildImageSpecs(renderItems, frame);
     if (seq !== this.renderSeq) return;
-    this.syncImageZOrder(renderItems);
     const sceneGeometry = await this.resolveSceneGeometryForOverlay();
     if (seq !== this.renderSeq) return;
-    const overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
-    this.overlaySpecs = overlaySpecs;
+    this.imageSpecs = imageSpecs;
+    this.overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
     await this.canvasService.flushRenderFromProducers();
-    this.syncImageZOrder(renderItems);
+    if (seq !== this.renderSeq) return;
+    renderItems.forEach((item) => {
+      if (!this.getImageObject(item.id)) return;
+      const resolver = this.loadResolvers.get(item.id);
+      if (!resolver) return;
+      resolver();
+      this.loadResolvers.delete(item.id);
+    });
+    if (this.focusedImageId && this.isToolActive) {
+      this.setImageFocus(this.focusedImageId, {
+        syncCanvasSelection: true,
+        skipRender: true
+      });
+    }
     const overlayCanvasCount = this.getOverlayObjects().length;
     this.debug("render:done", {
       seq,
       renderCount: renderItems.length,
-      overlayCount: overlaySpecs.length,
+      overlayCount: this.overlaySpecs.length,
       overlayCanvasCount,
       isToolActive: this.isToolActive,
       isImageSelectionActive: this.isImageSelectionActive,
@@ -4341,11 +4530,11 @@ var DielineTool = class {
         style: "solid"
       },
       insideColor: "rgba(0,0,0,0)",
-      outsideColor: "#ffffff",
       showBleedLines: true,
       features: []
     };
     this.specs = [];
+    this.effects = [];
     this.renderSeq = 0;
     this.onCanvasResized = () => {
       this.updateDieline();
@@ -4382,10 +4571,23 @@ var DielineTool = class {
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
       () => ({
-        layerSpecs: {
-          [DIELINE_LAYER_ID]: this.specs
-        },
-        replaceLayerIds: [DIELINE_LAYER_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 }
     );
@@ -4441,10 +4643,6 @@ var DielineTool = class {
         s.offsetLine.style
       );
       s.insideColor = configService.get("dieline.insideColor", s.insideColor);
-      s.outsideColor = configService.get(
-        "dieline.outsideColor",
-        s.outsideColor
-      );
       s.showBleedLines = configService.get(
         "dieline.showBleedLines",
         s.showBleedLines
@@ -4507,9 +4705,6 @@ var DielineTool = class {
             case "dieline.insideColor":
               s.insideColor = e.value;
               break;
-            case "dieline.outsideColor":
-              s.outsideColor = e.value;
-              break;
             case "dieline.showBleedLines":
               s.showBleedLines = e.value;
               break;
@@ -4538,6 +4733,7 @@ var DielineTool = class {
     context.eventBus.off("canvas:resized", this.onCanvasResized);
     this.renderSeq += 1;
     this.specs = [];
+    this.effects = [];
     (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
     this.renderProducerDisposable = void 0;
     if (this.canvasService) {
@@ -4654,12 +4850,6 @@ var DielineTool = class {
           label: "Inside Color",
           default: s.insideColor
         },
-        {
-          id: "dieline.outsideColor",
-          type: "color",
-          label: "Outside Color",
-          default: s.outsideColor
-        },
         {
           id: "dieline.features",
           type: "json",
@@ -4783,6 +4973,12 @@ var DielineTool = class {
       "ConfigurationService"
     );
   }
+  hasImageItems() {
+    const configService = this.getConfigService();
+    if (!configService) return false;
+    const items = configService.get("image.items", []);
+    return Array.isArray(items) && items.length > 0;
+  }
   syncSizeState(configService) {
     const sizeState = readSizeState(configService);
     this.state.width = sizeState.actualWidthMm;
@@ -4790,29 +4986,6 @@ var DielineTool = class {
     this.state.padding = sizeState.viewPadding;
     this.state.offset = sizeState.cutMode === "outset" ? sizeState.cutMarginMm : sizeState.cutMode === "inset" ? -sizeState.cutMarginMm : 0;
   }
-  bringFeatureMarkersToFront() {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.type) === "feature-marker";
-    }).forEach((obj) => canvas.bringObjectToFront(obj));
-  }
-  ensureLayerStacking() {
-    if (!this.canvasService) return;
-    const layer = this.canvasService.getLayer(DIELINE_LAYER_ID);
-    if (!layer) return;
-    const userLayer = this.canvasService.getLayer("user");
-    if (userLayer) {
-      const layerIndex = this.canvasService.canvas.getObjects().indexOf(layer);
-      const userIndex = this.canvasService.canvas.getObjects().indexOf(userLayer);
-      if (layerIndex < userIndex) {
-        this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
-      }
-      return;
-    }
-    this.canvasService.canvas.bringObjectToFront(layer);
-  }
   buildDielineSpecs(sceneLayout) {
     var _a, _b;
     const {
@@ -4822,10 +4995,10 @@ var DielineTool = class {
       mainLine,
       offsetLine,
       insideColor,
-      outsideColor,
       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;
@@ -4847,41 +5020,8 @@ var DielineTool = class {
       radius: (f.radius || 0) * scale
     }));
     const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
-    const maskPathData = generateMaskPath({
-      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
-    });
-    const specs = [
-      {
-        id: "dieline.mask",
-        type: "path",
-        space: "screen",
-        data: { id: "dieline.mask", type: "dieline" },
-        props: {
-          pathData: maskPathData,
-          fill: outsideColor,
-          stroke: null,
-          selectable: false,
-          evented: false,
-          originX: "left",
-          originY: "top",
-          left: 0,
-          top: 0
-        }
-      }
-    ];
-    if (insideColor && insideColor !== "transparent" && insideColor !== "rgba(0,0,0,0)") {
+    const specs = [];
+    if (insideColor && insideColor !== "transparent" && insideColor !== "rgba(0,0,0,0)" && !hasImages) {
       const productPathData = generateDielinePath({
         shape,
         width: cutW,
@@ -5035,6 +5175,73 @@ var DielineTool = class {
     });
     return 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",
+        targetPassIds: [IMAGE_OBJECT_LAYER_ID2],
+        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
+          }
+        }
+      }
+    ];
+  }
   updateDieline(_emitEvent = true) {
     void this.updateDielineAsync();
   }
@@ -5051,17 +5258,17 @@ var DielineTool = class {
     if (!sceneLayout) {
       if (seq !== this.renderSeq) return;
       this.specs = [];
+      this.effects = [];
       await this.canvasService.flushRenderFromProducers();
       return;
     }
     const nextSpecs = this.buildDielineSpecs(sceneLayout);
+    const nextEffects = this.buildImageClipEffects(sceneLayout);
     if (seq !== this.renderSeq) return;
     this.specs = nextSpecs;
+    this.effects = nextEffects;
     await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
-    this.ensureLayerStacking();
-    this.bringFeatureMarkersToFront();
-    this.canvasService.bringLayerToFront("ruler-overlay");
     this.canvasService.requestRenderAll();
   }
   getGeometry() {
@@ -5496,9 +5703,14 @@ var FeatureTool = class {
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
       () => ({
-        rootLayerSpecs: {
-          [FEATURE_OVERLAY_LAYER_ID]: this.specs
-        }
+        passes: [
+          {
+            id: FEATURE_OVERLAY_LAYER_ID,
+            stack: 880,
+            order: 0,
+            objects: this.specs
+          }
+        ]
       }),
       { priority: 350 }
     );
@@ -5641,10 +5853,10 @@ var FeatureTool = class {
             await this.refreshGeometry();
             this.setWorkingFeatures(original);
             this.hasWorkingChanges = false;
+            this.clearFeatureSessionState();
             this.redraw();
             this.emitWorkingChange();
             this.updateCommittedFeatures(original);
-            this.clearFeatureSessionState();
             return { ok: true };
           }
         },
@@ -5960,6 +6172,7 @@ var FeatureTool = class {
   }
   getDraggableMarkerTarget(target) {
     var _a, _b;
+    if (!this.isFeatureSessionActive || !this.isToolActive) return null;
     if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "feature-marker") return null;
     if (((_b = target.data) == null ? void 0 : _b.markerRole) !== "handle") return null;
     return target;
@@ -6082,18 +6295,12 @@ var FeatureTool = class {
     if (seq !== this.renderSeq) return;
     await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
-    this.syncOverlayOrder();
     if (options.enforceConstraints) {
       this.enforceConstraints();
     }
   }
-  syncOverlayOrder() {
-    if (!this.canvasService) return;
-    this.canvasService.bringLayerToFront(FEATURE_OVERLAY_LAYER_ID);
-    this.canvasService.bringLayerToFront("ruler-overlay");
-  }
   buildFeatureSpecs() {
-    if (!this.currentGeometry || this.workingFeatures.length === 0) {
+    if (!this.isFeatureSessionActive || !this.currentGeometry || this.workingFeatures.length === 0) {
       return [];
     }
     const groups = /* @__PURE__ */ new Map();
@@ -6163,11 +6370,12 @@ var FeatureTool = class {
     const color = feature.color || (feature.operation === "add" ? "#00FF00" : "#FF0000");
     const strokeDash = feature.strokeDash || (feature.operation === "subtract" ? [4, 4] : void 0);
     const interactive = options.markerRole === "handle";
+    const sessionVisible = this.isToolActive && this.isFeatureSessionActive;
     const baseData = this.buildMarkerData(marker, options);
     const commonProps = {
-      visible: this.isToolActive,
-      selectable: interactive && this.isToolActive,
-      evented: interactive && this.isToolActive,
+      visible: sessionVisible,
+      selectable: interactive && sessionVisible,
+      evented: interactive && sessionVisible,
       hasControls: false,
       hasBorders: false,
       hoverCursor: interactive ? "move" : "default",
@@ -6232,7 +6440,7 @@ var FeatureTool = class {
           markerOffsetY: -visualHeight / 2
         },
         props: {
-          visible: this.isToolActive,
+          visible: sessionVisible,
           selectable: false,
           evented: false,
           width: visualWidth,
@@ -6402,9 +6610,14 @@ var FilmTool = class {
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
       () => ({
-        layerSpecs: {
-          [FILM_LAYER_ID]: this.specs
-        }
+        passes: [
+          {
+            id: FILM_LAYER_ID,
+            stack: 1e3,
+            order: 0,
+            objects: this.specs
+          }
+        ]
       }),
       { priority: 500 }
     );
@@ -6578,7 +6791,6 @@ var FilmTool = class {
     this.specs = this.buildFilmSpecs(this.renderImageUrl, this.opacity);
     await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
-    this.canvasService.bringLayerToFront(FILM_LAYER_ID);
     this.canvasService.requestRenderAll();
   }
 };
@@ -6729,10 +6941,22 @@ var RulerTool = class {
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
       () => ({
-        rootLayerSpecs: {
-          [RULER_LAYER_ID]: this.specs
-        },
-        replaceRootLayerIds: [RULER_LAYER_ID]
+        passes: [
+          {
+            id: RULER_LAYER_ID,
+            stack: 950,
+            order: 0,
+            replace: true,
+            visibility: {
+              op: "not",
+              expr: {
+                op: "activeToolIn",
+                ids: ["pooder.kit.white-ink"]
+              }
+            },
+            objects: this.specs
+          }
+        ]
       }),
       { priority: 400 }
     );
@@ -7224,7 +7448,6 @@ var RulerTool = class {
     this.specs = specs;
     await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
-    this.canvasService.bringLayerToFront(RULER_LAYER_ID);
     this.canvasService.requestRenderAll();
     this.log("render:done", { seq });
   }
@@ -7238,7 +7461,6 @@ 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 IMAGE_OBJECT_LAYER_ID3 = "image.user";
-var IMAGE_OVERLAY_LAYER_ID2 = "image-overlay";
 var WHITE_INK_DEBUG_KEY = "whiteInk.debug";
 var WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY = "whiteInk.previewImageVisible";
 var WHITE_INK_DEFAULT_OPACITY = 0.85;
@@ -7316,11 +7538,26 @@ var WhiteInkTool = class {
     this.renderProducerDisposable = this.canvasService.registerRenderProducer(
       this.id,
       () => ({
-        rootLayerSpecs: {
-          [WHITE_INK_OBJECT_LAYER_ID]: this.whiteSpecs,
-          [WHITE_INK_COVER_LAYER_ID]: this.coverSpecs,
-          [WHITE_INK_OVERLAY_LAYER_ID]: this.overlaySpecs
-        }
+        passes: [
+          {
+            id: WHITE_INK_COVER_LAYER_ID,
+            stack: 220,
+            order: 0,
+            objects: this.coverSpecs
+          },
+          {
+            id: WHITE_INK_OBJECT_LAYER_ID,
+            stack: 221,
+            order: 0,
+            objects: this.whiteSpecs
+          },
+          {
+            id: WHITE_INK_OVERLAY_LAYER_ID,
+            stack: 790,
+            order: 0,
+            objects: this.overlaySpecs
+          }
+        ]
       }),
       { priority: 260 }
     );
@@ -7399,7 +7636,6 @@ var WhiteInkTool = class {
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
     this.clearRenderedWhiteInks();
-    this.applyImageVisibilityForWhiteInk(false);
     (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
     this.renderProducerDisposable = void 0;
     if (this.canvasService) {
@@ -8239,25 +8475,9 @@ var WhiteInkTool = class {
           selectable: false,
           evented: false,
           excludeFromExport: true
-        }
-      }
-    ];
-  }
-  applyImageVisibilityForWhiteInk(previewActive) {
-    if (!this.canvasService) return;
-    const visible = !previewActive;
-    let changed = false;
-    this.canvasService.canvas.getObjects().forEach((obj) => {
-      var _a, _b;
-      if (((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) !== IMAGE_OBJECT_LAYER_ID3) return;
-      if (obj.visible === visible) return;
-      obj.set({ visible });
-      (_b = obj.setCoords) == null ? void 0 : _b.call(obj);
-      changed = true;
-    });
-    if (changed) {
-      this.canvasService.requestRenderAll();
-    }
+        }
+      }
+    ];
   }
   resolveRenderItems() {
     if (this.isToolActive) {
@@ -8283,52 +8503,6 @@ var WhiteInkTool = class {
       whiteScaleAdjustY: scaleAdjust.y
     };
   }
-  resolveDefaultInsertIndex(objects) {
-    if (!this.canvasService) return 0;
-    const backgroundLayer = this.canvasService.getLayer("background");
-    if (!backgroundLayer) return 0;
-    const bgIndex = objects.indexOf(backgroundLayer);
-    if (bgIndex < 0) return 0;
-    return bgIndex + 1;
-  }
-  syncZOrder() {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    const whiteObjects = this.canvasService.getRootLayerObjects(
-      WHITE_INK_OBJECT_LAYER_ID
-    );
-    const coverObjects = this.canvasService.getRootLayerObjects(
-      WHITE_INK_COVER_LAYER_ID
-    );
-    const frameObjects = this.canvasService.getRootLayerObjects(
-      WHITE_INK_OVERLAY_LAYER_ID
-    );
-    const currentObjects = canvas.getObjects();
-    const imageIndexes = currentObjects.map(
-      (obj, index) => {
-        var _a;
-        return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OBJECT_LAYER_ID3 ? index : -1;
-      }
-    ).filter((index) => index >= 0);
-    let whiteInsertIndex = imageIndexes.length ? Math.min(...imageIndexes) : this.resolveDefaultInsertIndex(currentObjects);
-    let coverInsertIndex = whiteInsertIndex;
-    coverObjects.forEach((obj) => {
-      canvas.moveObjectTo(obj, coverInsertIndex);
-      coverInsertIndex += 1;
-    });
-    whiteInsertIndex = coverInsertIndex;
-    whiteObjects.forEach((obj) => {
-      canvas.moveObjectTo(obj, whiteInsertIndex);
-      whiteInsertIndex += 1;
-    });
-    frameObjects.forEach((obj) => canvas.bringObjectToFront(obj));
-    canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === IMAGE_OVERLAY_LAYER_ID2;
-    }).forEach((obj) => canvas.bringObjectToFront(obj));
-    this.canvasService.bringLayerToFront("dieline-overlay");
-    this.canvasService.bringLayerToFront("ruler-overlay");
-  }
   clearRenderedWhiteInks() {
     if (!this.canvasService) return;
     this.whiteSpecs = [];
@@ -8360,7 +8534,6 @@ var WhiteInkTool = class {
     this.syncToolActiveFromWorkbench();
     const seq = ++this.renderSeq;
     const previewActive = this.isPreviewActive();
-    this.applyImageVisibilityForWhiteInk(previewActive);
     const frame = this.getFrameRect();
     const frameSpecs = this.buildFrameSpecs(frame);
     let whiteSpecs = [];
@@ -8408,7 +8581,6 @@ var WhiteInkTool = class {
     this.overlaySpecs = frameSpecs;
     await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
-    this.syncZOrder();
     this.canvasService.requestRenderAll();
   }
   getMaskCacheKey(sourceUrl, tint) {
@@ -8593,62 +8765,12 @@ var SceneLayoutService = class {
   }
 };
 
-// src/extensions/sceneVisibility.ts
-import { WORKBENCH_SERVICE } from "@pooder/core";
-var CANVAS_SERVICE_ID2 = "CanvasService";
-var HIDDEN_DIELINE_TOOLS = /* @__PURE__ */ new Set(["pooder.kit.image", "pooder.kit.white-ink"]);
-var HIDDEN_RULER_TOOLS = /* @__PURE__ */ new Set(["pooder.kit.white-ink"]);
-var SceneVisibilityService = class {
-  constructor() {
-    this.activeToolId = null;
-    this.onToolActivated = (e) => {
-      this.activeToolId = e.id;
-      this.apply();
-    };
-    this.onObjectAdded = () => {
-      this.apply();
-    };
-  }
-  init(context) {
-    var _a, _b;
-    if (this.context) {
-      this.dispose(this.context);
-    }
-    const canvasService = context.get(CANVAS_SERVICE_ID2);
-    if (!canvasService) {
-      throw new Error("[SceneVisibilityService] CanvasService is required.");
-    }
-    this.context = context;
-    this.canvasService = canvasService;
-    this.activeToolId = (_b = (_a = context.get(WORKBENCH_SERVICE)) == null ? void 0 : _a.activeToolId) != null ? _b : null;
-    context.eventBus.on("tool:activated", this.onToolActivated);
-    context.eventBus.on("object:added", this.onObjectAdded);
-    this.apply();
-  }
-  dispose(context) {
-    var _a;
-    const activeContext = (_a = this.context) != null ? _a : context;
-    activeContext.eventBus.off("tool:activated", this.onToolActivated);
-    activeContext.eventBus.off("object:added", this.onObjectAdded);
-    this.context = void 0;
-    this.activeToolId = null;
-    this.canvasService = void 0;
-  }
-  apply() {
-    if (!this.canvasService) return;
-    const dielineLayer = this.canvasService.getLayer("dieline-overlay");
-    if (dielineLayer) {
-      const visible = !HIDDEN_DIELINE_TOOLS.has(this.activeToolId || "");
-      this.canvasService.setLayerVisibility("dieline-overlay", visible);
-    }
-    const rulerVisible = !HIDDEN_RULER_TOOLS.has(this.activeToolId || "");
-    this.canvasService.setLayerVisibility("ruler-overlay", rulerVisible);
-    this.canvasService.requestRenderAll();
-  }
-};
-
 // src/services/CanvasService.ts
-import { Canvas, Group, Rect, Path as Path2, Image as Image2, Text } from "fabric";
+import { Canvas, Rect, Path as Path2, Image as Image2, Text } from "fabric";
+import {
+  TOOL_SESSION_SERVICE,
+  WORKBENCH_SERVICE
+} from "@pooder/core";
 
 // src/services/ViewportSystem.ts
 var ViewportSystem = class {
@@ -8723,6 +8845,53 @@ var ViewportSystem = class {
   }
 };
 
+// src/services/visibility.ts
+function compareLayerObjectCount(actual, cmp, expected) {
+  if (cmp === ">") return actual > expected;
+  if (cmp === ">=") return actual >= expected;
+  if (cmp === "<") return actual < expected;
+  if (cmp === "<=") return actual <= expected;
+  return actual === expected;
+}
+function layerState(context, layerId) {
+  return context.layers.get(layerId) || { exists: false, objectCount: 0 };
+}
+function evaluateVisibilityExpr(expr, context) {
+  var _a;
+  if (!expr) return true;
+  if (expr.op === "const") {
+    return Boolean(expr.value);
+  }
+  if (expr.op === "activeToolIn") {
+    const activeToolId = (_a = context.activeToolId) != null ? _a : null;
+    return !!activeToolId && expr.ids.includes(activeToolId);
+  }
+  if (expr.op === "sessionActive") {
+    const toolId = String(expr.toolId || "").trim();
+    if (!toolId) return false;
+    return context.isSessionActive ? context.isSessionActive(toolId) : false;
+  }
+  if (expr.op === "layerExists") {
+    return layerState(context, expr.layerId).exists === true;
+  }
+  if (expr.op === "layerObjectCount") {
+    const expected = Number(expr.value);
+    if (!Number.isFinite(expected)) return false;
+    const count = layerState(context, expr.layerId).objectCount;
+    return compareLayerObjectCount(count, expr.cmp, expected);
+  }
+  if (expr.op === "not") {
+    return !evaluateVisibilityExpr(expr.expr, context);
+  }
+  if (expr.op === "all") {
+    return expr.exprs.every((item) => evaluateVisibilityExpr(item, context));
+  }
+  if (expr.op === "any") {
+    return expr.exprs.some((item) => evaluateVisibilityExpr(item, context));
+  }
+  return true;
+}
+
 // src/services/CanvasService.ts
 var CanvasService = class {
   constructor(el, options) {
@@ -8731,8 +8900,45 @@ var CanvasService = class {
     this.producerFlushRequested = false;
     this.producerLoopPending = false;
     this.producerLoopPromise = null;
-    this.managedProducerLayerIds = /* @__PURE__ */ new Set();
-    this.managedProducerRootLayerIds = /* @__PURE__ */ new Set();
+    this.producerApplyInProgress = false;
+    this.visibilityRefreshScheduled = false;
+    this.managedProducerPassIds = /* @__PURE__ */ new Set();
+    this.managedPassMetas = /* @__PURE__ */ new Map();
+    this.canvasForwardersBound = false;
+    this.forwardSelectionCreated = (e) => {
+      var _a;
+      (_a = this.eventBus) == null ? void 0 : _a.emit("selection:created", e);
+    };
+    this.forwardSelectionUpdated = (e) => {
+      var _a;
+      (_a = this.eventBus) == null ? void 0 : _a.emit("selection:updated", e);
+    };
+    this.forwardSelectionCleared = (e) => {
+      var _a;
+      (_a = this.eventBus) == null ? void 0 : _a.emit("selection:cleared", e);
+    };
+    this.forwardObjectModified = (e) => {
+      var _a;
+      (_a = this.eventBus) == null ? void 0 : _a.emit("object:modified", e);
+    };
+    this.forwardObjectAdded = (e) => {
+      var _a;
+      (_a = this.eventBus) == null ? void 0 : _a.emit("object:added", e);
+    };
+    this.forwardObjectRemoved = (e) => {
+      var _a;
+      (_a = this.eventBus) == null ? void 0 : _a.emit("object:removed", e);
+    };
+    this.onToolActivated = () => {
+      this.applyManagedPassVisibility();
+    };
+    this.onToolSessionChanged = () => {
+      this.applyManagedPassVisibility();
+    };
+    this.onCanvasObjectChanged = () => {
+      if (this.producerApplyInProgress) return;
+      this.scheduleManagedPassVisibilityRefresh();
+    };
     if (el instanceof Canvas) {
       this.canvas = el;
     } else {
@@ -8749,25 +8955,52 @@ var CanvasService = class {
       this.setEventBus(options.eventBus);
     }
   }
+  init(context) {
+    if (this.context) {
+      this.detachContextEvents(this.context.eventBus);
+    }
+    this.context = context;
+    this.workbenchService = context.get(WORKBENCH_SERVICE);
+    this.toolSessionService = context.get(TOOL_SESSION_SERVICE);
+    this.setEventBus(context.eventBus);
+    this.attachContextEvents(context.eventBus);
+  }
+  attachContextEvents(eventBus) {
+    eventBus.on("tool:activated", this.onToolActivated);
+    eventBus.on("tool:session:change", this.onToolSessionChanged);
+    eventBus.on("object:added", this.onCanvasObjectChanged);
+    eventBus.on("object:removed", this.onCanvasObjectChanged);
+  }
+  detachContextEvents(eventBus) {
+    eventBus.off("tool:activated", this.onToolActivated);
+    eventBus.off("tool:session:change", this.onToolSessionChanged);
+    eventBus.off("object:added", this.onCanvasObjectChanged);
+    eventBus.off("object:removed", this.onCanvasObjectChanged);
+  }
   setEventBus(eventBus) {
     this.eventBus = eventBus;
     this.setupEvents();
   }
   setupEvents() {
-    if (!this.eventBus) return;
-    const bus = this.eventBus;
-    const forward = (name) => (e) => bus.emit(name, e);
-    this.canvas.on("selection:created", forward("selection:created"));
-    this.canvas.on("selection:updated", forward("selection:updated"));
-    this.canvas.on("selection:cleared", forward("selection:cleared"));
-    this.canvas.on("object:modified", forward("object:modified"));
-    this.canvas.on("object:added", forward("object:added"));
-    this.canvas.on("object:removed", forward("object:removed"));
+    if (this.canvasForwardersBound) return;
+    this.canvas.on("selection:created", this.forwardSelectionCreated);
+    this.canvas.on("selection:updated", this.forwardSelectionUpdated);
+    this.canvas.on("selection:cleared", this.forwardSelectionCleared);
+    this.canvas.on("object:modified", this.forwardObjectModified);
+    this.canvas.on("object:added", this.forwardObjectAdded);
+    this.canvas.on("object:removed", this.forwardObjectRemoved);
+    this.canvasForwardersBound = true;
   }
   dispose() {
+    if (this.context) {
+      this.detachContextEvents(this.context.eventBus);
+    }
     this.renderProducers.clear();
-    this.managedProducerLayerIds.clear();
-    this.managedProducerRootLayerIds.clear();
+    this.managedProducerPassIds.clear();
+    this.managedPassMetas.clear();
+    this.context = void 0;
+    this.workbenchService = void 0;
+    this.toolSessionService = void 0;
     this.producerFlushRequested = false;
     this.canvas.dispose();
   }
@@ -8845,118 +9078,274 @@ var CanvasService = class {
       return a.toolId.localeCompare(b.toolId);
     });
   }
-  appendLayerSpecMap(map, source) {
-    if (!source) return;
-    Object.entries(source).forEach(([layerId, specs]) => {
-      if (!Array.isArray(specs)) return;
-      const list = map.get(layerId) || [];
-      list.push(...specs);
-      map.set(layerId, list);
+  normalizePassSpecValue(spec) {
+    const id = String(spec.id || "").trim();
+    if (!id) return null;
+    return {
+      id,
+      stack: Number.isFinite(spec.stack) ? Number(spec.stack) : 0,
+      order: Number.isFinite(spec.order) ? Number(spec.order) : 0,
+      replace: spec.replace !== false,
+      visibility: spec.visibility,
+      effects: Array.isArray(spec.effects) ? [...spec.effects] : [],
+      objects: Array.isArray(spec.objects) ? [...spec.objects] : []
+    };
+  }
+  normalizeClipPathEffectSpec(effect, passId, index) {
+    if (!effect || effect.type !== "clipPath") return null;
+    const source = effect.source;
+    if (!source || typeof source !== "object") return null;
+    const sourceId = String(source.id || "").trim();
+    if (!sourceId) return null;
+    const targetPassIds = Array.isArray(effect.targetPassIds) ? effect.targetPassIds.map((item) => String(item || "").trim()).filter((item) => item.length > 0) : [];
+    if (!targetPassIds.length) return null;
+    const customId = String(effect.id || "").trim();
+    const key = customId || `${passId}.effect.clipPath.${index}`;
+    return {
+      type: "clipPath",
+      key,
+      source: {
+        ...source,
+        id: sourceId
+      },
+      targetPassIds
+    };
+  }
+  mergePassSpec(map, rawSpec, producerId) {
+    const normalized = this.normalizePassSpecValue(rawSpec);
+    if (!normalized) return;
+    const existing = map.get(normalized.id);
+    if (!existing) {
+      map.set(normalized.id, normalized);
+      return;
+    }
+    existing.objects.push(...normalized.objects);
+    existing.replace = existing.replace || normalized.replace;
+    existing.stack = normalized.stack;
+    existing.order = normalized.order;
+    if (normalized.visibility !== void 0) {
+      existing.visibility = normalized.visibility;
+    }
+    existing.effects.push(...normalized.effects);
+    if (normalized.objects.length === 0 && normalized.effects.length === 0) {
+      console.debug(
+        `[CanvasService] pass "${normalized.id}" from producer "${producerId}" updated ordering/visibility only.`
+      );
+    }
+  }
+  comparePassMeta(a, b) {
+    if (a.stack !== b.stack) return a.stack - b.stack;
+    if (a.order !== b.order) return a.order - b.order;
+    return a.id.localeCompare(b.id);
+  }
+  getPassObjectOrder(obj) {
+    var _a;
+    const raw = Number((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.passOrder);
+    return Number.isFinite(raw) ? raw : Number.MAX_SAFE_INTEGER;
+  }
+  getPassCanvasObjects(passId) {
+    const all = this.canvas.getObjects();
+    return all.filter((obj) => {
+      var _a;
+      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.passId) === passId;
+    }).sort((a, b) => {
+      const orderA = this.getPassObjectOrder(a);
+      const orderB = this.getPassObjectOrder(b);
+      if (orderA !== orderB) return orderA - orderB;
+      return all.indexOf(a) - all.indexOf(b);
+    });
+  }
+  getPassObjects(passId) {
+    return this.getPassCanvasObjects(passId);
+  }
+  getRootLayerObjects(layerId) {
+    return this.getPassCanvasObjects(layerId);
+  }
+  isManagedPassObject(obj) {
+    var _a;
+    const passId = (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.passId;
+    return typeof passId === "string" && this.managedPassMetas.has(passId);
+  }
+  syncManagedPassStacking(passes) {
+    const orderedPasses = [...passes].sort((a, b) => this.comparePassMeta(a, b));
+    if (!orderedPasses.length) return;
+    const canvasObjects = this.canvas.getObjects();
+    const managedObjects = canvasObjects.filter(
+      (obj) => this.isManagedPassObject(obj)
+    );
+    if (!managedObjects.length) return;
+    const firstManagedIndex = managedObjects.map((obj) => canvasObjects.indexOf(obj)).filter((index) => index >= 0).reduce((min, value) => Math.min(min, value), Number.MAX_SAFE_INTEGER);
+    let targetIndex = Number.isFinite(firstManagedIndex) ? firstManagedIndex : 0;
+    orderedPasses.forEach((meta) => {
+      const objects = this.getPassCanvasObjects(meta.id);
+      objects.forEach((obj) => {
+        this.moveObjectInCanvas(obj, targetIndex);
+        targetIndex += 1;
+      });
+    });
+  }
+  getPassRuntimeState() {
+    const state = /* @__PURE__ */ new Map();
+    const ensure = (passId) => {
+      const id = String(passId || "").trim();
+      if (!id) return { exists: false, objectCount: 0 };
+      let item = state.get(id);
+      if (!item) {
+        item = { exists: false, objectCount: 0 };
+        state.set(id, item);
+      }
+      return item;
+    };
+    this.canvas.getObjects().forEach((obj) => {
+      var _a;
+      const passId = (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.passId;
+      if (typeof passId === "string") {
+        const item = ensure(passId);
+        item.exists = true;
+        item.objectCount += 1;
+      }
+    });
+    this.managedPassMetas.forEach((meta) => {
+      const item = ensure(meta.id);
+      item.exists = true;
+    });
+    return state;
+  }
+  applyManagedPassVisibility(options = {}) {
+    var _a, _b;
+    if (!this.managedPassMetas.size) return false;
+    const layers = this.getPassRuntimeState();
+    const activeToolId = (_b = (_a = this.workbenchService) == null ? void 0 : _a.activeToolId) != null ? _b : null;
+    const isSessionActive = (toolId) => {
+      if (!this.toolSessionService) return false;
+      return this.toolSessionService.getState(toolId).status === "active";
+    };
+    let changed = false;
+    this.managedPassMetas.forEach((meta) => {
+      const visible = evaluateVisibilityExpr(meta.visibility, {
+        activeToolId,
+        isSessionActive,
+        layers
+      });
+      changed = this.setPassVisibility(meta.id, visible) || changed;
+    });
+    if (changed && options.render !== false) {
+      this.requestRenderAll();
+    }
+    return changed;
+  }
+  scheduleManagedPassVisibilityRefresh() {
+    if (this.visibilityRefreshScheduled) return;
+    this.visibilityRefreshScheduled = true;
+    void Promise.resolve().then(() => {
+      this.visibilityRefreshScheduled = false;
+      this.applyManagedPassVisibility();
     });
   }
   async collectAndApplyProducerSpecs() {
-    const groupLayerSpecs = /* @__PURE__ */ new Map();
-    const rootLayerSpecs = /* @__PURE__ */ new Map();
-    const replaceLayerIds = /* @__PURE__ */ new Set();
-    const replaceRootLayerIds = /* @__PURE__ */ new Set();
+    const passes = /* @__PURE__ */ new Map();
     const entries = this.sortedRenderProducerEntries();
-    for (const entry of entries) {
-      try {
-        const result = await entry.producer();
-        if (!result) continue;
-        this.appendLayerSpecMap(groupLayerSpecs, result.layerSpecs);
-        this.appendLayerSpecMap(rootLayerSpecs, result.rootLayerSpecs);
-        if (Array.isArray(result.replaceLayerIds)) {
-          result.replaceLayerIds.forEach((layerId) => {
-            if (layerId) replaceLayerIds.add(layerId);
-          });
-        }
-        if (Array.isArray(result.replaceRootLayerIds)) {
-          result.replaceRootLayerIds.forEach((layerId) => {
-            if (layerId) replaceRootLayerIds.add(layerId);
-          });
+    this.producerApplyInProgress = true;
+    try {
+      for (const entry of entries) {
+        try {
+          const result = await entry.producer();
+          if (!result) continue;
+          const specs = Array.isArray(result.passes) ? result.passes : [];
+          specs.forEach((spec) => this.mergePassSpec(passes, spec, entry.toolId));
+        } catch (error) {
+          console.error(
+            `[CanvasService] render producer "${entry.toolId}" failed.`,
+            error
+          );
         }
-      } catch (error) {
-        console.error(
-          `[CanvasService] render producer "${entry.toolId}" failed.`,
-          error
-        );
       }
-    }
-    const nextLayerIds = new Set(groupLayerSpecs.keys());
-    const nextRootLayerIds = new Set(rootLayerSpecs.keys());
-    for (const [layerId, specs] of groupLayerSpecs.entries()) {
-      if (replaceLayerIds.has(layerId)) {
-        const layer = this.getLayer(layerId);
-        if (layer) {
-          layer.getObjects().forEach((obj) => layer.remove(obj));
-        }
+      const nextPassIds = /* @__PURE__ */ new Set();
+      const nextManagedPassMetas = /* @__PURE__ */ new Map();
+      const nextEffects = [];
+      for (const pass of passes.values()) {
+        nextPassIds.add(pass.id);
+        nextManagedPassMetas.set(pass.id, {
+          id: pass.id,
+          stack: pass.stack,
+          order: pass.order,
+          visibility: pass.visibility
+        });
+        await this.applyObjectSpecsToPass(pass.id, pass.objects, {
+          render: false,
+          replace: pass.replace
+        });
+        pass.effects.forEach((effect, index) => {
+          const normalized = this.normalizeClipPathEffectSpec(
+            effect,
+            pass.id,
+            index
+          );
+          if (!normalized) return;
+          nextEffects.push(normalized);
+        });
       }
-      await this.applyObjectSpecsToLayer(layerId, specs, { render: false });
-    }
-    for (const layerId of this.managedProducerLayerIds) {
-      if (nextLayerIds.has(layerId)) continue;
-      const layer = this.getLayer(layerId);
-      if (!layer) continue;
-      await this.applyObjectSpecsToContainer(layer, [], { render: false });
-    }
-    for (const [layerId, specs] of rootLayerSpecs.entries()) {
-      if (replaceRootLayerIds.has(layerId)) {
-        const existing = this.getRootLayerObjects(layerId);
-        existing.forEach((obj) => this.canvas.remove(obj));
+      for (const passId of this.managedProducerPassIds) {
+        if (nextPassIds.has(passId)) continue;
+        await this.applyObjectSpecsToPass(passId, [], {
+          render: false,
+          replace: true
+        });
       }
-      await this.applyObjectSpecsToRootLayer(layerId, specs, { render: false });
-    }
-    for (const layerId of this.managedProducerRootLayerIds) {
-      if (nextRootLayerIds.has(layerId)) continue;
-      await this.applyObjectSpecsToRootLayer(layerId, [], { render: false });
+      this.managedProducerPassIds = nextPassIds;
+      this.managedPassMetas = nextManagedPassMetas;
+      this.syncManagedPassStacking(Array.from(nextManagedPassMetas.values()));
+      await this.applyManagedPassEffects(nextEffects);
+      this.applyManagedPassVisibility({ render: false });
+    } finally {
+      this.producerApplyInProgress = false;
     }
-    this.managedProducerLayerIds = nextLayerIds;
-    this.managedProducerRootLayerIds = nextRootLayerIds;
     this.requestRenderAll();
   }
-  /**
-   * Get a layer (Group) by its ID.
-   * We assume layers are Groups directly on the canvas with a data.id property.
-   */
-  getLayer(id) {
-    return this.canvas.getObjects().find((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.id) === id;
-    });
-  }
-  /**
-   * Create a layer (Group) with the given ID if it doesn't exist.
-   */
-  createLayer(id, options = {}) {
-    let layer = this.getLayer(id);
-    if (!layer) {
-      const defaultOptions = {
-        selectable: false,
-        evented: false,
-        ...options,
-        data: { ...options.data, id }
-      };
-      layer = new Group([], defaultOptions);
-      this.canvas.add(layer);
-    }
-    return layer;
-  }
-  /**
-   * Find an object by ID, optionally within a specific layer.
-   */
-  getObject(id, layerId) {
-    if (layerId) {
-      const layer = this.getLayer(layerId);
-      if (!layer) return void 0;
-      return layer.getObjects().find((obj) => {
-        var _a;
-        return ((_a = obj.data) == null ? void 0 : _a.id) === id;
+  async applyManagedPassEffects(effects) {
+    const effectTargetMap = /* @__PURE__ */ new Map();
+    for (const effect of effects) {
+      if (effect.type !== "clipPath") continue;
+      effect.targetPassIds.forEach((targetPassId) => {
+        this.getPassCanvasObjects(targetPassId).forEach((obj) => {
+          effectTargetMap.set(obj, effect);
+        });
       });
     }
+    const managedObjects = this.canvas.getObjects().filter(
+      (obj) => this.isManagedPassObject(obj)
+    );
+    const effectTemplateCache = /* @__PURE__ */ new Map();
+    for (const obj of managedObjects) {
+      const targetEffect = effectTargetMap.get(obj);
+      if (!targetEffect) {
+        this.clearClipPathEffectFromObject(obj);
+        continue;
+      }
+      let template = effectTemplateCache.get(targetEffect.key);
+      if (template === void 0) {
+        template = await this.createClipPathTemplate(targetEffect);
+        effectTemplateCache.set(targetEffect.key, template);
+      }
+      if (!template) {
+        this.clearClipPathEffectFromObject(obj);
+        continue;
+      }
+      await this.applyClipPathEffectToObject(
+        obj,
+        template,
+        targetEffect.key
+      );
+    }
+  }
+  getObject(id, passId) {
+    const normalizedId = String(id || "").trim();
+    if (!normalizedId) return void 0;
     return this.canvas.getObjects().find((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.id) === id;
+      var _a, _b;
+      if (((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id) !== normalizedId) return false;
+      if (!passId) return true;
+      return ((_b = obj == null ? void 0 : obj.data) == null ? void 0 : _b.passId) === passId;
     });
   }
   requestRenderAll() {
@@ -9142,114 +9531,187 @@ var CanvasService = class {
     next.top = objectTop + objectHeight * this.originFactor(originY);
     return next;
   }
-  setLayerVisibility(layerId, visible) {
-    const layer = this.getLayer(layerId);
-    if (layer) {
-      layer.set({ visible });
-    }
-    const objects = this.getRootLayerObjects(layerId);
+  setPassVisibility(passId, visible) {
+    const objects = this.getPassCanvasObjects(passId);
+    let changed = false;
     objects.forEach((obj) => {
       var _a, _b;
+      if (obj.visible === visible) return;
       (_a = obj.set) == null ? void 0 : _a.call(obj, { visible });
       (_b = obj.setCoords) == null ? void 0 : _b.call(obj);
+      changed = true;
     });
+    return changed;
   }
-  bringLayerToFront(layerId) {
-    const layer = this.getLayer(layerId);
-    if (layer) {
-      this.canvas.bringObjectToFront(layer);
-    }
-    const objects = this.getRootLayerObjects(layerId);
-    objects.forEach((obj) => this.canvas.bringObjectToFront(obj));
+  setLayerVisibility(layerId, visible) {
+    return this.setPassVisibility(layerId, visible);
   }
-  async applyLayerSpec(spec) {
-    const layer = this.createLayer(spec.id, spec.props || {});
-    await this.applyObjectSpecsToContainer(layer, spec.objects);
+  bringPassToFront(passId) {
+    const objects = this.getPassCanvasObjects(passId);
+    objects.forEach((obj) => this.canvas.bringObjectToFront(obj));
   }
-  async applyObjectSpecsToLayer(layerId, objects, options = {}) {
-    const layer = this.createLayer(layerId, {});
-    await this.applyObjectSpecsToContainer(layer, objects, options);
+  bringLayerToFront(layerId) {
+    this.bringPassToFront(layerId);
   }
-  getRootLayerObjects(layerId) {
-    return this.canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === layerId;
+  async applyPassSpec(spec, options = {}) {
+    await this.applyObjectSpecsToPass(spec.id, spec.objects, {
+      render: options.render,
+      replace: spec.replace !== false
     });
   }
-  async applyObjectSpecsToRootLayer(layerId, specs, options = {}) {
-    const desiredIds = new Set(specs.map((s) => s.id));
-    const existing = this.getRootLayerObjects(layerId);
-    existing.forEach((obj) => {
-      var _a;
-      const id = (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id;
-      if (typeof id === "string" && !desiredIds.has(id)) {
-        this.canvas.remove(obj);
-      }
+  async applyObjectSpecsToRootLayer(passId, specs, options = {}) {
+    await this.applyObjectSpecsToPass(passId, specs, {
+      render: options.render,
+      replace: true
     });
-    const byId = /* @__PURE__ */ new Map();
-    this.getRootLayerObjects(layerId).forEach((obj) => {
-      var _a;
-      const id = (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id;
-      if (typeof id === "string") byId.set(id, obj);
+  }
+  normalizeObjectSpecs(specs) {
+    const seen = /* @__PURE__ */ new Set();
+    const normalized = [];
+    (specs || []).forEach((spec) => {
+      const id = String((spec == null ? void 0 : spec.id) || "").trim();
+      if (!id || seen.has(id)) return;
+      seen.add(id);
+      normalized.push({
+        ...spec,
+        id
+      });
     });
-    for (let index = 0; index < specs.length; index += 1) {
-      const spec = specs[index];
-      let current = byId.get(spec.id);
-      if (current && spec.type === "image" && spec.src && current.getSrc && current.getSrc() !== spec.src) {
-        this.canvas.remove(current);
-        byId.delete(spec.id);
-        current = void 0;
-      }
-      if (!current) {
-        const created = await this.createFabricObject(spec);
-        if (!created) continue;
-        this.patchFabricObject(created, spec, { layerId });
-        this.canvas.add(created);
-        byId.set(spec.id, created);
-        continue;
-      }
-      this.patchFabricObject(current, spec, { layerId });
+    return normalized;
+  }
+  async cloneFabricObject(source) {
+    const clone = source.clone;
+    if (typeof clone !== "function") return void 0;
+    const result = clone.call(source);
+    if (!result || typeof result.then !== "function") {
+      return void 0;
     }
-    if (options.render !== false) {
-      this.requestRenderAll();
+    try {
+      const copied = await result;
+      return copied;
+    } catch (e) {
+      return void 0;
     }
   }
-  async applyObjectSpecsToContainer(container, specs, options = {}) {
-    const desiredIds = new Set(specs.map((s) => s.id));
-    const existing = container.getObjects();
-    existing.forEach((obj) => {
-      var _a;
-      const id = (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id;
-      if (typeof id === "string" && !desiredIds.has(id)) {
-        container.remove(obj);
+  async createClipPathTemplate(effect) {
+    var _a, _b;
+    const source = effect.source;
+    const sourceId = String(source.id || "").trim();
+    if (!sourceId) return null;
+    const template = await this.createFabricObject({
+      ...source,
+      id: sourceId,
+      data: {
+        ...source.data || {},
+        id: sourceId,
+        type: "clip-path-effect-template",
+        effectKey: effect.key
+      },
+      props: {
+        ...source.props || {},
+        selectable: false,
+        evented: false,
+        excludeFromExport: true
       }
     });
+    if (!template) return null;
+    (_a = template.set) == null ? void 0 : _a.call(template, {
+      selectable: false,
+      evented: false,
+      excludeFromExport: true,
+      absolutePositioned: true
+    });
+    (_b = template.setCoords) == null ? void 0 : _b.call(template);
+    return template;
+  }
+  isClipPathEffectManaged(target) {
+    return typeof (target == null ? void 0 : target.__pooderEffectClipKey) === "string";
+  }
+  clearClipPathEffectFromObject(target) {
+    var _a, _b;
+    if (!target) return;
+    if (!this.isClipPathEffectManaged(target)) return;
+    (_a = target.set) == null ? void 0 : _a.call(target, { clipPath: void 0 });
+    (_b = target.setCoords) == null ? void 0 : _b.call(target);
+    delete target.__pooderEffectClipKey;
+  }
+  async applyClipPathEffectToObject(target, clipTemplate, effectKey) {
+    var _a, _b, _c, _d;
+    if (!target) return;
+    const clipPath = await this.cloneFabricObject(clipTemplate);
+    if (!clipPath) {
+      this.clearClipPathEffectFromObject(target);
+      return;
+    }
+    (_a = clipPath.set) == null ? void 0 : _a.call(clipPath, {
+      selectable: false,
+      evented: false,
+      excludeFromExport: true,
+      absolutePositioned: true
+    });
+    (_b = clipPath.setCoords) == null ? void 0 : _b.call(clipPath);
+    (_c = target.set) == null ? void 0 : _c.call(target, { clipPath });
+    (_d = target.setCoords) == null ? void 0 : _d.call(target);
+    target.__pooderEffectClipKey = effectKey;
+  }
+  async applyObjectSpecsToPass(passId, specs, options = {}) {
+    const normalizedPassId = String(passId || "").trim();
+    if (!normalizedPassId) return;
+    const replace = options.replace !== false;
+    const normalizedSpecs = this.normalizeObjectSpecs(specs);
+    const desiredIds = new Set(normalizedSpecs.map((s) => s.id));
+    const existing = this.getPassCanvasObjects(normalizedPassId);
+    if (replace) {
+      existing.forEach((obj) => {
+        var _a;
+        const id = (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id;
+        if (typeof id === "string" && !desiredIds.has(id)) {
+          this.canvas.remove(obj);
+        }
+      });
+    }
     const byId = /* @__PURE__ */ new Map();
-    container.getObjects().forEach((obj) => {
+    this.getPassCanvasObjects(normalizedPassId).forEach((obj) => {
       var _a;
       const id = (_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id;
       if (typeof id === "string") byId.set(id, obj);
     });
-    for (let index = 0; index < specs.length; index += 1) {
-      const spec = specs[index];
+    for (let index = 0; index < normalizedSpecs.length; index += 1) {
+      const spec = normalizedSpecs[index];
       let current = byId.get(spec.id);
-      if (current && spec.type === "image" && spec.src && current.getSrc && current.getSrc() !== spec.src) {
-        container.remove(current);
+      if (spec.type === "path") {
+        const nextPathData = this.readPathDataFromSpec(spec);
+        if (!nextPathData || !nextPathData.trim()) {
+          if (current) {
+            this.canvas.remove(current);
+            byId.delete(spec.id);
+          }
+          continue;
+        }
+      }
+      if (current && this.shouldRecreateObject(current, spec)) {
+        this.canvas.remove(current);
         byId.delete(spec.id);
         current = void 0;
       }
       if (!current) {
         const created = await this.createFabricObject(spec);
         if (!created) continue;
-        container.add(created);
-        current = created;
-        byId.set(spec.id, current);
-      } else {
-        this.patchFabricObject(current, spec);
+        this.patchFabricObject(created, spec, {
+          passId: normalizedPassId,
+          layerId: normalizedPassId,
+          passOrder: index
+        });
+        this.canvas.add(created);
+        byId.set(spec.id, created);
+        continue;
       }
-      this.moveObjectInContainer(container, current, index);
+      this.patchFabricObject(current, spec, {
+        passId: normalizedPassId,
+        layerId: normalizedPassId,
+        passOrder: index
+      });
     }
-    container.dirty = true;
     if (options.render !== false) {
       this.requestRenderAll();
     }
@@ -9261,10 +9723,56 @@ var CanvasService = class {
       ...extraData || {},
       id: spec.id
     };
+    nextData.__renderSourceKey = this.getSpecRenderSourceKey(spec);
     const props = this.resolveFabricProps(spec, spec.props || {});
     obj.set({ ...props, data: nextData });
     obj.setCoords();
   }
+  readPathDataFromSpec(spec) {
+    var _a, _b;
+    if (spec.type !== "path") return void 0;
+    const raw = ((_a = spec.props) == null ? void 0 : _a.path) || ((_b = spec.props) == null ? void 0 : _b.pathData);
+    if (typeof raw !== "string") return void 0;
+    return raw;
+  }
+  hashText(value) {
+    let hash = 2166136261;
+    for (let i = 0; i < value.length; i += 1) {
+      hash ^= value.charCodeAt(i);
+      hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+    }
+    return (hash >>> 0).toString(16);
+  }
+  getSpecRenderSourceKey(spec) {
+    var _a, _b;
+    switch (spec.type) {
+      case "path": {
+        const pathData = this.readPathDataFromSpec(spec) || "";
+        return `path:${this.hashText(pathData)}`;
+      }
+      case "image":
+        return `image:${String(spec.src || "")}`;
+      case "text":
+        return `text:${String((_b = (_a = spec.props) == null ? void 0 : _a.text) != null ? _b : "")}`;
+      case "rect":
+        return "rect";
+      default:
+        return String(spec.type || "");
+    }
+  }
+  shouldRecreateObject(current, spec) {
+    var _a;
+    if (!current) return true;
+    const currentType = String((current == null ? void 0 : current.type) || "").toLowerCase();
+    if (currentType !== spec.type) return true;
+    const expectedKey = this.getSpecRenderSourceKey(spec);
+    const currentKey = String(((_a = current == null ? void 0 : current.data) == null ? void 0 : _a.__renderSourceKey) || "");
+    if (currentKey && expectedKey && currentKey !== expectedKey) return true;
+    if (spec.type === "image" && spec.src && current.getSrc) {
+      return current.getSrc() !== spec.src;
+    }
+    return false;
+  }
   resolveFabricProps(spec, props) {
     const space = spec.space || "scene";
     const next = this.resolveLayoutProps(spec, props);
@@ -9288,26 +9796,26 @@ var CanvasService = class {
     next.scaleY = rawScaleY * sceneScale;
     return next;
   }
-  moveObjectInContainer(container, obj, index) {
+  moveObjectInCanvas(obj, index) {
     if (!obj) return;
-    const moveObjectTo = container.moveObjectTo;
+    const moveObjectTo = this.canvas.moveObjectTo;
     if (typeof moveObjectTo === "function") {
-      moveObjectTo.call(container, obj, index);
+      moveObjectTo.call(this.canvas, obj, index);
       return;
     }
-    const list = container._objects;
+    const list = this.canvas._objects;
     if (!Array.isArray(list)) return;
     const from = list.indexOf(obj);
     if (from < 0 || from === index) return;
     list.splice(from, 1);
     const target = Math.max(0, Math.min(index, list.length));
     list.splice(target, 0, obj);
-    if (typeof container._onStackOrderChanged === "function") {
-      container._onStackOrderChanged();
+    if (typeof this.canvas._onStackOrderChanged === "function") {
+      this.canvas._onStackOrderChanged();
     }
   }
   async createFabricObject(spec) {
-    var _a, _b, _c, _d;
+    var _a, _b;
     if (spec.type === "rect") {
       const props = this.resolveFabricProps(spec, spec.props || {});
       const rect = new Rect({
@@ -9318,7 +9826,7 @@ var CanvasService = class {
       return rect;
     }
     if (spec.type === "path") {
-      const pathData = ((_a = spec.props) == null ? void 0 : _a.path) || ((_b = spec.props) == null ? void 0 : _b.pathData);
+      const pathData = this.readPathDataFromSpec(spec);
       if (!pathData) return void 0;
       const props = this.resolveFabricProps(spec, spec.props || {});
       const path = new Path2(pathData, {
@@ -9340,7 +9848,7 @@ var CanvasService = class {
       return image;
     }
     if (spec.type === "text") {
-      const content = String((_d = (_c = spec.props) == null ? void 0 : _c.text) != null ? _d : "");
+      const content = String((_b = (_a = spec.props) == null ? void 0 : _a.text) != null ? _b : "");
       const props = this.resolveFabricProps(spec, spec.props || {});
       const text = new Text(content, {
         ...props,
@@ -9362,8 +9870,8 @@ export {
   MirrorTool,
   RulerTool,
   SceneLayoutService,
-  SceneVisibilityService,
   SizeTool,
   ViewportSystem,
-  WhiteInkTool
+  WhiteInkTool,
+  evaluateVisibilityExpr
 };