noteloom 0.3.2 → 0.4.0

package/dist/shared/index-B9jyyL8u.js

@@ -0,0 +1,2145 @@
+import { jsxs as _, jsx as p, Fragment as Br } from "react/jsx-runtime";
+import { useCallback as b, useSyncExternalStore as Xn, useEffect as Yn, useState as T, useRef as I, useMemo as vt } from "react";
+import { a as De, g as Rt, E as Hr, j as U, P as Ur, F as Ln, X as Zr, G as jr, H as Kr, I as Vr, J as Gr, K as Fn, L as Wr, N as qr, Q as Jr, U as Qr, V as to, W as eo, Y as no, Z as ro, l as oo } from "./icons-C1_s0jKK.js";
+import { d as so, i as io, c as ao } from "./leafBlockFactory-A9eUhSe-.js";
+function co(t) {
+  const r = De(), e = b((s) => r.subscribe(t, s), [r, t]), o = b(() => r.getBlock(t), [r, t]);
+  return Xn(e, o);
+}
+function hs(t) {
+  const r = De(), e = b((s) => r.subscribe(t, s), [r, t]), o = b(() => r.getRun(t), [r, t]);
+  return Xn(e, o);
+}
+function Mt(t, r, e) {
+  Yn(() => {
+    if (!r) return;
+    const o = Array.isArray(t) ? t : [t], s = (u) => {
+      var x, m;
+      o.some((E) => E.current && E.current.contains(u.target)) || ((m = (x = u.target).closest) == null ? void 0 : m.call(x, ".be-select-popover")) != null || e();
+    }, i = (u) => {
+      u.key === "Escape" && e();
+    };
+    return document.addEventListener("mousedown", s), document.addEventListener("keydown", i), () => {
+      document.removeEventListener("mousedown", s), document.removeEventListener("keydown", i);
+    };
+  }, [r, e, t]);
+}
+const Bn = 8, Hn = 0.5, lo = 0.5, uo = 4, Ie = 0.15, fo = 8;
+function Un(t, r) {
+  return Math.hypot(t[0] - r[0], t[1] - r[1]);
+}
+function Qt(t, r, e) {
+  return Math.min(e, Math.max(r, t));
+}
+function Kt(t) {
+  return Math.round(t * 100) / 100;
+}
+const Zn = 0.5;
+function ho(t) {
+  return t.some(([, , r]) => r !== void 0 && r !== Zn);
+}
+function po(t, { size: r = Bn, thinning: e = Hn } = {}) {
+  const o = r / 2, s = t.length;
+  if (!ho(t)) return new Array(s).fill(o);
+  const u = new Array(s);
+  let f = 0;
+  for (let m = 0; m < s; m += 1) {
+    if (m > 0) {
+      const B = Un(t[m], t[m - 1]);
+      f = f * 0.8 + B * 0.2;
+    }
+    const E = Qt(f / fo, 0, 1), S = t[m][2] ?? Zn, H = 0.4 + 0.6 * Qt(S, 0, 1), z = Qt(
+      o * H * (1 - e * E),
+      o * Ie,
+      o
+    );
+    u[m] = z;
+  }
+  const x = Math.min(uo, Math.floor(s / 2));
+  for (let m = 0; m < x; m += 1) {
+    const E = (m + 1) / (x + 1), S = Ie + (1 - Ie) * E;
+    u[m] *= S, u[s - 1 - m] *= S;
+  }
+  return u;
+}
+function mo(t, r) {
+  const e = t.length;
+  if (e < 3 || r <= 0) return t;
+  const o = new Array(e);
+  o[0] = t[0], o[e - 1] = t[e - 1];
+  for (let s = 1; s < e - 1; s += 1) {
+    const i = (t[s - 1][0] + t[s + 1][0]) / 2, u = (t[s - 1][1] + t[s + 1][1]) / 2, f = t[s][0] + (i - t[s][0]) * r, x = t[s][1] + (u - t[s][1]) * r;
+    o[s] = [f, x, t[s][2]];
+  }
+  return o;
+}
+function yo(t, r) {
+  const e = t.length, o = new Array(e), s = new Array(e);
+  for (let i = 0; i < e; i += 1) {
+    const u = t[Math.max(0, i - 1)], f = t[Math.min(e - 1, i + 1)];
+    let x = f[0] - u[0], m = f[1] - u[1];
+    const E = Math.hypot(x, m) || 1;
+    x /= E, m /= E;
+    const S = -m, H = x, z = r[i];
+    o[i] = [t[i][0] + S * z, t[i][1] + H * z], s[i] = [t[i][0] - S * z, t[i][1] - H * z];
+  }
+  return { left: o, right: s };
+}
+function jn(t) {
+  if (t.length === 0) return "";
+  let r = `M${Kt(t[0][0])},${Kt(t[0][1])}`;
+  for (let e = 1; e < t.length; e += 1) r += ` L${Kt(t[e][0])},${Kt(t[e][1])}`;
+  return r;
+}
+function xo([t, r], e) {
+  const s = [];
+  for (let i = 0; i < 12; i += 1) {
+    const u = i / 12 * Math.PI * 2;
+    s.push([t + Math.cos(u) * e, r + Math.sin(u) * e]);
+  }
+  return `${jn(s)} Z`;
+}
+function ee(t, r = {}) {
+  const {
+    size: e = Bn,
+    thinning: o = Hn,
+    smoothing: s = lo
+  } = r;
+  if (!t || t.length === 0) return "";
+  const i = [t[0]];
+  for (let S = 1; S < t.length; S += 1)
+    Un(t[S], i[i.length - 1]) > 0.1 && i.push(t[S]);
+  if (i.length === 1) {
+    const S = i[0][2] ?? 0.5, H = e / 2 * (0.4 + 0.6 * Qt(S, 0, 1));
+    return xo(i[0], H);
+  }
+  const u = po(i, { size: e, thinning: o }), f = mo(i, s), { left: x, right: m } = yo(f, u), E = [...x, ...m.slice().reverse()];
+  return `${jn(E)} Z`;
+}
+function te(t) {
+  if (!t || t.length === 0) return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+  let r = 1 / 0, e = 1 / 0, o = -1 / 0, s = -1 / 0;
+  for (const [i, u] of t)
+    i < r && (r = i), u < e && (e = u), i > o && (o = i), u > s && (s = u);
+  return { minX: r, minY: e, maxX: o, maxY: s };
+}
+function _e(t, r) {
+  const e = t.getBoundingClientRect(), o = e.width || 1, s = e.height || 1, i = Math.min(o / r, s / r), u = (o - r * i) / 2, f = (s - r * i) / 2;
+  return { rect: e, scale: i, offsetX: u, offsetY: f };
+}
+function J(t, r, e = { x: 0, y: 0, size: 1e3 }) {
+  const { rect: o, scale: s, offsetX: i, offsetY: u } = _e(r, e.size), f = e.x + (t.clientX - o.left - i) / s, x = e.y + (t.clientY - o.top - u) / s;
+  return [f, x];
+}
+function ze(t, r) {
+  return _e(t, r).scale;
+}
+function go(t, r, e, o) {
+  const [s, i] = J(t, r, e), { rect: u, scale: f, offsetX: x, offsetY: m } = _e(r, o), E = s - (t.clientX - u.left - x) / f, S = i - (t.clientY - u.top - m) / f;
+  return { x: E, y: S };
+}
+function zn(t, r) {
+  const e = t.x + t.size / 2, o = t.y + t.size / 2;
+  return { x: e - r / 2, y: o - r / 2 };
+}
+function Pt(t, r, e, o) {
+  if (e <= o) return { x: t, y: r };
+  const s = (o - e) / 2;
+  return { x: s, y: s };
+}
+function _t(t, r, e = 0) {
+  return t.minX - e <= r.maxX && t.maxX + e >= r.minX && t.minY - e <= r.maxY && t.maxY + e >= r.minY;
+}
+function Lt(t, r, e, o) {
+  const s = Math.min(t, e), i = Math.min(r, o), u = Math.abs(e - t), f = Math.abs(o - r);
+  return { x: s, y: i, width: u, height: f };
+}
+function Kn(t, r, e, o, s) {
+  const i = s * Math.PI / 180, u = Math.cos(i), f = Math.sin(i), x = t - e, m = r - o;
+  return [e + x * u - m * f, o + x * f + m * u];
+}
+function Vn(t, r, e) {
+  return t >= e.x && t <= e.x + e.width && r >= e.y && r <= e.y + e.height;
+}
+function bo(t, r, e) {
+  const o = e.width / 2, s = e.height / 2;
+  if (o === 0 || s === 0) return !1;
+  const i = e.x + o, u = e.y + s, f = (t - i) / o, x = (r - u) / s;
+  return f * f + x * x <= 1;
+}
+function wo(t, r, e, o, s, i) {
+  const u = s - e, f = i - o, x = u * u + f * f;
+  if (x === 0) return Math.hypot(t - e, r - o);
+  let m = ((t - e) * u + (r - o) * f) / x;
+  m = Math.min(1, Math.max(0, m));
+  const E = e + m * u, S = o + m * f;
+  return Math.hypot(t - E, r - S);
+}
+function Gn(t, r, e, o, s, i, u) {
+  return wo(t, r, e, o, s, i) <= u;
+}
+function Wn(t) {
+  const { x: r, y: e, width: o, height: s } = t;
+  return [
+    [r + o / 2, e],
+    [r + o, e + s / 2],
+    [r + o / 2, e + s],
+    [r, e + s / 2]
+  ];
+}
+function qn(t) {
+  const { x: r, y: e, width: o, height: s } = t;
+  return [
+    [r + o / 2, e],
+    [r + o, e + s],
+    [r, e + s]
+  ];
+}
+function Jn(t, r = 5) {
+  const { x: e, y: o, width: s, height: i } = t, u = e + s / 2, f = o + i / 2, x = s / 2, m = i / 2, E = 0.4, S = [], H = Math.PI / r;
+  let z = -Math.PI / 2;
+  for (let B = 0; B < r * 2; B += 1) {
+    const A = B % 2 === 0, ae = A ? x : x * E, et = A ? m : m * E;
+    S.push([u + Math.cos(z) * ae, f + Math.sin(z) * et]), z += H;
+  }
+  return S;
+}
+function So(t, r, e) {
+  let o = !1;
+  for (let s = 0, i = e.length - 1; s < e.length; i = s, s += 1) {
+    const [u, f] = e[s], [x, m] = e[i];
+    f > r != m > r && t < (x - u) * (r - f) / (m - f) + u && (o = !o);
+  }
+  return o;
+}
+function Qn(t, r, e, o, s = 24) {
+  const i = e - t, u = o - r, f = Math.hypot(i, u), [x, m] = f === 0 ? [1, 0] : [i / f, u / f], E = e - x * s, S = o - m * s, H = -m, z = x, B = s / 2;
+  return [
+    [e, o],
+    [E + H * B, S + z * B],
+    [E - H * B, S - z * B]
+  ];
+}
+function ko({ compute: t, onCommit: r }) {
+  const [e, o] = T(null), s = b(
+    (i, u) => {
+      i.preventDefault();
+      const f = (m) => o(t(m, u)), x = (m) => {
+        document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", x), r(t(m, u)), o(null);
+      };
+      document.addEventListener("mousemove", f), document.addEventListener("mouseup", x);
+    },
+    [t, r]
+  );
+  return { dragValue: e, startDrag: s };
+}
+const ne = 480, re = 320;
+function Eo({
+  strokes: t = [],
+  shapes: r = [],
+  width: e = ne,
+  height: o = re
+} = {}) {
+  return function(i) {
+    return {
+      block: {
+        id: Rt(),
+        type: "canvas",
+        parentId: i,
+        contentIds: [],
+        props: { strokes: t, shapes: r, width: e, height: o }
+      },
+      runs: []
+    };
+  };
+}
+function oe(t) {
+  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function ct(t) {
+  return oe(t).replace(/"/g, "&quot;");
+}
+function Io(t, r) {
+  var s, i;
+  if (!t) return "";
+  if (t.type !== "text") {
+    const u = (s = r == null ? void 0 : r.inlineRegistry) == null ? void 0 : s.get(t.type);
+    return u ? u.toHTML(t, r) : oe(t.value ?? "");
+  }
+  const e = t.marks ?? {};
+  let o = oe(t.value ?? "");
+  if (e.code && (o = `<code>${o}</code>`), e.bold && (o = `<strong>${o}</strong>`), e.italic && (o = `<em>${o}</em>`), e.underline && (o = `<u>${o}</u>`), e.strike && (o = `<s>${o}</s>`), e.subscript && (o = `<sub>${o}</sub>`), e.superscript && (o = `<sup>${o}</sup>`), e.color && (o = `<span style="color:${ct(e.color)}">${o}</span>`), e.highlight && (o = `<span style="background-color:${ct(e.highlight)}">${o}</span>`), (i = e.link) != null && i.href) {
+    const u = e.link.target === "_blank" ? ' target="_blank" rel="noopener noreferrer"' : "";
+    o = `<a href="${ct(e.link.href)}"${u}>${o}</a>`;
+  }
+  return o;
+}
+function ps(t, r) {
+  return (t ?? []).map((e) => Io(e, r)).join("");
+}
+function ms(t, r) {
+  var e;
+  if (!t) return "";
+  if (t.type !== "text") {
+    const o = (e = r == null ? void 0 : r.inlineRegistry) == null ? void 0 : e.get(t.type);
+    return o ? o.toPlainText(t, r) : t.value ?? "";
+  }
+  return t.value ?? "";
+}
+function zo(t) {
+  return (t ?? "").replace(/[\\`*_[\]]/g, (r) => `\\${r}`);
+}
+function $o(t, r) {
+  var i, u;
+  if (!t) return "";
+  if (t.type !== "text") {
+    const f = (i = r == null ? void 0 : r.inlineRegistry) == null ? void 0 : i.get(t.type);
+    return f ? f.toPlainText(t, r) : t.value ?? "";
+  }
+  const e = t.marks ?? {}, o = t.value ?? "";
+  let s = e.code ? o : zo(o);
+  return e.code && (s = `\`${s}\``), e.bold && (s = `**${s}**`), e.italic && (s = `*${s}*`), e.strike && (s = `~~${s}~~`), e.underline && (s = `<u>${s}</u>`), e.subscript && (s = `<sub>${s}</sub>`), e.superscript && (s = `<sup>${s}</sup>`), e.color && (s = `<span style="color:${ct(e.color)}">${s}</span>`), e.highlight && (s = `<span style="background-color:${ct(e.highlight)}">${s}</span>`), (u = e.link) != null && u.href && (s = `[${s}](${e.link.href})`), s;
+}
+function ys(t, r) {
+  return (t ?? []).map((e) => $o(e, r)).join("");
+}
+const No = 1e6;
+function Ct(t, r, e) {
+  return typeof t.z == "number" ? t.z : r ? No + e : e;
+}
+function se(t, r) {
+  const e = [
+    ...t.map((o, s) => ({ kind: "stroke", item: o, z: Ct(o, !1, s) })),
+    ...r.map((o, s) => ({ kind: "shape", item: o, z: Ct(o, !0, s) }))
+  ];
+  return e.sort((o, s) => o.z - s.z), e;
+}
+function Vt(t, r) {
+  let e = -1;
+  return t.forEach((o, s) => {
+    e = Math.max(e, Ct(o, !1, s));
+  }), r.forEach((o, s) => {
+    e = Math.max(e, Ct(o, !0, s));
+  }), e + 1;
+}
+function To(t, r) {
+  let e = 1 / 0;
+  return t.forEach((o, s) => {
+    e = Math.min(e, Ct(o, !1, s));
+  }), r.forEach((o, s) => {
+    e = Math.min(e, Ct(o, !0, s));
+  }), e === 1 / 0 ? 0 : e - 1;
+}
+const vo = {
+  diamond: Wn,
+  triangle: qn,
+  star: Jn
+};
+function Mo(t) {
+  const r = t.strokeWidth ?? 8, e = ct(t.color);
+  if (t.type === "arrow") {
+    const f = Math.max(16, r * 3), m = Qn(t.x1, t.y1, t.x2, t.y2, f).map(([E, S]) => `${E},${S}`).join(" ");
+    return `<line x1="${t.x1}" y1="${t.y1}" x2="${t.x2}" y2="${t.y2}" stroke="${e}" stroke-width="${r}"></line><polygon points="${m}" fill="${e}"></polygon>`;
+  }
+  const o = t.fillColor ? ct(t.fillColor) : "none";
+  let s;
+  if (t.type === "rectangle")
+    s = `<rect x="${t.x}" y="${t.y}" width="${t.width}" height="${t.height}" fill="${o}" stroke="${e}" stroke-width="${r}"></rect>`;
+  else if (t.type === "ellipse") {
+    const f = t.x + t.width / 2, x = t.y + t.height / 2;
+    s = `<ellipse cx="${f}" cy="${x}" rx="${t.width / 2}" ry="${t.height / 2}" fill="${o}" stroke="${e}" stroke-width="${r}"></ellipse>`;
+  } else if (t.type === "text") {
+    const f = t.fontSize ?? 28, x = oe(t.text ?? "");
+    s = `<foreignObject x="${t.x}" y="${t.y}" width="${t.width}" height="${t.height}"><div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;color:${e};font-size:${f}px;line-height:1.3;white-space:pre-wrap;word-break:break-word;">${x}</div></foreignObject>`;
+  } else {
+    const f = vo[t.type];
+    if (!f) return "";
+    const x = { x: t.x, y: t.y, width: t.width, height: t.height };
+    s = `<polygon points="${f(x).map(([E, S]) => `${E},${S}`).join(" ")}" fill="${o}" stroke="${e}" stroke-width="${r}"></polygon>`;
+  }
+  if (!t.rotation) return s;
+  const i = t.x + t.width / 2, u = t.y + t.height / 2;
+  return `<g transform="rotate(${t.rotation} ${i} ${u})">${s}</g>`;
+}
+function tr(t) {
+  const { strokes: r = [], shapes: e = [], width: o, height: s } = t.props, i = se(r, e).map(
+    ({ kind: u, item: f }) => u === "stroke" ? `<path fill="${ct(f.color)}" d="${ee(f.points, { size: f.size })}"></path>` : Mo(f)
+  ).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="${o}" height="${s}">${i}</svg>`;
+}
+const Z = 1e3, $n = "#1a1a1a", er = 8, Nn = ["#1a1a1a", "#e03131", "#2f9e44", "#1971c2", "#f08c00"], Po = 2, Ro = 40, Co = 24, Ao = 6, Gt = 160, $e = 120, Ne = 0.5, Te = 4, Wt = 1.1, Tn = 4, qt = 24, Do = 1, _o = 10, vn = {
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1],
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0]
+}, Oo = 220, Xo = 60, Re = 28, Yo = 12, Lo = 96, Ce = 10, Mn = 15, Pn = Ce * 5;
+function K(t) {
+  return Math.round(t / Ce) * Ce;
+}
+function Fo(t) {
+  return Math.round(t / Mn) * Mn;
+}
+function Bo() {
+  const t = I(/* @__PURE__ */ new WeakMap());
+  return (r) => {
+    const e = t.current;
+    let o = e.get(r);
+    return o === void 0 && (o = ee(r.points, { size: r.size }), e.set(r, o)), o;
+  };
+}
+function Ho(t, r, e) {
+  return { minX: t - e, minY: r - e, maxX: t + e, maxY: r + e };
+}
+function Rn(t) {
+  let r = 0, e = 0;
+  for (const s of t.values())
+    r += s.x, e += s.y;
+  const o = t.size || 1;
+  return { x: r / o, y: e / o };
+}
+function Uo(t, r, e, o) {
+  const s = t.points;
+  if (s.length === 1) {
+    const [i, u] = s[0];
+    return Math.hypot(r - i, e - u) <= o;
+  }
+  for (let i = 0; i < s.length - 1; i += 1) {
+    const [u, f] = s[i], [x, m] = s[i + 1];
+    if (Gn(r, e, u, f, x, m, o)) return !0;
+  }
+  return !1;
+}
+const ve = /* @__PURE__ */ new Set(["rectangle", "ellipse", "arrow", "diamond", "triangle", "star"]), nr = {
+  diamond: Wn,
+  triangle: qn,
+  star: Jn
+}, Cn = [
+  { type: "rectangle", label: "Rectangle", Icon: Fn },
+  { type: "ellipse", label: "Ellipse", Icon: Wr },
+  { type: "arrow", label: "Arrow", Icon: qr },
+  { type: "diamond", label: "Diamond", Icon: Jr },
+  { type: "triangle", label: "Triangle", Icon: Qr },
+  { type: "star", label: "Star", Icon: to }
+], An = [
+  { mode: "object", label: "Object Eraser", Icon: Ln },
+  { mode: "precise", label: "Precise Eraser", Icon: Zr }
+];
+function Me(t, r, e, o) {
+  return t.type === "arrow" ? {
+    type: "arrow",
+    x1: t.x1,
+    y1: t.y1,
+    x2: t.x2,
+    y2: t.y2,
+    color: r,
+    strokeWidth: e
+  } : {
+    type: t.type,
+    ...Lt(t.x1, t.y1, t.x2, t.y2),
+    color: r,
+    strokeWidth: e,
+    fillColor: o
+  };
+}
+const Zo = 16;
+function rr(t, r, e) {
+  if (t.type === "arrow")
+    return Gn(r, e, t.x1, t.y1, t.x2, t.y2, Zo);
+  const o = { x: t.x, y: t.y, width: t.width, height: t.height };
+  let [s, i] = [r, e];
+  if (t.rotation) {
+    const { cx: f, cy: x } = ie(t);
+    [s, i] = Kn(r, e, f, x, -t.rotation);
+  }
+  const u = nr[t.type];
+  return u ? So(s, i, u(o)) : t.type === "ellipse" ? bo(s, i, o) : Vn(s, i, o);
+}
+function jo(t, r, e) {
+  for (let o = e.length - 1; o >= 0; o -= 1)
+    if (rr(e[o], t, r)) return e[o].id;
+  return null;
+}
+function Ot(t, r, e) {
+  return t.type === "arrow" ? { ...t, x1: t.x1 + r, y1: t.y1 + e, x2: t.x2 + r, y2: t.y2 + e } : { ...t, x: t.x + r, y: t.y + e };
+}
+function Ft(t) {
+  return t.type === "arrow" ? {
+    x: Math.min(t.x1, t.x2),
+    y: Math.min(t.y1, t.y2),
+    width: Math.abs(t.x2 - t.x1),
+    height: Math.abs(t.y2 - t.y1)
+  } : { x: t.x, y: t.y, width: t.width, height: t.height };
+}
+function ie(t) {
+  const r = Ft(t);
+  return { cx: r.x + r.width / 2, cy: r.y + r.height / 2 };
+}
+function Xt(t, r, e) {
+  return { ...t, points: t.points.map(([o, s, i]) => [o + r, s + e, i]) };
+}
+function Ko(t, r) {
+  const e = [];
+  let o = [];
+  for (let s = 0; s < t.length; s += 1)
+    r.has(s) ? (o.length > 0 && e.push(o), o = []) : o.push(t[s]);
+  return o.length > 0 && e.push(o), e;
+}
+function or(t) {
+  const r = te(t.points);
+  return { x: r.minX, y: r.minY, width: r.maxX - r.minX, height: r.maxY - r.minY };
+}
+function Vo(t, r) {
+  return t === "stroke" ? or(r) : Ft(r);
+}
+function Dn(t, r) {
+  var u, f;
+  const e = ((u = t == null ? void 0 : t.props) == null ? void 0 : u.strokes) ?? [], o = ((f = t == null ? void 0 : t.props) == null ? void 0 : f.shapes) ?? [], s = e.find((x) => x.id === r);
+  if (s) return { kind: "stroke", item: s };
+  const i = o.find((x) => x.id === r);
+  return i ? { kind: "shape", item: i } : null;
+}
+function Go(t, r, e, o) {
+  const s = se(e, o);
+  for (let i = s.length - 1; i >= 0; i -= 1) {
+    const { kind: u, item: f } = s[i];
+    if (u === "shape") {
+      if (rr(f, t, r)) return { kind: "shape", id: f.id };
+    } else if (Vn(t, r, or(f)))
+      return { kind: "stroke", id: f.id };
+  }
+  return null;
+}
+const Jt = 24, Yt = 14;
+function Ae(t) {
+  return {
+    nw: [t.x, t.y],
+    ne: [t.x + t.width, t.y],
+    sw: [t.x, t.y + t.height],
+    se: [t.x + t.width, t.y + t.height]
+  };
+}
+const Wo = { nw: "se", ne: "sw", sw: "ne", se: "nw" }, qo = 32;
+function sr(t) {
+  const r = Ft(t), e = r.x + r.width / 2, o = r.y - qo;
+  if (!t.rotation) return [e, o];
+  const { cx: s, cy: i } = ie(t);
+  return Kn(e, o, s, i, t.rotation);
+}
+function Jo(t, r, e) {
+  if (!e) return null;
+  if (e.type === "arrow")
+    return Math.hypot(t - e.x1, r - e.y1) <= Jt ? "start" : Math.hypot(t - e.x2, r - e.y2) <= Jt ? "end" : null;
+  const [o, s] = sr(e);
+  if (Math.hypot(t - o, r - s) <= Jt) return "rotate";
+  if (e.rotation) return null;
+  for (const [i, [u, f]] of Object.entries(Ae(e)))
+    if (Math.hypot(t - u, r - f) <= Jt) return i;
+  return null;
+}
+function Pe(t, r) {
+  return r.mode === "arrow-endpoint" ? r.endpoint === "start" ? { ...t, x1: r.x, y1: r.y } : { ...t, x2: r.x, y2: r.y } : r.mode === "rotate" ? { ...t, rotation: r.rotation } : { ...t, ...Lt(r.fixedX, r.fixedY, r.x, r.y) };
+}
+function _n({ shape: t, opacity: r = 1 }) {
+  const e = t.strokeWidth ?? er;
+  let o;
+  if (t.type === "rectangle")
+    o = /* @__PURE__ */ p(
+      "rect",
+      {
+        x: t.x,
+        y: t.y,
+        width: t.width,
+        height: t.height,
+        fill: t.fillColor ?? "none",
+        stroke: t.color,
+        strokeWidth: e,
+        opacity: r
+      }
+    );
+  else if (t.type === "ellipse")
+    o = /* @__PURE__ */ p(
+      "ellipse",
+      {
+        cx: t.x + t.width / 2,
+        cy: t.y + t.height / 2,
+        rx: t.width / 2,
+        ry: t.height / 2,
+        fill: t.fillColor ?? "none",
+        stroke: t.color,
+        strokeWidth: e,
+        opacity: r
+      }
+    );
+  else if (t.type === "arrow") {
+    const u = Math.max(16, e * 3), f = Qn(t.x1, t.y1, t.x2, t.y2, u);
+    return /* @__PURE__ */ _("g", { opacity: r, children: [
+      /* @__PURE__ */ p(
+        "line",
+        {
+          x1: t.x1,
+          y1: t.y1,
+          x2: t.x2,
+          y2: t.y2,
+          stroke: t.color,
+          strokeWidth: e
+        }
+      ),
+      /* @__PURE__ */ p("polygon", { points: f.map(([x, m]) => `${x},${m}`).join(" "), fill: t.color })
+    ] });
+  } else if (t.type === "text")
+    o = /* @__PURE__ */ p(
+      "foreignObject",
+      {
+        x: t.x,
+        y: t.y,
+        width: t.width,
+        height: t.height,
+        opacity: r,
+        children: /* @__PURE__ */ p(
+          "div",
+          {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            style: {
+              width: "100%",
+              height: "100%",
+              overflow: "hidden",
+              color: t.color,
+              fontSize: t.fontSize ?? Re,
+              lineHeight: 1.3,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              fontFamily: "inherit"
+            },
+            children: t.text
+          }
+        )
+      }
+    );
+  else {
+    const u = nr[t.type];
+    if (!u) return null;
+    const f = { x: t.x, y: t.y, width: t.width, height: t.height }, x = u(f).map(([m, E]) => `${m},${E}`).join(" ");
+    o = /* @__PURE__ */ p(
+      "polygon",
+      {
+        points: x,
+        fill: t.fillColor ?? "none",
+        stroke: t.color,
+        strokeWidth: e,
+        opacity: r
+      }
+    );
+  }
+  if (!t.rotation) return o;
+  const { cx: s, cy: i } = ie(t);
+  return /* @__PURE__ */ p("g", { transform: `rotate(${t.rotation} ${s} ${i})`, children: o });
+}
+function Qo({ id: t }) {
+  const r = De(), e = co(t), o = Hr("be-canvas", e), s = Bo(), [i, u] = T("pen"), [f, x] = T("object"), [m, E] = T($n), [S, H] = T(er), [z, B] = T(null), [A, ae] = T(!0), [et, lr] = T(Re), [ur, fr] = T("rectangle"), [ce, Oe] = T(!1), [le, Xe] = T(!1), [ue, Ye] = T(!1), [fe, Le] = T(!1), [de, Fe] = T(!1), [he, Be] = T(!1), He = I(null), Ue = I(null), Ze = I(null), je = I(null), Ke = I(null), Ve = I(null), Ge = I(null), We = I(null), qe = I(null), Je = I(null), Qe = I(null), tn = I(null), dr = vt(() => [He, Ue], []), hr = vt(() => [Ze, je], []), pr = vt(() => [Ke, Ve], []), mr = vt(() => [Ge, We], []), yr = vt(() => [qe, Je], []), xr = vt(() => [Qe, tn], []), en = b(() => Oe(!1), []), pe = b(() => Xe(!1), []), gr = b(() => Ye(!1), []), nn = b(() => Le(!1), []), br = b(() => Fe(!1), []), rn = b(() => Be(!1), []);
+  Mt(dr, ce, en), Mt(hr, le, pe), Mt(pr, ue, gr), Mt(mr, fe, nn), Mt(yr, de, br), Mt(xr, he, rn);
+  const q = I(null), At = I([]), dt = I(!1), ht = I(null), [on, sn] = T(null), nt = I(/* @__PURE__ */ new Set()), lt = I(/* @__PURE__ */ new Set()), pt = I(/* @__PURE__ */ new Map()), mt = I(!1), yt = I(null), [wr, an] = T(() => /* @__PURE__ */ new Set()), [Sr, cn] = T(() => /* @__PURE__ */ new Set()), V = I(null), [ln, me] = T(null), [N, Q] = T(() => /* @__PURE__ */ new Set()), rt = I(null), [X, un] = T(null), ot = I(null), [Dt, fn] = T(null), ye = I([]), [P, xt] = T(null), G = I(null), [st, xe] = T(null), [M, ut] = T({ x: 0, y: 0, zoom: 1 }), Y = Z / M.zoom, ft = I(null), W = I(/* @__PURE__ */ new Map()), it = I(null), { dragValue: gt, startDrag: dn } = ko({
+    compute: (n, a) => ({
+      width: Math.max(
+        Gt,
+        Math.round(a.startWidth + (n.clientX - a.startX))
+      ),
+      height: Math.max(
+        $e,
+        Math.round(a.startHeight + (n.clientY - a.startY))
+      )
+    }),
+    onCommit: (n) => r.applyOperation(U(t, n))
+  }), hn = b((n) => {
+    ht.current == null && (ht.current = requestAnimationFrame(() => {
+      ht.current = null, sn(ee(At.current, { size: n }));
+    }));
+  }, []), bt = b(() => {
+    dt.current = !1, ht.current != null && (cancelAnimationFrame(ht.current), ht.current = null), At.current = [], sn(null);
+  }, []), pn = b(() => {
+    var h, d;
+    const n = At.current;
+    if (n.length === 0) return;
+    const a = ((h = e == null ? void 0 : e.props) == null ? void 0 : h.strokes) ?? [], c = ((d = e == null ? void 0 : e.props) == null ? void 0 : d.shapes) ?? [], l = {
+      id: Rt(),
+      points: n,
+      color: m,
+      size: S,
+      z: Vt(a, c)
+    };
+    r.applyOperation(U(t, { strokes: [...a, l] }));
+  }, [r, t, e, m, S]), mn = b(() => {
+    yt.current == null && (yt.current = requestAnimationFrame(() => {
+      yt.current = null, an(new Set(nt.current)), cn(new Set(lt.current));
+    }));
+  }, []), Bt = b(
+    (n, a) => {
+      var g, w;
+      const c = f === "precise" ? Ao : Co, l = Ho(n, a, c), h = ((g = e == null ? void 0 : e.props) == null ? void 0 : g.strokes) ?? [];
+      for (const y of h) {
+        if (f === "precise") {
+          const v = te(y.points);
+          if (!_t(v, l, y.size / 2)) continue;
+          let R = pt.current.get(y.id);
+          y.points.forEach(([F, L], C) => {
+            R != null && R.has(C) || Math.hypot(F - n, L - a) > c || (R || (R = /* @__PURE__ */ new Set(), pt.current.set(y.id, R)), R.add(C));
+          }), R != null && R.size && nt.current.add(y.id);
+          continue;
+        }
+        if (nt.current.has(y.id)) continue;
+        const k = y.size / 2, $ = te(y.points);
+        _t($, l, k) && Uo(y, n, a, c + k) && nt.current.add(y.id);
+      }
+      const d = ((w = e == null ? void 0 : e.props) == null ? void 0 : w.shapes) ?? [];
+      for (const y of d) {
+        if (lt.current.has(y.id)) continue;
+        const k = Ft(y), $ = {
+          minX: k.x,
+          minY: k.y,
+          maxX: k.x + k.width,
+          maxY: k.y + k.height
+        };
+        _t($, l) && lt.current.add(y.id);
+      }
+      mn();
+    },
+    [e, f, mn]
+  ), wt = b(() => {
+    mt.current = !1, yt.current != null && (cancelAnimationFrame(yt.current), yt.current = null), nt.current = /* @__PURE__ */ new Set(), lt.current = /* @__PURE__ */ new Set(), pt.current = /* @__PURE__ */ new Map(), an(/* @__PURE__ */ new Set()), cn(/* @__PURE__ */ new Set());
+  }, []), yn = b(() => {
+    var d, g;
+    const n = f !== "precise" && nt.current.size > 0, a = f === "precise" && pt.current.size > 0;
+    if (!n && !a && lt.current.size === 0) return;
+    const c = ((d = e == null ? void 0 : e.props) == null ? void 0 : d.strokes) ?? [], l = ((g = e == null ? void 0 : e.props) == null ? void 0 : g.shapes) ?? [];
+    let h;
+    if (n)
+      h = c.filter((w) => !nt.current.has(w.id));
+    else if (a) {
+      h = [];
+      for (const w of c) {
+        const y = pt.current.get(w.id);
+        if (!y || y.size === 0) {
+          h.push(w);
+          continue;
+        }
+        Ko(w.points, y).forEach((k, $) => {
+          h.push({ ...w, id: $ === 0 ? w.id : Rt(), points: k });
+        });
+      }
+    } else
+      h = c;
+    r.applyOperation(
+      U(t, {
+        strokes: h,
+        shapes: l.filter((w) => !lt.current.has(w.id))
+      })
+    );
+  }, [r, t, e, f]), St = b(() => {
+    V.current = null, me(null);
+  }, []), xn = b(() => {
+    var h, d;
+    const n = V.current;
+    if (!n) return;
+    if (n.type === "arrow") {
+      if (n.x1 === n.x2 && n.y1 === n.y2) return;
+    } else {
+      const g = Lt(n.x1, n.y1, n.x2, n.y2);
+      if (g.width === 0 || g.height === 0) return;
+    }
+    const a = ((h = e == null ? void 0 : e.props) == null ? void 0 : h.strokes) ?? [], c = ((d = e == null ? void 0 : e.props) == null ? void 0 : d.shapes) ?? [], l = {
+      id: Rt(),
+      ...Me(n, m, S, z),
+      z: Vt(a, c)
+    };
+    r.applyOperation(U(t, { shapes: [...c, l] }));
+  }, [r, t, e, m, S, z]), kt = b(() => {
+    rt.current = null, un(null);
+  }, []), gn = b(() => {
+    var g, w;
+    const n = rt.current;
+    if (!n || n.dx === 0 && n.dy === 0) return;
+    const a = new Set(n.ids), c = ((g = e == null ? void 0 : e.props) == null ? void 0 : g.strokes) ?? [], l = ((w = e == null ? void 0 : e.props) == null ? void 0 : w.shapes) ?? [], h = c.map(
+      (y) => a.has(y.id) ? Xt(y, n.dx, n.dy) : y
+    ), d = l.map(
+      (y) => a.has(y.id) ? Ot(y, n.dx, n.dy) : y
+    );
+    r.applyOperation(U(t, { strokes: h, shapes: d }));
+  }, [r, t, e]), Et = b(() => {
+    ot.current = null, fn(null);
+  }, []), bn = b(() => {
+    var g, w;
+    const n = ot.current;
+    if (!n) return;
+    const a = Lt(n.startX, n.startY, n.x, n.y);
+    if (a.width < Tn && a.height < Tn) {
+      Q(/* @__PURE__ */ new Set());
+      return;
+    }
+    const c = {
+      minX: a.x,
+      minY: a.y,
+      maxX: a.x + a.width,
+      maxY: a.y + a.height
+    }, l = ((g = e == null ? void 0 : e.props) == null ? void 0 : g.strokes) ?? [], h = ((w = e == null ? void 0 : e.props) == null ? void 0 : w.shapes) ?? [], d = [];
+    for (const y of l)
+      _t(te(y.points), c) && d.push(y.id);
+    for (const y of h) {
+      const k = Ft(y), $ = {
+        minX: k.x,
+        minY: k.y,
+        maxX: k.x + k.width,
+        maxY: k.y + k.height
+      };
+      _t($, c) && d.push(y.id);
+    }
+    Q(new Set(d));
+  }, [e]), ge = b(() => {
+    N.size !== 0 && (ye.current = [...N].map((n) => Dn(e, n)).filter(Boolean));
+  }, [e, N]), be = b(() => {
+    var w, y;
+    const n = ye.current;
+    if (n.length === 0) return;
+    const a = ((w = e == null ? void 0 : e.props) == null ? void 0 : w.strokes) ?? [], c = ((y = e == null ? void 0 : e.props) == null ? void 0 : y.shapes) ?? [];
+    let l = Vt(a, c);
+    const h = [], d = [], g = [];
+    for (const { kind: k, item: $ } of n) {
+      const v = Rt();
+      g.push(v);
+      const R = l;
+      l += 1, k === "stroke" ? h.push({ ...Xt($, qt, qt), id: v, z: R }) : d.push({ ...Ot($, qt, qt), id: v, z: R });
+    }
+    r.applyOperation(
+      U(t, {
+        strokes: [...a, ...h],
+        shapes: [...c, ...d]
+      })
+    ), Q(new Set(g)), u("select");
+  }, [r, t, e]), It = b(
+    (n) => {
+      var k, $;
+      if (N.size === 0) return;
+      const a = ((k = e == null ? void 0 : e.props) == null ? void 0 : k.strokes) ?? [], c = (($ = e == null ? void 0 : e.props) == null ? void 0 : $.shapes) ?? [], l = a.filter((v) => N.has(v.id)), h = c.filter((v) => N.has(v.id)), d = se(l, h);
+      if (d.length === 0) return;
+      const g = n ? Vt(a, c) : To(a, c) - d.length, w = new Map(d.map(({ item: v }, R) => [v.id, g + R])), y = (v) => w.has(v.id) ? { ...v, z: w.get(v.id) } : v;
+      r.applyOperation(
+        U(t, {
+          strokes: a.map(y),
+          shapes: c.map(y)
+        })
+      );
+    },
+    [r, t, e, N]
+  ), kr = b(() => It(!0), [It]), Er = b(() => It(!1), [It]), we = b(
+    (n, a) => {
+      xt({
+        id: null,
+        x: n,
+        y: a,
+        width: Oo,
+        height: Xo,
+        text: "",
+        color: m,
+        fontSize: et
+      });
+    },
+    [m, et]
+  ), Ht = b((n) => {
+    xt({
+      id: n.id,
+      x: n.x,
+      y: n.y,
+      width: n.width,
+      height: n.height,
+      text: n.text,
+      color: n.color,
+      fontSize: n.fontSize ?? Re
+    });
+  }, []), Ir = b(() => {
+    xt(null);
+  }, []), zr = b(() => {
+    var g, w, y;
+    const n = P;
+    if (!n) return;
+    xt(null);
+    const a = ((g = e == null ? void 0 : e.props) == null ? void 0 : g.shapes) ?? [], c = n.text;
+    if (!c.trim()) {
+      n.id && (r.applyOperation(
+        U(t, { shapes: a.filter((k) => k.id !== n.id) })
+      ), Q(/* @__PURE__ */ new Set())), (w = q.current) == null || w.focus();
+      return;
+    }
+    const l = n.id ?? Rt(), h = {
+      id: l,
+      type: "text",
+      x: n.x,
+      y: n.y,
+      width: n.width,
+      height: n.height,
+      text: c,
+      color: n.color,
+      fontSize: n.fontSize
+    }, d = n.id ? a.map((k) => k.id === n.id ? h : k) : [...a, h];
+    r.applyOperation(U(t, { shapes: d })), Q(/* @__PURE__ */ new Set([l])), u("select"), (y = q.current) == null || y.focus();
+  }, [r, t, e, P]), zt = b(() => {
+    G.current = null, xe(null);
+  }, []), wn = b(() => {
+    var d;
+    const n = G.current;
+    if (!n) return;
+    const a = ((d = e == null ? void 0 : e.props) == null ? void 0 : d.shapes) ?? [], c = a.find((g) => g.id === n.shapeId);
+    if (!c) return;
+    const l = Pe(c, n);
+    if (l.type !== "arrow" && (l.width === 0 || l.height === 0)) return;
+    const h = a.map((g) => g.id === n.shapeId ? l : g);
+    r.applyOperation(U(t, { shapes: h }));
+  }, [r, t, e]), Sn = b(
+    (n) => {
+      var c;
+      const a = q.current;
+      if ((c = a == null ? void 0 : a.hasPointerCapture) != null && c.call(a, n) && a.releasePointerCapture(n), V.current) {
+        St();
+        return;
+      }
+      if (rt.current) {
+        kt();
+        return;
+      }
+      if (ot.current) {
+        Et();
+        return;
+      }
+      if (G.current) {
+        zt();
+        return;
+      }
+      if (dt.current) {
+        bt();
+        return;
+      }
+      mt.current && wt();
+    },
+    [St, kt, Et, zt, bt, wt]
+  ), $r = b(
+    (n) => {
+      var l, h, d, g, w;
+      if (n.key === "Backspace" || n.key === "Delete") {
+        if (N.size === 0) return;
+        n.preventDefault();
+        const y = ((l = e == null ? void 0 : e.props) == null ? void 0 : l.strokes) ?? [], k = ((h = e == null ? void 0 : e.props) == null ? void 0 : h.shapes) ?? [];
+        r.applyOperation(
+          U(t, {
+            strokes: y.filter(($) => !N.has($.id)),
+            shapes: k.filter(($) => !N.has($.id))
+          })
+        ), Q(/* @__PURE__ */ new Set());
+        return;
+      }
+      if (vn[n.key] && !n.ctrlKey && !n.metaKey) {
+        if (N.size === 0) return;
+        n.preventDefault();
+        const y = n.shiftKey ? _o : Do, [k, $] = vn[n.key], v = k * y, R = $ * y, F = ((d = e == null ? void 0 : e.props) == null ? void 0 : d.strokes) ?? [], L = ((g = e == null ? void 0 : e.props) == null ? void 0 : g.shapes) ?? [];
+        r.applyOperation(
+          U(t, {
+            strokes: F.map(
+              (C) => N.has(C.id) ? Xt(C, v, R) : C
+            ),
+            shapes: L.map(
+              (C) => N.has(C.id) ? Ot(C, v, R) : C
+            )
+          })
+        );
+        return;
+      }
+      if (n.key === "Enter" && !n.ctrlKey && !n.metaKey) {
+        if (N.size !== 1) return;
+        const [y] = N, k = (((w = e == null ? void 0 : e.props) == null ? void 0 : w.shapes) ?? []).find(($) => $.id === y && $.type === "text");
+        if (!k) return;
+        n.preventDefault(), Ht(k);
+        return;
+      }
+      if (!(n.ctrlKey || n.metaKey)) return;
+      const c = n.key.toLowerCase();
+      if (c === "c") {
+        if (N.size === 0) return;
+        n.preventDefault(), ge();
+      } else if (c === "v") {
+        if (ye.current.length === 0) return;
+        n.preventDefault(), be();
+      } else if (c === "d") {
+        if (N.size === 0) return;
+        n.preventDefault(), ge(), be();
+      } else if (n.shiftKey && (c === "]" || c === "[")) {
+        if (N.size === 0) return;
+        n.preventDefault(), It(c === "]");
+      }
+    },
+    [
+      r,
+      t,
+      e,
+      N,
+      ge,
+      be,
+      It,
+      Ht
+    ]
+  ), at = { x: M.x, y: M.y, size: Y }, Se = b(
+    (n) => {
+      const a = q.current;
+      if (!a) return;
+      if (n.preventDefault(), n.ctrlKey || n.metaKey) {
+        ut((l) => {
+          const h = n.deltaY < 0 ? Wt : 1 / Wt, d = Math.min(Te, Math.max(Ne, l.zoom * h)), g = Z / d, { x: w, y } = go(
+            n,
+            a,
+            { x: l.x, y: l.y, size: Z / l.zoom },
+            g
+          );
+          return { ...Pt(w, y, g, Z), zoom: d };
+        });
+        return;
+      }
+      const c = ze(a, Y);
+      ut((l) => ({
+        ...l,
+        ...Pt(
+          l.x + n.deltaX / c,
+          l.y + n.deltaY / c,
+          Y,
+          Z
+        )
+      }));
+    },
+    [Y]
+  );
+  Yn(() => {
+    const n = q.current;
+    if (n)
+      return n.addEventListener("wheel", Se, { passive: !1 }), () => n.removeEventListener("wheel", Se);
+  }, [Se]);
+  const Nr = b(() => {
+    ut((n) => {
+      const a = Math.min(Te, n.zoom * Wt), c = Z / a, { x: l, y: h } = zn(
+        { x: n.x, y: n.y, size: Z / n.zoom },
+        c
+      );
+      return { ...Pt(l, h, c, Z), zoom: a };
+    });
+  }, []), Tr = b(() => {
+    ut((n) => {
+      const a = Math.max(Ne, n.zoom / Wt), c = Z / a, { x: l, y: h } = zn(
+        { x: n.x, y: n.y, size: Z / n.zoom },
+        c
+      );
+      return { ...Pt(l, h, c, Z), zoom: a };
+    });
+  }, []), vr = b(() => {
+    ut({ x: 0, y: 0, zoom: 1 });
+  }, []), Mr = b(() => {
+    if (!e) return;
+    const n = tr(e), a = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(n)}`, c = new Image();
+    c.onload = () => {
+      const l = document.createElement("canvas");
+      l.width = e.props.width, l.height = e.props.height;
+      const h = l.getContext("2d");
+      if (!h) return;
+      h.drawImage(c, 0, 0, l.width, l.height);
+      const d = document.createElement("a");
+      d.href = l.toDataURL("image/png"), d.download = "canvas.png", document.body.appendChild(d), d.click(), document.body.removeChild(d);
+    }, c.src = a;
+  }, [e]), Pr = b(
+    (n) => {
+      var w;
+      if (i !== "select") return;
+      const a = q.current;
+      if (!a) return;
+      const [c, l] = J(n, a, { x: M.x, y: M.y, size: Y }), h = ((w = e == null ? void 0 : e.props) == null ? void 0 : w.shapes) ?? [], d = jo(c, l, h), g = h.find((y) => y.id === d);
+      (g == null ? void 0 : g.type) === "text" && (Q(/* @__PURE__ */ new Set([g.id])), Ht(g));
+    },
+    [i, M.x, M.y, Y, e, Ht]
+  ), Rr = b(
+    (n) => {
+      var h, d, g, w, y, k, $, v, R;
+      const a = q.current;
+      if (!a) return;
+      if (n.pointerType === "touch" && (W.current.set(n.pointerId, { x: n.clientX, y: n.clientY }), W.current.size >= 2)) {
+        if (n.preventDefault(), (h = a.setPointerCapture) == null || h.call(a, n.pointerId), !it.current) {
+          for (const L of W.current.keys())
+            L !== n.pointerId && Sn(L);
+          const F = Rn(W.current);
+          it.current = {
+            startCenterX: F.x,
+            startCenterY: F.y,
+            startViewX: M.x,
+            startViewY: M.y
+          };
+        }
+        return;
+      }
+      if (P) {
+        if ((g = (d = n.target) == null ? void 0 : d.closest) != null && g.call(d, ".be-canvas-text-editor")) return;
+        if ((y = (w = document.activeElement) == null ? void 0 : w.blur) == null || y.call(w), i === "text") {
+          let [F, L] = J(n, a, at);
+          A && ([F, L] = [K(F), K(L)]), we(F, L), u("text");
+          return;
+        }
+      }
+      if (n.button === 1) {
+        n.preventDefault(), (k = a.setPointerCapture) == null || k.call(a, n.pointerId), ft.current = {
+          startClientX: n.clientX,
+          startClientY: n.clientY,
+          startViewX: M.x,
+          startViewY: M.y
+        };
+        return;
+      }
+      if (!n.isPrimary || n.button !== void 0 && n.button !== 0) return;
+      n.preventDefault(), ($ = a.setPointerCapture) == null || $.call(a, n.pointerId);
+      const [c, l] = J(n, a, at);
+      if (i === "eraser")
+        nt.current = /* @__PURE__ */ new Set(), lt.current = /* @__PURE__ */ new Set(), pt.current = /* @__PURE__ */ new Map(), mt.current = !0, Bt(c, l);
+      else if (ve.has(i)) {
+        const F = A ? K(c) : c, L = A ? K(l) : l;
+        V.current = { type: i, x1: F, y1: L, x2: F, y2: L }, me(Me(V.current, m, S, z));
+      } else if (i === "select") {
+        const F = ((v = e == null ? void 0 : e.props) == null ? void 0 : v.strokes) ?? [], L = ((R = e == null ? void 0 : e.props) == null ? void 0 : R.shapes) ?? [], C = N.size === 1 ? L.find((tt) => N.has(tt.id)) ?? null : null, jt = Jo(c, l, C);
+        if (jt) {
+          if (jt === "rotate") {
+            const { cx: tt, cy: Nt } = ie(C), Tt = Math.atan2(l - Nt, c - tt) * 180 / Math.PI;
+            G.current = {
+              mode: "rotate",
+              shapeId: C.id,
+              cx: tt,
+              cy: Nt,
+              startAngle: Tt,
+              startRotation: C.rotation ?? 0,
+              rotation: C.rotation ?? 0
+            };
+          } else if (C.type === "arrow")
+            G.current = {
+              mode: "arrow-endpoint",
+              shapeId: C.id,
+              endpoint: jt,
+              x: c,
+              y: l
+            };
+          else {
+            const [tt, Nt] = Ae(C)[Wo[jt]];
+            G.current = {
+              mode: "rect-corner",
+              shapeId: C.id,
+              fixedX: tt,
+              fixedY: Nt,
+              x: c,
+              y: l
+            };
+          }
+          xe(Pe(C, G.current));
+          return;
+        }
+        const $t = Go(c, l, F, L);
+        if ($t) {
+          if (n.shiftKey) {
+            Q((Nt) => {
+              const Tt = new Set(Nt);
+              return Tt.has($t.id) ? Tt.delete($t.id) : Tt.add($t.id), Tt;
+            });
+            return;
+          }
+          const tt = N.has($t.id) ? N : /* @__PURE__ */ new Set([$t.id]);
+          Q(tt), rt.current = { ids: [...tt], startX: c, startY: l, dx: 0, dy: 0 }, a.focus();
+        } else
+          ot.current = { startX: c, startY: l, x: c, y: l };
+      } else i === "text" ? we(A ? K(c) : c, A ? K(l) : l) : i === "pen" && (At.current = [[c, l, n.pressure || 0.5]], dt.current = !0);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      i,
+      Bt,
+      M.x,
+      M.y,
+      Y,
+      m,
+      S,
+      z,
+      A,
+      e,
+      N,
+      we,
+      P,
+      Sn
+    ]
+  ), Cr = b(
+    (n) => {
+      var c;
+      const a = q.current;
+      if (a) {
+        if (n.pointerType === "touch" && W.current.has(n.pointerId) && (W.current.set(n.pointerId, { x: n.clientX, y: n.clientY }), it.current)) {
+          n.preventDefault();
+          const l = ze(a, Y), h = Rn(W.current), { startCenterX: d, startCenterY: g, startViewX: w, startViewY: y } = it.current, k = (h.x - d) / l, $ = (h.y - g) / l;
+          ut((v) => ({
+            ...v,
+            ...Pt(w - k, y - $, Y, Z)
+          }));
+          return;
+        }
+        if (ft.current) {
+          const l = ze(a, Y), { startClientX: h, startClientY: d, startViewX: g, startViewY: w } = ft.current, y = (n.clientX - h) / l, k = (n.clientY - d) / l;
+          ut(($) => ({
+            ...$,
+            ...Pt(g - y, w - k, Y, Z)
+          }));
+          return;
+        }
+        if (V.current) {
+          let [l, h] = J(n, a, at);
+          A && ([l, h] = [K(l), K(h)]), V.current = { ...V.current, x2: l, y2: h }, me(Me(V.current, m, S, z));
+          return;
+        }
+        if (rt.current) {
+          const [l, h] = J(n, a, at), d = rt.current;
+          d.dx = A ? K(l - d.startX) : l - d.startX, d.dy = A ? K(h - d.startY) : h - d.startY, un({ ids: d.ids, dx: d.dx, dy: d.dy });
+          return;
+        }
+        if (ot.current) {
+          const [l, h] = J(n, a, at), d = ot.current;
+          d.x = l, d.y = h, fn(Lt(d.startX, d.startY, d.x, d.y));
+          return;
+        }
+        if (G.current) {
+          let [l, h] = J(n, a, at);
+          const d = G.current;
+          if (d.mode === "rotate") {
+            const y = Math.atan2(h - d.cy, l - d.cx) * 180 / Math.PI, k = d.startRotation + (y - d.startAngle);
+            d.rotation = A ? Fo(k) : k;
+          } else
+            A && ([l, h] = [K(l), K(h)]), d.x = l, d.y = h;
+          const w = (((c = e == null ? void 0 : e.props) == null ? void 0 : c.shapes) ?? []).find((y) => y.id === d.shapeId);
+          w && xe(Pe(w, d));
+          return;
+        }
+        if (dt.current) {
+          const [l, h] = J(n, a, at);
+          At.current.push([l, h, n.pressure || 0.5]), hn(S);
+        } else if (mt.current) {
+          const [l, h] = J(n, a, at);
+          Bt(l, h);
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      hn,
+      Bt,
+      M.x,
+      M.y,
+      Y,
+      S,
+      m,
+      z,
+      A,
+      e
+    ]
+  ), D = b((n) => {
+    var c;
+    const a = q.current;
+    (c = a == null ? void 0 : a.hasPointerCapture) != null && c.call(a, n.pointerId) && a.releasePointerCapture(n.pointerId);
+  }, []), Ar = b(
+    (n) => {
+      if (n.pointerType === "touch" && (W.current.delete(n.pointerId), it.current)) {
+        D(n), W.current.size < 2 && (it.current = null);
+        return;
+      }
+      if (ft.current) {
+        D(n), ft.current = null;
+        return;
+      }
+      if (V.current) {
+        D(n), xn(), St();
+        return;
+      }
+      if (rt.current) {
+        D(n), gn(), kt();
+        return;
+      }
+      if (ot.current) {
+        D(n), bn(), Et();
+        return;
+      }
+      if (G.current) {
+        D(n), wn(), zt();
+        return;
+      }
+      dt.current ? (D(n), pn(), bt()) : mt.current && (D(n), yn(), wt());
+    },
+    [
+      D,
+      xn,
+      St,
+      gn,
+      kt,
+      bn,
+      Et,
+      wn,
+      zt,
+      pn,
+      bt,
+      yn,
+      wt
+    ]
+  ), Dr = b(
+    (n) => {
+      if (n.pointerType === "touch" && (W.current.delete(n.pointerId), it.current)) {
+        D(n), W.current.size < 2 && (it.current = null);
+        return;
+      }
+      if (ft.current) {
+        D(n), ft.current = null;
+        return;
+      }
+      if (V.current) {
+        D(n), St();
+        return;
+      }
+      if (rt.current) {
+        D(n), kt();
+        return;
+      }
+      if (ot.current) {
+        D(n), Et();
+        return;
+      }
+      if (G.current) {
+        D(n), zt();
+        return;
+      }
+      dt.current ? (D(n), bt()) : mt.current && (D(n), wt());
+    },
+    [D, St, kt, Et, zt, bt, wt]
+  ), _r = b(
+    (n) => {
+      var a, c;
+      dn(n, {
+        startX: n.clientX,
+        startY: n.clientY,
+        startWidth: ((a = e == null ? void 0 : e.props) == null ? void 0 : a.width) ?? ne,
+        startHeight: ((c = e == null ? void 0 : e.props) == null ? void 0 : c.height) ?? re
+      });
+    },
+    [dn, e]
+  ), Or = b(
+    (n) => {
+      var d, g;
+      const a = ((d = e == null ? void 0 : e.props) == null ? void 0 : d.width) ?? ne, c = ((g = e == null ? void 0 : e.props) == null ? void 0 : g.height) ?? re, l = n.shiftKey ? 4 : 24;
+      let h;
+      if (n.key === "ArrowLeft")
+        h = { width: Math.max(Gt, a - l) };
+      else if (n.key === "ArrowRight") h = { width: a + l };
+      else if (n.key === "ArrowUp")
+        h = { height: Math.max($e, c - l) };
+      else if (n.key === "ArrowDown") h = { height: c + l };
+      else if (n.key === "Home") h = { width: Gt, height: $e };
+      else return;
+      n.preventDefault(), r.applyOperation(U(t, h));
+    },
+    [r, t, e]
+  );
+  if (!e) return null;
+  const { strokes: kn = [], shapes: En = [], width: Xr, height: Yr } = e.props, In = (gt == null ? void 0 : gt.width) ?? Xr, Lr = (gt == null ? void 0 : gt.height) ?? Yr, Ut = 6, Zt = [...N].map((n) => {
+    var h;
+    const a = Dn(e, n);
+    if (!a) return null;
+    let { kind: c, item: l } = a;
+    return (h = X == null ? void 0 : X.ids) != null && h.includes(n) ? l = c === "stroke" ? Xt(l, X.dx, X.dy) : Ot(l, X.dx, X.dy) : c === "shape" && (st == null ? void 0 : st.id) === n && (l = st), {
+      id: n,
+      kind: c,
+      item: l,
+      box: Vo(c, l),
+      rotation: c === "shape" ? l.rotation : 0
+    };
+  }).filter(Boolean), ke = Zt.length === 1 && Zt[0].kind === "shape" ? Zt[0] : null, j = (ke == null ? void 0 : ke.item) ?? null, Fr = j && j.type === "arrow" ? [
+    ["start", j.x1, j.y1],
+    ["end", j.x2, j.y2]
+  ] : j && !j.rotation ? Object.entries(Ae(j)).map(([n, [a, c]]) => [
+    n,
+    a,
+    c
+  ]) : [], Ee = j && j.type !== "arrow" ? sr(j) : null;
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      className: o,
+      "data-block-id": t,
+      "data-tool": i,
+      contentEditable: !1,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ _("div", { className: "be-canvas-toolbar", contentEditable: !1, children: [
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: `be-canvas-toolbar-btn${i === "pen" ? " be-canvas-toolbar-btn-active" : ""}`,
+              "aria-pressed": i === "pen",
+              "aria-label": "Pen",
+              title: "Pen",
+              onClick: () => u("pen"),
+              children: /* @__PURE__ */ p(Ur, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ _("div", { className: "be-canvas-picker-wrap", children: [
+            /* @__PURE__ */ p(
+              "button",
+              {
+                ref: Qe,
+                type: "button",
+                className: `be-canvas-toolbar-btn${i === "eraser" ? " be-canvas-toolbar-btn-active" : ""}`,
+                "aria-haspopup": "true",
+                "aria-expanded": he,
+                "aria-pressed": i === "eraser",
+                "aria-label": "Eraser",
+                title: "Eraser",
+                onClick: () => Be((n) => !n),
+                children: (() => {
+                  var a;
+                  const n = ((a = An.find((c) => c.mode === f)) == null ? void 0 : a.Icon) ?? Ln;
+                  return /* @__PURE__ */ p(n, { size: 14 });
+                })()
+              }
+            ),
+            he && /* @__PURE__ */ p(
+              "div",
+              {
+                ref: tn,
+                className: "be-canvas-picker be-canvas-shape-picker",
+                role: "menu",
+                "aria-label": "Eraser",
+                children: An.map(({ mode: n, label: a, Icon: c }) => /* @__PURE__ */ p(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    className: `be-canvas-toolbar-btn${i === "eraser" && f === n ? " be-canvas-toolbar-btn-active" : ""}`,
+                    "aria-pressed": i === "eraser" && f === n,
+                    "aria-label": a,
+                    title: a,
+                    onClick: () => {
+                      u("eraser"), x(n), rn();
+                    },
+                    children: /* @__PURE__ */ p(c, { size: 14 })
+                  },
+                  n
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: `be-canvas-toolbar-btn${i === "select" ? " be-canvas-toolbar-btn-active" : ""}`,
+              "aria-pressed": i === "select",
+              "aria-label": "Select",
+              title: "Select",
+              onClick: () => u("select"),
+              children: /* @__PURE__ */ p(jr, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: `be-canvas-toolbar-btn${i === "text" ? " be-canvas-toolbar-btn-active" : ""}`,
+              "aria-pressed": i === "text",
+              "aria-label": "Text",
+              title: "Text",
+              onClick: () => u("text"),
+              children: /* @__PURE__ */ p(Kr, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ _("div", { className: "be-canvas-picker-wrap", children: [
+            /* @__PURE__ */ p(
+              "button",
+              {
+                ref: qe,
+                type: "button",
+                className: "be-canvas-toolbar-btn",
+                "aria-haspopup": "true",
+                "aria-expanded": de,
+                "aria-label": `Font size: ${P ? P.fontSize : et}`,
+                title: "Font size",
+                onClick: () => Fe((n) => !n),
+                children: /* @__PURE__ */ p("span", { className: "be-canvas-font-size-trigger", children: "A" })
+              }
+            ),
+            de && /* @__PURE__ */ _(
+              "div",
+              {
+                ref: Je,
+                className: "be-canvas-picker be-canvas-size-picker",
+                role: "dialog",
+                "aria-label": "Font size",
+                children: [
+                  /* @__PURE__ */ p("span", { className: "be-canvas-size-preview", "aria-hidden": "true", children: /* @__PURE__ */ p(
+                    "span",
+                    {
+                      className: "be-canvas-font-size-preview-letter",
+                      style: { fontSize: P ? P.fontSize : et },
+                      children: "A"
+                    }
+                  ) }),
+                  /* @__PURE__ */ p(
+                    "input",
+                    {
+                      type: "range",
+                      className: "be-canvas-size-slider",
+                      min: Yo,
+                      max: Lo,
+                      value: P ? P.fontSize : et,
+                      onChange: (n) => {
+                        const a = Number(n.target.value);
+                        lr(a), P && xt((c) => c && { ...c, fontSize: a });
+                      },
+                      "aria-label": "Font size"
+                    }
+                  ),
+                  /* @__PURE__ */ _("span", { className: "be-canvas-size-value", children: [
+                    P ? P.fontSize : et,
+                    "px"
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: "be-canvas-toolbar-btn",
+              "aria-label": "Bring to front",
+              title: "Bring to front",
+              onClick: kr,
+              disabled: N.size === 0,
+              children: /* @__PURE__ */ p(Vr, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: "be-canvas-toolbar-btn",
+              "aria-label": "Send to back",
+              title: "Send to back",
+              onClick: Er,
+              disabled: N.size === 0,
+              children: /* @__PURE__ */ p(Gr, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ p("span", { className: "be-canvas-toolbar-divider" }),
+          /* @__PURE__ */ _("div", { className: "be-canvas-picker-wrap", children: [
+            /* @__PURE__ */ p(
+              "button",
+              {
+                ref: Ge,
+                type: "button",
+                className: `be-canvas-toolbar-btn${ve.has(i) ? " be-canvas-toolbar-btn-active" : ""}`,
+                "aria-haspopup": "true",
+                "aria-expanded": fe,
+                "aria-label": "Shape",
+                title: "Shape",
+                onClick: () => Le((n) => !n),
+                children: (() => {
+                  var a;
+                  const n = ((a = Cn.find(
+                    (c) => c.type === (ve.has(i) ? i : ur)
+                  )) == null ? void 0 : a.Icon) ?? Fn;
+                  return /* @__PURE__ */ p(n, { size: 14 });
+                })()
+              }
+            ),
+            fe && /* @__PURE__ */ p(
+              "div",
+              {
+                ref: We,
+                className: "be-canvas-picker be-canvas-shape-picker",
+                role: "menu",
+                "aria-label": "Shape",
+                children: Cn.map(({ type: n, label: a, Icon: c }) => /* @__PURE__ */ p(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    className: `be-canvas-toolbar-btn${i === n ? " be-canvas-toolbar-btn-active" : ""}`,
+                    "aria-pressed": i === n,
+                    "aria-label": a,
+                    title: a,
+                    onClick: () => {
+                      u(n), fr(n), nn();
+                    },
+                    children: /* @__PURE__ */ p(c, { size: 14 })
+                  },
+                  n
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ p("span", { className: "be-canvas-toolbar-divider" }),
+          /* @__PURE__ */ _("div", { className: "be-canvas-picker-wrap", children: [
+            /* @__PURE__ */ p(
+              "button",
+              {
+                ref: He,
+                type: "button",
+                className: "be-canvas-toolbar-btn",
+                "aria-haspopup": "true",
+                "aria-expanded": ce,
+                "aria-label": `Color: ${m}`,
+                title: "Color",
+                onClick: () => Oe((n) => !n),
+                children: /* @__PURE__ */ p("span", { className: "be-canvas-color-trigger-dot", style: { backgroundColor: m } })
+              }
+            ),
+            ce && /* @__PURE__ */ _(
+              "div",
+              {
+                ref: Ue,
+                className: "be-canvas-picker be-canvas-color-picker",
+                role: "menu",
+                "aria-label": "Pen color",
+                children: [
+                  Nn.map((n) => /* @__PURE__ */ p(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitem",
+                      className: `be-canvas-toolbar-swatch${m === n ? " be-canvas-toolbar-swatch-active" : ""}`,
+                      style: { backgroundColor: n },
+                      "aria-pressed": m === n,
+                      "aria-label": `Color ${n}`,
+                      title: `Color ${n}`,
+                      onClick: () => {
+                        E(n), en();
+                      }
+                    },
+                    n
+                  )),
+                  /* @__PURE__ */ p(
+                    "label",
+                    {
+                      className: "be-canvas-custom-swatch",
+                      title: "Custom color",
+                      "aria-label": "Custom color",
+                      children: /* @__PURE__ */ p(
+                        "input",
+                        {
+                          type: "color",
+                          value: m,
+                          onChange: (n) => E(n.target.value)
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ p("span", { className: "be-canvas-toolbar-divider" }),
+          /* @__PURE__ */ _("div", { className: "be-canvas-picker-wrap", children: [
+            /* @__PURE__ */ p(
+              "button",
+              {
+                ref: Ze,
+                type: "button",
+                className: "be-canvas-toolbar-btn",
+                "aria-haspopup": "true",
+                "aria-expanded": le,
+                "aria-label": `Fill: ${z ?? "none"}`,
+                title: "Fill",
+                onClick: () => Xe((n) => !n),
+                children: /* @__PURE__ */ p(
+                  "span",
+                  {
+                    className: `be-canvas-fill-trigger-dot${z ? "" : " be-canvas-fill-trigger-dot-none"}`,
+                    style: z ? { backgroundColor: z } : void 0
+                  }
+                )
+              }
+            ),
+            le && /* @__PURE__ */ _(
+              "div",
+              {
+                ref: je,
+                className: "be-canvas-picker be-canvas-color-picker",
+                role: "menu",
+                "aria-label": "Shape fill",
+                children: [
+                  /* @__PURE__ */ p(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitem",
+                      className: `be-canvas-toolbar-swatch be-canvas-fill-swatch-none${z === null ? " be-canvas-toolbar-swatch-active" : ""}`,
+                      "aria-pressed": z === null,
+                      "aria-label": "No fill",
+                      title: "No fill",
+                      onClick: () => {
+                        B(null), pe();
+                      }
+                    }
+                  ),
+                  Nn.map((n) => /* @__PURE__ */ p(
+                    "button",
+                    {
+                      type: "button",
+                      role: "menuitem",
+                      className: `be-canvas-toolbar-swatch${z === n ? " be-canvas-toolbar-swatch-active" : ""}`,
+                      style: { backgroundColor: n },
+                      "aria-pressed": z === n,
+                      "aria-label": `Fill ${n}`,
+                      title: `Fill ${n}`,
+                      onClick: () => {
+                        B(n), pe();
+                      }
+                    },
+                    n
+                  )),
+                  /* @__PURE__ */ p(
+                    "label",
+                    {
+                      className: "be-canvas-custom-swatch",
+                      title: "Custom fill",
+                      "aria-label": "Custom fill",
+                      children: /* @__PURE__ */ p(
+                        "input",
+                        {
+                          type: "color",
+                          value: z ?? $n,
+                          onChange: (n) => B(n.target.value)
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ p("span", { className: "be-canvas-toolbar-divider" }),
+          /* @__PURE__ */ _("div", { className: "be-canvas-picker-wrap", children: [
+            /* @__PURE__ */ p(
+              "button",
+              {
+                ref: Ke,
+                type: "button",
+                className: "be-canvas-toolbar-btn",
+                "aria-haspopup": "true",
+                "aria-expanded": ue,
+                "aria-label": `Stroke size: ${S}`,
+                title: "Stroke size",
+                onClick: () => Ye((n) => !n),
+                children: /* @__PURE__ */ p(
+                  "span",
+                  {
+                    className: "be-canvas-size-trigger-dot",
+                    style: { width: Math.min(S, 16), height: Math.min(S, 16) }
+                  }
+                )
+              }
+            ),
+            ue && /* @__PURE__ */ _(
+              "div",
+              {
+                ref: Ve,
+                className: "be-canvas-picker be-canvas-size-picker",
+                role: "dialog",
+                "aria-label": "Stroke size",
+                children: [
+                  /* @__PURE__ */ p("span", { className: "be-canvas-size-preview", "aria-hidden": "true", children: /* @__PURE__ */ p(
+                    "span",
+                    {
+                      className: "be-canvas-size-preview-dot",
+                      style: { width: S, height: S }
+                    }
+                  ) }),
+                  /* @__PURE__ */ p(
+                    "input",
+                    {
+                      type: "range",
+                      className: "be-canvas-size-slider",
+                      min: Po,
+                      max: Ro,
+                      value: S,
+                      onChange: (n) => H(Number(n.target.value)),
+                      "aria-label": "Stroke size"
+                    }
+                  ),
+                  /* @__PURE__ */ _("span", { className: "be-canvas-size-value", children: [
+                    S,
+                    "px"
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ p("span", { className: "be-canvas-toolbar-divider" }),
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: `be-canvas-toolbar-btn${A ? " be-canvas-toolbar-btn-active" : ""}`,
+              "aria-pressed": A,
+              "aria-label": "Snap to grid",
+              title: A ? "Snap to grid: ON — drawing, moving, resizing and rotating align to the dotted grid. Click to turn off." : "Snap to grid: OFF — click to turn on (aligns drawing, moving, resizing and rotating to a grid)",
+              onClick: () => ae((n) => !n),
+              children: /* @__PURE__ */ p(eo, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ p("span", { className: "be-canvas-toolbar-divider" }),
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: "be-canvas-toolbar-btn",
+              "aria-label": "Zoom out",
+              title: "Zoom out",
+              onClick: Tr,
+              disabled: M.zoom <= Ne,
+              children: "−"
+            }
+          ),
+          /* @__PURE__ */ _(
+            "button",
+            {
+              type: "button",
+              className: "be-canvas-zoom-label",
+              "aria-label": `Zoom: ${Math.round(M.zoom * 100)}%. Click to reset to 100%.`,
+              title: "Reset zoom to 100%",
+              onClick: vr,
+              children: [
+                Math.round(M.zoom * 100),
+                "%"
+              ]
+            }
+          ),
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: "be-canvas-toolbar-btn",
+              "aria-label": "Zoom in",
+              title: "Zoom in",
+              onClick: Nr,
+              disabled: M.zoom >= Te,
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ p("span", { className: "be-canvas-toolbar-divider" }),
+          /* @__PURE__ */ p(
+            "button",
+            {
+              type: "button",
+              className: "be-canvas-toolbar-btn",
+              "aria-label": "Export PNG",
+              title: "Export as PNG",
+              onClick: Mr,
+              disabled: kn.length === 0 && En.length === 0,
+              children: /* @__PURE__ */ p(no, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _(
+          "svg",
+          {
+            ref: q,
+            className: "be-canvas-surface",
+            viewBox: `${M.x} ${M.y} ${Y} ${Y}`,
+            width: In,
+            height: Lr,
+            tabIndex: -1,
+            onPointerDown: Rr,
+            onPointerMove: Cr,
+            onPointerUp: Ar,
+            onPointerCancel: Dr,
+            onDoubleClick: Pr,
+            onKeyDown: $r,
+            children: [
+              A && /* @__PURE__ */ _(Br, { children: [
+                /* @__PURE__ */ p("defs", { children: /* @__PURE__ */ p(
+                  "pattern",
+                  {
+                    id: `be-canvas-grid-${t}`,
+                    width: Pn,
+                    height: Pn,
+                    patternUnits: "userSpaceOnUse",
+                    children: /* @__PURE__ */ p("circle", { cx: 1, cy: 1, r: 1.5, className: "be-canvas-grid-dot" })
+                  }
+                ) }),
+                /* @__PURE__ */ p(
+                  "rect",
+                  {
+                    className: "be-canvas-grid-background",
+                    x: M.x,
+                    y: M.y,
+                    width: Y,
+                    height: Y,
+                    fill: `url(#be-canvas-grid-${t})`
+                  }
+                )
+              ] }),
+              se(kn, En).map(({ kind: n, item: a }) => {
+                var h, d;
+                if (n === "stroke") {
+                  const g = a, y = ((h = X == null ? void 0 : X.ids) == null ? void 0 : h.includes(g.id)) ? ee(
+                    Xt(g, X.dx, X.dy).points,
+                    { size: g.size }
+                  ) : s(g);
+                  return /* @__PURE__ */ p(
+                    "path",
+                    {
+                      d: y,
+                      fill: g.color,
+                      fillRule: "nonzero",
+                      opacity: wr.has(g.id) ? 0.25 : 1
+                    },
+                    g.id
+                  );
+                }
+                const c = a;
+                let l = c;
+                return (d = X == null ? void 0 : X.ids) != null && d.includes(c.id) ? l = Ot(c, X.dx, X.dy) : (st == null ? void 0 : st.id) === c.id && (l = st), /* @__PURE__ */ p(
+                  _n,
+                  {
+                    shape: l,
+                    opacity: Sr.has(c.id) ? 0.25 : 1
+                  },
+                  c.id
+                );
+              }),
+              on && /* @__PURE__ */ p("path", { d: on, fill: m, fillRule: "nonzero" }),
+              ln && /* @__PURE__ */ p(_n, { shape: ln, opacity: 0.6 }),
+              Zt.map(({ id: n, box: a, rotation: c }) => /* @__PURE__ */ p(
+                "g",
+                {
+                  transform: c ? `rotate(${c} ${a.x + a.width / 2} ${a.y + a.height / 2})` : void 0,
+                  children: /* @__PURE__ */ p(
+                    "rect",
+                    {
+                      className: "be-canvas-selection-box",
+                      x: a.x - Ut,
+                      y: a.y - Ut,
+                      width: a.width + Ut * 2,
+                      height: a.height + Ut * 2,
+                      fill: "none"
+                    }
+                  )
+                },
+                n
+              )),
+              Fr.map(([n, a, c]) => /* @__PURE__ */ p(
+                "rect",
+                {
+                  className: "be-canvas-selection-handle",
+                  x: a - Yt / 2,
+                  y: c - Yt / 2,
+                  width: Yt,
+                  height: Yt
+                },
+                n
+              )),
+              Ee && /* @__PURE__ */ p(
+                "circle",
+                {
+                  className: "be-canvas-rotate-handle",
+                  cx: Ee[0],
+                  cy: Ee[1],
+                  r: Yt / 2
+                }
+              ),
+              Dt && /* @__PURE__ */ p(
+                "rect",
+                {
+                  className: "be-canvas-marquee",
+                  x: Dt.x,
+                  y: Dt.y,
+                  width: Dt.width,
+                  height: Dt.height
+                }
+              ),
+              P && /* @__PURE__ */ p(
+                "foreignObject",
+                {
+                  x: P.x,
+                  y: P.y,
+                  width: P.width,
+                  height: P.height,
+                  children: /* @__PURE__ */ p(
+                    "textarea",
+                    {
+                      xmlns: "http://www.w3.org/1999/xhtml",
+                      ref: (n) => n == null ? void 0 : n.focus(),
+                      className: "be-canvas-text-editor",
+                      value: P.text,
+                      style: { color: P.color, fontSize: P.fontSize },
+                      onChange: (n) => xt((a) => a && { ...a, text: n.target.value }),
+                      onBlur: () => zr(),
+                      onKeyDown: (n) => {
+                        n.key === "Escape" && (n.preventDefault(), Ir()), n.stopPropagation();
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ p(
+          "div",
+          {
+            className: "be-canvas-resize-handle",
+            onMouseDown: _r,
+            onKeyDown: Or,
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": "Resize canvas (Left/Right for width, Up/Down for height)",
+            "aria-valuemin": Gt,
+            "aria-valuenow": In,
+            contentEditable: !1
+          }
+        )
+      ]
+    }
+  );
+}
+const ir = "block", ar = "inline", cr = "extension", On = { blocks: !1, runs: !0, void: !0 };
+function O(t, r) {
+  throw new TypeError(`${t}: ${r}`);
+}
+function ts(t) {
+  (!t || typeof t != "object") && O("defineBlock", "config must be an object");
+  const { name: r, component: e, contentModel: o, isLeaf: s, ...i } = t;
+  (typeof r != "string" || !r.trim()) && O("defineBlock", "`name` must be a non-empty string"), typeof e != "function" && O("defineBlock", `block "${r}": \`component\` must be a React component`), o !== void 0 && !(o in On) && O(
+    "defineBlock",
+    `block "${r}": \`contentModel\` must be 'blocks', 'runs', or 'void' (got ${JSON.stringify(o)})`
+  );
+  const u = s !== void 0 ? !!s : o === void 0 ? !1 : On[o];
+  return {
+    ...i,
+    ...o !== void 0 ? { contentModel: o } : {},
+    name: r,
+    kind: ir,
+    component: e,
+    isLeaf: u
+  };
+}
+function xs(t) {
+  (!t || typeof t != "object") && O("defineInline", "config must be an object");
+  const { name: r, component: e, atomic: o, isAtomic: s, ...i } = t;
+  return (typeof r != "string" || !r.trim()) && O("defineInline", "`name` must be a non-empty string"), typeof e != "function" && O("defineInline", `inline "${r}": \`component\` must be a React component`), (o !== void 0 ? !!o : s !== void 0 ? !!s : !0) !== !0 && O("defineInline", `inline "${r}": only atomic inline types are supported today`), {
+    ...i,
+    name: r,
+    kind: ar,
+    component: e,
+    isAtomic: !0
+  };
+}
+function gs(t) {
+  (!t || typeof t != "object") && O("defineExtension", "config must be an object");
+  const {
+    name: r,
+    blocks: e = [],
+    inlineTypes: o = [],
+    keymap: s,
+    onBeforeInput: i,
+    onPaste: u,
+    setup: f,
+    ...x
+  } = t;
+  (typeof r != "string" || !r.trim()) && O("defineExtension", "`name` must be a non-empty string"), Array.isArray(e) || O("defineExtension", `extension "${r}": \`blocks\` must be an array`), Array.isArray(o) || O("defineExtension", `extension "${r}": \`inlineTypes\` must be an array`), s !== void 0 && (typeof s != "object" || s === null) && O("defineExtension", `extension "${r}": \`keymap\` must be an object`);
+  for (const [m, E] of [
+    ["onBeforeInput", i],
+    ["onPaste", u],
+    ["setup", f]
+  ])
+    E !== void 0 && typeof E != "function" && O("defineExtension", `extension "${r}": \`${m}\` must be a function`);
+  return {
+    ...x,
+    name: r,
+    kind: cr,
+    blocks: e,
+    inlineTypes: o,
+    ...s !== void 0 ? { keymap: s } : {},
+    ...i !== void 0 ? { onBeforeInput: i } : {},
+    ...u !== void 0 ? { onPaste: u } : {},
+    ...f !== void 0 ? { setup: f } : {}
+  };
+}
+function es(t) {
+  return !!t && t.kind === ir;
+}
+function ns(t) {
+  return !!t && t.kind === ar;
+}
+function rs(t) {
+  return !!t && t.kind === cr;
+}
+function os(t, { registry: r, inlineRegistry: e }) {
+  Array.isArray(t) || O("registerExtensions", "`extensions` must be an array");
+  for (const o of t.flat(1 / 0))
+    rs(o) ? os([...o.blocks, ...o.inlineTypes], { registry: r, inlineRegistry: e }) : es(o) ? (r || O("registerExtensions", `no block registry given for "${o.name}"`), r.register(o.name, o)) : ns(o) ? (e || O("registerExtensions", `no inline registry given for "${o.name}"`), e.register(o.name, o)) : O(
+      "registerExtensions",
+      "each item must be a defineBlock() / defineInline() result or a defineExtension() bundle (missing `kind`)"
+    );
+}
+function ss(t) {
+  const { strokes: r = [], shapes: e = [] } = t.props;
+  return !r.length && !e.length ? "<p></p>" : tr(t);
+}
+function is() {
+  return "";
+}
+function as() {
+  return null;
+}
+function cs(t, { blockId: r, runId: e, sliceStart: o, sliceEnd: s }) {
+  const i = t.getRun(e), u = (i == null ? void 0 : i.value) ?? "";
+  t.applyOperation(
+    oo(e, { value: u.slice(0, o) + u.slice(s) })
+  );
+  const f = so(t, r, Eo());
+  return io(t, f, ao("paragraph")), f;
+}
+const bs = ts({
+  name: "canvas",
+  contentModel: "void",
+  component: Qo,
+  defaultProps: {
+    strokes: [],
+    shapes: [],
+    width: ne,
+    height: re
+  },
+  toHTML: ss,
+  toPlainText: is,
+  fromHTML: as,
+  slashCommand: {
+    label: "Canvas",
+    icon: ro,
+    keywords: ["canvas", "draw", "drawing", "sketch", "freehand"],
+    run: cs
+  }
+});
+export {
+  os as a,
+  ts as b,
+  bs as c,
+  gs as d,
+  xs as e,
+  co as f,
+  ys as g,
+  ms as h,
+  Io as i,
+  Mt as j,
+  oe as k,
+  ct as l,
+  ps as r,
+  hs as u
+};
+//# sourceMappingURL=index-B9jyyL8u.js.map