@pacem/pacem-2d 1.0.0-abel

package/dist/bundle/pacem-2d.mjs

@@ -0,0 +1,2600 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// packages/2d/dist/esm/index-components.js
+var index_components_exports = {};
+__export(index_components_exports, {
+  Drawing: () => index_components_drawing_exports
+});
+
+// packages/2d/dist/esm/index-components-drawing.js
+var index_components_drawing_exports = {};
+__export(index_components_drawing_exports, {
+  AdapterUtils: () => AdapterUtils,
+  CornerType: () => CornerType,
+  DrawableElement: () => DrawableElement,
+  Pacem2DElement: () => Pacem2DElement,
+  PacemCanvasAdapterElement: () => PacemCanvasAdapterElement,
+  PacemCircleElement: () => PacemCircleElement,
+  PacemEllipseElement: () => PacemEllipseElement,
+  PacemGroupElement: () => PacemGroupElement,
+  PacemImageElement: () => PacemImageElement,
+  PacemLineElement: () => PacemLineElement,
+  PacemPathElement: () => PacemPathElement,
+  PacemPolygonElement: () => PacemPolygonElement,
+  PacemPolylineElement: () => PacemPolylineElement,
+  PacemRectElement: () => PacemRectElement,
+  PacemSvgAdapterElement: () => PacemSvgAdapterElement,
+  PacemTextElement: () => PacemTextElement,
+  PresentationElement: () => PresentationElement,
+  ShapeElement: () => ShapeElement,
+  UiElement: () => UiElement,
+  getStageOptions: () => getStageOptions
+});
+
+// packages/2d/dist/esm/drawable-element.js
+import { Components as Components2, CustomElementUtils, PropertyConverters as PropertyConverters2, Watch as Watch2 } from "@pacem/pacem-core";
+
+// packages/2d/dist/esm/stage.js
+import { CustomElement, Watch, ViewChild, Debounce, PCSS, P, Utils as Utils2, PropertyConverters, PropertyChangeEvent, CustomEventUtils, avoidHandler, EventKeyModifier, Components } from "@pacem/pacem-core";
+import { Rect, Matrix2D as Matrix2D2 } from "@pacem/pacem-foundation";
+
+// packages/2d/dist/esm/constants.js
+var TAG_MIDDLE_NAME = "2d";
+var TWO_PI = 2 * Math.PI;
+
+// packages/2d/dist/esm/drawing.js
+var drawing_exports = {};
+__export(drawing_exports, {
+  DragEvent: () => DragEvent,
+  DrawableEvent: () => DrawableEvent,
+  PresentationState: () => PresentationState,
+  Shape: () => Shape,
+  StageEvent: () => StageEvent,
+  UI2DEvent: () => UI2DEvent,
+  isDrawable: () => isDrawable,
+  isGroup: () => isGroup,
+  isImage: () => isImage,
+  isLinearGradient: () => isLinearGradient,
+  isPresentationObject: () => isPresentationObject,
+  isRadialGradient: () => isRadialGradient,
+  isShape: () => isShape,
+  isText: () => isText,
+  isUiObject: () => isUiObject
+});
+import { Utils, CustomUIEvent } from "@pacem/pacem-core";
+import { Point, Matrix2D } from "@pacem/pacem-foundation";
+function isDrawable(object) {
+  return !Utils.isNull(object) && "stage" in object;
+}
+function isUiObject(object) {
+  return (
+    /*'transformMatrix' in object &&*/
+    isDrawable(object)
+  );
+}
+function isGradient(object) {
+  return "stops" in object && Utils.isArray(object.stops);
+}
+function isLinearGradient(object) {
+  return isGradient(object) && "start" in object && Point.isPoint(object.start) && "end" in object && Point.isPoint(object.end);
+}
+function isRadialGradient(object) {
+  return isGradient(object) && "center" in object && Point.isPoint(object.center) && "radius" in object && typeof object.radius === "number";
+}
+var PresentationState = class {
+  static combine(lhs, rhs, precomputedMatrix = null) {
+    return {
+      opacity: (lhs.opacity ?? 1) * (rhs.opacity ?? 1),
+      transformMatrix: precomputedMatrix ?? Matrix2D.multiply(rhs.transformMatrix, lhs.transformMatrix),
+      dashArray: lhs.dashArray ?? rhs.dashArray,
+      fill: lhs.fill ?? rhs.fill,
+      lineCap: lhs.lineCap ?? rhs.lineCap,
+      lineJoin: lhs.lineJoin ?? rhs.lineJoin,
+      lineWidth: lhs.lineWidth ?? rhs.lineWidth,
+      stroke: lhs.stroke ?? rhs.stroke
+    };
+  }
+};
+function isPresentationObject(object) {
+  return isUiObject(object) && ("fill" in object || "transformMatrix" in object || "stroke" in object || "lineJoin" in object || "dashArray" in object || "lineWidth" in object || "opacity" in object || "lineCap" in object);
+}
+function isShape(object) {
+  return isUiObject(object) && "pathData" in object;
+}
+function isGroup(object) {
+  return isUiObject(object) && "childDrawables" in object && !Utils.isNullOrEmpty(object["childDrawables"]);
+}
+function isText(object) {
+  return isUiObject(object) && "text" in object && typeof object["text"] === "string";
+}
+function isImage(object) {
+  return isUiObject(object) && "src" in object && typeof object["src"] === "string";
+}
+var UI2DEvent = class extends CustomUIEvent {
+  constructor(type, eventInit, originalEvent, transformMatrix) {
+    super(type, eventInit, originalEvent);
+    this.#transformMatrix = transformMatrix;
+  }
+  #transformMatrix;
+  /** Gets the screen transform matrix. */
+  get transformMatrix() {
+    return this.#transformMatrix;
+  }
+  project(pt = { x: this.screenX, y: this.screenY }) {
+    return Matrix2D.multiply(pt, this.#transformMatrix);
+  }
+};
+var Shape = class {
+  static empty() {
+    return { pathData: "", vertices: [], boundingRect: { x: 0, y: 0, width: 0, height: 0 } };
+  }
+};
+var DragEvent = class extends UI2DEvent {
+};
+var DrawableEvent = class extends UI2DEvent {
+  constructor(type, args, originalEvent, m) {
+    super(type, { detail: args, bubbles: true, cancelable: true }, originalEvent, m);
+  }
+};
+var StageEvent = class extends UI2DEvent {
+  constructor(type, args, originalEvent, m = args.transformMatrix) {
+    super(type, { detail: args, bubbles: true, cancelable: true }, originalEvent, m);
+  }
+};
+
+// packages/2d/dist/esm/stage.js
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ASPECTRATIO_PATTERN = /^\s*[xX]\s*([Mm](in|ax|id))\s*[yY]\s*([Mm](in|ax|id))(\s+(none|slice|meet))?\s*$/;
+var aspectRatioPropertyConverter = {
+  convert: (attr) => {
+    const regArr = ASPECTRATIO_PATTERN.exec(attr);
+    if (regArr && regArr.length >= 4) {
+      return {
+        x: regArr[1].toLowerCase(),
+        y: regArr[3].toLowerCase(),
+        slice: regArr[6] === "slice"
+      };
+    }
+    return "none";
+  },
+  convertBack: (val) => {
+    if (Utils2.isNull(val) || typeof val === "string") {
+      return "none";
+    }
+    return `xM${val.x.substring(1)}YM${val.y.substring(1)} ${val.slice ? "slice" : "meet"}`;
+  }
+};
+var DEFAULT_STAGE_OPTIONS = {
+  panControl: true,
+  zoomControl: true,
+  panModifiers: [EventKeyModifier.AltKey],
+  zoomModifiers: [EventKeyModifier.AltKey],
+  clickModifiers: []
+};
+function getStageOptions(stage) {
+  const options = stage instanceof Pacem2DElement ? stage.options : {};
+  return Utils2.extend({}, DEFAULT_STAGE_OPTIONS, options);
+}
+var Pacem2DElement = class Pacem2DElement2 extends Components.PacemItemsContainerElement {
+  constructor() {
+    super(...arguments);
+    this.#transformMatrix = Matrix2D2.identity;
+    this.#options = DEFAULT_STAGE_OPTIONS;
+    this._resizeHandler = (evt) => {
+      this.#size = { x: evt.detail.left, y: evt.detail.top, width: evt.detail.width, height: evt.detail.height };
+      const adapter = this.adapter;
+      if (!Utils2.isNull(adapter)) {
+        this._invalidateSize();
+      }
+    };
+    this._zoomHandler = (evt) => {
+      if (!evt.isTrusted) {
+        return;
+      }
+      const opts = this.#options;
+      if (opts.zoomControl && CustomEventUtils.matchModifiers(evt, opts.zoomModifiers)) {
+        avoidHandler(evt);
+        const zoomingOut = evt.deltaY < 0;
+        const factor = 0.1, sign = zoomingOut ? -1 : 1, factorWSign = factor * sign, scale = 1 + factorWSign;
+        const stageRect = Utils2.offsetRect(evt.currentTarget), pt = { x: evt.clientX, y: evt.clientY };
+        this._zoom(scale, stageRect, pt);
+      }
+    };
+    this._panHandler = (evt) => {
+      const state = this.#panningStart, actual = this._getPanPoint(evt);
+      if (!Utils2.isNullOrEmpty(state && state.point) && !Utils2.isNull(actual)) {
+        avoidHandler(evt);
+        const factor = state.factor, vbox = state.box, start = state.point;
+        this.viewbox = {
+          x: vbox.x - factor * (actual.x - start.x),
+          y: vbox.y - factor * (actual.y - start.y),
+          width: vbox.width,
+          height: vbox.height
+        };
+      }
+    };
+    this._panStartHandler = (evt) => {
+      const opts = this.#options;
+      if (!opts.panControl) {
+        return;
+      }
+      if (!evt.isTrusted) {
+        return;
+      }
+      const size = this.#size, vbox = this.viewbox || { x: 0, y: 0, width: size.width, height: size.height }, start = this._getPanPoint(evt);
+      if (start) {
+        avoidHandler(evt);
+        this._stage.style.pointerEvents = "none";
+        const aspectRatio = this._getActualAspectRatio();
+        const wBased = vbox.width / size.width, hBased = vbox.height / size.height, factor = aspectRatio.slice ? Math.min(wBased, hBased) : Math.max(wBased, hBased);
+        this.#panningStart = { point: start, box: vbox, factor };
+      }
+    };
+    this._panEndHandler = (evt) => {
+      this._stage.style.pointerEvents = "";
+      this.#panningStart = null;
+    };
+  }
+  get stage() {
+    return this._stage;
+  }
+  snapshot(bgColor, type, quality) {
+    const adapter = this.adapter;
+    if (Utils2.isNull(adapter)) {
+      return Promise.resolve(null);
+    }
+    return adapter.snapshot(this, bgColor, type, quality);
+  }
+  #originalViewBox;
+  #transformMatrix;
+  get transformMatrix() {
+    return this.#transformMatrix;
+  }
+  _transformMatrixScale() {
+    const sizeObj = this.#size || Utils2.offsetRect(this._stage);
+    var origVbox = this.#originalViewBox || sizeObj;
+    const vbox = this.viewbox || origVbox;
+    const aspectRatio = this.aspectRatio || "none";
+    const mode = aspectRatio === "none" ? "stretch" : aspectRatio.slice ? "cover" : "contain";
+    const actual = Rect.findTransform(vbox, origVbox, mode);
+    return actual.a;
+  }
+  validate(item) {
+    return item instanceof DrawableElement && /* only direct items */
+    Utils2.isNull(item.parent);
+  }
+  draw(item, redraw = false) {
+    const adapter = this.adapter;
+    if (!this.disabled && !Utils2.isNull(adapter)) {
+      let cancelable = new CustomEvent("predraw", { cancelable: true });
+      this.dispatchEvent(cancelable);
+      if (!cancelable.defaultPrevented) {
+        adapter.draw(this, item, redraw);
+        this.dispatchEvent(new CustomEvent("draw"));
+      }
+    }
+  }
+  _drawDebounced(item, force = false) {
+    if (!Utils2.isNull(item) && isGroup(item)) {
+      this.draw(item, force);
+    } else {
+      this.draw(item);
+    }
+  }
+  requestDraw(item, redraw = false) {
+    this._drawDebounced(item, redraw);
+  }
+  _buildUpDatasourceFromDOM() {
+    this.datasource = (this.items || []).slice();
+  }
+  #options;
+  #size;
+  _getActualAspectRatio() {
+    const aspectRatio = this.aspectRatio || "none";
+    const alignmentX = aspectRatio === "none" ? "mid" : aspectRatio.x;
+    const alignmentY = aspectRatio === "none" ? "mid" : aspectRatio.y;
+    const slice = aspectRatio === "none" ? false : aspectRatio.slice;
+    return { x: alignmentX, y: alignmentY, slice };
+  }
+  _zoomFromValue(scale) {
+    const sizeObj = this.#size;
+    if (Utils2.isNull(sizeObj)) {
+      return;
+    }
+    const sizeRect = sizeObj;
+    const origVbox = this.#originalViewBox || sizeRect, vbox = this.viewbox || origVbox;
+    const aspectRatio = this.aspectRatio || "none";
+    const mode = aspectRatio === "none" ? "stretch" : aspectRatio.slice ? "cover" : "contain";
+    const actual = Rect.findTransform(vbox, sizeRect, mode);
+    const original = Rect.findTransform(origVbox, sizeRect, mode);
+    const actualScale = actual.a;
+    const origScale = original.a;
+    const targetScale = origScale * scale;
+    const incrementalInverseScale = actualScale / targetScale;
+    this._zoom(incrementalInverseScale);
+  }
+  _zoom(scale, stageRect, pt) {
+    if (Utils2.isNull(stageRect)) {
+      stageRect = Utils2.offsetRect(this._stage);
+    }
+    if (Utils2.isNull(pt)) {
+      pt = { x: stageRect.x + stageRect.width * 0.5, y: stageRect.y + stageRect.height * 0.5 };
+    }
+    const sizeObj = this.#size, vbox = this.viewbox || sizeObj;
+    const vsize = Math.min(vbox.width, vbox.height), targetWidth = vsize * scale, targetHeight = vsize * scale;
+    if (targetWidth > 0 && targetHeight > 0) {
+      const aspectRatio = this._getActualAspectRatio();
+      const alignmentX = aspectRatio.x;
+      const alignmentY = aspectRatio.y;
+      const slice = aspectRatio.slice;
+      const vboxRatio = vbox.width / vbox.height, size = slice ? Math.max(stageRect.width, stageRect.height) : Math.min(stageRect.width, stageRect.height);
+      let adjX, adjY;
+      ;
+      switch (alignmentX) {
+        case "mid":
+          adjX = (targetWidth - vbox.width) * (pt.x - stageRect.x - 0.5 * (stageRect.width - size)) / (size * vboxRatio);
+          break;
+        case "max":
+          adjX = (targetWidth - vbox.width) * (pt.x - stageRect.x - (stageRect.width - size)) / (size * vboxRatio);
+          break;
+        default:
+          adjX = (targetWidth - vbox.width) * (pt.x - stageRect.x) / (size * vboxRatio);
+          break;
+      }
+      switch (alignmentY) {
+        case "mid":
+          adjY = (targetHeight - vbox.height) * (pt.y - stageRect.y - 0.5 * (stageRect.height - size)) / (size * vboxRatio);
+          break;
+        case "max":
+          adjY = (targetHeight - vbox.height) * (pt.y - stageRect.y - (stageRect.height - size)) / (size * vboxRatio);
+          break;
+        default:
+          adjY = (targetHeight - vbox.height) * (pt.y - stageRect.y) / (size * vboxRatio);
+          break;
+      }
+      const targetX = vbox.x - adjX, targetY = vbox.y - adjY;
+      this.viewbox = { x: targetX, y: targetY, width: targetWidth, height: targetHeight };
+    }
+  }
+  _getPanPoint(evt) {
+    const opts = this.#options;
+    if (evt instanceof MouseEvent && CustomEventUtils.matchModifiers(evt, opts.panModifiers)) {
+      return CustomEventUtils.getEventCoordinates(evt).page;
+    }
+    return null;
+  }
+  #panningStart;
+  _invalidateSize() {
+    this.adapter.invalidateSize(this, this.#size);
+    const prevTransformMatrix = this.#transformMatrix;
+    this.#transformMatrix = this.adapter.getTransformMatrix(this);
+    this.dispatchEvent(new PropertyChangeEvent({ propertyName: "transformMatrix", currentValue: this.#transformMatrix, oldValue: prevTransformMatrix }));
+    this.zoom = this._transformMatrixScale();
+    this.dispatchEvent(new Components.ResizeEvent(this.#size));
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    const adapter = this.adapter;
+    if (!Utils2.isNull(adapter)) {
+      adapter.initialize(this);
+      this._invalidateSize();
+      this._drawDebounced();
+    }
+    const resize = this._resize;
+    resize.addEventListener(Components.ResizeEventName, this._resizeHandler, false);
+    const stage = this._stage;
+    resize.target = stage;
+    const options = { capture: false, passive: true };
+    stage.addEventListener("wheel", this._zoomHandler, false);
+    stage.addEventListener("mousedown", this._panStartHandler, false);
+    stage.addEventListener("touchstart", this._panStartHandler, options);
+    window.addEventListener("mousemove", this._panHandler, false);
+    window.addEventListener("mouseup", this._panEndHandler, false);
+    window.addEventListener("touchmove", this._panHandler, options);
+    window.addEventListener("touchend", this._panEndHandler, options);
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    switch (name) {
+      case "adapter":
+        if (!Utils2.isNull(old)) {
+          old.dispose(this);
+        }
+        if (!Utils2.isNull(val)) {
+          val.initialize(this);
+          this._invalidateSize();
+          this._drawDebounced();
+        }
+        break;
+      case "aspectRatio":
+        if (!Utils2.isNull(this.adapter)) {
+          this._invalidateSize();
+        }
+        break;
+      case "viewbox":
+        if (!Utils2.isNull(this.adapter)) {
+          this._invalidateSize();
+        }
+        this.#originalViewBox ??= this.viewbox || null;
+        break;
+      case "items":
+        this._buildUpDatasourceFromDOM();
+        break;
+      case "zoom":
+        if (val !== this._transformMatrixScale()) {
+          this._zoomFromValue(val);
+        }
+        break;
+      case "options":
+        this.#options = getStageOptions(this);
+        break;
+      case "disabled":
+      case "datasource":
+        this._drawDebounced();
+        break;
+    }
+  }
+  disconnectedCallback() {
+    const resizer = this._resize, stage = this._stage;
+    if (!Utils2.isNull(resizer)) {
+      resizer.removeEventListener(Components.ResizeEventName, this._resizeHandler, false);
+    }
+    if (!Utils2.isNull(stage)) {
+      stage.removeEventListener("wheel", this._zoomHandler, false);
+      stage.removeEventListener("mousedown", this._panStartHandler, false);
+      stage.removeEventListener("touchstart", this._panStartHandler);
+      window.removeEventListener("mousemove", this._panHandler, false);
+      window.removeEventListener("mouseup", this._panEndHandler, false);
+      window.removeEventListener("touchmove", this._panHandler);
+      window.removeEventListener("touchend", this._panEndHandler);
+    }
+    if (!Utils2.isNull(this.adapter)) {
+      this.adapter.dispose(this);
+    }
+    super.disconnectedCallback();
+  }
+};
+__decorate([
+  Watch({ converter: PropertyConverters.Element })
+], Pacem2DElement.prototype, "adapter", void 0);
+__decorate([
+  Watch({ reflectBack: true, converter: PropertyConverters.Rect })
+], Pacem2DElement.prototype, "viewbox", void 0);
+__decorate([
+  Watch({ emit: false, reflectBack: true, converter: aspectRatioPropertyConverter })
+], Pacem2DElement.prototype, "aspectRatio", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Json })
+], Pacem2DElement.prototype, "datasource", void 0);
+__decorate([
+  Watch({ emit: false, converter: PropertyConverters.Json })
+], Pacem2DElement.prototype, "options", void 0);
+__decorate([
+  Watch({ converter: PropertyConverters.Number })
+], Pacem2DElement.prototype, "zoom", void 0);
+__decorate([
+  ViewChild("." + PCSS + "-2d")
+], Pacem2DElement.prototype, "_stage", void 0);
+__decorate([
+  ViewChild(P + "-resize")
+], Pacem2DElement.prototype, "_resize", void 0);
+__decorate([
+  Debounce(true)
+], Pacem2DElement.prototype, "_drawDebounced", null);
+Pacem2DElement = __decorate([
+  CustomElement({ tagName: P + "-" + TAG_MIDDLE_NAME, shadow: true, template: `<${P}-resize watch-position="true"></${P}-resize><div class="${PCSS}-2d" part="container"></div><slot></slot>` })
+], Pacem2DElement);
+
+// packages/2d/dist/esm/drawable-element.js
+var __decorate2 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DrawableElement = class _DrawableElement extends Components2.PacemCrossItemsContainerElement {
+  validate(_) {
+    return false;
+  }
+  findContainer() {
+    return this.parent || this.stage;
+  }
+  get stage() {
+    return this["_scene"] = this["_scene"] || CustomElementUtils.findAncestorOfType(this, Pacem2DElement);
+  }
+  get parent() {
+    return this["_drawableParent"] = this["_drawableParent"] || CustomElementUtils.findAncestor(this, (i) => i instanceof _DrawableElement);
+  }
+  disconnectedCallback() {
+    delete this["_scene"];
+    delete this["_drawableParent"];
+    super.disconnectedCallback();
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "hide":
+          this.stage?.draw(this);
+          break;
+      }
+    }
+  }
+};
+__decorate2([
+  Watch2({ emit: false, reflectBack: true, converter: PropertyConverters2.String })
+], DrawableElement.prototype, "tag", void 0);
+__decorate2([
+  Watch2({ emit: false, converter: PropertyConverters2.Boolean })
+], DrawableElement.prototype, "inert", void 0);
+
+// packages/2d/dist/esm/types.js
+import { Watch as Watch3, PropertyConverters as PropertyConverters3, Utils as Utils3 } from "@pacem/pacem-core";
+import { Matrix2D as Matrix2D3 } from "@pacem/pacem-foundation";
+var __decorate3 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DEG2RAD = Math.PI / 180;
+var UiElement = class extends DrawableElement {
+  #transformMatrix = Matrix2D3.identity;
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    this._updateTransformMatrix();
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "rotate":
+        case "scaleX":
+        case "scaleY":
+        case "translateX":
+        case "translateY":
+          this._updateTransformMatrix();
+        // flow down
+        case "opacity":
+          this.stage?.draw(this);
+          break;
+      }
+    }
+  }
+  _updateTransformMatrix() {
+    let rotation = DEG2RAD * (this.rotate ?? 0), cos = Math.cos(rotation), sin = Math.sin(rotation), a = (this.scaleX ?? 1) * cos, b = -sin, c = sin, d = (this.scaleY ?? 1) * cos, e = this.translateX ?? 0, f = this.translateY ?? 0;
+    this.#transformMatrix = { a, b, c, d, e, f };
+  }
+  /** @internal */
+  get transformMatrix() {
+    const m = this.#transformMatrix;
+    return { a: m.a, b: m.b, c: m.c, d: m.d, e: m.e, f: m.f };
+  }
+};
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], UiElement.prototype, "rotate", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], UiElement.prototype, "scaleX", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], UiElement.prototype, "scaleY", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], UiElement.prototype, "translateX", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], UiElement.prototype, "translateY", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], UiElement.prototype, "opacity", void 0);
+var PresentationElement = class extends UiElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "stroke":
+        case "lineWidth":
+        case "lineJoin":
+        case "lineCap":
+        case "dashArray":
+        case "fill":
+          if (!Utils3.isNull(this.stage)) {
+            this.stage.draw(this);
+          }
+          break;
+      }
+    }
+  }
+};
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.String })
+], PresentationElement.prototype, "stroke", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.String })
+], PresentationElement.prototype, "fill", void 0);
+__decorate3([
+  Watch3({
+    emit: false,
+    converter: {
+      convert: (attr) => attr?.split(",").map((i) => parseInt(i)).filter((i) => !Number.isNaN(i)),
+      convertBack: (prop) => prop?.join(",")
+    }
+  })
+], PresentationElement.prototype, "dashArray", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.Number })
+], PresentationElement.prototype, "lineWidth", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.String })
+], PresentationElement.prototype, "lineJoin", void 0);
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.String })
+], PresentationElement.prototype, "lineCap", void 0);
+var ShapeElement = class extends PresentationElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "data":
+          this.stage?.draw(this);
+          break;
+      }
+    }
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    this.recomputeShape();
+  }
+  recomputeShape() {
+    const { pathData, vertices, boundingRect } = this.getShapeGeometry();
+    this.#vertices = vertices;
+    this.#boundingRect = boundingRect;
+    this.data = pathData;
+  }
+  get pathData() {
+    return this.data;
+  }
+  #boundingRect;
+  get boundingRect() {
+    return this.#boundingRect;
+  }
+  #vertices;
+  get vertices() {
+    return this.#vertices;
+  }
+};
+__decorate3([
+  Watch3({ emit: false, converter: PropertyConverters3.String })
+], ShapeElement.prototype, "data", void 0);
+
+// packages/2d/dist/esm/group.js
+import { CustomElement as CustomElement2, Watch as Watch4, P as P2, Utils as Utils4 } from "@pacem/pacem-core";
+var __decorate4 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemGroupElement = class PacemGroupElement2 extends PresentationElement {
+  validate(item) {
+    return item instanceof DrawableElement && item.parent === this;
+  }
+  #children = [];
+  get childDrawables() {
+    return this.#children;
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    switch (name) {
+      case "items":
+      case "datasource":
+        this.#children = val || [];
+        const scene = this.stage;
+        if (!Utils4.isNull(scene)) {
+          scene.draw(this, true);
+        }
+        break;
+    }
+  }
+};
+__decorate4([
+  Watch4({ emit: false })
+], PacemGroupElement.prototype, "datasource", void 0);
+PacemGroupElement = __decorate4([
+  CustomElement2({ tagName: P2 + "-" + TAG_MIDDLE_NAME + "-group" })
+], PacemGroupElement);
+
+// packages/2d/dist/esm/ellipse.js
+import { CustomElement as CustomElement3, Watch as Watch5, PropertyConverters as PropertyConverters4, P as P3, Utils as Utils5 } from "@pacem/pacem-core";
+import { Rect as Rect2 } from "@pacem/pacem-foundation";
+var __decorate5 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemEllipseElement_1;
+var PacemCircleElement_1;
+function full(c, rx, ry) {
+  const d = 2 * rx, cx = c.x, cy = c.y;
+  return {
+    pathData: `M ${cx} ${cy} m ${-rx},0 a ${rx},${ry} 0 1,1 ${d},0 a ${rx},${ry} 0 1,1 ${-d},0`,
+    vertices: [],
+    boundingRect: { x: cx - rx, y: cy - ry, width: 2 * rx, height: 2 * ry }
+  };
+}
+function sect(c, rx, ry, start, end) {
+  const degToRad = Math.PI / 180;
+  const s = degToRad * start, e = degToRad * end;
+  const polar = (theta) => rx * ry / Math.sqrt(Math.pow(Math.cos(theta) * ry, 2) + Math.pow(Math.sin(theta) * rx, 2));
+  const rhoStart = polar(s), rhoEnd = polar(e);
+  const cartesian = (rho, theta) => {
+    return { x: rho * Math.cos(theta), y: rho * Math.sin(theta) };
+  };
+  const cartStart = cartesian(rhoStart, s), cartEnd = cartesian(rhoEnd, e);
+  const p0 = { x: c.x + cartStart.x, y: c.y + cartStart.y }, p1 = { x: c.x + cartEnd.x, y: c.y + cartEnd.y };
+  let boundingRect = Rect2.expand(c, p0, p1);
+  if (end < start)
+    end += 360;
+  if (start <= 0 && end > 0 || end >= 360) {
+    boundingRect = Rect2.expand(boundingRect, { x: c.x + rx, y: c.y });
+  }
+  if (start <= 90 && end > 90 || end >= 450) {
+    boundingRect = Rect2.expand(boundingRect, { x: c.x, y: c.y + ry });
+  }
+  if (start <= 180 && end > 180 || end >= 540) {
+    boundingRect = Rect2.expand(boundingRect, { x: c.x - rx, y: c.y });
+  }
+  if (start <= 270 && end > 270 || end >= 630) {
+    boundingRect = Rect2.expand(boundingRect, { x: c.x, y: c.y - ry });
+  }
+  const flag = e - s > Math.PI ? "1" : "0";
+  return {
+    pathData: `M ${p0.x} ${p0.y} A ${rx},${ry} 0 ${flag},1 ${p1.x},${p1.y} L ${c.x},${c.y} Z`,
+    vertices: [p0, p1],
+    boundingRect
+  };
+}
+function getShapeGeometry(c, rx, ry, start, end) {
+  start ??= 0, end ??= 0;
+  start %= 360;
+  end %= 360;
+  while (start < 0)
+    start += 360;
+  while (end < start)
+    end += 360;
+  const threesixty = (start - end).isCloseTo(0);
+  return threesixty ? full(c, rx, ry) : sect(c, rx, ry, start, end);
+}
+var PacemEllipseElement = PacemEllipseElement_1 = class PacemEllipseElement2 extends ShapeElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "center":
+        case "rx":
+        case "ry":
+        case "start":
+        case "end":
+          this.recomputeShape();
+          break;
+      }
+    }
+  }
+  getPathData() {
+    const a = this.rx, b = this.ry, c = this.center, s = this.start ?? 0, e = this.end ?? 0;
+    if (!Utils5.isNull(c) && !Utils5.isNull(a) && !Utils5.isNull(b)) {
+      return PacemEllipseElement_1.getPathData(c, a, b, s, e);
+    }
+    return null;
+  }
+  getShapeGeometry() {
+    const center = this.center ?? { x: 0, y: 0 };
+    const a = this.rx ?? 0, b = this.ry ?? 0;
+    return getShapeGeometry(center, a, b, this.start, this.end);
+  }
+  static getPathData(c = { x: NaN, y: NaN }, rx = NaN, ry = NaN, start, end) {
+    const { pathData } = getShapeGeometry(c, rx, ry, start, end);
+    return pathData;
+  }
+};
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Point })
+], PacemEllipseElement.prototype, "center", void 0);
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Number })
+], PacemEllipseElement.prototype, "rx", void 0);
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Number })
+], PacemEllipseElement.prototype, "ry", void 0);
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Number })
+], PacemEllipseElement.prototype, "start", void 0);
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Number })
+], PacemEllipseElement.prototype, "end", void 0);
+PacemEllipseElement = PacemEllipseElement_1 = __decorate5([
+  CustomElement3({ tagName: P3 + "-" + TAG_MIDDLE_NAME + "-ellipse" })
+], PacemEllipseElement);
+var PacemCircleElement = PacemCircleElement_1 = class PacemCircleElement2 extends ShapeElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "center":
+        case "radius":
+        case "start":
+        case "end":
+          this.recomputeShape();
+          break;
+      }
+    }
+  }
+  getPathData() {
+    const r = this.radius, c = this.center;
+    if (!Utils5.isNull(c) && !Utils5.isNull(r)) {
+      return PacemCircleElement_1.getPathData(c, r, this.start, this.end);
+    }
+    return null;
+  }
+  getShapeGeometry() {
+    const center = this.center ?? { x: 0, y: 0 };
+    const r = this.radius ?? 0;
+    return getShapeGeometry(center, r, r, this.start, this.end);
+  }
+  static getPathData(c = { x: NaN, y: NaN }, r = NaN, start, end) {
+    return PacemEllipseElement.getPathData(c, r, r, start, end);
+  }
+};
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Point })
+], PacemCircleElement.prototype, "center", void 0);
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Number })
+], PacemCircleElement.prototype, "radius", void 0);
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Number })
+], PacemCircleElement.prototype, "start", void 0);
+__decorate5([
+  Watch5({ emit: false, converter: PropertyConverters4.Number })
+], PacemCircleElement.prototype, "end", void 0);
+PacemCircleElement = PacemCircleElement_1 = __decorate5([
+  CustomElement3({ tagName: P3 + "-" + TAG_MIDDLE_NAME + "-circle" })
+], PacemCircleElement);
+
+// packages/2d/dist/esm/rect.js
+import { CustomElement as CustomElement4, Watch as Watch6, PropertyConverters as PropertyConverters5, P as P4, Utils as Utils6 } from "@pacem/pacem-core";
+var __decorate6 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemRectElement_1;
+function parseCornerRadius(radius) {
+  const rx = radius[2], ry = radius[4] ?? rx, type = radius[6] === "cut" ? CornerType.Cut : CornerType.Rounded;
+  return { rx: parseCornerRadiusComponent(rx), ry: parseCornerRadiusComponent(ry), type };
+}
+function parseCornerRadiusComponent(radius) {
+  const val = parseFloat(radius);
+  return { value: val, unit: radius.endsWith("%") ? "pct" : "u" };
+}
+function stringifyCornerRadiusComponent(radius) {
+  return `${radius.value}${radius.unit === "pct" ? "%" : ""}`;
+}
+var CORNERS_PATTERN = /(([\d\.]+%?)(\s*,?\s*([\d\.]+%?))?(\s+(cut|round))?)/g;
+function parseCornerRadii(radii) {
+  let numbers;
+  const acc = [];
+  while (numbers = CORNERS_PATTERN.exec(radii)) {
+    acc.push(numbers);
+  }
+  switch (acc.length) {
+    case 1:
+      const single = parseCornerRadius(acc[0]);
+      return [single, single, single, single];
+    case 4:
+      const topLeft = parseCornerRadius(acc[0]);
+      const topRight = parseCornerRadius(acc[1]);
+      const bottomRight = parseCornerRadius(acc[2]);
+      const bottomLeft = parseCornerRadius(acc[3]);
+      return [topLeft, topRight, bottomRight, bottomLeft];
+    default:
+      return null;
+  }
+}
+function stringifyCornerRadii(radii) {
+  const topLeft = radii[0], topRight = radii[1], bottomRight = radii[2], bottomLeft = radii[3];
+  const tlX = stringifyCornerRadiusComponent(topLeft.rx), tlY = stringifyCornerRadiusComponent(topLeft.ry);
+  const trX = stringifyCornerRadiusComponent(topRight.rx), trY = stringifyCornerRadiusComponent(topRight.ry);
+  const brX = stringifyCornerRadiusComponent(bottomRight.rx), brY = stringifyCornerRadiusComponent(bottomRight.ry);
+  const blX = stringifyCornerRadiusComponent(bottomLeft.rx), blY = stringifyCornerRadiusComponent(bottomLeft.ry);
+  return `${tlX},${tlY} ${trX},${trY} ${brX},${brY} ${blX},${blY}`;
+}
+var CornerType;
+(function(CornerType2) {
+  CornerType2["Rounded"] = "rounded";
+  CornerType2["Cut"] = "cut";
+})(CornerType || (CornerType = {}));
+var PacemRectElement = PacemRectElement_1 = class PacemRectElement2 extends ShapeElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first && (name === "x" || name === "y" || name === "w" || name === "h" || name === "r" || name === "cornerType")) {
+      this.recomputeShape();
+    }
+  }
+  getPathData() {
+    const x = this.x, y = this.y, w = this.w, h = this.h;
+    let r = this.r ?? { rx: { value: 0 }, ry: { value: 0 }, type: CornerType.Rounded };
+    if (!Utils6.isArray(r)) {
+      r = [r, r, r, r];
+    }
+    r = r.map((i) => {
+      return typeof i === "number" ? { rx: { value: i }, ry: { value: i }, type: this.cornerType } : i;
+    });
+    if (!Utils6.isNull(x) && !Utils6.isNull(y) && !Utils6.isNull(w) && !Utils6.isNull(h)) {
+      return PacemRectElement_1.getPathData(x, y, w, h, r);
+    }
+    return null;
+  }
+  getShapeGeometry() {
+    const x = this.x, y = this.y, x1 = x + this.w, y1 = y + this.h;
+    return {
+      pathData: this.getPathData(),
+      vertices: [{ x, y }, { x: x1, y }, { x: x1, y: y1 }, { x, y: y1 }],
+      boundingRect: { x, y, width: this.w, height: this.h }
+    };
+  }
+  static getPathData(x = NaN, y = NaN, w = NaN, h = NaN, r = null) {
+    if (!r) {
+      return `M ${x} ${y} h ${w} v ${h} h ${-w} z`;
+    }
+    if (!Utils6.isArray(r)) {
+      r = [r, r, r, r];
+    }
+    const tl = r[0], tr = r[1], br = r[2], bl = r[3];
+    const vx = (rx) => rx.unit === "pct" ? rx.value * 0.01 * w : rx.value;
+    const vy = (ry) => ry.unit === "pct" ? ry.value * 0.01 * h : ry.value;
+    const tlX = vx(tl.rx), tlY = vy(tl.ry);
+    const trX = vx(tr.rx), trY = vy(tr.ry);
+    const brX = vx(br.rx), brY = vy(br.ry);
+    const blX = vx(bl.rx), blY = vy(bl.ry);
+    let retval = `M ${x},${y + tlY}`;
+    switch (tl.type) {
+      case "cut":
+        retval += ` l ${tlX},${-tlY}`;
+        break;
+      default:
+        retval += ` a ${tlX} ${tlY} 0 0 1 ${tlX} ${-tlY}`;
+        break;
+    }
+    retval += ` h ${w - tlX - trX}`;
+    switch (tr.type) {
+      case "cut":
+        retval += ` l ${trX},${trY}`;
+        break;
+      default:
+        retval += ` a ${trX} ${trY} 0 0 1 ${trX} ${trY}`;
+        break;
+    }
+    retval += ` v ${h - trY - brY}`;
+    switch (br.type) {
+      case "cut":
+        retval += ` l ${-brX},${brY}`;
+        break;
+      default:
+        retval += ` a ${brX} ${brY} 0 0 1 ${-brX} ${brY}`;
+        break;
+    }
+    retval += ` h ${-(w - brX - blX)}`;
+    switch (bl.type) {
+      case "cut":
+        retval += ` l ${-blX},${-blY}`;
+        break;
+      default:
+        retval += ` a ${blX} ${blY} 0 0 1 ${-blX} ${-blY}`;
+        break;
+    }
+    return retval + " z";
+  }
+};
+__decorate6([
+  Watch6({ emit: false, converter: PropertyConverters5.Number })
+], PacemRectElement.prototype, "x", void 0);
+__decorate6([
+  Watch6({ emit: false, converter: PropertyConverters5.Number })
+], PacemRectElement.prototype, "y", void 0);
+__decorate6([
+  Watch6({ emit: false, converter: PropertyConverters5.Number })
+], PacemRectElement.prototype, "w", void 0);
+__decorate6([
+  Watch6({ emit: false, converter: PropertyConverters5.Number })
+], PacemRectElement.prototype, "h", void 0);
+__decorate6([
+  Watch6({
+    emit: false,
+    converter: {
+      convert: (attr) => parseCornerRadii(attr),
+      convertBack: (radii) => stringifyCornerRadii(radii)
+    }
+  })
+], PacemRectElement.prototype, "r", void 0);
+__decorate6([
+  Watch6({ emit: false, converter: PropertyConverters5.String })
+], PacemRectElement.prototype, "cornerType", void 0);
+PacemRectElement = PacemRectElement_1 = __decorate6([
+  CustomElement4({ tagName: P4 + "-" + TAG_MIDDLE_NAME + "-rect" })
+], PacemRectElement);
+
+// packages/2d/dist/esm/line.js
+import { CustomElement as CustomElement5, Watch as Watch7, PropertyConverters as PropertyConverters6, P as P5, Utils as Utils7 } from "@pacem/pacem-core";
+var __decorate7 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemLineElement_1;
+var PacemLineElement = PacemLineElement_1 = class PacemLineElement2 extends ShapeElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "from":
+        case "to":
+          this.recomputeShape();
+          break;
+      }
+    }
+  }
+  getShapeGeometry() {
+    const from = this.from, to = this.to;
+    if (Utils7.isNull(from) || Utils7.isNull(to)) {
+      return Shape.empty();
+    }
+    const x0 = from.x, y0 = from.y, x1 = to.x, y1 = to.y;
+    const boundingRect = { x: Math.min(x0, x1), y: Math.min(y0, y1), width: Math.abs(x0 - x1), height: Math.abs(y0 - y1) };
+    return { pathData: this.getPathData(), vertices: [from, to], boundingRect };
+  }
+  getPathData() {
+    const from = this.from, to = this.to;
+    if (!Utils7.isNull(from) && !Utils7.isNull(to)) {
+      return PacemLineElement_1.getPathData(from, to);
+    }
+    return null;
+  }
+  static getPathData(from = { x: NaN, y: NaN }, to = { x: NaN, y: NaN }) {
+    const x0 = from.x, y0 = from.y, x1 = to.x, y1 = to.y;
+    return `M ${x0} ${y0} L ${x1} ${y1}`;
+  }
+};
+__decorate7([
+  Watch7({ emit: false, converter: PropertyConverters6.Point })
+], PacemLineElement.prototype, "from", void 0);
+__decorate7([
+  Watch7({ emit: false, converter: PropertyConverters6.Point })
+], PacemLineElement.prototype, "to", void 0);
+PacemLineElement = PacemLineElement_1 = __decorate7([
+  CustomElement5({ tagName: P5 + "-" + TAG_MIDDLE_NAME + "-line" })
+], PacemLineElement);
+
+// packages/2d/dist/esm/path.js
+import { CustomElement as CustomElement6, Watch as Watch8, PropertyConverters as PropertyConverters7, P as P6 } from "@pacem/pacem-core";
+var __decorate8 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemPathElement = class PacemPathElement2 extends ShapeElement {
+  constructor() {
+    super(...arguments);
+    this.getPathData = () => this.d;
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (name === "d" && !first) {
+      this.recomputeShape();
+    }
+  }
+  getShapeGeometry() {
+    return {
+      pathData: this.getPathData(),
+      /* TODO: parse d */
+      boundingRect: null,
+      vertices: []
+    };
+  }
+};
+__decorate8([
+  Watch8({ emit: false, converter: PropertyConverters7.String })
+], PacemPathElement.prototype, "d", void 0);
+PacemPathElement = __decorate8([
+  CustomElement6({ tagName: P6 + "-" + TAG_MIDDLE_NAME + "-path" })
+], PacemPathElement);
+
+// packages/2d/dist/esm/polygon.js
+import { CustomElement as CustomElement7, Watch as Watch9, PropertyConverters as PropertyConverters8, P as P7, Utils as Utils8 } from "@pacem/pacem-core";
+var __decorate9 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemPolygonElement_1;
+var PacemPolygonElement = PacemPolygonElement_1 = class PacemPolygonElement2 extends ShapeElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "radius":
+        case "starIndent":
+        case "sides":
+          this.recomputeShape();
+          break;
+      }
+    }
+  }
+  getPathData() {
+    const sides = this.sides, radius = this.radius, center = this.center;
+    if (!Utils8.isNull(sides) && !Utils8.isNull(radius)) {
+      return PacemPolygonElement_1.getPathData(center, radius, sides, this.starIndent);
+    }
+    return null;
+  }
+  getShapeGeometry() {
+    const c = this.center ?? { x: 0, y: 0 }, r = this.radius ?? 0, sides = this.sides ?? 3, si = this.starIndent;
+    if (sides < 3) {
+      return Shape.empty();
+    }
+    return PacemPolygonElement_1.getShapeGeometry(c, r, sides, si);
+  }
+  static getShapeGeometry(center, radius, sides, starIndent = 0) {
+    const p0 = { x: center.x, y: center.y - radius };
+    let retval = `M ${p0.x} ${p0.y}`;
+    const vertices = [p0];
+    const theta = 2 * Math.PI / sides, theta2 = 0.5 * theta, isStar = starIndent > 0, apothem = radius * Math.cos(theta2);
+    for (let j = 1; j < sides; j++) {
+      const angle = j * theta, x = center.x + Math.sin(angle) * radius, y = center.y - Math.cos(angle) * radius;
+      if (isStar) {
+        const innerRadius = apothem * (1 - starIndent);
+        const angle2 = angle - theta2, x1 = center.x + Math.sin(angle2) * innerRadius, y1 = center.y - Math.cos(angle2) * innerRadius;
+        retval += ` L ${x1} ${y1} L ${x} ${y}`;
+        vertices.push({ x: x1, y: y1 });
+      } else {
+        retval += ` L ${x} ${y}`;
+      }
+      vertices.push({ x, y });
+    }
+    if (isStar) {
+      const innerRadius = apothem * (1 - starIndent);
+      const angle2 = 2 * Math.PI - theta2, x1 = center.x + Math.sin(angle2) * innerRadius, y1 = center.y - Math.cos(angle2) * innerRadius;
+      retval += ` L ${x1} ${y1}`;
+      vertices.push({ x: x1, y: y1 });
+    }
+    vertices.push(p0);
+    const width = radius * 2;
+    return {
+      pathData: retval + " Z",
+      vertices,
+      boundingRect: { x: p0.x - radius, y: p0.y, width, height: width }
+    };
+  }
+  static getPathData(center, radius, sides, starIndent = 0) {
+    const { pathData } = PacemPolygonElement_1.getShapeGeometry(center, radius, sides, starIndent);
+    return pathData;
+  }
+};
+__decorate9([
+  Watch9({ emit: false, converter: PropertyConverters8.Number })
+], PacemPolygonElement.prototype, "sides", void 0);
+__decorate9([
+  Watch9({ emit: false, converter: PropertyConverters8.Number })
+], PacemPolygonElement.prototype, "radius", void 0);
+__decorate9([
+  Watch9({ emit: false, converter: PropertyConverters8.Point })
+], PacemPolygonElement.prototype, "center", void 0);
+__decorate9([
+  Watch9({ emit: false, converter: PropertyConverters8.Number })
+], PacemPolygonElement.prototype, "starIndent", void 0);
+PacemPolygonElement = PacemPolygonElement_1 = __decorate9([
+  CustomElement7({ tagName: P7 + "-" + TAG_MIDDLE_NAME + "-polygon" })
+], PacemPolygonElement);
+
+// packages/2d/dist/esm/polyline.js
+import { CustomElement as CustomElement8, Watch as Watch10, PropertyConverters as PropertyConverters9, P as P8, Utils as Utils9 } from "@pacem/pacem-core";
+import { parseAsNumericalArray } from "@pacem/pacem-foundation";
+var __decorate10 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemPolylineElement_1;
+var PointArrayOrJsonConverter = {
+  convert: (attr) => {
+    const arr = parseAsNumericalArray(attr);
+    if (arr.length % 2 === 0) {
+      const retval = [];
+      for (let j = 0; j < arr.length; j += 2) {
+        retval.push({ x: arr[j], y: arr[j + 1] });
+      }
+      return retval;
+    }
+    return JSON.parse(attr);
+  },
+  convertBack: (prop) => JSON.stringify(prop)
+};
+var PacemPolylineElement = PacemPolylineElement_1 = class PacemPolylineElement2 extends ShapeElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "points":
+        case "closed":
+          this.recomputeShape();
+          break;
+      }
+    }
+  }
+  static getShapeGeometry(points, closed) {
+    if (Utils9.isNullOrEmpty(points)) {
+      return Shape.empty();
+    }
+    let d = "";
+    let xmin = Number.MAX_VALUE, ymin = Number.MAX_VALUE, xmax = Number.MIN_VALUE, ymax = Number.MIN_VALUE;
+    for (let j = 0; j < points.length; j++) {
+      const { x, y } = points[j];
+      d += `${j === 0 ? "M" : "L"} ${x} ${y} `;
+      xmin = Math.min(xmin, x);
+      xmax = Math.max(xmax, x);
+      ymin = Math.min(ymin, y);
+      ymax = Math.max(ymax, y);
+    }
+    const boundingRect = { x: xmin, y: ymin, width: xmax - xmin, height: ymax - ymin };
+    if (closed) {
+      d += "Z";
+    }
+    return { pathData: d, vertices: points, boundingRect };
+  }
+  getShapeGeometry() {
+    return PacemPolylineElement_1.getShapeGeometry(this.points, this.closed);
+  }
+  getPathData() {
+    const { pathData } = this.getShapeGeometry();
+    return pathData;
+  }
+  static getPathData(points, closed) {
+    const { pathData } = PacemPolylineElement_1.getShapeGeometry(points, closed);
+    return pathData;
+  }
+};
+__decorate10([
+  Watch10({ emit: false, converter: PointArrayOrJsonConverter })
+], PacemPolylineElement.prototype, "points", void 0);
+__decorate10([
+  Watch10({ emit: false, converter: PropertyConverters9.Boolean })
+], PacemPolylineElement.prototype, "closed", void 0);
+PacemPolylineElement = PacemPolylineElement_1 = __decorate10([
+  CustomElement8({ tagName: P8 + "-" + TAG_MIDDLE_NAME + "-polyline" })
+], PacemPolylineElement);
+
+// packages/2d/dist/esm/image.js
+import { CustomElement as CustomElement9, Watch as Watch11, PropertyConverters as PropertyConverters10, P as P9 } from "@pacem/pacem-core";
+var __decorate11 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemImageElement = class PacemImageElement2 extends UiElement {
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (!first) {
+      switch (name) {
+        case "src":
+        case "x":
+        case "y":
+        case "width":
+        case "height":
+          this.stage?.draw(this);
+          break;
+      }
+    }
+  }
+};
+__decorate11([
+  Watch11({ emit: false, converter: PropertyConverters10.String })
+], PacemImageElement.prototype, "src", void 0);
+__decorate11([
+  Watch11({ emit: false, converter: PropertyConverters10.Number })
+], PacemImageElement.prototype, "x", void 0);
+__decorate11([
+  Watch11({ emit: false, converter: PropertyConverters10.Number })
+], PacemImageElement.prototype, "y", void 0);
+__decorate11([
+  Watch11({ emit: false, converter: PropertyConverters10.Number })
+], PacemImageElement.prototype, "width", void 0);
+__decorate11([
+  Watch11({ emit: false, converter: PropertyConverters10.Number })
+], PacemImageElement.prototype, "height", void 0);
+PacemImageElement = __decorate11([
+  CustomElement9({ tagName: P9 + "-" + TAG_MIDDLE_NAME + "-image" })
+], PacemImageElement);
+
+// packages/2d/dist/esm/text.js
+import { CustomElement as CustomElement10, Watch as Watch12, PropertyConverters as PropertyConverters11, P as P10, Utils as Utils10 } from "@pacem/pacem-core";
+var __decorate12 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemTextElement = class PacemTextElement2 extends UiElement {
+  propertyChangedCallback(name, old, val, first) {
+    if (!first) {
+      switch (name) {
+        case "text":
+        case "color":
+        case "fontFamily":
+        case "fontSize":
+        case "fontWeight":
+        case "fontStyle":
+        case "anchor":
+          if (!Utils10.isNull(this.stage)) {
+            this.stage.draw(this);
+          }
+          break;
+      }
+    }
+  }
+};
+__decorate12([
+  Watch12({ emit: false, converter: PropertyConverters11.String })
+], PacemTextElement.prototype, "text", void 0);
+__decorate12([
+  Watch12({ emit: false, converter: PropertyConverters11.String })
+], PacemTextElement.prototype, "color", void 0);
+__decorate12([
+  Watch12({ emit: false, converter: PropertyConverters11.String })
+], PacemTextElement.prototype, "fontFamily", void 0);
+__decorate12([
+  Watch12({ emit: false, converter: PropertyConverters11.Number })
+], PacemTextElement.prototype, "fontSize", void 0);
+__decorate12([
+  Watch12({ emit: false, converter: PropertyConverters11.String })
+], PacemTextElement.prototype, "fontWeight", void 0);
+__decorate12([
+  Watch12({ emit: false, converter: PropertyConverters11.String })
+], PacemTextElement.prototype, "fontStyle", void 0);
+__decorate12([
+  Watch12({ emit: false, converter: PropertyConverters11.Point })
+], PacemTextElement.prototype, "anchor", void 0);
+__decorate12([
+  Watch12({ emit: false, converter: PropertyConverters11.String })
+], PacemTextElement.prototype, "textAnchor", void 0);
+PacemTextElement = __decorate12([
+  CustomElement10({ tagName: P10 + "-" + TAG_MIDDLE_NAME + "-text" })
+], PacemTextElement);
+
+// packages/2d/dist/esm/adapters/utils.js
+import { Utils as Utils11, UI } from "@pacem/pacem-core";
+import { Rect as Rect3 } from "@pacem/pacem-foundation";
+var AdapterUtils = class {
+  static stageDispatch(stage, type, evt) {
+    if (stage instanceof EventTarget) {
+      stage.dispatchEvent(new StageEvent("stage" + type, stage, evt, stage.transformMatrix));
+    }
+  }
+  static isValidViewbox(viewbox) {
+    return !Utils11.isNullOrEmpty(viewbox) && Rect3.isRect(viewbox) && Number.isFinite(viewbox.x) && Number.isFinite(viewbox.y) && Number.isFinite(viewbox.width) && Number.isFinite(viewbox.height);
+  }
+  static itemDispatch(target, type, offset) {
+    if (Utils11.isNull(target?.stage)) {
+      return false;
+    }
+    var dragArgs, originalEvent, evtType;
+    if (offset instanceof Event) {
+      originalEvent = offset;
+    } else {
+      dragArgs = { item: target, offset };
+    }
+    if (typeof type === "string") {
+      evtType = type;
+    } else {
+      evtType = type.type;
+      originalEvent = type.originalEvent;
+    }
+    const m = target.stage.transformMatrix;
+    const evt = () => offset instanceof Event ? new DrawableEvent(evtType, target, originalEvent, m) : new DragEvent(evtType, { detail: dragArgs, cancelable: evtType === UI.DragDropEventType.Init || evtType === UI.DragDropEventType.Drag }, originalEvent, m);
+    const itemevt = offset instanceof Event ? new DrawableEvent("item" + evtType, target, originalEvent, m) : new DragEvent("item" + evtType, { detail: dragArgs, cancelable: evtType === UI.DragDropEventType.Init || evtType === UI.DragDropEventType.Drag }, originalEvent, m);
+    var prevent = false;
+    if (target instanceof EventTarget) {
+      const evnt = evt();
+      target.dispatchEvent(evnt);
+      prevent = evnt.defaultPrevented;
+    }
+    target.stage.dispatchEvent(itemevt);
+    return prevent || itemevt.defaultPrevented;
+  }
+};
+
+// packages/2d/dist/esm/adapters/canvasadapter.js
+import { CustomElement as CustomElement11, P as P11, CustomElementUtils as CustomElementUtils2, Utils as Utils13, Logging, CustomEventUtils as CustomEventUtils2, UI as UI2, avoidHandler as avoidHandler2 } from "@pacem/pacem-core";
+import { Matrix2D as Matrix2D4, Rect as Rect4 } from "@pacem/pacem-foundation";
+
+// packages/2d/dist/esm/adapter.js
+import { PacemEventTarget, Utils as Utils12 } from "@pacem/pacem-core";
+var JPEG_QUALITY = 0.9;
+var Pacem2DAdapterElement = class extends PacemEventTarget {
+  constructor() {
+    super(...arguments);
+    this.DefaultShapeValues = {
+      stroke: "#000",
+      lineWidth: 1,
+      fill: "#fff"
+    };
+  }
+  snapshotElement(element, bgColor, type, quality) {
+    const jpeg = !Utils12.isNullOrEmpty(bgColor), mime = type ?? (jpeg ? "image/jpeg" : null), compression = quality ?? (jpeg ? JPEG_QUALITY : null);
+    return Utils12.snapshotElement(element, bgColor, mime, compression);
+  }
+};
+
+// packages/2d/dist/esm/adapters/canvasadapter.js
+var __decorate13 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var CANVAS_SCENE_VAR = "pacem:2d-canvas-scene";
+var PARENT_MATRIX_VAR = "pacem:2d-parent-matrix";
+var WORLD_MATRIX_VAR = "pacem:2d-world-matrix";
+var SETVAR = CustomElementUtils2.setAttachedPropertyValue;
+var GETVAR = CustomElementUtils2.getAttachedPropertyValue;
+function isNone(fillOrStroke) {
+  return fillOrStroke === "none" || Utils13.isNullOrEmpty(fillOrStroke);
+}
+function fallback(v, f) {
+  return Utils13.isNull(v) ? f : v;
+}
+var PacemCanvasAdapterElement = class PacemCanvasAdapterElement2 extends Pacem2DAdapterElement {
+  constructor() {
+    super(...arguments);
+    this._pointer = {
+      page: { x: Number.NaN, y: Number.NaN },
+      screen: { x: Number.NaN, y: Number.NaN },
+      client: { x: Number.NaN, y: Number.NaN }
+    };
+    this._dragInitHandler = (evt) => {
+      const hitTarget = this._hitTarget;
+      if (Utils13.isNull(hitTarget) || !isUiObject(hitTarget) || !hitTarget.draggable) {
+        evt.preventDefault();
+        return;
+      }
+      const args = evt.detail, drawable = hitTarget, initialMatrix = hitTarget.transformMatrix ?? Matrix2D4.identity, parentMatrix = GETVAR(hitTarget, PARENT_MATRIX_VAR, Matrix2D4.identity);
+      args.data = {
+        item: drawable,
+        initialTransformMatrix: initialMatrix,
+        parentMatrix
+      };
+      const reject = AdapterUtils.itemDispatch(drawable, evt, { x: 0, y: 0 });
+      if (reject) {
+        evt.preventDefault();
+      }
+    };
+    this._draggingHandler = (evt) => {
+      avoidHandler2(evt);
+      this._dragging = true;
+      const args = evt.detail;
+      const data = args.data;
+      const screenOffset = { x: args.currentPosition.x - args.origin.x, y: args.currentPosition.y - args.origin.y };
+      const offset = {
+        x: screenOffset.x * data.parentMatrix.a + data.initialTransformMatrix.e,
+        y: screenOffset.y * data.parentMatrix.d + data.initialTransformMatrix.f
+      };
+      const stageTransformMatrix = data.item.stage.transformMatrix;
+      const rejected = AdapterUtils.itemDispatch(data.item, evt, { x: screenOffset.x * stageTransformMatrix.a + stageTransformMatrix.e, y: screenOffset.y * stageTransformMatrix.d + stageTransformMatrix.f });
+      if (!rejected) {
+        if (data.item instanceof UiElement) {
+          data.item.translateX = offset.x;
+          data.item.translateY = offset.y;
+        } else {
+          const init = data.initialTransformMatrix, actual = { a: init.a, b: init.b, c: init.c, d: init.d, e: offset.x, f: offset.y };
+          Utils13.extend(data.item, { transformMatrix: actual });
+        }
+      }
+    };
+    this._dragEndHandler = (evt) => {
+      this._dragging = false;
+      const args = evt.detail, data = args.data, transform = data.item.transformMatrix;
+      AdapterUtils.itemDispatch(data.item, evt, { x: transform.e, y: transform.f });
+    };
+    this._mouseleaveHandler = (evt) => {
+      if (this._dragging) {
+        return;
+      }
+      const hitTarget = this._hitTarget;
+      if (Utils13.isNull(hitTarget)) {
+        return;
+      }
+      this._scopeEvent = evt;
+      const nap = { x: Number.NaN, y: Number.NaN };
+      this._pointer = { page: nap, screen: nap, client: nap };
+      const canvas = evt.srcElement;
+      const stage = GETVAR(canvas, CANVAS_SCENE_VAR);
+      this._requestDraw(stage);
+    };
+    this._mousemoveHandler = (evt) => {
+      this._scopeEvent = evt;
+      this._pointer = CustomEventUtils2.getEventCoordinates(evt);
+      const canvas = evt.srcElement;
+      const stage = GETVAR(canvas, CANVAS_SCENE_VAR);
+      this._requestDraw(stage);
+      if (!this._dragging) {
+        if (!Utils13.isNull(this._hitTarget)) {
+          AdapterUtils.stageDispatch(stage, "move", evt);
+        }
+      }
+    };
+    this._mouseDownUpHandler = (evt) => {
+      this._scopeEvent = evt;
+      this._pointer = CustomEventUtils2.getEventCoordinates(evt);
+      const canvas = evt.target;
+      if (canvas instanceof HTMLCanvasElement) {
+        const stage = GETVAR(canvas, CANVAS_SCENE_VAR), hitTarget = this._hitTarget;
+        const type = evt.type.replace(/^(mouse|touch)/, ""), fineType = type === "end" ? "click" : type;
+        const opts = getStageOptions(stage);
+        if (CustomEventUtils2.matchModifiers(evt, opts.clickModifiers)) {
+          if (!Utils13.isNull(hitTarget) && hitTarget.stage === stage) {
+            AdapterUtils.itemDispatch(hitTarget, fineType, evt);
+          } else {
+            AdapterUtils.stageDispatch(stage, fineType, evt);
+          }
+        }
+      }
+    };
+    this._scenes = /* @__PURE__ */ new WeakMap();
+    this._handles = /* @__PURE__ */ new WeakMap();
+  }
+  snapshot(stage, backgroundColor, type, quality) {
+    const scenes = this._scenes;
+    if (scenes.has(stage)) {
+      const ctx2d = scenes.get(stage).context, srcCanvas = ctx2d.canvas;
+      return this.snapshotElement(srcCanvas, backgroundColor, type, quality);
+    } else {
+      return Promise.resolve(null);
+    }
+  }
+  getCanvas(stage) {
+    const scenes = this._scenes;
+    if (scenes.has(stage)) {
+      const ctx2d = scenes.get(stage).context;
+      return ctx2d.canvas;
+    } else {
+      return null;
+    }
+  }
+  _getScreenInverseMatrix(m, offset) {
+    return Matrix2D4.invert({ a: m.a, b: m.b, c: m.c, d: m.d, e: m.e + offset.x, f: m.f + offset.y });
+  }
+  getTransformMatrix(scene) {
+    const scenes = this._scenes;
+    if (scenes.has(scene)) {
+      return scenes.get(scene).screenInverseMatrix;
+    }
+    return Matrix2D4.identity;
+  }
+  #dragger;
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    const dragDrop = this.#dragger = document.createElement(P11 + "-drag-drop");
+    dragDrop.mode = UI2.DragDataMode.Copy;
+    dragDrop.dropBehavior = UI2.DropBehavior.None;
+    dragDrop.spillBehavior = UI2.DropTargetMissedBehavior.None;
+    const floater = document.createElement("div");
+    floater.hidden = true;
+    dragDrop.floater = floater;
+    const shell = CustomElementUtils2.findAncestorShell(this);
+    shell.appendChild(dragDrop);
+    dragDrop.addEventListener(UI2.DragDropEventType.Init, this._dragInitHandler, false);
+    dragDrop.addEventListener(UI2.DragDropEventType.Drag, this._draggingHandler, false);
+    dragDrop.addEventListener(UI2.DragDropEventType.End, this._dragEndHandler, false);
+  }
+  disconnectedCallback() {
+    const dragger = this.#dragger;
+    if (!Utils13.isNull(dragger)) {
+      dragger.removeEventListener(UI2.DragDropEventType.Init, this._dragInitHandler, false);
+      dragger.removeEventListener(UI2.DragDropEventType.Drag, this._draggingHandler, false);
+      dragger.removeEventListener(UI2.DragDropEventType.End, this._dragEndHandler, false);
+      dragger.remove();
+    }
+    super.disconnectedCallback();
+  }
+  invalidateSize(scene, size) {
+    const scenes = this._scenes;
+    if (!Utils13.isNull(scene) && !Utils13.isNullOrEmpty(size)) {
+      if (scenes.has(scene)) {
+        const tuple = scenes.get(scene), ctx = tuple.context;
+        ctx.canvas.width = size.width;
+        ctx.canvas.height = size.height;
+        const offset = tuple.offset = Utils13.offsetRect(ctx.canvas);
+        const stage = { x: 0, y: 0, width: size.width, height: size.height }, aspectRatio = scene.aspectRatio, viewbox = scene.viewbox;
+        if (AdapterUtils.isValidViewbox(viewbox)) {
+          let mode = "contain", align = "center", valign = "middle";
+          if (typeof aspectRatio === "object") {
+            mode = aspectRatio.slice ? "cover" : "contain";
+            switch (aspectRatio.x) {
+              case "min":
+                align = "left";
+                break;
+              case "max":
+                align = "right";
+                break;
+            }
+            switch (aspectRatio.y) {
+              case "min":
+                valign = "top";
+                break;
+              case "max":
+                valign = "bottom";
+                break;
+            }
+          }
+          ;
+          const mscale = Rect4.findTransform({ x: 0, y: 0, width: viewbox.width, height: viewbox.height }, stage, mode, align, valign);
+          const m = Matrix2D4.translate(mscale, { x: -mscale.a * viewbox.x, y: -mscale.a * viewbox.y });
+          tuple.transformMatrix = m;
+          tuple.screenInverseMatrix = this._getScreenInverseMatrix(m, offset);
+        } else {
+          tuple.transformMatrix = Matrix2D4.identity;
+        }
+      }
+    }
+    this._requestDraw(scene);
+  }
+  getHitTarget(stage) {
+    const target = this._hitTarget;
+    if (!Utils13.isNull(target) && target.stage === stage) {
+      return target;
+    }
+    return null;
+  }
+  initialize(scene) {
+    if (Utils13.isNull(scene)) {
+      throw "Provided scene is null or undefined.";
+    }
+    const scenes = this._scenes;
+    const dragger = this.#dragger;
+    if (scenes.has(scene)) {
+      const canvas2 = scenes.get(scene).context.canvas;
+      if (!Utils13.isNull(dragger)) {
+        dragger.register(canvas2);
+      }
+      return canvas2;
+    }
+    const stage = scene.stage;
+    stage.innerHTML = "";
+    const canvas = document.createElement("canvas");
+    canvas.setAttribute("part", "stage");
+    SETVAR(canvas, CANVAS_SCENE_VAR, scene);
+    const context = canvas.getContext("2d");
+    canvas.addEventListener("mousemove", this._mousemoveHandler, false);
+    canvas.addEventListener("mouseleave", this._mouseleaveHandler, false);
+    canvas.addEventListener("touchstart", this._mouseDownUpHandler, { passive: true });
+    canvas.addEventListener("touchmove", this._mouseDownUpHandler, { passive: true });
+    canvas.addEventListener("touchend", this._mouseDownUpHandler, { passive: true });
+    canvas.addEventListener("click", this._mouseDownUpHandler, false);
+    canvas.addEventListener("mousedown", this._mouseDownUpHandler, false);
+    canvas.addEventListener("mouseup", this._mouseDownUpHandler, false);
+    stage.appendChild(canvas);
+    scenes.set(scene, { context, transformMatrix: Matrix2D4.identity, offset: Utils13.offsetRect(canvas), screenInverseMatrix: Matrix2D4.identity });
+    if (!Utils13.isNull(dragger)) {
+      dragger.register(canvas);
+    }
+    return canvas;
+  }
+  dispose(scene) {
+    const scenes = this._scenes;
+    if (scenes.has(scene)) {
+      var tuple = scenes.get(scene), context = tuple.context, canvas = context.canvas;
+      const dragger = this.#dragger;
+      if (!Utils13.isNull(dragger)) {
+        dragger.unregister(canvas);
+      }
+      canvas.removeEventListener("click", this._mouseDownUpHandler, false);
+      canvas.removeEventListener("touchend", this._mouseDownUpHandler, false);
+      canvas.removeEventListener("mousedown", this._mouseDownUpHandler, false);
+      canvas.removeEventListener("mouseup", this._mouseDownUpHandler, false);
+      canvas.removeEventListener("touchstart", this._mouseDownUpHandler);
+      canvas.removeEventListener("mouseleave", this._mouseleaveHandler, false);
+      canvas.removeEventListener("mousemove", this._mousemoveHandler, false);
+      canvas.remove();
+      scenes.delete(scene);
+    }
+  }
+  _requestDraw(scene) {
+    const handles = this._handles;
+    if (handles.has(scene)) {
+      cancelAnimationFrame(handles.get(scene));
+    }
+    const throttle = () => {
+      this.draw(scene);
+      return requestAnimationFrame(() => {
+      });
+    };
+    handles.set(scene, throttle());
+  }
+  #canvasCssStyle;
+  draw(scene) {
+    const scenes = this._scenes, handles = this._handles;
+    if (!Utils13.isNull(scene)) {
+      if (scene.adapter !== this) {
+        if (scenes.has(scene)) {
+          scenes.delete(scene);
+          handles.get(scene);
+        }
+        return;
+      }
+      if (!scenes.has(scene)) {
+        this.initialize(scene);
+        return;
+      }
+      if (handles.has(scene)) {
+        cancelAnimationFrame(handles.get(scene));
+      }
+      const formerHitTarget = this._hitTarget;
+      const items = scene.datasource || [];
+      this._hitTarget = null;
+      const tuple = scenes.get(scene), context = tuple.context, canvas = context.canvas;
+      this.#canvasCssStyle = getComputedStyle(canvas);
+      context.resetTransform();
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      const m = tuple.transformMatrix;
+      context.setTransform(m);
+      const pointer = this._pointer, offset = tuple.offset, point = Number.isNaN(pointer.page.x) || Number.isNaN(pointer.page.y) ? null : { x: pointer.page.x - offset.x, y: pointer.page.y - offset.y };
+      for (let drawable of items) {
+        this._draw(scene, context, drawable, { transformMatrix: m }, point);
+      }
+      const currentHitTarget = this._hitTarget;
+      if (currentHitTarget != formerHitTarget) {
+        if (!Utils13.isNull(formerHitTarget)) {
+          if (formerHitTarget instanceof Element) {
+            formerHitTarget.dispatchEvent(new DrawableEvent("out", formerHitTarget, this._scopeEvent, m));
+          }
+          scene.dispatchEvent(new DrawableEvent("itemout", formerHitTarget, this._scopeEvent, m));
+        }
+        if (!Utils13.isNull(currentHitTarget)) {
+          if (currentHitTarget instanceof Element) {
+            currentHitTarget.dispatchEvent(new DrawableEvent("over", currentHitTarget, this._scopeEvent, m));
+          }
+          scene.dispatchEvent(new DrawableEvent("itemover", currentHitTarget, this._scopeEvent, m));
+        }
+      }
+    }
+  }
+  _draw(scene, ctx, item, state, point) {
+    item.stage ??= scene;
+    if (isDrawable(item)) {
+      if (item.hide) {
+        return;
+      }
+    }
+    if (isUiObject(item) && item.draggable && !item.hide && !item.inert) {
+      SETVAR(item, PARENT_MATRIX_VAR, ctx.getTransform().inverse());
+    }
+    let t;
+    if (isUiObject(item)) {
+      t = item.transformMatrix;
+      if (!Utils13.isNull(t) && !Matrix2D4.isIdentity(t)) {
+        ctx.transform(t.a, t.b, t.c, t.d, t.e, t.f);
+      }
+    }
+    let contextPresentationState = state;
+    if (isPresentationObject(item)) {
+      contextPresentationState = PresentationState.combine(item, state, ctx.getTransform());
+      this._setPresentationState(ctx, contextPresentationState);
+    }
+    if (isShape(item) || item instanceof ShapeElement) {
+      this._drawShape(ctx, item, point);
+    } else if (isText(item) || item instanceof PacemTextElement) {
+      this._drawText(ctx, item, point);
+    } else if (isImage(item) || item instanceof PacemImageElement) {
+      this._drawImage(ctx, item, point);
+    } else if (isGroup(item) || item instanceof PacemGroupElement) {
+      for (let child of item.childDrawables || []) {
+        this._draw(scene, ctx, child, contextPresentationState, point);
+      }
+    }
+    if (isUiObject(item) && item.draggable && !item.hide && !item.inert) {
+      SETVAR(item, WORLD_MATRIX_VAR, ctx.getTransform().inverse());
+    }
+    this._setPresentationState(ctx, state);
+  }
+  _setPresentationState(ctx, item) {
+    ctx.setTransform(item.transformMatrix);
+    if (!Utils13.isNullOrEmpty(item.stroke) && !isNone(item.stroke)) {
+      ctx.strokeStyle = item.stroke;
+    } else {
+      ctx.strokeStyle = "transparent";
+    }
+    if (!Utils13.isNullOrEmpty(item.lineWidth)) {
+      ctx.lineWidth = item.lineWidth;
+    } else {
+      ctx.lineWidth = 0;
+    }
+    if (!Utils13.isNullOrEmpty(item.dashArray)) {
+      ctx.setLineDash(item.dashArray);
+    } else {
+      ctx.setLineDash([]);
+    }
+    if (!Utils13.isNullOrEmpty(item.lineCap)) {
+      ctx.lineCap = item.lineCap;
+    } else {
+      ctx.lineCap = "butt";
+    }
+    if (!Utils13.isNullOrEmpty(item.lineJoin)) {
+      ctx.lineJoin = item.lineJoin;
+    } else {
+      ctx.lineJoin = "miter";
+    }
+    if (typeof item.fill === "object" && !Utils13.isNullOrEmpty(item.fill)) {
+      const { stops } = item.fill;
+      let gradient;
+      if (isLinearGradient(item.fill)) {
+        const { start, end } = item.fill;
+        gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+      } else if (isRadialGradient(item.fill)) {
+        const { center, radius } = item.fill;
+        gradient = ctx.createRadialGradient(center.x, center.y, radius, center.x, center.y, radius);
+      } else {
+        throw new Error("Unmanaged gradient type.");
+      }
+      for (let stop of stops) {
+        gradient.addColorStop(stop.offset, stop.color);
+      }
+      ctx.fillStyle = gradient;
+    } else if (!Utils13.isNullOrEmpty(item.fill) && typeof item.fill === "string" && !isNone(item.fill)) {
+      ctx.fillStyle = item.fill;
+    } else {
+      ctx.fillStyle = "transparent";
+    }
+    if (!Utils13.isNullOrEmpty(item.opacity)) {
+      ctx.globalAlpha = item.opacity;
+    } else {
+      ctx.globalAlpha = 1;
+    }
+  }
+  _drawImage(ctx, item, point) {
+    const CANVAS_IMAGESOURCE_VAR = "pacem:2d-canvas-imagesrc";
+    let img = GETVAR(item, CANVAS_IMAGESOURCE_VAR);
+    const imgLoadHandler = () => {
+      let dw = img.naturalWidth, dh = img.naturalHeight, w = item.width, h = item.height;
+      if (w > 0 && h > 0) {
+      } else if (w > 0) {
+        h = dh * w / dw;
+      } else if (h > 0) {
+        w = dw * h / dh;
+      } else {
+        w = dw;
+        h = dh;
+      }
+      if (!this._dragging && !item.inert && !Utils13.isNull(point)) {
+        const path2D = new Path2D(`M ${item.x} ${item.y} h ${w} v ${h} H ${item.x} Z`);
+        if (ctx.isPointInPath(path2D, point.x, point.y)) {
+          this._hitTarget = item;
+        }
+      }
+      ctx.globalAlpha = fallback(item.opacity, 1);
+      ctx.drawImage(img, item.x, item.y, w, h);
+    };
+    if (Utils13.isNull(img)) {
+      img = new Image();
+      img.src = item.src;
+      img.onload = () => {
+        SETVAR(item, CANVAS_IMAGESOURCE_VAR, img);
+        imgLoadHandler();
+      };
+    } else {
+      imgLoadHandler();
+    }
+  }
+  _drawText(ctx, item, point) {
+    const defaults = this.DefaultShapeValues;
+    const color = ctx.fillStyle = fallback(item.color, defaults.stroke);
+    const m = ctx.getTransform(), fontSize = item.fontSize > 0 ? `${item.fontSize}px` : this.#canvasCssStyle.fontSize, fontStyle = item.fontStyle || this.#canvasCssStyle.fontStyle, fontWeight = item.fontWeight || this.#canvasCssStyle.fontWeight;
+    ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${item.fontFamily ?? this.#canvasCssStyle.fontFamily}`;
+    ctx.textAlign = item.textAnchor === "middle" ? "center" : item.textAnchor;
+    ctx.fillText(item.text, item.anchor.x, item.anchor.y);
+    ctx.globalAlpha = fallback(item.opacity, 1);
+    const hasColor = !isNone(color);
+    if (!this._dragging && !item.inert && !Utils13.isNull(point)) {
+      const bbox = ctx.measureText(item.text);
+      const width = bbox.width, height = bbox.actualBoundingBoxAscent + bbox.actualBoundingBoxDescent, x = item.anchor.x - bbox.actualBoundingBoxLeft, y = item.anchor.y - bbox.actualBoundingBoxAscent;
+      const path2D = new Path2D(`M ${x} ${y} h ${width} v ${height} H ${x} z`);
+      if (hasColor && ctx.isPointInPath(path2D, point.x, point.y)) {
+        this._hitTarget = item;
+      }
+    }
+  }
+  _drawShape(ctx, item, point) {
+    if (Utils13.isNullOrEmpty(item?.pathData)) {
+      return;
+    }
+    ctx.beginPath();
+    const hasFill = typeof ctx.fillStyle !== "string" || !isNone(ctx.fillStyle), hasStroke = typeof ctx.strokeStyle !== "string" || !isNone(ctx.strokeStyle);
+    var path2D = new Path2D(item.pathData);
+    if (!this._dragging && !item.inert && !Utils13.isNull(point)) {
+      if (hasFill && ctx.isPointInPath(path2D, point.x, point.y) || hasStroke && ctx.isPointInStroke(path2D, point.x, point.y)) {
+        this._hitTarget = item;
+      }
+    }
+    if (hasStroke) {
+      ctx.stroke(path2D);
+    }
+    if (hasFill) {
+      ctx.fill(path2D);
+    }
+    const hasEnoughVertices = !Utils13.isNullOrEmpty(item.vertices) && item.vertices.length > 1, hasMarkerEnd = !Utils13.isNull(item.markerEnd), hasMarkerStart = !Utils13.isNull(item.markerStart), hasMarkerMid = !Utils13.isNull(item.markerMid);
+    if (hasMarkerEnd || hasMarkerMid || hasMarkerStart) {
+      if (!hasEnoughVertices) {
+        this.log(Logging.LogLevel.Warn, "Not enough vertices were explicited in order to make markers renderable.");
+      }
+    }
+    if (hasEnoughVertices) {
+      const matrix = ctx.getTransform();
+      if (hasMarkerStart) {
+        const marker = item.markerEnd, from = item.vertices[1], to = item.vertices[0];
+        const orientation = Math.atan2(to.y - from.y, to.x - from.x);
+        this._drawMarker(ctx, marker, to, orientation);
+      }
+      if (hasMarkerMid) {
+        const marker = item.markerEnd;
+        for (let j = 1; j < item.vertices.length - 1; j++) {
+          ctx.setTransform(matrix);
+          const from = item.vertices[j], to = item.vertices[j + 1];
+          const orientation = Math.atan2(to.y - from.y, to.x - from.x);
+          this._drawMarker(ctx, marker, to, orientation);
+        }
+      }
+      if (hasMarkerEnd) {
+        ctx.setTransform(matrix);
+        const marker = item.markerEnd, from = item.vertices[item.vertices.length - 2], to = item.vertices[item.vertices.length - 1];
+        const orientation = Math.atan2(to.y - from.y, to.x - from.x);
+        this._drawMarker(ctx, marker, to, orientation);
+      }
+    }
+  }
+  _drawMarker(ctx, marker, point, orientation) {
+    const defaults = this.DefaultShapeValues;
+    const refX = marker.ref?.x || 0, refY = marker.ref?.y || 0;
+    const width = (marker.width || 1) * ctx.lineWidth, height = (marker.width || 1) * ctx.lineWidth;
+    let viewbox = marker.viewbox, stage = { x: 0, y: 0, width, height };
+    if (Utils13.isNull(viewbox)) {
+      viewbox = stage;
+    }
+    const mscale = { a: stage.width / viewbox.width, d: stage.height / viewbox.height };
+    ctx.translate(point.x, point.y);
+    ctx.rotate(orientation);
+    ctx.scale(mscale.a, mscale.d);
+    ctx.translate(-refX, -refY);
+    ctx.fillStyle = fallback(marker.fill, defaults.fill);
+    ctx.strokeStyle = fallback(marker.stroke, defaults.stroke);
+    const hasMarkerFill = !isNone(marker.fill), hasMarkerStroke = !isNone(marker.stroke);
+    var markerPath2D = new Path2D(marker.pathData);
+    if (hasMarkerFill) {
+      ctx.fill(markerPath2D);
+    }
+    if (hasMarkerStroke) {
+      ctx.stroke(markerPath2D);
+    }
+  }
+};
+PacemCanvasAdapterElement = __decorate13([
+  CustomElement11({ tagName: P11 + "-" + TAG_MIDDLE_NAME + "-canvas-adapter" })
+], PacemCanvasAdapterElement);
+
+// packages/2d/dist/esm/adapters/svgadapter.js
+import { CustomElement as CustomElement12, P as P12, CustomElementUtils as CustomElementUtils3, CustomEventUtils as CustomEventUtils3, Utils as Utils14, UI as UI3, avoidHandler as avoidHandler3 } from "@pacem/pacem-core";
+import { Matrix2D as Matrix2D5 } from "@pacem/pacem-foundation";
+var __decorate14 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SVG_NS = "http://www.w3.org/2000/svg";
+var DRAWABLE_VAR = "pacem:2-svg-drawable";
+var STAGE_VAR = "pacem:2d-svg-stage";
+var GETVAR2 = CustomElementUtils3.getAttachedPropertyValue;
+var SETVAR2 = CustomElementUtils3.setAttachedPropertyValue;
+var DELVAR = CustomElementUtils3.deleteAttachedPropertyValue;
+function fallback2(v, f) {
+  return Utils14.isNull(v) ? f : v;
+}
+function replaceChildAt(parent, newChild, targetIndex) {
+  if (targetIndex >= parent.children.length) {
+    parent.appendChild(newChild);
+    return null;
+  } else {
+    return parent.replaceChild(newChild, parent.children.item(targetIndex));
+  }
+}
+var PacemSvgAdapterElement = class PacemSvgAdapterElement2 extends Pacem2DAdapterElement {
+  constructor() {
+    super(...arguments);
+    this._hitTarget = null;
+    this._dragInitHandler = (evt) => {
+      const args = evt.detail, el = args.element, drawable = GETVAR2(el, DRAWABLE_VAR), stageTransformMatrix = drawable.stage.transformMatrix, initialMatrix = drawable.transformMatrix ?? Matrix2D5.identity;
+      args.data = {
+        stageTransformMatrix,
+        item: drawable,
+        initialTransformMatrix: initialMatrix
+      };
+      const reject = AdapterUtils.itemDispatch(drawable, evt, { x: 0, y: 0 });
+      if (reject) {
+        evt.preventDefault();
+      }
+    };
+    this._draggingHandler = (evt) => {
+      avoidHandler3(evt);
+      this.#dragging = true;
+      const el = evt.detail.element;
+      const data = evt.detail.data;
+      const args = evt.detail;
+      const screenOffset = { x: (args.currentPosition.x - args.origin.x) * data.stageTransformMatrix.a, y: (args.currentPosition.y - args.origin.y) * data.stageTransformMatrix.d };
+      const offset = {
+        x: screenOffset.x + data.initialTransformMatrix.e,
+        y: screenOffset.y + data.initialTransformMatrix.f
+      }, stageOffset = {
+        x: screenOffset.x + data.stageTransformMatrix.e,
+        y: screenOffset.y + data.stageTransformMatrix.f
+      };
+      const rejected = AdapterUtils.itemDispatch(data.item, evt, stageOffset);
+      if (!rejected) {
+        const init = data.initialTransformMatrix;
+        el.style.transform = `matrix(${init.a},${init.b},${init.c},${init.d},${offset.x},${offset.y})`;
+      }
+    };
+    this._dragEndHandler = (evt) => {
+      this.#dragging = false;
+      const args = evt.detail, el = args.element, data = args.data, transform = Utils14.deserializeTransform(el.style);
+      const offset = { x: transform.e, y: transform.f };
+      if (data.item instanceof UiElement) {
+        data.item.translateX = offset.x;
+        data.item.translateY = offset.y;
+      } else {
+        const init = data.initialTransformMatrix, actual = { a: init.a, b: init.b, c: init.c, d: init.d, e: offset.x, f: offset.y };
+        Utils14.extend(data.item, { transformMatrix: actual });
+      }
+      el.style.transform = "";
+      AdapterUtils.itemDispatch(data.item, evt, offset);
+    };
+    this._mouseleaveHandler = (evt) => {
+      if (this.#dragging) {
+        return;
+      }
+      const hitTarget = this._hitTarget;
+      if (Utils14.isNull(hitTarget)) {
+        return;
+      }
+      this._hitTarget = null;
+      if (!Utils14.isNull(hitTarget)) {
+        this.#dragger.unregister(this._items.get(hitTarget));
+        AdapterUtils.itemDispatch(hitTarget, "out", evt);
+      }
+    };
+    this._mousemoveHandler = (evt) => {
+      var pt = CustomEventUtils3.getEventCoordinates(evt).client;
+      if (!this.#dragging) {
+        var d = null;
+        const root = evt.target.getRootNode();
+        root.elementsFromPoint(pt.x, pt.y).find((i) => {
+          d = GETVAR2(i, DRAWABLE_VAR);
+          return d && !d.inert;
+        });
+        var old = this._hitTarget, val = d;
+        if (Utils14.isNull(d && d.stage) || !this._scenes.has(d.stage) || d.inert) {
+          val = null;
+        }
+        const hitTarget = this._hitTarget = val;
+        if (val !== old) {
+          if (!Utils14.isNull(old)) {
+            this.#dragger.unregister(this._items.get(old));
+            AdapterUtils.itemDispatch(old, "out", evt);
+          }
+          if (!Utils14.isNull(val)) {
+            if (val.draggable) {
+              this.#dragger.register(this._items.get(val));
+            }
+            AdapterUtils.itemDispatch(val, "over", evt);
+          }
+        }
+        if (Utils14.isNull(hitTarget)) {
+          const svg = evt.currentTarget;
+          const stage = GETVAR2(svg, STAGE_VAR);
+          if (!Utils14.isNull(stage)) {
+            AdapterUtils.stageDispatch(stage, "move", evt);
+          }
+        }
+      }
+    };
+    this._mouseDownUpHandler = (evt) => {
+      const svg = evt.currentTarget;
+      if (svg instanceof SVGSVGElement) {
+        const stage = GETVAR2(svg, STAGE_VAR), hitTarget = this._hitTarget;
+        const type = evt.type.replace(/^mouse/, "");
+        const opts = getStageOptions(stage);
+        if (CustomEventUtils3.matchModifiers(evt, opts.clickModifiers)) {
+          if (!Utils14.isNull(hitTarget) && hitTarget.stage === stage) {
+            AdapterUtils.itemDispatch(hitTarget, type, evt);
+          } else {
+            AdapterUtils.stageDispatch(stage, type, evt);
+          }
+        }
+      }
+    };
+    this._scenes = /* @__PURE__ */ new WeakMap();
+    this._markers = /* @__PURE__ */ new WeakMap();
+    this._gradients = /* @__PURE__ */ new WeakMap();
+    this._items = /* @__PURE__ */ new WeakMap();
+  }
+  snapshot(stage, background, type, quality) {
+    if (this._scenes.has(stage)) {
+      const svg = this._scenes.get(stage);
+      return this.snapshotElement(svg, background, type, quality);
+    } else {
+      return Promise.resolve(null);
+    }
+  }
+  getTransformMatrix(scene) {
+    const scenes = this._scenes;
+    if (scenes.has(scene)) {
+      return scenes.get(scene).getScreenCTM().inverse();
+    }
+    return Matrix2D5.identity;
+  }
+  #dragger;
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    const dragDrop = this.#dragger = document.createElement(P12 + "-drag-drop");
+    dragDrop.mode = UI3.DragDataMode.Self;
+    const shell = CustomElementUtils3.findAncestorShell(this);
+    shell.appendChild(dragDrop);
+    dragDrop.addEventListener(UI3.DragDropEventType.Init, this._dragInitHandler, false);
+    dragDrop.addEventListener(UI3.DragDropEventType.Drag, this._draggingHandler, false);
+    dragDrop.addEventListener(UI3.DragDropEventType.End, this._dragEndHandler, false);
+  }
+  disconnectedCallback() {
+    const dragger = this.#dragger;
+    if (!Utils14.isNull(dragger)) {
+      dragger.removeEventListener(UI3.DragDropEventType.Init, this._dragInitHandler, false);
+      dragger.removeEventListener(UI3.DragDropEventType.Drag, this._draggingHandler, false);
+      dragger.removeEventListener(UI3.DragDropEventType.End, this._dragEndHandler, false);
+      dragger.remove();
+    }
+    super.disconnectedCallback();
+  }
+  invalidateSize(scene, size) {
+    const scenes = this._scenes;
+    if (!Utils14.isNull(scene) && !Utils14.isNullOrEmpty(size)) {
+      if (scenes.has(scene)) {
+        var svg = scenes.get(scene);
+        svg.setAttribute("width", size.width + "");
+        svg.setAttribute("height", size.height + "");
+        const rect = scene.viewbox, aspectRatio = scene.aspectRatio;
+        if (AdapterUtils.isValidViewbox(rect)) {
+          svg.setAttribute("viewBox", `${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
+        } else {
+          svg.removeAttribute("viewBox");
+        }
+        if (Utils14.isNullOrEmpty(aspectRatio) || typeof aspectRatio === "string") {
+          svg.removeAttribute("preserveAspectRatio");
+        } else {
+          svg.setAttribute("preserveAspectRatio", `xM${aspectRatio.x.substring(1)}YM${aspectRatio.y.substring(1)} ${aspectRatio.slice ? "slice" : "meet"}`);
+        }
+      }
+    }
+  }
+  initialize(scene) {
+    if (Utils14.isNull(scene)) {
+      throw "Provided scene is null or undefined.";
+    }
+    const scenes = this._scenes;
+    if (scenes.has(scene)) {
+      return scenes.get(scene);
+    }
+    const stage = scene.stage;
+    stage.innerHTML = "";
+    this._items = /* @__PURE__ */ new WeakMap();
+    var svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("part", "stage");
+    SETVAR2(svg, STAGE_VAR, scene);
+    stage.appendChild(svg);
+    scenes.set(scene, svg);
+    const options = { passive: false, capture: true };
+    svg.addEventListener("mousemove", this._mousemoveHandler, false);
+    svg.addEventListener("click", this._mouseDownUpHandler, false);
+    svg.addEventListener("mousedown", this._mouseDownUpHandler, false);
+    svg.addEventListener("mouseup", this._mouseDownUpHandler, false);
+    svg.addEventListener("mouseleave", this._mouseleaveHandler, false);
+    return svg;
+  }
+  dispose(scene) {
+    const scenes = this._scenes;
+    if (scenes.has(scene)) {
+      var svg = scenes.get(scene);
+      svg.removeEventListener("mousemove", this._mousemoveHandler);
+      svg.removeEventListener("click", this._mouseDownUpHandler);
+      svg.removeEventListener("mousedown", this._mouseDownUpHandler);
+      svg.removeEventListener("mouseup", this._mouseDownUpHandler);
+      svg.removeEventListener("mouseleave", this._mouseleaveHandler);
+      DELVAR(svg, STAGE_VAR);
+      svg.remove();
+      scenes.delete(scene);
+    }
+  }
+  getHitTarget(scene) {
+    return this._hitTarget;
+  }
+  draw(scene, item, deepRedraw = false) {
+    const scenes = this._scenes, dict = this._items;
+    if (!Utils14.isNull(scene)) {
+      if (scene.adapter === this) {
+        if (!scenes.has(scene)) {
+          this.initialize(scene);
+        }
+      } else {
+        if (scenes.has(scene)) {
+          scenes.delete(scene);
+        }
+        return;
+      }
+    } else {
+      return;
+    }
+    var items = scene.datasource, flow = true, parent = scenes.get(scene);
+    if (!Utils14.isNull(item) && dict.has(item)) {
+      items = [item];
+      parent = dict.get(item).parentNode;
+      flow = false;
+    }
+    if (flow) {
+      parent.innerHTML = "<defs></defs>";
+      this._markers = /* @__PURE__ */ new WeakMap();
+    }
+    this._draw(scene, parent, items || [], flow, deepRedraw);
+  }
+  #dragging;
+  _hasItems(object) {
+    return isGroup(object);
+  }
+  _disposeSvg(el) {
+    if (!Utils14.isNull(el)) {
+      var drawable = GETVAR2(el, DRAWABLE_VAR);
+      DELVAR(el, DRAWABLE_VAR);
+      this._items.delete(drawable);
+    }
+  }
+  _draw(scene, parent, items, flow, deepRedraw) {
+    const dict = this._items;
+    let j = 0;
+    if (parent.firstElementChild instanceof SVGDefsElement) {
+      j++;
+    }
+    if (!Utils14.isNullOrEmpty(items)) {
+      for (let item of items) {
+        item.stage ??= scene;
+        let el;
+        if (!dict.has(item)) {
+          el = this._buildSVGElement(item);
+          SETVAR2(el, DRAWABLE_VAR, item);
+          this._disposeSvg(replaceChildAt(parent, el, j));
+          dict.set(item, el);
+        } else {
+          el = dict.get(item);
+          if (el.parentNode !== parent) {
+            this._disposeSvg(replaceChildAt(parent, el, j));
+          }
+        }
+        if (isDrawable(item)) {
+          if (item.hide) {
+            el.setAttribute("display", "none");
+          } else {
+            el.removeAttribute("display");
+          }
+          el.style.transform = "";
+        }
+        if (isShape(item)) {
+          const path = el;
+          path.setAttribute("d", fallback2(item.pathData, "M0,0"));
+          for (let { marker, suffix } of [{ marker: item.markerStart, suffix: "start" }, { marker: item.markerEnd, suffix: "end" }, { marker: item.markerMid, suffix: "mid" }]) {
+            if (marker) {
+              const markerSvg = this._ensureMarker(parent, marker);
+              path.setAttribute("marker-" + suffix, `url(#${markerSvg.id})`);
+            } else {
+              path.removeAttribute("marker-" + suffix);
+            }
+          }
+        } else if (isText(item)) {
+          const text = el;
+          text.textContent = item.text;
+          text.style.fill = Utils14.isNullOrEmpty(item.color) ? "" : item.color;
+          text.style.fontFamily = Utils14.isNullOrEmpty(item.fontFamily) ? "" : item.fontFamily;
+          text.style.fontSize = Utils14.isNull(item.fontSize) ? "" : item.fontSize + "px";
+          if (!Utils14.isNullOrEmpty(item.fontWeight)) {
+            text.style.fontWeight = item.fontWeight;
+          }
+          if (!Utils14.isNullOrEmpty(item.fontStyle)) {
+            text.style.fontStyle = item.fontStyle;
+          }
+          text.setAttribute("text-anchor", fallback2(item.textAnchor, "start"));
+          if (!Utils14.isNull(item.anchor)) {
+            text.setAttribute("x", item.anchor.x.toString());
+            text.setAttribute("y", item.anchor.y.toString());
+          } else {
+            text.removeAttribute("x");
+            text.removeAttribute("y");
+          }
+        } else if (isImage(item)) {
+          const img = el;
+          img.setAttribute("href", item.src);
+          img.setAttribute("preserveAspectRatio", "none");
+          if (item.width > 0) {
+            img.setAttribute("width", "" + item.width);
+          } else {
+            img.removeAttribute("width");
+          }
+          if (item.height > 0) {
+            img.setAttribute("height", "" + item.height);
+          } else {
+            img.removeAttribute("height");
+          }
+          if (!Utils14.isNull(item.x)) {
+            img.setAttribute("x", "" + item.x);
+          } else {
+            img.removeAttribute("x");
+          }
+          if (!Utils14.isNull(item.y)) {
+            img.setAttribute("y", "" + item.y);
+          } else {
+            img.removeAttribute("y");
+          }
+        }
+        if (isUiObject(item)) {
+          const t = item.transformMatrix;
+          if (Utils14.isNull(t) || Matrix2D5.isIdentity(t)) {
+            el.removeAttribute("transform");
+          } else {
+            el.setAttribute("transform", `matrix(${t.a} ${t.b} ${t.c} ${t.d} ${t.e} ${t.f})`);
+          }
+          const opacity = fallback2(item.opacity, 1);
+          if (opacity === 1) {
+            el.removeAttribute("opacity");
+          } else {
+            el.setAttribute("opacity", "" + opacity);
+          }
+        }
+        if (isPresentationObject(item)) {
+          if (Utils14.isNullOrEmpty(item.fill)) {
+            el.removeAttribute("fill");
+          } else if (typeof item.fill === "string") {
+            el.setAttribute("fill", item.fill);
+          } else {
+            const grad = this._ensureGradient(parent, item.fill);
+            el.setAttribute("fill", `url(#${grad.id})`);
+          }
+          if (Utils14.isNullOrEmpty(item.stroke)) {
+            el.removeAttribute("stroke");
+          } else {
+            el.setAttribute("stroke", item.stroke);
+          }
+          if (Utils14.isNullOrEmpty(item.dashArray)) {
+            el.removeAttribute("stroke-dasharray");
+          } else {
+            el.setAttribute("stroke-dasharray", item.dashArray.join(" "));
+          }
+          if (Utils14.isNullOrEmpty(item.lineCap)) {
+            el.removeAttribute("stroke-linecap");
+          } else {
+            el.setAttribute("stroke-linecap", item.lineCap);
+          }
+          if (Utils14.isNullOrEmpty(item.lineJoin)) {
+            el.removeAttribute("stroke-linejoin");
+          } else {
+            el.setAttribute("stroke-linejoin", item.lineJoin);
+          }
+          if (Utils14.isNullOrEmpty(item.lineWidth)) {
+            el.removeAttribute("stroke-width");
+          } else {
+            el.setAttribute("stroke-width", "" + item.lineWidth);
+          }
+        }
+        if (item.inert) {
+          el.style.pointerEvents = "none";
+        } else {
+          el.style.pointerEvents = "";
+        }
+        if ((flow || deepRedraw) && this._hasItems(item)) {
+          this._draw(scene, el, item.childDrawables, true, deepRedraw);
+        }
+        j++;
+      }
+    }
+    if (flow) {
+      for (let k = parent.children.length - 1; k >= j; k--) {
+        const el = parent.children.item(k);
+        this._disposeSvg(el);
+        el.remove();
+      }
+    }
+  }
+  _buildSVGElement(item) {
+    if (isShape(item) || item instanceof ShapeElement) {
+      return document.createElementNS(SVG_NS, "path");
+    }
+    if (isText(item) || item instanceof PacemTextElement) {
+      return document.createElementNS(SVG_NS, "text");
+    }
+    if (isImage(item) || item instanceof PacemImageElement) {
+      return document.createElementNS(SVG_NS, "image");
+    }
+    return document.createElementNS(SVG_NS, "g");
+  }
+  _ensureGradient(parent, gradient) {
+    const store = this._gradients;
+    if (!store.has(parent)) {
+      store.set(parent, /* @__PURE__ */ new WeakMap());
+    }
+    const map = store.get(parent);
+    const isLinear = isLinearGradient(gradient), isRadial = isRadialGradient(gradient);
+    if (map.has(gradient)) {
+      const current = map.get(gradient);
+      if (isLinear && current instanceof SVGLinearGradientElement || isRadial && current instanceof SVGRadialGradientElement) {
+        current.remove();
+        map.delete(gradient);
+      }
+    }
+    if (!map.has(gradient)) {
+      let defsContainer = parent;
+      let defs;
+      while (Utils14.isNull(defs = defsContainer.querySelector(":scope > defs"))) {
+        const parent1 = defsContainer.parentElement;
+        if (parent1 instanceof SVGElement) {
+          defsContainer = parent1;
+        } else {
+          break;
+        }
+      }
+      if (Utils14.isNull(defs)) {
+        throw new Error("Must provide a <defs> element.");
+      }
+      var gradientSvg = null;
+      if (isLinear) {
+        gradientSvg = document.createElementNS(SVG_NS, "linearGradient");
+      } else if (isRadialGradient(gradient)) {
+        gradientSvg = document.createElementNS(SVG_NS, "radialGradient");
+      } else {
+        throw new Error("Unmanaged gradient type.");
+      }
+      gradientSvg.setAttribute("gradientUnits", "userSpaceOnUse");
+      gradientSvg.setAttribute("id", `grad-${Utils14.uniqueCode()}`);
+      defs.appendChild(gradientSvg);
+      map.set(gradient, gradientSvg);
+    }
+    const retval = map.get(gradient);
+    if (isLinear) {
+      retval.setAttribute("x1", gradient.start.x.toString());
+      retval.setAttribute("y1", gradient.start.y.toString());
+      retval.setAttribute("x2", gradient.end.x.toString());
+      retval.setAttribute("y2", gradient.end.y.toString());
+    } else if (isRadial) {
+      retval.setAttribute("cx", gradient.center.x.toString());
+      retval.setAttribute("cy", gradient.center.y.toString());
+      retval.setAttribute("r", gradient.radius.toString());
+    }
+    let j = 0;
+    for (let stop of gradient.stops) {
+      while (retval.children.length <= j) {
+        const stopSvgAdd = document.createElementNS(SVG_NS, "stop");
+        retval.appendChild(stopSvgAdd);
+      }
+      const stopSvg = retval.children.item(j);
+      stopSvg.setAttribute("offset", stop.offset * 100 + "%");
+      stopSvg.setAttribute("stop-color", stop.color);
+      if (!Utils14.isNull(stop.opacity)) {
+        stopSvg.setAttribute("stop-opacity", stop.opacity.toString());
+      }
+      j++;
+    }
+    while (retval.children.length > gradient.stops.length) {
+      const lastChild = retval.children.item(retval.children.length - 1);
+      retval.removeChild(lastChild);
+    }
+    return retval;
+  }
+  _ensureMarker(parent, marker) {
+    const store = this._markers;
+    if (!store.has(parent)) {
+      store.set(parent, /* @__PURE__ */ new WeakMap());
+    }
+    const map = store.get(parent);
+    if (!map.has(marker)) {
+      const markerSvg2 = document.createElementNS(SVG_NS, "marker");
+      map.set(marker, markerSvg2);
+      const markerPath2 = document.createElementNS(SVG_NS, "path");
+      markerSvg2.appendChild(markerPath2);
+      markerSvg2.setAttribute("id", "mark" + Utils14.uniqueCode());
+      let defsContainer = parent;
+      let defs;
+      while (Utils14.isNull(defs = defsContainer.querySelector(":scope > defs"))) {
+        const parent1 = defsContainer.parentElement;
+        if (parent1 instanceof SVGElement) {
+          defsContainer = parent1;
+        } else {
+          break;
+        }
+      }
+      if (Utils14.isNull(defs)) {
+        throw new Error("Must provide a <defs> element.");
+      }
+      defs.appendChild(markerSvg2);
+    }
+    const markerSvg = map.get(marker), markerPath = markerSvg.firstElementChild;
+    markerSvg.setAttribute("orient", "auto-start-reverse");
+    if (!Utils14.isNullOrEmpty(marker.viewbox)) {
+      markerSvg.setAttribute("viewBox", `${marker.viewbox.x} ${marker.viewbox.y} ${marker.viewbox.width} ${marker.viewbox.height}`);
+    } else {
+      markerSvg.removeAttribute("viewBox");
+    }
+    if (!Utils14.isNullOrEmpty(marker.ref)) {
+      markerSvg.setAttribute("refX", marker.ref.x.toString());
+      markerSvg.setAttribute("refY", marker.ref.y.toString());
+    } else {
+      markerSvg.removeAttribute("refX");
+      markerSvg.removeAttribute("refY");
+    }
+    if (marker.height > 0) {
+      markerSvg.setAttribute("markerHeight", marker.height.toString());
+    } else {
+      markerSvg.removeAttribute("markerHeight");
+    }
+    if (marker.width > 0) {
+      markerSvg.setAttribute("markerWidth", marker.width.toString());
+    } else {
+      markerSvg.removeAttribute("markerWidth");
+    }
+    markerPath.setAttribute("d", marker.pathData);
+    if (!Utils14.isNullOrEmpty(marker.fill)) {
+      markerPath.setAttribute("fill", marker.fill);
+    } else {
+      markerPath.removeAttribute("fill");
+    }
+    if (!Utils14.isNullOrEmpty(marker.stroke)) {
+      markerPath.setAttribute("stroke", marker.stroke);
+    } else {
+      markerPath.removeAttribute("stroke");
+    }
+    return markerSvg;
+  }
+};
+PacemSvgAdapterElement = __decorate14([
+  CustomElement12({ tagName: P12 + "-" + TAG_MIDDLE_NAME + "-svg-adapter" })
+], PacemSvgAdapterElement);
+export {
+  index_components_exports as Components,
+  drawing_exports as Drawing
+};
+//# sourceMappingURL=pacem-2d.mjs.map