pluton-2d 0.1.0

package/dist/index.js

@@ -0,0 +1,1119 @@
+const c = "http://www.w3.org/2000/svg";
+class w {
+  listeners = /* @__PURE__ */ new Map();
+  on(t, e) {
+    return this.listeners.has(t) || this.listeners.set(t, /* @__PURE__ */ new Set()), this.listeners.get(t).add(e), () => this.off(t, e);
+  }
+  off(t, e) {
+    this.listeners.get(t)?.delete(e);
+  }
+  emit(t, e) {
+    this.listeners.get(t)?.forEach((s) => {
+      try {
+        s(e);
+      } catch (i) {
+        console.error("EventBus listener error:", i);
+      }
+    });
+  }
+  clear() {
+    this.listeners.clear();
+  }
+}
+class S {
+  svg;
+  defs;
+  cameraRef;
+  cachedViewport = null;
+  resizeObserver;
+  onResize;
+  constructor(t, e, s, i) {
+    this.svg = t, this.defs = e, this.cameraRef = s, this.onResize = i, this.resizeObserver = new ResizeObserver(() => {
+      this.invalidateViewport(), this.onResize?.();
+    }), this.resizeObserver.observe(t);
+  }
+  dispose() {
+    this.resizeObserver.disconnect();
+  }
+  invalidateViewport() {
+    this.cachedViewport = null;
+  }
+  viewport = () => {
+    if (this.cachedViewport) return this.cachedViewport;
+    const t = this.svg.viewBox?.baseVal;
+    if (t && t.width && t.height)
+      return this.cachedViewport = { x: t.x, y: t.y, width: t.width, height: t.height }, this.cachedViewport;
+    const e = Number(this.svg.getAttribute("width")) || 0, s = Number(this.svg.getAttribute("height")) || 0;
+    if (e && s)
+      return this.cachedViewport = { x: 0, y: 0, width: e, height: s }, this.cachedViewport;
+    const i = this.svg.getBoundingClientRect();
+    return this.cachedViewport = { x: 0, y: 0, width: i.width, height: i.height }, this.cachedViewport;
+  };
+  camera = () => this.cameraRef?.state() ?? null;
+}
+const A = /* @__PURE__ */ new WeakMap();
+function $(l) {
+  let t = A.get(l);
+  return t || (t = /* @__PURE__ */ new Map(), A.set(l, t)), t;
+}
+function m(l, t) {
+  const e = t.getAttribute("id");
+  if (!e) {
+    l.appendChild(t);
+    return;
+  }
+  const s = $(l), i = s.get(e);
+  i ? i.replaceWith(t) : l.appendChild(t), s.set(e, t);
+}
+class v {
+  hatchFill45Id = "pluton-pattern-fill-hatch-45";
+  graphPaperPatternId = "pluton-pattern-graph-paper";
+  defsEl;
+  constructor(t) {
+    this.defsEl = t;
+  }
+  sync() {
+    m(this.defsEl, this.createHatchFill45Pattern()), m(this.defsEl, this.createGraphPaperPattern());
+  }
+  createHatchFill45Pattern() {
+    const t = document.createElementNS(c, "pattern");
+    t.setAttribute("id", this.hatchFill45Id), t.setAttribute("patternUnits", "userSpaceOnUse"), t.setAttribute("width", "8"), t.setAttribute("height", "8"), t.setAttribute("patternTransform", "rotate(-45)");
+    const e = document.createElementNS(c, "line");
+    return e.setAttribute("x1", "0"), e.setAttribute("y1", "0"), e.setAttribute("x2", "0"), e.setAttribute("y2", "8"), e.setAttribute("stroke-width", "12.5"), e.classList.add("pluton-pattern-hatch"), t.appendChild(e), t;
+  }
+  createGraphPaperPattern() {
+    const s = document.createElementNS(c, "pattern");
+    s.setAttribute("id", this.graphPaperPatternId), s.setAttribute("patternUnits", "userSpaceOnUse"), s.setAttribute("x", "0"), s.setAttribute("y", "0"), s.setAttribute("width", String(50)), s.setAttribute("height", String(50));
+    const i = document.createElementNS(c, "path");
+    i.classList.add("pluton-pattern-graph-paper-minor");
+    const n = Math.max(1, Math.floor(50 / 10)), r = [];
+    for (let a = 1; a < n; a++) {
+      const h = a * 10;
+      r.push(`M ${h} 0 L ${h} 50`);
+    }
+    for (let a = 1; a < n; a++) {
+      const h = a * 10;
+      r.push(`M 0 ${h} L 50 ${h}`);
+    }
+    i.setAttribute("d", r.join(" ")), s.appendChild(i);
+    const o = document.createElementNS(c, "path");
+    return o.classList.add("pluton-pattern-graph-paper-major"), o.setAttribute(
+      "d",
+      "M 50 0 L 50 50 M 0 50 L 50 50"
+    ), s.appendChild(o), s;
+  }
+}
+class P {
+  graphPaperGradientId = "pluton-gradient-graph-paper";
+  graphPaperMaskId = "pluton-mask-graph-paper";
+  defsEl;
+  constructor(t) {
+    this.defsEl = t;
+  }
+  syncForViewport(t) {
+    m(this.defsEl, this.createGraphPaperFadeGradient(t)), m(this.defsEl, this.createGraphPaperFadeMask(t));
+  }
+  createGraphPaperFadeGradient(t) {
+    const i = t.width / 2, n = t.height / 2, r = Math.sqrt(i * i + n * n), o = r * 0.65, a = r * 1, h = document.createElementNS(c, "radialGradient");
+    h.setAttribute("id", this.graphPaperGradientId), h.setAttribute("gradientUnits", "userSpaceOnUse"), h.setAttribute("cx", String(i)), h.setAttribute("cy", String(n)), h.setAttribute("r", String(a));
+    const d = document.createElementNS(c, "stop");
+    d.setAttribute("offset", "0"), d.setAttribute("stop-color", "white");
+    const u = document.createElementNS(c, "stop");
+    u.setAttribute(
+      "offset",
+      a === 0 ? "0" : String(o / a)
+    ), u.setAttribute("stop-color", "white");
+    const p = document.createElementNS(c, "stop");
+    return p.setAttribute("offset", "1"), p.setAttribute("stop-color", "black"), h.append(d, u, p), h;
+  }
+  createGraphPaperFadeMask(t) {
+    const e = document.createElementNS(c, "mask");
+    e.setAttribute("id", this.graphPaperMaskId), e.setAttribute("maskUnits", "userSpaceOnUse"), e.setAttribute("x", "0"), e.setAttribute("y", "0"), e.setAttribute("width", String(t.width)), e.setAttribute("height", String(t.height));
+    const s = document.createElementNS(c, "rect");
+    return s.setAttribute("x", "0"), s.setAttribute("y", "0"), s.setAttribute("width", String(t.width)), s.setAttribute("height", String(t.height)), s.setAttribute("fill", `url(#${this.graphPaperGradientId})`), e.appendChild(s), e;
+  }
+}
+class E {
+  pencilFilterId = "pluton-filter-pencil";
+  defsEl;
+  intensity;
+  constructor(t, e = 1) {
+    this.defsEl = t, this.intensity = e;
+  }
+  sync() {
+    m(this.defsEl, this.createPencilFilter());
+  }
+  createPencilFilter() {
+    const s = document.createElementNS(c, "filter");
+    s.setAttribute("id", this.pencilFilterId), s.setAttribute("x", "-50%"), s.setAttribute("y", "-50%"), s.setAttribute("width", "200%"), s.setAttribute("height", "200%");
+    const i = document.createElementNS(c, "feTurbulence");
+    i.setAttribute("type", "fractalNoise"), i.setAttribute("baseFrequency", String(0.22)), i.setAttribute("numOctaves", String(3)), i.setAttribute("seed", "1"), i.setAttribute("result", "turbulence");
+    const n = document.createElementNS(
+      c,
+      "feDisplacementMap"
+    );
+    return n.setAttribute("in", "SourceGraphic"), n.setAttribute("in2", "turbulence"), n.setAttribute("scale", String(this.intensity)), n.setAttribute("xChannelSelector", "R"), n.setAttribute("yChannelSelector", "G"), s.appendChild(i), s.appendChild(n), s;
+  }
+}
+class L {
+  patterns;
+  gradients;
+  filters;
+  lastWidth = 0;
+  lastHeight = 0;
+  constructor(t, e = 1.25) {
+    this.patterns = new v(t), this.gradients = new P(t), this.filters = new E(t, e), this.patterns.sync(), this.filters.sync();
+  }
+  syncForViewport(t) {
+    this.lastWidth === t.width && this.lastHeight === t.height || (this.lastWidth = t.width, this.lastHeight = t.height, this.gradients.syncForViewport(t));
+  }
+  get hatchFill45Id() {
+    return this.patterns.hatchFill45Id;
+  }
+  get graphPaperPatternId() {
+    return this.patterns.graphPaperPatternId;
+  }
+  get graphPaperGradientId() {
+    return this.gradients.graphPaperGradientId;
+  }
+  get graphPaperMaskId() {
+    return this.gradients.graphPaperMaskId;
+  }
+  get pencilFilterId() {
+    return this.filters.pencilFilterId;
+  }
+}
+class C {
+  svg;
+  events;
+  requestFrame;
+  panX = 0;
+  panY = 0;
+  scale = 1;
+  targetPanX = 0;
+  targetPanY = 0;
+  targetScale = 1;
+  minScale = 1;
+  maxScale = 20;
+  dampingFactor = 0.2;
+  isPanning = !1;
+  isResetting = !1;
+  lastX = 0;
+  lastY = 0;
+  cachedRect = null;
+  panEnabled = !1;
+  zoomEnabled = !1;
+  panListeners = [];
+  zoomListeners = [];
+  constructor(t, e, s) {
+    this.svg = t, this.events = e, this.requestFrame = s;
+  }
+  dispose() {
+    this.enablePan(!1), this.enableZoom(!1);
+  }
+  state() {
+    return { panX: this.panX, panY: this.panY, scale: this.scale };
+  }
+  reset() {
+    this.isResetting || (this.isResetting = !0, this.targetPanX = 0, this.targetPanY = 0, this.targetScale = 1, this.requestFrame());
+  }
+  /**
+   * Interpolate current values toward targets.
+   * Called every frame by Engine's loop. Returns true if still animating.
+   */
+  tick() {
+    const e = this.panX, s = this.panY, i = this.scale;
+    this.panX = this.smoothStep(this.panX, this.targetPanX), this.panY = this.smoothStep(this.panY, this.targetPanY), this.scale = this.smoothStep(this.scale, this.targetScale);
+    const n = Math.abs(this.targetPanX - this.panX) < 0.01 && Math.abs(this.targetPanY - this.panY) < 0.01 && Math.abs(this.targetScale - this.scale) < 0.01;
+    return n && (this.panX = this.targetPanX, this.panY = this.targetPanY, this.scale = this.targetScale, this.isResetting && this.panX === 0 && this.panY === 0 && this.scale === 1 && (this.isResetting = !1)), (e !== this.panX || s !== this.panY || i !== this.scale) && this.events.emit("camera:changed", this.state()), !n;
+  }
+  smoothStep(t, e) {
+    return t + (e - t) * this.dampingFactor;
+  }
+  updateCachedRect() {
+    this.cachedRect = this.svg.getBoundingClientRect();
+  }
+  getRect() {
+    return this.cachedRect || this.updateCachedRect(), this.cachedRect;
+  }
+  enablePan(t) {
+    t !== this.panEnabled && (this.panEnabled = t, t ? this.addPanListeners() : this.removePanListeners());
+  }
+  enableZoom(t) {
+    t !== this.zoomEnabled && (this.zoomEnabled = t, t ? this.addZoomListeners() : this.removeZoomListeners());
+  }
+  addPanListeners() {
+    if (this.panListeners.length > 0) return;
+    const t = (i) => {
+      (i.button === 1 || i.button === 0 && i.shiftKey) && (i.preventDefault(), this.isPanning = !0, this.updateCachedRect(), this.lastX = i.clientX, this.lastY = i.clientY);
+    }, e = (i) => {
+      if (!this.isPanning || this.isResetting) return;
+      const n = i.clientX - this.lastX, r = i.clientY - this.lastY;
+      this.targetPanX += n, this.targetPanY += r;
+      const o = this.getRect(), a = o.width * 0.5 * this.targetScale, h = o.height * 0.5 * this.targetScale;
+      this.targetPanX = Math.max(-a, Math.min(a, this.targetPanX)), this.targetPanY = Math.max(-h, Math.min(h, this.targetPanY)), this.lastX = i.clientX, this.lastY = i.clientY, this.requestFrame();
+    }, s = (i) => {
+      (i.button === 1 || i.button === 0) && (this.isPanning = !1, this.cachedRect = null);
+    };
+    this.svg.addEventListener("mousedown", t), window.addEventListener("mousemove", e), window.addEventListener("mouseup", s), this.panListeners = [
+      {
+        target: this.svg,
+        type: "mousedown",
+        handler: t
+      },
+      {
+        target: window,
+        type: "mousemove",
+        handler: e
+      },
+      { target: window, type: "mouseup", handler: s }
+    ];
+  }
+  addZoomListeners() {
+    if (this.zoomListeners.length > 0) return;
+    const t = (e) => {
+      if (this.isResetting) return;
+      e.preventDefault(), this.updateCachedRect();
+      const s = this.cachedRect, i = e.clientX - s.left - s.width * 0.5, n = e.clientY - s.top - s.height * 0.5, r = e.deltaY < 0 ? 1.1 : 1 / 1.1, o = Math.max(
+        this.minScale,
+        Math.min(this.maxScale, this.targetScale * r)
+      ), a = o / this.targetScale;
+      this.targetPanX = i + (this.targetPanX - i) * a, this.targetPanY = n + (this.targetPanY - n) * a, this.targetScale = o, this.requestFrame();
+    };
+    this.svg.addEventListener("wheel", t, {
+      passive: !1
+    }), this.zoomListeners = [
+      { target: this.svg, type: "wheel", handler: t }
+    ];
+  }
+  removePanListeners() {
+    for (const { target: t, type: e, handler: s } of this.panListeners)
+      t.removeEventListener(e, s);
+    this.panListeners = [], this.isPanning = !1, this.cachedRect = null;
+  }
+  removeZoomListeners() {
+    for (const { target: t, type: e, handler: s } of this.zoomListeners)
+      t.removeEventListener(e, s);
+    this.zoomListeners = [];
+  }
+}
+class R {
+  root;
+  patternRect;
+  axesGroup;
+  xAxis;
+  yAxis;
+  constructor(t, e) {
+    this.root = document.createElementNS(c, "g"), this.root.classList.add("pluton-background"), t.appendChild(this.root);
+    const s = e.viewport(), i = this.computeExtent(s);
+    this.patternRect = document.createElementNS(c, "rect"), this.patternRect.classList.add("pluton-graph-paper"), this.patternRect.setAttribute("fill", `url(#${e.defs.graphPaperPatternId})`), this.root.appendChild(this.patternRect), this.updatePatternRect(i);
+    const { axes: n, xAxis: r, yAxis: o } = this.createAxes();
+    this.axesGroup = n, this.xAxis = r, this.yAxis = o, this.updateAxes(i);
+  }
+  updateForViewport(t) {
+    const e = this.computeExtent(t);
+    this.updatePatternRect(e), this.updateAxes(e);
+  }
+  enableGrid(t) {
+    this.patternRect.style.display = t ? "" : "none";
+  }
+  enableAxes(t) {
+    this.axesGroup.style.display = t ? "" : "none";
+  }
+  computeExtent(t) {
+    return Math.sqrt(t.width ** 2 + t.height ** 2) * 3;
+  }
+  updatePatternRect(t) {
+    this.patternRect.setAttribute("x", String(-t / 2)), this.patternRect.setAttribute("y", String(-t / 2)), this.patternRect.setAttribute("width", String(t)), this.patternRect.setAttribute("height", String(t));
+  }
+  updateAxes(t) {
+    this.xAxis.setAttribute("x1", String(-t)), this.xAxis.setAttribute("x2", String(t)), this.xAxis.setAttribute("y1", "0"), this.xAxis.setAttribute("y2", "0"), this.yAxis.setAttribute("x1", "0"), this.yAxis.setAttribute("x2", "0"), this.yAxis.setAttribute("y1", String(-t)), this.yAxis.setAttribute("y2", String(t));
+  }
+  createAxes() {
+    const t = document.createElementNS(c, "g");
+    t.classList.add("pluton-axes");
+    const e = document.createElementNS(c, "line");
+    e.classList.add("pluton-axis", "pluton-axis-x");
+    const s = document.createElementNS(c, "line");
+    return s.classList.add("pluton-axis", "pluton-axis-y"), t.append(e, s), this.root.appendChild(t), { axes: t, xAxis: e, yAxis: s };
+  }
+}
+class y {
+  root;
+  groups = [];
+  constructor(t, e) {
+    this.root = document.createElementNS(c, "g"), this.root.classList.add("pluton-layer", e), t.appendChild(this.root);
+  }
+  group() {
+    const t = this.createGroup(this.root);
+    return this.groups.push(t), t;
+  }
+  beginRecord() {
+    for (const t of this.groups) t.beginRecord();
+  }
+  commit() {
+    for (const t of this.groups) t.commit();
+  }
+}
+class M {
+  commands = [];
+  /**
+   * Move to a position relative to current position
+   * @param dx - horizontal offset
+   * @param dy - vertical offset
+   * @returns this builder for chaining
+   */
+  moveTo(t, e) {
+    return this.commands.push(`m ${t} ${e}`), this;
+  }
+  /**
+   * Move to an absolute position
+   * @param x - absolute x coordinate
+   * @param y - absolute y coordinate
+   * @returns this builder for chaining
+   */
+  moveToAbs(t, e) {
+    return this.commands.push(`M ${t} ${e}`), this;
+  }
+  /**
+   * Draw a line relative to current position
+   * @param dx - horizontal offset
+   * @param dy - vertical offset
+   * @returns this builder for chaining
+   */
+  lineTo(t, e) {
+    return this.commands.push(`l ${t} ${e}`), this;
+  }
+  /**
+   * Draw a line to an absolute position
+   * @param x - absolute x coordinate
+   * @param y - absolute y coordinate
+   * @returns this builder for chaining
+   */
+  lineToAbs(t, e) {
+    return this.commands.push(`L ${t} ${e}`), this;
+  }
+  /**
+   * Draw an arc relative to current position
+   * @param dx - horizontal offset to end point
+   * @param dy - vertical offset to end point
+   * @param r - arc radius
+   * @param clockwise - whether the arc sweeps clockwise
+   * @defaultValue false
+   * @param largeArc - whether to take the arc > 180°
+   * @defaultValue false
+   * @returns this builder for chaining
+   */
+  arcTo(t, e, s, i = !1, n = !1) {
+    if (s <= 0)
+      return this.commands.push(`l ${t} ${e}`), this;
+    const r = i ? 0 : 1, o = n ? 1 : 0;
+    return this.commands.push(`a ${s} ${s} 0 ${o} ${r} ${t} ${e}`), this;
+  }
+  /**
+   * Draw an arc to an absolute position
+   * @param x - absolute x coordinate of end point
+   * @param y - absolute y coordinate of end point
+   * @param r - arc radius
+   * @param clockwise - whether the arc sweeps clockwise
+   * @defaultValue false
+   * @param largeArc - whether to take the arc > 180°
+   * @defaultValue false
+   * @returns this builder for chaining
+   */
+  arcToAbs(t, e, s, i = !1, n = !1) {
+    if (s <= 0)
+      return this.commands.push(`L ${t} ${e}`), this;
+    const r = i ? 0 : 1, o = n ? 1 : 0;
+    return this.commands.push(`A ${s} ${s} 0 ${o} ${r} ${t} ${e}`), this;
+  }
+  /**
+   * Close the current path
+   * @returns this builder for chaining
+   */
+  close() {
+    return this.commands.push("z"), this;
+  }
+  /**
+   * Reset the builder
+   */
+  reset() {
+    this.commands.length = 0;
+  }
+  /**
+   * Get the SVG path data string
+   * @returns SVG path data
+   */
+  toString() {
+    return this.commands.join(" ");
+  }
+}
+class Y {
+  g;
+  paths = [];
+  // tracks current write position during record cycle
+  activeIndex = 0;
+  translateX = 0;
+  translateY = 0;
+  lastTransform = "";
+  drawUsage = "dynamic";
+  hasCommitted = !1;
+  constructor(t) {
+    this.g = document.createElementNS(c, "g"), t.appendChild(this.g);
+  }
+  /**
+   * Begin recording phase
+   */
+  beginRecord() {
+    this.activeIndex = 0;
+  }
+  /**
+   * Commit recorded paths to the DOM
+   */
+  commit() {
+    if (!(this.drawUsage === "static" && this.hasCommitted)) {
+      for (let t = 0; t < this.activeIndex; t++) {
+        const e = this.paths[t], s = e.builder.toString();
+        s !== e.lastD && (e.path.setAttribute("d", s), e.lastD = s);
+      }
+      if (this.paths.length > this.activeIndex)
+        for (let t = this.paths.length - 1; t >= this.activeIndex; t--)
+          this.paths[t].path.remove(), this.paths.pop();
+      this.drawUsage === "static" && (this.hasCommitted = !0);
+    }
+  }
+  translate(t, e) {
+    this.translateX = t, this.translateY = e, this.applyTransform();
+  }
+  setDrawUsage(t) {
+    this.drawUsage = t, t === "dynamic" && (this.hasCommitted = !1);
+  }
+  path(t) {
+    const e = this.activeIndex++, s = t?.className ?? "";
+    if (e < this.paths.length) {
+      const r = this.paths[e];
+      return r.builder.reset(), s !== r.lastClass && (s ? r.path.setAttribute("class", s) : r.path.removeAttribute("class"), r.lastClass = s), r.builder;
+    }
+    const i = new M(), n = document.createElementNS(c, "path");
+    return s && n.setAttribute("class", s), this.g.appendChild(n), this.paths.push({ builder: i, path: n, lastD: "", lastClass: s }), i;
+  }
+  clear() {
+    this.paths.length = 0, this.activeIndex = 0, this.g.replaceChildren(), this.hasCommitted = !1, this.translateX = 0, this.translateY = 0, this.applyTransform();
+  }
+  applyTransform() {
+    const t = `translate(${this.translateX}, ${this.translateY})`;
+    t !== this.lastTransform && (this.g.setAttribute("transform", t), this.lastTransform = t);
+  }
+}
+class X extends y {
+  unsubscribeBegin;
+  unsubscribeEnd;
+  constructor(t, e) {
+    super(t, "pluton-geometry"), this.unsubscribeBegin = e.on(
+      "engine:commit-start",
+      () => this.beginRecord()
+    ), this.unsubscribeEnd = e.on("engine:commit-end", () => this.commit());
+  }
+  createGroup(t) {
+    return new Y(t);
+  }
+  dispose() {
+    this.unsubscribeBegin(), this.unsubscribeEnd();
+  }
+}
+class F {
+  commands = [];
+  filledCommands = [];
+  textRecords = [];
+  currentX = 0;
+  currentY = 0;
+  /**
+   * Reset builder state
+   */
+  reset() {
+    this.commands.length = 0, this.textRecords.length = 0, this.filledCommands.length = 0, this.currentX = 0, this.currentY = 0;
+  }
+  /**
+   * Get SVG path data for dimension lines
+   * @returns SVG path data string
+   */
+  toPathData() {
+    return this.commands.join(" ");
+  }
+  /**
+   * Get SVG path data for filled shapes
+   * @returns SVG path data string
+   */
+  toFilledPathData() {
+    return this.filledCommands.join(" ");
+  }
+  /**
+   * Get all text records
+   * @returns array of text records with positions and alignment
+   */
+  getTexts() {
+    return this.textRecords;
+  }
+  // ------------------------------------
+  // positioning
+  // ------------------------------------
+  /**
+   * Move to a position relative to current position
+   * @param dx - horizontal offset
+   * @param dy - vertical offset
+   * @returns this builder for chaining
+   */
+  moveTo(t, e) {
+    return this.currentX += t, this.currentY += e, this.commands.push(`M ${this.currentX} ${this.currentY}`), this;
+  }
+  /**
+   * Move to an absolute position
+   * @param x - absolute x coordinate
+   * @param y - absolute y coordinate
+   * @returns this builder for chaining
+   */
+  moveToAbs(t, e) {
+    return this.currentX = t, this.currentY = e, this.commands.push(`M ${t} ${e}`), this;
+  }
+  /**
+   * Draw a line to a position relative to current position
+   * @param dx - horizontal offset
+   * @param dy - vertical offset
+   * @returns this builder for chaining
+   */
+  lineTo(t, e) {
+    return this.currentX += t, this.currentY += e, this.commands.push(`l ${t} ${e}`), this;
+  }
+  /**
+   * Draw a line to an absolute position
+   * @param x - absolute x coordinate
+   * @param y - absolute y coordinate
+   * @returns this builder for chaining
+   */
+  lineToAbs(t, e) {
+    return this.currentX = t, this.currentY = e, this.commands.push(`L ${t} ${e}`), this;
+  }
+  /**
+   * Draw an arc centered at current position
+   * @param r - arc radius
+   * @param startAngle - start angle in radians (0 = right, π/2 = up)
+   * @param endAngle - end angle in radians
+   * @returns this builder for chaining
+   */
+  arc(t, e, s) {
+    const i = this.currentX, n = this.currentY, r = i + t * Math.cos(e), o = n + t * Math.sin(e), a = i + t * Math.cos(s), h = n + t * Math.sin(s), d = s - e, u = d > 0 ? 1 : 0, g = Math.abs(d) > Math.PI ? 1 : 0;
+    this.commands.push(`M ${r} ${o}`);
+    const f = a - r, b = h - o;
+    return this.commands.push(`a ${t} ${t} 0 ${g} ${u} ${f} ${b}`), this.currentX = a, this.currentY = h, this;
+  }
+  // ------------------------------------
+  // primitives
+  // ------------------------------------
+  /**
+   * Draw an open arrow at current position
+   * @param angleRad - direction the arrow points in radians (0 = right, π/2 = up)
+   * @returns this builder for chaining
+   */
+  arrow(t, e = 8) {
+    const s = Math.PI / 4, i = this.currentX, n = this.currentY, r = i - Math.cos(t) * e, o = n - Math.sin(t) * e, a = this.rotateAround(r, o, i, n, +s), h = this.rotateAround(r, o, i, n, -s);
+    return this.commands.push(
+      `M ${a.x} ${a.y} L ${i} ${n} L ${h.x} ${h.y}`,
+      `M ${i} ${n}`
+    ), this;
+  }
+  /**
+   * Draw a filled arrow at current position
+   * @param angleRad - direction the arrow points in radians (0 = right, π/2 = up)
+   * @returns this builder for chaining
+   */
+  arrowFilled(t, e = 8) {
+    const s = Math.PI / 4, i = this.currentX, n = this.currentY, r = i - Math.cos(t) * e, o = n - Math.sin(t) * e, a = this.rotateAround(r, o, i, n, +s), h = this.rotateAround(r, o, i, n, -s);
+    return this.filledCommands.push(
+      `M ${a.x} ${a.y} L ${i} ${n} L ${h.x} ${h.y} Z`,
+      `M ${i} ${n}`
+    ), this;
+  }
+  /**
+   * Draw a tick mark at current position
+   * @param angleRad - orientation angle in radians (dimension line direction)
+   * @returns this builder for chaining
+   */
+  tick(t, e = 15) {
+    const s = this.currentX, i = this.currentY, n = e / 2, r = s, o = i - n, a = s, h = i + n, d = -Math.PI / 4, u = this.rotateAround(
+      r,
+      o,
+      s,
+      i,
+      d
+    ), p = this.rotateAround(
+      a,
+      h,
+      s,
+      i,
+      d
+    ), g = this.rotateAround(
+      r,
+      o,
+      s,
+      i,
+      t
+    ), f = this.rotateAround(
+      a,
+      h,
+      s,
+      i,
+      t
+    ), b = this.rotateAround(
+      u.x,
+      u.y,
+      s,
+      i,
+      t
+    ), x = this.rotateAround(
+      p.x,
+      p.y,
+      s,
+      i,
+      t
+    );
+    return this.commands.push(
+      `M ${g.x} ${g.y} L ${f.x} ${f.y}`,
+      `M ${b.x} ${b.y} L ${x.x} ${x.y}`,
+      `M ${s} ${i}`
+    ), this;
+  }
+  /**
+   * Draw a center mark (crosshair with center dot) at current position
+   * @param size - total size of the crosshair
+   * @defaultValue 10
+   * @returns this builder for chaining
+   */
+  centerMark(t = 10) {
+    const e = t / 2, s = this.currentX, i = this.currentY;
+    this.commands.push(
+      `M ${s - e} ${i} L ${s + e} ${i}`,
+      `M ${s} ${i - e} L ${s} ${i + e}`,
+      `M ${s} ${i}`
+    );
+    const n = t / 10;
+    return this.filledCommands.push(
+      `M ${s - n} ${i} a ${n} ${n} 0 1 0 ${n * 2} 0 a ${n} ${n} 0 1 0 ${-(n * 2)} 0`
+    ), this;
+  }
+  /**
+   * Rotate a point around a center point by a given angle
+   * @param x - point x coordinate
+   * @param y - point y coordinate
+   * @param centerX - rotation center x
+   * @param centerY - rotation center y
+   * @param radians - rotation angle in radians
+   * @returns rotated point coordinates
+   */
+  rotateAround = (t, e, s, i, n) => {
+    const r = t - s, o = e - i, a = Math.cos(n), h = Math.sin(n);
+    return {
+      x: s + r * a - o * h,
+      y: i + r * h + o * a
+    };
+  };
+  /**
+   * Place text at position relative to current position
+   * @param dx - horizontal offset from current position
+   * @param dy - vertical offset from current position
+   * @param text - text content to display
+   * @param align - text alignment (maps to SVG text-anchor: start, middle, end)
+   * @defaultValue "middle"
+   * @param className - optional class name for the text element
+   * @returns this builder for chaining
+   */
+  textAt(t, e, s, i = "middle", n) {
+    return this.textRecords.push({
+      x: this.currentX + t,
+      y: this.currentY + e,
+      text: s,
+      align: i,
+      className: n
+    }), this;
+  }
+  /**
+   * Place text at absolute position
+   * @param x - absolute x coordinate
+   * @param y - absolute y coordinate
+   * @param text - text content to display
+   * @param align - text alignment (maps to SVG text-anchor: start, middle, end)
+   * @defaultValue "middle"
+   * @param className - optional class name for the text element
+   * @returns this builder for chaining
+   */
+  textAtAbs(t, e, s, i = "middle", n) {
+    return this.textRecords.push({ x: t, y: e, text: s, align: i, className: n }), this;
+  }
+  /**
+   * Close the current path
+   * @returns this builder for chaining
+   */
+  close() {
+    return this.commands.push("z"), this;
+  }
+}
+class I {
+  g;
+  entries = [];
+  // tracks current dimension write position during record cycle
+  activeIndex = 0;
+  translateX = 0;
+  translateY = 0;
+  lastTransform = "";
+  drawUsage = "dynamic";
+  hasCommitted = !1;
+  constructor(t) {
+    this.g = document.createElementNS(c, "g"), t.appendChild(this.g);
+  }
+  /**
+   * Begin recording phase
+   */
+  beginRecord() {
+    this.activeIndex = 0;
+    for (const t of this.entries) t.activeTextCursor = 0;
+  }
+  /**
+   * Commit recorded dimensions to the DOM
+   */
+  commit() {
+    if (!(this.drawUsage === "static" && this.hasCommitted)) {
+      for (let t = 0; t < this.activeIndex; t++) {
+        const e = this.entries[t], s = e.builder.toPathData() ?? "";
+        s !== e.lastD && (e.path.setAttribute("d", s), e.lastD = s);
+        const i = e.builder.toFilledPathData() ?? "";
+        i !== e.lastFd && (e.filledPath.setAttribute("d", i), e.lastFd = i);
+        const n = e.builder.getTexts();
+        for (const r of n) {
+          const o = e.activeTextCursor++, a = o < e.texts.length ? e.texts[o] : this.createText(e), h = `translate(${r.x} ${r.y}) scale(1,-1)`;
+          r.align !== a.lastAnchor && (a.el.setAttribute("text-anchor", r.align), a.lastAnchor = r.align);
+          const d = r.className ?? "";
+          d !== a.lastClass && (d ? a.el.setAttribute("class", d) : a.el.removeAttribute("class"), a.lastClass = d), h !== a.lastTransform && (a.el.setAttribute("transform", h), a.lastTransform = h), r.text !== a.lastText && (a.el.textContent = r.text, a.lastText = r.text);
+        }
+        for (; e.texts.length > e.activeTextCursor; )
+          e.texts.pop()?.el.remove();
+      }
+      if (this.entries.length > this.activeIndex)
+        for (let t = this.entries.length - 1; t >= this.activeIndex; t--)
+          this.entries[t].root.remove(), this.entries.pop();
+      this.drawUsage === "static" && (this.hasCommitted = !0);
+    }
+  }
+  clear() {
+    this.entries.length = 0, this.activeIndex = 0, this.g.replaceChildren(), this.hasCommitted = !1, this.translateX = 0, this.translateY = 0, this.applyTransform();
+  }
+  translate(t, e) {
+    this.translateX = t, this.translateY = e, this.applyTransform();
+  }
+  setDrawUsage(t) {
+    this.drawUsage = t, t === "dynamic" && (this.hasCommitted = !1);
+  }
+  dimension(t) {
+    const { className: e = "" } = t ?? {}, s = this.activeIndex++;
+    if (s < this.entries.length) {
+      const h = this.entries[s];
+      return h.builder.reset(), e !== h.lastClass && (h.path.setAttribute("class", `pluton-dim-stroke ${e}`), h.filledPath.setAttribute("class", `pluton-dim-filled ${e}`), h.lastClass = e), h.builder;
+    }
+    const i = document.createElementNS(c, "g");
+    this.g.appendChild(i);
+    const n = document.createElementNS(c, "path");
+    n.setAttribute("class", `pluton-dim-stroke ${e}`), i.appendChild(n);
+    const r = document.createElementNS(c, "path");
+    r.setAttribute("class", `pluton-dim-filled ${e}`), i.appendChild(r);
+    const o = new F(), a = {
+      root: i,
+      path: n,
+      filledPath: r,
+      builder: o,
+      lastD: "",
+      lastFd: "",
+      lastClass: e,
+      texts: [],
+      activeTextCursor: 0
+    };
+    return this.entries.push(a), o;
+  }
+  applyTransform() {
+    const t = `translate(${this.translateX}, ${this.translateY})`;
+    t !== this.lastTransform && (this.g.setAttribute("transform", t), this.lastTransform = t);
+  }
+  /**
+   * Create a new text element for a dimension entry
+   * @param entry - dimension entry to add text to
+   * @returns newly created text cache
+   */
+  createText(t) {
+    const e = document.createElementNS(c, "text");
+    e.setAttribute("x", "0"), e.setAttribute("y", "0"), e.setAttribute("dominant-baseline", "middle"), t.root.appendChild(e);
+    const s = {
+      el: e,
+      lastTransform: "",
+      lastAnchor: "",
+      lastText: "",
+      lastClass: ""
+    };
+    return t.texts.push(s), s;
+  }
+}
+class k extends y {
+  unsubscribeBegin;
+  unsubscribeEnd;
+  constructor(t, e) {
+    super(t, "pluton-dimensions"), this.unsubscribeBegin = e.on(
+      "engine:commit-start",
+      () => this.beginRecord()
+    ), this.unsubscribeEnd = e.on("engine:commit-end", () => this.commit());
+  }
+  createGroup(t) {
+    return new I(t);
+  }
+  dispose() {
+    this.unsubscribeBegin(), this.unsubscribeEnd();
+  }
+}
+class T {
+  context;
+  backgroundLayer;
+  worldLayer;
+  geometryLayer;
+  dimensionsLayer;
+  pencilFilterEnabled = !1;
+  background;
+  lastCameraTransform = "";
+  constructor(t, e) {
+    this.context = t;
+    const s = t.svg, i = document.createElementNS(c, "g");
+    i.classList.add("pluton-background-container"), i.setAttribute(
+      "mask",
+      `url(#${t.defs.graphPaperMaskId})`
+    ), s.appendChild(i), this.backgroundLayer = document.createElementNS(c, "g"), this.backgroundLayer.classList.add("pluton-background-layer"), i.appendChild(this.backgroundLayer), this.background = new R(this.backgroundLayer, t);
+    const n = document.createElementNS(c, "g");
+    n.classList.add("pluton-content-container"), s.appendChild(n), this.worldLayer = document.createElementNS(c, "g"), this.worldLayer.classList.add("pluton-world-layer"), n.appendChild(this.worldLayer), this.geometryLayer = new X(this.worldLayer, e), this.dimensionsLayer = new k(this.worldLayer, e), this.applyFilter(), this.updateTransforms();
+  }
+  get geometry() {
+    return this.geometryLayer;
+  }
+  get dimensions() {
+    return this.dimensionsLayer;
+  }
+  dispose() {
+    this.geometryLayer.dispose(), this.dimensionsLayer.dispose(), this.backgroundLayer.parentElement?.remove(), this.worldLayer.parentElement?.remove();
+  }
+  updateTransforms() {
+    const t = this.context.viewport(), e = this.context.camera(), s = t.x + t.width * 0.5, i = t.y + t.height * 0.5;
+    if (e) {
+      const n = s + e.panX, r = i + e.panY, o = e.scale, a = `translate(${n}px, ${r}px) scale(${o}, ${-o})`;
+      a !== this.lastCameraTransform && (this.backgroundLayer.style.transform = a, this.worldLayer.style.transform = a, this.lastCameraTransform = a);
+    }
+  }
+  onViewportChanged(t) {
+    this.background.updateForViewport(t);
+  }
+  enableGrid(t) {
+    this.background.enableGrid(t);
+  }
+  enableAxes(t) {
+    this.background.enableAxes(t);
+  }
+  enableFilter(t) {
+    this.pencilFilterEnabled = t, this.applyFilter();
+  }
+  applyFilter() {
+    const t = this.context.defs.pencilFilterId, e = this.pencilFilterEnabled ? `url(#${t})` : "none";
+    this.geometryLayer.root.style.filter = e, this.dimensionsLayer.root.style.filter = e;
+  }
+}
+class N {
+  drawCallbacks = [];
+  paramsState;
+  autoRenderEnabled = !1;
+  events;
+  frameBudget = 1e3 / 60;
+  // 60 FPS cap (~16.67ms)
+  lastFrameTime = 0;
+  renderPending = !1;
+  rafId;
+  tickFn = null;
+  constructor(t, e) {
+    this.events = t;
+    for (const s of Object.keys(e)) {
+      const i = e[s];
+      if (i !== null && typeof i == "object")
+        throw new Error(
+          `Pluton2D params must be flat. "${s}" is an object — nested mutations won't trigger redraws.`
+        );
+    }
+    this.paramsState = new Proxy(e, {
+      set: (s, i, n) => {
+        if (n !== null && typeof n == "object")
+          throw new Error(
+            `Pluton2D params must be flat. "${String(i)}" cannot be an object.`
+          );
+        return s[i] = n, this.autoRenderEnabled && this.scheduleRender(), !0;
+      }
+    });
+  }
+  getParams() {
+    return this.paramsState;
+  }
+  /**
+   * Set a per-frame tick function (e.g. camera interpolation).
+   * Called every loop iteration. Return true to keep the loop alive.
+   */
+  setTickFn(t) {
+    this.tickFn = t;
+  }
+  draw(t) {
+    return this.drawCallbacks.push(t), this.autoRenderEnabled || (this.autoRenderEnabled = !0, this.scheduleRender()), () => {
+      const e = this.drawCallbacks.indexOf(t);
+      e >= 0 && this.drawCallbacks.splice(e, 1);
+    };
+  }
+  dispose() {
+    this.drawCallbacks.length = 0, this.autoRenderEnabled = !1, this.renderPending = !1, this.rafId !== void 0 && (cancelAnimationFrame(this.rafId), this.rafId = void 0);
+  }
+  /** Mark dirty + keep loop alive. Called on params mutation or resize. */
+  scheduleRender() {
+    this.renderPending = !0, this.ensureLoop();
+  }
+  /** Keep loop alive without marking dirty. Called by camera when targets change. */
+  requestFrame() {
+    this.ensureLoop();
+  }
+  ensureLoop() {
+    this.rafId === void 0 && (this.rafId = requestAnimationFrame((t) => this.loop(t)));
+  }
+  loop(t) {
+    this.rafId = void 0;
+    let s = this.tickFn?.() ?? !1;
+    if (this.renderPending) {
+      const i = t - this.lastFrameTime;
+      i >= this.frameBudget ? (this.lastFrameTime = t - i % this.frameBudget, this.renderPending = !1, this.commit()) : s = !0;
+    }
+    s && this.ensureLoop();
+  }
+  commit() {
+    this.events.emit("engine:commit-start", void 0);
+    for (const t of this.drawCallbacks)
+      t(this.paramsState);
+    this.events.emit("engine:commit-end", void 0);
+  }
+}
+class z {
+  context;
+  events;
+  scene;
+  engine;
+  camera;
+  defsEl;
+  /**
+   * Reactive parameters that trigger redraw when modified or reassigned
+   */
+  params;
+  /**
+   * Create a new Pluton2D instance
+   * @param svg - SVG element to render into
+   * @param initialParams - initial reactive parameters
+   */
+  constructor(t, e, s) {
+    this.events = new w(), t.classList.add("pluton-root"), this.defsEl = document.createElementNS(c, "defs"), t.insertBefore(this.defsEl, t.firstChild);
+    const i = new L(this.defsEl, s?.filterIntensity);
+    this.engine = new N(this.events, e), this.params = this.engine.getParams(), this.camera = new C(t, this.events, () => this.engine.requestFrame()), this.engine.setTickFn(() => this.camera.tick());
+    let n = null;
+    this.context = new S(t, i, this.camera, () => {
+      n?.();
+    }), i.syncForViewport(this.context.viewport()), this.scene = new T(this.context, this.events), n = () => {
+      this.context.invalidateViewport();
+      const r = this.context.viewport();
+      i.syncForViewport(r), this.scene.onViewportChanged(r), this.scene.updateTransforms(), this.engine.scheduleRender();
+    }, this.events.on("camera:changed", () => {
+      this.scene.updateTransforms();
+    });
+  }
+  /**
+   * Access the geometry layer for drawing shapes
+   */
+  get geometry() {
+    return this.scene.geometry;
+  }
+  /**
+   * Access the dimensions layer for annotations
+   */
+  get dimensions() {
+    return this.scene.dimensions;
+  }
+  /**
+   * Register a reactive drawing callback
+   * @param callback - drawing function receiving current params
+   * @returns unsubscribe function to remove the callback
+   */
+  draw(t) {
+    return this.engine.draw(t);
+  }
+  /**
+   * Enable or disable the hand-drawn pencil filter effect
+   * @param enabled - whether the filter is active
+   * @defaultValue false
+   */
+  enableFilter(t) {
+    this.scene.enableFilter(t);
+  }
+  /**
+   * Enable or disable the built-in graph-paper background
+   * @param enabled - whether the graph-paper is visible
+   * @defaultValue true
+   */
+  enableGrid(t) {
+    this.scene.enableGrid(t);
+  }
+  /**
+   * Enable or disable the built-in axes
+   * @param enabled - whether the axes are visible
+   * @defaultValue true
+   */
+  enableAxes(t) {
+    this.scene.enableAxes(t);
+  }
+  /**
+   * Enable or disable camera panning
+   * @param enabled - whether pan input is active
+   * @defaultValue false
+   */
+  enablePan(t) {
+    this.camera.enablePan(t);
+  }
+  /**
+   * Enable or disable camera zooming
+   * @param enabled - whether zoom input is active
+   * @defaultValue false
+   */
+  enableZoom(t) {
+    this.camera.enableZoom(t);
+  }
+  /**
+   * Enable or disable the built‑in hatch fill on geometry
+   * @param enabled - whether hatch fill is active
+   * @defaultValue false
+   */
+  enableHatchFill(t) {
+    t ? this.context.svg.classList.add("pluton-fill-hatch") : this.context.svg.classList.remove("pluton-fill-hatch");
+  }
+  /**
+   * Reset camera to initial position and zoom
+   */
+  resetCamera() {
+    this.camera.reset();
+  }
+  /**
+   * Clean up resources and remove event listeners
+   */
+  dispose() {
+    this.camera.dispose(), this.scene.dispose(), this.engine.dispose(), this.context.dispose(), this.events.clear(), this.defsEl.remove(), this.context.svg.classList.remove("pluton-root");
+  }
+}
+export {
+  z as Pluton2D
+};