dytools-capture-engine 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1837 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CaptureEngine: () => CaptureEngine,
+  CaptureEngineToZoneEventType: () => CaptureEngineToZoneEventType,
+  CapturePublicEventType: () => CapturePublicEventType,
+  CaptureToEngineEventType: () => CaptureToEngineEventType
+});
+module.exports = __toCommonJS(index_exports);
+var import_dytools_canvas_engine = require("dytools-canvas-engine");
+var CapturePublicEventType = {
+  // These are events based on the state of the zone that is handled by the zone itself.
+  ZonePositionChanged: "zone:position_changed",
+  // This is a call that happens when either resize or moved.
+  ZoneNameChanged: "zone:name_changed",
+  ZoneFilterRegexChanged: "zone:filter_regex_changed",
+  ZoneExampleChanged: "zone:example_changed",
+  ZoneHiddenChanged: "zone:hidden_changed",
+  ZoneChanged: "zone:changed",
+  // This happens on all the above events.
+  TemplateChanged: "template:changed",
+  //ZoneChildZoneAdded: "zone:child_zone_added",
+  //ZoneChildZoneRemoved: "zone:child_zone_removed",
+  //ZoneChildZonesChanged: "zone:child_zone_changed", // This happens on child zone add/remove.
+  // These are events based on the state of the zone that is handled by the engine.
+  ZoneSelected: "zone:selected",
+  ZoneDeselected: "zone:deselected",
+  ZoneFlagsAdded: "zone:flags_added",
+  ZoneFlagsRemoved: "zone:flags_removed",
+  // These are events that are emitted by the engine.
+  ZoneAdded: "capture:zone_added",
+  ZoneRemoved: "capture:zone_removed",
+  ViewportChanged: "capture:viewport_changed",
+  // for pan and zoom
+  DrawingCompleted: "capture:drawing_completed",
+  // for drawing new shape
+  OcrShown: "capture:ocr_shown",
+  OcrHidden: "capture:ocr_hidden",
+  OcrReadLoaded: "capture:api_ocr_loaded",
+  OcrMatchesLoaded: "capture:api_ocr_matches_loaded",
+  CaptureStarted: "capture:started",
+  // when started
+  //CaptureStopped: "capture:stopped", // when stopped
+  CaptureError: "capture:error",
+  // any errors
+  CaptureBackgroundChanged: "capture:background_changed",
+  CaptureRenderStarted: "capture:render_started",
+  CaptureRenderCompleted: "capture:render_completed"
+};
+var CaptureZoneEventType = {
+  // These are events that originate and end inside the zone itself.
+  ZoneCanvasManagerSet: "zone_internal:canvas_manager_set",
+  ZonePositionChanged: "zone_internal:position_changed",
+  ZoneColorChanged: "zone_internal:color_changed",
+  ZoneNameChanged: "zone_internal:name_changed",
+  ZoneExampleChanged: "zone_internal:example_changed",
+  ZoneHiddenChanged: "zone_internal:hidden_changed",
+  ZoneFilterRegexChanged: "zone_internal:filter_regex_changed",
+  ZoneOutputRegexChanged: "zone_internal:output_regex_changed",
+  ZoneOutputReplacementChanged: "zone_internal:output_replacement_changed",
+  ZoneRequiredChanged: "zone_internal:required_changed",
+  ZoneDataTypeChanged: "zone_internal:data_type_changed",
+  ZoneExcludeFromOutputChanged: "zone_internal:exclude_from_output_changed",
+  ZoneDefaultValueIfEmptyChanged: "zone_internal:default_value_if_empty_changed",
+  ZoneOcrMatchesChanged: "zone_internal:ocr_matches_changed",
+  ZoneGroupChildrenChanged: "zone_internal:group_children_changed",
+  ZoneAnchorLocationChanged: "zone_internal:anchor_location_changed"
+  // These are events based on the state of the zone that is handled by the engine.
+  // ZoneSelected: "zone:selected",
+  // ZoneDeselected: "zone:deselected",
+  // ZoneFlagsAdded: "zone:flags_added",
+  // ZoneFlagsRemoved: "zone:flags_removed",
+};
+var CaptureEngineToZoneEventType = {
+  // These are events that originate from the canvas engine.
+  // These are just forwarded to the zone and the zone is responsible for updating its
+  // state and emitting events back to the CaptureEngine.
+  CanvasObjectPositionChanged: "canvas:object_position_changed",
+  CanvasObjectResized: "canvas:object_resized",
+  CanvasObjectMoved: "canvas:object_moved",
+  //
+  // ZonePositionChanged: "zone:position_changed",
+  // ZoneColorChanged: "zone:color_changed",
+  // ZoneNameChanged: "zone:name_changed",
+  // ZoneVisibleChanged: "zone:visible_changed",
+  // These are events based on the state of the zone that is handled by the engine.
+  ZoneSelected: "zone:selected",
+  ZoneDeselected: "zone:deselected",
+  ZoneFlagsAdded: "zone:flags_added",
+  ZoneFlagsRemoved: "zone:flags_removed",
+  CaptureOcrReadLoaded: "capture:ocr_read_loaded",
+  CaptureOcrMatchesLoaded: "capture:ocr_matches_loaded"
+};
+var CaptureToEngineEventType = {
+  // These are events based on the state of the zone that is handled by the zone itself.
+  ZonePositionChanged: "zone:position_changed",
+  // This is a call that happens when either resize or moved.
+  ZoneNameChanged: "zone:name_changed",
+  ZoneFilterRegexChanged: "zone:filter_regex_changed",
+  ZoneOutputRegexChanged: "zone:output_regex_changed",
+  ZoneOutputReplacementChanged: "zone:output_replacement_changed",
+  ZoneRequiredChanged: "zone:required_changed",
+  ZoneDataTypeChanged: "zone:data_type_changed",
+  ZoneExcludeFromOutputChanged: "zone:exclude_from_output_changed",
+  ZoneDefaultValueIfEmptyChanged: "zone:default_value_if_empty_changed",
+  ZoneExampleChanged: "zone:example_changed",
+  ZoneHiddenChanged: "zone:hidden_changed",
+  ZoneChanged: "zone:changed",
+  // This happens on all the above events.
+  ZoneAnchorLocationChanged: "zone:anchor_location_changed",
+  ZoneGroupChildrenChanged: "zone:group_children_changed",
+  ZoneChildZoneAdded: "zone:child_zone_added",
+  ZoneChildZoneRemoved: "zone:child_zone_removed",
+  ZoneChildZonesChanged: "zone:child_zone_changed",
+  // This happens on child zone add/remove.
+  //
+  ZoneError: "zone:error"
+  // ObjectPositionChanged: "object:positionchanged",
+  // ObjectResized: "object:resized",
+  // ObjectMoved: "object:moved",
+  // ObjectSelected: "object:selected",
+  // ObjectDeselected: "object:deselected",
+};
+var CaptureZoneBase = class {
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
+    this._example = null;
+    this.needsAnchorReposition = false;
+    // This is true when the zone needs to be repositioned to the parent's anchor point when the anchor is moved.
+    this.primaryCanvasRectangleId = null;
+    // a queue for pending internal events
+    this.pendingInternalEvents = [];
+    this._id = this.makeId();
+    this._name = name;
+    this._rect = rect;
+    this._hidden = hidden;
+    this._filterRegex = filterRegex;
+    this._outputRegex = outputRegex;
+    this._outputReplacement = outputReplacement;
+    this._required = required;
+    this._dataType = dataType;
+    this._excludeFromOutput = excludeFromOutput;
+    this._defaultValueIfEmpty = defaultValueIfEmpty;
+  }
+  handleInternalZoneEvent(type, payload) {
+    if (this.primaryCanvasRectangleId === null || !this.canvasManager) {
+      return;
+    }
+    let propertiesChanged = [];
+    if (type === CaptureZoneEventType.ZonePositionChanged) {
+      const zonePositionChangedPayload = payload;
+      const oldRect = zonePositionChangedPayload.oldPosition;
+      const newRect = zonePositionChangedPayload.newPosition;
+      this.canvasManager.setRectangleSize(this.primaryCanvasRectangleId, newRect);
+      this.emitToEngine(CaptureToEngineEventType.ZonePositionChanged, {
+        zone: this,
+        oldPosition: oldRect,
+        newPosition: newRect
+      });
+      propertiesChanged.push("rect");
+    }
+    if (type === CaptureZoneEventType.ZoneNameChanged) {
+      const zoneNameChangedPayload = payload;
+      const oldName = zoneNameChangedPayload.oldName;
+      const newName = zoneNameChangedPayload.newName;
+      this.canvasManager.setName(this.primaryCanvasRectangleId, newName);
+      this.emitToEngine(CaptureToEngineEventType.ZoneNameChanged, {
+        zone: this,
+        oldName,
+        newName
+      });
+      propertiesChanged.push("name");
+    }
+    if (type === CaptureZoneEventType.ZoneExampleChanged) {
+      const zoneNameChangedPayload = payload;
+      const oldExample = zoneNameChangedPayload.oldName;
+      const newExample = zoneNameChangedPayload.newName;
+      this.emitToEngine(CaptureToEngineEventType.ZoneExampleChanged, {
+        zone: this,
+        oldExample,
+        newExample
+      });
+      propertiesChanged.push("example");
+    }
+    if (type === CaptureZoneEventType.ZoneHiddenChanged) {
+      const zoneHiddenChangedPayload = payload;
+      const oldHidden = zoneHiddenChangedPayload.oldHidden;
+      const newHidden = zoneHiddenChangedPayload.newHidden;
+      this.canvasManager?.setVisibility(this.primaryCanvasRectangleId, !newHidden);
+      this.emitToEngine(CaptureToEngineEventType.ZoneHiddenChanged, {
+        zone: this,
+        oldHidden,
+        newHidden
+      });
+      propertiesChanged.push("hidden");
+    }
+    if (type === CaptureZoneEventType.ZoneFilterRegexChanged) {
+      const zoneFilterRegexChangedPayload = payload;
+      const oldFilterRegex = zoneFilterRegexChangedPayload.oldFilterRegex;
+      const newFilterRegex = zoneFilterRegexChangedPayload.newFilterRegex;
+      this.emitToEngine(CaptureToEngineEventType.ZoneFilterRegexChanged, {
+        zone: this,
+        oldFilterRegex,
+        newFilterRegex
+      });
+      propertiesChanged.push("filterRegex");
+    }
+    if (type === CaptureZoneEventType.ZoneOutputRegexChanged) {
+      const zoneOutputRegexChangedPayload = payload;
+      const oldOutputRegex = zoneOutputRegexChangedPayload.oldOutputRegex;
+      const newOutputRegex = zoneOutputRegexChangedPayload.newOutputRegex;
+      this.emitToEngine(CaptureToEngineEventType.ZoneOutputRegexChanged, {
+        zone: this,
+        oldOutputRegex,
+        newOutputRegex
+      });
+      propertiesChanged.push("outputRegex");
+    }
+    if (type === CaptureZoneEventType.ZoneOutputReplacementChanged) {
+      const zoneOutputReplacementChangedPayload = payload;
+      const oldOutputReplacement = zoneOutputReplacementChangedPayload.oldOutputReplacement;
+      const newOutputReplacement = zoneOutputReplacementChangedPayload.newOutputReplacement;
+      this.emitToEngine(CaptureToEngineEventType.ZoneOutputReplacementChanged, {
+        zone: this,
+        oldOutputReplacement,
+        newOutputReplacement
+      });
+      propertiesChanged.push("outputReplacement");
+    }
+    if (type === CaptureZoneEventType.ZoneRequiredChanged) {
+      const zoneRequiredChangedPayload = payload;
+      const oldRequired = zoneRequiredChangedPayload.oldRequired;
+      const newRequired = zoneRequiredChangedPayload.newRequired;
+      this.emitToEngine(CaptureToEngineEventType.ZoneRequiredChanged, {
+        zone: this,
+        oldRequired,
+        newRequired
+      });
+      propertiesChanged.push("required");
+    }
+    if (type === CaptureZoneEventType.ZoneDataTypeChanged) {
+      const zoneDataTypeChangedPayload = payload;
+      const oldDataType = zoneDataTypeChangedPayload.oldDataType;
+      const newDataType = zoneDataTypeChangedPayload.newDataType;
+      this.emitToEngine(CaptureToEngineEventType.ZoneDataTypeChanged, {
+        zone: this,
+        oldDataType,
+        newDataType
+      });
+      propertiesChanged.push("dataType");
+    }
+    if (type === CaptureZoneEventType.ZoneExcludeFromOutputChanged) {
+      const zoneExcludeFromOutputChangedPayload = payload;
+      const oldExcludeFromOutput = zoneExcludeFromOutputChangedPayload.oldExcludeFromOutput;
+      const newExcludeFromOutput = zoneExcludeFromOutputChangedPayload.newExcludeFromOutput;
+      this.emitToEngine(CaptureToEngineEventType.ZoneExcludeFromOutputChanged, {
+        zone: this,
+        oldExcludeFromOutput,
+        newExcludeFromOutput
+      });
+      propertiesChanged.push("excludeFromOutput");
+    }
+    if (type === CaptureZoneEventType.ZoneDefaultValueIfEmptyChanged) {
+      const zoneDefaultValueIfEmptyChangedPayload = payload;
+      const oldDefaultValueIfEmpty = zoneDefaultValueIfEmptyChangedPayload.oldDefaultValueIfEmpty;
+      const newDefaultValueIfEmpty = zoneDefaultValueIfEmptyChangedPayload.newDefaultValueIfEmpty;
+      this.emitToEngine(CaptureToEngineEventType.ZoneDefaultValueIfEmptyChanged, {
+        zone: this,
+        oldDefaultValueIfEmpty,
+        newDefaultValueIfEmpty
+      });
+      propertiesChanged.push("defaultValueIfEmpty");
+    }
+    if (propertiesChanged.length > 0) {
+      this.emitToEngine(CaptureToEngineEventType.ZoneChanged, { zone: this, propertiesChanged });
+    }
+  }
+  /* --- PROPERTIES --- */
+  get id() {
+    return this._id;
+  }
+  // if you really want id to be immutable, just omit the setter
+  get rect() {
+    return this._rect;
+  }
+  set rect(value) {
+    if (value.equals(this._rect)) return;
+    let originVect = value.origin.getDeltaFromPoint(this._rect.origin);
+    let widthDifference = Math.abs(value.size.width - this._rect.size.width);
+    let heightDifference = Math.abs(value.size.height - this._rect.size.height);
+    if (Math.abs(originVect.x) < 1 && Math.abs(originVect.y) < 1 && widthDifference < 1 && heightDifference < 1) {
+      return;
+    }
+    const oldRect = this._rect;
+    this._rect = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZonePositionChanged, { oldPosition: oldRect, newPosition: value });
+  }
+  get name() {
+    return this._name;
+  }
+  set name(value) {
+    if (value === this._name) return;
+    if ((value === void 0 || value === null || value === "") && (this._name === void 0 || this._name === null || this._name === "")) return;
+    const oldName = this._name;
+    this._name = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneNameChanged, { oldName, newName: value });
+  }
+  get example() {
+    return this._example;
+  }
+  set example(value) {
+    if (value === this._example) return;
+    if ((value === void 0 || value === null || value === "") && (this._example === void 0 || this._example === null || this._example === "")) return;
+    const oldExample = this._example;
+    this._example = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneExampleChanged, { oldExample, newExample: value });
+  }
+  get hidden() {
+    return this._hidden;
+  }
+  set hidden(value) {
+    if (value === this._hidden) return;
+    const oldHidden = this._hidden;
+    this._hidden = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneHiddenChanged, { oldHidden, newHidden: value });
+    this.emitToEngine(CaptureToEngineEventType.ZoneHiddenChanged, {
+      zone: this,
+      oldHidden,
+      newHidden: value
+    });
+    this.emitToEngine(CaptureToEngineEventType.ZoneChanged, { zone: this, propertiesChanged: ["hidden"] });
+  }
+  get filterRegex() {
+    return this._filterRegex ?? null;
+  }
+  set filterRegex(value) {
+    if (value === this._filterRegex) return;
+    if ((value === void 0 || value === null || value === "") && (this._filterRegex === void 0 || this._filterRegex === null || this._filterRegex === "")) return;
+    if (!this.isValidRegex(value)) {
+      console.error(`Invalid filter regex: ${value}`);
+      return;
+    }
+    const oldFilterRegex = this._filterRegex;
+    this._filterRegex = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneFilterRegexChanged, { oldFilterRegex, newFilterRegex: value });
+  }
+  get outputRegex() {
+    return this._outputRegex ?? null;
+  }
+  set outputRegex(value) {
+    if (value === this._outputRegex) return;
+    if ((value === void 0 || value === null || value === "") && (this._outputRegex === void 0 || this._outputRegex === null || this._outputRegex === "")) return;
+    if (!this.isValidRegex(value)) {
+      console.error(`Invalid output regex: ${value}`);
+      return;
+    }
+    const oldOutputRegex = this._outputRegex;
+    this._outputRegex = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneOutputRegexChanged, { oldOutputRegex, newOutputRegex: value });
+  }
+  get outputReplacement() {
+    return this._outputRegex ?? null;
+  }
+  set outputReplacement(value) {
+    if (value === this._outputReplacement) return;
+    if ((value === void 0 || value === null || value === "") && (this._outputReplacement === void 0 || this._outputReplacement === null || this._outputReplacement === "")) return;
+    const oldOutputReplacement = this._outputReplacement;
+    this._outputReplacement = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneOutputReplacementChanged, { oldOutputReplacement, newOutputReplacement: value });
+  }
+  get required() {
+    return this._required;
+  }
+  set required(value) {
+    if (value === this._required) return;
+    const oldRequired = this._required;
+    this._required = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneRequiredChanged, { oldRequired, newRequired: value });
+  }
+  get dataType() {
+    return this._dataType ?? null;
+  }
+  set dataType(value) {
+    if (value === this._dataType) return;
+    if ((value === void 0 || value === null || value === "") && (this._dataType === void 0 || this._dataType === null || this._dataType === "")) return;
+    const oldDataType = this._dataType;
+    this._dataType = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneDataTypeChanged, { oldDataType, newDataType: value });
+  }
+  get excludeFromOutput() {
+    return this._excludeFromOutput;
+  }
+  set excludeFromOutput(value) {
+    if (value === this._excludeFromOutput) return;
+    const oldExcludeFromOutput = this._excludeFromOutput;
+    this._excludeFromOutput = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneExcludeFromOutputChanged, { oldExcludeFromOutput, newExcludeFromOutput: value });
+  }
+  get defaultValueIfEmpty() {
+    return this._defaultValueIfEmpty ?? null;
+  }
+  set defaultValueIfEmpty(value) {
+    if (value === this._defaultValueIfEmpty) return;
+    if ((value === void 0 || value === null || value === "") && (this._defaultValueIfEmpty === void 0 || this._defaultValueIfEmpty === null || this._defaultValueIfEmpty === "")) return;
+    const oldDefaultValueIfEmpty = this._defaultValueIfEmpty;
+    this._defaultValueIfEmpty = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneDefaultValueIfEmptyChanged, { oldDefaultValueIfEmpty, newDefaultValueIfEmpty: value });
+  }
+  /* EVENT HANDLING METHODS */
+  setEngineEventSink(callback) {
+    this.engineEventSink = callback;
+  }
+  setCanvasManager(cm) {
+    this._canvasManager = cm;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneCanvasManagerSet, { canvasManager: cm });
+  }
+  emitToEngine(type, payload) {
+    this.engineEventSink?.(type, payload);
+  }
+  emitZoneEvent(type, payload) {
+    if (this.canvasManager === null) {
+      this.pendingInternalEvents.push({ type, payload });
+      return;
+    }
+    if (this.pendingInternalEvents.length > 0) {
+      let events = this.pendingInternalEvents;
+      this.pendingInternalEvents = [];
+      for (const event of events) {
+        this.handleInternalZoneEvent(event.type, event.payload);
+      }
+    }
+    this.handleInternalZoneEvent(type, payload);
+  }
+  get canvasManager() {
+    return this._canvasManager ?? null;
+  }
+  makeId() {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+      return crypto.randomUUID();
+    }
+    const template = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
+    return template.replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+  isValidRegex(pattern) {
+    if (!pattern || !pattern.trim()) return false;
+    try {
+      new RegExp(pattern);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+};
+var SimpleZone = class extends CaptureZoneBase {
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
+    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty);
+    this.type = "simple";
+    this.ocrOverlayIds = [];
+    this.lastMatchHash = "";
+  }
+  handleInternalZoneEvent(type, payload) {
+    super.handleInternalZoneEvent(type, payload);
+    if (this.canvasManager === null) {
+      this.emitToEngine(CaptureToEngineEventType.ZoneError, { zone: this, message: "Missing CanvasManager" });
+      return;
+    }
+    if (type === CaptureZoneEventType.ZoneCanvasManagerSet) {
+      this.primaryCanvasRectangleId = this.canvasManager.addRectangle(this.rect, this.name, "blue", true, true);
+    }
+    if (type === CaptureZoneEventType.ZoneHiddenChanged) {
+    }
+    if (type === CaptureZoneEventType.ZoneOcrMatchesChanged) {
+      const zoneOcrMatchesChangedPayload = payload;
+      let ocrMatches = zoneOcrMatchesChangedPayload.matches;
+      if (ocrMatches === null) {
+        return;
+      }
+      this.ocrOverlayIds.forEach((id) => this.canvasManager?.removeObject(id));
+      this.ocrOverlayIds = [];
+      let isFirstMatch = true;
+      for (const match of ocrMatches) {
+        if (match.templateZoneId != this.id) continue;
+        if (isFirstMatch) {
+          this.example = match.processedText;
+        }
+        if (!this.hidden) {
+          this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, "rgba(0, 255, 0, 0.25)", false));
+        }
+        break;
+      }
+    }
+  }
+  handleEvent(id, type, payload) {
+    if (this.id !== id) {
+      return;
+    }
+    if (type == CaptureEngineToZoneEventType.CanvasObjectPositionChanged) {
+      const objectPositionChangedPayload = payload;
+      let newPosition = objectPositionChangedPayload.newPosition;
+      this.rect = newPosition;
+      this.emitToEngine(CaptureToEngineEventType.ZonePositionChanged, { zone: this, oldPosition: this.rect, newPosition });
+    }
+    if (type == CaptureEngineToZoneEventType.CaptureOcrMatchesLoaded) {
+      const captureOcrMatchesLoadedPayload = payload;
+      let ocrMatches = captureOcrMatchesLoadedPayload.ocrMatches;
+      let thisOcrMatches = ocrMatches?.filter((e) => e.templateZoneId == this.id) ?? [];
+      let matchHash = this.hidden + "|" + thisOcrMatches.map((e) => `${e.ocrTextResultId}*${e.anchorPointPercent}`).join(",");
+      if (matchHash !== this.lastMatchHash) {
+        this.lastMatchHash = matchHash;
+        this.emitZoneEvent(CaptureZoneEventType.ZoneOcrMatchesChanged, { matches: ocrMatches });
+      }
+    }
+  }
+  update(ocrRead, ocrMatches, canvas, flags) {
+    if (!this.primaryCanvasRectangleId) {
+      this.primaryCanvasRectangleId = canvas.addRectangle(this.rect, this.name, "blue", true, true);
+    } else {
+      canvas.setName(this.primaryCanvasRectangleId, this.name);
+      canvas.setColor(this.primaryCanvasRectangleId, "blue");
+      canvas.setVisibility(this.primaryCanvasRectangleId, !this.hidden);
+      canvas.setSelectable(this.primaryCanvasRectangleId, true);
+      canvas.setResizable(this.primaryCanvasRectangleId, true);
+      canvas.setRectangleSize(this.primaryCanvasRectangleId, this.rect);
+    }
+    if (!ocrMatches || ocrMatches.length == 0) {
+      return;
+    }
+    let thisOcrMatches = ocrMatches?.filter((e) => e.templateZoneId == this.id) ?? [];
+    let matchHash = this.hidden + "|" + thisOcrMatches.map((e) => `${e.ocrTextResultId}`).join(",");
+    if (matchHash === this.lastMatchHash) {
+      return;
+    }
+    this.ocrOverlayIds.forEach((id) => canvas.removeObject(id));
+    this.lastMatchHash = matchHash;
+    let isFirstMatch = true;
+    for (const match of thisOcrMatches) {
+      if (isFirstMatch) {
+        this.example = match.processedText;
+      }
+      if (!this.hidden) {
+        this.ocrOverlayIds.push(canvas.addPolygon(match.polygonAbsolute.points, "rgba(0, 255, 0, 0.25)", false));
+      }
+      break;
+    }
+  }
+  toExternal(docWidth, docHeight) {
+    console.log(`Sim  x:${this.rect.origin.x}, y:${this.rect.origin.y}, w:${this.rect.size.width}, h:${this.rect.size.height}`);
+    return {
+      TemplateZoneId: this.id,
+      Name: this.name,
+      Type: "TemplateSimpleZone",
+      X: this.rect.origin.x / docWidth,
+      Y: this.rect.origin.y / docHeight,
+      Width: this.rect.size.width / docWidth,
+      Height: this.rect.size.height / docHeight,
+      XAbsolute: this.rect.origin.x,
+      YAbsolute: this.rect.origin.y,
+      WidthAbsolute: this.rect.size.width,
+      HeightAbsolute: this.rect.size.height,
+      RegExFilter: this.filterRegex,
+      RegExOutput: this.outputRegex,
+      RegExReplacement: this.outputReplacement,
+      Required: this.required,
+      DataType: this.dataType,
+      ExcludeFromOutput: this.excludeFromOutput,
+      DefaultValueIfEmpty: this.defaultValueIfEmpty
+    };
+  }
+};
+var AnchorChildZone = class extends SimpleZone {
+  constructor() {
+    super(...arguments);
+    this.type = "anchor-child";
+  }
+  toExternalChild(docWidth, docHeight, parentAnchor) {
+    let external = this.toExternal(docWidth, docHeight);
+    external.Type = "TemplateAnchorZoneChild";
+    const parentAnchorPercent = new import_dytools_canvas_engine.Point(parentAnchor.x / docWidth, parentAnchor.y / docHeight);
+    external.X = this.rect.origin.x / docWidth - parentAnchorPercent.x;
+    external.Y = this.rect.origin.y / docHeight - parentAnchorPercent.y;
+    external.XAbsolute = this.rect.origin.x;
+    external.YAbsolute = this.rect.origin.y;
+    return external;
+  }
+};
+var AnchorZone = class extends CaptureZoneBase {
+  constructor(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required = false, dataType = null, excludeFromOutput = false, defaultValueIfEmpty = null) {
+    super(name, rect, hidden, filterRegex, outputRegex, outputReplacement, required, dataType, excludeFromOutput, defaultValueIfEmpty);
+    this.type = "anchor";
+    //private primaryCanvasRectangleId: string | null = null;
+    this._anchorLocation = "TopLeft";
+    this._groupChildren = true;
+    this.children = [];
+    //canvasEngineIds: string[] = [];
+    this.ocrOverlayIds = [];
+    this.lastMatchHash = "";
+    this.currentAnchorPoint = null;
+    this._cycle = 50;
+    const internalArray = [];
+    const snapshotChildren = (arr) => {
+      const map = /* @__PURE__ */ new Map();
+      for (const c of arr) {
+        if (!c) continue;
+        map.set(c.id, c);
+      }
+      return map;
+    };
+    const applyChildrenDiff = (before, afterArr) => {
+      const after = /* @__PURE__ */ new Map();
+      for (const c of afterArr) {
+        if (!c) continue;
+        after.set(c.id, c);
+      }
+      for (const [id, child] of before.entries()) {
+        if (!after.has(id)) {
+          this.onChildZoneRemoved(child);
+        }
+      }
+      for (const [id, child] of after.entries()) {
+        if (!before.has(id)) {
+          this.onChildZoneAdded(child);
+        }
+      }
+    };
+    this.children = new Proxy(internalArray, {
+      set: (target, property, value) => {
+        const prop = String(property);
+        const isIndex = !Number.isNaN(Number(prop));
+        const isLength = prop === "length";
+        const before = isIndex || isLength ? snapshotChildren(target) : null;
+        const result = Reflect.set(target, property, value);
+        if (before && (isIndex || isLength)) {
+          applyChildrenDiff(before, target);
+        }
+        return result;
+      },
+      deleteProperty: (target, property) => {
+        const isIndex = !Number.isNaN(Number(property));
+        const before = isIndex ? snapshotChildren(target) : null;
+        const result = Reflect.deleteProperty(target, property);
+        if (isIndex && before) {
+          applyChildrenDiff(before, target);
+        }
+        return result;
+      }
+    });
+    Object.defineProperty(this, "children", {
+      writable: false,
+      configurable: false
+    });
+  }
+  get anchorLocation() {
+    return this._anchorLocation;
+  }
+  set anchorLocation(value) {
+    if (value === this._anchorLocation) return;
+    const oldAnchorLocation = this._anchorLocation;
+    this._anchorLocation = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneAnchorLocationChanged, { oldAnchorLocation, newAnchorLocation: value });
+  }
+  get groupChildren() {
+    return this._groupChildren;
+  }
+  set groupChildren(value) {
+    if (value === this._groupChildren) return;
+    const oldGroupChildren = this._groupChildren;
+    this._groupChildren = value;
+    this.emitZoneEvent(CaptureZoneEventType.ZoneGroupChildrenChanged, { oldGroupChildren, newGroupChildren: value });
+  }
+  handleInternalZoneEvent(type, payload) {
+    super.handleInternalZoneEvent(type, payload);
+    if (this.canvasManager === null) {
+      this.emitToEngine(CaptureToEngineEventType.ZoneError, { zone: this, message: "Missing CanvasManager" });
+      return;
+    }
+    if (type === CaptureZoneEventType.ZoneCanvasManagerSet) {
+      this.primaryCanvasRectangleId = this.canvasManager?.addRectangle(this.rect, this.name, "green", true, true);
+    }
+    if (type === CaptureZoneEventType.ZoneAnchorLocationChanged) {
+      const zoneAnchorLocationChangedPayload = payload;
+      const oldAnchorLocation = zoneAnchorLocationChangedPayload.oldAnchorLocation;
+      const newAnchorLocation = zoneAnchorLocationChangedPayload.newAnchorLocation;
+      this.emitToEngine(CaptureToEngineEventType.ZoneAnchorLocationChanged, {
+        zone: this,
+        oldAnchorLocation,
+        newAnchorLocation
+      });
+      this.emitToEngine(CaptureToEngineEventType.ZoneChanged, { zone: this, propertiesChanged: ["anchorLocation"] });
+    }
+    if (type === CaptureZoneEventType.ZoneGroupChildrenChanged) {
+      const zoneGroupChildrenChangedPayload = payload;
+      const oldGroupChildren = zoneGroupChildrenChangedPayload.oldGroupChildren;
+      const newGroupChildren = zoneGroupChildrenChangedPayload.newGroupChildren;
+      this.emitToEngine(CaptureToEngineEventType.ZoneGroupChildrenChanged, {
+        zone: this,
+        oldGroupChildren,
+        newGroupChildren
+      });
+      this.emitToEngine(CaptureToEngineEventType.ZoneChanged, { zone: this, propertiesChanged: ["groupChildren"] });
+    }
+    if (type === CaptureZoneEventType.ZoneOcrMatchesChanged) {
+      const zoneOcrMatchesChangedPayload = payload;
+      let ocrMatches = zoneOcrMatchesChangedPayload.matches;
+      if (ocrMatches === null) {
+        return;
+      }
+      this.ocrOverlayIds.forEach((id) => this.canvasManager?.removeObject(id));
+      this.ocrOverlayIds = [];
+      let isFirstMatch = true;
+      let cycle = this.cycle;
+      for (const match of ocrMatches) {
+        if (match.templateZoneId != this.id) continue;
+        if (isFirstMatch) {
+          this.example = match.processedText;
+        }
+        if (!this.hidden) {
+          this.ocrOverlayIds.push(this.canvasManager?.addPolygon(match.polygonAbsolute.points, "rgba(0, 255, 0, 0.25)", false));
+        }
+        if (match.anchorPointAbsolute) {
+          if (!this.hidden) {
+            this.ocrOverlayIds.push(this.canvasManager?.addCircle(match.anchorPointAbsolute, 2, "rgba(0, 0, 255, 0.25)", false, false));
+          }
+          if (isFirstMatch) {
+            for (const child of this.children.filter((e) => e.needsAnchorReposition)) {
+              let currentAnchorPoint = this.currentAnchorPoint ?? this.rect.origin;
+              let moveVector = match.anchorPointAbsolute.getDeltaFromPoint(currentAnchorPoint);
+              child.rect = child.rect.move(moveVector);
+              child.needsAnchorReposition = false;
+            }
+          } else {
+            for (const child of this.children) {
+              if (child.hidden == false) {
+                let vector = this.currentAnchorPoint ? match.anchorPointAbsolute.getDeltaFromPoint(this.currentAnchorPoint) : new import_dytools_canvas_engine.Vector(0, 0);
+                let color = "rgba(" + cycle + ", 128, 255, 0.5)";
+                const polygon = child.rect.move(vector).toPolygon().points;
+                this.ocrOverlayIds.push(this.canvasManager?.addPolygon(polygon, color, false));
+              }
+            }
+          }
+          if (this.currentAnchorPoint === null || isFirstMatch) {
+            this.currentAnchorPoint = match.anchorPointAbsolute;
+          }
+        }
+        isFirstMatch = false;
+      }
+    }
+  }
+  get cycle() {
+    this._cycle = (this._cycle + 64) % 255;
+    return this._cycle;
+  }
+  handleEvent(id, type, payload) {
+    if (this.id == id) {
+      if (type == CaptureEngineToZoneEventType.CanvasObjectPositionChanged) {
+        const objectPositionChangedPayload = payload;
+        let newPosition = objectPositionChangedPayload.newPosition;
+        this.rect = newPosition;
+        this.emitToEngine(CaptureToEngineEventType.ZonePositionChanged, { zone: this, oldPosition: this.rect, newPosition });
+      }
+    } else {
+      for (const child of this.children) {
+        child.handleEvent?.(id, type, payload);
+      }
+      let wasChild = this.children.some((e) => e.id == id);
+      if (wasChild) {
+        this.lastMatchHash = "";
+        this.emitToEngine(CaptureToEngineEventType.ZoneChanged, { zone: this, propertiesChanged: ["anchorLocation", "groupChildren"] });
+      }
+    }
+    if (type == CaptureEngineToZoneEventType.CaptureOcrMatchesLoaded) {
+      const captureOcrMatchesLoadedPayload = payload;
+      let ocrMatches = captureOcrMatchesLoadedPayload.ocrMatches;
+      let thisOcrMatches = ocrMatches?.filter((e) => e.templateZoneId == this.id) ?? [];
+      let matchHash = this.groupChildren + "|" + this.anchorLocation + "|" + this.hidden + "|" + thisOcrMatches.map((e) => `${e.ocrTextResultId}*${e.anchorPointPercent?.x}*${e.anchorPointPercent?.y}`).join(",") + "|" + this.children.map((e) => `${e.id}*${e.hidden}*${e.rect?.origin.x}*${e.rect?.origin.y}*${e.rect?.size.width}*${e.rect?.size.height}`).join(",");
+      if (matchHash !== this.lastMatchHash) {
+        this.lastMatchHash = matchHash;
+        this.emitZoneEvent(CaptureZoneEventType.ZoneOcrMatchesChanged, { matches: ocrMatches });
+      } else {
+      }
+    }
+  }
+  update(ocrRead, ocrMatches, canvas, flags) {
+    if (!this.primaryCanvasRectangleId) {
+      this.primaryCanvasRectangleId = canvas.addRectangle(this.rect, this.name, "green", true, true);
+    } else {
+      canvas.setName(this.primaryCanvasRectangleId, this.name);
+      canvas.setColor(this.primaryCanvasRectangleId, "green");
+      canvas.setVisibility(this.primaryCanvasRectangleId, !this.hidden);
+      canvas.setSelectable(this.primaryCanvasRectangleId, true);
+      canvas.setResizable(this.primaryCanvasRectangleId, true);
+      canvas.setRectangleSize(this.primaryCanvasRectangleId, this.rect);
+    }
+    let thisOcrMatches = ocrMatches?.filter((e) => e.templateZoneId == this.id) ?? [];
+    let matchHash = this.hidden + "|" + thisOcrMatches.map((e) => `${e.ocrTextResultId}`).join(",") + "|" + this.children.map((e) => `${e.id}*${e.hidden}`).join(",");
+    if (matchHash === this.lastMatchHash) {
+      return;
+    }
+    this.ocrOverlayIds.forEach((id) => canvas.removeObject(id));
+    this.lastMatchHash = matchHash;
+    let isFirstMatch = true;
+    for (const match of thisOcrMatches) {
+      if (isFirstMatch) {
+        this.example = match.processedText;
+      }
+      if (!this.hidden) {
+        this.ocrOverlayIds.push(canvas.addPolygon(match.polygonAbsolute.points, "rgba(0, 255, 0, 0.25)", false));
+      }
+      if (match.anchorPointAbsolute) {
+        if (!this.hidden) {
+          this.ocrOverlayIds.push(canvas.addCircle(match.anchorPointAbsolute, 2, "rgba(0, 0, 255, 0.25)", false, false));
+        }
+        if (!isFirstMatch) {
+          for (const child of this.children) {
+            if (child.hidden == false) {
+              let vector = this.currentAnchorPoint ? match.anchorPointAbsolute.getDeltaFromPoint(this.currentAnchorPoint) : new import_dytools_canvas_engine.Vector(0, 0);
+              let color = "rgba(128, 128, 255, 0.5)";
+              const polygon = child.rect.move(vector).toPolygon().points;
+              this.ocrOverlayIds.push(canvas.addPolygon(polygon, color, false));
+            }
+          }
+        }
+        if (this.currentAnchorPoint === null || isFirstMatch) {
+          this.currentAnchorPoint = match.anchorPointAbsolute;
+        }
+      }
+      isFirstMatch = false;
+    }
+  }
+  onChildZoneAdded(childZone) {
+    this.emitToEngine(CaptureToEngineEventType.ZoneChildZoneAdded, { parentZone: this, newChildZone: childZone });
+  }
+  onChildZoneRemoved(childZone) {
+    this.emitToEngine(CaptureToEngineEventType.ZoneChildZoneRemoved, { parentZone: this, removedChildZone: childZone });
+  }
+  toExternal(docWidth, docHeight) {
+    return {
+      TemplateZoneId: this.id,
+      Name: this.name,
+      Type: "TemplateAnchorZone",
+      X: this.rect.origin.x / docWidth,
+      Y: this.rect.origin.y / docHeight,
+      Width: this.rect.size.width / docWidth,
+      Height: this.rect.size.height / docHeight,
+      XAbsolute: this.rect.origin.x,
+      YAbsolute: this.rect.origin.y,
+      WidthAbsolute: this.rect.size.width,
+      HeightAbsolute: this.rect.size.height,
+      RegExFilter: this.filterRegex,
+      RegExOutput: this.outputRegex,
+      RegExReplacement: this.outputReplacement,
+      Required: this.required,
+      DataType: this.dataType,
+      ExcludeFromOutput: this.excludeFromOutput,
+      DefaultValueIfEmpty: this.defaultValueIfEmpty,
+      AnchorLocation: this.anchorLocation,
+      AnchorLocationXAbsoluteHint: this.currentAnchorPoint?.x,
+      AnchorLocationYAbsoluteHint: this.currentAnchorPoint?.y,
+      GroupChildrenInSubRecord: this.groupChildren,
+      ChildZones: this.children.map((e) => e instanceof AnchorChildZone ? e.toExternalChild(docWidth, docHeight, this.currentAnchorPoint || this.rect.origin) : e.toExternal(docWidth, docHeight))
+    };
+  }
+};
+var DefaultZoneCanvasManager = class {
+  constructor(engine, zoneId) {
+    this.engine = engine;
+    this.zoneId = zoneId;
+  }
+  makeId(id) {
+    return `${this.zoneId}|${id}`;
+  }
+  makeUuid() {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+      return crypto.randomUUID();
+    }
+    const template = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
+    return template.replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+  clearAll() {
+    let allObjects = this.engine.getAllObjects();
+    for (const obj of allObjects) {
+      if (obj.id.startsWith(this.zoneId + "|")) {
+        this.engine.removeObject(obj.id);
+      }
+    }
+  }
+  addRectangle(rect, name, color, isResizable, isSelectable) {
+    const extId = this.makeUuid();
+    const id = this.makeId(extId);
+    const obj = new import_dytools_canvas_engine.Zone(id, rect, color, isSelectable, isResizable, isResizable);
+    if (name != null) {
+      obj.name = name;
+      obj.showName = true;
+    }
+    this.engine.addObject(obj);
+    return extId;
+  }
+  addPolygon(points, color, isSelectable) {
+    const extId = this.makeUuid();
+    const id = this.makeId(extId);
+    const obj = new import_dytools_canvas_engine.PolygonObject(id, points, color, isSelectable, false);
+    this.engine.addObject(obj);
+    return extId;
+  }
+  addCircle(center, radius, color, isResizable, isSelectable) {
+    const extId = this.makeUuid();
+    const id = this.makeId(extId);
+    const obj = new import_dytools_canvas_engine.CircleObject(id, center, radius, color, isSelectable, isResizable);
+    this.engine.addObject(obj);
+    return extId;
+  }
+  setName(id, name) {
+    let canvasId = this.makeId(id);
+    const obj = this.engine.getObject(canvasId);
+    if (obj && obj instanceof import_dytools_canvas_engine.Zone) {
+      obj.name = name ?? "";
+      obj.showName = !!name;
+      this.engine.redraw();
+    }
+  }
+  setColor(id, color) {
+    let canvasId = this.makeId(id);
+    this.engine.setObjectColor(canvasId, color);
+  }
+  setSelectable(id, isSelectable) {
+    let canvasId = this.makeId(id);
+    const obj = this.engine.getObject(canvasId);
+    if (obj) {
+      this.engine.updateObjectSelectability(canvasId, isSelectable);
+    }
+  }
+  setResizable(id, isResizable) {
+    let canvasId = this.makeId(id);
+    const obj = this.engine.getObject(canvasId);
+    if (obj && obj instanceof import_dytools_canvas_engine.Zone) {
+      this.engine.updateObjectResizeability(canvasId, isResizable);
+      this.engine.updateObjectMovability(canvasId, isResizable);
+    }
+  }
+  setRectangleSize(id, rect) {
+    let canvasId = this.makeId(id);
+    const obj = this.engine.getObject(canvasId);
+    if (obj && obj instanceof import_dytools_canvas_engine.Zone) {
+      this.engine.moveObjectToPoint(obj, rect.origin);
+      this.engine.resizeObjectToSize(obj, rect.size);
+    }
+  }
+  //
+  // setCircleSize(id: string, center: Point, radius: number): void {
+  //     let canvasId = this.makeId(id);
+  //     const obj = this.engine.getObject(canvasId);
+  //     if (obj && obj instanceof CircleObject) {
+  //         obj.center = center;
+  //         obj.radius = radius;
+  //         this.engine.redraw();
+  //     }
+  // }
+  setVisibility(id, isVisible) {
+    let canvasId = this.makeId(id);
+    const obj = this.engine.getObject(canvasId);
+    if (obj) {
+      this.engine.updateObjectVisibility(canvasId, isVisible);
+    }
+  }
+  removeObject(id) {
+    let canvasId = this.makeId(id);
+    this.engine.removeObject(canvasId);
+  }
+};
+var CaptureEngine = class {
+  constructor(selector, serverApi) {
+    this.listeners = {};
+    // Template properties
+    this._name = "Untitled";
+    this.zones = [];
+    // Zone+OCR properties
+    this.ocrRead = null;
+    this.zoneOcrMatches = [];
+    this.ocrOverlayIds = [];
+    // TODO: im not sure out this.
+    this.flags = /* @__PURE__ */ new Map();
+    // key = object id, value = set of flags
+    // Refactor properties
+    this.zoneCounter = 1;
+    /* --- INTERNAL ENGINE EVENT METHODS --- */
+    // These are used for messages to the engine itself (e.g. from a zone if the zone mutated.)
+    this.refreshMatches = this.createMeteredFn(async () => {
+      if (!this.serverApi || !this.ocrRead) return;
+      const matches = await this.getZoneMatchesFromServer();
+      this.setOcrMatchesSnapshot(matches);
+    }, 1e3);
+    this.engine = new import_dytools_canvas_engine.CanvasEngine(selector, {});
+    if (serverApi) {
+      this.setServerApi(serverApi);
+    }
+    const internalArray = [];
+    const snapshotChildren = (arr) => {
+      const map = /* @__PURE__ */ new Map();
+      for (const c of arr) {
+        if (!c) continue;
+        map.set(c.id, c);
+      }
+      return map;
+    };
+    const applyChildrenDiff = (before, afterArr) => {
+      const after = /* @__PURE__ */ new Map();
+      for (const c of afterArr) {
+        if (!c) continue;
+        after.set(c.id, c);
+      }
+      for (const [id, child] of before.entries()) {
+        if (!after.has(id)) {
+          this.onZoneRemoved(child);
+        }
+      }
+      for (const [id, child] of after.entries()) {
+        if (!before.has(id)) {
+          this.onZoneAdded(child);
+        }
+      }
+    };
+    this.zones = new Proxy(internalArray, {
+      set: (target, property, value) => {
+        const prop = String(property);
+        const isIndex = !Number.isNaN(Number(prop));
+        const isLength = prop === "length";
+        const before = isIndex || isLength ? snapshotChildren(target) : null;
+        const result = Reflect.set(target, property, value);
+        if (before && (isIndex || isLength)) {
+          applyChildrenDiff(before, target);
+        }
+        return result;
+      },
+      deleteProperty: (target, property) => {
+        const isIndex = !Number.isNaN(Number(property));
+        const before = isIndex ? snapshotChildren(target) : null;
+        const result = Reflect.deleteProperty(target, property);
+        if (isIndex && before) {
+          applyChildrenDiff(before, target);
+        }
+        return result;
+      }
+    });
+    Object.defineProperty(this, "zones", {
+      writable: false,
+      configurable: false
+    });
+    this.setupEngine();
+  }
+  // This is used to attach event handlers to the canvas engine (this.engine)
+  // All zone-related events (like position changed, resized, etc.) will be sent to the zones and not externally.
+  // All zones will listen to these events and update their internal state accordingly and send the completed event
+  // to the CaptureEngine.
+  setupEngine() {
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.ObjectPositionChanged, ({ object, oldPosition, newPosition }) => {
+      let zone = this.getZoneByCanvasEngineId(object.id);
+      if (zone) {
+        this.emitToZone(zone.id, CaptureEngineToZoneEventType.CanvasObjectPositionChanged, { object, oldPosition, newPosition });
+      }
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.ObjectSelected, ({ object }) => {
+      let zone = this.getZoneByCanvasEngineId(object.id);
+      if (zone) {
+        this.setFlag(zone, "selected", false);
+      }
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.ObjectDeselected, ({ object }) => {
+      let zone = this.getZoneByCanvasEngineId(object.id);
+      if (zone) {
+        this.clearFlag(zone, "selected", false);
+      }
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.ViewportChanged, ({ newPan, newZoom, oldPan, oldZoom }) => {
+      this.emitExternal(CapturePublicEventType.ViewportChanged, { newPan, newZoom, oldPan, oldZoom });
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.DrawingCompleted, ({ rect, maxZ }) => {
+      this.emitExternal(CapturePublicEventType.DrawingCompleted, { rect, maxZ });
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.EngineStarted, () => {
+      this.emitExternal(CapturePublicEventType.CaptureStarted, {});
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.EngineError, ({ error, message }) => {
+      this.emitExternal(CapturePublicEventType.CaptureError, { error, message });
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.EngineBackgroundChanged, ({ newImage, newWidth, newHeight, oldWidth, oldHeight }) => {
+      this.emitExternal(CapturePublicEventType.CaptureBackgroundChanged, { newImage: this.engine.documentBlob, newWidth, newHeight, oldWidth, oldHeight });
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.EngineRenderStarted, () => {
+      this.emitExternal(CapturePublicEventType.CaptureRenderStarted, {});
+      this.doRender();
+    });
+    this.engine.on(import_dytools_canvas_engine.EngineEventType.EngineRenderCompleted, () => {
+      this.emitExternal(CapturePublicEventType.CaptureRenderCompleted, {});
+    });
+  }
+  /* --- PUBLIC/EXTERNAL EVENT METHODS --- */
+  on(event, handler, options) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    if (options?.once) {
+      const onceWrapper = (data) => {
+        this.off(event, onceWrapper);
+        handler(data);
+      };
+      this.listeners[event].push(onceWrapper);
+    } else {
+      this.listeners[event].push(handler);
+    }
+  }
+  off(event, handler) {
+    const handlers = this.listeners[event];
+    if (!handlers) {
+      return;
+    }
+    const idx = handlers.indexOf(handler);
+    if (idx !== -1) {
+      handlers.splice(idx, 1);
+    }
+  }
+  // Only the engine should emit external events
+  emitExternal(type, payload) {
+    const handlers = this.listeners[type];
+    handlers?.forEach((fn) => fn(payload));
+  }
+  /* --- INTERNAL ZONE EVENT METHODS --- */
+  // These are used for messages to a zone. We send all events to all zones, so if a zone wants to monitor it's
+  // children or another zone, it is able to.
+  emitToZone(id, type, payload) {
+    for (const zone of this.zones) {
+      zone.handleEvent?.(id, type, payload);
+    }
+  }
+  engineEventHandler(type, payload) {
+    if (type === CaptureToEngineEventType.ZoneChildZoneAdded) {
+      const zoneChildZoneAddedPayload = payload;
+      this.onZoneAdded(zoneChildZoneAddedPayload.newChildZone, zoneChildZoneAddedPayload.parentZone);
+    }
+    if (type === CaptureToEngineEventType.ZoneChildZoneRemoved) {
+      const zoneChildZoneRemovedPayload = payload;
+      this.onZoneRemoved(zoneChildZoneRemovedPayload.removedChildZone, zoneChildZoneRemovedPayload.parentZone);
+    }
+    if (type === CaptureToEngineEventType.ZoneNameChanged) {
+      const zoneNameChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneNameChangedPayload.zone, propertiesChanged: ["name"] });
+    }
+    if (type === CaptureToEngineEventType.ZoneHiddenChanged) {
+      const zoneHiddenChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneHiddenChangedPayload.zone, propertiesChanged: ["hidden"] });
+    }
+    if (type === CaptureToEngineEventType.ZoneExampleChanged) {
+      const zoneExampleChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneExampleChangedPayload.zone, propertiesChanged: ["example"] });
+    }
+    if (type === CaptureToEngineEventType.ZonePositionChanged) {
+      const zonePositionChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zonePositionChangedPayload.zone, propertiesChanged: ["rect"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+      this.refreshMatches();
+    }
+    if (type === CaptureToEngineEventType.ZoneFilterRegexChanged) {
+      const zoneFilterRegexChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneFilterRegexChangedPayload.zone, propertiesChanged: ["filterRegex"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+      this.refreshMatches();
+    }
+    if (type === CaptureToEngineEventType.ZoneOutputRegexChanged) {
+      const zoneOutputRegexChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneOutputRegexChangedPayload.zone, propertiesChanged: ["outputRegex"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+      this.refreshMatches();
+    }
+    if (type === CaptureToEngineEventType.ZoneOutputReplacementChanged) {
+      const zoneOutputReplacementChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneOutputReplacementChangedPayload.zone, propertiesChanged: ["outputReplacement"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+      this.refreshMatches();
+    }
+    if (type === CaptureToEngineEventType.ZoneRequiredChanged) {
+      const zoneRequiredChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneRequiredChangedPayload.zone, propertiesChanged: ["required"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+    }
+    if (type === CaptureToEngineEventType.ZoneDataTypeChanged) {
+      const zoneDataTypeChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneDataTypeChangedPayload.zone, propertiesChanged: ["dataType"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+    }
+    if (type === CaptureToEngineEventType.ZoneExcludeFromOutputChanged) {
+      const zoneExcludeFromOutputChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneExcludeFromOutputChangedPayload.zone, propertiesChanged: ["excludeFromOutput"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+    }
+    if (type === CaptureToEngineEventType.ZoneDefaultValueIfEmptyChanged) {
+      const zoneDefaultValueIfEmptyChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneDefaultValueIfEmptyChangedPayload.zone, propertiesChanged: ["defaultValueIfEmpty"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+    }
+    if (type === CaptureToEngineEventType.ZoneAnchorLocationChanged) {
+      const zoneAnchorLocationChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneAnchorLocationChangedPayload.zone, propertiesChanged: ["anchorLocation"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+      this.refreshMatches();
+    }
+    if (type === CaptureToEngineEventType.ZoneGroupChildrenChanged) {
+      const zoneGroupChildrenChangedPayload = payload;
+      this.emitExternal(CapturePublicEventType.ZoneChanged, { zone: zoneGroupChildrenChangedPayload.zone, propertiesChanged: ["groupChildren"] });
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+      this.refreshMatches();
+    }
+  }
+  onZoneAdded(zone, parentZone, excludeOcrMatches = false) {
+    zone.setEngineEventSink?.(
+      (type, payload) => this.engineEventHandler(type, payload)
+    );
+    const canvasManager = new DefaultZoneCanvasManager(this.engine, zone.id);
+    zone.setCanvasManager?.(canvasManager);
+    this.emitExternal(CapturePublicEventType.ZoneAdded, { newZone: zone, parentZone, isChildZone: parentZone !== void 0 });
+    if (zone.children) {
+      for (const child of zone.children) {
+        this.onZoneAdded(child, zone, true);
+      }
+    }
+    if (!excludeOcrMatches) {
+      this.refreshMatches();
+    }
+  }
+  onZoneRemoved(zone, parentZone) {
+    zone.setEngineEventSink?.();
+    this.flags.delete(zone.id);
+    this.emitExternal(CapturePublicEventType.ZoneRemoved, { id: zone.id, removedZone: zone, parentZone, isChildZone: parentZone !== void 0 });
+    this.refreshMatches();
+  }
+  /* --- ENGINE HELPERS --- */
+  // This will return a TemplateZoneBase for a given canvas engine id.
+  getZoneByCanvasEngineId(id) {
+    const parts = id.split("|");
+    if (parts.length !== 2) return void 0;
+    const zoneId = parts[0];
+    return this.allZonesFlattened.find((z) => z.id === zoneId);
+  }
+  doRender() {
+    for (const zone of this.allZonesFlattened) {
+    }
+  }
+  // ---- metered wrapper ----
+  createMeteredFn(fn, minIntervalMs = 1e3) {
+    let lastExec = 0;
+    let running = false;
+    let queued = false;
+    const invoke = () => {
+      const now = Date.now();
+      const elapsed = now - lastExec;
+      if (running) {
+        queued = true;
+        return;
+      }
+      if (elapsed < minIntervalMs) {
+        if (!queued) {
+          queued = true;
+          const delay = minIntervalMs - elapsed;
+          setTimeout(() => {
+            queued = false;
+            invoke();
+          }, delay);
+        }
+        return;
+      }
+      running = true;
+      lastExec = now;
+      Promise.resolve(fn()).finally(() => {
+        running = false;
+        if (queued) {
+          queued = false;
+          invoke();
+        }
+      });
+    };
+    return invoke;
+  }
+  /* --- TEMPLATE METHODS --- */
+  loadExternalTemplate(external, reapplyZonePositioning) {
+    const docWidth = reapplyZonePositioning ? this.width : external.DocumentWidth ?? this.width;
+    const docHeight = reapplyZonePositioning ? this.height : external.DocumentHeight ?? this.height;
+    if (docWidth != this.width) {
+      console.warn("Document width mismatch, resizing canvas to match. Template width: ", docWidth, "Canvas width: ", this.width);
+    }
+    if (docHeight != this.height) {
+      console.warn("Document height mismatch, resizing canvas to match. Template height: ", docHeight, "Canvas height: ", this.height);
+    }
+    this._name = external.Name ?? "Untitled";
+    for (const z of this.allZonesFlattened) {
+      z.setEngineEventSink?.();
+      z.setCanvasManager?.();
+    }
+    this.engine.getAllObjects().forEach((e) => this.engine.removeObject(e));
+    this.zones.length = 0;
+    for (const z of external.Zones) {
+      const zone = this.zoneFromExternal(z, docWidth, docHeight);
+      this.zones.push(zone);
+    }
+    this.refreshMatches();
+  }
+  getExternalTemplate() {
+    const docWidth = this.width;
+    const docHeight = this.height;
+    this.getOcrMatchesSnapshot();
+    console.log(this.zones.filter((e) => e.name == "Anchor 1").map((e) => {
+      let extParent = e.toExternal(docWidth, docHeight);
+      if (extParent.ChildZones && extParent.ChildZones.length > 0) {
+        let ext = extParent.ChildZones[0];
+        return { x: ext.X, y: ext.Y, width: ext.Width, height: ext.Height };
+      } else {
+        return "no child";
+      }
+    }));
+    return {
+      Name: this._name ?? "Untitled",
+      DocumentWidth: docWidth,
+      DocumentHeight: docHeight,
+      Zones: this.zones.map((e) => e.toExternal(docWidth, docHeight))
+    };
+  }
+  // --- in CaptureEngine.ts (or a new file) ---
+  rectFromExternal(z, docW, docH) {
+    return new import_dytools_canvas_engine.Rectangle(
+      z.X * docW,
+      z.Y * docH,
+      z.Width * docW,
+      z.Height * docH
+    );
+  }
+  zoneFromExternal(z, docW, docH, parentAnchorAbs) {
+    if (z.Type === "TemplateAnchorZone" && (!parentAnchorAbs && z.ChildZones)) {
+      const anchor = new AnchorZone(
+        z.Name,
+        this.rectFromExternal(z, docW, docH),
+        false,
+        z.RegExFilter ?? null,
+        z.RegExOutput ?? null,
+        z.RegExReplacement ?? null,
+        z.Required ?? false,
+        z.DataType ?? null,
+        z.ExcludeFromOutput ?? false,
+        z.DefaultValueIfEmpty ?? null
+      );
+      if (z.AnchorLocation) anchor.anchorLocation = z.AnchorLocation;
+      if (z.GroupChildrenInSubRecord !== void 0) anchor.groupChildren = z.GroupChildrenInSubRecord;
+      const anchorPoint = anchor.rect.origin;
+      for (const childDto of z.ChildZones ?? []) {
+        const child = this.zoneFromExternal(childDto, docW, docH, anchorPoint);
+        child.needsAnchorReposition = true;
+        anchor.children.push(child);
+      }
+      return anchor;
+    }
+    if (parentAnchorAbs) {
+      const absX = parentAnchorAbs.x / docW + z.X;
+      const absY = parentAnchorAbs.y / docH + z.Y;
+      const childRect = new import_dytools_canvas_engine.Rectangle(
+        absX * docW,
+        absY * docH,
+        z.Width * docW,
+        z.Height * docH
+      );
+      return new AnchorChildZone(
+        z.Name,
+        childRect,
+        false,
+        z.RegExFilter ?? null,
+        z.RegExOutput ?? null,
+        z.RegExReplacement ?? null,
+        z.Required ?? false,
+        z.DataType ?? null,
+        z.ExcludeFromOutput ?? false,
+        z.DefaultValueIfEmpty ?? null
+      );
+    }
+    return new SimpleZone(
+      z.Name,
+      this.rectFromExternal(z, docW, docH),
+      false,
+      z.RegExFilter ?? null,
+      z.RegExOutput ?? null,
+      z.RegExReplacement ?? null,
+      z.Required ?? false,
+      z.DataType ?? null,
+      z.ExcludeFromOutput ?? false,
+      z.DefaultValueIfEmpty ?? null
+    );
+  }
+  get name() {
+    return this._name;
+  }
+  set name(value) {
+    if (this._name === value) return;
+    this._name = value;
+    this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+  }
+  /* --- ZONE METHODS --- */
+  get allZonesFlattened() {
+    return this.zones.map((e) => [e].concat(e.children ?? [])).flat();
+  }
+  getZoneById(id) {
+    return this.allZonesFlattened.find((z) => z.id === id);
+  }
+  /**
+   * Add a new simple zone
+   * @param bounds Rectangle
+   */
+  addSimpleZone(bounds) {
+    let newZone = new SimpleZone("Test1", bounds, false, null, null, null);
+    this.zones.push(newZone);
+  }
+  /**
+   * Add a new anchor zone
+   * @param bounds Rectangle
+   */
+  addAnchorZone(bounds) {
+    let newZone = new AnchorZone(`Anchor ${this.zoneCounter++}`, bounds, false, null, null, null);
+    this.zones.push(newZone);
+  }
+  /**
+   * Add a child zone linked to an anchor
+   * @param anchorId string
+   * @param bounds Rectangle
+   */
+  addAnchorChildZone(anchorId, bounds) {
+    const anchorZone = this.zones.find((z) => z.id === anchorId);
+    if (!anchorZone) return;
+    let newZone = new AnchorChildZone(`Child ${this.zoneCounter++}`, bounds, false, null, null, null);
+    if (!anchorZone.children) anchorZone.children = [];
+    anchorZone.children.push(newZone);
+  }
+  /**
+   * Remove a zone and its canvas representation by id
+   * @param id string
+   */
+  removeZoneById(id) {
+    const idx = this.zones.findIndex((z) => z.id === id);
+    if (idx === -1) {
+      let found = false;
+      for (const zone of this.zones) {
+        if (!zone.children) {
+          continue;
+        }
+        const childIdx = zone.children.findIndex((z) => z.id === id);
+        if (childIdx === -1) {
+          continue;
+        }
+        found = true;
+        let childZone = zone.children[childIdx];
+        childZone.setEngineEventSink?.();
+        childZone.setCanvasManager?.();
+        this.engine.getAllObjects().filter((e) => e.id.startsWith(childZone.id)).forEach((e) => this.engine.removeObject(e));
+        zone.children.splice(idx, 1);
+      }
+      return found;
+    }
+    let thisZone = this.zones[idx];
+    thisZone.setEngineEventSink?.();
+    thisZone.setCanvasManager?.();
+    this.engine.getAllObjects().filter((e) => e.id.startsWith(thisZone.id)).forEach((e) => this.engine.removeObject(e));
+    this.zones.splice(idx, 1);
+    return true;
+  }
+  updateZone(id, patch) {
+    const zone = this.allZonesFlattened.find((z) => z.id === id);
+    if (!zone) {
+      return;
+    }
+    if (patch.name !== void 0) {
+      zone.name = patch.name;
+    }
+    if (patch.hidden !== void 0) {
+      zone.hidden = patch.hidden;
+    }
+    if (patch.required !== void 0) {
+      zone.required = patch.required;
+    }
+    if (patch.dataType !== void 0) {
+      zone.dataType = patch.dataType;
+    }
+    if (patch.defaultValueIfEmpty !== void 0) {
+      zone.defaultValueIfEmpty = patch.defaultValueIfEmpty;
+    }
+    if (patch.excludeFromOutput !== void 0) {
+      zone.excludeFromOutput = patch.excludeFromOutput;
+    }
+    if (patch.filterRegex !== void 0) {
+      zone.filterRegex = patch.filterRegex;
+    }
+    if (patch.outputRegex !== void 0) {
+      zone.outputRegex = patch.outputRegex;
+    }
+    if (patch.outputReplacement !== void 0) {
+      zone.outputReplacement = patch.outputReplacement;
+    }
+    if (patch.anchorLocation !== void 0) {
+      zone.anchorLocation = patch.anchorLocation;
+    }
+    if (patch.groupChildren !== void 0) {
+      zone.groupChildren = patch.groupChildren;
+    }
+    if (patch.rect) {
+      const b = patch.rect;
+      if (b instanceof import_dytools_canvas_engine.Rectangle) {
+        zone.rect = b.clone();
+      } else if (b.origin && b.size) {
+        zone.rect = new import_dytools_canvas_engine.Rectangle(
+          b.origin.x,
+          b.origin.y,
+          b.size.width,
+          b.size.height
+        );
+      }
+    }
+  }
+  /* --- FLAG MANAGEMENT --- */
+  setFlag(objOrId, flag, emitToCanvasEngine) {
+    const obj = typeof objOrId === "string" ? this.allZonesFlattened.find((o) => o.id === objOrId) : objOrId;
+    if (!obj) throw new Error(`Zone not found: ${objOrId}`);
+    const id = typeof objOrId === "string" ? objOrId : objOrId.id;
+    if (!this.flags.has(id)) this.flags.set(id, /* @__PURE__ */ new Set());
+    let currentFlags = this.flags.get(id);
+    if (currentFlags.has(flag)) {
+      return;
+    }
+    currentFlags.add(flag);
+    this.emitToZone(id, CaptureEngineToZoneEventType.ZoneFlagsAdded, {
+      addedFlags: [flag],
+      currentFlags: [...this.flags.get(id)]
+    });
+    this.emitExternal(CapturePublicEventType.ZoneFlagsAdded, {
+      zone: obj,
+      addedFlags: [flag],
+      currentFlags: [...this.flags.get(id)]
+    });
+    if (flag === "selected") {
+      this.emitToZone(id, CaptureEngineToZoneEventType.ZoneSelected, { zone: obj });
+      this.emitExternal(CapturePublicEventType.ZoneSelected, { zone: obj });
+      if (emitToCanvasEngine) {
+        this.engine.getAllObjects().filter((e) => e.id.startsWith(id) && e.selectable).forEach((e) => this.engine.setFlag(e.id, flag));
+      }
+    }
+  }
+  clearFlag(objOrId, flag, emitToCanvasEngine) {
+    const obj = typeof objOrId === "string" ? this.allZonesFlattened.find((o) => o.id === objOrId) : objOrId;
+    if (!obj) throw new Error(`Zone not found: ${objOrId}`);
+    const id = typeof objOrId === "string" ? objOrId : objOrId.id;
+    this.flags.get(id)?.delete(flag);
+    this.emitToZone(id, CaptureEngineToZoneEventType.ZoneFlagsRemoved, {
+      removedFlags: [flag],
+      currentFlags: [...this.flags.get(id)]
+    });
+    this.emitExternal(CapturePublicEventType.ZoneFlagsRemoved, {
+      zone: obj,
+      removedFlags: [flag],
+      currentFlags: [...this.flags.get(id) || []]
+    });
+    if (flag === "selected") {
+      this.emitToZone(id, CaptureEngineToZoneEventType.ZoneDeselected, { zone: obj });
+      this.emitExternal(CapturePublicEventType.ZoneDeselected, { zone: obj });
+      if (flag === "selected") {
+        this.emitToZone(id, CaptureEngineToZoneEventType.ZoneSelected, { zone: obj });
+        this.emitExternal(CapturePublicEventType.ZoneSelected, { zone: obj });
+        if (emitToCanvasEngine) {
+          this.engine.getAllObjects().filter((e) => e.id.startsWith(id) && e.selectable).forEach((e) => this.engine.clearFlag(e.id, flag));
+        }
+      }
+    }
+  }
+  // noinspection JSUnusedGlobalSymbols
+  hasFlag(objOrId, flag) {
+    const id = typeof objOrId === "string" ? objOrId : objOrId.id;
+    return this.flags.get(id)?.has(flag) ?? false;
+  }
+  // noinspection JSUnusedGlobalSymbols
+  clearAllFlags(flag) {
+    for (const [id, flags] of this.flags.entries()) {
+      const obj = this.allZonesFlattened.find((o) => o.id === id) ?? null;
+      if (!obj) throw new Error(`Zone not found: ${id}`);
+      flags.delete(flag);
+      this.emitToZone(id, CaptureEngineToZoneEventType.ZoneFlagsRemoved, {
+        removedFlags: [flag],
+        currentFlags: [...this.flags.get(id)]
+      });
+      this.emitExternal(CapturePublicEventType.ZoneFlagsRemoved, {
+        zone: obj,
+        removedFlags: [flag],
+        currentFlags: [...this.flags.get(id) || []]
+      });
+      if (flag === "selected") {
+        this.emitToZone(id, CaptureEngineToZoneEventType.ZoneDeselected, { zone: obj });
+        this.emitExternal(CapturePublicEventType.ZoneDeselected, { zone: obj });
+      }
+    }
+  }
+  getObjectsWithFlag(flag) {
+    return [...this.flags.entries()].filter(([_, flags]) => flags.has(flag)).map(([id]) => this.allZonesFlattened.find((o) => o.id === id)).filter((z) => z !== void 0);
+  }
+  /* --- SELECTION MANAGEMENT --- */
+  setSelectedZones(objOrIds) {
+    let objs = objOrIds.map((objOrId) => typeof objOrId === "string" ? this.allZonesFlattened.find((o) => o.id === objOrId) : objOrId);
+    const currentSelected = this.getSelectedZones();
+    const toDeselect = currentSelected.filter((o) => !objs.includes(o));
+    const toSelect = objs.filter((o) => !currentSelected.includes(o));
+    toDeselect.forEach((o) => this.clearFlag(o, "selected", true));
+    toSelect.forEach((o) => this.setFlag(o, "selected", true));
+  }
+  getSelectedZones() {
+    return this.getObjectsWithFlag("selected");
+  }
+  /* --- ENGINE API --- */
+  // noinspection JSUnusedGlobalSymbols
+  get pan() {
+    return this.engine.pan;
+  }
+  get zoom() {
+    return this.engine.zoom;
+  }
+  setZoom(zoom, center) {
+    this.engine.setZoom(zoom, center);
+  }
+  // noinspection JSUnusedGlobalSymbols
+  setPan(x, y) {
+    this.engine.setPan(x, y);
+  }
+  get width() {
+    return this.engine.width;
+  }
+  get height() {
+    return this.engine.height;
+  }
+  async setBackgroundImage(imageOrUrl) {
+    this.hideOcr();
+    let preWidth = this.width;
+    let preHeight = this.height;
+    await this.engine.setBackgroundImage(imageOrUrl);
+    if (preWidth !== this.width || preHeight !== this.height) {
+      this.emitExternal(CapturePublicEventType.TemplateChanged, {});
+    }
+  }
+  switchMode(name) {
+    this.engine.switchMode(name);
+  }
+  get mode() {
+    return this.engine.mode;
+  }
+  /* --- OCR --- */
+  /**
+   * Render the current OCR snapshot as non-interactive polygons on the canvas.
+   */
+  showOcr() {
+    if (!this.ocrRead || !this.ocrRead.lines || this.ocrRead.lines.length === 0) {
+      return;
+    }
+    this.hideOcr();
+    const allObjects = this.engine.getAllObjects();
+    let maxZ = 0;
+    for (const obj of allObjects) {
+      const z = obj.zIndex ?? 0;
+      if (z > maxZ) {
+        maxZ = z;
+      }
+    }
+    let currentZ = maxZ + 1;
+    for (const word of this.ocrRead.lines) {
+      const pts = word.polygonPercent.points.map(
+        (p) => (
+          //(typeof (p as any).clone === 'function')
+          //? (p as any).clone() :
+          new import_dytools_canvas_engine.Point(p.x * this.width, p.y * this.height)
+        )
+      );
+      const overlayId = `ocr-${word.ocrTextResultId}`;
+      const overlay = new import_dytools_canvas_engine.PolygonObject(
+        overlayId,
+        pts,
+        "rgba(0, 128, 255, 0.25)",
+        false,
+        // isSelectable
+        false,
+        // isMovable
+        currentZ++
+      );
+      this.engine.addObject(overlay);
+      this.ocrOverlayIds.push(overlayId);
+    }
+    this.emitExternal(CapturePublicEventType.OcrShown, {});
+  }
+  /**
+   * Remove OCR overlay polygons from the canvas.
+   */
+  hideOcr() {
+    if (!this.ocrOverlayIds || this.ocrOverlayIds.length === 0) {
+      return;
+    }
+    for (const id of this.ocrOverlayIds) {
+      this.engine.removeObject(id);
+    }
+    this.ocrOverlayIds = [];
+    this.emitExternal(CapturePublicEventType.OcrHidden, {});
+  }
+  get isOcrShown() {
+    return this.ocrOverlayIds.length > 0;
+  }
+  setOcrSnapshot(ocrRead) {
+    this.ocrRead = ocrRead;
+    this.emitExternal(CapturePublicEventType.OcrReadLoaded, { ocr: ocrRead });
+  }
+  // noinspection JSUnusedGlobalSymbols
+  getOcrSnapshot() {
+    return this.ocrRead;
+  }
+  setOcrMatchesSnapshot(matches) {
+    const absoluteMatches = matches.map((m) => ({
+      templateZoneId: m.templateZoneId,
+      ocrTextResultId: m.ocrTextResultId,
+      originalText: m.originalText,
+      processedText: m.processedText,
+      polygonPercent: m.polygonPercent,
+      anchorPointPercent: m.anchorPoint,
+      polygonAbsolute: new import_dytools_canvas_engine.Polygon(m.polygonPercent.points.map(
+        (p) => new import_dytools_canvas_engine.Point(p.x * this.engine.width, p.y * this.engine.height)
+        // TODO: This will need to be updated when the background changes.
+      )),
+      anchorPointAbsolute: m.anchorPoint ? new import_dytools_canvas_engine.Point(m.anchorPoint.x * this.engine.width, m.anchorPoint.y * this.engine.height) : null
+    }));
+    this.zoneOcrMatches = absoluteMatches;
+    this.allZonesFlattened.forEach((e) => {
+      this.emitToZone(e.id, CaptureEngineToZoneEventType.CaptureOcrMatchesLoaded, { ocrMatches: absoluteMatches });
+    });
+    this.emitExternal(CapturePublicEventType.OcrMatchesLoaded, { matches });
+  }
+  // noinspection JSUnusedGlobalSymbols
+  getOcrMatchesSnapshot() {
+    return this.zoneOcrMatches;
+  }
+  /* --- SERVER API --- */
+  setServerApi(api) {
+    this.serverApi = api;
+  }
+  // Call the server to OCR an image and load it into the engine.
+  async loadOcrFromImage(file) {
+    if (!this.serverApi?.readImage) {
+      this.emitExternal(CapturePublicEventType.CaptureError, { message: "CaptureEngineServerApi.readImage is not configured." });
+      return;
+    }
+    let ocrRead;
+    try {
+      let ocrReadResult = await this.serverApi.readImage(file);
+      ocrReadResult.throwIfError();
+      ocrRead = ocrReadResult.value;
+    } catch (err) {
+      this.emitExternal(CapturePublicEventType.CaptureError, {
+        error: err instanceof Error ? err : void 0,
+        message: err?.message ?? "Failed to read OCR from image."
+      });
+      return void 0;
+    }
+    return ocrRead;
+  }
+  // Ask the server to match OCR to zones for the current template.
+  async getZoneMatchesFromServer(ocrOverride) {
+    if (!this.serverApi?.matchOcrToZones) {
+      throw new Error("CaptureEngineServerApi.matchOcrToZones is not configured.");
+    }
+    const ocr = ocrOverride ?? this.ocrRead;
+    if (!ocr) {
+      throw new Error("No OCR data available. Call loadOcrFromImage() first or pass ocrOverride.");
+    }
+    const matchesResult = await this.serverApi.matchOcrToZones({
+      captureTemplate: this.getExternalTemplate(),
+      ocr
+    });
+    matchesResult.throwIfError();
+    let matches = matchesResult.value;
+    this.emitExternal(CapturePublicEventType.OcrMatchesLoaded, { matches });
+    return matches;
+  }
+  // Ask the server to fully process the template with OCR.
+  // public async getTemplateResultFromServer(
+  //     ocrOverride?: OcrJsonDto
+  // ): Promise<TemplateResult> {
+  //     if (!this.serverApi?.processTemplateWithOcr) {
+  //         throw new Error("CaptureEngineServerApi.processTemplateWithOcr is not configured.");
+  //     }
+  //
+  //     const ocr = ocrOverride ?? this.lastOcrDto;
+  //     if (!ocr) {
+  //         throw new Error("No OCR data available. Call loadOcrFromImage() first or pass ocrOverride.");
+  //     }
+  //
+  //     const captureTemplateJson = JSON.stringify(this.getExternalTemplate());
+  //
+  //     const result = await this.serverApi.processTemplateWithOcr({
+  //         captureTemplate: captureTemplateJson,
+  //         ocr
+  //     });
+  //
+  //     this.emitExternal("capture:template:processed", result);
+  //     return result;
+  // }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CaptureEngine,
+  CaptureEngineToZoneEventType,
+  CapturePublicEventType,
+  CaptureToEngineEventType
+});