@8btc/whiteboard 0.0.1

package/dist/index.js

@@ -0,0 +1,1706 @@
+var Dt = Object.defineProperty;
+var vt = (o) => {
+  throw TypeError(o);
+};
+var Zt = (o, s, t) => s in o ? Dt(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
+var z = (o, s, t) => Zt(o, typeof s != "symbol" ? s + "" : s, t), mt = (o, s, t) => s.has(o) || vt("Cannot " + t);
+var i = (o, s, t) => (mt(o, s, "read from private field"), t ? t.call(o) : s.get(o)), d = (o, s, t) => s.has(o) ? vt("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(o) : s.set(o, t), N = (o, s, t, e) => (mt(o, s, "write to private field"), e ? e.call(o, t) : s.set(o, t), t), S = (o, s, t) => (mt(o, s, "access private method"), t);
+import { jsxs as U, jsx as w, Fragment as zt } from "react/jsx-runtime";
+import { useState as O, useEffect as xt, useRef as At } from "react";
+import R from "konva";
+import Yt from "mitt";
+import { v4 as $ } from "uuid";
+import { Slot as Xt } from "@radix-ui/react-slot";
+import { cva as Vt } from "class-variance-authority";
+import { clsx as Ut } from "clsx";
+import { twMerge as Ht } from "tailwind-merge";
+import { Minus as Ot, Plus as Ft, Undo2 as Lt, Redo2 as Wt } from "lucide-react";
+var f, l, P, K, q, j, B, J, Q, tt, et, bt;
+class Gt {
+  constructor(s, t) {
+    d(this, et);
+    d(this, f);
+    d(this, l);
+    d(this, P, { x: 0, y: 0, scale: 1 });
+    /**
+     * 处理滚轮缩放和平移
+     */
+    d(this, K, (s) => {
+      s.evt.preventDefault();
+      const e = i(this, l).getPointerPosition();
+      if (e)
+        if (s.evt.ctrlKey) {
+          const r = i(this, P).scale, n = {
+            x: (e.x - i(this, P).x) / r,
+            y: (e.y - i(this, P).y) / r
+          }, a = 1.01, h = s.evt.deltaY > 0 ? -1 : 1, c = Math.min(Math.abs(s.evt.deltaY), 10);
+          let m = r;
+          for (let p = 0; p < c; p++)
+            m = h > 0 ? m * a : m / a;
+          const g = Math.max(0.1, Math.min(5, m)), I = {
+            x: e.x - n.x * g,
+            y: e.y - n.y * g
+          };
+          i(this, f).updateViewport({ x: I.x, y: I.y, scale: g });
+        } else {
+          const r = s.evt.shiftKey ? s.evt.deltaY : s.evt.deltaX, n = s.evt.shiftKey ? 0 : s.evt.deltaY;
+          i(this, f).updateViewport({
+            x: i(this, P).x - r,
+            y: i(this, P).y - n
+          });
+        }
+    });
+    d(this, q, (s) => {
+      const t = i(this, f).getState().toolType;
+      if (s.evt.button !== 0 || t === "hand")
+        return;
+      const e = s.target === i(this, l), r = i(this, l).getRelativePointerPosition();
+      if (t === "select" && !e) {
+        const n = s.target.id();
+        n && i(this, f).selectNode(n, s.evt.shiftKey);
+        return;
+      }
+      if (t === "rectangle" && r && i(this, f).createDraftNode(t, r), t === "image-marker" && r) {
+        const n = i(this, f).findImageAtPosition(r);
+        if (console.log(n, "imageShape"), n) {
+          const a = n.width(), h = n.height();
+          if (a && h) {
+            const c = {
+              x: n.x(),
+              y: n.y(),
+              width: a,
+              height: h
+            };
+            i(this, f).createDraftNode(t, r, {
+              parent: n.id(),
+              bounds: c,
+              startPosition: r
+            });
+          }
+        }
+      }
+      i(this, f).selectNode();
+    });
+    d(this, j, () => {
+      const s = i(this, f).getState().toolType;
+      if (s === "hand")
+        return;
+      const t = i(this, l).getRelativePointerPosition();
+      (s === "rectangle" || s === "image-marker") && t && i(this, f).updateDraftNode(t);
+    });
+    d(this, B, () => {
+      const s = i(this, f).getState().toolType;
+      s !== "hand" && (s === "rectangle" || s === "image-marker") && i(this, f).finalizeDraftNode();
+    });
+    d(this, J, (s) => {
+      if (s.target !== i(this, l))
+        return;
+      const t = i(this, f).getState().toolType;
+      t === "hand" ? this.setCursor("grabbing") : t === "select" && this.setCursor("all-scroll");
+    });
+    d(this, Q, (s) => {
+      s.target === i(this, l) && i(this, f).updateViewport({
+        x: i(this, l).x(),
+        y: i(this, l).y()
+      });
+    });
+    d(this, tt, (s) => {
+      s.target === i(this, l) && (i(this, f).updateViewport({
+        x: i(this, l).x(),
+        y: i(this, l).y()
+      }), this.resetCursor());
+    });
+    N(this, f, s), N(this, l, new R.Stage({
+      container: t.container,
+      width: t.width,
+      height: t.height,
+      x: 0,
+      y: 0,
+      scaleX: 1,
+      scaleY: 1,
+      draggable: t.draggable ?? !1,
+      className: t.className
+    })), S(this, et, bt).call(this);
+  }
+  /**
+   * 获取原生 Konva.Stage 实例
+   */
+  getStage() {
+    return i(this, l);
+  }
+  /**
+   * 获取当前视口状态
+   */
+  getViewport() {
+    return { ...i(this, P) };
+  }
+  /**
+   * 设置视口（包括位置、缩放和尺寸）
+   */
+  setViewport(s) {
+    const t = { ...i(this, P), ...s };
+    N(this, P, t), s.x !== void 0 && i(this, l).x(s.x), s.y !== void 0 && i(this, l).y(s.y), s.scale !== void 0 && (i(this, l).scaleX(s.scale), i(this, l).scaleY(s.scale)), s.width !== void 0 && i(this, l).width(s.width), s.height !== void 0 && i(this, l).height(s.height);
+  }
+  /**
+   * 设置是否可拖拽
+   */
+  setDraggable(s) {
+    i(this, l).draggable(s);
+  }
+  /**
+   * 设置光标样式
+   */
+  setCursor(s) {
+    const t = i(this, l).container();
+    t.style.cursor = s;
+  }
+  /**
+   * 重置光标样式
+   */
+  resetCursor() {
+    const s = i(this, l).container();
+    if (i(this, f).getState().toolType === "hand") {
+      s.style.cursor = "grab";
+      return;
+    }
+    s.style.cursor = "default";
+  }
+  /**
+   * 销毁 Stage
+   */
+  destroy() {
+    i(this, l).destroy();
+  }
+}
+f = new WeakMap(), l = new WeakMap(), P = new WeakMap(), K = new WeakMap(), q = new WeakMap(), j = new WeakMap(), B = new WeakMap(), J = new WeakMap(), Q = new WeakMap(), tt = new WeakMap(), et = new WeakSet(), /**
+ * 设置事件监听器
+ */
+bt = function() {
+  i(this, l).on("wheel", i(this, K)), i(this, l).on("pointerdown", i(this, q)), i(this, l).on("pointermove", i(this, j)), i(this, l).on("pointerup", i(this, B)), i(this, l).on("dragstart", i(this, J)), i(this, l).on("dragmove", i(this, Q)), i(this, l).on("dragend", i(this, tt));
+};
+var F, x, st, it, rt, nt, ot, at, ht, Et;
+class $t {
+  constructor(s, t) {
+    d(this, ht);
+    d(this, F);
+    d(this, x);
+    /**
+     * 处理 transformstart 事件
+     */
+    d(this, st, () => {
+      this.emitPositionChange();
+    });
+    /**
+     * 处理 transform 事件
+     */
+    d(this, it, () => {
+      console.log("transforming..."), this.emitPositionChange();
+    });
+    /**
+     * 处理 transformend 事件
+     */
+    d(this, rt, () => {
+      this.emitPositionChange();
+    });
+    /**
+     * 处理 dragstart 事件
+     */
+    d(this, nt, () => {
+      this.emitPositionChange();
+    });
+    /**
+     * 处理 dragmove 事件
+     */
+    d(this, ot, () => {
+      this.emitPositionChange();
+    });
+    /**
+     * 处理 dragend 事件
+     */
+    d(this, at, () => {
+      this.emitPositionChange();
+    });
+    N(this, F, s), N(this, x, new R.Transformer({
+      rotateEnabled: t?.rotateEnabled ?? !0,
+      ignoreStroke: t?.ignoreStroke ?? !0,
+      anchorSize: t?.anchorSize ?? 8,
+      borderDash: t?.borderDash ?? [4, 4],
+      anchorCornerRadius: t?.anchorCornerRadius ?? 4,
+      padding: t?.padding ?? 6
+    })), S(this, ht, Et).call(this);
+  }
+  /**
+   * 获取原生 Konva.Transformer 实例
+   */
+  getTransformer() {
+    return i(this, x);
+  }
+  /**
+   * 获取 Transformer 的位置信息
+   */
+  getPosition() {
+    if (i(this, x).nodes().length === 0)
+      return null;
+    const t = i(this, x).getClientRect();
+    return {
+      x: t.x,
+      y: t.y,
+      width: t.width,
+      height: t.height,
+      rotation: i(this, x).rotation()
+    };
+  }
+  /**
+   * 设置要变换的节点
+   */
+  setNodes(s) {
+    if (s.length === 0) {
+      this.clearNodes();
+      return;
+    }
+    i(this, x).nodes(s), i(this, x).moveToTop(), this.emitPositionChange();
+  }
+  /**
+   * 获取当前变换的节点
+   */
+  getNodes() {
+    return i(this, x).nodes();
+  }
+  /**
+   * 清除所有节点
+   */
+  clearNodes() {
+    i(this, x).nodes([]), i(this, x).moveToBottom(), this.emitPositionChange();
+  }
+  /**
+   * emit Transformer 位置
+   */
+  emitPositionChange() {
+    const s = this.getPosition();
+    i(this, F).emitEvent("transformer:positionChange", s);
+  }
+  /**
+   * 销毁 Transformer
+   */
+  destroy() {
+    i(this, x).destroy();
+  }
+}
+F = new WeakMap(), x = new WeakMap(), st = new WeakMap(), it = new WeakMap(), rt = new WeakMap(), nt = new WeakMap(), ot = new WeakMap(), at = new WeakMap(), ht = new WeakSet(), /**
+ * 设置事件监听器
+ */
+Et = function() {
+  i(this, x).on("transformstart", i(this, st)), i(this, x).on("transform", i(this, it)), i(this, x).on("transformend", i(this, rt)), i(this, x).on("dragstart", i(this, nt)), i(this, x).on("dragmove", i(this, ot)), i(this, x).on("dragend", i(this, at));
+};
+class Kt {
+  constructor(s) {
+    z(this, "_past", []);
+    z(this, "_present");
+    z(this, "_future", []);
+    z(this, "_emitter");
+    this._present = s, this._emitter = Yt();
+  }
+  /**
+   * 获取当前状态
+   */
+  getState() {
+    return { ...this._present };
+  }
+  /**
+   * 获取完整历史状态
+   */
+  getHistory() {
+    return {
+      past: [...this._past],
+      present: { ...this._present },
+      future: [...this._future]
+    };
+  }
+  /**
+   * 是否可以撤销
+   */
+  canUndo() {
+    return this._past.length > 0;
+  }
+  /**
+   * 是否可以重做
+   */
+  canRedo() {
+    return this._future.length > 0;
+  }
+  /**
+   * 订阅状态事件
+   */
+  on(s, t) {
+    this._emitter.on(s, t);
+  }
+  /**
+   * 取消订阅状态事件
+   */
+  off(s, t) {
+    this._emitter.off(s, t);
+  }
+  /**
+   * 发送事件
+   */
+  emit(s, t) {
+    this._emitter.emit(s, t);
+  }
+  /**
+   * 撤销操作
+   */
+  undo() {
+    if (this._past.length === 0) return;
+    const s = this._past[this._past.length - 1], t = this._past.slice(0, this._past.length - 1);
+    this._past = t, this._future = [this._present, ...this._future], this._present = s, this._syncState(s), this._emitter.emit("state:undo", s), this._emitter.emit("state:change", s);
+  }
+  /**
+   * 重做操作
+   */
+  redo() {
+    if (this._future.length === 0) return;
+    const s = this._future[0], t = this._future.slice(1);
+    this._past = [...this._past, this._present], this._future = t, this._present = s, this._syncState(s), this._emitter.emit("state:redo", s), this._emitter.emit("state:change", s);
+  }
+  /**
+   * 重置历史记录
+   */
+  resetHistory() {
+    this._past = [], this._future = [], this._emitter.emit("state:reset", this._present), this._emitter.emit("state:change", this._present);
+  }
+  /**
+   * 更新状态
+   * @param partial - 部分状态更新
+   * @param addToHistory - 是否添加到历史记录
+   */
+  _updateState(s, t = !0) {
+    const e = { ...this._present, ...s };
+    t && (this._past = [...this._past, this._present], this._future = []), this._present = e, this._emitter.emit("state:change", e);
+  }
+  /**
+   * 同步状态到外部系统（由子类实现）
+   * @param _state - 要同步的状态
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _syncState(s) {
+  }
+  /**
+   * 清理资源
+   */
+  _dispose() {
+    this._emitter.all.clear();
+  }
+}
+const wt = "shapeNameForSelect", y = {
+  CORNER_RADIUS: 6,
+  MIN_SIZE: 10
+}, V = {
+  MIN_SIZE: 10
+}, St = {
+  MIN_SIZE: 10
+};
+function qt(o, s, t) {
+  return 2 * (s + o - t * (4 - Math.PI));
+}
+function jt(o, s, t) {
+  let e = 1, r = 0, n = 0;
+  switch (t) {
+    case "dashed":
+      r = Math.min(s * 2, o / 4);
+      break;
+    case "dotted":
+      e = 8, r = s / e;
+      break;
+    default:
+      return [];
+  }
+  let a = Math.floor(o / r / (2 * e));
+  return a = Math.max(a, 3), r = o / a / (2 * e), n = (o - a * r) / a, [r, n];
+}
+function Bt(o) {
+  switch (o) {
+    case "small":
+      return 2;
+    case "medium":
+      return 3;
+    case "large":
+      return 5;
+    case "extra-large":
+      return 8;
+    default:
+      return 3;
+  }
+}
+function Jt(o) {
+  return Array.isArray(o) && o.length > 1 ? o[0] + o[1] : 0;
+}
+function _t(o) {
+  return {
+    width: Math.max(St.MIN_SIZE, o.width() * o.scaleX()),
+    height: Math.max(St.MIN_SIZE, o.height() * o.scaleY())
+  };
+}
+class Nt {
+  constructor(s, t) {
+    z(this, "core");
+    z(this, "node");
+    z(this, "element");
+    z(this, "toolTypeChangeHandler");
+    this.core = s, this.node = t, this.element = this.createElement(), this.toolTypeChangeHandler = (e) => {
+      const r = e === "select";
+      this.element.listening(r);
+    }, this.toolTypeChangeHandler(this.core.getToolType()), this.core.on("toolType:change", this.toolTypeChangeHandler);
+  }
+  /**
+   * 获取 Konva 元素
+   */
+  getElement() {
+    return this.element;
+  }
+  /**
+   * 获取节点数据
+   */
+  getNode() {
+    return this.node;
+  }
+  /**
+   * 销毁节点
+   */
+  destroy() {
+    this.core.off("toolType:change", this.toolTypeChangeHandler), this.element.destroy();
+  }
+}
+function Qt(o, s) {
+  if (!s || s === 0)
+    return null;
+  const t = new R.Animation((e) => {
+    if (!e) return;
+    const r = -e.time / 10 % s;
+    o.dashOffset(r);
+  }, o.getLayer());
+  return {
+    start: () => t.start(),
+    stop: () => t.stop(),
+    isRunning: () => t.isRunning()
+  };
+}
+var _, D, gt, pt, kt;
+class te extends Nt {
+  constructor(t, e) {
+    super(t, e);
+    d(this, D);
+    d(this, _, null);
+    e.style.animated && S(this, D, gt).call(this), S(this, D, kt).call(this, this.getElement());
+  }
+  createElement() {
+    const t = Math.max(
+      this.node.props.width ?? y.MIN_SIZE,
+      y.MIN_SIZE
+    ), e = Math.max(
+      this.node.props.height ?? y.MIN_SIZE,
+      y.MIN_SIZE
+    ), r = {
+      id: this.node.id,
+      ...this.node.props,
+      ...this.node.style,
+      width: t,
+      height: e,
+      cornerRadius: y.CORNER_RADIUS,
+      name: wt,
+      draggable: !0,
+      stroke: "black",
+      strokeWidth: 2
+    }, n = new R.Rect(r);
+    return n.setAttrs({
+      width: t,
+      height: e
+    }), n;
+  }
+  /**
+   * 获取 Konva.Rect 实例
+   */
+  getElement() {
+    return this.element;
+  }
+  /**
+   * 更新节点数据
+   */
+  updateNode(t) {
+    this.node = {
+      ...this.node,
+      ...t,
+      props: {
+        ...this.node.props,
+        ...t.props
+      },
+      style: {
+        ...this.node.style,
+        ...t.style
+      }
+    };
+    const e = this.getElement();
+    e.x(this.node.props.x), e.y(this.node.props.y);
+    const r = Math.max(
+      this.node.props.width ?? y.MIN_SIZE,
+      y.MIN_SIZE
+    ), n = Math.max(
+      this.node.props.height ?? y.MIN_SIZE,
+      y.MIN_SIZE
+    );
+    e.width(r), e.height(n), this.node.style.animated && !i(this, _) ? S(this, D, gt).call(this) : !this.node.style.animated && i(this, _) && S(this, D, pt).call(this);
+  }
+  /**
+   * 销毁
+   */
+  destroy() {
+    S(this, D, pt).call(this), super.destroy();
+  }
+}
+_ = new WeakMap(), D = new WeakSet(), /**
+ * 初始化动画
+ */
+gt = function() {
+  const t = this.getElement(), e = t.dash();
+  if (!e || e.length === 0) return;
+  const r = Jt(e);
+  N(this, _, Qt(t, r)), i(this, _) && i(this, _).start();
+}, /**
+ * 销毁动画
+ */
+pt = function() {
+  i(this, _) && (i(this, _).stop(), N(this, _, null));
+}, /**
+ * 设置事件处理器
+ */
+kt = function(t = void 0) {
+  const e = t ?? this.getElement();
+  e.on("transformstart", () => {
+    this.node.style.animated && i(this, _) && i(this, _).stop();
+  }), e.on("transform", (r) => {
+    const n = r.target, { width: a, height: h } = _t(n), c = qt(a, h, y.CORNER_RADIUS), m = jt(
+      c,
+      Bt(this.node.style.size),
+      this.node.style.line
+    );
+    n.scale({ x: 1, y: 1 }), n.width(a), n.height(h), n.dash(m.map((g) => g * this.core.getStageScale()));
+  }), e.on("transformend", (r) => {
+    const n = r.target, { width: a, height: h } = _t(n), c = {
+      ...this.node.props,
+      x: n.x(),
+      y: n.y(),
+      width: a,
+      height: h,
+      rotation: n.rotation()
+    };
+    this.node.props = c, this.core._syncNodeFromElement(this.node.id, {
+      props: c
+    }), this.node.style.animated && i(this, _)?.isRunning() === !1 && i(this, _).start();
+  }), e.on("dragend", (r) => {
+    const n = r.target, a = {
+      ...this.node.props,
+      x: n.x(),
+      y: n.y()
+    };
+    this.node.props = a, this.core._syncNodeFromElement(this.node.id, {
+      props: a
+    });
+  });
+};
+var E, ut, Ct, yt, ft;
+class ee extends Nt {
+  constructor(t, e) {
+    super(t, e);
+    d(this, E);
+    S(this, E, ut).call(this), S(this, E, Ct).call(this, this.getElement());
+  }
+  createElement() {
+    const t = document.createElement("canvas");
+    return t.width = 1, t.height = 1, new R.Image({
+      id: this.node.id,
+      x: this.node.props.x,
+      y: this.node.props.y,
+      name: wt,
+      draggable: !0,
+      image: t
+    });
+  }
+  /**
+   * 获取 Konva.Image 实例
+   */
+  getElement() {
+    return this.element;
+  }
+  /**
+   * 更新节点数据
+   */
+  updateNode(t) {
+    this.node = {
+      ...this.node,
+      ...t,
+      props: {
+        ...this.node.props,
+        ...t.props
+      },
+      style: {
+        ...this.node.style,
+        ...t.style
+      },
+      meta: {
+        ...this.node.meta,
+        ...t.meta
+      }
+    };
+    const e = this.getElement();
+    if (e.x(this.node.props.x), e.y(this.node.props.y), this.node.props.width && this.node.props.height) {
+      const r = Math.max(this.node.props.width, V.MIN_SIZE), n = Math.max(this.node.props.height, V.MIN_SIZE);
+      e.width(r), e.height(n);
+    }
+    this.node.props.rotation !== void 0 && e.rotation(this.node.props.rotation), t.meta?.imageUrl && t.meta.imageUrl !== this.node.meta.imageUrl && S(this, E, ut).call(this);
+  }
+  /**
+   * 销毁
+   */
+  destroy() {
+    super.destroy();
+  }
+}
+E = new WeakSet(), /**
+ * 加载图片
+ */
+ut = function() {
+  const t = this.node.meta.imageUrl;
+  if (!t) {
+    console.warn("Image URL is missing");
+    return;
+  }
+  const e = new window.Image();
+  e.crossOrigin = "anonymous", e.src = t, e.onload = () => {
+    this.getElement().image(e);
+    const r = this.node.props.width ?? e.width, n = this.node.props.height ?? e.height;
+    this.getElement().width(Math.max(r, V.MIN_SIZE)), this.getElement().height(Math.max(n, V.MIN_SIZE));
+  }, e.onerror = () => {
+    console.error("Failed to load image:", t);
+  };
+}, /**
+ * 设置事件处理器
+ */
+Ct = function(t) {
+  t.on("transform", (e) => {
+    const r = e.target, n = Math.max(V.MIN_SIZE, r.width() * r.scaleX()), a = Math.max(V.MIN_SIZE, r.height() * r.scaleY());
+    r.scale({ x: 1, y: 1 }), r.width(n), r.height(a), S(this, E, yt).call(this);
+  }), t.on("transformend", (e) => {
+    const r = e.target, n = {
+      ...this.node.props,
+      x: r.x(),
+      y: r.y(),
+      width: r.width(),
+      height: r.height(),
+      rotation: r.rotation()
+    };
+    this.node.props = n, this.core._syncNodeFromElement(this.node.id, {
+      props: n
+    }), S(this, E, ft).call(this);
+  }), t.on("dragmove", () => {
+    S(this, E, yt).call(this);
+  }), t.on("dragend", (e) => {
+    const r = e.target, n = {
+      ...this.node.props,
+      x: r.x(),
+      y: r.y()
+    };
+    this.node.props = n, this.core._syncNodeFromElement(this.node.id, {
+      props: n
+    }), S(this, E, ft).call(this);
+  });
+}, /**
+ * 同步 image-marker 节点的位置（实时更新 Konva 元素）
+ */
+yt = function() {
+  const t = this.getElement(), e = t.getLayer();
+  if (!e) return;
+  const r = t.x(), n = t.y(), a = t.width(), h = t.height(), c = e.find(
+    (g) => g.hasName(this.node.id)
+  ), m = this.core.getState().nodes || [];
+  c.forEach((g) => {
+    const I = m.find((p) => p.id === g.id());
+    if (I?.type === "image-marker" && I.meta.relativePosition) {
+      const { start: p, end: k } = I.meta.relativePosition, C = r + p.percentX / 100 * a, T = n + p.percentY / 100 * h, X = r + k.percentX / 100 * a, Z = n + k.percentY / 100 * h, Pt = Math.min(C, X), Rt = Math.min(T, Z), dt = Math.abs(X - C), lt = Math.abs(Z - T);
+      g.position({ x: Pt, y: Rt }), g.setAttrs({ width: dt, height: lt }), g.getChildren().forEach((G) => {
+        G.getClassName() === "Rect" ? G.setAttrs({ width: dt, height: lt }) : G.getClassName() === "Group" && G.setAttrs({ x: dt, y: lt });
+      });
+    }
+  });
+}, /**
+ * 同步 image-marker 节点到状态
+ */
+ft = function() {
+  const e = this.getElement().getLayer();
+  if (!e) return;
+  e.find(
+    (n) => n.hasName(this.node.id)
+  ).forEach((n) => {
+    this.core._syncNodeFromElement(n.id(), {
+      props: {
+        x: n.x(),
+        y: n.y(),
+        width: n.width(),
+        height: n.height()
+      }
+    });
+  });
+};
+var Y, b, L, W, ct, Tt;
+class se extends Nt {
+  constructor(t, e) {
+    super(t, e);
+    d(this, ct);
+    d(this, Y);
+    d(this, b);
+    d(this, L);
+    d(this, W);
+    const r = this.getElement();
+    N(this, Y, r.findOne(".rect")), N(this, b, r.findOne(".marker-group")), N(this, L, i(this, b).findOne("Circle")), N(this, W, i(this, b).findOne("Text")), S(this, ct, Tt).call(this);
+  }
+  createElement() {
+    const t = Math.max(
+      this.node.props.width ?? y.MIN_SIZE,
+      y.MIN_SIZE
+    ), e = Math.max(
+      this.node.props.height ?? y.MIN_SIZE,
+      y.MIN_SIZE
+    ), r = new R.Group({
+      id: this.node.id,
+      name: `static ${this.node.meta.parent}`,
+      x: this.node.props.x,
+      y: this.node.props.y,
+      width: t,
+      height: e
+    }), n = new R.Rect({
+      name: "rect",
+      x: 0,
+      y: 0,
+      width: t,
+      height: e,
+      stroke: this.node.style.color,
+      strokeWidth: 2,
+      dash: [5, 5],
+      fill: "transparent",
+      cornerRadius: y.CORNER_RADIUS
+    }), a = new R.Group({
+      name: "marker-group",
+      x: t,
+      y: e
+    }), c = 16 / this.core.getStageScale(), m = new R.Circle({
+      radius: c,
+      fill: "red",
+      stroke: "black",
+      strokeWidth: 2
+    }), g = new R.Text({
+      x: -c,
+      y: -c,
+      width: c * 2,
+      height: c * 2,
+      text: String(this.node.meta.markerNumber || ""),
+      align: "center",
+      verticalAlign: "middle",
+      fontSize: 16,
+      fill: "white"
+    });
+    return a.add(m), a.add(g), r.add(n), r.add(a), r;
+  }
+  /**
+   * 获取 Konva.Group 实例
+   */
+  getElement() {
+    return this.element;
+  }
+  /**
+   * 更新节点数据
+   */
+  updateNode(t) {
+    this.node = {
+      ...this.node,
+      ...t,
+      props: {
+        ...this.node.props,
+        ...t.props
+      },
+      style: {
+        ...this.node.style,
+        ...t.style
+      },
+      meta: {
+        ...this.node.meta,
+        ...t.meta
+      }
+    };
+    const e = this.getElement();
+    e.x(this.node.props.x), e.y(this.node.props.y);
+    const r = Math.max(
+      this.node.props.width ?? y.MIN_SIZE,
+      y.MIN_SIZE
+    ), n = Math.max(
+      this.node.props.height ?? y.MIN_SIZE,
+      y.MIN_SIZE
+    );
+    e.width(r), e.height(n), i(this, Y).width(r), i(this, Y).height(n), i(this, b).x(r), i(this, b).y(n), t.style?.color && i(this, Y).stroke(t.style.color), t.meta?.markerNumber !== void 0 && i(this, W).text(String(t.meta.markerNumber));
+  }
+  /**
+   * 销毁
+   */
+  destroy() {
+    super.destroy();
+  }
+  /**
+   * 更新焦点状态（hover 或 selected）
+   */
+  setFocusState(t) {
+    const e = t ? 3 : 2, r = t ? 1.2 : 1;
+    i(this, Y).strokeWidth(e), i(this, L).strokeWidth(e), i(this, b).scaleX(r), i(this, b).scaleY(r);
+  }
+}
+Y = new WeakMap(), b = new WeakMap(), L = new WeakMap(), W = new WeakMap(), ct = new WeakSet(), /**
+ * 设置事件处理器
+ */
+Tt = function() {
+  i(this, b).on("pointerover", () => {
+    this.setFocusState(!0), this.core.setCursor("pointer");
+  }), i(this, b).on("pointerout", () => {
+    const e = (this.core.getState().selectedNodeIds || []).includes(this.node.id);
+    this.setFocusState(e), this.core.resetCursor();
+  }), i(this, b).on("pointerdown", () => {
+    this.core.selectNode(this.node.id);
+  });
+};
+function Mt(o, s, t) {
+  switch (s) {
+    case "rectangle":
+      return new te(o, t);
+    case "image":
+      return new ee(o, t);
+    case "image-marker":
+      return new se(o, t);
+    default:
+      return null;
+  }
+}
+const ie = (o, s, t, e) => {
+  const r = {
+    type: o,
+    id: $(),
+    text: null,
+    style: {
+      opacity: 1,
+      line: "solid",
+      color: "black",
+      size: "medium",
+      animated: !1
+    },
+    props: {
+      x: s.x,
+      y: s.y,
+      rotation: 0,
+      visible: !0
+    },
+    meta: e ?? {}
+  };
+  return o === "image-marker" ? {
+    ...r,
+    style: {
+      ...r.style,
+      color: "#ff0000",
+      line: "dashed"
+    }
+  } : r;
+};
+function re(o, s, t) {
+  let e = s;
+  o.type === "image-marker" && t && (e = {
+    x: Math.max(t.x, Math.min(t.x + t.width, s.x)),
+    y: Math.max(t.y, Math.min(t.y + t.height, s.y))
+  });
+  const [r, n] = ne(
+    { x: o.props.x, y: o.props.y },
+    e
+  );
+  return o.type === "rectangle" || o.type === "image-marker" ? {
+    ...o,
+    props: {
+      ...o.props,
+      x: r.x,
+      y: r.y,
+      width: Math.max(n.x - r.x, y.MIN_SIZE),
+      height: Math.max(n.y - r.y, y.MIN_SIZE)
+    }
+  } : o;
+}
+function ne(o, s) {
+  let t = o.x, e = o.y, r = s.x, n = s.y, a;
+  return t > r && (a = Math.abs(t - r), t = r, r = t + a), e > n && (a = Math.abs(e - n), e = n, n = e + a), [
+    { x: t, y: e },
+    { x: r, y: n }
+  ];
+}
+var u, A, M, v;
+class oe extends Kt {
+  constructor(t) {
+    super({
+      viewport: {
+        x: 0,
+        y: 0,
+        width: t.clientWidth,
+        height: t.clientHeight,
+        scale: 1
+      },
+      toolType: "select",
+      nodes: []
+    });
+    d(this, u);
+    d(this, A);
+    d(this, M);
+    d(this, v, null);
+    N(this, u, new Gt(this, {
+      container: t,
+      width: t.clientWidth,
+      height: t.clientHeight,
+      draggable: !1,
+      className: "touch-none"
+    })), N(this, A, new R.Layer()), N(this, M, new $t(this)), i(this, u).getStage().add(i(this, A)), i(this, A).add(i(this, M).getTransformer()), this.updateViewport(this.getState().viewport, !1);
+  }
+  /**
+   * 获取 CanvasStage 实例
+   */
+  getCanvasStage() {
+    return i(this, u);
+  }
+  /**
+   * 获取 CanvasTransformer 实例
+   */
+  getCanvasTransformer() {
+    return i(this, M);
+  }
+  /**
+   * 发射事件（供内部类使用）
+   */
+  emitEvent(t, e) {
+    this.emit(t, e);
+  }
+  /**
+   * 获取 Konva.Stage 实例
+   */
+  getStage() {
+    return i(this, u).getStage();
+  }
+  /**
+   * 获取 Stage 容器元素
+   */
+  getContainer() {
+    return i(this, u).getStage().container();
+  }
+  /**
+   * 获取主图层
+   */
+  getMainLayer() {
+    return i(this, A);
+  }
+  /**
+   * 获取当前工具类型
+   */
+  getToolType() {
+    return this.getState().toolType;
+  }
+  /**
+   * 设置当前工具类型（内部使用）
+   */
+  setToolType(t) {
+    this.selectNode(), this._updateState(
+      {
+        toolType: t
+      },
+      !1
+    ), this.emit("toolType:change", t), t === "hand" ? (i(this, u).setDraggable(!0), i(this, u).setCursor("grab")) : (i(this, u).setDraggable(!1), i(this, u).resetCursor());
+  }
+  /**
+   * 设置是否可拖拽（内部使用）
+   */
+  setDraggable(t) {
+    i(this, u).setDraggable(t);
+  }
+  /**
+   * 设置光标
+   * @internal 仅供内部使用
+   */
+  setCursor(t) {
+    i(this, u).setCursor(t);
+  }
+  /**
+   * 重置光标
+   * @internal 仅供内部使用
+   */
+  resetCursor() {
+    i(this, u).resetCursor();
+  }
+  /**
+   * 获取当前 Stage 缩放比例
+   */
+  getStageScale() {
+    return i(this, u).getStage().scaleX();
+  }
+  /**
+   * 更新视口位置
+   * @internal 仅供内部使用，外部请使用 CanvasApi
+   */
+  updateViewport(t, e = !1) {
+    i(this, u).setViewport(t);
+    const r = {
+      ...this.getState().viewport,
+      ...t
+    };
+    this._updateState(
+      {
+        viewport: r
+      },
+      e
+    ), this.emit("viewport:change", r), i(this, M).emitPositionChange();
+  }
+  createNodes(t) {
+    t.map((n) => Mt(this, n.type, n)).filter((n) => n !== null).forEach((n) => {
+      i(this, A).add(n.getElement());
+    });
+    const r = [...this.getState().nodes || [], ...t];
+    this._updateState(
+      {
+        nodes: r
+      },
+      !0
+    );
+  }
+  /**
+   * 创建图片节点（内部使用）
+   */
+  _createImageNode(t, e) {
+    const r = e ?? { x: 100, y: 100 }, n = {
+      id: $(),
+      type: "image",
+      props: {
+        x: r.x,
+        y: r.y,
+        width: void 0,
+        // 将在图片加载后设置
+        height: void 0,
+        rotation: 0,
+        visible: !0
+      },
+      style: {
+        color: "#000000",
+        line: "solid",
+        size: "medium",
+        opacity: 1
+      },
+      meta: {
+        imageUrl: t
+      }
+    };
+    this.createNodes([n]);
+  }
+  /**
+   * 创建图片标注节点（内部使用）
+   */
+  createImageMarkerNode(t, e, r, n) {
+    const a = this.getState().nodes || [];
+    let h = 0;
+    a.forEach((Z) => {
+      Z.type === "image-marker" && Z.meta.parent === t && typeof Z.meta.markerNumber == "number" && (h = Math.max(h, Z.meta.markerNumber));
+    });
+    const c = (e.x - n.x) / n.width * 100, m = (e.y - n.y) / n.height * 100, g = (r.x - n.x) / n.width * 100, I = (r.y - n.y) / n.height * 100, p = Math.min(e.x, r.x), k = Math.min(e.y, r.y), C = Math.abs(r.x - e.x), T = Math.abs(r.y - e.y), X = {
+      id: $(),
+      type: "image-marker",
+      props: {
+        x: p,
+        y: k,
+        width: C,
+        height: T,
+        rotation: 0,
+        visible: !0
+      },
+      style: {
+        color: "#ff0000",
+        line: "dashed",
+        size: "medium",
+        opacity: 1
+      },
+      meta: {
+        parent: t,
+        markerNumber: h + 1,
+        relativePosition: {
+          start: {
+            percentX: Math.max(0, Math.min(100, c)),
+            percentY: Math.max(0, Math.min(100, m))
+          },
+          end: {
+            percentX: Math.max(0, Math.min(100, g)),
+            percentY: Math.max(0, Math.min(100, I))
+          }
+        }
+      }
+    };
+    this.createNodes([X]);
+  }
+  /**
+   * 在指定位置查找图片节点
+   * @internal 仅供内部使用
+   */
+  findImageAtPosition(t) {
+    const e = i(this, u).getStage(), r = e.find(
+      (a) => a.getClassName() === "Image"
+    ), n = r.map(
+      (a) => a.listening()
+    );
+    r.forEach((a) => a.listening(!0));
+    try {
+      const h = e.getAllIntersections(t).filter(
+        (c) => c.getClassName() === "Image"
+      );
+      return h.length === 0 ? null : h[h.length - 1];
+    } finally {
+      r.forEach((a, h) => {
+        a.listening(n[h]);
+      });
+    }
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  createDraftNode(t, e, r) {
+    i(this, v) && i(this, v).destroy();
+    const n = ie(t, e, void 0, r);
+    N(this, v, Mt(this, t, n)), console.log(i(this, v)), i(this, v) && i(this, A).add(i(this, v).getElement());
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  updateDraftNode(t, e) {
+    if (!i(this, v)) return;
+    const r = i(this, v).getNode(), n = re(r, t, e);
+    i(this, v).updateNode(n);
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  finalizeDraftNode() {
+    if (!i(this, v)) return;
+    const t = $(), e = i(this, v).getNode();
+    if (e.type === "image-marker" && e.meta.parent) {
+      const n = e.meta.bounds, a = e.meta.startPosition, h = {
+        x: e.props.x + (e.props.width || 0),
+        y: e.props.y + (e.props.height || 0)
+      }, c = this.getState().nodes || [];
+      let m = 0;
+      c.forEach((T) => {
+        T.type === "image-marker" && T.meta.parent === e.meta.parent && typeof T.meta.markerNumber == "number" && (m = Math.max(m, T.meta.markerNumber));
+      });
+      const g = (a.x - n.x) / n.width * 100, I = (a.y - n.y) / n.height * 100, p = (h.x - n.x) / n.width * 100, k = (h.y - n.y) / n.height * 100, C = {
+        ...e,
+        props: {
+          ...e.props
+        },
+        style: {
+          ...e.style
+        },
+        meta: {
+          parent: e.meta.parent,
+          markerNumber: m + 1,
+          relativePosition: {
+            start: {
+              percentX: Math.max(0, Math.min(100, g)),
+              percentY: Math.max(0, Math.min(100, I))
+            },
+            end: {
+              percentX: Math.max(0, Math.min(100, p)),
+              percentY: Math.max(0, Math.min(100, k))
+            }
+          }
+        },
+        id: t,
+        type: "image-marker"
+      };
+      this.createNodes([C]), i(this, v).destroy(), N(this, v, null), this.setToolType("select");
+      return;
+    }
+    const r = {
+      ...e,
+      props: {
+        ...e.props
+      },
+      style: {
+        ...e.style
+      },
+      meta: {
+        ...e.meta
+      },
+      id: t
+    };
+    this.createNodes([r]), i(this, v).destroy(), N(this, v, null), this.setToolType("select");
+  }
+  /**
+   * 选择节点
+   * @internal 仅供内部使用，外部请使用 CanvasApi
+   */
+  selectNode(t, e = !1) {
+    const r = this.getState().selectedNodeIds ?? [];
+    if (r.length === 0 && !t)
+      return;
+    if (!t) {
+      i(this, M).clearNodes(), this._updateState(
+        {
+          selectedNodeIds: []
+        },
+        !1
+      );
+      return;
+    }
+    let n = [];
+    e ? n = r.length ? [...r, t] : [t] : n = [t];
+    const a = this.getStage().find(`.${wt}`).filter((h) => {
+      const c = h.id();
+      return n.includes(c);
+    });
+    i(this, M).setNodes(a), this._updateState(
+      {
+        selectedNodeIds: n
+      },
+      !1
+    );
+  }
+  /**
+   * 从元素同步节点数据（供节点类内部使用）
+   */
+  _syncNodeFromElement(t, e) {
+    const r = this.getState().nodes || [], n = r.findIndex((c) => c.id === t);
+    if (n === -1) return;
+    const a = {
+      ...r[n],
+      ...e,
+      props: {
+        ...r[n].props,
+        ...e.props
+      },
+      style: {
+        ...r[n].style,
+        ...e.style
+      },
+      meta: {
+        ...r[n].meta,
+        ...e.meta
+      }
+    }, h = [...r];
+    h[n] = a, this._updateState(
+      {
+        nodes: h
+      },
+      !0
+    );
+  }
+  /**
+   * 删除节点（内部使用）
+   */
+  _deleteNodes(t) {
+    if (t.length === 0) return;
+    const e = this.getState().nodes || [], r = new Set(t);
+    t.forEach((a) => {
+      e.find((c) => c.id === a)?.type === "image" && e.forEach((c) => {
+        c.type === "image-marker" && c.meta.parent === a && r.add(c.id);
+      });
+    }), r.forEach((a) => {
+      const h = this.getStage().findOne(`#${a}`);
+      h && h.destroy();
+    });
+    const n = e.filter((a) => !r.has(a.id));
+    i(this, M).clearNodes(), this._updateState(
+      {
+        nodes: n,
+        selectedNodeIds: []
+      },
+      !0
+    );
+  }
+  /**
+   * 删除当前选中的节点（内部使用）
+   */
+  _deleteSelectedNodes() {
+    const t = this.getState().selectedNodeIds || [];
+    t.length !== 0 && this._deleteNodes(t);
+  }
+  /**
+   * 获取 Transformer 的位置信息（内部使用）
+   */
+  getTransformerPosition() {
+    return i(this, M).getPosition();
+  }
+  /**
+   * 导出全部图形为图片（内部使用）
+   * @param options - 导出配置
+   * @returns DataURL 格式的图片数据
+   */
+  _exportAsImage(t) {
+    const e = i(this, u).getStage(), r = i(this, M).getTransformer(), n = r.visible();
+    r.visible(!1);
+    try {
+      return e.toDataURL({
+        pixelRatio: t?.pixelRatio ?? 2,
+        mimeType: t?.mimeType ?? "image/png",
+        quality: t?.quality ?? 1
+      });
+    } finally {
+      r.visible(n);
+    }
+  }
+  /**
+   * 导出当前选区为图片（内部使用）
+   * @param options - 导出配置
+   * @returns DataURL 格式的图片数据，如果没有选区则返回 null
+   */
+  _exportSelectionAsImage(t) {
+    const e = i(this, M).getPosition();
+    if (!e)
+      return console.warn("No selection to export"), null;
+    const r = i(this, u).getStage(), n = t?.padding ?? 10, a = i(this, M).getTransformer(), h = a.visible();
+    a.visible(!1);
+    try {
+      return r.toDataURL({
+        x: e.x - n,
+        y: e.y - n,
+        width: e.width + n * 2,
+        height: e.height + n * 2,
+        pixelRatio: t?.pixelRatio ?? 2,
+        mimeType: t?.mimeType ?? "image/png",
+        quality: t?.quality ?? 1
+      });
+    } finally {
+      a.visible(h);
+    }
+  }
+  /**
+   * 销毁 core（内部使用）
+   */
+  _dispose() {
+    i(this, M).destroy(), i(this, u).destroy(), super._dispose();
+  }
+  /**
+   * 实现父类的状态同步方法
+   * 当 undo/redo 时被调用
+   */
+  _syncState(t) {
+    i(this, u).setViewport({
+      x: t.viewport.x,
+      y: t.viewport.y,
+      scale: t.viewport.scale,
+      width: t.viewport.width,
+      height: t.viewport.height
+    });
+  }
+}
+u = new WeakMap(), A = new WeakMap(), M = new WeakMap(), v = new WeakMap();
+class ae extends oe {
+  /**
+   * 获取所有可用的工具类型
+   */
+  getAvailableTools() {
+    return ["select", "hand", "rectangle", "image-marker"];
+  }
+  /**
+   * 设置当前工具类型
+   */
+  setToolType(s) {
+    super.setToolType(s);
+  }
+  /**
+   * 更新视口位置
+   */
+  updateViewport(s, t = !1) {
+    super.updateViewport(s, t);
+  }
+  /**
+   * 创建图片节点
+   */
+  createImageNode(s, t) {
+    this._createImageNode(s, t);
+  }
+  /**
+   * 导出全部图形为图片
+   * @param options - 导出配置
+   * @returns DataURL 格式的图片数据
+   */
+  exportAsImage(s) {
+    return this._exportAsImage(s);
+  }
+  /**
+   * 导出当前选区为图片
+   * @param options - 导出配置
+   * @returns DataURL 格式的图片数据，如果没有选区则返回 null
+   */
+  exportSelectionAsImage(s) {
+    return this._exportSelectionAsImage(s);
+  }
+  /**
+   * 删除当前选中的节点
+   * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
+   */
+  deleteSelectedNodes() {
+    this._deleteSelectedNodes();
+  }
+  /**
+   * 删除指定的节点
+   * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
+   * @param nodeIds - 要删除的节点 ID 数组
+   */
+  deleteNodes(s) {
+    this._deleteNodes(s);
+  }
+  /**
+   * 销毁 canvas
+   */
+  dispose() {
+    super._dispose();
+  }
+}
+function he(o, s, t, e = !1) {
+  const [r, n] = s, [a, h] = t, c = a + (o - r) / (n - r) * (h - a);
+  return e ? a < h ? Math.max(Math.min(c, h), a) : Math.max(Math.min(c, a), h) : c;
+}
+const It = [
+  {
+    min: -1,
+    mid: 0.15,
+    step: 64
+  },
+  {
+    min: 0.05,
+    mid: 0.375,
+    step: 16
+  },
+  {
+    min: 0.15,
+    mid: 1,
+    step: 4
+  },
+  {
+    min: 0.7,
+    mid: 2.5,
+    step: 1
+  }
+];
+function ce({
+  viewportX: o,
+  viewportY: s,
+  scale: t,
+  size: e = 20,
+  showGrid: r = !0
+}) {
+  const n = o / t, a = s / t, h = t;
+  return r ? /* @__PURE__ */ U(
+    "svg",
+    {
+      className: "canvas-grid w-full h-full absolute top-0 left-0",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ w("defs", { children: It.map(({ min: c, mid: m, step: g }, I) => {
+          const p = g * e * h, k = 0.5 + n * h, C = 0.5 + a * h, T = k > 0 ? k % p : p + k % p, X = C > 0 ? C % p : p + C % p, Z = h < m ? he(h, [c, m], [0, 1]) : 1;
+          return /* @__PURE__ */ w(
+            "pattern",
+            {
+              id: `grid_${g}`,
+              width: p,
+              height: p,
+              patternUnits: "userSpaceOnUse",
+              children: /* @__PURE__ */ w(
+                "circle",
+                {
+                  className: "tl-grid-dot",
+                  cx: T,
+                  cy: X,
+                  r: 1,
+                  opacity: Z
+                }
+              )
+            },
+            I
+          );
+        }) }),
+        It.map(({ step: c }, m) => /* @__PURE__ */ w("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, m))
+      ]
+    }
+  ) : null;
+}
+function de(...o) {
+  return Ht(Ut(o));
+}
+const le = Vt(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function H({
+  className: o,
+  variant: s = "default",
+  size: t = "default",
+  asChild: e = !1,
+  ...r
+}) {
+  return /* @__PURE__ */ w(
+    e ? Xt : "button",
+    {
+      "data-slot": "button",
+      "data-variant": s,
+      "data-size": t,
+      className: de(le({ variant: s, size: t, className: o })),
+      ...r
+    }
+  );
+}
+function me({ api: o }) {
+  const [s, t] = O(o.getState().viewport);
+  xt(() => {
+    o.on("viewport:change", (c) => {
+      t(c);
+    });
+  }, [t, o]);
+  const e = (c) => {
+    const m = s.width / 2, g = s.height / 2, I = (m - s.x) / s.scale, p = (g - s.y) / s.scale, k = m - I * c, C = g - p * c;
+    o.updateViewport({ x: k, y: C, scale: c });
+  }, r = () => {
+    const c = Math.min(s.scale * 1.2, 5);
+    e(c);
+  }, n = () => {
+    const c = Math.max(s.scale / 1.2, 0.1);
+    e(c);
+  }, a = () => {
+    e(1);
+  }, h = Math.round(s.scale * 100);
+  return /* @__PURE__ */ U("div", { className: "zoom-panel flex items-center gap-2", children: [
+    /* @__PURE__ */ w(
+      H,
+      {
+        size: "sm",
+        variant: "secondary",
+        onClick: n,
+        title: "缩小",
+        children: /* @__PURE__ */ w(Ot, {})
+      }
+    ),
+    /* @__PURE__ */ U(
+      H,
+      {
+        size: "sm",
+        variant: "secondary",
+        onClick: a,
+        title: `${h}%`,
+        className: "min-w-16",
+        children: [
+          h,
+          "%"
+        ]
+      }
+    ),
+    /* @__PURE__ */ w(
+      H,
+      {
+        size: "sm",
+        variant: "secondary",
+        onClick: r,
+        title: "放大",
+        children: /* @__PURE__ */ w(Ft, {})
+      }
+    )
+  ] });
+}
+function ge({ api: o }) {
+  const [s, t] = O(o.canUndo()), [e, r] = O(o.canRedo());
+  return xt(() => {
+    const n = () => {
+      t(o.canUndo()), r(o.canRedo());
+    };
+    return o.on("state:change", n), () => {
+      o.off("state:change", n);
+    };
+  }, [o]), /* @__PURE__ */ U("div", { className: "history-panel flex items-center gap-2", children: [
+    /* @__PURE__ */ w(
+      H,
+      {
+        size: "sm",
+        variant: "secondary",
+        disabled: !s,
+        onClick: () => o.undo(),
+        title: "撤销",
+        children: /* @__PURE__ */ w(Lt, {})
+      }
+    ),
+    /* @__PURE__ */ w(
+      H,
+      {
+        size: "sm",
+        variant: "secondary",
+        disabled: !e,
+        onClick: () => o.redo(),
+        title: "重做",
+        children: /* @__PURE__ */ w(Wt, {})
+      }
+    )
+  ] });
+}
+function be({ setApi: o }) {
+  const s = At(null), [t, e] = O(null), [r, n] = O({ x: 0, y: 0, scale: 1 });
+  return xt(() => {
+    if (!s.current) return;
+    const a = new ae(s.current);
+    return e(a), o?.(a), a.on("viewport:change", (h) => {
+      n(h);
+    }), a.on("transformer:positionChange", (h) => {
+      console.log("Transformer position changed:", h);
+    }), () => {
+      a.dispose();
+    };
+  }, [o]), /* @__PURE__ */ U("div", { className: "pure-canvas relative size-full", children: [
+    /* @__PURE__ */ w(
+      ce,
+      {
+        viewportX: r.x,
+        viewportY: r.y,
+        scale: r.scale
+      }
+    ),
+    /* @__PURE__ */ w("div", { ref: s, className: "size-full" }),
+    t && /* @__PURE__ */ U(zt, { children: [
+      /* @__PURE__ */ w("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ w(ge, { api: t }) }),
+      /* @__PURE__ */ w("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ w(me, { api: t }) })
+    ] })
+  ] });
+}
+export {
+  ae as CanvasApi,
+  be as PureCanvas
+};