@pooder/kit 5.3.1 → 5.4.0

package/dist/index.mjs

@@ -2,7 +2,12 @@
 import {
   ContributionPointIds
 } from "@pooder/core";
-import { Rect, FabricImage as Image2 } from "fabric";
+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";
@@ -11,17 +16,38 @@ var BackgroundTool = class {
     };
     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);
     }
   }
   activate(context) {
+    var _a;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for BackgroundTool");
       return;
     }
-    const configService = context.services.get("ConfigurationService");
+    (_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);
@@ -45,17 +71,25 @@ var BackgroundTool = class {
         }
       });
     }
-    this.initLayer();
+    context.eventBus.on("canvas:resized", this.onCanvasResized);
     this.updateBackground();
   }
   deactivate(context) {
-    if (this.canvasService) {
-      const layer = this.canvasService.getLayer("background");
-      if (layer) {
-        this.canvasService.canvas.remove(layer);
-      }
-      this.canvasService = void 0;
+    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;
   }
   contribute() {
     return {
@@ -115,88 +149,131 @@ var BackgroundTool = class {
       ]
     };
   }
-  initLayer() {
-    if (!this.canvasService) return;
-    let backgroundLayer = this.canvasService.getLayer("background");
-    if (!backgroundLayer) {
-      backgroundLayer = this.canvasService.createLayer("background", {
-        width: this.canvasService.canvas.width,
-        height: this.canvasService.canvas.height,
-        selectable: false,
-        evented: false
-      });
-      this.canvasService.canvas.sendObjectToBack(backgroundLayer);
-    }
+  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);
+    return {
+      width: width > 0 ? width : DEFAULT_WIDTH,
+      height: height > 0 ? height : DEFAULT_HEIGHT
+    };
   }
-  async updateBackground() {
-    if (!this.canvasService) return;
-    const layer = this.canvasService.getLayer("background");
-    if (!layer) {
-      console.warn("[BackgroundTool] Background layer not found");
-      return;
+  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 { color, url } = this;
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
-    let rect = this.canvasService.getObject(
-      "background-color-rect",
-      "background"
-    );
-    if (rect) {
-      rect.set({
-        fill: color
-      });
-    } else {
-      rect = new Rect({
-        width,
-        height,
-        fill: color,
+    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,
-        data: {
-          id: "background-color-rect"
-        }
-      });
-      layer.add(rect);
-      layer.sendObjectToBack(rect);
+        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;
     }
-    let img = this.canvasService.getObject(
-      "background-image",
-      "background"
-    );
+    const task = this.loadImageSize(src);
+    this.pendingSizeBySrc.set(src, task);
     try {
-      if (img) {
-        if (img.getSrc() !== url) {
-          if (url) {
-            await img.setSrc(url);
-          } else {
-            layer.remove(img);
-          }
-        }
-      } else {
-        if (url) {
-          img = await Image2.fromURL(url, { crossOrigin: "anonymous" });
-          img.set({
-            originX: "left",
-            originY: "top",
-            left: 0,
-            top: 0,
-            selectable: false,
-            evented: false,
-            data: {
-              id: "background-image"
-            }
-          });
-          img.scaleToWidth(width);
-          if (img.getScaledHeight() < height) img.scaleToHeight(height);
-          layer.add(img);
-        }
+      return await task;
+    } finally {
+      if (this.pendingSizeBySrc.get(src) === task) {
+        this.pendingSizeBySrc.delete(src);
       }
-      this.canvasService.requestRenderAll();
-    } catch (e) {
-      console.error("[BackgroundTool] Failed to load image", e);
     }
-    layer.dirty = true;
+  }
+  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);
+    }
+    return null;
+  }
+  updateBackground() {
+    void this.updateBackgroundAsync();
+  }
+  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();
   }
 };
@@ -207,11 +284,76 @@ import {
 } from "@pooder/core";
 import {
   Canvas as FabricCanvas,
-  Image as FabricImage,
+  Image as FabricImage2,
   Pattern,
   Point
 } from "fabric";
 
+// src/extensions/dielineShape.ts
+var BUILTIN_DIELINE_SHAPES = [
+  "rect",
+  "circle",
+  "ellipse",
+  "heart"
+];
+var DIELINE_SHAPES = [...BUILTIN_DIELINE_SHAPES, "custom"];
+var DEFAULT_DIELINE_SHAPE = "rect";
+var DEFAULT_HEART_SHAPE_PARAMS = {
+  lobeSpread: 0.46,
+  notchDepth: 0.24,
+  tipSharpness: 0
+};
+var DEFAULT_DIELINE_SHAPE_STYLE = {
+  fitMode: "contain",
+  ...DEFAULT_HEART_SHAPE_PARAMS
+};
+function isDielineShape(value) {
+  return typeof value === "string" && DIELINE_SHAPES.includes(value);
+}
+function normalizeFitMode(value, fallback) {
+  if (value === "contain" || value === "stretch") return value;
+  return fallback;
+}
+function normalizeUnitInterval(value, fallback) {
+  const num = Number(value);
+  if (!Number.isFinite(num)) return fallback;
+  return Math.max(0, Math.min(1, num));
+}
+function normalizeDielineShape(value, fallback = DEFAULT_DIELINE_SHAPE) {
+  return isDielineShape(value) ? value : fallback;
+}
+function normalizeShapeStyle(value, fallback = DEFAULT_DIELINE_SHAPE_STYLE) {
+  var _a, _b, _c;
+  const raw = value && typeof value === "object" ? value : {};
+  return {
+    ...fallback,
+    fitMode: normalizeFitMode(raw.fitMode, fallback.fitMode),
+    lobeSpread: normalizeUnitInterval(
+      raw.lobeSpread,
+      Number((_a = fallback.lobeSpread) != null ? _a : DEFAULT_HEART_SHAPE_PARAMS.lobeSpread)
+    ),
+    notchDepth: normalizeUnitInterval(
+      raw.notchDepth,
+      Number((_b = fallback.notchDepth) != null ? _b : DEFAULT_HEART_SHAPE_PARAMS.notchDepth)
+    ),
+    tipSharpness: normalizeUnitInterval(
+      raw.tipSharpness,
+      Number((_c = fallback.tipSharpness) != null ? _c : DEFAULT_HEART_SHAPE_PARAMS.tipSharpness)
+    )
+  };
+}
+function getShapeFitMode(style) {
+  return normalizeShapeStyle(style).fitMode;
+}
+function getHeartShapeParams(style) {
+  const normalized = normalizeShapeStyle(style);
+  return {
+    lobeSpread: Number(normalized.lobeSpread),
+    notchDepth: Number(normalized.notchDepth),
+    tipSharpness: Number(normalized.tipSharpness)
+  };
+}
+
 // src/extensions/geometry.ts
 import paper from "paper";
 
@@ -354,66 +496,164 @@ function selectOuterChain(args) {
   if (scoreA !== scoreB) return scoreA > scoreB ? pointsA : pointsB;
   return pointsA.length <= pointsB.length ? pointsA : pointsB;
 }
-function createBaseShape(options) {
-  var _a;
-  const {
-    shape,
-    width,
-    height,
-    radius,
-    x,
-    y,
-    pathData,
-    customSourceWidthPx,
-    customSourceHeightPx
-  } = options;
-  const center = new paper.Point(x, y);
-  if (shape === "rect") {
+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
+    )
+  );
+  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)
     });
-  } else if (shape === "circle") {
+  },
+  circle: (options) => {
+    const { x, y, width, height } = options;
     const r = Math.min(width, height) / 2;
     return new paper.Path.Circle({
-      center,
+      center: new paper.Point(x, y),
       radius: Math.max(0, r)
     });
-  } else if (shape === "ellipse") {
+  },
+  ellipse: (options) => {
+    const { x, y, width, height } = options;
     return new paper.Path.Ellipse({
-      center,
+      center: new paper.Point(x, y),
       radius: [Math.max(0, width / 2), Math.max(0, height / 2)]
     });
-  } else if (shape === "custom" && pathData) {
-    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;
-    }
+  },
+  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;
+  }
+  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;
-  } else {
-    return new paper.Path.Rectangle({
-      point: [x - width / 2, y - height / 2],
-      size: [Math.max(0, width), Math.max(0, height)]
-    });
   }
+  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);
 }
 function resolveBridgeBasePath(shape, anchor) {
   if (shape instanceof paper.Path) {
@@ -737,6 +977,18 @@ function getNearestPointOnDieline(point, options) {
   shape.remove();
   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
+  };
+}
 
 // src/coordinate.ts
 var Coordinate = class {
@@ -825,12 +1077,6 @@ function parseLengthToMm(input, defaultUnit) {
   const unit = (_b = (_a = match[2]) == null ? void 0 : _a.toLowerCase()) != null ? _b : defaultUnit;
   return Coordinate.convertUnit(value, unit, "mm");
 }
-function formatMm(valueMm, displayUnit, fractionDigits = 2) {
-  if (!Number.isFinite(valueMm)) return "0";
-  const value = Coordinate.convertUnit(valueMm, "mm", displayUnit);
-  const rounded = Number(value.toFixed(fractionDigits));
-  return rounded.toString();
-}
 
 // src/extensions/sceneLayoutModel.ts
 var DEFAULT_SIZE_STATE = {
@@ -1045,10 +1291,15 @@ function buildSceneGeometry(configService, layout) {
   const sourceHeight = Number(
     configService.get("dieline.customSourceHeightPx", 0)
   );
+  const shapeStyle = normalizeShapeStyle(
+    configService.get("dieline.shapeStyle", DEFAULT_DIELINE_SHAPE_STYLE)
+  );
   return {
-    shape: configService.get("dieline.shape", "rect"),
-    unit: "mm",
-    displayUnit: normalizeUnit(configService.get("size.unit", "mm")),
+    shape: normalizeDielineShape(
+      configService.get("dieline.shape", DEFAULT_DIELINE_SHAPE)
+    ),
+    shapeStyle,
+    unit: "px",
     x: layout.trimRect.centerX,
     y: layout.trimRect.centerY,
     width: layout.trimRect.width,
@@ -1081,6 +1332,7 @@ var ImageTool = class {
     this.isImageSelectionActive = false;
     this.focusedImageId = null;
     this.renderSeq = 0;
+    this.overlaySpecs = [];
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
@@ -1158,28 +1410,41 @@ var ImageTool = class {
       const frame = this.getFrameRect();
       if (!frame.width || !frame.height) return;
       const center = target.getCenterPoint ? target.getCenterPoint() : new Point((_c = target.left) != null ? _c : 0, (_d = target.top) != null ? _d : 0);
+      const centerScene = this.canvasService ? this.canvasService.toScenePoint({ x: center.x, y: center.y }) : { x: center.x, y: center.y };
       const objectScale = Number.isFinite(target == null ? void 0 : target.scaleX) ? target.scaleX : 1;
+      const objectScaleScene = this.toSceneObjectScale(objectScale || 1);
       const workingItem = this.workingItems.find((item) => item.id === id);
       const sourceKey = (workingItem == null ? void 0 : workingItem.sourceUrl) || (workingItem == null ? void 0 : workingItem.url) || "";
       const sourceSize = this.getSourceSize(sourceKey, target);
       const coverScale = this.getCoverScale(frame, sourceSize);
       const updates = {
-        left: this.clampNormalized((center.x - frame.left) / frame.width),
-        top: this.clampNormalized((center.y - frame.top) / frame.height),
+        left: this.clampNormalized((centerScene.x - frame.left) / frame.width),
+        top: this.clampNormalized((centerScene.y - frame.top) / frame.height),
         angle: Number.isFinite(target.angle) ? target.angle : 0,
-        scale: Math.max(0.05, (objectScale || 1) / coverScale)
+        scale: Math.max(0.05, objectScaleScene / coverScale)
       };
       this.focusedImageId = id;
       this.updateImageInWorking(id, updates);
     };
   }
   activate(context) {
+    var _a;
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for ImageTool");
       return;
     }
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        rootLayerSpecs: {
+          [IMAGE_OVERLAY_LAYER_ID]: this.overlaySpecs
+        }
+      }),
+      { priority: 300 }
+    );
     context.eventBus.on("tool:activated", this.onToolActivated);
     context.eventBus.on("object:modified", this.onObjectModified);
     context.eventBus.on("selection:created", this.onSelectionChanged);
@@ -1220,7 +1485,7 @@ var ImageTool = class {
     this.updateImages();
   }
   deactivate(context) {
-    var _a;
+    var _a, _b;
     context.eventBus.off("tool:activated", this.onToolActivated);
     context.eventBus.off("object:modified", this.onObjectModified);
     context.eventBus.off("selection:created", this.onSelectionChanged);
@@ -1232,12 +1497,13 @@ var ImageTool = class {
     this.dirtyTrackerDisposable = void 0;
     this.cropShapeHatchPattern = void 0;
     this.cropShapeHatchPatternColor = void 0;
+    this.cropShapeHatchPatternKey = void 0;
+    this.overlaySpecs = [];
     this.clearRenderedImages();
+    (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
+    this.renderProducerDisposable = void 0;
     if (this.canvasService) {
-      void this.canvasService.applyObjectSpecsToRootLayer(
-        IMAGE_OVERLAY_LAYER_ID,
-        []
-      );
+      void this.canvasService.flushRenderFromProducers();
       this.canvasService = void 0;
     }
     this.context = void 0;
@@ -1648,38 +1914,38 @@ var ImageTool = class {
     if (!layout) {
       return { left: 0, top: 0, width: 0, height: 0 };
     }
-    return {
+    return this.canvasService.toSceneRect({
       left: layout.cutRect.left,
       top: layout.cutRect.top,
       width: layout.cutRect.width,
       height: layout.cutRect.height
+    });
+  }
+  getFrameRectScreen(frame) {
+    if (!this.canvasService) {
+      return { left: 0, top: 0, width: 0, height: 0 };
+    }
+    return this.canvasService.toScreenRect(frame || this.getFrameRect());
+  }
+  toLayoutSceneRect(rect) {
+    return {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+      space: "scene"
     };
   }
   async resolveDefaultFitArea() {
-    if (!this.context || !this.canvasService) return null;
-    const commandService = this.context.services.get("CommandService");
-    if (!commandService) return null;
-    try {
-      const layout = await Promise.resolve(
-        commandService.executeCommand("getSceneLayout")
-      );
-      const cutRect = layout == null ? void 0 : layout.cutRect;
-      const width = Number(cutRect == null ? void 0 : cutRect.width);
-      const height = Number(cutRect == null ? void 0 : cutRect.height);
-      const left = Number(cutRect == null ? void 0 : cutRect.left);
-      const top = Number(cutRect == null ? void 0 : cutRect.top);
-      if (!Number.isFinite(width) || !Number.isFinite(height) || !Number.isFinite(left) || !Number.isFinite(top)) {
-        return null;
-      }
-      return {
-        width: Math.max(1, width),
-        height: Math.max(1, height),
-        left: left + width / 2,
-        top: top + height / 2
-      };
-    } catch (e) {
-      return null;
-    }
+    if (!this.canvasService) return null;
+    const frame = this.getFrameRect();
+    if (frame.width <= 0 || frame.height <= 0) return null;
+    return {
+      width: Math.max(1, frame.width),
+      height: Math.max(1, frame.height),
+      left: frame.left + frame.width / 2,
+      top: frame.top + frame.height / 2
+    };
   }
   async fitImageToDefaultArea(id) {
     if (!this.canvasService) return;
@@ -1688,13 +1954,14 @@ var ImageTool = class {
       await this.fitImageToArea(id, area);
       return;
     }
-    const canvasW = Math.max(1, this.canvasService.canvas.width || 0);
-    const canvasH = Math.max(1, this.canvasService.canvas.height || 0);
+    const viewport = this.canvasService.getSceneViewportRect();
+    const canvasW = Math.max(1, viewport.width || 0);
+    const canvasH = Math.max(1, viewport.height || 0);
     await this.fitImageToArea(id, {
       width: canvasW,
       height: canvasH,
-      left: canvasW / 2,
-      top: canvasH / 2
+      left: viewport.left + canvasW / 2,
+      top: viewport.top + canvasH / 2
     });
   }
   getImageObjects() {
@@ -1782,13 +2049,17 @@ var ImageTool = class {
   }
   toSceneGeometryLike(raw) {
     const shape = raw == null ? void 0 : raw.shape;
-    if (shape !== "rect" && shape !== "circle" && shape !== "ellipse" && shape !== "custom") {
+    if (!isDielineShape(shape)) {
       return null;
     }
-    const radius = Number(raw == null ? void 0 : raw.radius);
-    const offset = Number(raw == null ? void 0 : raw.offset);
+    const radiusRaw = Number(raw == null ? void 0 : raw.radius);
+    const offsetRaw = Number(raw == null ? void 0 : raw.offset);
+    const unit = typeof (raw == null ? void 0 : raw.unit) === "string" ? raw.unit : "px";
+    const radius = unit === "scene" || !this.canvasService ? radiusRaw : this.canvasService.toSceneLength(radiusRaw);
+    const offset = unit === "scene" || !this.canvasService ? offsetRaw : this.canvasService.toSceneLength(offsetRaw);
     return {
       shape,
+      shapeStyle: normalizeShapeStyle(raw == null ? void 0 : raw.shapeStyle),
       radius: Number.isFinite(radius) ? radius : 0,
       offset: Number.isFinite(offset) ? offset : 0
     };
@@ -1840,8 +2111,11 @@ var ImageTool = class {
     return Math.max(0, Math.min(maxRadius, rawCutRadius));
   }
   getCropShapeHatchPattern(color = "rgba(255, 0, 0, 0.6)") {
+    var _a;
     if (typeof document === "undefined") return void 0;
-    if (this.cropShapeHatchPattern && this.cropShapeHatchPatternColor === color) {
+    const sceneScale = ((_a = this.canvasService) == null ? void 0 : _a.getSceneScale()) || 1;
+    const cacheKey = `${color}::${sceneScale.toFixed(6)}`;
+    if (this.cropShapeHatchPattern && this.cropShapeHatchPatternColor === color && this.cropShapeHatchPatternKey === cacheKey) {
       return this.cropShapeHatchPattern;
     }
     const size = 16;
@@ -1870,11 +2144,21 @@ var ImageTool = class {
       // @ts-ignore: Fabric Pattern accepts canvas source here.
       repetition: "repeat"
     });
+    pattern.patternTransform = [
+      1 / sceneScale,
+      0,
+      0,
+      1 / sceneScale,
+      0,
+      0
+    ];
     this.cropShapeHatchPattern = pattern;
     this.cropShapeHatchPatternColor = color;
+    this.cropShapeHatchPatternKey = cacheKey;
     return pattern;
   }
   buildCropShapeOverlaySpecs(frame, sceneGeometry) {
+    var _a, _b;
     if (!sceneGeometry) {
       this.debug("overlay:shape:skip", { reason: "scene-geometry-missing" });
       return [];
@@ -1884,6 +2168,7 @@ var ImageTool = class {
       return [];
     }
     const shape = sceneGeometry.shape;
+    const shapeStyle = sceneGeometry.shapeStyle;
     const inset = 0;
     const shapeWidth = Math.max(1, frame.width);
     const shapeHeight = Math.max(1, frame.height);
@@ -1893,6 +2178,7 @@ var ImageTool = class {
       frameWidth: frame.width,
       frameHeight: frame.height,
       offset: sceneGeometry.offset,
+      shapeStyle,
       inset,
       shapeWidth,
       shapeHeight,
@@ -1914,6 +2200,7 @@ var ImageTool = class {
       x: frame.width / 2,
       y: frame.height / 2,
       features: [],
+      shapeStyle,
       canvasWidth: frame.width,
       canvasHeight: frame.height
     };
@@ -1931,6 +2218,9 @@ var ImageTool = class {
       }
       const patternFill = this.getCropShapeHatchPattern();
       const hatchFill = patternFill || "rgba(255, 0, 0, 0.22)";
+      const shapeBounds = getPathBounds(shapePathData);
+      const hatchBounds = getPathBounds(hatchPathData);
+      const frameRect = this.toLayoutSceneRect(frame);
       const hatchPathLength = hatchPathData.length;
       const shapePathLength = shapePathData.length;
       const specs = [
@@ -1938,10 +2228,16 @@ var ImageTool = class {
           id: "image.cropShapeHatch",
           type: "path",
           data: { id: "image.cropShapeHatch", zIndex: 5 },
+          layout: {
+            reference: "custom",
+            referenceRect: frameRect,
+            alignX: "start",
+            alignY: "start",
+            offsetX: hatchBounds.x,
+            offsetY: hatchBounds.y
+          },
           props: {
             pathData: hatchPathData,
-            left: frame.left,
-            top: frame.top,
             originX: "left",
             originY: "top",
             fill: hatchFill,
@@ -1958,15 +2254,21 @@ var ImageTool = class {
           id: "image.cropShapePath",
           type: "path",
           data: { id: "image.cropShapePath", zIndex: 6 },
+          layout: {
+            reference: "custom",
+            referenceRect: frameRect,
+            alignX: "start",
+            alignY: "start",
+            offsetX: shapeBounds.x,
+            offsetY: shapeBounds.y
+          },
           props: {
             pathData: shapePathData,
-            left: frame.left,
-            top: frame.top,
             originX: "left",
             originY: "top",
             fill: "rgba(0,0,0,0)",
             stroke: "rgba(255, 0, 0, 0.9)",
-            strokeWidth: 1,
+            strokeWidth: (_b = (_a = this.canvasService) == null ? void 0 : _a.toSceneLength(1)) != null ? _b : 1,
             selectable: false,
             evented: false,
             excludeFromExport: true,
@@ -1983,6 +2285,8 @@ var ImageTool = class {
         fillRule: "evenodd",
         shapePathLength,
         hatchPathLength,
+        shapeBounds,
+        hatchBounds,
         hatchFillType: hatchFill && typeof hatchFill === "object" ? "pattern" : "color",
         ids: specs.map((spec) => spec.id)
       });
@@ -2045,6 +2349,28 @@ 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();
+  }
   getCurrentSrc(obj) {
     var _a;
     if (!obj) return void 0;
@@ -2077,7 +2403,7 @@ var ImageTool = class {
       obj = void 0;
     }
     if (!obj) {
-      const created = await FabricImage.fromURL(render.src, {
+      const created = await FabricImage2.fromURL(render.src, {
         crossOrigin: "anonymous"
       });
       if (seq !== this.renderSeq) return;
@@ -2094,8 +2420,9 @@ var ImageTool = class {
     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({
-      ...props,
+      ...screenProps,
       data: {
         ...obj.data || {},
         id: item.id,
@@ -2161,37 +2488,67 @@ var ImageTool = class {
       });
       return [];
     }
-    const canvasW = this.canvasService.canvas.width || 0;
-    const canvasH = this.canvasService.canvas.height || 0;
+    const viewport = this.canvasService.getSceneViewportRect();
+    const canvasW = viewport.width || 0;
+    const canvasH = viewport.height || 0;
+    const canvasLeft = viewport.left || 0;
+    const canvasTop = viewport.top || 0;
     const visual = this.getFrameVisualConfig();
-    const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
-    const frameTop = Math.max(0, Math.min(canvasH, frame.top));
+    const strokeWidthScene = this.canvasService.toSceneLength(
+      visual.strokeWidth
+    );
+    const dashLengthScene = this.canvasService.toSceneLength(visual.dashLength);
+    const frameLeft = Math.max(
+      canvasLeft,
+      Math.min(canvasLeft + canvasW, frame.left)
+    );
+    const frameTop = Math.max(
+      canvasTop,
+      Math.min(canvasTop + canvasH, frame.top)
+    );
     const frameRight = Math.max(
       frameLeft,
-      Math.min(canvasW, frame.left + frame.width)
+      Math.min(canvasLeft + canvasW, frame.left + frame.width)
     );
     const frameBottom = Math.max(
       frameTop,
-      Math.min(canvasH, frame.top + frame.height)
+      Math.min(canvasTop + canvasH, frame.top + frame.height)
     );
     const visibleFrameH = Math.max(0, frameBottom - frameTop);
-    const topH = frameTop;
-    const bottomH = Math.max(0, canvasH - frameBottom);
-    const leftW = frameLeft;
-    const rightW = Math.max(0, canvasW - frameRight);
+    const topH = Math.max(0, frameTop - canvasTop);
+    const bottomH = Math.max(0, canvasTop + canvasH - frameBottom);
+    const leftW = Math.max(0, frameLeft - canvasLeft);
+    const rightW = Math.max(0, canvasLeft + canvasW - frameRight);
+    const viewportRect = this.toLayoutSceneRect({
+      left: canvasLeft,
+      top: canvasTop,
+      width: canvasW,
+      height: canvasH
+    });
+    const visibleFrameBandRect = this.toLayoutSceneRect({
+      left: canvasLeft,
+      top: frameTop,
+      width: canvasW,
+      height: visibleFrameH
+    });
+    const frameRect = this.toLayoutSceneRect(frame);
     const shapeOverlay = this.buildCropShapeOverlaySpecs(frame, sceneGeometry);
     const mask = [
       {
         id: "image.cropMask.top",
         type: "rect",
         data: { id: "image.cropMask.top", zIndex: 1 },
+        layout: {
+          reference: "custom",
+          referenceRect: viewportRect,
+          alignX: "start",
+          alignY: "start",
+          width: "100%",
+          height: topH
+        },
         props: {
-          left: canvasW / 2,
-          top: topH / 2,
-          width: canvasW,
-          height: topH,
-          originX: "center",
-          originY: "center",
+          originX: "left",
+          originY: "top",
           fill: visual.outerBackground,
           selectable: false,
           evented: false
@@ -2201,13 +2558,17 @@ var ImageTool = class {
         id: "image.cropMask.bottom",
         type: "rect",
         data: { id: "image.cropMask.bottom", zIndex: 2 },
+        layout: {
+          reference: "custom",
+          referenceRect: viewportRect,
+          alignX: "start",
+          alignY: "end",
+          width: "100%",
+          height: bottomH
+        },
         props: {
-          left: canvasW / 2,
-          top: frameBottom + bottomH / 2,
-          width: canvasW,
-          height: bottomH,
-          originX: "center",
-          originY: "center",
+          originX: "left",
+          originY: "top",
           fill: visual.outerBackground,
           selectable: false,
           evented: false
@@ -2217,13 +2578,17 @@ var ImageTool = class {
         id: "image.cropMask.left",
         type: "rect",
         data: { id: "image.cropMask.left", zIndex: 3 },
-        props: {
-          left: leftW / 2,
-          top: frameTop + visibleFrameH / 2,
+        layout: {
+          reference: "custom",
+          referenceRect: visibleFrameBandRect,
+          alignX: "start",
+          alignY: "start",
           width: leftW,
-          height: visibleFrameH,
-          originX: "center",
-          originY: "center",
+          height: "100%"
+        },
+        props: {
+          originX: "left",
+          originY: "top",
           fill: visual.outerBackground,
           selectable: false,
           evented: false
@@ -2233,13 +2598,17 @@ var ImageTool = class {
         id: "image.cropMask.right",
         type: "rect",
         data: { id: "image.cropMask.right", zIndex: 4 },
-        props: {
-          left: frameRight + rightW / 2,
-          top: frameTop + visibleFrameH / 2,
+        layout: {
+          reference: "custom",
+          referenceRect: visibleFrameBandRect,
+          alignX: "end",
+          alignY: "start",
           width: rightW,
-          height: visibleFrameH,
-          originX: "center",
-          originY: "center",
+          height: "100%"
+        },
+        props: {
+          originX: "left",
+          originY: "top",
           fill: visual.outerBackground,
           selectable: false,
           evented: false
@@ -2250,17 +2619,21 @@ var ImageTool = class {
       id: "image.cropFrame",
       type: "rect",
       data: { id: "image.cropFrame", zIndex: 7 },
+      layout: {
+        reference: "custom",
+        referenceRect: frameRect,
+        alignX: "start",
+        alignY: "start",
+        width: "100%",
+        height: "100%"
+      },
       props: {
-        left: frame.left + frame.width / 2,
-        top: frame.top + frame.height / 2,
-        width: frame.width,
-        height: frame.height,
-        originX: "center",
-        originY: "center",
+        originX: "left",
+        originY: "top",
         fill: visual.innerBackground,
         stroke: visual.strokeStyle === "hidden" ? "rgba(0,0,0,0)" : visual.strokeColor,
-        strokeWidth: visual.strokeStyle === "hidden" ? 0 : visual.strokeWidth,
-        strokeDashArray: visual.strokeStyle === "dashed" ? [visual.dashLength, visual.dashLength] : void 0,
+        strokeWidth: visual.strokeStyle === "hidden" ? 0 : strokeWidthScene,
+        strokeDashArray: visual.strokeStyle === "dashed" ? [dashLengthScene, dashLengthScene] : void 0,
         selectable: false,
         evented: false
       }
@@ -2311,10 +2684,8 @@ var ImageTool = class {
     const sceneGeometry = await this.resolveSceneGeometryForOverlay();
     if (seq !== this.renderSeq) return;
     const overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
-    await this.canvasService.applyObjectSpecsToRootLayer(
-      IMAGE_OVERLAY_LAYER_ID,
-      overlaySpecs
-    );
+    this.overlaySpecs = overlaySpecs;
+    await this.canvasService.flushRenderFromProducers();
     this.syncImageZOrder(renderItems);
     const overlayCanvasCount = this.getOverlayObjects().length;
     this.debug("render:done", {
@@ -2405,7 +2776,7 @@ var ImageTool = class {
     const source = this.getSourceSize(render.src, obj);
     const frame = this.getFrameRect();
     const coverScale = this.getCoverScale(frame, source);
-    const currentScale = obj.scaleX || 1;
+    const currentScale = this.toSceneObjectScale(obj.scaleX || 1);
     const zoom = Math.max(0.05, currentScale / coverScale);
     const updated = {
       scale: Number.isFinite(zoom) ? zoom : 1,
@@ -2442,12 +2813,13 @@ var ImageTool = class {
       Math.max(1, area.width) / Math.max(1, source.width),
       Math.max(1, area.height) / Math.max(1, source.height)
     );
-    const canvasW = this.canvasService.canvas.width || 1;
-    const canvasH = this.canvasService.canvas.height || 1;
+    const viewport = this.canvasService.getSceneViewportRect();
+    const canvasW = viewport.width || 1;
+    const canvasH = viewport.height || 1;
     const areaLeftInput = (_a = area.left) != null ? _a : 0.5;
     const areaTopInput = (_b = area.top) != null ? _b : 0.5;
-    const areaLeftPx = areaLeftInput <= 1.5 ? areaLeftInput * canvasW : areaLeftInput;
-    const areaTopPx = areaTopInput <= 1.5 ? areaTopInput * canvasH : areaTopInput;
+    const areaLeftPx = areaLeftInput <= 1.5 ? viewport.left + areaLeftInput * canvasW : areaLeftInput;
+    const areaTopPx = areaTopInput <= 1.5 ? viewport.top + areaTopInput * canvasH : areaTopInput;
     const updates = {
       scale: Math.max(0.05, desiredScale / baseCover),
       left: this.clampNormalized(
@@ -2512,7 +2884,8 @@ var ImageTool = class {
     if (!normalizedIds.length) {
       throw new Error("image-ids-required");
     }
-    const frame = this.getFrameRect();
+    const frameScene = this.getFrameRect();
+    const frame = this.getFrameRectScreen(frameScene);
     const multiplier = Math.max(1, (_a = options.multiplier) != null ? _a : 2);
     const format = options.format === "jpeg" ? "jpeg" : "png";
     const width = Math.max(1, Math.round(frame.width * multiplier));
@@ -3940,6 +4313,7 @@ var ImageTracer = class {
 
 // src/extensions/dieline.ts
 var IMAGE_OBJECT_LAYER_ID2 = "image.user";
+var DIELINE_LAYER_ID = "dieline-overlay";
 var DielineTool = class {
   constructor(options) {
     this.id = "pooder.kit.dieline";
@@ -3947,8 +4321,8 @@ var DielineTool = class {
       name: "DielineTool"
     };
     this.state = {
-      displayUnit: "mm",
-      shape: "rect",
+      shape: DEFAULT_DIELINE_SHAPE,
+      shapeStyle: { ...DEFAULT_DIELINE_SHAPE_STYLE },
       width: 500,
       height: 500,
       radius: 0,
@@ -3971,6 +4345,8 @@ var DielineTool = class {
       showBleedLines: true,
       features: []
     };
+    this.specs = [];
+    this.renderSeq = 0;
     this.onCanvasResized = () => {
       this.updateDieline();
     };
@@ -3983,24 +4359,50 @@ var DielineTool = class {
         Object.assign(this.state.offsetLine, options.offsetLine);
         delete options.offsetLine;
       }
+      if (options.shapeStyle) {
+        this.state.shapeStyle = normalizeShapeStyle(
+          options.shapeStyle,
+          this.state.shapeStyle
+        );
+        delete options.shapeStyle;
+      }
       Object.assign(this.state, options);
+      this.state.shape = normalizeDielineShape(options.shape, this.state.shape);
     }
   }
   activate(context) {
+    var _a;
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for DielineTool");
       return;
     }
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        layerSpecs: {
+          [DIELINE_LAYER_ID]: this.specs
+        },
+        replaceLayerIds: [DIELINE_LAYER_ID]
+      }),
+      { priority: 250 }
+    );
     const configService = context.services.get(
       "ConfigurationService"
     );
     if (configService) {
       const s = this.state;
       const sizeState = readSizeState(configService);
-      s.displayUnit = sizeState.unit;
-      s.shape = configService.get("dieline.shape", s.shape);
+      s.shape = normalizeDielineShape(
+        configService.get("dieline.shape", s.shape),
+        s.shape
+      );
+      s.shapeStyle = normalizeShapeStyle(
+        configService.get("dieline.shapeStyle", s.shapeStyle),
+        s.shapeStyle
+      );
       s.width = sizeState.actualWidthMm;
       s.height = sizeState.actualHeightMm;
       s.radius = parseLengthToMm(
@@ -4060,7 +4462,6 @@ var DielineTool = class {
       configService.onAnyChange((e) => {
         if (e.key.startsWith("size.")) {
           const nextSize = readSizeState(configService);
-          s.displayUnit = nextSize.unit;
           s.width = nextSize.actualWidthMm;
           s.height = nextSize.actualHeightMm;
           s.padding = nextSize.viewPadding;
@@ -4071,7 +4472,10 @@ var DielineTool = class {
         if (e.key.startsWith("dieline.")) {
           switch (e.key) {
             case "dieline.shape":
-              s.shape = e.value;
+              s.shape = normalizeDielineShape(e.value, s.shape);
+              break;
+            case "dieline.shapeStyle":
+              s.shapeStyle = normalizeShapeStyle(e.value, s.shapeStyle);
               break;
             case "dieline.radius":
               s.radius = parseLengthToMm(e.value, "mm");
@@ -4127,12 +4531,18 @@ var DielineTool = class {
       });
     }
     context.eventBus.on("canvas:resized", this.onCanvasResized);
-    this.createLayer();
     this.updateDieline();
   }
   deactivate(context) {
+    var _a;
     context.eventBus.off("canvas:resized", this.onCanvasResized);
-    this.destroyLayer();
+    this.renderSeq += 1;
+    this.specs = [];
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    this.renderProducerDisposable = void 0;
+    if (this.canvasService) {
+      void this.canvasService.flushRenderFromProducers();
+    }
     this.canvasService = void 0;
     this.context = void 0;
   }
@@ -4155,7 +4565,7 @@ var DielineTool = class {
           id: "dieline.shape",
           type: "select",
           label: "Shape",
-          options: ["rect", "circle", "ellipse", "custom"],
+          options: Array.from(DIELINE_SHAPES),
           default: s.shape
         },
         {
@@ -4166,6 +4576,12 @@ var DielineTool = class {
           max: 500,
           default: s.radius
         },
+        {
+          id: "dieline.shapeStyle",
+          type: "json",
+          label: "Shape Style",
+          default: s.shapeStyle
+        },
         {
           id: "dieline.showBleedLines",
           type: "boolean",
@@ -4341,34 +4757,6 @@ var DielineTool = class {
       ]
     };
   }
-  getLayer() {
-    var _a;
-    return (_a = this.canvasService) == null ? void 0 : _a.getLayer("dieline-overlay");
-  }
-  createLayer() {
-    if (!this.canvasService) return;
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
-    const layer = this.canvasService.createLayer("dieline-overlay", {
-      width,
-      height,
-      selectable: false,
-      evented: false
-    });
-    this.canvasService.canvas.bringObjectToFront(layer);
-    const userLayer = this.canvasService.getLayer("user");
-    if (userLayer) {
-      const userIndex = this.canvasService.canvas.getObjects().indexOf(userLayer);
-      this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
-    }
-  }
-  destroyLayer() {
-    if (!this.canvasService) return;
-    const layer = this.getLayer();
-    if (layer) {
-      this.canvasService.canvas.remove(layer);
-    }
-  }
   createHatchPattern(color = "rgba(0, 0, 0, 0.3)") {
     if (typeof document === "undefined") {
       return void 0;
@@ -4397,7 +4785,6 @@ var DielineTool = class {
   }
   syncSizeState(configService) {
     const sizeState = readSizeState(configService);
-    this.state.displayUnit = sizeState.unit;
     this.state.width = sizeState.actualWidthMm;
     this.state.height = sizeState.actualHeightMm;
     this.state.padding = sizeState.viewPadding;
@@ -4411,20 +4798,26 @@ var DielineTool = class {
       return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.type) === "feature-marker";
     }).forEach((obj) => canvas.bringObjectToFront(obj));
   }
-  updateDieline(_emitEvent = true) {
+  ensureLayerStacking() {
     if (!this.canvasService) return;
-    const layer = this.getLayer();
+    const layer = this.canvasService.getLayer(DIELINE_LAYER_ID);
     if (!layer) return;
-    const configService = this.getConfigService();
-    if (!configService) return;
-    this.syncSizeState(configService);
-    const sceneLayout = computeSceneLayout(
-      this.canvasService,
-      readSizeState(configService)
-    );
-    if (!sceneLayout) 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 {
       shape,
+      shapeStyle,
       radius,
       mainLine,
       offsetLine,
@@ -4433,8 +4826,8 @@ var DielineTool = class {
       showBleedLines,
       features
     } = this.state;
-    const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
-    const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
+    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;
@@ -4445,7 +4838,6 @@ var DielineTool = class {
     const cutH = sceneLayout.cutRect.height;
     const visualOffset = (cutW - visualWidth) / 2;
     const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
-    layer.remove(...layer.getObjects());
     const absoluteFeatures = (features || []).map((f) => ({
       ...f,
       x: f.x,
@@ -4465,21 +4857,30 @@ var DielineTool = class {
       x: cx,
       y: cy,
       features: cutFeatures,
+      shapeStyle,
       pathData: this.state.pathData,
       customSourceWidthPx: this.state.customSourceWidthPx,
       customSourceHeightPx: this.state.customSourceHeightPx
     });
-    const mask = new Path(maskPathData, {
-      fill: outsideColor,
-      stroke: null,
-      selectable: false,
-      evented: false,
-      originX: "left",
-      originY: "top",
-      left: 0,
-      top: 0
-    });
-    layer.add(mask);
+    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 productPathData = generateDielinePath({
         shape,
@@ -4489,21 +4890,28 @@ var DielineTool = class {
         x: cx,
         y: cy,
         features: cutFeatures,
+        shapeStyle,
         pathData: this.state.pathData,
         customSourceWidthPx: this.state.customSourceWidthPx,
         customSourceHeightPx: this.state.customSourceHeightPx,
         canvasWidth: canvasW,
         canvasHeight: canvasH
       });
-      const insideObj = new Path(productPathData, {
-        fill: insideColor,
-        stroke: null,
-        selectable: false,
-        evented: false,
-        originX: "left",
-        originY: "top"
+      specs.push({
+        id: "dieline.inside",
+        type: "path",
+        space: "screen",
+        data: { id: "dieline.inside", type: "dieline" },
+        props: {
+          pathData: productPathData,
+          fill: insideColor,
+          stroke: null,
+          selectable: false,
+          evented: false,
+          originX: "left",
+          originY: "top"
+        }
       });
-      layer.add(insideObj);
     }
     if (Math.abs(visualOffset) > 1e-4) {
       const bleedPathData = generateBleedZonePath(
@@ -4515,6 +4923,7 @@ var DielineTool = class {
           x: cx,
           y: cy,
           features: cutFeatures,
+          shapeStyle,
           pathData: this.state.pathData,
           customSourceWidthPx: this.state.customSourceWidthPx,
           customSourceHeightPx: this.state.customSourceHeightPx,
@@ -4529,6 +4938,7 @@ var DielineTool = class {
           x: cx,
           y: cy,
           features: cutFeatures,
+          shapeStyle,
           pathData: this.state.pathData,
           customSourceWidthPx: this.state.customSourceWidthPx,
           customSourceHeightPx: this.state.customSourceHeightPx,
@@ -4540,16 +4950,22 @@ var DielineTool = class {
       if (showBleedLines !== false) {
         const pattern = this.createHatchPattern(mainLine.color);
         if (pattern) {
-          const bleedObj = new Path(bleedPathData, {
-            fill: pattern,
-            stroke: null,
-            selectable: false,
-            evented: false,
-            objectCaching: false,
-            originX: "left",
-            originY: "top"
+          specs.push({
+            id: "dieline.bleed-zone",
+            type: "path",
+            space: "screen",
+            data: { id: "dieline.bleed-zone", type: "dieline" },
+            props: {
+              pathData: bleedPathData,
+              fill: pattern,
+              stroke: null,
+              selectable: false,
+              evented: false,
+              objectCaching: false,
+              originX: "left",
+              originY: "top"
+            }
           });
-          layer.add(bleedObj);
         }
       }
       const offsetPathData = generateDielinePath({
@@ -4560,23 +4976,30 @@ var DielineTool = class {
         x: cx,
         y: cy,
         features: cutFeatures,
+        shapeStyle,
         pathData: this.state.pathData,
         customSourceWidthPx: this.state.customSourceWidthPx,
         customSourceHeightPx: this.state.customSourceHeightPx,
         canvasWidth: canvasW,
         canvasHeight: canvasH
       });
-      const offsetBorderObj = new Path(offsetPathData, {
-        fill: null,
-        stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
-        strokeWidth: offsetLine.width,
-        strokeDashArray: offsetLine.style === "dashed" ? [offsetLine.dashLength, offsetLine.dashLength] : void 0,
-        selectable: false,
-        evented: false,
-        originX: "left",
-        originY: "top"
+      specs.push({
+        id: "dieline.offset-border",
+        type: "path",
+        space: "screen",
+        data: { id: "dieline.offset-border", type: "dieline" },
+        props: {
+          pathData: offsetPathData,
+          fill: null,
+          stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
+          strokeWidth: offsetLine.width,
+          strokeDashArray: offsetLine.style === "dashed" ? [offsetLine.dashLength, offsetLine.dashLength] : void 0,
+          selectable: false,
+          evented: false,
+          originX: "left",
+          originY: "top"
+        }
       });
-      layer.add(offsetBorderObj);
     }
     const borderPathData = generateDielinePath({
       shape,
@@ -4586,39 +5009,59 @@ var DielineTool = class {
       x: cx,
       y: cy,
       features: absoluteFeatures,
+      shapeStyle,
       pathData: this.state.pathData,
       customSourceWidthPx: this.state.customSourceWidthPx,
       customSourceHeightPx: this.state.customSourceHeightPx,
       canvasWidth: canvasW,
       canvasHeight: canvasH
     });
-    const borderObj = new Path(borderPathData, {
-      fill: "transparent",
-      stroke: mainLine.style === "hidden" ? null : mainLine.color,
-      strokeWidth: mainLine.width,
-      strokeDashArray: mainLine.style === "dashed" ? [mainLine.dashLength, mainLine.dashLength] : void 0,
-      selectable: false,
-      evented: false,
-      originX: "left",
-      originY: "top"
-    });
-    layer.add(borderObj);
-    const userLayer = this.canvasService.getLayer("user");
-    if (layer && userLayer) {
-      const layerIndex = this.canvasService.canvas.getObjects().indexOf(layer);
-      const userIndex = this.canvasService.canvas.getObjects().indexOf(userLayer);
-      if (layerIndex < userIndex) {
-        this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
+    specs.push({
+      id: "dieline.border",
+      type: "path",
+      space: "screen",
+      data: { id: "dieline.border", type: "dieline" },
+      props: {
+        pathData: borderPathData,
+        fill: "transparent",
+        stroke: mainLine.style === "hidden" ? null : mainLine.color,
+        strokeWidth: mainLine.width,
+        strokeDashArray: mainLine.style === "dashed" ? [mainLine.dashLength, mainLine.dashLength] : void 0,
+        selectable: false,
+        evented: false,
+        originX: "left",
+        originY: "top"
       }
-    } else {
-      this.canvasService.canvas.bringObjectToFront(layer);
+    });
+    return specs;
+  }
+  updateDieline(_emitEvent = true) {
+    void this.updateDielineAsync();
+  }
+  async updateDielineAsync() {
+    if (!this.canvasService) return;
+    const configService = this.getConfigService();
+    if (!configService) return;
+    const seq = ++this.renderSeq;
+    this.syncSizeState(configService);
+    const sceneLayout = computeSceneLayout(
+      this.canvasService,
+      readSizeState(configService)
+    );
+    if (!sceneLayout) {
+      if (seq !== this.renderSeq) return;
+      this.specs = [];
+      await this.canvasService.flushRenderFromProducers();
+      return;
     }
+    const nextSpecs = this.buildDielineSpecs(sceneLayout);
+    if (seq !== this.renderSeq) return;
+    this.specs = nextSpecs;
+    await this.canvasService.flushRenderFromProducers();
+    if (seq !== this.renderSeq) return;
+    this.ensureLayerStacking();
     this.bringFeatureMarkersToFront();
-    const rulerLayer = this.canvasService.getLayer("ruler-overlay");
-    if (rulerLayer) {
-      this.canvasService.canvas.bringObjectToFront(rulerLayer);
-    }
-    layer.dirty = true;
+    this.canvasService.bringLayerToFront("ruler-overlay");
     this.canvasService.requestRenderAll();
   }
   getGeometry() {
@@ -4666,7 +5109,7 @@ var DielineTool = class {
       );
       return null;
     }
-    const { shape, radius, features, pathData } = this.state;
+    const { shape, shapeStyle, radius, features, pathData } = this.state;
     const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
     const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
     const scale = sceneLayout.scale;
@@ -4694,6 +5137,7 @@ var DielineTool = class {
       x: cx,
       y: cy,
       features: cutFeatures,
+      shapeStyle,
       pathData,
       customSourceWidthPx: this.state.customSourceWidthPx,
       customSourceHeightPx: this.state.customSourceHeightPx,
@@ -4808,7 +5252,6 @@ var DielineTool = class {
 import {
   ContributionPointIds as ContributionPointIds5
 } from "@pooder/core";
-import { Circle, Group, Point as Point2, Rect as Rect2 } from "fabric";
 
 // src/extensions/constraints.ts
 var ConstraintRegistry = class {
@@ -5008,6 +5451,10 @@ function completeFeaturesStrict(features, context, update) {
 }
 
 // src/extensions/feature.ts
+var FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
+var FEATURE_STROKE_WIDTH = 2;
+var DEFAULT_RECT_SIZE = 10;
+var DEFAULT_CIRCLE_RADIUS = 5;
 var FeatureTool = class {
   constructor(options) {
     this.id = "pooder.kit.feature";
@@ -5020,6 +5467,8 @@ var FeatureTool = class {
     this.isFeatureSessionActive = false;
     this.sessionOriginalFeatures = null;
     this.hasWorkingChanges = false;
+    this.specs = [];
+    this.renderSeq = 0;
     this.handleMoving = null;
     this.handleModified = null;
     this.handleSceneGeometryChange = null;
@@ -5036,12 +5485,23 @@ var FeatureTool = class {
     }
   }
   activate(context) {
+    var _a;
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for FeatureTool");
       return;
     }
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        rootLayerSpecs: {
+          [FEATURE_OVERLAY_LAYER_ID]: this.specs
+        }
+      }),
+      { priority: 350 }
+    );
     const configService = context.services.get(
       "ConfigurationService"
     );
@@ -5080,21 +5540,7 @@ var FeatureTool = class {
     this.context = void 0;
   }
   updateVisibility() {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    const markers = canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
-    });
-    markers.forEach((marker) => {
-      marker.set({
-        visible: this.isToolActive,
-        // Or just selectable: false if we want them visible but locked
-        selectable: this.isToolActive,
-        evented: this.isToolActive
-      });
-    });
-    canvas.requestRenderAll();
+    this.redraw();
   }
   contribute() {
     return {
@@ -5326,8 +5772,7 @@ var FeatureTool = class {
     if (!changed) return { ok: true };
     this.setWorkingFeatures(next);
     this.hasWorkingChanges = true;
-    this.redraw();
-    this.enforceConstraints();
+    this.redraw({ enforceConstraints: true });
     this.emitWorkingChange();
     return { ok: true };
   }
@@ -5375,12 +5820,10 @@ var FeatureTool = class {
       shape: "rect",
       x: 0.5,
       y: 0,
-      // Top edge
       width: 10,
       height: 10,
       rotation: 0,
       renderBehavior: "edge",
-      // Default constraint: path (snap to edge)
       constraints: [{ type: "path" }]
     };
     this.setWorkingFeatures([...this.workingFeatures || [], newFeature]);
@@ -5423,7 +5866,7 @@ var FeatureTool = class {
     this.emitWorkingChange();
     return true;
   }
-  getGeometryForFeature(geometry, feature) {
+  getGeometryForFeature(geometry, _feature) {
     return geometry;
   }
   setup() {
@@ -5432,8 +5875,7 @@ var FeatureTool = class {
     if (!this.handleSceneGeometryChange) {
       this.handleSceneGeometryChange = (geometry) => {
         this.currentGeometry = geometry;
-        this.redraw();
-        this.enforceConstraints();
+        this.redraw({ enforceConstraints: true });
       };
       this.context.eventBus.on(
         "scene:geometry:change",
@@ -5456,76 +5898,34 @@ var FeatureTool = class {
     }
     if (!this.handleMoving) {
       this.handleMoving = (e) => {
-        var _a, _b, _c, _d;
-        const target = e.target;
-        if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "feature-marker") return;
-        if (!this.currentGeometry) return;
-        let feature;
-        if ((_b = target.data) == null ? void 0 : _b.isGroup) {
-          const indices = (_c = target.data) == null ? void 0 : _c.indices;
-          if (indices && indices.length > 0) {
-            feature = this.workingFeatures[indices[0]];
-          }
-        } else {
-          const index = (_d = target.data) == null ? void 0 : _d.index;
-          if (index !== void 0) {
-            feature = this.workingFeatures[index];
-          }
-        }
-        const geometry = this.getGeometryForFeature(
-          this.currentGeometry,
+        const target = this.getDraggableMarkerTarget(e == null ? void 0 : e.target);
+        if (!target || !this.currentGeometry) return;
+        const feature = this.getFeatureForMarker(target);
+        const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
+        const snapped = this.constrainPosition(
+          {
+            x: Number(target.left || 0),
+            y: Number(target.top || 0)
+          },
+          geometry,
           feature
         );
-        const p = new Point2(target.left, target.top);
-        const markerStrokeWidth = (target.strokeWidth || 2) * (target.scaleX || 1);
-        const minDim = Math.min(
-          target.getScaledWidth(),
-          target.getScaledHeight()
-        );
-        const limit = Math.max(0, minDim / 2 - markerStrokeWidth);
-        const snapped = this.constrainPosition(p, geometry, limit, feature);
         target.set({
           left: snapped.x,
           top: snapped.y
         });
+        target.setCoords();
+        this.syncMarkerVisualsByTarget(target, snapped);
       };
       canvas.on("object:moving", this.handleMoving);
     }
     if (!this.handleModified) {
       this.handleModified = (e) => {
-        var _a, _b, _c;
-        const target = e.target;
-        if (!target || ((_a = target.data) == null ? void 0 : _a.type) !== "feature-marker") return;
-        if ((_b = target.data) == null ? void 0 : _b.isGroup) {
-          const groupObj = target;
-          const indices = (_c = groupObj.data) == null ? void 0 : _c.indices;
-          if (!indices) return;
-          const groupCenter = new Point2(groupObj.left, groupObj.top);
-          const newFeatures = [...this.workingFeatures];
-          const { x, y } = this.currentGeometry;
-          groupObj.getObjects().forEach((child, i) => {
-            const originalIndex = indices[i];
-            const feature = this.workingFeatures[originalIndex];
-            const geometry = this.getGeometryForFeature(
-              this.currentGeometry,
-              feature
-            );
-            const { width, height } = geometry;
-            const layoutLeft = x - width / 2;
-            const layoutTop = y - height / 2;
-            const absX = groupCenter.x + (child.left || 0);
-            const absY = groupCenter.y + (child.top || 0);
-            const normalizedX = width > 0 ? (absX - layoutLeft) / width : 0.5;
-            const normalizedY = height > 0 ? (absY - layoutTop) / height : 0.5;
-            newFeatures[originalIndex] = {
-              ...newFeatures[originalIndex],
-              x: normalizedX,
-              y: normalizedY
-            };
-          });
-          this.setWorkingFeatures(newFeatures);
-          this.hasWorkingChanges = true;
-          this.emitWorkingChange();
+        var _a;
+        const target = this.getDraggableMarkerTarget(e == null ? void 0 : e.target);
+        if (!target) return;
+        if ((_a = target.data) == null ? void 0 : _a.isGroup) {
+          this.syncGroupFromCanvas(target);
         } else {
           this.syncFeatureFromCanvas(target);
         }
@@ -5534,6 +5934,7 @@ var FeatureTool = class {
     }
   }
   teardown() {
+    var _a;
     if (!this.canvasService) return;
     const canvas = this.canvasService.canvas;
     if (this.handleMoving) {
@@ -5551,14 +5952,25 @@ var FeatureTool = class {
       );
       this.handleSceneGeometryChange = null;
     }
-    const objects = canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
-    });
-    objects.forEach((obj) => canvas.remove(obj));
-    this.canvasService.requestRenderAll();
+    this.renderSeq += 1;
+    this.specs = [];
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    this.renderProducerDisposable = void 0;
+    void this.canvasService.flushRenderFromProducers();
   }
-  constrainPosition(p, geometry, limit, feature) {
+  getDraggableMarkerTarget(target) {
+    var _a, _b;
+    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;
+  }
+  getFeatureForMarker(target) {
+    const data = (target == null ? void 0 : target.data) || {};
+    const index = data.isGroup ? this.toFeatureIndex(data.anchorIndex) : this.toFeatureIndex(data.index);
+    if (index === null) return void 0;
+    return this.workingFeatures[index];
+  }
+  constrainPosition(p, geometry, feature) {
     var _a;
     if (!feature) {
       return { x: p.x, y: p.y };
@@ -5589,225 +6001,364 @@ var FeatureTool = class {
       y: minY + constrained.y * geometry.height
     };
   }
+  toNormalizedPoint(point, geometry) {
+    const left = geometry.x - geometry.width / 2;
+    const top = geometry.y - geometry.height / 2;
+    return {
+      x: geometry.width > 0 ? (point.x - left) / geometry.width : 0.5,
+      y: geometry.height > 0 ? (point.y - top) / geometry.height : 0.5
+    };
+  }
   syncFeatureFromCanvas(target) {
     var _a;
-    if (!this.currentGeometry || !this.context) return;
-    const index = (_a = target.data) == null ? void 0 : _a.index;
-    if (index === void 0 || index < 0 || index >= this.workingFeatures.length)
-      return;
+    if (!this.currentGeometry) return;
+    const index = this.toFeatureIndex((_a = target.data) == null ? void 0 : _a.index);
+    if (index === null || index >= this.workingFeatures.length) return;
     const feature = this.workingFeatures[index];
     const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
-    const { width, height, x, y } = geometry;
-    const left = x - width / 2;
-    const top = y - height / 2;
-    const normalizedX = width > 0 ? (target.left - left) / width : 0.5;
-    const normalizedY = height > 0 ? (target.top - top) / height : 0.5;
+    const normalized = this.toNormalizedPoint(
+      {
+        x: Number(target.left || 0),
+        y: Number(target.top || 0)
+      },
+      geometry
+    );
     const updatedFeature = {
       ...feature,
-      x: normalizedX,
-      y: normalizedY
-      // Could also update rotation if we allowed rotating markers
+      x: normalized.x,
+      y: normalized.y
     };
-    const newFeatures = [...this.workingFeatures];
-    newFeatures[index] = updatedFeature;
-    this.setWorkingFeatures(newFeatures);
+    const next = [...this.workingFeatures];
+    next[index] = updatedFeature;
+    this.setWorkingFeatures(next);
     this.hasWorkingChanges = true;
     this.emitWorkingChange();
   }
-  redraw() {
-    if (!this.canvasService || !this.currentGeometry) return;
-    const canvas = this.canvasService.canvas;
-    const geometry = this.currentGeometry;
-    const existing = canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
+  syncGroupFromCanvas(target) {
+    var _a, _b;
+    if (!this.currentGeometry) return;
+    const indices = this.readGroupIndices((_a = target.data) == null ? void 0 : _a.indices);
+    if (indices.length === 0) return;
+    const offsets = this.readGroupMemberOffsets((_b = target.data) == null ? void 0 : _b.memberOffsets, indices);
+    const anchorCenter = {
+      x: Number(target.left || 0),
+      y: Number(target.top || 0)
+    };
+    const next = [...this.workingFeatures];
+    let changed = false;
+    offsets.forEach((entry) => {
+      const index = entry.index;
+      if (index < 0 || index >= next.length) return;
+      const feature = next[index];
+      const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
+      const normalized = this.toNormalizedPoint(
+        {
+          x: anchorCenter.x + entry.dx,
+          y: anchorCenter.y + entry.dy
+        },
+        geometry
+      );
+      if (feature.x !== normalized.x || feature.y !== normalized.y) {
+        next[index] = {
+          ...feature,
+          x: normalized.x,
+          y: normalized.y
+        };
+        changed = true;
+      }
     });
-    existing.forEach((obj) => canvas.remove(obj));
-    if (!this.workingFeatures || this.workingFeatures.length === 0) {
-      this.canvasService.requestRenderAll();
-      return;
+    if (!changed) return;
+    this.setWorkingFeatures(next);
+    this.hasWorkingChanges = true;
+    this.emitWorkingChange();
+  }
+  redraw(options = {}) {
+    void this.redrawAsync(options);
+  }
+  async redrawAsync(options = {}) {
+    if (!this.canvasService) return;
+    const seq = ++this.renderSeq;
+    this.specs = this.buildFeatureSpecs();
+    if (seq !== this.renderSeq) return;
+    await this.canvasService.flushRenderFromProducers();
+    if (seq !== this.renderSeq) return;
+    this.syncOverlayOrder();
+    if (options.enforceConstraints) {
+      this.enforceConstraints();
     }
-    const scale = geometry.scale || 1;
-    const finalScale = scale;
-    const groups = {};
+  }
+  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) {
+      return [];
+    }
+    const groups = /* @__PURE__ */ new Map();
     const singles = [];
-    this.workingFeatures.forEach((f, i) => {
-      if (f.groupId) {
-        if (!groups[f.groupId]) groups[f.groupId] = [];
-        groups[f.groupId].push({ feature: f, index: i });
-      } else {
-        singles.push({ feature: f, index: i });
+    this.workingFeatures.forEach((feature, index) => {
+      const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
+      const position = resolveFeaturePosition(feature, geometry);
+      const scale = geometry.scale || 1;
+      const marker = {
+        feature,
+        index,
+        position,
+        geometry,
+        scale
+      };
+      if (feature.groupId) {
+        const list = groups.get(feature.groupId) || [];
+        list.push(marker);
+        groups.set(feature.groupId, list);
+        return;
       }
+      singles.push(marker);
+    });
+    const specs = [];
+    singles.forEach((marker) => {
+      this.appendMarkerSpecs(specs, marker, {
+        markerRole: "handle",
+        isGroup: false
+      });
+    });
+    groups.forEach((members, groupId) => {
+      if (!members.length) return;
+      const anchor = members[0];
+      const memberOffsets = members.map((member) => ({
+        index: member.index,
+        dx: member.position.x - anchor.position.x,
+        dy: member.position.y - anchor.position.y
+      }));
+      const indices = members.map((member) => member.index);
+      members.filter((member) => member.index !== anchor.index).forEach((member) => {
+        this.appendMarkerSpecs(specs, member, {
+          markerRole: "member",
+          isGroup: false,
+          groupId
+        });
+      });
+      this.appendMarkerSpecs(specs, anchor, {
+        markerRole: "handle",
+        isGroup: true,
+        groupId,
+        indices,
+        anchorIndex: anchor.index,
+        memberOffsets
+      });
     });
-    const createMarkerShape = (feature, pos) => {
-      const featureScale = scale;
-      const visualWidth = (feature.width || 10) * featureScale;
-      const visualHeight = (feature.height || 10) * featureScale;
-      const visualRadius = (feature.radius || 0) * featureScale;
-      const color = feature.color || (feature.operation === "add" ? "#00FF00" : "#FF0000");
-      const strokeDash = feature.strokeDash || (feature.operation === "subtract" ? [4, 4] : void 0);
-      let shape;
-      if (feature.shape === "rect") {
-        shape = new Rect2({
+    return specs;
+  }
+  appendMarkerSpecs(specs, marker, options) {
+    var _a, _b, _c, _d, _e;
+    const { feature, index, position, scale, geometry } = marker;
+    const baseRadius = feature.shape === "circle" ? (_a = feature.radius) != null ? _a : DEFAULT_CIRCLE_RADIUS : (_b = feature.radius) != null ? _b : 0;
+    const baseWidth = feature.shape === "circle" ? baseRadius * 2 : (_c = feature.width) != null ? _c : DEFAULT_RECT_SIZE;
+    const baseHeight = feature.shape === "circle" ? baseRadius * 2 : (_d = feature.height) != null ? _d : DEFAULT_RECT_SIZE;
+    const visualWidth = baseWidth * scale;
+    const visualHeight = baseHeight * scale;
+    const visualRadius = baseRadius * scale;
+    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 baseData = this.buildMarkerData(marker, options);
+    const commonProps = {
+      visible: this.isToolActive,
+      selectable: interactive && this.isToolActive,
+      evented: interactive && this.isToolActive,
+      hasControls: false,
+      hasBorders: false,
+      hoverCursor: interactive ? "move" : "default",
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      fill: "transparent",
+      stroke: color,
+      strokeWidth: FEATURE_STROKE_WIDTH,
+      strokeDashArray: strokeDash,
+      originX: "center",
+      originY: "center",
+      left: position.x,
+      top: position.y,
+      angle: feature.rotation || 0
+    };
+    const markerId = this.markerId(index);
+    if (feature.shape === "rect") {
+      specs.push({
+        id: markerId,
+        type: "rect",
+        space: "screen",
+        data: baseData,
+        props: {
+          ...commonProps,
           width: visualWidth,
           height: visualHeight,
           rx: visualRadius,
-          ry: visualRadius,
-          fill: "transparent",
-          stroke: color,
-          strokeWidth: 2,
-          strokeDashArray: strokeDash,
-          originX: "center",
-          originY: "center",
-          left: pos.x,
-          top: pos.y
-        });
-      } else {
-        shape = new Circle({
-          radius: visualRadius || 5 * finalScale,
-          fill: "transparent",
-          stroke: color,
-          strokeWidth: 2,
-          strokeDashArray: strokeDash,
-          originX: "center",
-          originY: "center",
-          left: pos.x,
-          top: pos.y
-        });
-      }
-      if (feature.rotation) {
-        shape.rotate(feature.rotation);
+          ry: visualRadius
+        }
+      });
+    } else {
+      specs.push({
+        id: markerId,
+        type: "rect",
+        space: "screen",
+        data: baseData,
+        props: {
+          ...commonProps,
+          width: visualWidth,
+          height: visualHeight,
+          rx: visualRadius,
+          ry: visualRadius
+        }
+      });
+    }
+    if (((_e = feature.bridge) == null ? void 0 : _e.type) === "vertical") {
+      const featureTopY = position.y - visualHeight / 2;
+      const dielineTopY = geometry.y - geometry.height / 2;
+      const bridgeHeight = Math.max(0, featureTopY - dielineTopY);
+      if (bridgeHeight <= 1e-3) {
+        return;
       }
-      if (feature.bridge && feature.bridge.type === "vertical") {
-        const bridgeIndicator = new Rect2({
+      specs.push({
+        id: this.bridgeIndicatorId(index),
+        type: "rect",
+        space: "screen",
+        data: {
+          ...baseData,
+          markerRole: "indicator",
+          markerOffsetX: 0,
+          markerOffsetY: -visualHeight / 2
+        },
+        props: {
+          visible: this.isToolActive,
+          selectable: false,
+          evented: false,
           width: visualWidth,
-          height: 100 * featureScale,
-          // Arbitrary long length to show direction
+          height: bridgeHeight,
           fill: "transparent",
           stroke: "#888",
           strokeWidth: 1,
           strokeDashArray: [2, 2],
-          originX: "center",
-          originY: "bottom",
-          // Anchor at bottom so it extends up
-          left: pos.x,
-          top: pos.y - visualHeight / 2,
-          // Start from top of feature
           opacity: 0.5,
-          selectable: false,
-          evented: false
-        });
-        const group = new Group([bridgeIndicator, shape], {
           originX: "center",
-          originY: "center",
-          left: pos.x,
-          top: pos.y
-        });
-        return group;
-      }
-      return shape;
-    };
-    singles.forEach(({ feature, index }) => {
-      const geometry2 = this.getGeometryForFeature(
-        this.currentGeometry,
-        feature
-      );
-      const pos = resolveFeaturePosition(feature, geometry2);
-      const marker = createMarkerShape(feature, pos);
-      marker.set({
-        visible: this.isToolActive,
-        selectable: this.isToolActive,
-        evented: this.isToolActive,
-        hasControls: false,
-        hasBorders: false,
-        hoverCursor: "move",
-        lockRotation: true,
-        lockScalingX: true,
-        lockScalingY: true,
-        data: { type: "feature-marker", index, isGroup: false }
-      });
-      canvas.add(marker);
-      canvas.bringObjectToFront(marker);
-    });
-    Object.keys(groups).forEach((groupId) => {
-      const members = groups[groupId];
-      if (members.length === 0) return;
-      const shapes = members.map(({ feature }) => {
-        const geometry2 = this.getGeometryForFeature(
-          this.currentGeometry,
-          feature
-        );
-        const pos = resolveFeaturePosition(feature, geometry2);
-        return createMarkerShape(feature, pos);
+          originY: "bottom",
+          left: position.x,
+          top: position.y - visualHeight / 2
+        }
       });
-      const groupObj = new Group(shapes, {
-        visible: this.isToolActive,
-        selectable: this.isToolActive,
-        evented: this.isToolActive,
-        hasControls: false,
-        hasBorders: false,
-        hoverCursor: "move",
-        lockRotation: true,
-        lockScalingX: true,
-        lockScalingY: true,
-        subTargetCheck: true,
-        // Allow events to pass through if needed, but we treat as one
-        interactive: false,
-        // Children not interactive
-        // @ts-ignore
-        data: {
-          type: "feature-marker",
-          isGroup: true,
-          groupId,
-          indices: members.map((m) => m.index)
+    }
+  }
+  buildMarkerData(marker, options) {
+    const data = {
+      type: "feature-marker",
+      index: marker.index,
+      featureId: marker.feature.id,
+      markerRole: options.markerRole,
+      markerOffsetX: 0,
+      markerOffsetY: 0,
+      isGroup: options.isGroup
+    };
+    if (options.groupId) data.groupId = options.groupId;
+    if (options.indices) data.indices = options.indices;
+    if (options.anchorIndex !== void 0) data.anchorIndex = options.anchorIndex;
+    if (options.memberOffsets) data.memberOffsets = options.memberOffsets;
+    return data;
+  }
+  markerId(index) {
+    return `feature.marker.${index}`;
+  }
+  bridgeIndicatorId(index) {
+    return `feature.marker.${index}.bridge`;
+  }
+  toFeatureIndex(value) {
+    const numeric = Number(value);
+    if (!Number.isInteger(numeric) || numeric < 0) return null;
+    return numeric;
+  }
+  readGroupIndices(raw) {
+    if (!Array.isArray(raw)) return [];
+    return raw.map((value) => this.toFeatureIndex(value)).filter((value) => value !== null);
+  }
+  readGroupMemberOffsets(raw, fallbackIndices = []) {
+    if (Array.isArray(raw)) {
+      const parsed = raw.map((entry) => {
+        const index = this.toFeatureIndex(entry == null ? void 0 : entry.index);
+        const dx = Number(entry == null ? void 0 : entry.dx);
+        const dy = Number(entry == null ? void 0 : entry.dy);
+        if (index === null || !Number.isFinite(dx) || !Number.isFinite(dy)) {
+          return null;
         }
+        return { index, dx, dy };
+      }).filter((value) => !!value);
+      if (parsed.length > 0) return parsed;
+    }
+    return fallbackIndices.map((index) => ({ index, dx: 0, dy: 0 }));
+  }
+  syncMarkerVisualsByTarget(target, center) {
+    var _a, _b, _c, _d, _e, _f;
+    if ((_a = target.data) == null ? void 0 : _a.isGroup) {
+      const indices = this.readGroupIndices((_b = target.data) == null ? void 0 : _b.indices);
+      const offsets = this.readGroupMemberOffsets((_c = target.data) == null ? void 0 : _c.memberOffsets, indices);
+      offsets.forEach((entry) => {
+        this.syncMarkerVisualObjectsToCenter(entry.index, {
+          x: center.x + entry.dx,
+          y: center.y + entry.dy
+        });
       });
-      canvas.add(groupObj);
-      canvas.bringObjectToFront(groupObj);
+      (_d = this.canvasService) == null ? void 0 : _d.requestRenderAll();
+      return;
+    }
+    const index = this.toFeatureIndex((_e = target.data) == null ? void 0 : _e.index);
+    if (index === null) return;
+    this.syncMarkerVisualObjectsToCenter(index, center);
+    (_f = this.canvasService) == null ? void 0 : _f.requestRenderAll();
+  }
+  syncMarkerVisualObjectsToCenter(index, center) {
+    if (!this.canvasService) return;
+    const markers = this.canvasService.canvas.getObjects().filter(
+      (obj) => {
+        var _a, _b;
+        return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.type) === "feature-marker" && this.toFeatureIndex((_b = obj == null ? void 0 : obj.data) == null ? void 0 : _b.index) === index;
+      }
+    );
+    markers.forEach((marker) => {
+      var _a, _b;
+      const offsetX = Number(((_a = marker == null ? void 0 : marker.data) == null ? void 0 : _a.markerOffsetX) || 0);
+      const offsetY = Number(((_b = marker == null ? void 0 : marker.data) == null ? void 0 : _b.markerOffsetY) || 0);
+      marker.set({
+        left: center.x + offsetX,
+        top: center.y + offsetY
+      });
+      marker.setCoords();
     });
-    this.canvasService.requestRenderAll();
   }
   enforceConstraints() {
     if (!this.canvasService || !this.currentGeometry) return;
-    const canvas = this.canvasService.canvas;
-    const markers = canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
-    });
-    markers.forEach((marker) => {
-      var _a, _b, _c;
-      let feature;
-      if ((_a = marker.data) == null ? void 0 : _a.isGroup) {
-        const indices = (_b = marker.data) == null ? void 0 : _b.indices;
-        if (indices && indices.length > 0) {
-          feature = this.workingFeatures[indices[0]];
-        }
-      } else {
-        const index = (_c = marker.data) == null ? void 0 : _c.index;
-        if (index !== void 0) {
-          feature = this.workingFeatures[index];
-        }
+    const handles = this.canvasService.canvas.getObjects().filter(
+      (obj) => {
+        var _a, _b;
+        return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.type) === "feature-marker" && ((_b = obj == null ? void 0 : obj.data) == null ? void 0 : _b.markerRole) === "handle";
       }
-      const geometry = this.getGeometryForFeature(
-        this.currentGeometry,
-        feature
-      );
-      const markerStrokeWidth = (marker.strokeWidth || 2) * (marker.scaleX || 1);
-      const minDim = Math.min(
-        marker.getScaledWidth(),
-        marker.getScaledHeight()
-      );
-      const limit = Math.max(0, minDim / 2 - markerStrokeWidth);
+    );
+    handles.forEach((marker) => {
+      const feature = this.getFeatureForMarker(marker);
+      if (!feature) return;
+      const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
       const snapped = this.constrainPosition(
-        new Point2(marker.left, marker.top),
+        {
+          x: Number(marker.left || 0),
+          y: Number(marker.top || 0)
+        },
         geometry,
-        limit,
         feature
       );
       marker.set({ left: snapped.x, top: snapped.y });
       marker.setCoords();
+      this.syncMarkerVisualsByTarget(marker, snapped);
     });
-    canvas.requestRenderAll();
+    this.canvasService.canvas.requestRenderAll();
   }
 };
 
@@ -5815,7 +6366,11 @@ var FeatureTool = class {
 import {
   ContributionPointIds as ContributionPointIds6
 } from "@pooder/core";
-import { FabricImage as Image3 } from "fabric";
+import { FabricImage as FabricImage3 } from "fabric";
+var FILM_LAYER_ID = "overlay";
+var FILM_IMAGE_ID = "film-image";
+var DEFAULT_WIDTH2 = 800;
+var DEFAULT_HEIGHT2 = 600;
 var FilmTool = class {
   constructor(options) {
     this.id = "pooder.kit.film";
@@ -5824,17 +6379,38 @@ var FilmTool = class {
     };
     this.url = "";
     this.opacity = 0.5;
+    this.specs = [];
+    this.renderSeq = 0;
+    this.renderImageUrl = "";
+    this.sourceSizeBySrc = /* @__PURE__ */ new Map();
+    this.pendingSizeBySrc = /* @__PURE__ */ new Map();
+    this.onCanvasResized = () => {
+      this.updateFilm();
+    };
     if (options) {
       Object.assign(this, options);
     }
   }
   activate(context) {
+    var _a;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for FilmTool");
       return;
     }
-    const configService = context.services.get("ConfigurationService");
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        layerSpecs: {
+          [FILM_LAYER_ID]: this.specs
+        }
+      }),
+      { priority: 500 }
+    );
+    const configService = context.services.get(
+      "ConfigurationService"
+    );
     if (configService) {
       this.url = configService.get("film.url", this.url);
       this.opacity = configService.get("film.opacity", this.opacity);
@@ -5851,21 +6427,21 @@ var FilmTool = class {
         }
       });
     }
-    this.initLayer();
+    context.eventBus.on("canvas:resized", this.onCanvasResized);
     this.updateFilm();
   }
   deactivate(context) {
-    if (this.canvasService) {
-      const layer = this.canvasService.getLayer("overlay");
-      if (layer) {
-        const img = this.canvasService.getObject("film-image", "overlay");
-        if (img) {
-          layer.remove(img);
-          this.canvasService.requestRenderAll();
-        }
-      }
-      this.canvasService = void 0;
-    }
+    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;
+    void this.canvasService.flushRenderFromProducers();
+    this.canvasService.requestRenderAll();
+    this.canvasService = void 0;
   }
   contribute() {
     return {
@@ -5901,73 +6477,108 @@ var FilmTool = class {
       ]
     };
   }
-  initLayer() {
-    if (!this.canvasService) return;
-    let overlayLayer = this.canvasService.getLayer("overlay");
-    if (!overlayLayer) {
-      const width = this.canvasService.canvas.width || 800;
-      const height = this.canvasService.canvas.height || 600;
-      const layer = this.canvasService.createLayer("overlay", {
-        width,
-        height,
-        left: 0,
-        top: 0,
-        originX: "left",
-        originY: "top",
-        selectable: false,
-        evented: false,
-        subTargetCheck: false,
-        interactive: false
-      });
-      this.canvasService.canvas.bringObjectToFront(layer);
-    }
+  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);
+    return {
+      width: width > 0 ? width : DEFAULT_WIDTH2,
+      height: height > 0 ? height : DEFAULT_HEIGHT2
+    };
   }
-  async updateFilm() {
-    if (!this.canvasService) return;
-    const layer = this.canvasService.getLayer("overlay");
-    if (!layer) {
-      console.warn("[FilmTool] Overlay layer not found");
-      return;
-    }
-    const { url, opacity } = this;
-    if (!url) {
-      const img2 = this.canvasService.getObject("film-image", "overlay");
-      if (img2) {
-        layer.remove(img2);
-        this.canvasService.requestRenderAll();
-      }
-      return;
+  clampOpacity(value) {
+    return Math.max(0, Math.min(1, Number(value)));
+  }
+  buildFilmSpecs(imageUrl, opacity) {
+    if (!imageUrl) {
+      return [];
     }
-    const width = this.canvasService.canvas.width || 800;
-    const height = this.canvasService.canvas.height || 600;
-    let img = this.canvasService.getObject("film-image", "overlay");
-    try {
-      if (img) {
-        if (img.getSrc() !== url) {
-          await img.setSrc(url);
-        }
-        img.set({ opacity });
-      } else {
-        img = await Image3.fromURL(url, { crossOrigin: "anonymous" });
-        img.scaleToWidth(width);
-        if (img.getScaledHeight() < height) img.scaleToHeight(height);
-        img.set({
-          originX: "left",
-          originY: "top",
+    const { width, height } = this.getViewportSize();
+    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);
+    return [
+      {
+        id: FILM_IMAGE_ID,
+        type: "image",
+        src: imageUrl,
+        space: "screen",
+        data: {
+          id: FILM_IMAGE_ID,
+          layerId: FILM_LAYER_ID,
+          type: "film-image"
+        },
+        props: {
           left: 0,
           top: 0,
-          opacity,
+          originX: "left",
+          originY: "top",
+          opacity: this.clampOpacity(opacity),
+          scaleX: coverScale,
+          scaleY: coverScale,
           selectable: false,
           evented: false,
-          data: { id: "film-image" }
-        });
-        layer.add(img);
+          excludeFromExport: true
+        }
+      }
+    ];
+  }
+  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 FabricImage3.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;
       }
-      this.canvasService.requestRenderAll();
     } catch (error) {
-      console.error("[FilmTool] Failed to load film image", url, error);
+      console.error("[FilmTool] Failed to load film image", src, error);
+    }
+    return null;
+  }
+  updateFilm() {
+    void this.updateFilmAsync();
+  }
+  async updateFilmAsync() {
+    if (!this.canvasService) return;
+    const seq = ++this.renderSeq;
+    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;
+      }
     }
-    layer.dirty = true;
+    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();
   }
 };
@@ -6068,19 +6679,37 @@ var MirrorTool = class {
 import {
   ContributionPointIds as ContributionPointIds8
 } from "@pooder/core";
-import { Line, Text, Group as Group2, Polygon } from "fabric";
+var RULER_LAYER_ID = "ruler-overlay";
+var EXTENSION_LINE_LENGTH = 5;
+var MIN_ARROW_SIZE = 4;
+var THICKNESS_TO_STROKE_WIDTH_RATIO = 20;
+var DEFAULT_THICKNESS = 20;
+var DEFAULT_GAP = 45;
+var DEFAULT_FONT_SIZE = 10;
+var DEFAULT_BACKGROUND_COLOR = "#f0f0f0";
+var DEFAULT_TEXT_COLOR = "#333333";
+var DEFAULT_LINE_COLOR = "#999999";
+var RULER_THICKNESS_MIN = 10;
+var RULER_THICKNESS_MAX = 100;
+var RULER_GAP_MIN = 0;
+var RULER_GAP_MAX = 100;
+var RULER_FONT_SIZE_MIN = 8;
+var RULER_FONT_SIZE_MAX = 24;
 var RulerTool = class {
   constructor(options) {
     this.id = "pooder.kit.ruler";
     this.metadata = {
       name: "RulerTool"
     };
-    this.thickness = 20;
-    this.gap = 15;
-    this.backgroundColor = "#f0f0f0";
-    this.textColor = "#333333";
-    this.lineColor = "#999999";
-    this.fontSize = 10;
+    this.thickness = DEFAULT_THICKNESS;
+    this.gap = DEFAULT_GAP;
+    this.backgroundColor = DEFAULT_BACKGROUND_COLOR;
+    this.textColor = DEFAULT_TEXT_COLOR;
+    this.lineColor = DEFAULT_LINE_COLOR;
+    this.fontSize = DEFAULT_FONT_SIZE;
+    this.renderSeq = 0;
+    this.numericProps = /* @__PURE__ */ new Set(["thickness", "gap", "fontSize"]);
+    this.specs = [];
     this.onCanvasResized = () => {
       this.updateRuler();
     };
@@ -6089,50 +6718,73 @@ var RulerTool = class {
     }
   }
   activate(context) {
+    var _a;
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
-      console.warn("CanvasService not found for RulerTool");
+      console.warn("[RulerTool] CanvasService not found.");
       return;
     }
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        rootLayerSpecs: {
+          [RULER_LAYER_ID]: this.specs
+        },
+        replaceRootLayerIds: [RULER_LAYER_ID]
+      }),
+      { priority: 400 }
+    );
     const configService = context.services.get(
       "ConfigurationService"
     );
     if (configService) {
-      this.thickness = configService.get("ruler.thickness", this.thickness);
-      this.gap = configService.get("ruler.gap", this.gap);
-      this.backgroundColor = configService.get(
-        "ruler.backgroundColor",
-        this.backgroundColor
-      );
-      this.textColor = configService.get("ruler.textColor", this.textColor);
-      this.lineColor = configService.get("ruler.lineColor", this.lineColor);
-      this.fontSize = configService.get("ruler.fontSize", this.fontSize);
+      this.syncConfig(configService);
       configService.onAnyChange((e) => {
         let shouldUpdate = false;
         if (e.key.startsWith("ruler.")) {
           const prop = e.key.split(".")[1];
           if (prop && prop in this) {
-            this[prop] = e.value;
+            if (this.numericProps.has(prop)) {
+              this[prop] = this.toFiniteNumber(
+                e.value,
+                this[prop]
+              );
+            } else {
+              this[prop] = e.value;
+            }
             shouldUpdate = true;
+            this.log("config:update", {
+              key: e.key,
+              raw: e.value,
+              normalized: this[prop]
+            });
           }
         } else if (e.key.startsWith("size.")) {
           shouldUpdate = true;
+          this.log("size:update", { key: e.key, value: e.value });
         }
         if (shouldUpdate) {
           this.updateRuler();
         }
       });
     }
-    this.createLayer();
     context.eventBus.on("canvas:resized", this.onCanvasResized);
     this.updateRuler();
   }
   deactivate(context) {
+    var _a;
     context.eventBus.off("canvas:resized", this.onCanvasResized);
-    this.destroyLayer();
+    this.specs = [];
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    this.renderProducerDisposable = void 0;
+    if (this.canvasService) {
+      void this.canvasService.flushRenderFromProducers();
+    }
     this.canvasService = void 0;
     this.context = void 0;
+    this.renderSeq = 0;
   }
   contribute() {
     return {
@@ -6141,43 +6793,43 @@ var RulerTool = class {
           id: "ruler.thickness",
           type: "number",
           label: "Thickness",
-          min: 10,
-          max: 100,
-          default: 20
+          min: RULER_THICKNESS_MIN,
+          max: RULER_THICKNESS_MAX,
+          default: DEFAULT_THICKNESS
         },
         {
           id: "ruler.gap",
           type: "number",
           label: "Gap",
-          min: 0,
-          max: 100,
-          default: 15
+          min: RULER_GAP_MIN,
+          max: RULER_GAP_MAX,
+          default: DEFAULT_GAP
         },
         {
           id: "ruler.backgroundColor",
           type: "color",
           label: "Background Color",
-          default: "#f0f0f0"
+          default: DEFAULT_BACKGROUND_COLOR
         },
         {
           id: "ruler.textColor",
           type: "color",
           label: "Text Color",
-          default: "#333333"
+          default: DEFAULT_TEXT_COLOR
         },
         {
           id: "ruler.lineColor",
           type: "color",
           label: "Line Color",
-          default: "#999999"
+          default: DEFAULT_LINE_COLOR
         },
         {
           id: "ruler.fontSize",
           type: "number",
           label: "Font Size",
-          min: 8,
-          max: 24,
-          default: 10
+          min: RULER_FONT_SIZE_MIN,
+          max: RULER_FONT_SIZE_MAX,
+          default: DEFAULT_FONT_SIZE
         }
       ],
       [ContributionPointIds8.COMMANDS]: [
@@ -6190,12 +6842,23 @@ var RulerTool = class {
               textColor: this.textColor,
               lineColor: this.lineColor,
               fontSize: this.fontSize,
-              thickness: this.thickness
+              thickness: this.thickness,
+              gap: this.gap
             };
             const newState = { ...oldState, ...theme };
-            if (JSON.stringify(newState) === JSON.stringify(oldState))
+            if (JSON.stringify(newState) === JSON.stringify(oldState)) {
               return true;
+            }
             Object.assign(this, newState);
+            this.thickness = this.toFiniteNumber(
+              this.thickness,
+              DEFAULT_THICKNESS
+            );
+            this.gap = this.toFiniteNumber(this.gap, DEFAULT_GAP);
+            this.fontSize = this.toFiniteNumber(
+              this.fontSize,
+              DEFAULT_FONT_SIZE
+            );
             this.updateRuler();
             return true;
           }
@@ -6203,225 +6866,367 @@ var RulerTool = class {
       ]
     };
   }
-  getLayer() {
-    var _a;
-    return (_a = this.canvasService) == null ? void 0 : _a.getLayer("ruler-overlay");
+  log(step, payload) {
+    if (payload) {
+      console.debug(`[RulerTool] ${step}`, payload);
+      return;
+    }
+    console.debug(`[RulerTool] ${step}`);
   }
-  createLayer() {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    const width = canvas.width || 800;
-    const height = canvas.height || 600;
-    const layer = this.canvasService.createLayer("ruler-overlay", {
-      width,
-      height,
-      selectable: false,
-      evented: false,
-      left: 0,
-      top: 0,
-      originX: "left",
-      originY: "top"
+  syncConfig(configService) {
+    this.thickness = this.toFiniteNumber(
+      configService.get("ruler.thickness", this.thickness),
+      DEFAULT_THICKNESS
+    );
+    this.gap = Math.max(
+      0,
+      this.toFiniteNumber(
+        configService.get("ruler.gap", this.gap),
+        DEFAULT_GAP
+      )
+    );
+    this.backgroundColor = configService.get(
+      "ruler.backgroundColor",
+      this.backgroundColor
+    );
+    this.textColor = configService.get("ruler.textColor", this.textColor);
+    this.lineColor = configService.get("ruler.lineColor", this.lineColor);
+    this.fontSize = this.toFiniteNumber(
+      configService.get("ruler.fontSize", this.fontSize),
+      DEFAULT_FONT_SIZE
+    );
+    this.log("config:loaded", {
+      thickness: this.thickness,
+      gap: this.gap,
+      fontSize: this.fontSize,
+      backgroundColor: this.backgroundColor,
+      textColor: this.textColor,
+      lineColor: this.lineColor
     });
-    canvas.bringObjectToFront(layer);
   }
-  destroyLayer() {
-    if (!this.canvasService) return;
-    const layer = this.getLayer();
-    if (layer) {
-      this.canvasService.canvas.remove(layer);
-    }
+  toFiniteNumber(value, fallback) {
+    const numeric = Number(value);
+    return Number.isFinite(numeric) ? numeric : fallback;
   }
-  createArrowLine(x1, y1, x2, y2, color) {
-    const line = new Line([x1, y1, x2, y2], {
-      stroke: color,
-      strokeWidth: this.thickness / 20,
-      // Scale stroke width relative to thickness (default 1)
-      selectable: false,
-      evented: false
-    });
-    const arrowSize = Math.max(4, this.thickness * 0.3);
-    const angle = Math.atan2(y2 - y1, x2 - x1);
-    const endArrow = new Polygon(
-      [
-        { x: 0, y: 0 },
-        { x: -arrowSize, y: -arrowSize / 2 },
-        { x: -arrowSize, y: arrowSize / 2 }
-      ],
-      {
-        fill: color,
-        left: x2,
-        top: y2,
-        originX: "right",
-        originY: "center",
-        angle: angle * 180 / Math.PI,
+  toSceneDisplayLength(value) {
+    if (!this.canvasService) return value;
+    return this.canvasService.toSceneLength(value);
+  }
+  formatLengthMm(valueMm, unit) {
+    const converted = fromMm(valueMm, unit);
+    const fractionDigits = unit === "in" ? 3 : 2;
+    return Number(converted.toFixed(fractionDigits)).toString();
+  }
+  buildLinePath(start, end) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    return `M 0 0 L ${dx} ${dy}`;
+  }
+  buildStartArrowPath(size) {
+    return `M 0 0 L ${size} ${-size / 2} L ${size} ${size / 2} Z`;
+  }
+  buildEndArrowPath(size) {
+    return `M 0 0 L ${-size} ${-size / 2} L ${-size} ${size / 2} Z`;
+  }
+  createPathSpec(id, pathData, position, options) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return {
+      id,
+      type: "path",
+      data: {
+        id,
+        type: "ruler"
+      },
+      props: {
+        pathData,
+        left: position.x,
+        top: position.y,
+        originX: (_a = options.originX) != null ? _a : "left",
+        originY: (_b = options.originY) != null ? _b : "top",
+        angle: (_c = options.angle) != null ? _c : 0,
+        stroke: (_d = options.stroke) != null ? _d : null,
+        fill: (_e = options.fill) != null ? _e : null,
+        strokeWidth: (_f = options.strokeWidth) != null ? _f : 1,
+        strokeLineCap: (_g = options.strokeLineCap) != null ? _g : "butt",
         selectable: false,
-        evented: false
+        evented: false,
+        excludeFromExport: true
       }
-    );
-    const startArrow = new Polygon(
-      [
-        { x: 0, y: 0 },
-        { x: arrowSize, y: -arrowSize / 2 },
-        { x: arrowSize, y: arrowSize / 2 }
-      ],
-      {
-        fill: color,
-        left: x1,
-        top: y1,
-        originX: "left",
+    };
+  }
+  createTextSpec(id, text, position, angle = 0) {
+    return {
+      id,
+      type: "text",
+      data: {
+        id,
+        type: "ruler"
+      },
+      props: {
+        text,
+        left: position.x,
+        top: position.y,
+        angle,
+        fontSize: this.toSceneDisplayLength(this.fontSize),
+        fill: this.textColor,
+        fontFamily: "Arial",
+        originX: "center",
         originY: "center",
-        angle: angle * 180 / Math.PI,
+        backgroundColor: this.backgroundColor,
         selectable: false,
-        evented: false
+        evented: false,
+        excludeFromExport: true
       }
-    );
-    return new Group2([line, startArrow, endArrow], {
-      selectable: false,
-      evented: false
-    });
+    };
   }
-  updateRuler() {
-    var _a;
-    if (!this.canvasService) return;
-    const layer = this.getLayer();
-    if (!layer) return;
-    layer.remove(...layer.getObjects());
-    const { backgroundColor, lineColor, textColor, fontSize } = this;
-    const configService = (_a = this.context) == null ? void 0 : _a.services.get(
-      "ConfigurationService"
+  buildRulerSpecs(input) {
+    const { left, top, right, bottom, widthLabel, heightLabel } = input;
+    const gap = Math.max(
+      0,
+      this.toSceneDisplayLength(this.toFiniteNumber(this.gap, DEFAULT_GAP))
     );
-    if (!configService) return;
-    const sizeState = readSizeState(configService);
-    const layout = computeSceneLayout(this.canvasService, sizeState);
-    if (!layout) return;
-    const trimRect = layout.trimRect;
-    const cutRect = layout.cutRect;
-    const useCutAsRuler = layout.cutMode === "outset";
-    const rulerRect = useCutAsRuler ? cutRect : trimRect;
-    const gap = this.gap || 15;
-    const rulerLeft = rulerRect.left;
-    const rulerTop = rulerRect.top;
-    const rulerRight = rulerRect.left + rulerRect.width;
-    const rulerBottom = rulerRect.top + rulerRect.height;
-    const displayWidthMm = useCutAsRuler ? layout.cutWidthMm : layout.trimWidthMm;
-    const displayHeightMm = useCutAsRuler ? layout.cutHeightMm : layout.trimHeightMm;
-    const displayUnit = sizeState.unit;
-    const topRulerY = rulerTop - gap;
-    const topRulerXStart = rulerLeft;
-    const topRulerXEnd = rulerRight;
-    const leftRulerX = rulerLeft - gap;
-    const leftRulerYStart = rulerTop;
-    const leftRulerYEnd = rulerBottom;
-    const topDimLine = this.createArrowLine(
-      topRulerXStart,
-      topRulerY,
-      topRulerXEnd,
-      topRulerY,
-      lineColor
+    const topY = top - gap;
+    const leftX = left - gap;
+    const arrowSize = Math.max(
+      this.toSceneDisplayLength(MIN_ARROW_SIZE),
+      this.toSceneDisplayLength(this.thickness * 0.3)
     );
-    layer.add(topDimLine);
-    const extLen = 5;
-    layer.add(
-      new Line(
-        [
-          topRulerXStart,
-          topRulerY - extLen,
-          topRulerXStart,
-          topRulerY + extLen
-        ],
-        {
-          stroke: lineColor,
-          strokeWidth: 1,
-          selectable: false,
-          evented: false
-        }
+    const strokeWidth = Math.max(
+      this.toSceneDisplayLength(1),
+      this.toSceneDisplayLength(
+        this.thickness / THICKNESS_TO_STROKE_WIDTH_RATIO
       )
     );
-    layer.add(
-      new Line(
-        [topRulerXEnd, topRulerY - extLen, topRulerXEnd, topRulerY + extLen],
+    const extensionLength = this.toSceneDisplayLength(EXTENSION_LINE_LENGTH);
+    const topLineAngleDeg = 0;
+    const leftLineAngleDeg = 90;
+    const topMidX = left + (right - left) / 2;
+    const leftMidY = top + (bottom - top) / 2;
+    const topLineStartX = Math.min(left + arrowSize, topMidX);
+    const topLineEndX = Math.max(right - arrowSize, topMidX);
+    const leftLineStartY = Math.min(top + arrowSize, leftMidY);
+    const leftLineEndY = Math.max(bottom - arrowSize, leftMidY);
+    const specs = [];
+    specs.push(
+      this.createPathSpec(
+        "ruler.top.line",
+        this.buildLinePath(
+          { x: topLineStartX, y: topY },
+          { x: topLineEndX, y: topY }
+        ),
+        { x: topLineStartX, y: topY },
         {
-          stroke: lineColor,
-          strokeWidth: 1,
-          selectable: false,
-          evented: false
+          stroke: this.lineColor,
+          strokeWidth,
+          strokeLineCap: "butt"
         }
-      )
-    );
-    const widthStr = formatMm(displayWidthMm, displayUnit);
-    const topTextContent = `${widthStr} ${displayUnit}`;
-    const topText = new Text(topTextContent, {
-      left: topRulerXStart + (rulerRight - rulerLeft) / 2,
-      top: topRulerY,
-      fontSize,
-      fill: textColor,
-      fontFamily: "Arial",
-      originX: "center",
-      originY: "center",
-      backgroundColor,
-      // Background mask for readability
-      selectable: false,
-      evented: false
-    });
-    layer.add(topText);
-    const leftDimLine = this.createArrowLine(
-      leftRulerX,
-      leftRulerYStart,
-      leftRulerX,
-      leftRulerYEnd,
-      lineColor
-    );
-    layer.add(leftDimLine);
-    layer.add(
-      new Line(
-        [
-          leftRulerX - extLen,
-          leftRulerYStart,
-          leftRulerX + extLen,
-          leftRulerYStart
-        ],
-        {
-          stroke: lineColor,
-          strokeWidth: 1,
-          selectable: false,
-          evented: false
+      ),
+      this.createPathSpec(
+        "ruler.top.arrow.start",
+        this.buildStartArrowPath(arrowSize),
+        { x: left, y: topY },
+        {
+          fill: this.lineColor,
+          stroke: this.lineColor,
+          strokeWidth: this.toSceneDisplayLength(1),
+          originX: "left",
+          originY: "center",
+          angle: topLineAngleDeg
         }
-      )
+      ),
+      this.createPathSpec(
+        "ruler.top.arrow.end",
+        this.buildEndArrowPath(arrowSize),
+        { x: right, y: topY },
+        {
+          fill: this.lineColor,
+          stroke: this.lineColor,
+          strokeWidth: this.toSceneDisplayLength(1),
+          originX: "right",
+          originY: "center",
+          angle: topLineAngleDeg
+        }
+      ),
+      this.createPathSpec(
+        "ruler.top.ext.start",
+        this.buildLinePath(
+          { x: left, y: topY - extensionLength },
+          { x: left, y: topY + extensionLength }
+        ),
+        { x: left, y: topY - extensionLength },
+        {
+          stroke: this.lineColor,
+          strokeWidth: this.toSceneDisplayLength(1)
+        }
+      ),
+      this.createPathSpec(
+        "ruler.top.ext.end",
+        this.buildLinePath(
+          { x: right, y: topY - extensionLength },
+          { x: right, y: topY + extensionLength }
+        ),
+        { x: right, y: topY - extensionLength },
+        {
+          stroke: this.lineColor,
+          strokeWidth: this.toSceneDisplayLength(1)
+        }
+      ),
+      this.createTextSpec("ruler.top.label", widthLabel, {
+        x: left + (right - left) / 2,
+        y: topY
+      })
     );
-    layer.add(
-      new Line(
-        [
-          leftRulerX - extLen,
-          leftRulerYEnd,
-          leftRulerX + extLen,
-          leftRulerYEnd
-        ],
-        {
-          stroke: lineColor,
-          strokeWidth: 1,
-          selectable: false,
-          evented: false
+    specs.push(
+      this.createPathSpec(
+        "ruler.left.line",
+        this.buildLinePath(
+          { x: leftX, y: leftLineStartY },
+          { x: leftX, y: leftLineEndY }
+        ),
+        { x: leftX, y: leftLineStartY },
+        {
+          stroke: this.lineColor,
+          strokeWidth,
+          strokeLineCap: "butt"
         }
+      ),
+      this.createPathSpec(
+        "ruler.left.arrow.start",
+        this.buildStartArrowPath(arrowSize),
+        { x: leftX, y: top },
+        {
+          fill: this.lineColor,
+          stroke: this.lineColor,
+          strokeWidth: this.toSceneDisplayLength(1),
+          originX: "left",
+          originY: "center",
+          angle: leftLineAngleDeg
+        }
+      ),
+      this.createPathSpec(
+        "ruler.left.arrow.end",
+        this.buildEndArrowPath(arrowSize),
+        { x: leftX, y: bottom },
+        {
+          fill: this.lineColor,
+          stroke: this.lineColor,
+          strokeWidth: this.toSceneDisplayLength(1),
+          originX: "right",
+          originY: "center",
+          angle: leftLineAngleDeg
+        }
+      ),
+      this.createPathSpec(
+        "ruler.left.ext.start",
+        this.buildLinePath(
+          { x: leftX - extensionLength, y: top },
+          { x: leftX + extensionLength, y: top }
+        ),
+        { x: leftX - extensionLength, y: top },
+        {
+          stroke: this.lineColor,
+          strokeWidth: this.toSceneDisplayLength(1)
+        }
+      ),
+      this.createPathSpec(
+        "ruler.left.ext.end",
+        this.buildLinePath(
+          { x: leftX - extensionLength, y: bottom },
+          { x: leftX + extensionLength, y: bottom }
+        ),
+        { x: leftX - extensionLength, y: bottom },
+        {
+          stroke: this.lineColor,
+          strokeWidth: this.toSceneDisplayLength(1)
+        }
+      ),
+      this.createTextSpec(
+        "ruler.left.label",
+        heightLabel,
+        {
+          x: leftX,
+          y: top + (bottom - top) / 2
+        },
+        -90
       )
     );
-    const heightStr = formatMm(displayHeightMm, displayUnit);
-    const leftTextContent = `${heightStr} ${displayUnit}`;
-    const leftText = new Text(leftTextContent, {
-      left: leftRulerX,
-      top: leftRulerYStart + (rulerBottom - rulerTop) / 2,
-      angle: -90,
-      fontSize,
-      fill: textColor,
-      fontFamily: "Arial",
-      originX: "center",
-      originY: "center",
-      backgroundColor,
-      selectable: false,
-      evented: false
+    return specs;
+  }
+  updateRuler() {
+    void this.updateRulerAsync();
+  }
+  async updateRulerAsync() {
+    var _a, _b;
+    if (!this.canvasService) return;
+    const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+      "ConfigurationService"
+    );
+    if (!configService) return;
+    const seq = ++this.renderSeq;
+    const sizeState = readSizeState(configService);
+    const layout = computeSceneLayout(this.canvasService, sizeState);
+    this.log("render:start", {
+      seq,
+      unit: sizeState.unit,
+      gap: this.gap,
+      thickness: this.thickness,
+      fontSize: this.fontSize,
+      hasLayout: !!layout,
+      scale: (_b = layout == null ? void 0 : layout.scale) != null ? _b : null
     });
-    layer.add(leftText);
-    this.canvasService.canvas.bringObjectToFront(layer);
-    this.canvasService.canvas.requestRenderAll();
+    if (!layout || layout.scale <= 0) {
+      if (seq !== this.renderSeq) return;
+      this.log("render:skip", { seq, reason: "invalid-layout" });
+      this.specs = [];
+      await this.canvasService.flushRenderFromProducers();
+      return;
+    }
+    const geometry = buildSceneGeometry(configService, layout);
+    if (geometry.unit !== "px") {
+      console.warn("[RulerTool] Unexpected geometry unit.", geometry.unit);
+    }
+    const centerScene = this.canvasService.toScenePoint({
+      x: geometry.x,
+      y: geometry.y
+    });
+    const widthScene = this.canvasService.toSceneLength(geometry.width);
+    const heightScene = this.canvasService.toSceneLength(geometry.height);
+    const rulerLeft = centerScene.x - widthScene / 2;
+    const rulerTop = centerScene.y - heightScene / 2;
+    const rulerRight = rulerLeft + widthScene;
+    const rulerBottom = rulerTop + heightScene;
+    const widthMm = widthScene;
+    const heightMm = heightScene;
+    const unit = sizeState.unit;
+    const widthLabel = `${this.formatLengthMm(widthMm, unit)} ${unit}`;
+    const heightLabel = `${this.formatLengthMm(heightMm, unit)} ${unit}`;
+    const specs = this.buildRulerSpecs({
+      left: rulerLeft,
+      top: rulerTop,
+      right: rulerRight,
+      bottom: rulerBottom,
+      widthLabel,
+      heightLabel
+    });
+    this.log("render:geometry", {
+      seq,
+      left: rulerLeft,
+      top: rulerTop,
+      right: rulerRight,
+      bottom: rulerBottom,
+      widthScene,
+      heightScene,
+      widthMm,
+      heightMm,
+      specCount: specs.length
+    });
+    if (seq !== this.renderSeq) return;
+    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 });
   }
 };
 
@@ -6460,6 +7265,9 @@ var WhiteInkTool = class {
     this.printWithWhiteInk = true;
     this.previewImageVisible = true;
     this.renderSeq = 0;
+    this.whiteSpecs = [];
+    this.coverSpecs = [];
+    this.overlaySpecs = [];
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
@@ -6497,12 +7305,25 @@ var WhiteInkTool = class {
     };
   }
   activate(context) {
+    var _a;
     this.context = context;
     this.canvasService = context.services.get("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for WhiteInkTool");
       return;
     }
+    (_a = this.renderProducerDisposable) == null ? void 0 : _a.dispose();
+    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
+        }
+      }),
+      { priority: 260 }
+    );
     context.eventBus.on("tool:activated", this.onToolActivated);
     context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
     context.eventBus.on("object:added", this.onObjectAdded);
@@ -6568,7 +7389,7 @@ var WhiteInkTool = class {
     this.updateWhiteInks();
   }
   deactivate(context) {
-    var _a;
+    var _a, _b;
     context.eventBus.off("tool:activated", this.onToolActivated);
     context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
     context.eventBus.off("object:added", this.onObjectAdded);
@@ -6579,6 +7400,11 @@ var WhiteInkTool = class {
     this.dirtyTrackerDisposable = void 0;
     this.clearRenderedWhiteInks();
     this.applyImageVisibilityForWhiteInk(false);
+    (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
+    this.renderProducerDisposable = void 0;
+    if (this.canvasService) {
+      void this.canvasService.flushRenderFromProducers();
+    }
     this.canvasService = void 0;
     this.context = void 0;
   }
@@ -7001,11 +7827,20 @@ var WhiteInkTool = class {
     if (!layout) {
       return { left: 0, top: 0, width: 0, height: 0 };
     }
-    return {
+    return this.canvasService.toSceneRect({
       left: layout.cutRect.left,
       top: layout.cutRect.top,
       width: layout.cutRect.width,
       height: layout.cutRect.height
+    });
+  }
+  toLayoutSceneRect(rect) {
+    return {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+      space: "scene"
     };
   }
   getImageObjects() {
@@ -7028,7 +7863,7 @@ var WhiteInkTool = class {
     return (_a = obj == null ? void 0 : obj._originalElement) == null ? void 0 : _a.src;
   }
   getImageSnapshot(obj) {
-    var _a;
+    var _a, _b;
     if (!obj) return null;
     const src = this.getCurrentSrc(obj);
     if (!src) return null;
@@ -7036,14 +7871,18 @@ var WhiteInkTool = class {
     const width = Number((obj == null ? void 0 : obj.width) || 0);
     const height = Number((obj == null ? void 0 : obj.height) || 0);
     this.rememberSourceSize(src, { width, height });
+    const sceneScale = ((_a = this.canvasService) == null ? void 0 : _a.getSceneScale()) || 1;
+    const leftScreen = Number.isFinite(obj == null ? void 0 : obj.left) ? Number(obj.left) : 0;
+    const topScreen = Number.isFinite(obj == null ? void 0 : obj.top) ? Number(obj.top) : 0;
+    const scenePoint = this.canvasService ? this.canvasService.toScenePoint({ x: leftScreen, y: topScreen }) : { x: leftScreen, y: topScreen };
     return {
-      id: String(((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.id) || "image"),
+      id: String(((_b = obj == null ? void 0 : obj.data) == null ? void 0 : _b.id) || "image"),
       src,
       element,
-      left: Number.isFinite(obj == null ? void 0 : obj.left) ? Number(obj.left) : 0,
-      top: Number.isFinite(obj == null ? void 0 : obj.top) ? Number(obj.top) : 0,
-      scaleX: Number.isFinite(obj == null ? void 0 : obj.scaleX) ? Number(obj.scaleX) : 1,
-      scaleY: Number.isFinite(obj == null ? void 0 : obj.scaleY) ? Number(obj.scaleY) : 1,
+      left: scenePoint.x,
+      top: scenePoint.y,
+      scaleX: (Number.isFinite(obj == null ? void 0 : obj.scaleX) ? Number(obj.scaleX) : 1) / sceneScale,
+      scaleY: (Number.isFinite(obj == null ? void 0 : obj.scaleY) ? Number(obj.scaleY) : 1) / sceneScale,
       angle: Number.isFinite(obj == null ? void 0 : obj.angle) ? Number(obj.angle) : 0,
       originX: typeof (obj == null ? void 0 : obj.originX) === "string" ? obj.originX : "center",
       originY: typeof (obj == null ? void 0 : obj.originY) === "string" ? obj.originY : "center",
@@ -7218,8 +8057,11 @@ var WhiteInkTool = class {
     var _a, _b;
     if (!this.isToolActive || !this.canvasService) return [];
     if (frame.width <= 0 || frame.height <= 0) return [];
-    const canvasW = this.canvasService.canvas.width || 0;
-    const canvasH = this.canvasService.canvas.height || 0;
+    const viewport = this.canvasService.getSceneViewportRect();
+    const canvasW = viewport.width || 0;
+    const canvasH = viewport.height || 0;
+    const canvasLeft = viewport.left || 0;
+    const canvasTop = viewport.top || 0;
     const strokeColor = this.getConfig("image.frame.strokeColor", "#808080") || "#808080";
     const strokeWidthRaw = Number(
       (_a = this.getConfig("image.frame.strokeWidth", 2)) != null ? _a : 2
@@ -7231,21 +8073,42 @@ var WhiteInkTool = class {
     const innerBackground = this.getConfig("image.frame.innerBackground", "rgba(0,0,0,0)") || "rgba(0,0,0,0)";
     const strokeWidth = Number.isFinite(strokeWidthRaw) ? Math.max(0, strokeWidthRaw) : 2;
     const dashLength = Number.isFinite(dashLengthRaw) ? Math.max(1, dashLengthRaw) : 8;
-    const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
-    const frameTop = Math.max(0, Math.min(canvasH, frame.top));
+    const strokeWidthScene = this.canvasService.toSceneLength(strokeWidth);
+    const dashLengthScene = this.canvasService.toSceneLength(dashLength);
+    const frameLeft = Math.max(
+      canvasLeft,
+      Math.min(canvasLeft + canvasW, frame.left)
+    );
+    const frameTop = Math.max(
+      canvasTop,
+      Math.min(canvasTop + canvasH, frame.top)
+    );
     const frameRight = Math.max(
       frameLeft,
-      Math.min(canvasW, frame.left + frame.width)
+      Math.min(canvasLeft + canvasW, frame.left + frame.width)
     );
     const frameBottom = Math.max(
       frameTop,
-      Math.min(canvasH, frame.top + frame.height)
+      Math.min(canvasTop + canvasH, frame.top + frame.height)
     );
     const visibleFrameH = Math.max(0, frameBottom - frameTop);
-    const topH = frameTop;
-    const bottomH = Math.max(0, canvasH - frameBottom);
-    const leftW = frameLeft;
-    const rightW = Math.max(0, canvasW - frameRight);
+    const topH = Math.max(0, frameTop - canvasTop);
+    const bottomH = Math.max(0, canvasTop + canvasH - frameBottom);
+    const leftW = Math.max(0, frameLeft - canvasLeft);
+    const rightW = Math.max(0, canvasLeft + canvasW - frameRight);
+    const viewportRect = this.toLayoutSceneRect({
+      left: canvasLeft,
+      top: canvasTop,
+      width: canvasW,
+      height: canvasH
+    });
+    const visibleFrameBandRect = this.toLayoutSceneRect({
+      left: canvasLeft,
+      top: frameTop,
+      width: canvasW,
+      height: visibleFrameH
+    });
+    const frameRect = this.toLayoutSceneRect(frame);
     const maskSpecs = [
       {
         id: "white-ink.cropMask.top",
@@ -7255,13 +8118,17 @@ var WhiteInkTool = class {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-mask"
         },
+        layout: {
+          reference: "custom",
+          referenceRect: viewportRect,
+          alignX: "start",
+          alignY: "start",
+          width: "100%",
+          height: topH
+        },
         props: {
-          left: canvasW / 2,
-          top: topH / 2,
-          width: canvasW,
-          height: topH,
-          originX: "center",
-          originY: "center",
+          originX: "left",
+          originY: "top",
           fill: outerBackground,
           selectable: false,
           evented: false,
@@ -7276,13 +8143,17 @@ var WhiteInkTool = class {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-mask"
         },
+        layout: {
+          reference: "custom",
+          referenceRect: viewportRect,
+          alignX: "start",
+          alignY: "end",
+          width: "100%",
+          height: bottomH
+        },
         props: {
-          left: canvasW / 2,
-          top: frameBottom + bottomH / 2,
-          width: canvasW,
-          height: bottomH,
-          originX: "center",
-          originY: "center",
+          originX: "left",
+          originY: "top",
           fill: outerBackground,
           selectable: false,
           evented: false,
@@ -7297,13 +8168,17 @@ var WhiteInkTool = class {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-mask"
         },
-        props: {
-          left: leftW / 2,
-          top: frameTop + visibleFrameH / 2,
+        layout: {
+          reference: "custom",
+          referenceRect: visibleFrameBandRect,
+          alignX: "start",
+          alignY: "start",
           width: leftW,
-          height: visibleFrameH,
-          originX: "center",
-          originY: "center",
+          height: "100%"
+        },
+        props: {
+          originX: "left",
+          originY: "top",
           fill: outerBackground,
           selectable: false,
           evented: false,
@@ -7318,13 +8193,17 @@ var WhiteInkTool = class {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-mask"
         },
-        props: {
-          left: frameRight + rightW / 2,
-          top: frameTop + visibleFrameH / 2,
+        layout: {
+          reference: "custom",
+          referenceRect: visibleFrameBandRect,
+          alignX: "end",
+          alignY: "start",
           width: rightW,
-          height: visibleFrameH,
-          originX: "center",
-          originY: "center",
+          height: "100%"
+        },
+        props: {
+          originX: "left",
+          originY: "top",
           fill: outerBackground,
           selectable: false,
           evented: false,
@@ -7342,17 +8221,21 @@ var WhiteInkTool = class {
           layerId: WHITE_INK_OVERLAY_LAYER_ID,
           type: "white-ink-frame"
         },
+        layout: {
+          reference: "custom",
+          referenceRect: frameRect,
+          alignX: "start",
+          alignY: "start",
+          width: "100%",
+          height: "100%"
+        },
         props: {
-          left: frame.left + frame.width / 2,
-          top: frame.top + frame.height / 2,
-          width: frame.width,
-          height: frame.height,
-          originX: "center",
-          originY: "center",
+          originX: "left",
+          originY: "top",
           fill: innerBackground,
           stroke: strokeColor,
-          strokeWidth,
-          strokeDashArray: [dashLength, dashLength],
+          strokeWidth: strokeWidthScene,
+          strokeDashArray: [dashLengthScene, dashLengthScene],
           selectable: false,
           evented: false,
           excludeFromExport: true
@@ -7428,50 +8311,30 @@ var WhiteInkTool = class {
       }
     ).filter((index) => index >= 0);
     let whiteInsertIndex = imageIndexes.length ? Math.min(...imageIndexes) : this.resolveDefaultInsertIndex(currentObjects);
-    whiteObjects.forEach((obj) => {
-      canvas.moveObjectTo(obj, whiteInsertIndex);
-      whiteInsertIndex += 1;
-    });
-    const afterWhiteObjects = canvas.getObjects();
-    const afterImageIndexes = afterWhiteObjects.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 coverInsertIndex = afterImageIndexes.length ? Math.max(...afterImageIndexes) + 1 : whiteInsertIndex;
+    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));
-    const dielineOverlay = this.canvasService.getLayer("dieline-overlay");
-    if (dielineOverlay) {
-      canvas.bringObjectToFront(dielineOverlay);
-    }
-    const rulerOverlay = this.canvasService.getLayer("ruler-overlay");
-    if (rulerOverlay) {
-      canvas.bringObjectToFront(rulerOverlay);
-    }
+    this.canvasService.bringLayerToFront("dieline-overlay");
+    this.canvasService.bringLayerToFront("ruler-overlay");
   }
   clearRenderedWhiteInks() {
     if (!this.canvasService) return;
-    void this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_OBJECT_LAYER_ID,
-      []
-    );
-    void this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_COVER_LAYER_ID,
-      []
-    );
-    void this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_OVERLAY_LAYER_ID,
-      []
-    );
+    this.whiteSpecs = [];
+    this.coverSpecs = [];
+    this.overlaySpecs = [];
+    this.canvasService.requestRenderFromProducers();
   }
   purgeSourceCaches(item) {
     const sourceUrl = this.resolveSourceUrl(item);
@@ -7538,20 +8401,12 @@ var WhiteInkTool = class {
         }
       }
     }
-    await this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_OBJECT_LAYER_ID,
-      whiteSpecs
-    );
+    this.whiteSpecs = whiteSpecs;
     if (seq !== this.renderSeq) return;
-    await this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_COVER_LAYER_ID,
-      coverSpecs
-    );
+    this.coverSpecs = coverSpecs;
     if (seq !== this.renderSeq) return;
-    await this.canvasService.applyObjectSpecsToRootLayer(
-      WHITE_INK_OVERLAY_LAYER_ID,
-      frameSpecs
-    );
+    this.overlaySpecs = frameSpecs;
+    await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
     this.syncZOrder();
     this.canvasService.requestRenderAll();
@@ -7784,23 +8639,16 @@ var SceneVisibilityService = class {
     const dielineLayer = this.canvasService.getLayer("dieline-overlay");
     if (dielineLayer) {
       const visible = !HIDDEN_DIELINE_TOOLS.has(this.activeToolId || "");
-      if (dielineLayer.visible !== visible) {
-        dielineLayer.set({ visible });
-      }
-    }
-    const rulerLayer = this.canvasService.getLayer("ruler-overlay");
-    if (rulerLayer) {
-      const visible = !HIDDEN_RULER_TOOLS.has(this.activeToolId || "");
-      if (rulerLayer.visible !== visible) {
-        rulerLayer.set({ visible });
-      }
+      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 as Group3, Rect as Rect4, Path as Path2, Image as Image4 } from "fabric";
+import { Canvas, Group, Rect, Path as Path2, Image as Image2, Text } from "fabric";
 
 // src/services/ViewportSystem.ts
 var ViewportSystem = class {
@@ -7878,6 +8726,13 @@ var ViewportSystem = class {
 // src/services/CanvasService.ts
 var CanvasService = class {
   constructor(el, options) {
+    this.renderProducers = /* @__PURE__ */ new Map();
+    this.producerOrder = 0;
+    this.producerFlushRequested = false;
+    this.producerLoopPending = false;
+    this.producerLoopPromise = null;
+    this.managedProducerLayerIds = /* @__PURE__ */ new Set();
+    this.managedProducerRootLayerIds = /* @__PURE__ */ new Set();
     if (el instanceof Canvas) {
       this.canvas = el;
     } else {
@@ -7910,8 +8765,156 @@ var CanvasService = class {
     this.canvas.on("object:removed", forward("object:removed"));
   }
   dispose() {
+    this.renderProducers.clear();
+    this.managedProducerLayerIds.clear();
+    this.managedProducerRootLayerIds.clear();
+    this.producerFlushRequested = false;
     this.canvas.dispose();
   }
+  registerRenderProducer(toolId, producer, options = {}) {
+    const normalizedToolId = String(toolId || "").trim();
+    if (!normalizedToolId) {
+      throw new Error(
+        "[CanvasService] registerRenderProducer requires a toolId."
+      );
+    }
+    if (typeof producer !== "function") {
+      throw new Error(
+        `[CanvasService] registerRenderProducer("${normalizedToolId}") requires a producer function.`
+      );
+    }
+    const entry = {
+      toolId: normalizedToolId,
+      producer,
+      priority: Number.isFinite(options.priority) ? Number(options.priority) : 0,
+      order: this.producerOrder++
+    };
+    this.renderProducers.set(normalizedToolId, entry);
+    this.requestRenderFromProducers();
+    return {
+      dispose: () => {
+        this.unregisterRenderProducer(normalizedToolId);
+      }
+    };
+  }
+  unregisterRenderProducer(toolId) {
+    const normalizedToolId = String(toolId || "").trim();
+    if (!normalizedToolId) return false;
+    const removed = this.renderProducers.delete(normalizedToolId);
+    if (removed) {
+      this.requestRenderFromProducers();
+    }
+    return removed;
+  }
+  requestRenderFromProducers() {
+    this.producerFlushRequested = true;
+    this.scheduleProducerLoop();
+  }
+  async flushRenderFromProducers() {
+    this.requestRenderFromProducers();
+    if (this.producerLoopPromise) {
+      await this.producerLoopPromise;
+    }
+  }
+  scheduleProducerLoop() {
+    if (this.producerLoopPending) return;
+    this.producerLoopPending = true;
+    this.producerLoopPromise = Promise.resolve().then(() => this.runProducerLoop()).catch((error) => {
+      console.error("[CanvasService] render producer loop failed.", error);
+    }).finally(() => {
+      this.producerLoopPending = false;
+      if (this.producerFlushRequested) {
+        this.scheduleProducerLoop();
+      }
+    });
+  }
+  async runProducerLoop() {
+    while (this.producerFlushRequested) {
+      this.producerFlushRequested = false;
+      await this.collectAndApplyProducerSpecs();
+    }
+  }
+  sortedRenderProducerEntries() {
+    return Array.from(this.renderProducers.values()).sort((a, b) => {
+      if (a.priority !== b.priority) {
+        return a.priority - b.priority;
+      }
+      if (a.order !== b.order) {
+        return a.order - b.order;
+      }
+      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);
+    });
+  }
+  async collectAndApplyProducerSpecs() {
+    const groupLayerSpecs = /* @__PURE__ */ new Map();
+    const rootLayerSpecs = /* @__PURE__ */ new Map();
+    const replaceLayerIds = /* @__PURE__ */ new Set();
+    const replaceRootLayerIds = /* @__PURE__ */ new Set();
+    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);
+          });
+        }
+      } 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));
+        }
+      }
+      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));
+      }
+      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.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.
@@ -7934,7 +8937,7 @@ var CanvasService = class {
         ...options,
         data: { ...options.data, id }
       };
-      layer = new Group3([], defaultOptions);
+      layer = new Group([], defaultOptions);
       this.canvas.add(layer);
     }
     return layer;
@@ -7966,13 +8969,206 @@ var CanvasService = class {
     (_a = this.eventBus) == null ? void 0 : _a.emit("canvas:resized", { width, height });
     this.requestRenderAll();
   }
+  getSceneScale() {
+    const scale = Number(this.viewport.scale);
+    return Number.isFinite(scale) && scale > 0 ? scale : 1;
+  }
+  getSceneOffset() {
+    const offset = this.viewport.offset;
+    const x = Number(offset.x);
+    const y = Number(offset.y);
+    return {
+      x: Number.isFinite(x) ? x : 0,
+      y: Number.isFinite(y) ? y : 0
+    };
+  }
+  toScreenPoint(point) {
+    const scale = this.getSceneScale();
+    const offset = this.getSceneOffset();
+    return {
+      x: point.x * scale + offset.x,
+      y: point.y * scale + offset.y
+    };
+  }
+  toScenePoint(point) {
+    const scale = this.getSceneScale();
+    const offset = this.getSceneOffset();
+    return {
+      x: (point.x - offset.x) / scale,
+      y: (point.y - offset.y) / scale
+    };
+  }
+  toScreenLength(value) {
+    return value * this.getSceneScale();
+  }
+  toSceneLength(value) {
+    return value / this.getSceneScale();
+  }
+  toScreenRect(rect) {
+    const start = this.toScreenPoint({ x: rect.left, y: rect.top });
+    return {
+      left: start.x,
+      top: start.y,
+      width: this.toScreenLength(rect.width),
+      height: this.toScreenLength(rect.height)
+    };
+  }
+  toSceneRect(rect) {
+    const start = this.toScenePoint({ x: rect.left, y: rect.top });
+    return {
+      left: start.x,
+      top: start.y,
+      width: this.toSceneLength(rect.width),
+      height: this.toSceneLength(rect.height)
+    };
+  }
+  getSceneViewportRect() {
+    const width = Number(this.canvas.width || 0);
+    const height = Number(this.canvas.height || 0);
+    return this.toSceneRect({ left: 0, top: 0, width, height });
+  }
+  getScreenViewportRect() {
+    return {
+      left: 0,
+      top: 0,
+      width: Number(this.canvas.width || 0),
+      height: Number(this.canvas.height || 0)
+    };
+  }
+  toSpaceRect(rect, from, to) {
+    if (from === to) return { ...rect };
+    if (from === "scene") {
+      return this.toScreenRect(rect);
+    }
+    return this.toSceneRect(rect);
+  }
+  resolveLayoutLength(value, base) {
+    if (typeof value === "number") {
+      return Number.isFinite(value) ? value : void 0;
+    }
+    if (typeof value !== "string") {
+      return void 0;
+    }
+    const raw = value.trim();
+    if (!raw) return void 0;
+    if (raw.endsWith("%")) {
+      const percent = parseFloat(raw.slice(0, -1));
+      if (!Number.isFinite(percent)) return void 0;
+      return base * percent / 100;
+    }
+    const parsed = parseFloat(raw);
+    return Number.isFinite(parsed) ? parsed : void 0;
+  }
+  resolveLayoutInsets(inset, reference) {
+    var _a, _b, _c, _d, _e;
+    if (typeof inset === "number" || typeof inset === "string") {
+      const all = (_a = this.resolveLayoutLength(
+        inset,
+        Math.min(reference.width, reference.height)
+      )) != null ? _a : 0;
+      return { top: all, right: all, bottom: all, left: all };
+    }
+    const source = inset || {};
+    const top = (_b = this.resolveLayoutLength(source.top, reference.height)) != null ? _b : 0;
+    const right = (_c = this.resolveLayoutLength(source.right, reference.width)) != null ? _c : 0;
+    const bottom = (_d = this.resolveLayoutLength(source.bottom, reference.height)) != null ? _d : 0;
+    const left = (_e = this.resolveLayoutLength(source.left, reference.width)) != null ? _e : 0;
+    return { top, right, bottom, left };
+  }
+  resolveLayoutReferenceRect(layout, space) {
+    if (layout.referenceRect) {
+      const sourceSpace = layout.referenceRect.space || space;
+      return this.toSpaceRect(layout.referenceRect, sourceSpace, space);
+    }
+    const reference = layout.reference || "sceneViewport";
+    if (reference === "screenViewport") {
+      const screenRect = this.getScreenViewportRect();
+      return space === "screen" ? screenRect : this.toSceneRect(screenRect);
+    }
+    const sceneRect = this.getSceneViewportRect();
+    return space === "scene" ? sceneRect : this.toScreenRect(sceneRect);
+  }
+  alignFactor(value) {
+    if (value === "end") return 1;
+    if (value === "center") return 0.5;
+    return 0;
+  }
+  normalizeOriginX(value) {
+    if (value === "center") return "center";
+    if (value === "right") return "right";
+    return "left";
+  }
+  normalizeOriginY(value) {
+    if (value === "center") return "center";
+    if (value === "bottom") return "bottom";
+    return "top";
+  }
+  originFactor(value) {
+    if (value === "center") return 0.5;
+    if (value === "right" || value === "bottom") return 1;
+    return 0;
+  }
+  resolveLayoutProps(spec, props) {
+    var _a, _b, _c, _d;
+    const layout = spec.layout;
+    if (!layout) {
+      return { ...props };
+    }
+    const space = spec.space || "scene";
+    const reference = this.resolveLayoutReferenceRect(layout, space);
+    const inset = this.resolveLayoutInsets(layout.inset, reference);
+    const area = {
+      left: reference.left + inset.left,
+      top: reference.top + inset.top,
+      width: Math.max(0, reference.width - inset.left - inset.right),
+      height: Math.max(0, reference.height - inset.top - inset.bottom)
+    };
+    const next = { ...props };
+    const width = (_a = this.resolveLayoutLength(layout.width, area.width)) != null ? _a : Number.isFinite(next.width) ? Number(next.width) : void 0;
+    const height = (_b = this.resolveLayoutLength(layout.height, area.height)) != null ? _b : Number.isFinite(next.height) ? Number(next.height) : void 0;
+    if (width !== void 0) next.width = width;
+    if (height !== void 0) next.height = height;
+    const alignX = this.alignFactor(layout.alignX);
+    const alignY = this.alignFactor(layout.alignY);
+    const offsetX = (_c = this.resolveLayoutLength(layout.offsetX, area.width)) != null ? _c : 0;
+    const offsetY = (_d = this.resolveLayoutLength(layout.offsetY, area.height)) != null ? _d : 0;
+    const objectWidth = Number.isFinite(next.width) ? Number(next.width) : 0;
+    const objectHeight = Number.isFinite(next.height) ? Number(next.height) : 0;
+    const objectLeft = area.left + (area.width - objectWidth) * alignX + offsetX;
+    const objectTop = area.top + (area.height - objectHeight) * alignY + offsetY;
+    const originX = this.normalizeOriginX(next.originX);
+    const originY = this.normalizeOriginY(next.originY);
+    next.left = objectLeft + objectWidth * this.originFactor(originX);
+    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);
+    objects.forEach((obj) => {
+      var _a, _b;
+      (_a = obj.set) == null ? void 0 : _a.call(obj, { visible });
+      (_b = obj.setCoords) == null ? void 0 : _b.call(obj);
+    });
+  }
+  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));
+  }
   async applyLayerSpec(spec) {
     const layer = this.createLayer(spec.id, spec.props || {});
     await this.applyObjectSpecsToContainer(layer, spec.objects);
   }
-  async applyObjectSpecsToLayer(layerId, objects) {
+  async applyObjectSpecsToLayer(layerId, objects, options = {}) {
     const layer = this.createLayer(layerId, {});
-    await this.applyObjectSpecsToContainer(layer, objects);
+    await this.applyObjectSpecsToContainer(layer, objects, options);
   }
   getRootLayerObjects(layerId) {
     return this.canvas.getObjects().filter((obj) => {
@@ -7980,7 +9176,7 @@ var CanvasService = class {
       return ((_a = obj == null ? void 0 : obj.data) == null ? void 0 : _a.layerId) === layerId;
     });
   }
-  async applyObjectSpecsToRootLayer(layerId, specs) {
+  async applyObjectSpecsToRootLayer(layerId, specs, options = {}) {
     const desiredIds = new Set(specs.map((s) => s.id));
     const existing = this.getRootLayerObjects(layerId);
     existing.forEach((obj) => {
@@ -8014,9 +9210,11 @@ var CanvasService = class {
       }
       this.patchFabricObject(current, spec, { layerId });
     }
-    this.requestRenderAll();
+    if (options.render !== false) {
+      this.requestRenderAll();
+    }
   }
-  async applyObjectSpecsToContainer(container, specs) {
+  async applyObjectSpecsToContainer(container, specs, options = {}) {
     const desiredIds = new Set(specs.map((s) => s.id));
     const existing = container.getObjects();
     existing.forEach((obj) => {
@@ -8052,7 +9250,9 @@ var CanvasService = class {
       this.moveObjectInContainer(container, current, index);
     }
     container.dirty = true;
-    this.requestRenderAll();
+    if (options.render !== false) {
+      this.requestRenderAll();
+    }
   }
   patchFabricObject(obj, spec, extraData) {
     const nextData = {
@@ -8061,9 +9261,33 @@ var CanvasService = class {
       ...extraData || {},
       id: spec.id
     };
-    obj.set({ ...spec.props || {}, data: nextData });
+    const props = this.resolveFabricProps(spec, spec.props || {});
+    obj.set({ ...props, data: nextData });
     obj.setCoords();
   }
+  resolveFabricProps(spec, props) {
+    const space = spec.space || "scene";
+    const next = this.resolveLayoutProps(spec, props);
+    if (space === "screen") {
+      return next;
+    }
+    const hasLeft = Number.isFinite(next.left);
+    const hasTop = Number.isFinite(next.top);
+    if (hasLeft || hasTop) {
+      const mapped = this.toScreenPoint({
+        x: hasLeft ? Number(next.left) : 0,
+        y: hasTop ? Number(next.top) : 0
+      });
+      if (hasLeft) next.left = mapped.x;
+      if (hasTop) next.top = mapped.y;
+    }
+    const rawScaleX = Number.isFinite(next.scaleX) ? Number(next.scaleX) : 1;
+    const rawScaleY = Number.isFinite(next.scaleY) ? Number(next.scaleY) : 1;
+    const sceneScale = this.getSceneScale();
+    next.scaleX = rawScaleX * sceneScale;
+    next.scaleY = rawScaleY * sceneScale;
+    return next;
+  }
   moveObjectInContainer(container, obj, index) {
     if (!obj) return;
     const moveObjectTo = container.moveObjectTo;
@@ -8083,10 +9307,11 @@ var CanvasService = class {
     }
   }
   async createFabricObject(spec) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (spec.type === "rect") {
-      const rect = new Rect4({
-        ...spec.props || {},
+      const props = this.resolveFabricProps(spec, spec.props || {});
+      const rect = new Rect({
+        ...props,
         data: { ...spec.data || {}, id: spec.id }
       });
       rect.setCoords();
@@ -8095,8 +9320,9 @@ var CanvasService = class {
     if (spec.type === "path") {
       const pathData = ((_a = spec.props) == null ? void 0 : _a.path) || ((_b = spec.props) == null ? void 0 : _b.pathData);
       if (!pathData) return void 0;
+      const props = this.resolveFabricProps(spec, spec.props || {});
       const path = new Path2(pathData, {
-        ...spec.props || {},
+        ...props,
         data: { ...spec.data || {}, id: spec.id }
       });
       path.setCoords();
@@ -8104,14 +9330,25 @@ var CanvasService = class {
     }
     if (spec.type === "image") {
       if (!spec.src) return void 0;
-      const image = await Image4.fromURL(spec.src, { crossOrigin: "anonymous" });
+      const image = await Image2.fromURL(spec.src, { crossOrigin: "anonymous" });
+      const props = this.resolveFabricProps(spec, spec.props || {});
       image.set({
-        ...spec.props || {},
+        ...props,
         data: { ...spec.data || {}, id: spec.id }
       });
       image.setCoords();
       return image;
     }
+    if (spec.type === "text") {
+      const content = String((_d = (_c = spec.props) == null ? void 0 : _c.text) != null ? _d : "");
+      const props = this.resolveFabricProps(spec, spec.props || {});
+      const text = new Text(content, {
+        ...props,
+        data: { ...spec.data || {}, id: spec.id }
+      });
+      text.setCoords();
+      return text;
+    }
     return void 0;
   }
 };