mce 0.31.0 → 0.32.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { Aabb2D as xt, Animation as jt, Camera2D as Oi, DEG_TO_RAD as Vi, DrawboardEffect as Vo, Element2D as Xt, Engine as Fi, IN_BROWSER as Fo, IN_MAC_OS as Ni, Lottie2D as Zo, Node as $n, Obb2D as Hn, Timeline as Di, TimelineNode as Bi, Video2D as Cn, assets as qi, clamp as Ct, customNodes as ji, render as Qn, renderPixels as Ui } from "modern-canvas";
-import { Fragment as we, Teleport as No, Transition as Hi, computed as Y, createBlock as Fe, createCommentVNode as _e, createElementBlock as J, createElementVNode as W, createSlots as Do, createStaticVNode as Xi, createTextVNode as mt, createVNode as Me, defineComponent as Se, effectScope as Yi, getCurrentInstance as Qt, guardReactiveProps as yt, h as Yt, inject as Ot, isReactive as Gi, isRef as Wn, markRaw as bo, mergeModels as lt, mergeProps as ht, nextTick as zt, normalizeClass as De, normalizeProps as gt, normalizeStyle as $e, onActivated as Wi, onBeforeMount as bt, onBeforeUnmount as Qe, onDeactivated as Ki, onMounted as Vt, onScopeDispose as en, onUnmounted as Zi, openBlock as j, provide as Gt, reactive as dt, readonly as Ji, ref as de, renderList as Ie, renderSlot as Ne, resolveComponent as $s, resolveDynamicComponent as Bo, shallowRef as Ut, toDisplayString as be, toRaw as _o, toRef as Kt, toValue as Qi, unref as F, useAttrs as Ls, useId as qo, useModel as tt, useSlots as er, useTemplateRef as nt, vModelCheckbox as tr, vModelSelect as Jo, vModelText as Ln, vShow as zs, watch as Be, withCtx as Te, withDirectives as pt, withKeys as Qo, withModifiers as Je } from "vue";
+import { Aabb2D as xt, Animation as jt, Camera2D as Oi, DEG_TO_RAD as Vi, DrawboardEffect as Vo, Element2D as Zt, Engine as Fi, IN_BROWSER as Fo, IN_MAC_OS as Ni, Lottie2D as Zo, Node as $n, Obb2D as Hn, Timeline as Di, TimelineNode as Bi, Video2D as Cn, assets as qi, clamp as Ct, customNodes as ji, render as Qn, renderPixels as Ui } from "modern-canvas";
+import { Fragment as we, Teleport as No, Transition as Hi, computed as Y, createBlock as Fe, createCommentVNode as _e, createElementBlock as J, createElementVNode as W, createSlots as Do, createStaticVNode as Xi, createTextVNode as mt, createVNode as Me, defineComponent as Se, effectScope as Yi, getCurrentInstance as Qt, guardReactiveProps as yt, h as Xt, inject as Ot, isReactive as Gi, isRef as Wn, markRaw as bo, mergeModels as lt, mergeProps as ht, nextTick as zt, normalizeClass as De, normalizeProps as gt, normalizeStyle as $e, onActivated as Wi, onBeforeMount as bt, onBeforeUnmount as Qe, onDeactivated as Ki, onMounted as Vt, onScopeDispose as en, onUnmounted as Zi, openBlock as j, provide as Yt, reactive as dt, readonly as Ji, ref as de, renderList as Ie, renderSlot as Ne, resolveComponent as $s, resolveDynamicComponent as Bo, shallowRef as Ut, toDisplayString as be, toRaw as _o, toRef as Wt, toValue as Qi, unref as F, useAttrs as Ls, useId as qo, useModel as tt, useSlots as er, useTemplateRef as nt, vModelCheckbox as tr, vModelSelect as Jo, vModelText as Ln, vShow as zs, watch as Be, withCtx as Te, withDirectives as pt, withKeys as Qo, withModifiers as Je } from "vue";
 import { isClient as nr, onClickOutside as or, useDebounceFn as Rs, useEventListener as Os, useFileDialog as Vs, useImage as sr, useLocalStorage as ir, useResizeObserver as Fs } from "@vueuse/core";
-import { Observable as jo, getDefaultTextStyle as rr, getObjectValueByPath as ar, idGenerator as Zt, isCRLF as Xn, isEqualObject as lr, normalizeCRLF as mn, normalizeTextContent as pn, property as Ft, setObjectValueByPath as cr, textContentToString as ao } from "modern-idoc";
+import { Observable as jo, getDefaultTextStyle as rr, getObjectValueByPath as ar, idGenerator as Kt, isCRLF as Xn, isEqualObject as lr, normalizeCRLF as mn, normalizeTextContent as pn, property as Ft, setObjectValueByPath as cr, textContentToString as ao } from "modern-idoc";
 import { cloneDeep as En, get as ur, isEqual as dr, isPlainObject as es, merge as un, set as wo } from "lodash-es";
 import { Text as hr, measureText as ko } from "modern-text";
 import { Fonts as fr } from "modern-font";
@@ -2613,18 +2613,18 @@ function el(n, e = {}) {
   let M = n[0], P = n[1], y = n[2], p = n[3], g = 0, x = 0, b = -(P - p), w = M - y, E = 0, I = 0, k = Math.sqrt(b * b + w * w);
   b /= k, w /= k, b *= R, w *= R;
   const T = c, z = (1 - T) * 2, N = T * 2;
-  h || (l.cap === "round" ? L += Wt(M - b * (z - N) * 0.5, P - w * (z - N) * 0.5, M - b * z, P - w * z, M + b * N, P + w * N, f, !0) + 2 : l.cap === "square" && (L += ps(M, P, b, w, z, N, !0, f))), f.push(M - b * z, P - w * z), f.push(M + b * N, P + w * N);
+  h || (l.cap === "round" ? L += Gt(M - b * (z - N) * 0.5, P - w * (z - N) * 0.5, M - b * z, P - w * z, M + b * N, P + w * N, f, !0) + 2 : l.cap === "square" && (L += ps(M, P, b, w, z, N, !0, f))), f.push(M - b * z, P - w * z), f.push(M + b * N, P + w * N);
   for (let U = 1; U < _ - 1; ++U) {
     M = n[(U - 1) * 2], P = n[(U - 1) * 2 + 1], y = n[U * 2], p = n[U * 2 + 1], g = n[(U + 1) * 2], x = n[(U + 1) * 2 + 1], b = -(P - p), w = M - y, k = Math.sqrt(b * b + w * w), b /= k, w /= k, b *= R, w *= R, E = -(p - x), I = y - g, k = Math.sqrt(E * E + I * I), E /= k, I /= k, E *= R, I *= R;
     const G = y - M, q = P - p, K = y - g, H = x - p, Q = G * K + q * H, $ = q * K - H * G, Z = $ < 0;
     if (Math.abs($) < 1e-3 * Math.abs(Q)) {
-      f.push(y - b * z, p - w * z), f.push(y + b * N, p + w * N), Q >= 0 && (l.join === "round" ? L += Wt(y, p, y - b * z, p - w * z, y - E * z, p - I * z, f, !1) + 4 : L += 2, f.push(y - E * N, p - I * N), f.push(y + E * z, p + I * z));
+      f.push(y - b * z, p - w * z), f.push(y + b * N, p + w * N), Q >= 0 && (l.join === "round" ? L += Gt(y, p, y - b * z, p - w * z, y - E * z, p - I * z, f, !1) + 4 : L += 2, f.push(y - E * N, p - I * N), f.push(y + E * z, p + I * z));
       continue;
     }
     const te = (-b + M) * (-w + p) - (-b + y) * (-w + P), ee = (-E + g) * (-I + p) - (-E + y) * (-I + x), ae = (G * ee - K * te) / $, ce = (H * te - q * ee) / $, pe = (ae - y) * (ae - y) + (ce - p) * (ce - p), he = y + (ae - y) * z, ge = p + (ce - p) * z, ve = y - (ae - y) * N, fe = p - (ce - p) * N, Ce = Math.min(G * G + q * q, K * K + H * H), ke = Z ? z : N;
-    pe <= Ce + ke * ke * S ? l.join === "bevel" || pe / S > A ? (Z ? (f.push(he, ge), f.push(y + b * N, p + w * N), f.push(he, ge), f.push(y + E * N, p + I * N)) : (f.push(y - b * z, p - w * z), f.push(ve, fe), f.push(y - E * z, p - I * z), f.push(ve, fe)), L += 2) : l.join === "round" ? Z ? (f.push(he, ge), f.push(y + b * N, p + w * N), L += Wt(y, p, y + b * N, p + w * N, y + E * N, p + I * N, f, !0) + 4, f.push(he, ge), f.push(y + E * N, p + I * N)) : (f.push(y - b * z, p - w * z), f.push(ve, fe), L += Wt(y, p, y - b * z, p - w * z, y - E * z, p - I * z, f, !1) + 4, f.push(y - E * z, p - I * z), f.push(ve, fe)) : (f.push(he, ge), f.push(ve, fe)) : (f.push(y - b * z, p - w * z), f.push(y + b * N, p + w * N), l.join === "round" ? Z ? L += Wt(y, p, y + b * N, p + w * N, y + E * N, p + I * N, f, !0) + 2 : L += Wt(y, p, y - b * z, p - w * z, y - E * z, p - I * z, f, !1) + 2 : l.join === "miter" && pe / S <= A && (Z ? (f.push(ve, fe), f.push(ve, fe)) : (f.push(he, ge), f.push(he, ge)), L += 2), f.push(y - E * z, p - I * z), f.push(y + E * N, p + I * N), L += 2);
+    pe <= Ce + ke * ke * S ? l.join === "bevel" || pe / S > A ? (Z ? (f.push(he, ge), f.push(y + b * N, p + w * N), f.push(he, ge), f.push(y + E * N, p + I * N)) : (f.push(y - b * z, p - w * z), f.push(ve, fe), f.push(y - E * z, p - I * z), f.push(ve, fe)), L += 2) : l.join === "round" ? Z ? (f.push(he, ge), f.push(y + b * N, p + w * N), L += Gt(y, p, y + b * N, p + w * N, y + E * N, p + I * N, f, !0) + 4, f.push(he, ge), f.push(y + E * N, p + I * N)) : (f.push(y - b * z, p - w * z), f.push(ve, fe), L += Gt(y, p, y - b * z, p - w * z, y - E * z, p - I * z, f, !1) + 4, f.push(y - E * z, p - I * z), f.push(ve, fe)) : (f.push(he, ge), f.push(ve, fe)) : (f.push(y - b * z, p - w * z), f.push(y + b * N, p + w * N), l.join === "round" ? Z ? L += Gt(y, p, y + b * N, p + w * N, y + E * N, p + I * N, f, !0) + 2 : L += Gt(y, p, y - b * z, p - w * z, y - E * z, p - I * z, f, !1) + 2 : l.join === "miter" && pe / S <= A && (Z ? (f.push(ve, fe), f.push(ve, fe)) : (f.push(he, ge), f.push(he, ge)), L += 2), f.push(y - E * z, p - I * z), f.push(y + E * N, p + I * N), L += 2);
   }
-  M = n[(_ - 2) * 2], P = n[(_ - 2) * 2 + 1], y = n[(_ - 1) * 2], p = n[(_ - 1) * 2 + 1], b = -(P - p), w = M - y, k = Math.sqrt(b * b + w * w), b /= k, w /= k, b *= R, w *= R, f.push(y - b * z, p - w * z), f.push(y + b * N, p + w * N), h || (l.cap === "round" ? L += Wt(y - b * (z - N) * 0.5, p - w * (z - N) * 0.5, y - b * z, p - w * z, y + b * N, p + w * N, f, !1) + 2 : l.cap === "square" && (L += ps(y, p, b, w, z, N, !1, f)));
+  M = n[(_ - 2) * 2], P = n[(_ - 2) * 2 + 1], y = n[(_ - 1) * 2], p = n[(_ - 1) * 2 + 1], b = -(P - p), w = M - y, k = Math.sqrt(b * b + w * w), b /= k, w /= k, b *= R, w *= R, f.push(y - b * z, p - w * z), f.push(y + b * N, p + w * N), h || (l.cap === "round" ? L += Gt(y - b * (z - N) * 0.5, p - w * (z - N) * 0.5, y - b * z, p - w * z, y + b * N, p + w * N, f, !1) + 2 : l.cap === "square" && (L += ps(y, p, b, w, z, N, !1, f)));
   const oe = ms * ms;
   for (let U = O; U < L + O - 2; ++U)
     M = f[U * 2], P = f[U * 2 + 1], y = f[(U + 1) * 2], p = f[(U + 1) * 2 + 1], g = f[(U + 2) * 2], x = f[(U + 2) * 2 + 1], !(Math.abs(M * (p - x) + y * (x - P) + g * (P - p)) < oe) && o.push(U, U + 1, U + 2);
@@ -2658,7 +2658,7 @@ function ps(n, e, t, o, s, i, r, a) {
   const f = l + h, _ = c + m, L = d + h, O = u + m;
   return a.push(f, _), a.push(L, O), 2;
 }
-function Wt(n, e, t, o, s, i, r, a) {
+function Gt(n, e, t, o, s, i, r, a) {
   const l = t - n, c = o - e;
   let d = Math.atan2(l, c), u = Math.atan2(s - n, i - e);
   a && d < u ? d += Math.PI * 2 : !a && d > u && (u += Math.PI * 2);
@@ -5296,7 +5296,7 @@ var cc = class extends jo {
   _pendingInserts = /* @__PURE__ */ new Map();
   indexeddb;
   _rx;
-  constructor(n = Zt(), e = rc) {
+  constructor(n = Kt(), e = rc) {
     super(), this.id = n, this._rx = e, this._yDoc = this._rx.markRaw(new ut.Doc({
       guid: n,
       gc: !0
@@ -5498,20 +5498,11 @@ var cc = class extends jo {
     const s = this._nodeMap.get(o);
     if (s) n = s;
     else {
-      if (!this._rx.isReactive(n)) {
-        const r = (a) => {
-          if (a instanceof Xt && !a.text.base.__markRaw__) {
-            const l = this._rx.markRaw(a.text.base);
-            l.__markRaw__ = !0, l.setPropertyAccessor(a.text), a.text.base = l;
-          }
-        };
-        r(n), n.findOne((a) => (r(a), !1)), n = this._rx.reactive(n), n.parent && (n.parent.children[n.getIndex()] = n);
-      }
-      this._nodeMap.set(o, n), this._flushPendingInserts(o);
+      this._rx.isReactive(n) || (n = this._rx.reactive(n), n.parent && (n.parent.children[n.getIndex()] = n)), this._nodeMap.set(o, n), this._flushPendingInserts(o);
       const i = () => {
         this._guardedTransact(() => e.set("parentId", n.parent?.id));
       };
-      i(), n.on("parented", i), this._proxyProps(n, e), this._proxyProps(n.meta, this._ensureSubMap(e, "meta", n.meta), !0), n instanceof Xt && (lc.forEach((r) => {
+      i(), n.on("parented", i), this._proxyProps(n, e), this._proxyProps(n.meta, this._ensureSubMap(e, "meta", n.meta), !0), n instanceof Zt && (lc.forEach((r) => {
         this._proxyProps(n[r], this._ensureSubMap(e, r, n[r]));
       }), n.text.update(), n.table.isValid() && n.table.update(), n.requestRender()), t || (t = e.get("childrenIds")), t || (t = new ut.Array(), t.push(n.children.map((r) => r.id)), e.set("childrenIds", t)), this._proxyChildren(n, t);
     }
@@ -5656,7 +5647,7 @@ var cc = class extends jo {
     return G($, "Frame") && (!Z || !!$.parent?.equal(t.value));
   }
   function U($) {
-    return $ instanceof Xt;
+    return $ instanceof Zt;
   }
   function G($, Z) {
     return $.meta.inEditorIs === Z;
@@ -7792,7 +7783,7 @@ var Wc = Pe((n) => {
   }
   function c(A = o.value[0]) {
     if (!A) return;
-    const M = Zt(), P = {
+    const M = Kt(), P = {
       id: M,
       name: A.name || "Component",
       node: A.toJSON()
@@ -7943,7 +7934,7 @@ var Wc = Pe((n) => {
     s("historyChanged", P);
   }
   function _(P) {
-    P.findOne((y) => (y instanceof Xt && (y.foreground.texture?.destroy(), y.foreground.animatedTexture?.destroy(), y.fill.texture?.destroy(), y.fill.animatedTexture?.destroy(), y.background.texture?.destroy(), y.background.animatedTexture?.destroy()), !1));
+    P.findOne((y) => (y instanceof Zt && (y.foreground.texture?.destroy(), y.foreground.animatedTexture?.destroy(), y.fill.texture?.destroy(), y.fill.animatedTexture?.destroy(), y.background.texture?.destroy(), y.background.animatedTexture?.destroy()), !1));
   }
   function L(P) {
     if (Array.isArray(P)) return P;
@@ -8070,7 +8061,7 @@ var Wc = Pe((n) => {
           return T.style && (delete T.style.left, delete T.style.top), T;
         }))}</mce-clipboard>`;
         const I = (k) => {
-          if (k instanceof Xt) {
+          if (k instanceof Zt) {
             const T = k.text.base.toString();
             x.push(T), b += `<span>${T}</span>`;
           }
@@ -8586,7 +8577,7 @@ function yu() {
       c.equal(u.value) && (d = h);
     }), d;
   }
-  return Gt(Ci, {
+  return Yt(Ci, {
     selecting: i,
     openedItems: t,
     dragging: r,
@@ -8637,7 +8628,7 @@ function gu(n) {
     id: t,
     ...n
   }, s = Qt();
-  return Gt(Ei, { id: t }), e.register(s, o), Qe(() => e.unregister(t)), {
+  return Yt(Ei, { id: t }), e.register(s, o), Qe(() => e.unregister(t)), {
     ...e,
     id: t,
     dropping: Y(() => e.droppingItemId.value === t),
@@ -8693,7 +8684,7 @@ function Mu(n) {
   const e = Ot(Zn);
   if (!e) throw new Error("[mce] Could not find injected layout");
   const t = n.id ?? `layout-item-${qo()}`, o = Qt();
-  Gt(Ti, { id: t });
+  Yt(Ti, { id: t });
   const s = Ut(!1);
   Ki(() => s.value = !0), Wi(() => s.value = !1);
   const { layoutItemStyles: i, layoutItemScrimStyles: r } = e.register(o, {
@@ -8755,7 +8746,7 @@ function Cu(n) {
       M.push(...y);
     }
     return Su(M, s, i, a);
-  }), m = Y(() => !Array.from(l.values()).some((A) => A.value)), f = Y(() => h.value[h.value.length - 1].layer), _ = Kt(() => ({
+  }), m = Y(() => !Array.from(l.values()).some((A) => A.value)), f = Y(() => h.value[h.value.length - 1].layer), _ = Wt(() => ({
     "--m-layout-left": Vn(f.value.left),
     "--m-layout-right": Vn(f.value.right),
     "--m-layout-top": Vn(f.value.top),
@@ -8772,7 +8763,7 @@ function Cu(n) {
   })), O = (A) => L.value.find((M) => M.id === A), R = Qt(), S = Ut(!1);
   return Vt(() => {
     S.value = !0;
-  }), Gt(Zn, {
+  }), Yt(Zn, {
     register: (A, { id: M, order: P, position: y, layoutSize: p, elementSize: g, active: x, disableTransitions: b }) => {
       r.set(M, P), s.set(M, y), i.set(M, p), a.set(M, x), b && l.set(M, b);
       const w = dn(Ti, R?.vnode).indexOf(A);
@@ -8814,8 +8805,8 @@ function Cu(n) {
     layoutRect: d,
     rootZIndex: t
   }), {
-    layoutClasses: Kt(() => ["m-layout", { "m-layout--full-height": n.fullHeight }]),
-    layoutStyles: Kt(() => ({
+    layoutClasses: Wt(() => ["m-layout", { "m-layout--full-height": n.fullHeight }]),
+    layoutStyles: Wt(() => ({
       zIndex: e ? t.value : void 0,
       position: e ? "relative" : void 0,
       overflow: e ? "hidden" : void 0
@@ -8896,7 +8887,7 @@ function Ai(n = {}) {
 }
 function Au(n = {}) {
   let e = Ot(Ro, null);
-  return e || (e = Ai(n), Gt(Ro, e)), e;
+  return e || (e = Ai(n), Yt(Ro, e)), e;
 }
 function Pi() {
   const n = Ot(Ro, Tu()), e = Qt();
@@ -9626,7 +9617,7 @@ var kd = Pe((n) => {
       name: "json",
       handle: (r) => {
         const { selected: a = !1, scale: l = 1 } = r;
-        let c = Zt(), d = "Doc", u = [];
+        let c = Kt(), d = "Doc", u = [];
         Array.isArray(a) ? u = a : (a === !0 && (u = t.value), u.length === 0 && o.value && (c = o.value.id, d = o.value.name, u = o.value.children));
         const { left: h, top: m, width: f, height: _ } = e(u, "parent");
         return {
@@ -10035,7 +10026,7 @@ var Dd = /* @__PURE__ */ oo(Vd, [["render", Nd]]), Bd = Pe((n) => {
   emits: /* @__PURE__ */ lt(["click:item"], ["update:modelValue"]),
   setup(n, { expose: e, emit: t }) {
     const o = n, s = t, i = tt(n, "modelValue"), r = de(-1), a = nt("overlayTpl"), l = de([]), c = Y(() => !!o.items?.some((S) => "checked" in S)), d = qo(), u = Ot(Ms, null), h = Ut(/* @__PURE__ */ new Set());
-    Gt(Ms, {
+    Yt(Ms, {
       register: () => h.value.add(d),
       unregister: () => h.value.delete(d),
       closeParents(S) {
@@ -10621,11 +10612,11 @@ var Dd = /* @__PURE__ */ oo(Vd, [["render", Nd]]), Bd = Pe((n) => {
     }
     function d(u = {}) {
       const { indent: h = 0, node: m } = u;
-      return [Yt("div", {
+      return [Xt("div", {
         class: ["m-creator__node", s.value === m.name && "m-creator__node--active"],
         style: { "--indent-padding": `${h * 16}px` },
         onClick: () => s.value = m.name
-      }, m.name), ...m.children.map((f) => Yt(d, {
+      }, m.name), ...m.children.map((f) => Xt(d, {
         node: f,
         indent: h + 1
       }))];
@@ -11108,7 +11099,7 @@ var Dd = /* @__PURE__ */ oo(Vd, [["render", Nd]]), Bd = Pe((n) => {
     }],
     components: [{
       type: "overlay",
-      component: () => Yt(_h, { refLines: o.value }),
+      component: () => Xt(_h, { refLines: o.value }),
       order: "after",
       visible: Y({
         get: () => s.value.visible,
@@ -11759,14 +11750,14 @@ var Dd = /* @__PURE__ */ oo(Vd, [["render", Nd]]), Bd = Pe((n) => {
     function x() {
       const b = h.value;
       if (!(o.resizeStrategy !== "lockAspectRatio" || o.lockAspectRatioStrategy !== "diagonal" || !b || !b.startsWith("resize") || b.split("-")[1].length === 1)) {
-        if (b === "resize-t" || b === "resize-r" || b === "resize-tr" || b === "resize-bl") return Yt("line", {
+        if (b === "resize-t" || b === "resize-r" || b === "resize-tr" || b === "resize-bl") return Xt("line", {
           class: "m-transform__diagonal",
           x1: "100%",
           y1: "0",
           x2: "0",
           y2: "100%"
         });
-        if (b === "resize-l" || b === "resize-b" || b === "resize-tl" || b === "resize-br") return Yt("line", {
+        if (b === "resize-l" || b === "resize-b" || b === "resize-tl" || b === "resize-br") return Xt("line", {
           class: "m-transform__diagonal",
           x1: "0",
           y1: "0",
@@ -14337,7 +14328,7 @@ var jf = Pe((n) => {
     },
     components: [{
       type: "overlay",
-      component: () => Yt(Vf, { snapLines: M.value })
+      component: () => Xt(Vf, { snapLines: M.value })
     }]
   };
 }, { enforce: "post" }), Uf = ["onPointerdown"], Hf = /* @__PURE__ */ Se({
@@ -14670,7 +14661,7 @@ var jf = Pe((n) => {
     events: { docSet: () => e.value = void 0 },
     components: [{
       type: "overlay",
-      component: () => Yt(Xf, {
+      component: () => Xt(Xf, {
         modelValue: e.value,
         "onUpdate:modelValue": (t) => e.value = t
       })
@@ -14777,7 +14768,7 @@ var jf = Pe((n) => {
     e.value.removeChildren();
     const { width: r, height: a } = o.value;
     for (let l = 0; l < i; l++) {
-      const c = 10 + Math.random() * 40, d = new Xt({ style: {
+      const c = 10 + Math.random() * 40, d = new Zt({ style: {
         left: Math.random() * (r - c),
         top: Math.random() * (a - c),
         width: c,
@@ -15213,7 +15204,7 @@ var jf = Pe((n) => {
           duration: x
         });
       }
-      if (p instanceof Xt) {
+      if (p instanceof Zt) {
         for (const x of [
           "background",
           "foreground",
@@ -15363,7 +15354,7 @@ var jf = Pe((n) => {
     function P(p, g) {
       if (g.kind !== "animation" || !g.anim || p.target !== p.currentTarget) return;
       const x = g.anim, b = e.node;
-      if (!(b instanceof Xt)) return;
+      if (!(b instanceof Zt)) return;
       const w = p.currentTarget.getBoundingClientRect(), E = x.duration || e.endTime - x.delay || 1, I = 1e3 / s.value, k = x.delay + Ct((p.clientX - w.left) / w.width, 0, 1) * E, T = Ct((Math.round(k / I) * I - x.delay) / E, 0, 1);
       r.value = [b], t.value?.transact(() => {
         x.keyframes = Sn(S(g), {
@@ -17253,7 +17244,7 @@ var fv = Pe((n) => {
     S && (S.variableActiveModes = R);
   }
   function d(R, S = "Default") {
-    const A = Zt(), M = Zt();
+    const A = Kt(), M = Kt();
     return a(Nl(r(), {
       id: A,
       name: R,
@@ -17264,14 +17255,14 @@ var fv = Pe((n) => {
     })), A;
   }
   function u(R, S) {
-    const A = Zt();
+    const A = Kt();
     return a(Dl(r(), R, {
       id: A,
       name: S
     })), A;
   }
   function h(R, S) {
-    const A = Zt();
+    const A = Kt();
     return a(Bl(r(), R, {
       id: A,
       ...S
@@ -17903,10 +17894,10 @@ var xv = { class: "m-panel" }, bv = { class: "m-panel__title" }, _v = /* @__PURE
     const e = n, { panels: t } = qe(), o = de((e.name ? t.sizeRef(e.name).value : void 0) ?? e.size), s = Y(() => e.resizable ? o.value : e.size), { layoutItemStyles: i } = Mu({
       id: e.name,
       order: Y(() => Number.parseInt(String(e.order), 10)),
-      position: Kt(() => e.position),
-      elementSize: Kt(() => s.value),
-      layoutSize: Kt(() => s.value),
-      active: Kt(() => e.modelValue)
+      position: Wt(() => e.position),
+      elementSize: Wt(() => s.value),
+      layoutSize: Wt(() => s.value),
+      active: Wt(() => e.modelValue)
     }), r = Y(() => e.position === "left" || e.position === "right");
     function a(c) {
       return Math.min(Math.max(c, e.minSize), e.maxSize ?? Number.POSITIVE_INFINITY);
@@ -17951,7 +17942,7 @@ var xv = { class: "m-panel" }, bv = { class: "m-panel__title" }, _v = /* @__PURE
       const { item: u, ...h } = d, m = {};
       return u.slot && Object.keys(e.slots).forEach((f) => {
         f === u.slot ? m.default = e.slots[f] : f.startsWith(`${u.slot}.`) && (m[f.substring(`${u.slot}.`.length)] = e.slots[f]);
-      }), Yt(u.component, {
+      }), Xt(u.component, {
         ...h,
         ref: (f) => l(f, u)
       }, m);
@@ -18109,7 +18100,7 @@ var xv = { class: "m-panel" }, bv = { class: "m-panel__title" }, _v = /* @__PURE
   setup(n) {
     const e = n, t = er();
     let o;
-    e.editor ? (o = e.editor, Gt(Jn.injectionKey, o)) : o = qe(), o.setup(), Gt(Si, pu({ aliases: o.icons.value }));
+    e.editor ? (o = e.editor, Yt(Jn.injectionKey, o)) : o = qe(), o.setup(), Yt(Si, pu({ aliases: o.icons.value }));
     const { componentRefs: s, isElement: i, isFrameNode: r, drawboardDom: a, renderEngine: l, camera: c, hoverElement: d, state: u, setCursor: h, exec: m, isLock: f, t: _, selectionAabbInDrawboard: L, selectionMarquee: O, elementSelection: R, drawboardAabb: S, activeTool: A, isContentEditing: M } = o, P = Y(() => e.activeStrategy ?? o.activeStrategy), y = Y(() => e.doubleclickStrategy ?? o.doubleclickStrategy), p = Y(() => e.hoverStrategy ?? o.hoverStrategy), g = nt("overlayContainerTpl"), x = nt("canvasTpl"), b = de(!1);
     Au({ attach: Y(() => g.value) }), Fs(x, (q) => {
       const { width: K, height: H } = q[0].contentRect;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mce",
   "type": "module",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.",
   "author": "wxm",
   "license": "MIT",
@@ -60,7 +60,7 @@
     "@vueuse/core": "^14.3.0",
     "diff": "^9.0.0",
     "lodash-es": "^4.18.1",
-    "modern-canvas": "^0.25.0",
+    "modern-canvas": "^0.25.1",
     "modern-font": "^0.6.1",
     "modern-idoc": "^0.12.3",
     "modern-text": "^2.0.9",