@pooder/kit 5.3.1 → 5.4.0

package/src/extensions/feature.ts

@@ -1,1021 +1,1137 @@
-import {
-  Extension,
-  ExtensionContext,
-  ContributionPointIds,
-  CommandContribution,
-  ConfigurationService,
-  ToolSessionService,
-} from "@pooder/core";
-import { Circle, Group, Point, Rect } from "fabric";
-import { CanvasService } from "../services";
-import {
-  getNearestPointOnDieline,
-  DielineFeature,
-  resolveFeaturePosition,
-} from "./geometry";
-import { ConstraintRegistry, ConstraintFeature } from "./constraints";
-import { completeFeaturesStrict } from "./featureComplete";
-import {
-  readSizeState,
-  type SceneGeometrySnapshot as DielineGeometry,
-} from "./sceneLayoutModel";
-
-export class FeatureTool implements Extension {
-  id = "pooder.kit.feature";
-
-  public metadata = {
-    name: "FeatureTool",
-  };
-
-  private workingFeatures: ConstraintFeature[] = [];
-  private canvasService?: CanvasService;
-  private context?: ExtensionContext;
-  private isUpdatingConfig = false;
-  private isToolActive = false;
-  private isFeatureSessionActive = false;
-  private sessionOriginalFeatures: ConstraintFeature[] | null = null;
-  private hasWorkingChanges = false;
-  private dirtyTrackerDisposable?: { dispose(): void };
-
-  private handleMoving: ((e: any) => void) | null = null;
-  private handleModified: ((e: any) => void) | null = null;
-  private handleSceneGeometryChange:
-    | ((geometry: DielineGeometry) => void)
-    | null = null;
-
-  private currentGeometry: DielineGeometry | null = null;
-
-  constructor(
-    options?: Partial<{
-      features: ConstraintFeature[];
-    }>,
-  ) {
-    if (options) {
-      Object.assign(this, options);
-    }
-  }
-
-  activate(context: ExtensionContext) {
-    this.context = context;
-    this.canvasService = context.services.get<CanvasService>("CanvasService");
-
-    if (!this.canvasService) {
-      console.warn("CanvasService not found for FeatureTool");
-      return;
-    }
-
-    const configService = context.services.get<ConfigurationService>(
-      "ConfigurationService",
-    );
-    if (configService) {
-      const features = (configService.get("dieline.features", []) ||
-        []) as ConstraintFeature[];
-      this.workingFeatures = this.cloneFeatures(features);
-      this.hasWorkingChanges = false;
-
-      configService.onAnyChange((e: { key: string; value: any }) => {
-        if (this.isUpdatingConfig) return;
-
-        if (e.key === "dieline.features") {
-          if (this.isFeatureSessionActive) return;
-          const next = (e.value || []) as ConstraintFeature[];
-          this.workingFeatures = this.cloneFeatures(next);
-          this.hasWorkingChanges = false;
-          this.redraw();
-          this.emitWorkingChange();
-        }
-      });
-    }
-
-    const toolSessionService =
-      context.services.get<ToolSessionService>("ToolSessionService");
-    this.dirtyTrackerDisposable = toolSessionService?.registerDirtyTracker(
-      this.id,
-      () => this.hasWorkingChanges,
-    );
-
-    // Listen to tool activation
-    context.eventBus.on("tool:activated", this.onToolActivated);
-
-    this.setup();
-  }
-
-  deactivate(context: ExtensionContext) {
-    context.eventBus.off("tool:activated", this.onToolActivated);
-    this.restoreSessionFeaturesToConfig();
-    this.dirtyTrackerDisposable?.dispose();
-    this.dirtyTrackerDisposable = undefined;
-    this.teardown();
-    this.canvasService = undefined;
-    this.context = undefined;
-  }
-
-  private onToolActivated = (event: { id: string | null }) => {
-    this.isToolActive = event.id === this.id;
-    if (!this.isToolActive) {
-      this.restoreSessionFeaturesToConfig();
-    }
-    this.updateVisibility();
-  };
-
-  private updateVisibility() {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    const markers = canvas
-      .getObjects()
-      .filter((obj: any) => obj.data?.type === "feature-marker");
-
-    markers.forEach((marker: any) => {
-      // If tool active, allow selection. If not, disable selection.
-      // Also might want to hide them entirely or just disable interaction.
-      // Assuming we only want to see/edit holes when tool is active.
-      marker.set({
-        visible: this.isToolActive, // Or just selectable: false if we want them visible but locked
-        selectable: this.isToolActive,
-        evented: this.isToolActive,
-      });
-    });
-    canvas.requestRenderAll();
-  }
-
-  contribute() {
-    return {
-      [ContributionPointIds.TOOLS]: [
-        {
-          id: this.id,
-          name: "Feature",
-          interaction: "session",
-          commands: {
-            begin: "beginFeatureSession",
-            commit: "completeFeatures",
-            rollback: "rollbackFeatureSession",
-          },
-          session: {
-            autoBegin: false,
-            leavePolicy: "block",
-          },
-        },
-      ],
-      [ContributionPointIds.COMMANDS]: [
-        {
-          command: "beginFeatureSession",
-          title: "Begin Feature Session",
-          handler: async () => {
-            if (this.isFeatureSessionActive) {
-              return { ok: true };
-            }
-            const original = this.getCommittedFeatures();
-            this.sessionOriginalFeatures = this.cloneFeatures(original);
-            this.isFeatureSessionActive = true;
-            await this.refreshGeometry();
-            this.setWorkingFeatures(this.cloneFeatures(original));
-            this.hasWorkingChanges = false;
-            this.redraw();
-            this.emitWorkingChange();
-            this.updateCommittedFeatures([]);
-            return { ok: true };
-          },
-        },
-        {
-          command: "addFeature",
-          title: "Add Edge Feature",
-          handler: (type: "add" | "subtract" = "subtract") => {
-            return this.addFeature(type);
-          },
-        },
-        {
-          command: "addHole",
-          title: "Add Hole",
-          handler: () => {
-            return this.addFeature("subtract");
-          },
-        },
-        {
-          command: "addDoubleLayerHole",
-          title: "Add Double Layer Hole",
-          handler: () => {
-            return this.addDoubleLayerHole();
-          },
-        },
-        {
-          command: "clearFeatures",
-          title: "Clear Features",
-          handler: () => {
-            this.setWorkingFeatures([]);
-            this.hasWorkingChanges = true;
-            this.redraw();
-            this.emitWorkingChange();
-            return true;
-          },
-        },
-        {
-          command: "getWorkingFeatures",
-          title: "Get Working Features",
-          handler: () => {
-            return this.cloneFeatures(this.workingFeatures);
-          },
-        },
-        {
-          command: "setWorkingFeatures",
-          title: "Set Working Features",
-          handler: async (features: ConstraintFeature[]) => {
-            await this.refreshGeometry();
-            this.setWorkingFeatures(this.cloneFeatures(features || []));
-            this.hasWorkingChanges = true;
-            this.redraw();
-            this.emitWorkingChange();
-            return { ok: true };
-          },
-        },
-        {
-          command: "rollbackFeatureSession",
-          title: "Rollback Feature Session",
-          handler: async () => {
-            const original = this.cloneFeatures(
-              this.sessionOriginalFeatures || this.getCommittedFeatures(),
-            );
-            await this.refreshGeometry();
-            this.setWorkingFeatures(original);
-            this.hasWorkingChanges = false;
-            this.redraw();
-            this.emitWorkingChange();
-            this.updateCommittedFeatures(original);
-            this.clearFeatureSessionState();
-            return { ok: true };
-          },
-        },
-        {
-          command: "resetWorkingFeatures",
-          title: "Reset Working Features",
-          handler: async () => {
-            await this.resetWorkingFeaturesFromSource();
-            return { ok: true };
-          },
-        },
-        {
-          command: "updateWorkingGroupPosition",
-          title: "Update Working Group Position",
-          handler: (groupId: string, x: number, y: number) => {
-            return this.updateWorkingGroupPosition(groupId, x, y);
-          },
-        },
-        {
-          command: "completeFeatures",
-          title: "Complete Features",
-          handler: () => {
-            return this.completeFeatures();
-          },
-        },
-      ] as CommandContribution[],
-    };
-  }
-
-  private cloneFeatures(features: ConstraintFeature[]): ConstraintFeature[] {
-    return JSON.parse(JSON.stringify(features || [])) as ConstraintFeature[];
-  }
-
-  private getConfigService(): ConfigurationService | undefined {
-    return this.context?.services.get<ConfigurationService>(
-      "ConfigurationService",
-    );
-  }
-
-  private getCommittedFeatures(): ConstraintFeature[] {
-    const configService = this.getConfigService();
-    const committed = (configService?.get("dieline.features", []) ||
-      []) as ConstraintFeature[];
-    return this.cloneFeatures(committed);
-  }
-
-  private updateCommittedFeatures(next: ConstraintFeature[]) {
-    const configService = this.getConfigService();
-    if (!configService) return;
-    this.isUpdatingConfig = true;
-    try {
-      configService.update("dieline.features", next);
-    } finally {
-      this.isUpdatingConfig = false;
-    }
-  }
-
-  private clearFeatureSessionState() {
-    this.isFeatureSessionActive = false;
-    this.sessionOriginalFeatures = null;
-  }
-
-  private restoreSessionFeaturesToConfig() {
-    if (!this.isFeatureSessionActive) return;
-    const original = this.cloneFeatures(
-      this.sessionOriginalFeatures || this.getCommittedFeatures(),
-    );
-    this.updateCommittedFeatures(original);
-    this.clearFeatureSessionState();
-  }
-
-  private emitWorkingChange() {
-    this.context?.eventBus.emit("feature:working:change", {
-      features: this.cloneFeatures(this.workingFeatures),
-    });
-  }
-
-  private async refreshGeometry() {
-    if (!this.context) return;
-    const commandService = this.context.services.get<any>("CommandService");
-    if (!commandService) return;
-    try {
-      const g = await Promise.resolve(
-        commandService.executeCommand("getSceneGeometry"),
-      );
-      if (g) this.currentGeometry = g as DielineGeometry;
-    } catch (e) {}
-  }
-
-  private async resetWorkingFeaturesFromSource() {
-    const next = this.cloneFeatures(
-      this.isFeatureSessionActive && this.sessionOriginalFeatures
-        ? this.sessionOriginalFeatures
-        : this.getCommittedFeatures(),
-    );
-    await this.refreshGeometry();
-    this.setWorkingFeatures(next);
-    this.hasWorkingChanges = false;
-    this.redraw();
-    this.emitWorkingChange();
-  }
-
-  private setWorkingFeatures(next: ConstraintFeature[]) {
-    this.workingFeatures = next;
-  }
-
-  private updateWorkingGroupPosition(groupId: string, x: number, y: number) {
-    if (!groupId) return { ok: false };
-
-    const configService = this.context?.services.get<ConfigurationService>(
-      "ConfigurationService",
-    );
-    if (!configService) return { ok: false };
-
-    const sizeState = readSizeState(configService);
-    const dielineWidth = sizeState.actualWidthMm;
-    const dielineHeight = sizeState.actualHeightMm;
-
-    let changed = false;
-    const next = this.workingFeatures.map((f) => {
-      if (f.groupId !== groupId) return f;
-      let nx = x;
-      let ny = y;
-      if (f.constraints && dielineWidth > 0 && dielineHeight > 0) {
-        const constrained = ConstraintRegistry.apply(nx, ny, f, {
-          dielineWidth,
-          dielineHeight,
-        });
-        nx = constrained.x;
-        ny = constrained.y;
-      }
-
-      if (f.x !== nx || f.y !== ny) {
-        changed = true;
-        return { ...f, x: nx, y: ny };
-      }
-      return f;
-    });
-
-    if (!changed) return { ok: true };
-
-    this.setWorkingFeatures(next);
-    this.hasWorkingChanges = true;
-    this.redraw();
-    this.enforceConstraints();
-    this.emitWorkingChange();
-
-    return { ok: true };
-  }
-
-  private completeFeatures(): {
-    ok: boolean;
-    issues?: Array<{
-      featureId: string;
-      groupId?: string;
-      reason: string;
-    }>;
-  } {
-    const configService = this.context?.services.get<ConfigurationService>(
-      "ConfigurationService",
-    );
-    if (!configService) {
-      return {
-        ok: false,
-        issues: [
-          { featureId: "unknown", reason: "ConfigurationService not found" },
-        ],
-      };
-    }
-
-    const sizeState = readSizeState(configService);
-    const dielineWidth = sizeState.actualWidthMm;
-    const dielineHeight = sizeState.actualHeightMm;
-
-    const result = completeFeaturesStrict(
-      this.workingFeatures,
-      { dielineWidth, dielineHeight },
-      (next) => {
-        this.updateCommittedFeatures(next as ConstraintFeature[]);
-        this.workingFeatures = this.cloneFeatures(next as any);
-        this.emitWorkingChange();
-      },
-    );
-
-    if (!result.ok) {
-      return {
-        ok: false,
-        issues: result.issues,
-      };
-    }
-
-    this.hasWorkingChanges = false;
-    this.clearFeatureSessionState();
-    // Keep feature markers above dieline overlay after config-driven redraw.
-    this.redraw();
-    return { ok: true };
-  }
-
-  private addFeature(type: "add" | "subtract") {
-    if (!this.canvasService) return false;
-
-    // Default to top edge center
-    const newFeature: ConstraintFeature = {
-      id: Date.now().toString(),
-      operation: type,
-      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]);
-    this.hasWorkingChanges = true;
-    this.redraw();
-    this.emitWorkingChange();
-    return true;
-  }
-
-  private addDoubleLayerHole() {
-    if (!this.canvasService) return false;
-
-    const groupId = Date.now().toString();
-    const timestamp = Date.now();
-
-    // 1. Lug (Outer) - Add
-    const lug: ConstraintFeature = {
-      id: `${timestamp}-lug`,
-      groupId,
-      operation: "add",
-      shape: "circle",
-      x: 0.5,
-      y: 0,
-      radius: 20,
-      rotation: 0,
-      renderBehavior: "edge",
-      constraints: [{ type: "path" }],
-    };
-
-    // 2. Hole (Inner) - Subtract
-    const hole: ConstraintFeature = {
-      id: `${timestamp}-hole`,
-      groupId,
-      operation: "subtract",
-      shape: "circle",
-      x: 0.5,
-      y: 0,
-      radius: 15,
-      rotation: 0,
-      renderBehavior: "edge",
-      constraints: [{ type: "path" }],
-    };
-
-    this.setWorkingFeatures([...(this.workingFeatures || []), lug, hole]);
-    this.hasWorkingChanges = true;
-    this.redraw();
-    this.emitWorkingChange();
-    return true;
-  }
-
-  private getGeometryForFeature(
-    geometry: DielineGeometry,
-    feature?: ConstraintFeature,
-  ): DielineGeometry {
-    // Legacy support or specialized scaling can go here if needed
-    // Currently all features operate on the base geometry (or scaled version of it)
-    return geometry;
-  }
-
-  private setup() {
-    if (!this.canvasService || !this.context) return;
-    const canvas = this.canvasService.canvas;
-
-    // 1. Listen for Scene Geometry Changes
-    if (!this.handleSceneGeometryChange) {
-      this.handleSceneGeometryChange = (geometry: DielineGeometry) => {
-        this.currentGeometry = geometry;
-        this.redraw();
-        this.enforceConstraints();
-      };
-      this.context.eventBus.on(
-        "scene:geometry:change",
-        this.handleSceneGeometryChange,
-      );
-    }
-
-    // 2. Initial Fetch of Geometry
-    const commandService = this.context.services.get<any>("CommandService");
-    if (commandService) {
-      try {
-        Promise.resolve(commandService.executeCommand("getSceneGeometry")).then(
-          (g) => {
-            if (g) {
-              this.currentGeometry = g as DielineGeometry;
-              this.redraw();
-            }
-          },
-        );
-      } catch (e) {}
-    }
-
-    // 3. Setup Canvas Interaction
-    if (!this.handleMoving) {
-      this.handleMoving = (e: any) => {
-        const target = e.target;
-        if (!target || target.data?.type !== "feature-marker") return;
-        if (!this.currentGeometry) return;
-
-        // Determine feature to use for snapping context
-        let feature: ConstraintFeature | undefined;
-        if (target.data?.isGroup) {
-          const indices = target.data?.indices as number[];
-          if (indices && indices.length > 0) {
-            feature = this.workingFeatures[indices[0]];
-          }
-        } else {
-          const index = target.data?.index;
-          if (index !== undefined) {
-            feature = this.workingFeatures[index];
-          }
-        }
-
-        const geometry = this.getGeometryForFeature(
-          this.currentGeometry,
-          feature,
-        );
-
-        // Snap to edge during move
-        // For Group, target.left/top is group center (or top-left depending on origin)
-        // We snap the target position itself.
-        const p = new Point(target.left, target.top);
-
-        // Calculate limit based on target size (min dimension / 2 ensures overlap)
-        // Also subtract stroke width to ensure visual overlap (not just tangent)
-        // target.strokeWidth for group is usually 0, need a safe default (e.g. 2 for markers)
-        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,
-        });
-      };
-      canvas.on("object:moving", this.handleMoving);
-    }
-
-    if (!this.handleModified) {
-      this.handleModified = (e: any) => {
-        const target = e.target;
-        if (!target || target.data?.type !== "feature-marker") return;
-
-        if (target.data?.isGroup) {
-          // It's a Group object
-          const groupObj = target as Group;
-          // @ts-ignore
-          const indices = groupObj.data?.indices as number[];
-          if (!indices) return;
-
-          // We need to update all features in the group based on their new absolute positions.
-          // Fabric Group children positions are relative to group center.
-          // We need to calculate absolute position for each child.
-          // Note: groupObj has already been moved to new position (target.left, target.top)
-
-          const groupCenter = new Point(groupObj.left, groupObj.top);
-          // Get group matrix to transform children
-          // Simplified: just add relative coordinates if no rotation/scaling on group
-          // We locked rotation/scaling, so it's safe.
-
-          const newFeatures = [...this.workingFeatures];
-          const { x, y } = this.currentGeometry!; // Center is same
-
-          // Fabric Group objects have .getObjects() which returns children
-          // But children inside group have coordinates relative to group center.
-          // center is (0,0) inside the group local coordinate system.
-
-          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;
-
-            // Calculate absolute position
-            // child.left/top are relative to group center
-            const absX = groupCenter.x + (child.left || 0);
-            const absY = groupCenter.y + (child.top || 0);
-
-            // Normalize
-            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();
-        } else {
-          // Single object
-          this.syncFeatureFromCanvas(target);
-        }
-      };
-      canvas.on("object:modified", this.handleModified);
-    }
-  }
-
-  private teardown() {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-
-    if (this.handleMoving) {
-      canvas.off("object:moving", this.handleMoving);
-      this.handleMoving = null;
-    }
-    if (this.handleModified) {
-      canvas.off("object:modified", this.handleModified);
-      this.handleModified = null;
-    }
-    if (this.handleSceneGeometryChange && this.context) {
-      this.context.eventBus.off(
-        "scene:geometry:change",
-        this.handleSceneGeometryChange,
-      );
-      this.handleSceneGeometryChange = null;
-    }
-
-    const objects = canvas
-      .getObjects()
-      .filter((obj: any) => obj.data?.type === "feature-marker");
-    objects.forEach((obj) => canvas.remove(obj));
-
-    this.canvasService.requestRenderAll();
-  }
-
-  private constrainPosition(
-    p: Point,
-    geometry: DielineGeometry,
-    limit: number,
-    feature?: ConstraintFeature,
-  ): { x: number; y: number } {
-    if (!feature) {
-      return { x: p.x, y: p.y };
-    }
-
-    const minX = geometry.x - geometry.width / 2;
-    const minY = geometry.y - geometry.height / 2;
-
-    // Normalize
-    const nx = geometry.width > 0 ? (p.x - minX) / geometry.width : 0.5;
-    const ny = geometry.height > 0 ? (p.y - minY) / geometry.height : 0.5;
-
-    const scale = geometry.scale || 1;
-    const dielineWidth = geometry.width / scale;
-    const dielineHeight = geometry.height / scale;
-
-    // Filter constraints: only apply those that are NOT validateOnly
-    const activeConstraints = feature.constraints?.filter(
-      (c) => !c.validateOnly,
-    );
-
-    const constrained = ConstraintRegistry.apply(
-      nx,
-      ny,
-      feature,
-      {
-        dielineWidth,
-        dielineHeight,
-        geometry,
-      },
-      activeConstraints,
-    );
-
-    // Denormalize
-    return {
-      x: minX + constrained.x * geometry.width,
-      y: minY + constrained.y * geometry.height,
-    };
-  }
-
-  private syncFeatureFromCanvas(target: any) {
-    if (!this.currentGeometry || !this.context) return;
-
-    const index = target.data?.index;
-    if (
-      index === undefined ||
-      index < 0 ||
-      index >= this.workingFeatures.length
-    )
-      return;
-
-    const feature = this.workingFeatures[index];
-    const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
-    const { width, height, x, y } = geometry;
-
-    // Calculate Normalized Position
-    // The geometry x/y is the CENTER.
-    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;
-
-    // Update feature
-    const updatedFeature = {
-      ...feature,
-      x: normalizedX,
-      y: normalizedY,
-      // Could also update rotation if we allowed rotating markers
-    };
-
-    const newFeatures = [...this.workingFeatures];
-    newFeatures[index] = updatedFeature;
-    this.setWorkingFeatures(newFeatures);
-    this.hasWorkingChanges = true;
-    this.emitWorkingChange();
-  }
-
-  private redraw() {
-    if (!this.canvasService || !this.currentGeometry) return;
-    const canvas = this.canvasService.canvas;
-    const geometry = this.currentGeometry;
-
-    // Remove existing markers
-    const existing = canvas
-      .getObjects()
-      .filter((obj: any) => obj.data?.type === "feature-marker");
-    existing.forEach((obj) => canvas.remove(obj));
-
-    if (!this.workingFeatures || this.workingFeatures.length === 0) {
-      this.canvasService.requestRenderAll();
-      return;
-    }
-
-    const scale = geometry.scale || 1;
-    const finalScale = scale;
-
-    // Group features by groupId
-    const groups: {
-      [key: string]: { feature: ConstraintFeature; index: number }[];
-    } = {};
-    const singles: { feature: ConstraintFeature; index: number }[] = [];
-
-    this.workingFeatures.forEach((f: ConstraintFeature, i: number) => {
-      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 });
-      }
-    });
-
-    // Helper to create marker shape
-    const createMarkerShape = (
-      feature: ConstraintFeature,
-      pos: { x: number; y: number },
-    ) => {
-      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] : undefined);
-
-      let shape: any;
-      if (feature.shape === "rect") {
-        shape = new Rect({
-          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);
-      }
-
-      // Handle Indicator for Bridge
-      if (feature.bridge && feature.bridge.type === "vertical") {
-        // Create a visual indicator for the bridge
-        // A dashed rectangle extending upwards
-        const bridgeIndicator = new Rect({
-          width: visualWidth,
-          height: 100 * featureScale, // Arbitrary long length to show direction
-          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,
-        });
-
-        // We need to return a group containing both shape and indicator
-        // But createMarkerShape is expected to return one object.
-        // If we return a Group, Fabric handles it.
-        // But the caller might wrap this in another Group if it's part of a feature group.
-        // Fabric supports nested groups.
-
-        const group = new Group([bridgeIndicator, shape], {
-          originX: "center",
-          originY: "center",
-          left: pos.x,
-          top: pos.y,
-        });
-        return group;
-      }
-
-      return shape;
-    };
-
-    // Render Singles
-    singles.forEach(({ feature, index }) => {
-      const geometry = this.getGeometryForFeature(
-        this.currentGeometry!,
-        feature,
-      );
-      const pos = resolveFeaturePosition(feature, geometry);
-      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);
-    });
-
-    // Render Groups
-    Object.keys(groups).forEach((groupId) => {
-      const members = groups[groupId];
-      if (members.length === 0) return;
-
-      // Calculate group center (average position) to position the group correctly
-      // But Fabric Group uses relative coordinates.
-      // Easiest way: Create shapes at absolute positions, then Group them.
-      // Fabric will auto-calculate group center and adjust children.
-
-      const shapes = members.map(({ feature }) => {
-        const geometry = this.getGeometryForFeature(
-          this.currentGeometry!,
-          feature,
-        );
-        const pos = resolveFeaturePosition(feature, geometry);
-        return createMarkerShape(feature, pos);
-      });
-
-      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),
-        },
-      });
-
-      canvas.add(groupObj);
-      canvas.bringObjectToFront(groupObj);
-    });
-
-    this.canvasService.requestRenderAll();
-  }
-
-  private enforceConstraints() {
-    if (!this.canvasService || !this.currentGeometry) return;
-    // Iterate markers and snap them if geometry changed
-    const canvas = this.canvasService.canvas;
-    const markers = canvas
-      .getObjects()
-      .filter((obj: any) => obj.data?.type === "feature-marker");
-
-    markers.forEach((marker: any) => {
-      // Find associated feature
-      let feature: ConstraintFeature | undefined;
-      if (marker.data?.isGroup) {
-        const indices = marker.data?.indices as number[];
-        if (indices && indices.length > 0) {
-          feature = this.workingFeatures[indices[0]];
-        }
-      } else {
-        const index = marker.data?.index;
-        if (index !== undefined) {
-          feature = this.workingFeatures[index];
-        }
-      }
-
-      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);
-
-      const snapped = this.constrainPosition(
-        new Point(marker.left, marker.top),
-        geometry,
-        limit,
-        feature,
-      );
-      marker.set({ left: snapped.x, top: snapped.y });
-      marker.setCoords();
-    });
-    canvas.requestRenderAll();
-  }
-}
+import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationService,
+  ToolSessionService,
+} from "@pooder/core";
+import { CanvasService, RenderObjectSpec } from "../services";
+import { resolveFeaturePosition } from "./geometry";
+import { ConstraintRegistry, ConstraintFeature } from "./constraints";
+import { completeFeaturesStrict } from "./featureComplete";
+import {
+  readSizeState,
+  type SceneGeometrySnapshot as DielineGeometry,
+} from "./sceneLayoutModel";
+
+const FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
+const FEATURE_STROKE_WIDTH = 2;
+const DEFAULT_RECT_SIZE = 10;
+const DEFAULT_CIRCLE_RADIUS = 5;
+
+type MarkerPoint = { x: number; y: number };
+
+interface GroupMemberOffset {
+  index: number;
+  dx: number;
+  dy: number;
+}
+
+interface MarkerRenderState {
+  feature: ConstraintFeature;
+  index: number;
+  position: MarkerPoint;
+  geometry: DielineGeometry;
+  scale: number;
+}
+
+interface MarkerData {
+  type: "feature-marker";
+  index: number;
+  featureId: string;
+  groupId?: string;
+  markerRole: "handle" | "member" | "indicator";
+  markerOffsetX: number;
+  markerOffsetY: number;
+  isGroup: boolean;
+  indices?: number[];
+  anchorIndex?: number;
+  memberOffsets?: GroupMemberOffset[];
+}
+
+export class FeatureTool implements Extension {
+  id = "pooder.kit.feature";
+
+  public metadata = {
+    name: "FeatureTool",
+  };
+
+  private workingFeatures: ConstraintFeature[] = [];
+  private canvasService?: CanvasService;
+  private context?: ExtensionContext;
+  private isUpdatingConfig = false;
+  private isToolActive = false;
+  private isFeatureSessionActive = false;
+  private sessionOriginalFeatures: ConstraintFeature[] | null = null;
+  private hasWorkingChanges = false;
+  private dirtyTrackerDisposable?: { dispose(): void };
+  private renderProducerDisposable?: { dispose: () => void };
+  private specs: RenderObjectSpec[] = [];
+  private renderSeq = 0;
+
+  private handleMoving: ((e: any) => void) | null = null;
+  private handleModified: ((e: any) => void) | null = null;
+  private handleSceneGeometryChange:
+    | ((geometry: DielineGeometry) => void)
+    | null = null;
+
+  private currentGeometry: DielineGeometry | null = null;
+
+  constructor(
+    options?: Partial<{
+      features: ConstraintFeature[];
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+
+  activate(context: ExtensionContext) {
+    this.context = context;
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for FeatureTool");
+      return;
+    }
+
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = this.canvasService.registerRenderProducer(
+      this.id,
+      () => ({
+        rootLayerSpecs: {
+          [FEATURE_OVERLAY_LAYER_ID]: this.specs,
+        },
+      }),
+      { priority: 350 },
+    );
+
+    const configService = context.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
+    if (configService) {
+      const features = (configService.get("dieline.features", []) ||
+        []) as ConstraintFeature[];
+      this.workingFeatures = this.cloneFeatures(features);
+      this.hasWorkingChanges = false;
+
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (this.isUpdatingConfig) return;
+
+        if (e.key === "dieline.features") {
+          if (this.isFeatureSessionActive) return;
+          const next = (e.value || []) as ConstraintFeature[];
+          this.workingFeatures = this.cloneFeatures(next);
+          this.hasWorkingChanges = false;
+          this.redraw();
+          this.emitWorkingChange();
+        }
+      });
+    }
+
+    const toolSessionService =
+      context.services.get<ToolSessionService>("ToolSessionService");
+    this.dirtyTrackerDisposable = toolSessionService?.registerDirtyTracker(
+      this.id,
+      () => this.hasWorkingChanges,
+    );
+
+    context.eventBus.on("tool:activated", this.onToolActivated);
+
+    this.setup();
+  }
+
+  deactivate(context: ExtensionContext) {
+    context.eventBus.off("tool:activated", this.onToolActivated);
+    this.restoreSessionFeaturesToConfig();
+    this.dirtyTrackerDisposable?.dispose();
+    this.dirtyTrackerDisposable = undefined;
+    this.teardown();
+    this.canvasService = undefined;
+    this.context = undefined;
+  }
+
+  private onToolActivated = (event: { id: string | null }) => {
+    this.isToolActive = event.id === this.id;
+    if (!this.isToolActive) {
+      this.restoreSessionFeaturesToConfig();
+    }
+    this.updateVisibility();
+  };
+
+  private updateVisibility() {
+    this.redraw();
+  }
+
+  contribute() {
+    return {
+      [ContributionPointIds.TOOLS]: [
+        {
+          id: this.id,
+          name: "Feature",
+          interaction: "session",
+          commands: {
+            begin: "beginFeatureSession",
+            commit: "completeFeatures",
+            rollback: "rollbackFeatureSession",
+          },
+          session: {
+            autoBegin: false,
+            leavePolicy: "block",
+          },
+        },
+      ],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "beginFeatureSession",
+          title: "Begin Feature Session",
+          handler: async () => {
+            if (this.isFeatureSessionActive) {
+              return { ok: true };
+            }
+            const original = this.getCommittedFeatures();
+            this.sessionOriginalFeatures = this.cloneFeatures(original);
+            this.isFeatureSessionActive = true;
+            await this.refreshGeometry();
+            this.setWorkingFeatures(this.cloneFeatures(original));
+            this.hasWorkingChanges = false;
+            this.redraw();
+            this.emitWorkingChange();
+            this.updateCommittedFeatures([]);
+            return { ok: true };
+          },
+        },
+        {
+          command: "addFeature",
+          title: "Add Edge Feature",
+          handler: (type: "add" | "subtract" = "subtract") => {
+            return this.addFeature(type);
+          },
+        },
+        {
+          command: "addHole",
+          title: "Add Hole",
+          handler: () => {
+            return this.addFeature("subtract");
+          },
+        },
+        {
+          command: "addDoubleLayerHole",
+          title: "Add Double Layer Hole",
+          handler: () => {
+            return this.addDoubleLayerHole();
+          },
+        },
+        {
+          command: "clearFeatures",
+          title: "Clear Features",
+          handler: () => {
+            this.setWorkingFeatures([]);
+            this.hasWorkingChanges = true;
+            this.redraw();
+            this.emitWorkingChange();
+            return true;
+          },
+        },
+        {
+          command: "getWorkingFeatures",
+          title: "Get Working Features",
+          handler: () => {
+            return this.cloneFeatures(this.workingFeatures);
+          },
+        },
+        {
+          command: "setWorkingFeatures",
+          title: "Set Working Features",
+          handler: async (features: ConstraintFeature[]) => {
+            await this.refreshGeometry();
+            this.setWorkingFeatures(this.cloneFeatures(features || []));
+            this.hasWorkingChanges = true;
+            this.redraw();
+            this.emitWorkingChange();
+            return { ok: true };
+          },
+        },
+        {
+          command: "rollbackFeatureSession",
+          title: "Rollback Feature Session",
+          handler: async () => {
+            const original = this.cloneFeatures(
+              this.sessionOriginalFeatures || this.getCommittedFeatures(),
+            );
+            await this.refreshGeometry();
+            this.setWorkingFeatures(original);
+            this.hasWorkingChanges = false;
+            this.redraw();
+            this.emitWorkingChange();
+            this.updateCommittedFeatures(original);
+            this.clearFeatureSessionState();
+            return { ok: true };
+          },
+        },
+        {
+          command: "resetWorkingFeatures",
+          title: "Reset Working Features",
+          handler: async () => {
+            await this.resetWorkingFeaturesFromSource();
+            return { ok: true };
+          },
+        },
+        {
+          command: "updateWorkingGroupPosition",
+          title: "Update Working Group Position",
+          handler: (groupId: string, x: number, y: number) => {
+            return this.updateWorkingGroupPosition(groupId, x, y);
+          },
+        },
+        {
+          command: "completeFeatures",
+          title: "Complete Features",
+          handler: () => {
+            return this.completeFeatures();
+          },
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  private cloneFeatures(features: ConstraintFeature[]): ConstraintFeature[] {
+    return JSON.parse(JSON.stringify(features || [])) as ConstraintFeature[];
+  }
+
+  private getConfigService(): ConfigurationService | undefined {
+    return this.context?.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
+  }
+
+  private getCommittedFeatures(): ConstraintFeature[] {
+    const configService = this.getConfigService();
+    const committed = (configService?.get("dieline.features", []) ||
+      []) as ConstraintFeature[];
+    return this.cloneFeatures(committed);
+  }
+
+  private updateCommittedFeatures(next: ConstraintFeature[]) {
+    const configService = this.getConfigService();
+    if (!configService) return;
+    this.isUpdatingConfig = true;
+    try {
+      configService.update("dieline.features", next);
+    } finally {
+      this.isUpdatingConfig = false;
+    }
+  }
+
+  private clearFeatureSessionState() {
+    this.isFeatureSessionActive = false;
+    this.sessionOriginalFeatures = null;
+  }
+
+  private restoreSessionFeaturesToConfig() {
+    if (!this.isFeatureSessionActive) return;
+    const original = this.cloneFeatures(
+      this.sessionOriginalFeatures || this.getCommittedFeatures(),
+    );
+    this.updateCommittedFeatures(original);
+    this.clearFeatureSessionState();
+  }
+
+  private emitWorkingChange() {
+    this.context?.eventBus.emit("feature:working:change", {
+      features: this.cloneFeatures(this.workingFeatures),
+    });
+  }
+
+  private async refreshGeometry() {
+    if (!this.context) return;
+    const commandService = this.context.services.get<any>("CommandService");
+    if (!commandService) return;
+    try {
+      const g = await Promise.resolve(
+        commandService.executeCommand("getSceneGeometry"),
+      );
+      if (g) this.currentGeometry = g as DielineGeometry;
+    } catch (e) {}
+  }
+
+  private async resetWorkingFeaturesFromSource() {
+    const next = this.cloneFeatures(
+      this.isFeatureSessionActive && this.sessionOriginalFeatures
+        ? this.sessionOriginalFeatures
+        : this.getCommittedFeatures(),
+    );
+    await this.refreshGeometry();
+    this.setWorkingFeatures(next);
+    this.hasWorkingChanges = false;
+    this.redraw();
+    this.emitWorkingChange();
+  }
+
+  private setWorkingFeatures(next: ConstraintFeature[]) {
+    this.workingFeatures = next;
+  }
+
+  private updateWorkingGroupPosition(groupId: string, x: number, y: number) {
+    if (!groupId) return { ok: false };
+
+    const configService = this.context?.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
+    if (!configService) return { ok: false };
+
+    const sizeState = readSizeState(configService);
+    const dielineWidth = sizeState.actualWidthMm;
+    const dielineHeight = sizeState.actualHeightMm;
+
+    let changed = false;
+    const next = this.workingFeatures.map((f) => {
+      if (f.groupId !== groupId) return f;
+      let nx = x;
+      let ny = y;
+      if (f.constraints && dielineWidth > 0 && dielineHeight > 0) {
+        const constrained = ConstraintRegistry.apply(nx, ny, f, {
+          dielineWidth,
+          dielineHeight,
+        });
+        nx = constrained.x;
+        ny = constrained.y;
+      }
+
+      if (f.x !== nx || f.y !== ny) {
+        changed = true;
+        return { ...f, x: nx, y: ny };
+      }
+      return f;
+    });
+
+    if (!changed) return { ok: true };
+
+    this.setWorkingFeatures(next);
+    this.hasWorkingChanges = true;
+    this.redraw({ enforceConstraints: true });
+    this.emitWorkingChange();
+
+    return { ok: true };
+  }
+
+  private completeFeatures(): {
+    ok: boolean;
+    issues?: Array<{
+      featureId: string;
+      groupId?: string;
+      reason: string;
+    }>;
+  } {
+    const configService = this.context?.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
+    if (!configService) {
+      return {
+        ok: false,
+        issues: [
+          { featureId: "unknown", reason: "ConfigurationService not found" },
+        ],
+      };
+    }
+
+    const sizeState = readSizeState(configService);
+    const dielineWidth = sizeState.actualWidthMm;
+    const dielineHeight = sizeState.actualHeightMm;
+
+    const result = completeFeaturesStrict(
+      this.workingFeatures,
+      { dielineWidth, dielineHeight },
+      (next) => {
+        this.updateCommittedFeatures(next as ConstraintFeature[]);
+        this.workingFeatures = this.cloneFeatures(next as ConstraintFeature[]);
+        this.emitWorkingChange();
+      },
+    );
+
+    if (!result.ok) {
+      return {
+        ok: false,
+        issues: result.issues,
+      };
+    }
+
+    this.hasWorkingChanges = false;
+    this.clearFeatureSessionState();
+    this.redraw();
+    return { ok: true };
+  }
+
+  private addFeature(type: "add" | "subtract") {
+    if (!this.canvasService) return false;
+
+    const newFeature: ConstraintFeature = {
+      id: Date.now().toString(),
+      operation: type,
+      shape: "rect",
+      x: 0.5,
+      y: 0,
+      width: 10,
+      height: 10,
+      rotation: 0,
+      renderBehavior: "edge",
+      constraints: [{ type: "path" }],
+    };
+
+    this.setWorkingFeatures([...(this.workingFeatures || []), newFeature]);
+    this.hasWorkingChanges = true;
+    this.redraw();
+    this.emitWorkingChange();
+    return true;
+  }
+
+  private addDoubleLayerHole() {
+    if (!this.canvasService) return false;
+
+    const groupId = Date.now().toString();
+    const timestamp = Date.now();
+
+    const lug: ConstraintFeature = {
+      id: `${timestamp}-lug`,
+      groupId,
+      operation: "add",
+      shape: "circle",
+      x: 0.5,
+      y: 0,
+      radius: 20,
+      rotation: 0,
+      renderBehavior: "edge",
+      constraints: [{ type: "path" }],
+    };
+
+    const hole: ConstraintFeature = {
+      id: `${timestamp}-hole`,
+      groupId,
+      operation: "subtract",
+      shape: "circle",
+      x: 0.5,
+      y: 0,
+      radius: 15,
+      rotation: 0,
+      renderBehavior: "edge",
+      constraints: [{ type: "path" }],
+    };
+
+    this.setWorkingFeatures([...(this.workingFeatures || []), lug, hole]);
+    this.hasWorkingChanges = true;
+    this.redraw();
+    this.emitWorkingChange();
+    return true;
+  }
+
+  private getGeometryForFeature(
+    geometry: DielineGeometry,
+    _feature?: ConstraintFeature,
+  ): DielineGeometry {
+    return geometry;
+  }
+
+  private setup() {
+    if (!this.canvasService || !this.context) return;
+    const canvas = this.canvasService.canvas;
+
+    if (!this.handleSceneGeometryChange) {
+      this.handleSceneGeometryChange = (geometry: DielineGeometry) => {
+        this.currentGeometry = geometry;
+        this.redraw({ enforceConstraints: true });
+      };
+      this.context.eventBus.on(
+        "scene:geometry:change",
+        this.handleSceneGeometryChange,
+      );
+    }
+
+    const commandService = this.context.services.get<any>("CommandService");
+    if (commandService) {
+      try {
+        Promise.resolve(commandService.executeCommand("getSceneGeometry")).then(
+          (g) => {
+            if (g) {
+              this.currentGeometry = g as DielineGeometry;
+              this.redraw();
+            }
+          },
+        );
+      } catch (e) {}
+    }
+
+    if (!this.handleMoving) {
+      this.handleMoving = (e: any) => {
+        const target = this.getDraggableMarkerTarget(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,
+        );
+
+        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: any) => {
+        const target = this.getDraggableMarkerTarget(e?.target);
+        if (!target) return;
+
+        if (target.data?.isGroup) {
+          this.syncGroupFromCanvas(target);
+        } else {
+          this.syncFeatureFromCanvas(target);
+        }
+      };
+      canvas.on("object:modified", this.handleModified);
+    }
+  }
+
+  private teardown() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+
+    if (this.handleMoving) {
+      canvas.off("object:moving", this.handleMoving);
+      this.handleMoving = null;
+    }
+    if (this.handleModified) {
+      canvas.off("object:modified", this.handleModified);
+      this.handleModified = null;
+    }
+    if (this.handleSceneGeometryChange && this.context) {
+      this.context.eventBus.off(
+        "scene:geometry:change",
+        this.handleSceneGeometryChange,
+      );
+      this.handleSceneGeometryChange = null;
+    }
+
+    this.renderSeq += 1;
+    this.specs = [];
+    this.renderProducerDisposable?.dispose();
+    this.renderProducerDisposable = undefined;
+    void this.canvasService.flushRenderFromProducers();
+  }
+
+  private getDraggableMarkerTarget(target: any): any | null {
+    if (!target || target.data?.type !== "feature-marker") return null;
+    if (target.data?.markerRole !== "handle") return null;
+    return target;
+  }
+
+  private getFeatureForMarker(target: any): ConstraintFeature | undefined {
+    const data = target?.data || {};
+    const index = data.isGroup
+      ? this.toFeatureIndex(data.anchorIndex)
+      : this.toFeatureIndex(data.index);
+    if (index === null) return undefined;
+    return this.workingFeatures[index];
+  }
+
+  private constrainPosition(
+    p: MarkerPoint,
+    geometry: DielineGeometry,
+    feature?: ConstraintFeature,
+  ): MarkerPoint {
+    if (!feature) {
+      return { x: p.x, y: p.y };
+    }
+
+    const minX = geometry.x - geometry.width / 2;
+    const minY = geometry.y - geometry.height / 2;
+
+    const nx = geometry.width > 0 ? (p.x - minX) / geometry.width : 0.5;
+    const ny = geometry.height > 0 ? (p.y - minY) / geometry.height : 0.5;
+
+    const scale = geometry.scale || 1;
+    const dielineWidth = geometry.width / scale;
+    const dielineHeight = geometry.height / scale;
+
+    const activeConstraints = feature.constraints?.filter(
+      (c) => !c.validateOnly,
+    );
+
+    const constrained = ConstraintRegistry.apply(
+      nx,
+      ny,
+      feature,
+      {
+        dielineWidth,
+        dielineHeight,
+        geometry,
+      },
+      activeConstraints,
+    );
+
+    return {
+      x: minX + constrained.x * geometry.width,
+      y: minY + constrained.y * geometry.height,
+    };
+  }
+
+  private toNormalizedPoint(
+    point: MarkerPoint,
+    geometry: DielineGeometry,
+  ): MarkerPoint {
+    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,
+    };
+  }
+
+  private syncFeatureFromCanvas(target: any) {
+    if (!this.currentGeometry) return;
+
+    const index = this.toFeatureIndex(target.data?.index);
+    if (index === null || index >= this.workingFeatures.length) return;
+
+    const feature = this.workingFeatures[index];
+    const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
+    const normalized = this.toNormalizedPoint(
+      {
+        x: Number(target.left || 0),
+        y: Number(target.top || 0),
+      },
+      geometry,
+    );
+
+    const updatedFeature = {
+      ...feature,
+      x: normalized.x,
+      y: normalized.y,
+    };
+
+    const next = [...this.workingFeatures];
+    next[index] = updatedFeature;
+    this.setWorkingFeatures(next);
+    this.hasWorkingChanges = true;
+    this.emitWorkingChange();
+  }
+
+  private syncGroupFromCanvas(target: any) {
+    if (!this.currentGeometry) return;
+
+    const indices = this.readGroupIndices(target.data?.indices);
+    if (indices.length === 0) return;
+    const offsets = this.readGroupMemberOffsets(target.data?.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;
+      }
+    });
+
+    if (!changed) return;
+    this.setWorkingFeatures(next);
+    this.hasWorkingChanges = true;
+    this.emitWorkingChange();
+  }
+
+  private redraw(options: { enforceConstraints?: boolean } = {}) {
+    void this.redrawAsync(options);
+  }
+
+  private async redrawAsync(options: { enforceConstraints?: boolean } = {}) {
+    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();
+    }
+  }
+
+  private syncOverlayOrder() {
+    if (!this.canvasService) return;
+    this.canvasService.bringLayerToFront(FEATURE_OVERLAY_LAYER_ID);
+    this.canvasService.bringLayerToFront("ruler-overlay");
+  }
+
+  private buildFeatureSpecs(): RenderObjectSpec[] {
+    if (!this.currentGeometry || this.workingFeatures.length === 0) {
+      return [];
+    }
+
+    const groups = new Map<string, MarkerRenderState[]>();
+    const singles: MarkerRenderState[] = [];
+
+    this.workingFeatures.forEach((feature, index) => {
+      const geometry = this.getGeometryForFeature(this.currentGeometry!, feature);
+      const position = resolveFeaturePosition(feature, geometry);
+      const scale = geometry.scale || 1;
+      const marker: MarkerRenderState = {
+        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: RenderObjectSpec[] = [];
+
+    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: GroupMemberOffset[] = 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,
+      });
+    });
+
+    return specs;
+  }
+
+  private appendMarkerSpecs(
+    specs: RenderObjectSpec[],
+    marker: MarkerRenderState,
+    options: {
+      markerRole: "handle" | "member";
+      isGroup: boolean;
+      groupId?: string;
+      indices?: number[];
+      anchorIndex?: number;
+      memberOffsets?: GroupMemberOffset[];
+    },
+  ) {
+    const { feature, index, position, scale, geometry } = marker;
+    const baseRadius =
+      feature.shape === "circle"
+        ? (feature.radius ?? DEFAULT_CIRCLE_RADIUS)
+        : (feature.radius ?? 0);
+    const baseWidth =
+      feature.shape === "circle"
+        ? baseRadius * 2
+        : (feature.width ?? DEFAULT_RECT_SIZE);
+    const baseHeight =
+      feature.shape === "circle"
+        ? baseRadius * 2
+        : (feature.height ?? 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] : undefined);
+
+    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" as const,
+      originY: "center" as const,
+      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,
+        },
+      });
+    } else {
+      specs.push({
+        id: markerId,
+        type: "rect",
+        space: "screen",
+        data: baseData,
+        props: {
+          ...commonProps,
+          width: visualWidth,
+          height: visualHeight,
+          rx: visualRadius,
+          ry: visualRadius,
+        },
+      });
+    }
+
+    if (feature.bridge?.type === "vertical") {
+      const featureTopY = position.y - visualHeight / 2;
+      const dielineTopY = geometry.y - geometry.height / 2;
+      const bridgeHeight = Math.max(0, featureTopY - dielineTopY);
+      if (bridgeHeight <= 0.001) {
+        return;
+      }
+      specs.push({
+        id: this.bridgeIndicatorId(index),
+        type: "rect",
+        space: "screen",
+        data: {
+          ...baseData,
+          markerRole: "indicator",
+          markerOffsetX: 0,
+          markerOffsetY: -visualHeight / 2,
+        } as MarkerData,
+        props: {
+          visible: this.isToolActive,
+          selectable: false,
+          evented: false,
+          width: visualWidth,
+          height: bridgeHeight,
+          fill: "transparent",
+          stroke: "#888",
+          strokeWidth: 1,
+          strokeDashArray: [2, 2],
+          opacity: 0.5,
+          originX: "center",
+          originY: "bottom",
+          left: position.x,
+          top: position.y - visualHeight / 2,
+        },
+      });
+    }
+  }
+
+  private buildMarkerData(
+    marker: MarkerRenderState,
+    options: {
+      markerRole: "handle" | "member";
+      isGroup: boolean;
+      groupId?: string;
+      indices?: number[];
+      anchorIndex?: number;
+      memberOffsets?: GroupMemberOffset[];
+    },
+  ): MarkerData {
+    const data: MarkerData = {
+      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 !== undefined) data.anchorIndex = options.anchorIndex;
+    if (options.memberOffsets) data.memberOffsets = options.memberOffsets;
+    return data;
+  }
+
+  private markerId(index: number): string {
+    return `feature.marker.${index}`;
+  }
+
+  private bridgeIndicatorId(index: number): string {
+    return `feature.marker.${index}.bridge`;
+  }
+
+  private toFeatureIndex(value: unknown): number | null {
+    const numeric = Number(value);
+    if (!Number.isInteger(numeric) || numeric < 0) return null;
+    return numeric;
+  }
+
+  private readGroupIndices(raw: unknown): number[] {
+    if (!Array.isArray(raw)) return [];
+    return raw
+      .map((value) => this.toFeatureIndex(value))
+      .filter((value): value is number => value !== null);
+  }
+
+  private readGroupMemberOffsets(
+    raw: unknown,
+    fallbackIndices: number[] = [],
+  ): GroupMemberOffset[] {
+    if (Array.isArray(raw)) {
+      const parsed = raw
+        .map((entry) => {
+          const index = this.toFeatureIndex((entry as any)?.index);
+          const dx = Number((entry as any)?.dx);
+          const dy = Number((entry as any)?.dy);
+          if (index === null || !Number.isFinite(dx) || !Number.isFinite(dy)) {
+            return null;
+          }
+          return { index, dx, dy };
+        })
+        .filter((value): value is GroupMemberOffset => !!value);
+      if (parsed.length > 0) return parsed;
+    }
+
+    return fallbackIndices.map((index) => ({ index, dx: 0, dy: 0 }));
+  }
+
+  private syncMarkerVisualsByTarget(target: any, center: MarkerPoint) {
+    if (target.data?.isGroup) {
+      const indices = this.readGroupIndices(target.data?.indices);
+      const offsets = this.readGroupMemberOffsets(target.data?.memberOffsets, indices);
+      offsets.forEach((entry) => {
+        this.syncMarkerVisualObjectsToCenter(entry.index, {
+          x: center.x + entry.dx,
+          y: center.y + entry.dy,
+        });
+      });
+      this.canvasService?.requestRenderAll();
+      return;
+    }
+
+    const index = this.toFeatureIndex(target.data?.index);
+    if (index === null) return;
+    this.syncMarkerVisualObjectsToCenter(index, center);
+    this.canvasService?.requestRenderAll();
+  }
+
+  private syncMarkerVisualObjectsToCenter(index: number, center: MarkerPoint) {
+    if (!this.canvasService) return;
+    const markers = this.canvasService.canvas
+      .getObjects()
+      .filter(
+        (obj: any) =>
+          obj?.data?.type === "feature-marker" &&
+          this.toFeatureIndex(obj?.data?.index) === index,
+      );
+
+    markers.forEach((marker: any) => {
+      const offsetX = Number(marker?.data?.markerOffsetX || 0);
+      const offsetY = Number(marker?.data?.markerOffsetY || 0);
+      marker.set({
+        left: center.x + offsetX,
+        top: center.y + offsetY,
+      });
+      marker.setCoords();
+    });
+  }
+
+  private enforceConstraints() {
+    if (!this.canvasService || !this.currentGeometry) return;
+
+    const handles = this.canvasService.canvas
+      .getObjects()
+      .filter(
+        (obj: any) =>
+          obj?.data?.type === "feature-marker" &&
+          obj?.data?.markerRole === "handle",
+      );
+
+    handles.forEach((marker: any) => {
+      const feature = this.getFeatureForMarker(marker);
+      if (!feature) return;
+      const geometry = this.getGeometryForFeature(this.currentGeometry!, feature);
+      const snapped = this.constrainPosition(
+        {
+          x: Number(marker.left || 0),
+          y: Number(marker.top || 0),
+        },
+        geometry,
+        feature,
+      );
+      marker.set({ left: snapped.x, top: snapped.y });
+      marker.setCoords();
+      this.syncMarkerVisualsByTarget(marker, snapped);
+    });
+
+    this.canvasService.canvas.requestRenderAll();
+  }
+}