mce 0.11.0 → 0.11.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ref as V, computed as z, watch as pe, markRaw as fe, reactive as Ae, warn as Nt, shallowRef as Ze, inject as Se, provide as Le, defineComponent as X, createVNode as H, mergeProps as Oe, createElementVNode as I, toValue as dn, getCurrentInstance as Qe, onScopeDispose as mn, createElementBlock as P, openBlock as $, Fragment as se, renderList as _e, unref as S, normalizeStyle as q, normalizeClass as be, onBeforeUnmount as we, readonly as hn, toRef as Te, onMounted as He, useId as Pt, onDeactivated as fn, onActivated as pn, useAttrs as Rt, createBlock as oe, resolveDynamicComponent as Bt, useTemplateRef as ce, renderSlot as ee, Teleport as vn, createCommentVNode as Z, mergeModels as $e, useModel as ke, resolveComponent as yn, withCtx as ne, createTextVNode as gn, toDisplayString as K, createSlots as ht, normalizeProps as ft, guardReactiveProps as pt, withDirectives as ze, vShow as Ue, vModelText as bn, nextTick as Xe, withModifiers as We, onBeforeMount as vt, isRef as wn } from "vue";
+import { ref as V, computed as z, watch as pe, markRaw as fe, reactive as Ae, warn as Nt, shallowRef as Ze, inject as Se, provide as Le, defineComponent as X, createVNode as H, mergeProps as Oe, createElementVNode as I, toValue as dn, getCurrentInstance as Qe, onScopeDispose as mn, createElementBlock as P, openBlock as $, Fragment as se, renderList as _e, unref as M, normalizeStyle as q, normalizeClass as be, onBeforeUnmount as we, readonly as hn, toRef as Te, onMounted as He, useId as Pt, onDeactivated as fn, onActivated as pn, useAttrs as Rt, createBlock as oe, resolveDynamicComponent as Bt, useTemplateRef as ce, renderSlot as ee, Teleport as vn, createCommentVNode as Z, mergeModels as $e, useModel as ke, resolveComponent as yn, withCtx as ne, createTextVNode as gn, toDisplayString as K, createSlots as ht, normalizeProps as ft, guardReactiveProps as pt, withDirectives as ze, vShow as Ue, vModelText as bn, nextTick as Xe, withModifiers as We, onBeforeMount as vt, isRef as wn } from "vue";
 import { useFileDialog as Lt, useEventListener as Dt, isClient as xn, useResizeObserver as Vt, useLocalStorage as _n, onClickOutside as kn, useMouse as Cn, useDebounceFn as jt } from "@vueuse/core";
 import { Node as _t, Element2D as G, Timeline as An, Engine as Tn, Camera2D as En, DrawboardEffect as Sn, IN_BROWSER as yt, clamp as Mn, assets as Ut, TimelineNode as zn, Transform2D as On, DEG_TO_RAD as $n, render as gt, Animation as In } from "modern-canvas";
 import { getObjectValueByPath as Fn, setObjectValueByPath as Nn, Observable as Xt, Reactivable as Pn, idGenerator as et, property as Rn, normalizeElement as Ht, normalizeTextContent as Bn } from "modern-idoc";
@@ -14,7 +14,7 @@ const Wn = (o) => {
   const {
     emit: e
   } = o, t = V(/* @__PURE__ */ new Map()), n = (i) => {
-    Array.isArray(i) ? i.forEach((l) => n(l)) : t.value.set(i.command, i);
+    Array.isArray(i) ? i.forEach((r) => n(r)) : t.value.set(i.command, i);
   };
   Object.assign(o, {
     commands: t,
@@ -22,56 +22,56 @@ const Wn = (o) => {
     unregisterCommand: (i) => {
       t.value.delete(i);
     },
-    exec: (i, ...l) => {
-      const [r, c] = i.split(":");
-      c !== void 0 && l.unshift(c);
-      const u = t.value.get(r);
-      if (!u)
-        throw new Error(`Command "${r}" not found`);
-      const h = u.handle(...l);
-      return e(`command:${r}`, h), h;
+    exec: (i, ...r) => {
+      const [c, u] = i.split(":");
+      u !== void 0 && r.unshift(u);
+      const l = t.value.get(c);
+      if (!l)
+        throw new Error(`Command "${c}" not found`);
+      const h = l.handle(...r);
+      return e(`command:${c}`, h), h;
     }
   });
 }, Kn = (o) => {
   const {
     config: e
   } = o;
-  function t(c, u) {
-    return Fn(e.value, c) ?? u;
+  function t(u, l) {
+    return Fn(e.value, u) ?? l;
   }
-  function n(c, u) {
-    Nn(e.value, c, u);
+  function n(u, l) {
+    Nn(e.value, u, l);
   }
-  function s(c) {
+  function s(u) {
     return z({
-      get: () => t(c),
-      set: (u) => n(c, u)
+      get: () => t(u),
+      set: (l) => n(u, l)
     });
   }
-  function a(c, u) {
-    const h = s(c);
-    return h.value === void 0 && (h.value = u), h;
+  function a(u, l) {
+    const h = s(u);
+    return h.value === void 0 && (h.value = l), h;
   }
   function i() {
-    return new Promise((c) => {
-      const { onChange: u, open: h } = Lt({
+    return new Promise((u) => {
+      const { onChange: l, open: h } = Lt({
         accept: ".json",
         reset: !0,
         multiple: !1
       });
-      u(async (k) => {
+      l(async (k) => {
         const f = k?.[0];
-        f && (e.value = JSON.parse(await f.text()), c(e.value));
+        f && (e.value = JSON.parse(await f.text()), u(e.value));
       }), h();
     });
   }
-  function l() {
+  function r() {
     return new Blob([JSON.stringify(e.value)], { type: "application/json" });
   }
-  function r(c = "settings.json") {
+  function c(u = "settings.json") {
     Yt(
-      l(),
-      c
+      r(),
+      u
     );
   }
   Object.assign(o, {
@@ -80,8 +80,8 @@ const Wn = (o) => {
     getConfig: s,
     registerConfig: a,
     importConfig: i,
-    exportConfig: l,
-    saveAsConfig: r
+    exportConfig: r,
+    saveAsConfig: c
   });
 }, Jn = (o, e) => {
   const {
@@ -367,18 +367,18 @@ function yo(o, e = {}, t, n = !1) {
       ...e?.meta ?? {}
     }
   }), a = s.id, i = new le.Array();
-  for (const l in s)
-    o.set(l, s[l]);
+  for (const r in s)
+    o.set(r, s[r]);
   return o.set("id", a), o.set("parentId", t), o.set("name", s.name ?? a), o.set("childrenIds", i), o.set("meta", new le.Map(Object.entries(s.meta ?? {}))), s?.meta?.inCanvasIs === "Element2D" && (o.set("style", new le.Map(Object.entries(s.style ?? {}))), o.set("background", new le.Map(Object.entries(s.background ?? {}))), o.set("shape", new le.Map(Object.entries(s.shape ?? {}))), o.set("fill", new le.Map(Object.entries(s.fill ?? {}))), o.set("outline", new le.Map(Object.entries(s.outline ?? {}))), o.set("text", new le.Map(Object.entries(s.text ?? {}))), o.set("foreground", new le.Map(Object.entries(s.foreground ?? {}))), o.set("shadow", new le.Map(Object.entries(s.shadow ?? {})))), {
     normalized: s,
     yChildrenIds: i
   };
 }
 function en(o, e, t = !1) {
-  const n = [], s = new le.Map(), { normalized: a, yChildrenIds: i } = yo(s, o, e, t), l = a.id;
-  return n.push({ id: l, element: s }), a.children?.forEach((r) => {
-    const c = en(r, l, t);
-    i.push([c[0].id]), n.push(...c);
+  const n = [], s = new le.Map(), { normalized: a, yChildrenIds: i } = yo(s, o, e, t), r = a.id;
+  return n.push({ id: r, element: s }), a.children?.forEach((c) => {
+    const u = en(c, r, t);
+    i.push([u[0].id]), n.push(...u);
   }), n;
 }
 class Ke extends fo {
@@ -429,10 +429,10 @@ class Ke extends fo {
     this._debug("_onChildrenChange", e);
     const { keysChanged: n, changes: s } = e;
     n.forEach((a) => {
-      const i = s.keys.get(a), l = this._yChildren.get(a);
+      const i = s.keys.get(a), r = this._yChildren.get(a);
       switch (i?.action) {
         case "add":
-          l && this._getOrCreateNode(l);
+          r && this._getOrCreateNode(r);
           break;
         case "delete":
           this.nodeMap.get(a)?.remove(), this.nodeMap.delete(a);
@@ -446,9 +446,9 @@ class Ke extends fo {
   _addElement(e, t = {}) {
     const { parentId: n, index: s, regenId: a } = t, i = en(e, n, a);
     i.forEach((h) => this._yChildren.set(h.id, h.element));
-    const r = i.map((h) => this._getOrCreateNode(h.element))[0];
-    let c, u;
-    return n ? (c = this.nodeMap.get(n), u = this._yChildren.get(n)?.get("childrenIds")) : (c = this.root, u = this._yChildrenIds), c && u && (s === void 0 ? (u.push([r.id]), c.appendChild(r)) : (u.insert(s, [r.id]), c.moveChild(r, s))), r;
+    const c = i.map((h) => this._getOrCreateNode(h.element))[0];
+    let u, l;
+    return n ? (u = this.nodeMap.get(n), l = this._yChildren.get(n)?.get("childrenIds")) : (u = this.root, l = this._yChildrenIds), u && l && (s === void 0 ? (l.push([c.id]), u.appendChild(c)) : (l.insert(s, [c.id]), u.moveChild(c, s))), c;
   }
   addElement(e, t) {
     return this.transact(() => this._addElement(e, t));
@@ -487,33 +487,33 @@ class Ke extends fo {
   _proxyProps(e, t, n = !1) {
     const s = {
       getProperty: (i) => t.doc ? t.get(i) : void 0,
-      setProperty: (i, l) => {
-        this._transacting !== !1 && this.transact(() => t.set(i, l));
+      setProperty: (i, r) => {
+        this._transacting !== !1 && this.transact(() => t.set(i, r));
       }
     };
     if (n) {
       e._propertyAccessor = void 0;
       const i = {};
-      t.forEach((l, r) => {
-        i[r] = e.getProperty(r);
-      }), e._propertyAccessor = fe(s), t.forEach((l, r) => {
-        const c = e.getProperty(r), u = i[r];
-        c !== void 0 && !Object.is(c, u) && (e.setProperty(r, c), e.requestUpdate(r, c, u));
+      t.forEach((r, c) => {
+        i[c] = e.getProperty(c);
+      }), e._propertyAccessor = fe(s), t.forEach((r, c) => {
+        const u = e.getProperty(c), l = i[c];
+        u !== void 0 && !Object.is(u, l) && (e.setProperty(c, u), e.requestUpdate(c, u, l));
       });
     }
     e.setPropertyAccessor(s);
-    const a = (i, l) => {
-      this._isSelfTransaction(l) || (this._debug("_proxyProps", i, e), this.transact(() => {
-        const { keysChanged: r, changes: c } = i;
-        r.forEach((u) => {
-          const h = c.keys.get(u), k = h?.oldValue;
+    const a = (i, r) => {
+      this._isSelfTransaction(r) || (this._debug("_proxyProps", i, e), this.transact(() => {
+        const { keysChanged: c, changes: u } = i;
+        c.forEach((l) => {
+          const h = u.keys.get(l), k = h?.oldValue;
           switch (h?.action) {
             case "add":
             case "update":
-              this.undoManager.stopCapturing(), e[u] = t.get(u), e.requestUpdate(u, t.get(u), k);
+              this.undoManager.stopCapturing(), e[l] = t.get(l), e.requestUpdate(l, t.get(l), k);
               break;
             case "delete":
-              this.undoManager.stopCapturing(), e[u] = void 0, e.requestUpdate(u, e[u], k);
+              this.undoManager.stopCapturing(), e[l] = void 0, e.requestUpdate(l, e[l], k);
               break;
           }
         });
@@ -531,22 +531,22 @@ class Ke extends fo {
         return;
       this._debug("_proxyChildren", s, e);
       const i = e.children;
-      let l = 0;
-      s.changes.delta.forEach((r) => {
-        if (r.retain !== void 0 && (l += r.retain), r.delete)
-          for (let c = l; c < l + r.delete; c++)
-            i[c]?.remove();
-        if (r.insert) {
-          const c = Array.isArray(r.insert) ? r.insert : [r.insert];
-          c.forEach((u, h) => {
-            let k = this.nodeMap.get(u);
-            const f = (g) => {
-              e.moveChild(g, l + h);
+      let r = 0;
+      s.changes.delta.forEach((c) => {
+        if (c.retain !== void 0 && (r += c.retain), c.delete)
+          for (let u = r; u < r + c.delete; u++)
+            i[u]?.remove();
+        if (c.insert) {
+          const u = Array.isArray(c.insert) ? c.insert : [c.insert];
+          u.forEach((l, h) => {
+            let k = this.nodeMap.get(l);
+            const f = (v) => {
+              e.moveChild(v, r + h);
             };
             k ? f(k) : setTimeout(() => {
-              k = this.nodeMap.get(u), k && f(k);
+              k = this.nodeMap.get(l), k && f(k);
             }, 0);
-          }), l += c.length;
+          }), r += u.length;
         }
       });
     };
@@ -603,11 +603,11 @@ const go = (o) => {
   fe(s.renderer);
   const a = V(new En({ internalMode: "front" })), i = V(new Sn({ internalMode: "back", effectMode: "before" }));
   s.root.append(a.value), s.root.append(i.value);
-  const l = V(s);
-  l.value.start();
-  const r = V(), c = V({ left: 0, top: 0, width: 0, height: 0 }), u = V(new Ke()), h = z(() => u.value.root), k = V(), f = V(), g = V();
+  const r = V(s);
+  r.value.start();
+  const c = V(), u = V({ left: 0, top: 0, width: 0, height: 0 }), l = V(new Ke()), h = z(() => l.value.root), k = V(), f = V(), v = V();
   function w(x, O) {
-    switch (f.value = x, g.value = O, x) {
+    switch (f.value = x, v.value = O, x) {
       case "drawing":
         d("crosshair");
         break;
@@ -615,27 +615,27 @@ const go = (o) => {
     e("setState", x);
   }
   function d(x) {
-    l.value.input.setCursor(x);
+    r.value.input.setCursor(x);
   }
   function p() {
     const { x = 0, y: O = 0 } = k.value ?? {};
     return a.value.toGlobal({
-      x: x - c.value.left,
-      y: O - c.value.top
+      x: x - u.value.left,
+      y: O - u.value.top
     }, { x: 0, y: 0 });
   }
   Object.assign(o, {
     fonts: t,
-    renderEngine: l,
+    renderEngine: r,
     timeline: n,
     camera: a,
     drawboardEffect: i,
     root: h,
-    drawboardDom: r,
-    drawboardAabb: c,
-    doc: u,
+    drawboardDom: c,
+    drawboardAabb: u,
+    doc: l,
     state: f,
-    stateContext: g,
+    stateContext: v,
     setState: w,
     setCursor: d,
     drawboardPointer: k,
@@ -667,33 +667,33 @@ const go = (o) => {
     emit: t,
     fonts: n
   } = o, s = V(!1);
-  async function a(r, c) {
-    const u = await n.load(r, c);
-    return console.log("loadFont", u), t("loadFont", u), u;
+  async function a(c, u) {
+    const l = await n.load(c, u);
+    return console.log("loadFont", l), t("loadFont", l), l;
   }
-  async function i(r, c) {
+  async function i(c, u) {
     s.value = !0;
     try {
-      n.fallbackFont = await a(r, c);
+      n.fallbackFont = await a(c, u);
     } finally {
       s.value = !1;
     }
   }
-  async function l() {
+  async function r() {
     for (; s.value; )
-      await new Promise((r) => setTimeout(r, 100));
+      await new Promise((c) => setTimeout(c, 100));
     return await n.waitUntilLoad();
   }
   return Object.assign(o, {
     fonts: n,
     loadFont: a,
     setDefaultFont: i,
-    waitUntilFontLoad: l
+    waitUntilFontLoad: r
   }), () => {
     const {
-      defaultFont: r
+      defaultFont: c
     } = e;
-    r && i(r);
+    c && i(c);
   };
 }, xo = {
   cancel: "Cancel",
@@ -778,7 +778,7 @@ const go = (o) => {
     const {
       locale: a,
       fallback: i,
-      messages: l = {}
+      messages: r = {}
     } = qt({
       locale: "en",
       fallback: "en",
@@ -788,13 +788,13 @@ const go = (o) => {
     }, t);
     return {
       locale: a,
-      localeMessages: l[a],
-      fallbackMessages: l[i]
+      localeMessages: r[a],
+      fallbackMessages: r[i]
     };
   });
   function s(a, i) {
-    const { locale: l, localeMessages: r, fallbackMessages: c } = n.value, u = e.t?.(a, i) ?? r?.[a ?? -1] ?? c?.[a ?? -1] ?? r?.[i ?? -1] ?? c?.[i ?? -1];
-    return u === void 0 && console.warn(`[mce] Not found '${a}' key in '${l}' locale messages.`), u ?? a ?? i;
+    const { locale: r, localeMessages: c, fallbackMessages: u } = n.value, l = e.t?.(a, i) ?? c?.[a ?? -1] ?? u?.[a ?? -1] ?? c?.[i ?? -1] ?? u?.[i ?? -1];
+    return l === void 0 && console.warn(`[mce] Not found '${a}' key in '${r}' locale messages.`), l ?? a ?? i;
   }
   Object.assign(o, {
     t: s
@@ -803,31 +803,31 @@ const go = (o) => {
   const {
     root: e,
     getAncestor: t
-  } = o, n = z(() => e.value.children.filter(r) ?? []), s = V(-1), a = z(() => n.value[s.value]), i = z(() => {
-    const { left: u = 0, top: h = 0, width: k = 0, height: f = 0 } = a.value?.style ?? {};
-    return { left: u, top: h, width: k, height: f };
-  }), l = V([]);
-  function r(u) {
-    return u instanceof G && u.meta?.inEditorIs === "Frame";
+  } = o, n = z(() => e.value.children.filter(c) ?? []), s = V(-1), a = z(() => n.value[s.value]), i = z(() => {
+    const { left: l = 0, top: h = 0, width: k = 0, height: f = 0 } = a.value?.style ?? {};
+    return { left: l, top: h, width: k, height: f };
+  }), r = V([]);
+  function c(l) {
+    return l instanceof G && l.meta?.inEditorIs === "Frame";
   }
-  function c(u) {
-    const h = t(u);
-    return h && r(h) ? h : void 0;
+  function u(l) {
+    const h = t(l);
+    return h && c(h) ? h : void 0;
   }
   return Object.assign(o, {
     frames: n,
-    frameThumbs: l,
+    frameThumbs: r,
     currentFrameIndex: s,
     currentFrame: a,
     currentFrameAabb: i,
-    isFrame: r,
-    getAncestorFrame: c
+    isFrame: c,
+    getAncestorFrame: u
   }), () => {
     const {
-      selection: u
+      selection: l
     } = o;
-    pe(() => u.value.length === 1 && u.value[0], (h) => {
-      h && r(h) && (s.value = n.value.findIndex((k) => k.equal(h)));
+    pe(() => l.value.length === 1 && l.value[0], (h) => {
+      h && c(h) && (s.value = n.value.findIndex((k) => k.equal(h)));
     });
   };
 };
@@ -858,19 +858,19 @@ function Co(o, e) {
   if (!o.rotate && !e.rotate)
     return Re(o, e);
   {
-    const t = ([l, r], [c, u]) => Math.abs(l * c + r * u), n = ({ width: l, height: r, rotate: c = 0 }) => {
-      c = -c % 180;
-      const u = c / 180 * Math.PI, h = [Math.cos(u), -Math.sin(u)], k = [Math.sin(u), Math.cos(u)];
+    const t = ([r, c], [u, l]) => Math.abs(r * u + c * l), n = ({ width: r, height: c, rotate: u = 0 }) => {
+      u = -u % 180;
+      const l = u / 180 * Math.PI, h = [Math.cos(l), -Math.sin(l)], k = [Math.sin(l), Math.cos(l)];
       return {
         axis: [h, k],
-        projectionRadius: (f) => l / 2 * t(f, h) + r / 2 * t(f, k)
+        projectionRadius: (f) => r / 2 * t(f, h) + c / 2 * t(f, k)
       };
     }, s = n(o), a = n(e), i = [
       o.left + o.width / 2 - (e.left + e.width / 2),
       o.top + o.height / 2 - (e.top + e.height / 2)
     ];
-    for (const l of [...s.axis, ...a.axis])
-      if (s.projectionRadius(l) + a.projectionRadius(l) < t(l, i))
+    for (const r of [...s.axis, ...a.axis])
+      if (s.projectionRadius(r) + a.projectionRadius(r) < t(r, i))
         return !1;
     return !0;
   }
@@ -908,15 +908,15 @@ function Eo(o, e = {}) {
       return a(new Error("empty url"));
     const i = new Image();
     t && (i.crossOrigin = "Anonymous");
-    let l;
-    typeof n == "number" && n > 0 && (l = window.setTimeout(() => {
+    let r;
+    typeof n == "number" && n > 0 && (r = window.setTimeout(() => {
       i.onload = null, i.onerror = null, a(new Error(`image load timeout (${n} ms)`));
     }, n)), i.onload = function() {
-      l && clearTimeout(l);
-      const r = this.naturalWidth, c = this.naturalHeight;
-      !r || !c ? a(new Error("failed to read natural size")) : s({ width: r, height: c });
+      r && clearTimeout(r);
+      const c = this.naturalWidth, u = this.naturalHeight;
+      !c || !u ? a(new Error("failed to read natural size")) : s({ width: c, height: u });
     }, i.onerror = function() {
-      l && clearTimeout(l), a(new Error(`failed to load image: ${o}`));
+      r && clearTimeout(r), a(new Error(`failed to load image: ${o}`));
     }, i.src = o;
   });
 }
@@ -958,8 +958,8 @@ async function ut(o) {
   };
 }
 function Mo(o, e) {
-  const t = o.clientX, n = o.clientY, s = e.getBoundingClientRect(), a = s.left, i = s.top, l = s.right, r = s.bottom;
-  return t >= a && t <= l && n >= i && n <= r;
+  const t = o.clientX, n = o.clientY, s = e.getBoundingClientRect(), a = s.left, i = s.top, r = s.right, c = s.bottom;
+  return t >= a && t <= r && n >= i && n <= c;
 }
 function zo(o) {
   if (o && "$el" in o) {
@@ -1032,25 +1032,25 @@ const Ro = (o) => {
   const {
     registerConfig: e
   } = o, t = e("hotkeys", No), n = V(/* @__PURE__ */ new Map());
-  function s(r) {
-    if (Array.isArray(r))
-      r.forEach((c) => s(c));
+  function s(c) {
+    if (Array.isArray(c))
+      c.forEach((u) => s(u));
     else {
       const {
-        when: c,
-        handle: u,
+        when: u,
+        handle: l,
         ...h
-      } = r, {
+      } = c, {
         command: k
       } = h;
       t.value = [
         ...t.value.filter((f) => f.command !== k),
         h
-      ], n.value.set(k, r);
+      ], n.value.set(k, c);
     }
   }
-  function a(r) {
-    t.value = t.value.filter((c) => c.command !== r);
+  function a(c) {
+    t.value = t.value.filter((u) => u.command !== c);
   }
   const i = {
     ArrowUp: "↑",
@@ -1075,12 +1075,12 @@ const Ro = (o) => {
     "™": "2",
     Dead: "N"
   };
-  function l(r) {
-    if (!r)
+  function r(c) {
+    if (!c)
       return "";
-    let c;
-    const u = t.value.find((h) => h.command === r);
-    return u ? c = Array.isArray(u.key) ? u.key : [u.key] : c = [r], c[0].split("+").map((h) => {
+    let u;
+    const l = t.value.find((h) => h.command === c);
+    return l ? u = Array.isArray(l.key) ? l.key : [l.key] : u = [c], u[0].split("+").map((h) => {
       switch (h) {
         case "Control":
           return Fe ? "⌃" : "Ctrl";
@@ -1105,22 +1105,22 @@ const Ro = (o) => {
     hotkeysData: t,
     registerHotkey: s,
     unregisterHotkey: a,
-    getKbd: l
+    getKbd: r
   }), () => {
     const {
-      exec: r
+      exec: c
     } = o;
     Dt(
       xn ? window : void 0,
       "keydown",
-      (c) => {
-        if (Po(c))
+      (u) => {
+        if (Po(u))
           return;
-        const u = [
-          (c.metaKey || c.ctrlKey) && "CmdOrCtrl",
-          c.altKey && "Alt",
-          c.shiftKey && "Shift",
-          !["Meta", "Control", "Alt", "Shift"].includes(c.key) && c.key
+        const l = [
+          (u.metaKey || u.ctrlKey) && "CmdOrCtrl",
+          u.altKey && "Alt",
+          u.shiftKey && "Shift",
+          !["Meta", "Control", "Alt", "Shift"].includes(u.key) && u.key
         ].filter(Boolean).map((h) => h.toLowerCase()).sort().join("+");
         t.value.forEach((h) => {
           const k = h.command, f = n.value.get(k);
@@ -1135,7 +1135,7 @@ const Ro = (o) => {
                   return p;
               }
             }).filter(Boolean).map((p) => p.toLowerCase()).sort().join("+");
-            u === d && (!f?.when || f.when(c)) && (c.preventDefault(), f?.handle ? f.handle(c) : r(k), o.emit(`hotkey:${k}`, c));
+            l === d && (!f?.when || f.when(u)) && (u.preventDefault(), f?.handle ? f.handle(u) : c(k), o.emit(`hotkey:${k}`, u));
           });
         });
       },
@@ -1149,35 +1149,35 @@ const Ro = (o) => {
     renderEngine: n
   } = o, s = V(10), a = z({
     get: () => t.value.currentTime,
-    set: (c) => {
-      const { startTime: u, endTime: h } = t.value;
-      t.value.currentTime = Mn(c, u, h);
+    set: (u) => {
+      const { startTime: l, endTime: h } = t.value;
+      t.value.currentTime = Mn(u, l, h);
     }
-  }), i = z(() => t.value.startTime), l = z(() => t.value.endTime), r = (c) => {
-    const u = { startTime: 0, endTime: 0 };
+  }), i = z(() => t.value.startTime), r = z(() => t.value.endTime), c = (u) => {
+    const l = { startTime: 0, endTime: 0 };
     function h(f) {
-      return f instanceof zn && (u.startTime = Math.min(u.startTime, f.globalStartTime), u.endTime = Math.max(u.endTime, f.globalEndTime)), f instanceof G && (f.background.animatedTexture && (u.endTime = Math.max(u.endTime, f.globalStartTime + f.background.animatedTexture.duration)), f.foreground.animatedTexture && (u.endTime = Math.max(u.endTime, f.globalStartTime + f.foreground.animatedTexture.duration)), f.fill.animatedTexture && (u.endTime = Math.max(u.endTime, f.globalStartTime + f.fill.animatedTexture.duration)), f.outline.animatedTexture && (u.endTime = Math.max(u.endTime, f.globalStartTime + f.outline.animatedTexture.duration))), !1;
+      return f instanceof zn && (l.startTime = Math.min(l.startTime, f.globalStartTime), l.endTime = Math.max(l.endTime, f.globalEndTime)), f instanceof G && (f.background.animatedTexture && (l.endTime = Math.max(l.endTime, f.globalStartTime + f.background.animatedTexture.duration)), f.foreground.animatedTexture && (l.endTime = Math.max(l.endTime, f.globalStartTime + f.foreground.animatedTexture.duration)), f.fill.animatedTexture && (l.endTime = Math.max(l.endTime, f.globalStartTime + f.fill.animatedTexture.duration)), f.outline.animatedTexture && (l.endTime = Math.max(l.endTime, f.globalStartTime + f.outline.animatedTexture.duration))), !1;
     }
-    return (Array.isArray(c) ? c : [c]).forEach((f) => f.findOne(h)), u;
+    return (Array.isArray(u) ? u : [u]).forEach((f) => f.findOne(h)), l;
   };
   return Object.assign(o, {
     msPerPx: s,
     currentTime: a,
     startTime: i,
-    endTime: l,
-    getTimeRange: r
+    endTime: r,
+    getTimeRange: c
   }), () => {
     const {
-      on: c
+      on: u
     } = o;
-    async function u() {
-      await n.value.nextTick(), t.value.endTime = e.value ? r(e.value).endTime : 0;
+    async function l() {
+      await n.value.nextTick(), t.value.endTime = e.value ? c(e.value).endTime : 0;
     }
-    Ut.on("loaded", u), c("setDoc", u);
+    Ut.on("loaded", l), u("setDoc", l);
   };
 }, Lo = (o, e) => {
   Object.assign(o, {
-    upload: async (n) => e.upload ? await e.upload(n) : URL.createObjectURL(n)
+    upload: async (n) => e.customUpload ? await e.customUpload(n) : URL.createObjectURL(n)
   });
 };
 function At(...o) {
@@ -1190,7 +1190,7 @@ const Do = (o) => {
     getAncestorFrame: s
   } = o;
   function a(f) {
-    const g = {
+    const v = {
       minX: Number.MAX_SAFE_INTEGER,
       minY: Number.MAX_SAFE_INTEGER,
       maxX: Number.MIN_SAFE_INTEGER,
@@ -1200,14 +1200,14 @@ const Do = (o) => {
     if (f.children.forEach((d) => {
       if (d instanceof G) {
         const p = d.getAabb().toMinmax();
-        g.minX = Math.min(g.minX, p.minX), g.minY = Math.min(g.minY, p.minY), g.maxX = Math.max(g.maxX, p.maxX), g.maxY = Math.max(g.maxY, p.maxY), w = !0;
+        v.minX = Math.min(v.minX, p.minX), v.minY = Math.min(v.minY, p.minY), v.maxX = Math.max(v.maxX, p.maxX), v.maxY = Math.max(v.maxY, p.maxY), w = !0;
       }
     }), w) {
       const d = {
-        left: g.minX,
-        top: g.minY,
-        width: g.maxX - g.minX,
-        height: g.maxY - g.minY
+        left: v.minX,
+        top: v.minY,
+        width: v.maxX - v.minX,
+        height: v.maxY - v.minY
       }, p = {};
       f.children.forEach((x, O) => {
         x instanceof G && (p[O] = x.getGlobalAabb());
@@ -1220,16 +1220,16 @@ const Do = (o) => {
           }), A = x.pivot, m = x.style, y = [
             C.x - A.x,
             C.y - A.y
-          ], v = new On().scale(x.scale.x, x.scale.y).skew(x.skew.x, x.skew.y).rotate(x.rotation).apply({ x: y[0], y: y[1] });
-          m.left += v.x, m.top += v.y, x.updateGlobalTransform();
+          ], g = new On().scale(x.scale.x, x.scale.y).skew(x.skew.x, x.skew.y).rotate(x.rotation).apply({ x: y[0], y: y[1] });
+          m.left += g.x, m.top += g.y, x.updateGlobalTransform();
         }
       });
     }
   }
-  function i(f, g) {
+  function i(f, v) {
     let w;
     if (Array.isArray(f) && f.length > 0)
-      f.length === 1 ? w = i(f[0]) : w = { ...r(f), rotate: 0 };
+      f.length === 1 ? w = i(f[0]) : w = { ...c(f), rotate: 0 };
     else if (f instanceof G) {
       const d = f.style;
       At([d.left, d.top, d.width, d.height, d.rotate]);
@@ -1243,10 +1243,10 @@ const Do = (o) => {
       };
     } else
       w = { left: 0, top: 0, width: 0, height: 0, rotate: 0 };
-    if (g === "drawboard") {
+    if (v === "drawboard") {
       const d = e.value.zoom, p = e.value.position;
       w.left *= d.x, w.top *= d.y, w.width *= d.x, w.height *= d.y, w.left += p.x, w.top += p.y;
-    } else if (g === "frame") {
+    } else if (v === "frame") {
       const d = Array.isArray(f) ? f[0] : f;
       if (d instanceof G) {
         const p = s(d);
@@ -1255,14 +1255,14 @@ const Do = (o) => {
     }
     return w;
   }
-  function l(f) {
+  function r(f) {
     return i(f, "drawboard");
   }
-  function r(f, g) {
+  function c(f, v) {
     let w;
     if (Array.isArray(f) && f.length > 0)
       if (f.length === 1)
-        w = r(f[0]);
+        w = c(f[0]);
       else {
         const d = {
           minX: Number.MAX_SAFE_INTEGER,
@@ -1272,7 +1272,7 @@ const Do = (o) => {
         };
         f.forEach((p) => {
           if (p instanceof G) {
-            const x = r(p);
+            const x = c(p);
             d.minX = Math.min(d.minX, x.left), d.minY = Math.min(d.minY, x.top), d.maxX = Math.max(d.maxX, x.left + x.width), d.maxY = Math.max(d.maxY, x.top + x.height);
           }
         }), w = {
@@ -1294,9 +1294,9 @@ const Do = (o) => {
       };
     } else
       w = { left: 0, top: 0, width: 0, height: 0 };
-    if (g === "drawboard")
-      w = u(w);
-    else if (g === "frame") {
+    if (v === "drawboard")
+      w = l(w);
+    else if (v === "frame") {
       const d = Array.isArray(f) ? f[0] : f;
       if (d instanceof G) {
         const p = s(d);
@@ -1305,39 +1305,39 @@ const Do = (o) => {
     }
     return w;
   }
-  function c(f) {
-    return r(f, "drawboard");
-  }
   function u(f) {
-    const g = { ...f }, w = e.value.zoom, d = e.value.position;
-    return g.left *= w.x, g.top *= w.y, g.width *= w.x, g.height *= w.y, g.left += d.x, g.top += d.y, g;
+    return c(f, "drawboard");
+  }
+  function l(f) {
+    const v = { ...f }, w = e.value.zoom, d = e.value.position;
+    return v.left *= w.x, v.top *= w.y, v.width *= w.x, v.height *= w.y, v.left += d.x, v.top += d.y, v;
   }
-  const h = z(() => r(t.value.children)), k = z(() => r(n.value));
+  const h = z(() => c(t.value.children)), k = z(() => c(n.value));
   Object.assign(o, {
     obbToFit: a,
     getObb: i,
-    getObbInDrawboard: l,
-    getAabb: r,
-    getAabbInDrawboard: c,
-    aabbToDrawboardAabb: u,
+    getObbInDrawboard: r,
+    getAabb: c,
+    getAabbInDrawboard: u,
+    aabbToDrawboardAabb: l,
     rootAabb: h,
     currentAabb: k
   });
 }, Vo = (o) => {
-  const e = V(/* @__PURE__ */ new Map()), t = V(!1), n = V(0), s = (l) => {
-    Array.isArray(l) ? l.forEach((r) => s(r)) : e.value.set(l.name, l);
-  }, a = (l) => {
-    e.value.delete(l);
-  }, i = (l, r = {}) => {
-    const c = e.value.get(l)?.handle({
-      ...r,
-      onProgress: (u) => {
-        n.value = u, r.onProgress?.(u);
+  const e = V(/* @__PURE__ */ new Map()), t = V(!1), n = V(0), s = (r) => {
+    Array.isArray(r) ? r.forEach((c) => s(c)) : e.value.set(r.name, r);
+  }, a = (r) => {
+    e.value.delete(r);
+  }, i = (r, c = {}) => {
+    const u = e.value.get(r)?.handle({
+      ...c,
+      onProgress: (l) => {
+        n.value = l, c.onProgress?.(l);
       }
     });
-    return c instanceof Promise ? (n.value = 0, t.value = !0, c.finally(() => {
+    return u instanceof Promise ? (n.value = 0, t.value = !0, u.finally(() => {
       t.value = !1;
-    })) : c;
+    })) : u;
   };
   Object.assign(o, {
     exporters: e,
@@ -1362,28 +1362,28 @@ const Do = (o) => {
     saveAs: (i) => new Blob([JSON.stringify(i)], { type: "application/json" }),
     handle: (i) => {
       const {
-        selected: l = !1,
-        scale: r
+        selected: r = !1,
+        scale: c = 1
       } = i;
-      let c = et(), u = [];
-      Array.isArray(l) ? u = l : (l === !0 && (u = n.value), u.length === 0 && s.value && (s.value.meta.id && (c = s.value.meta.id), u = s.value.children));
-      const h = t(u, "frame");
+      let u = et(), l = [];
+      Array.isArray(r) ? l = r : (r === !0 && (l = n.value), l.length === 0 && s.value && (s.value.meta.id && (u = s.value.meta.id), l = s.value.children));
+      const h = t(l, "frame");
       return {
-        id: c,
+        id: u,
         style: {
-          width: h.width,
-          height: h.height,
-          scaleX: r,
-          scaleY: r
+          width: h.width * c,
+          height: h.height * c,
+          transformOrigin: "left top",
+          transform: `scale(${c})`
         },
-        children: u.map((k) => {
+        children: l.map((k) => {
           const f = k.toJSON();
           return h.left && (f.style.left = (f.style.left ?? 0) - h.left), h.top && (f.style.top = (f.style.top ?? 0) - h.top), f.meta ??= {}, f.meta.inPptIs = "Slide", f;
         }),
         meta: {
           inPptIs: "Pptx",
-          inCanvasIs: "Node2D",
-          ...a(u)
+          inCanvasIs: "Element2D",
+          ...a(l)
         }
       };
     }
@@ -1391,45 +1391,45 @@ const Do = (o) => {
 }, Uo = (o) => {
   const {
     state: e
-  } = o, t = V(/* @__PURE__ */ new Map()), n = (l) => {
-    Array.isArray(l) ? l.forEach((r) => n(r)) : t.value.set(l.name, l);
+  } = o, t = V(/* @__PURE__ */ new Map()), n = (r) => {
+    Array.isArray(r) ? r.forEach((c) => n(c)) : t.value.set(r.name, r);
   };
   Object.assign(o, {
     loaders: t,
     registerLoader: n,
-    unregisterLoader: (l) => {
-      t.value.delete(l);
+    unregisterLoader: (r) => {
+      t.value.delete(r);
     },
-    load: async (l) => {
+    load: async (r) => {
       e.value = "loading";
-      let r;
+      let c;
       try {
-        for (const c of t.value.values())
-          if (await c.test(l)) {
-            r = await c.load(l);
+        for (const u of t.value.values())
+          if (await u.test(r)) {
+            c = await u.load(r);
             break;
           }
       } finally {
         e.value = void 0;
       }
-      if (r === void 0)
-        throw new Error(`Failed to load source "${l}"`);
-      return r;
+      if (c === void 0)
+        throw new Error(`Failed to load source "${r}"`);
+      return c;
     },
-    openFileDialog: (l = {}) => {
+    openFileDialog: (r = {}) => {
       const {
-        multiple: r = !1
-      } = l;
-      return new Promise((c) => {
-        const u = [];
-        for (const g of t.value.values())
-          g.accept && u.push(g.accept);
-        const h = u.join(","), { onChange: k, open: f } = Lt({
+        multiple: c = !1
+      } = r;
+      return new Promise((u) => {
+        const l = [];
+        for (const v of t.value.values())
+          v.accept && l.push(v.accept);
+        const h = l.join(","), { onChange: k, open: f } = Lt({
           accept: h,
           reset: !0,
-          multiple: r
+          multiple: c
         });
-        k((g) => c(g ? Array.from(g) : [])), f();
+        k((v) => u(v ? Array.from(v) : [])), f();
       });
     }
   });
@@ -1453,45 +1453,45 @@ const Do = (o) => {
     currentFrameAabb: n,
     config: s
   } = o, a = z(() => s.value.viewMode === "frame" ? n.value : t.value);
-  function i(l, r) {
-    function c() {
+  function i(r, c) {
+    function u() {
       const k = e.value.view;
-      !k.width || !k.height || (l.width = k.width, l.height = k.height, l.dataset.pixelRatio = k.dataset.pixelRatio, l.getContext("2d")?.drawImage(k, 0, 0, k.width, k.height));
+      !k.width || !k.height || (r.width = k.width, r.height = k.height, r.dataset.pixelRatio = k.dataset.pixelRatio, r.getContext("2d")?.drawImage(k, 0, 0, k.width, k.height));
     }
-    function u() {
-      l._onRendered && e.value.off("rendered", l._onRendered), e.value.input.setTarget(e.value.view);
+    function l() {
+      r._onRendered && e.value.off("rendered", r._onRendered), e.value.input.setTarget(e.value.view);
     }
     function h() {
-      u(), l._onRendered = c, e.value.on("rendered", c), r && e.value.input.setTarget(r);
+      l(), r._onRendered = u, e.value.on("rendered", u), c && e.value.input.setTarget(c);
     }
-    return h(), u;
+    return h(), l;
   }
   return Object.assign(o, {
     viewAabb: a,
     bindRenderCanvas: i
   }), () => {
     const {
-      root: l,
-      currentFrame: r,
-      on: c,
-      exec: u
+      root: r,
+      currentFrame: c,
+      on: u,
+      exec: l
     } = o;
     function h() {
       switch (s.value.viewMode) {
         case "frame":
-          l.value.children.forEach((k) => {
-            k instanceof G && (k.visible = k.equal(r.value));
+          r.value.children.forEach((k) => {
+            k instanceof G && (k.visible = k.equal(c.value));
           });
           break;
         case "edgeless":
-          l.value.children.forEach((k) => {
+          r.value.children.forEach((k) => {
             k instanceof G && (k.visible = !0);
           });
           break;
       }
-      u("zoomToFit");
+      l("zoomToFit");
     }
-    pe(() => s.value.viewMode, h), c("setCurrentFrame", h), c("setDoc", h);
+    pe(() => s.value.viewMode, h), u("setCurrentFrame", h), u("setDoc", h);
   };
 }, Yo = (o) => {
   const {
@@ -1499,14 +1499,14 @@ const Do = (o) => {
   } = o;
   function t(s) {
     function a(i) {
-      const l = i.text.base.characters;
-      let r = 0, c;
-      l.forEach((d) => {
+      const r = i.text.base.characters;
+      let c = 0, u;
+      r.forEach((d) => {
         const p = d.lineBox.left + d.lineBox.width;
-        p > r && (c = d, r = p);
+        p > c && (u = d, c = p);
       });
-      const u = {}, h = l.filter((d) => d.lineBox.top === c?.lineBox.top).map((d) => (Object.assign(
-        u,
+      const l = {}, h = r.filter((d) => d.lineBox.top === u?.lineBox.top).map((d) => (Object.assign(
+        l,
         { ...d.parent.style },
         { ...d.parent.parent.style }
       ), d.content)).join(""), { boundingBox: k } = it({
@@ -1517,13 +1517,13 @@ const Do = (o) => {
         content: [
           {
             fragments: [
-              { ...u, content: h }
+              { ...l, content: h }
             ]
           }
         ]
-      }), f = (i.style.fontSize || 12) / 2, g = (i.style.width ?? 0) / (k.width + f);
+      }), f = (i.style.fontSize || 12) / 2, v = (i.style.width ?? 0) / (k.width + f);
       function w(d) {
-        d.fontSize && (d.fontSize = d.fontSize * g), d.letterSpacing && (d.letterSpacing = d.letterSpacing * g);
+        d.fontSize && (d.fontSize = d.fontSize * v), d.letterSpacing && (d.letterSpacing = d.letterSpacing * v);
       }
       w(i.style), i.text?.isValid?.() && Array.isArray(i.text?.content) && i.text.content.forEach((d) => {
         w(d), d.fragments.forEach((p) => {
@@ -1541,25 +1541,25 @@ const Do = (o) => {
       t(s);
       return;
     }
-    function l(r) {
-      if (!r.text?.isValid?.() || typeof r.text?.content != "object")
+    function r(c) {
+      if (!c.text?.isValid?.() || typeof c.text?.content != "object")
         return;
-      const c = r.style.toJSON();
+      const u = c.style.toJSON();
       switch (i) {
         case "autoWidth":
-          c.width = "auto";
+          u.width = "auto";
           break;
         case "autoHeight":
-          c.height = "auto";
+          u.height = "auto";
           break;
       }
-      const { boundingBox: u } = it({
-        style: c,
-        content: r.text.content
+      const { boundingBox: l } = it({
+        style: u,
+        content: c.text.content
       });
-      (r.style.width !== u.width || r.style.height !== u.height) && (r.style.width = u.width, r.style.height = u.height, r.requestRedraw());
+      (c.style.width !== l.width || c.style.height !== l.height) && (c.style.width = l.width, c.style.height = l.height, c.requestRedraw());
     }
-    l(s), s.findOne((r) => (r instanceof G && l(r), !1));
+    r(s), s.findOne((c) => (c instanceof G && r(c), !1));
   }
   return Object.assign(o, {
     textFontSizeToFit: t,
@@ -1590,41 +1590,41 @@ const Do = (o) => {
     emit: s,
     textFontSizeToFit: a,
     textToFit: i,
-    log: l,
-    root: r,
-    isFrame: c,
-    isLock: u,
+    log: r,
+    root: c,
+    isFrame: u,
+    isLock: l,
     getObbInDrawboard: h,
     config: k,
     getAncestorFrame: f,
-    getAabb: g,
+    getAabb: v,
     getGlobalPointer: w,
     selection: d
   } = o;
   function p(y, _ = {}) {
-    l("addElement", y, _);
+    r("addElement", y, _);
     let {
-      frame: v,
+      frame: g,
       positionToFit: b,
       sizeToFit: T,
-      position: M,
+      position: S,
       inPointerPosition: F,
       active: R,
       regenId: E
     } = _;
-    if (!M && F && (M = w()), M && (b = !1), !v)
+    if (!S && F && (S = w()), S && (b = !1), !g)
       if (k.value.viewMode === "frame")
-        v = n.value;
+        g = n.value;
       else {
         const U = d.value[0];
-        U && (c(U) ? v = U : v = f(U));
+        U && (u(U) ? g = U : g = f(U));
       }
     let N = t.value.top;
     const B = t.value.left + t.value.width + k.value.frameGap, j = Array.isArray(y), D = e.value.transact(() => {
       const W = (j ? y : [y]).map((he) => {
-        const Y = e.value.addElement(he, { parentId: v?.id, regenId: E });
-        if (v) {
-          const { width: xe, height: ae } = v.style, ve = xe / 2, ye = ae / 2;
+        const Y = e.value.addElement(he, { parentId: g?.id, regenId: E });
+        if (g) {
+          const { width: xe, height: ae } = g.style, ve = xe / 2, ye = ae / 2;
           if (Y.style.width || (Y.style.width = ve), Y.style.height || (Y.style.height = ye), T) {
             const J = Y.style.width / Y.style.height, me = J > 1 ? ve : ye * J, ue = J > 1 ? ve / J : ye;
             C(
@@ -1641,11 +1641,11 @@ const Do = (o) => {
         } else
           b && (Y.style.top = Math.round(N), Y.style.left = Math.round(B), N += Y.style.height + k.value.frameGap);
         return Y;
-      }), Q = g(W);
-      if (M) {
+      }), Q = v(W);
+      if (S) {
         const he = {
-          x: Math.round(M.x - Q.left),
-          y: Math.round(M.y - Q.top)
+          x: Math.round(S.x - Q.left),
+          y: Math.round(S.y - Q.top)
         };
         W.forEach((Y) => {
           Y.style.left += he.x, Y.style.top += he.y;
@@ -1664,29 +1664,29 @@ const Do = (o) => {
   function L(y) {
     return e.value.nodeMap.get(y);
   }
-  function C(y, _, v, b = {}) {
-    _ = Math.abs(_), v = Math.abs(v);
+  function C(y, _, g, b = {}) {
+    _ = Math.abs(_), g = Math.abs(g);
     function T(F) {
       const R = F.style;
-      R.left = Math.round(R.left * _), R.top = Math.round(R.top * v), R.width = Math.round(R.width * _), R.height = Math.round(R.height * v), F?.requestRedraw?.();
+      R.left = Math.round(R.left * _), R.top = Math.round(R.top * g), R.width = Math.round(R.width * _), R.height = Math.round(R.height * g), F?.requestRedraw?.();
     }
     T(y);
-    function M(F) {
+    function S(F) {
       F.children?.forEach((R) => {
-        M(R);
+        S(R);
       });
     }
-    b.deep && M(y), b.textToFit && i(y), b.textFontSizeToFit && a(y);
+    b.deep && S(y), b.textToFit && i(y), b.textFontSizeToFit && a(y);
   }
   function A(y, _) {
     if (y && (_?.ctrlKey || _?.shiftKey || _?.metaKey)) {
-      let v;
-      d.value.length === 1 ? v = [d.value[0], y] : d.value.findIndex((b) => b.equal(y)) > -1 ? v = d.value.filter((b) => b.equal(y)) : v = [...d.value, y], d.value = v;
+      let g;
+      d.value.length === 1 ? g = [d.value[0], y] : d.value.findIndex((b) => b.equal(y)) > -1 ? g = d.value.filter((b) => b.equal(y)) : g = [...d.value, y], d.value = g;
     } else
       d.value = y ? [y] : [];
   }
   function m(y) {
-    const _ = r.value?.children.flatMap((v) => c(v) ? v.children : [v]).filter((v) => "isVisibleInTree" in v && v.isVisibleInTree() && Co(y, h(v)) && !u(v)) ?? [];
+    const _ = c.value?.children.flatMap((g) => u(g) ? g.children : [g]).filter((g) => "isVisibleInTree" in g && g.isVisibleInTree() && Co(y, h(g)) && !l(g)) ?? [];
     return d.value = _, _;
   }
   Object.assign(o, {
@@ -1706,11 +1706,11 @@ const Do = (o) => {
     currentFrameIndex: s,
     frameThumbs: a,
     emit: i,
-    selection: l,
-    frames: r,
-    config: c
+    selection: r,
+    frames: c,
+    config: u
   } = o;
-  function u(w = {}, d) {
+  function l(w = {}, d) {
     const p = Ht({
       ...w,
       id: void 0,
@@ -1720,9 +1720,9 @@ const Do = (o) => {
         inEditorIs: "Frame"
       }
     });
-    p.style ??= {}, p.style.left = n.value.left + n.value.width + c.value.frameGap, p.style.width ||= n.value.width, p.style.height ||= n.value.height;
-    const x = d ?? (s.value > -1 ? s.value + 1 : r.value.length - 1);
-    e.value.addElement(p, { index: x }), g(x), i("addFrame", x);
+    p.style ??= {}, p.style.left = n.value.left + n.value.width + u.value.frameGap, p.style.width ||= n.value.width, p.style.height ||= n.value.height;
+    const x = d ?? (s.value > -1 ? s.value + 1 : c.value.length - 1);
+    e.value.addElement(p, { index: x }), v(x), i("addFrame", x);
   }
   function h(w = s.value) {
     const d = t.value.children[w];
@@ -1737,25 +1737,25 @@ const Do = (o) => {
       d,
       0,
       a.value.splice(w, 1)[0]
-    ), g(d), i("moveFrame", w, d));
+    ), v(d), i("moveFrame", w, d));
   }
   function f(w = s.value) {
     if (!t.value || t.value.children.length === 1)
       return;
     const d = t.value.children[w]?.id;
-    d && (e.value.deleteElement(d), a.value.splice(w, 1), g(w), i("deleteFrame", w));
+    d && (e.value.deleteElement(d), a.value.splice(w, 1), v(w), i("deleteFrame", w));
   }
-  function g(w = s.value) {
-    w = Math.max(0, Math.min(r.value.length - 1, w));
+  function v(w = s.value) {
+    w = Math.max(0, Math.min(c.value.length - 1, w));
     const d = s.value;
-    s.value = w, c.value.viewMode === "edgeless" ? l.value = [r.value[w]] : l.value = [], i("setCurrentFrame", w, d);
+    s.value = w, u.value.viewMode === "edgeless" ? r.value = [c.value[w]] : r.value = [], i("setCurrentFrame", w, d);
   }
   Object.assign(o, {
-    addFrame: u,
+    addFrame: l,
     duplicateFrame: h,
     moveFrame: k,
     deleteFrame: f,
-    setCurrentFrame: g
+    setCurrentFrame: v
   });
 }, Ko = (o, e) => {
   const {
@@ -1764,16 +1764,16 @@ const Do = (o) => {
     emit: s,
     selection: a,
     state: i,
-    to: l,
-    waitUntilFontLoad: r,
-    config: c,
-    load: u
+    to: r,
+    waitUntilFontLoad: c,
+    config: u,
+    load: l
   } = o, h = () => {
     n.value.root.removeChildren(), n.value.root.children.length = 0, t.value.destroy(), t.value = new Ke(), a.value = [], s("clearDoc");
-  }, k = () => l("json");
+  }, k = () => r("json");
   async function f(d, p) {
     await d.load(async () => {
-      if (c.value.localDb)
+      if (u.value.localDb)
         try {
           await d.loadIndexeddb();
         } catch (x) {
@@ -1782,11 +1782,11 @@ const Do = (o) => {
       p && typeof p != "string" && d.set(p);
     }), d.on("update", Dn((x, O) => s("updateDoc", x, O), 200)), n.value.root.appendChild(d.root);
   }
-  const g = async (d) => {
+  const v = async (d) => {
     const p = new Ke(typeof d == "string" ? d : d.id);
     i.value = "loading";
     try {
-      await r(), h(), await f(p, d), t.value = p, s("setDoc", p);
+      await c(), h(), await f(p, d), t.value = p, s("setDoc", p);
     } finally {
       i.value = void 0;
     }
@@ -1794,9 +1794,9 @@ const Do = (o) => {
   };
   return Object.assign(o, {
     getDoc: k,
-    setDoc: g,
+    setDoc: v,
     loadDoc: async (d) => {
-      const p = await g(await u(d));
+      const p = await v(await l(d));
       return s("loadDoc", p, d), p;
     },
     clearDoc: h
@@ -1804,7 +1804,7 @@ const Do = (o) => {
     const {
       doc: d
     } = e;
-    d ? g(d) : f(t.value);
+    d ? v(d) : f(t.value);
   };
 }, Jo = (o) => {
   const {
@@ -1814,29 +1814,29 @@ const Do = (o) => {
     camera: s,
     frameThumbs: a,
     log: i,
-    fonts: l,
-    registerConfig: r
+    fonts: r,
+    registerConfig: c
   } = o;
-  r("frameScreenshot", !1);
-  async function c() {
+  c("frameScreenshot", !1);
+  async function u() {
     a.value.length = t.value.length;
     for (let f = 0; f < t.value.length; f++)
       await h(f);
   }
-  async function u(f) {
+  async function l(f) {
     await o.waitUntilFontLoad();
-    let g;
-    return f instanceof G ? g = f.toJSON() : g = { ...f }, g.style ??= {}, g.style.top = 0, g.style.left = 0, await gt({
-      width: g.style.width,
-      height: g.style.height,
-      fonts: l,
-      data: g
+    let v;
+    return f instanceof G ? v = f.toJSON() : v = { ...f }, v.style ??= {}, v.style.top = 0, v.style.left = 0, await gt({
+      width: v.style.width,
+      height: v.style.height,
+      fonts: r,
+      data: v
     });
   }
   async function h(f) {
-    const g = t.value[f];
-    if (g) {
-      const w = await u(g);
+    const v = t.value[f];
+    if (v) {
+      const w = await l(v);
       a.value[f] = {
         width: w.width,
         height: w.height,
@@ -1845,8 +1845,8 @@ const Do = (o) => {
     }
   }
   function k(f) {
-    const g = e.value.view, w = n.value, d = e.value.pixelRatio ?? 1;
-    if (!g)
+    const v = e.value.view, w = n.value, d = e.value.pixelRatio ?? 1;
+    if (!v)
       return;
     const p = f.getContext("2d");
     if (!p)
@@ -1856,7 +1856,7 @@ const Do = (o) => {
     f.width = w.width, f.height = w.height;
     const L = w.width * x.x, C = w.height * x.y;
     p.drawImage(
-      g,
+      v,
       (w.left * x.x + O.x) * d,
       (w.top * x.x + O.y) * d,
       L * d,
@@ -1868,19 +1868,19 @@ const Do = (o) => {
     );
   }
   return Object.assign(o, {
-    snapshot: c,
-    captureElementScreenshot: u,
+    snapshot: u,
+    captureElementScreenshot: l,
     captureFrameScreenshot: h,
     renderFrameThumb: k
   }), () => {
     const {
       on: f,
-      config: g
+      config: v
     } = o;
     f("setDoc", (w) => {
-      g.value.frameScreenshot && c();
+      v.value.frameScreenshot && u();
       function d(p) {
-        if (g.value.frameScreenshot) {
+        if (v.value.frameScreenshot) {
           const x = p.getIndex();
           a.value.splice(x, 0, {
             width: 0,
@@ -1891,7 +1891,7 @@ const Do = (o) => {
       }
       w.root.on("appendChild", d);
     }), f("setCurrentFrame", (w, d) => {
-      g.value.frameScreenshot && h(d);
+      v.value.frameScreenshot && h(d);
     });
   };
 }, Zo = [
@@ -2662,26 +2662,26 @@ const ns = (o) => {
     if (!C)
       return;
     const A = {};
-    let m, y, _, v;
-    return C.instanceId ? (A.id = C.instanceId, { top: m, left: y, height: _, width: v } = s(C)) : (A.id = Math.random(), { top: m, left: y, height: _, width: v } = C), A.vt = Ne(m, "vt", A), A.vm = Ne(m + _ / 2, "vm", A), A.vb = Ne(m + _, "vb", A), A.hl = Ne(y, "hl", A), A.hm = Ne(y + v / 2, "hm", A), A.hr = Ne(y + v, "hr", A), A;
+    let m, y, _, g;
+    return C.instanceId ? (A.id = C.instanceId, { top: m, left: y, height: _, width: g } = s(C)) : (A.id = Math.random(), { top: m, left: y, height: _, width: g } = C), A.vt = Ne(m, "vt", A), A.vm = Ne(m + _ / 2, "vm", A), A.vb = Ne(m + _, "vb", A), A.hl = Ne(y, "hl", A), A.hm = Ne(y + g / 2, "hm", A), A.hr = Ne(y + g, "hr", A), A;
   }
-  const l = z(() => 4), r = z(() => new Set(
+  const r = z(() => 4), c = z(() => new Set(
     [
       t.value[0]?.instanceId
     ].filter(Boolean)
-  )), c = z(() => {
+  )), u = z(() => {
     if (t.value[0])
       return i(t.value[0]);
-  }), u = z(() => {
+  }), l = z(() => {
     const C = t.value[0].parent;
     return C instanceof G ? C : void 0;
   }), h = z(() => i(
-    u.value ?? { left: 0, top: 0, width: 0, height: 0 }
+    l.value ?? { left: 0, top: 0, width: 0, height: 0 }
   )), k = z(() => {
     const C = [
-      ...u.value?.children ?? a.value.children
+      ...l.value?.children ?? a.value.children
     ];
-    return e.value && u.value?.equal(e.value) && C.push(u.value), C.filter((A) => !r.value.has(A.instanceId)).map((A) => i(A)).filter(Boolean);
+    return e.value && l.value?.equal(e.value) && C.push(l.value), C.filter((A) => !c.value.has(A.instanceId)).map((A) => i(A)).filter(Boolean);
   }), f = z(() => k.value.reduce(
     (C, A) => ([A.vt, A.vm, A.vb].forEach((m) => C.vLines.add(m)), [A.hl, A.hm, A.hr].forEach((m) => C.hLines.add(m)), C),
     {
@@ -2689,20 +2689,20 @@ const ns = (o) => {
       hLines: new Tt((C, A) => C.pos - A.pos)
     }
   ));
-  function g(C) {
+  function v(C) {
     return C.box?.id === -1;
   }
   function w(C, A) {
     const m = ["vt", "vb"].includes(A.type) ? "vertical" : "horizontal", y = m === "vertical" ? "horizontal" : "vertical", _ = at(A);
-    let v = Et(A.type);
+    let g = Et(A.type);
     if (_) {
-      if (A.pos > h.value[v].pos)
+      if (A.pos > h.value[g].pos)
         return [];
-    } else if (A.pos < h.value[v].pos)
+    } else if (A.pos < h.value[g].pos)
       return [];
     const b = [];
     let T;
-    const M = (F) => {
+    const S = (F) => {
       if (["vm", "hm"].includes(F.type))
         return;
       if (_) {
@@ -2710,73 +2710,73 @@ const ns = (o) => {
           return;
       } else if (A.pos > F.pos)
         return;
-      const R = g(F);
-      v !== F.type && !R || Re(Ge(A), Ge(F), y) && (!R && T && T.box.id !== F.box.id && Re(Ge(T), Ge(F), m) || (T = F, b.push(F), v = Et(v)));
+      const R = v(F);
+      g !== F.type && !R || Re(Ge(A), Ge(F), y) && (!R && T && T.box.id !== F.box.id && Re(Ge(T), Ge(F), m) || (T = F, b.push(F), g = Et(g)));
     };
-    return _ ? C.outorderTraversal(M) : C.inorderTraversal(M), b;
+    return _ ? C.outorderTraversal(S) : C.inorderTraversal(S), b;
   }
   function d(C, A) {
     if (!C.length)
       return [];
     const m = at(A), y = C[0].pos;
     let _ = Math.abs(A.pos - y);
-    const v = [];
+    const g = [];
     C = [A].concat(C);
     for (let b = 0; b < C.length; b += 2) {
-      const T = C[b], M = C[b + 1];
-      if (!M)
+      const T = C[b], S = C[b + 1];
+      if (!S)
         break;
-      const F = Math.abs(M.pos - T.pos);
+      const F = Math.abs(S.pos - T.pos);
       if (b === 2) {
-        if (Math.abs(_ - F) > l.value)
+        if (Math.abs(_ - F) > r.value)
           break;
         _ = F;
       } else if (Math.abs(_ - F) > 1)
         break;
-      v.push({ target: M, source: T, type: "area", distance: F });
+      g.push({ target: S, source: T, type: "area", distance: F });
     }
-    return v.length < 2 ? [] : (v[0]._ctx = {
+    return g.length < 2 ? [] : (g[0]._ctx = {
       type: A.type,
       pos: m ? y + _ : y - _
-    }, v);
+    }, g);
   }
   const p = z(() => {
-    if (!c.value)
+    if (!u.value)
       return [];
-    const { vLines: C, hLines: A } = f.value, m = c.value, y = { vt: [], vb: [], hl: [], hr: [] }, _ = [];
+    const { vLines: C, hLines: A } = f.value, m = u.value, y = { vt: [], vb: [], hl: [], hr: [] }, _ = [];
     return [
       { sources: [m.vt, m.vm, m.vb], targets: C },
       { sources: [m.hl, m.hm, m.hr], targets: A }
-    ].forEach(({ targets: v, sources: b }) => {
+    ].forEach(({ targets: g, sources: b }) => {
       for (const T of b) {
-        const M = v.searchClosest(T, (R, E, N) => !N || Math.abs(R.pos - E.pos) < Math.abs(R.pos - N.pos));
-        if (!M)
+        const S = g.searchClosest(T, (R, E, N) => !N || Math.abs(R.pos - E.pos) < Math.abs(R.pos - N.pos));
+        if (!S)
           continue;
-        const F = Math.abs(M.pos - T.pos);
-        F >= l.value || _.push({ source: T, target: M, type: "alignment", distance: F });
+        const F = Math.abs(S.pos - T.pos);
+        F >= r.value || _.push({ source: T, target: S, type: "alignment", distance: F });
       }
     }), [
       { sources: [m.vt, m.vb], targets: C },
       { sources: [m.hl, m.hr], targets: A }
-    ].forEach(({ sources: v, targets: b }) => {
-      for (const T of v)
+    ].forEach(({ sources: g, targets: b }) => {
+      for (const T of g)
         y[T.type] = w(b, T);
-    }), y.vt = y.vt.sort((v, b) => b.pos - v.pos), y.hl = y.hl.sort((v, b) => b.pos - v.pos), [
+    }), y.vt = y.vt.sort((g, b) => b.pos - g.pos), y.hl = y.hl.sort((g, b) => b.pos - g.pos), [
       { targets: [y.vt, y.vb], sources: [m.vt, m.vb] },
       { targets: [y.hl, y.hr], sources: [m.hl, m.hr] }
-    ].forEach(({ sources: v, targets: b }) => {
-      const T = b[0][0], M = v[0], F = b[1][0], R = v[1];
-      if (T && F && (!g(T) || !g(F))) {
-        const E = Math.abs(M.pos - T.pos), N = Math.abs(R.pos - F.pos);
-        if (Math.abs(E - N) < l.value) {
-          const B = at(M);
+    ].forEach(({ sources: g, targets: b }) => {
+      const T = b[0][0], S = g[0], F = b[1][0], R = g[1];
+      if (T && F && (!v(T) || !v(F))) {
+        const E = Math.abs(S.pos - T.pos), N = Math.abs(R.pos - F.pos);
+        if (Math.abs(E - N) < r.value) {
+          const B = at(S);
           _.push({
             target: T,
-            source: M,
+            source: S,
             type: "area",
             distance: E,
             _ctx: {
-              type: M.type,
+              type: S.type,
               pos: B ? T.pos + (E + N) / 2 : T.pos - (E + N) / 2
             }
           }), _.push({
@@ -2788,8 +2788,8 @@ const ns = (o) => {
           return;
         }
       }
-      for (const E in v) {
-        const N = d(b[E], v[E]);
+      for (const E in g) {
+        const N = d(b[E], g[E]);
         if (N.length) {
           _.push(...N);
           break;
@@ -2801,42 +2801,42 @@ const ns = (o) => {
       return [];
     const C = { left: 0, top: 0 };
     return p.value.map((A) => {
-      const { target: m, source: y, type: _ } = A, v = y.box, b = m.box, T = ["vt", "vm", "vb"].includes(m.type), M = {};
+      const { target: m, source: y, type: _ } = A, g = y.box, b = m.box, T = ["vt", "vm", "vb"].includes(m.type), S = {};
       if (_ === "alignment")
-        if (M.class = "mce-auxiliary__alignment", T) {
-          const F = Math.min(v.hl.pos, b.hl.pos), R = Math.max(v.hr.pos, b.hr.pos);
-          M.style = {
+        if (S.class = "mce-auxiliary__alignment", T) {
+          const F = Math.min(g.hl.pos, b.hl.pos), R = Math.max(g.hr.pos, b.hr.pos);
+          S.style = {
             top: C.top + x(m.pos),
             left: C.left + x(F),
             width: x(R - F)
           };
         } else {
-          const F = Math.min(b.vt.pos, v.vt.pos), R = Math.max(b.vb.pos, v.vb.pos);
-          M.style = {
+          const F = Math.min(b.vt.pos, g.vt.pos), R = Math.max(b.vb.pos, g.vb.pos);
+          S.style = {
             top: C.top + x(F),
             left: C.left + x(m.pos),
             height: x(R - F)
           };
         }
       else if (_ === "area") {
-        M.class = [
+        S.class = [
           "mce-auxiliary__area",
           {
             "mce-auxiliary__area--vertical": T
           }
         ];
-        const F = g(m) || g(y);
+        const F = v(m) || v(y);
         if (T) {
-          const R = Math.min(y.pos, m.pos), E = F ? Math.max(v.hl.pos, b.hl.pos) : Math.min(v.hl.pos, b.hl.pos), N = F ? Math.min(v.hr.pos, b.hr.pos) : Math.max(v.hr.pos, b.hr.pos);
-          M.style = {
+          const R = Math.min(y.pos, m.pos), E = F ? Math.max(g.hl.pos, b.hl.pos) : Math.min(g.hl.pos, b.hl.pos), N = F ? Math.min(g.hr.pos, b.hr.pos) : Math.max(g.hr.pos, b.hr.pos);
+          S.style = {
             top: C.top + x(R),
             left: C.left + x(E),
             width: x(N - E),
             height: x(A.distance)
           };
         } else {
-          const R = Math.min(y.pos, m.pos), E = F ? Math.max(b.vt.pos, v.vt.pos) : Math.min(b.vt.pos, v.vt.pos), N = F ? Math.min(b.vb.pos, v.vb.pos) : Math.max(b.vb.pos, v.vb.pos);
-          M.style = {
+          const R = Math.min(y.pos, m.pos), E = F ? Math.max(b.vt.pos, g.vt.pos) : Math.min(b.vt.pos, g.vt.pos), N = F ? Math.min(b.vb.pos, g.vb.pos) : Math.max(b.vb.pos, g.vb.pos);
+          S.style = {
             top: C.top + x(E),
             left: C.left + x(R),
             height: x(N - E),
@@ -2844,17 +2844,17 @@ const ns = (o) => {
           };
         }
       }
-      return M;
+      return S;
     });
   });
   function L(C = !1) {
     const A = [], m = [];
     for (const y of p.value) {
-      const { target: _, source: v, type: b } = y, T = _.box, M = v.box;
+      const { target: _, source: g, type: b } = y, T = _.box, S = g.box;
       if (b === "alignment") {
-        const F = M.hr.pos - M.hl.pos, R = M.vb.pos - M.vt.pos;
+        const F = S.hr.pos - S.hl.pos, R = S.vb.pos - S.vt.pos;
         let E = T[_.type].pos;
-        ["vt", "vm", "vb"].includes(_.type) ? (C || (v.type === "vm" ? E -= R / 2 : v.type === "vb" && (E -= R)), m.push(E)) : (C || (v.type === "hm" ? E -= F / 2 : v.type === "hr" && (E -= F)), A.push(E));
+        ["vt", "vm", "vb"].includes(_.type) ? (C || (g.type === "vm" ? E -= R / 2 : g.type === "vb" && (E -= R)), m.push(E)) : (C || (g.type === "hm" ? E -= F / 2 : g.type === "hr" && (E -= F)), A.push(E));
       } else if (b === "area") {
         if (!y._ctx)
           continue;
@@ -2878,44 +2878,44 @@ const ns = (o) => {
     exec: t,
     load: n,
     addElement: s
-  } = o, a = V(), i = async (u) => {
-    if (u === void 0 && (u = e.value.length === 1 ? [e.value[0].toJSON()] : e.value.map((h) => h.toJSON())), Ct) {
-      if (Array.isArray(u)) {
+  } = o, a = V(), i = async (l) => {
+    if (l === void 0 && (l = e.value.length === 1 ? [e.value[0].toJSON()] : e.value.map((h) => h.toJSON())), Ct) {
+      if (Array.isArray(l)) {
         const h = "text/html";
         await navigator.clipboard.write([
           new ClipboardItem({
             [h]: new Blob([
-              `<mce-clipboard>${JSON.stringify(u)}</mce-clipboard>`
+              `<mce-clipboard>${JSON.stringify(l)}</mce-clipboard>`
             ], { type: h })
           })
         ]);
-      } else if (typeof u == "string") {
+      } else if (typeof l == "string") {
         const h = "text/plain";
         await navigator.clipboard.write([
-          new ClipboardItem({ [h]: new Blob([u], { type: h }) })
+          new ClipboardItem({ [h]: new Blob([l], { type: h }) })
         ]);
       }
     } else
-      Array.isArray(u) && (a.value = u);
+      Array.isArray(l) && (a.value = l);
   };
-  async function l() {
+  async function r() {
     await i(), t("delete");
   }
-  async function r() {
+  async function c() {
     if (Ct) {
-      const u = await navigator.clipboard.read(), h = [];
-      for (const k of u)
+      const l = await navigator.clipboard.read(), h = [];
+      for (const k of l)
         for (const f of k.types) {
-          const g = await k.getType(f);
-          if (g.type.startsWith("image/"))
-            h.push(await n(g));
+          const v = await k.getType(f);
+          if (v.type.startsWith("image/"))
+            h.push(await n(v));
           else
-            switch (g.type) {
+            switch (v.type) {
               case "text/plain":
-                h.push(ct(await g.text()));
+                h.push(ct(await v.text()));
                 break;
               case "text/html": {
-                const w = new DOMParser().parseFromString(await g.text(), "text/html"), d = w.querySelector("mce-clipboard");
+                const w = new DOMParser().parseFromString(await v.text(), "text/html"), d = w.querySelector("mce-clipboard");
                 if (d) {
                   const x = JSON.parse(d.textContent);
                   Array.isArray(x) && h.push(...x);
@@ -2938,10 +2938,10 @@ const ns = (o) => {
                 break;
               }
               case "application/json":
-                h.push(await n(g));
+                h.push(await n(v));
                 break;
               default:
-                console.warn(`Unhandled clipboard ${g.type}`, await g.text());
+                console.warn(`Unhandled clipboard ${v.type}`, await v.text());
                 break;
             }
         }
@@ -2950,14 +2950,14 @@ const ns = (o) => {
         active: !0,
         regenId: !0
       });
-    } else a.value && Array.isArray(a.value) && s(a.value?.map((u) => Vn(u)) ?? [], {
+    } else a.value && Array.isArray(a.value) && s(a.value?.map((l) => Vn(l)) ?? [], {
       inPointerPosition: !0,
       active: !0,
       regenId: !0
     });
   }
-  async function c() {
-    await i(), await r();
+  async function u() {
+    await i(), await c();
   }
   return Object.assign(o, {
     copiedData: a
@@ -2965,9 +2965,9 @@ const ns = (o) => {
     name: "mce:clipboard",
     commands: [
       { command: "copy", handle: i },
-      { command: "cut", handle: l },
-      { command: "paste", handle: r },
-      { command: "duplicate", handle: c }
+      { command: "cut", handle: r },
+      { command: "paste", handle: c },
+      { command: "duplicate", handle: u }
     ],
     hotkeys: [
       { command: "copy", key: "CmdOrCtrl+c", editable: !1 },
@@ -2986,12 +2986,12 @@ const ns = (o) => {
     name: "mce:copyAs",
     commands: [
       { command: "copyAs", handle: async (a, i = {}) => {
-        let l = await e(a, {
+        let r = await e(a, {
           selected: !0,
           ...i
         });
-        const r = n.value.get(a);
-        r && typeof r.copyAs == "function" && (l = r.copyAs(l)), typeof l != "string" && (l = JSON.stringify(l)), t("copy", l);
+        const c = n.value.get(a);
+        c && typeof c.copyAs == "function" && (r = c.copyAs(r)), typeof r != "string" && (r = JSON.stringify(r)), t("copy", r);
       } }
     ]
   };
@@ -3048,17 +3048,17 @@ const ns = (o) => {
     selection: s,
     addElement: a,
     isFrame: i,
-    doc: l
+    doc: r
   } = o;
-  function r() {
+  function c() {
     const h = s.value;
     if (h.length === 0)
       return;
-    const k = t(h, "frame"), f = h.map((g) => {
-      const w = g.toJSON();
+    const k = t(h, "frame"), f = h.map((v) => {
+      const w = v.toJSON();
       return w.style.left = (w.style.left ?? 0) - k.left, w.style.top = (w.style.top ?? 0) - k.top, w;
     });
-    l.value.transact(() => {
+    r.value.transact(() => {
       a({
         style: { ...k },
         children: f,
@@ -3068,33 +3068,33 @@ const ns = (o) => {
       }, {
         regenId: !0,
         active: !0
-      }), h.forEach((g) => e(g.id));
+      }), h.forEach((v) => e(v.id));
     });
   }
-  function c() {
+  function u() {
     const h = s.value[0];
     if (!h)
       return;
     const k = h.children.map((f) => {
-      const g = n(f), w = f.toJSON();
-      return w.style.left = g.left, w.style.top = g.top, w;
+      const v = n(f), w = f.toJSON();
+      return w.style.left = v.left, w.style.top = v.top, w;
     });
-    l.value.transact(() => {
+    r.value.transact(() => {
       e(h.id), a(k, {
         active: !0,
         regenId: !0
       });
     });
   }
-  function u() {
-    s.value.length === 1 ? i(s.value[0]) && c() : s.value.length > 1 && r();
+  function l() {
+    s.value.length === 1 ? i(s.value[0]) && u() : s.value.length > 1 && c();
   }
   return {
     name: "mce:frame",
     commands: [
-      { command: "frame", handle: r },
-      { command: "unframe", handle: c },
-      { command: "frame/unframe", handle: u }
+      { command: "frame", handle: c },
+      { command: "unframe", handle: u },
+      { command: "frame/unframe", handle: l }
     ],
     hotkeys: [
       { command: "frame/unframe", key: "Alt+CmdOrCtrl+g" }
@@ -3112,17 +3112,17 @@ const ns = (o) => {
         name: "gif",
         saveAs: !0,
         handle: async (a) => {
-          const { Encoder: i } = await import("modern-gif"), { onProgress: l, ...r } = a, c = n("json", r), { startTime: u, endTime: h } = c.meta, k = Math.floor(c.style.width), f = Math.floor(c.style.height), g = new i({ width: k, height: f, workerUrl: s });
+          const { Encoder: i } = await import("modern-gif"), { onProgress: r, ...c } = a, u = n("json", c), { startTime: l, endTime: h } = u.meta, k = Math.floor(u.style.width), f = Math.floor(u.style.height), v = new i({ width: k, height: f, workerUrl: s });
           return await gt({
-            data: c,
+            data: u,
             width: k,
             height: f,
             fonts: t,
-            keyframes: Array.from({ length: ~~((h - u) / 100) }, (w, d) => u + d * 100),
+            keyframes: Array.from({ length: ~~((h - l) / 100) }, (w, d) => l + d * 100),
             onFrame: async (w, { duration: d, progress: p }) => {
-              await g.encode({ data: w, delay: d }), l?.(p);
+              await v.encode({ data: w, delay: d }), r?.(p);
             }
-          }), await g.flush("blob");
+          }), await v.flush("blob");
         }
       }
     ]
@@ -3136,13 +3136,13 @@ const ns = (o) => {
     deleteElement: a,
     doc: i
   } = o;
-  function l() {
-    const u = n.value;
-    if (u.length === 0)
+  function r() {
+    const l = n.value;
+    if (l.length === 0)
       return;
-    const h = t(u, "frame"), k = u.map((f) => {
-      const g = f.toJSON();
-      return g.style.left = (g.style.left ?? 0) - h.left, g.style.top = (g.style.top ?? 0) - h.top, g;
+    const h = t(l, "frame"), k = l.map((f) => {
+      const v = f.toJSON();
+      return v.style.left = (v.style.left ?? 0) - h.left, v.style.top = (v.style.top ?? 0) - h.top, v;
     });
     i.value.transact(() => {
       s({
@@ -3154,33 +3154,33 @@ const ns = (o) => {
       }, {
         active: !0,
         regenId: !0
-      }), u.forEach((f) => a(f.id));
+      }), l.forEach((f) => a(f.id));
     });
   }
-  function r() {
-    const u = n.value[0];
-    if (!u)
+  function c() {
+    const l = n.value[0];
+    if (!l)
       return;
-    const h = u.children.map((k) => {
-      const f = e(k, "frame"), g = k.toJSON();
-      return g.style.left = f.left, g.style.top = f.top, g;
+    const h = l.children.map((k) => {
+      const f = e(k, "frame"), v = k.toJSON();
+      return v.style.left = f.left, v.style.top = f.top, v;
     });
     i.value.transact(() => {
       s(h, {
         active: !0,
         regenId: !0
-      }), a(u.id);
+      }), a(l.id);
     });
   }
-  function c() {
-    n.value.length === 1 ? r() : n.value.length > 1 && l();
+  function u() {
+    n.value.length === 1 ? c() : n.value.length > 1 && r();
   }
   return {
     name: "mce:group",
     commands: [
-      { command: "group", handle: l },
-      { command: "ungroup", handle: r },
-      { command: "group/ungroup", handle: c }
+      { command: "group", handle: r },
+      { command: "ungroup", handle: c },
+      { command: "group/ungroup", handle: u }
     ],
     hotkeys: [
       { command: "group/ungroup", key: "CmdOrCtrl+g" }
@@ -3197,9 +3197,9 @@ const ns = (o) => {
   function i() {
     e.value.undo();
   }
-  return t("setDoc", (l) => {
-    l.on("history", (r) => {
-      n.value = r.canUndo(), s.value = r.canRedo();
+  return t("setDoc", (r) => {
+    r.on("history", (c) => {
+      n.value = c.canUndo(), s.value = c.canRedo();
     });
   }), Object.assign(o, {
     canUndo: n,
@@ -3225,21 +3225,21 @@ const ns = (o) => {
     to: s,
     fonts: a,
     upload: i
-  } = o, l = async (u, h) => n(await ut(u), {
+  } = o, r = async (l, h) => n(await ut(l), {
     sizeToFit: !0,
     positionToFit: !0,
     ...h
-  }), r = () => {
+  }), c = () => {
     e("drawing", {
       content: "image",
-      callback: (u) => {
-        t("import", { position: u });
+      callback: (l) => {
+        t("import", { position: l });
       }
     });
   };
-  function c(u) {
+  function u(l) {
     return {
-      name: u,
+      name: l,
       saveAs: !0,
       handle: async (h) => {
         const k = await s("json", h), f = await gt({
@@ -3248,10 +3248,10 @@ const ns = (o) => {
           width: k.style.width,
           height: k.style.height
         });
-        return await new Promise((g) => {
+        return await new Promise((v) => {
           f.toBlob(
-            (w) => g(w),
-            u === "jpg" ? "image/jpeg" : `image/${u}`
+            (w) => v(w),
+            l === "jpg" ? "image/jpeg" : `image/${l}`
           );
         });
       }
@@ -3260,20 +3260,20 @@ const ns = (o) => {
   return {
     name: "mce:image",
     commands: [
-      { command: "insertImage", handle: l },
-      { command: "drawImage", handle: r }
+      { command: "insertImage", handle: r },
+      { command: "drawImage", handle: c }
     ],
     exporters: [
-      c("jpeg"),
-      c("png"),
-      c("webp")
+      u("jpeg"),
+      u("png"),
+      u("webp")
     ],
     loaders: [
       {
         name: "image",
         accept: nn.join(","),
-        test: (u) => !!(u instanceof Blob && u.type.startsWith("image/") || u instanceof File && lt.test(u.name)),
-        load: async (u) => await ut(await i(u))
+        test: (l) => !!(l instanceof Blob && l.type.startsWith("image/") || l instanceof File && lt.test(l.name)),
+        load: async (l) => await ut(await i(l))
       }
     ]
   };
@@ -3289,10 +3289,10 @@ const ns = (o) => {
       { command: "import", handle: async (a = {}) => {
         const i = await t({ multiple: !0 });
         return n((await Promise.all(
-          i.map(async (l) => {
-            const r = await e(l);
-            let c;
-            return r.meta?.inEditorIs === "Doc" ? c = r.children ?? [] : c = [r], c;
+          i.map(async (r) => {
+            const c = await e(r);
+            let u;
+            return c.meta?.inEditorIs === "Doc" ? u = c.children ?? [] : u = [c], u;
           })
         )).flat(), {
           ...a,
@@ -3309,14 +3309,14 @@ const ns = (o) => {
   const {
     selection: e
   } = o;
-  function t(l, r) {
-    (Array.isArray(l) ? l : [l]).forEach((u) => {
-      const h = u.getParent();
+  function t(r, c) {
+    (Array.isArray(r) ? r : [r]).forEach((l) => {
+      const h = l.getParent();
       if (!h)
         return;
-      let k = u.getIndex();
-      const f = h.children.length - 1, g = 0;
-      switch (r) {
+      let k = l.getIndex();
+      const f = h.children.length - 1, v = 0;
+      switch (c) {
         case "bringForward":
           k = Math.min(h.children.length - 1, k + 1);
           break;
@@ -3324,26 +3324,26 @@ const ns = (o) => {
           k = f;
           break;
         case "sendBackward":
-          k = Math.max(g, k - 1);
+          k = Math.max(v, k - 1);
           break;
         case "sendToBack":
-          k = g;
+          k = v;
           break;
       }
-      h.moveChild(u, k);
+      h.moveChild(l, k);
     });
   }
-  function n(l = e.value) {
-    l && t(l, "bringToFront");
+  function n(r = e.value) {
+    r && t(r, "bringToFront");
   }
-  function s(l = e.value[0]) {
-    l && t(l, "bringForward");
+  function s(r = e.value[0]) {
+    r && t(r, "bringForward");
   }
-  function a(l = e.value[0]) {
-    l && t(l, "sendBackward");
+  function a(r = e.value[0]) {
+    r && t(r, "sendBackward");
   }
-  function i(l = e.value) {
-    l && t(l, "sendToBack");
+  function i(r = e.value) {
+    r && t(r, "sendToBack");
   }
   return {
     name: "mce:layerOrder",
@@ -3368,25 +3368,25 @@ const ns = (o) => {
   } = o;
   function s(a) {
     const i = t.value.length === 1 ? e.value : n(t.value);
-    t.value.forEach((l) => {
+    t.value.forEach((r) => {
       switch (a) {
         case "left":
-          l.style.left = 0;
+          r.style.left = 0;
           break;
         case "horizontal-center":
-          l.style.left = (i.width - l.style.width) / 2;
+          r.style.left = (i.width - r.style.width) / 2;
           break;
         case "right":
-          l.style.left = i.width - l.style.width;
+          r.style.left = i.width - r.style.width;
           break;
         case "top":
-          l.style.top = 0;
+          r.style.top = 0;
           break;
         case "vertical-center":
-          l.style.top = (i.height - l.style.height) / 2;
+          r.style.top = (i.height - r.style.height) / 2;
           break;
         case "bottom":
-          l.style.top = i.height - l.style.height;
+          r.style.top = i.height - r.style.height;
           break;
       }
     });
@@ -3429,153 +3429,158 @@ const ns = (o) => {
       { command: "lock/unlock", key: "Shift+CmdOrCtrl+l" }
     ]
   };
-}, vs = (o) => {
+}, vs = (o, e) => {
   const {
-    canUndo: e,
-    canRedo: t,
-    copiedData: n,
-    selection: s,
-    textSelection: a,
-    config: i,
-    exporters: l
-  } = o, r = z(() => s.value.length > 0), c = z(() => ({
+    canUndo: t,
+    canRedo: n,
+    copiedData: s,
+    selection: a,
+    textSelection: i,
+    config: r,
+    exporters: c
+  } = o, {
+    customContextMenu: u
+  } = e, l = z(() => a.value.length > 0), h = z(() => ({
     key: "export",
-    children: [...l.value.values()].filter((v) => !!v.saveAs).map((v) => ({ key: `saveAs:${v.name}` }))
-  })), u = z(() => ({
+    children: [...c.value.values()].filter((S) => !!S.saveAs).map((S) => ({ key: `saveAs:${S.name}` }))
+  })), k = z(() => ({
     key: "file",
     children: [
       { key: "new" },
       { key: "open" },
       { type: "divider" },
       { key: "import" },
-      c.value
+      h.value
     ]
-  })), h = z(() => [
-    { key: "undo", disabled: !e.value },
-    { key: "redo", disabled: !t.value }
-  ]), k = z(() => [
-    { key: "copy", disabled: !r.value },
+  })), f = z(() => [
+    { key: "undo", disabled: !t.value },
+    { key: "redo", disabled: !n.value }
+  ]), v = z(() => [
+    { key: "copy", disabled: !l.value },
     {
       key: "copyAs",
-      disabled: !r.value,
-      children: [...l.value.values()].filter((v) => !!v.copyAs).map((v) => ({ key: `copyAs:${v.name}` }))
+      disabled: !l.value,
+      children: [...c.value.values()].filter((S) => !!S.copyAs).map((S) => ({ key: `copyAs:${S.name}` }))
     },
-    { key: "cut", disabled: !r.value },
-    { key: "paste", disabled: !n.value },
-    { key: "duplicate", disabled: !r.value },
-    { key: "delete", disabled: !r.value }
-  ]), f = z(() => ({
+    { key: "cut", disabled: !l.value },
+    { key: "paste", disabled: !s.value },
+    { key: "duplicate", disabled: !l.value },
+    { key: "delete", disabled: !l.value }
+  ]), w = z(() => ({
     key: "select",
     children: [
       { key: "selectAll" },
-      { key: "deselectAll", disabled: !r.value },
-      { key: "selectParent", disabled: !r.value },
-      { key: "previousSelection", disabled: !r.value },
-      { key: "nextSelection", disabled: !r.value }
+      { key: "deselectAll", disabled: !l.value },
+      { key: "selectParent", disabled: !l.value },
+      { key: "previousSelection", disabled: !l.value },
+      { key: "nextSelection", disabled: !l.value }
     ]
-  })), g = z(() => ({
+  })), d = z(() => ({
     key: "edit",
     children: [
-      ...h.value,
+      ...f.value,
       { type: "divider" },
-      ...k.value,
+      ...v.value,
       { type: "divider" },
-      ...f.value.children
+      ...w.value.children
     ]
-  })), w = z(() => ({
+  })), p = z(() => ({
     key: "zoom",
     children: [
       { key: "zoomIn" },
       { key: "zoomOut" },
       { key: "zoomTo100" },
       { key: "zoomToFit" },
-      { key: "zoomToSelection", disabled: !r.value }
+      { key: "zoomToSelection", disabled: !l.value }
     ]
-  })), d = z(() => ({
+  })), x = z(() => ({
     key: "view",
     children: [
-      { key: "view:checkerboard", checked: i.value.checkerboard },
-      { key: "view:pixelGrid", checked: i.value.pixelGrid },
-      { key: "view:ruler", checked: i.value.ruler },
-      { key: "view:scrollbar", checked: i.value.scrollbar },
-      { key: "view:timeline", checked: i.value.timeline },
-      { key: "view:statusbar", checked: i.value.statusbar },
-      { key: "view:frameOutline", checked: i.value.frameOutline },
+      { key: "view:checkerboard", checked: r.value.checkerboard },
+      { key: "view:pixelGrid", checked: r.value.pixelGrid },
+      { key: "view:ruler", checked: r.value.ruler },
+      { key: "view:scrollbar", checked: r.value.scrollbar },
+      { key: "view:timeline", checked: r.value.timeline },
+      { key: "view:statusbar", checked: r.value.statusbar },
+      { key: "view:frameOutline", checked: r.value.frameOutline },
       { type: "divider" },
-      ...w.value.children
+      ...p.value.children
     ]
-  })), p = z(() => [
-    { key: "group/ungroup", disabled: !r.value },
-    { key: "frame/unframe", disabled: !r.value }
-  ]), x = z(() => ({
+  })), O = z(() => [
+    { key: "group/ungroup", disabled: !l.value },
+    { key: "frame/unframe", disabled: !l.value }
+  ]), L = z(() => ({
     key: "layerOrder",
     children: [
-      { key: "bringToFront", disabled: !r.value },
-      { key: "bringForward", disabled: !r.value },
-      { key: "sendBackward", disabled: !r.value },
-      { key: "sendToBack", disabled: !r.value }
+      { key: "bringToFront", disabled: !l.value },
+      { key: "bringForward", disabled: !l.value },
+      { key: "sendBackward", disabled: !l.value },
+      { key: "sendToBack", disabled: !l.value }
     ]
-  })), O = z(() => ({
+  })), C = z(() => ({
     key: "flip",
     children: [
-      { key: "flipHorizontal", disabled: !r.value },
-      { key: "flipVertical", disabled: !r.value }
+      { key: "flipHorizontal", disabled: !l.value },
+      { key: "flipVertical", disabled: !l.value }
     ]
-  })), L = z(() => [
-    { key: "hide/show", disabled: !r.value },
-    { key: "lock/unlock", disabled: !r.value }
-  ]), C = z(() => ({
+  })), A = z(() => [
+    { key: "hide/show", disabled: !l.value },
+    { key: "lock/unlock", disabled: !l.value }
+  ]), m = z(() => ({
     key: "object",
     children: [
-      ...p.value,
+      ...O.value,
       { type: "divider" },
-      ...x.value.children,
+      ...L.value.children,
       { type: "divider" },
-      ...O.value.children,
+      ...C.value.children,
       { type: "divider" },
-      ...L.value
+      ...A.value
     ]
-  })), A = z(() => [
-    { key: "alignLeft", disabled: !r.value },
-    { key: "alignHorizontalCenter", disabled: !r.value },
-    { key: "alignRight", disabled: !r.value },
-    { key: "alignTop", disabled: !r.value },
-    { key: "alignVerticalCenter", disabled: !r.value },
-    { key: "alignBottom", disabled: !r.value }
-  ]), m = z(() => ({
+  })), y = z(() => [
+    { key: "alignLeft", disabled: !l.value },
+    { key: "alignHorizontalCenter", disabled: !l.value },
+    { key: "alignRight", disabled: !l.value },
+    { key: "alignTop", disabled: !l.value },
+    { key: "alignVerticalCenter", disabled: !l.value },
+    { key: "alignBottom", disabled: !l.value }
+  ]), _ = z(() => ({
     key: "layerPosition",
     children: [
-      ...A.value
+      ...y.value
     ]
-  })), y = z(() => [
-    u.value,
-    g.value,
+  })), g = z(() => [
+    k.value,
     d.value,
-    C.value,
-    m.value
-  ]), _ = z(() => s.value.length > 0 ? a.value ? [
-    ...k.value
+    x.value,
+    m.value,
+    _.value
+  ]), b = z(() => a.value.length > 0 ? i.value ? [
+    ...v.value
   ] : [
-    ...k.value,
+    ...v.value,
     { type: "divider" },
-    ...p.value,
-    ...L.value,
+    ...O.value,
+    ...A.value,
     { type: "divider" },
-    x.value,
-    m.value,
-    O.value,
+    L.value,
+    _.value,
+    C.value,
     { type: "divider" },
-    c.value
+    h.value
   ] : [
-    k.value[2],
+    v.value[2],
     { type: "divider" },
-    ...y.value,
+    ...g.value,
     { type: "divider" },
-    c.value
-  ]);
+    h.value
+  ]), T = z(() => {
+    const S = b.value;
+    return u?.(S, o) ?? S;
+  });
   return Object.assign(o, {
-    mainMenu: y,
-    contextMenu: _
+    mainMenu: g,
+    contextMenu: T
   }), {
     name: "mce:menu"
   };
@@ -3597,8 +3602,8 @@ const ns = (o) => {
         i = "left";
         break;
     }
-    e.value.forEach((l) => {
-      l.style[i] += a;
+    e.value.forEach((r) => {
+      r.style[i] += a;
     });
   }
   function n() {
@@ -3652,17 +3657,11 @@ const ns = (o) => {
     const [a] = await e();
     if (a) {
       const i = await t(a);
-      i && (i.children ? n(i) : (i.style ??= {}, i.style.width ??= 1920, i.style.height ??= 1080, n({
-        name: "doc",
-        style: { width: 1920, height: 1080 },
+      i && (i.children ? n(i) : n({
         children: [
-          {
-            name: "page",
-            style: { width: 1920, height: 1080 },
-            children: [i]
-          }
+          i
         ]
-      })));
+      }));
     }
   }
   return {
@@ -3685,15 +3684,15 @@ const ns = (o) => {
     commands: [
       { command: "saveAs", handle: async (a, i = {}) => {
         const {
-          filename: l = t.value.meta.name ?? "download",
-          ...r
+          filename: r = t.value.meta.name ?? "download",
+          ...c
         } = i;
-        let c = await e(a, {
+        let u = await e(a, {
           selected: !0,
-          ...r
+          ...c
         });
-        const u = n.value.get(a);
-        u && typeof u.saveAs == "function" && (c = u.saveAs(c)), c instanceof Blob || (c = new Blob([JSON.stringify(c)], { type: "application/json" })), Yt(c, `${l}.${a}`);
+        const l = n.value.get(a);
+        l && typeof l.saveAs == "function" && (u = l.saveAs(u)), u instanceof Blob || (u = new Blob([JSON.stringify(u)], { type: "application/json" })), Yt(u, `${r}.${a}`);
       } }
     ]
   };
@@ -3709,22 +3708,22 @@ const ns = (o) => {
     e.value = [];
   }
   function a() {
-    const r = e.value[0]?.parent;
-    r instanceof G && (e.value = [r]);
+    const c = e.value[0]?.parent;
+    c instanceof G && (e.value = [c]);
   }
   function i() {
-    const r = e.value[0];
-    if (!r)
+    const c = e.value[0];
+    if (!c)
       return;
-    const c = r.previousSibling;
-    c instanceof G && !r.equal(c) && (e.value = [c]);
+    const u = c.previousSibling;
+    u instanceof G && !c.equal(u) && (e.value = [u]);
   }
-  function l() {
-    const r = e.value[0];
-    if (!r)
+  function r() {
+    const c = e.value[0];
+    if (!c)
       return;
-    const c = r.nextSibling;
-    c instanceof G && !r.equal(c) && (e.value = [c]);
+    const u = c.nextSibling;
+    u instanceof G && !c.equal(u) && (e.value = [u]);
   }
   return {
     name: "mce:select",
@@ -3733,7 +3732,7 @@ const ns = (o) => {
       { command: "deselectAll", handle: s },
       { command: "selectParent", handle: a },
       { command: "previousSelection", handle: i },
-      { command: "nextSelection", handle: l }
+      { command: "nextSelection", handle: r }
     ],
     hotkeys: [
       { command: "selectAll", key: "CmdOrCtrl+a" },
@@ -3749,21 +3748,21 @@ const ns = (o) => {
     t,
     exec: n,
     addElement: s
-  } = o, a = (r = t("clickEditText"), c = {}) => {
-    const { style: u, ...h } = c;
-    return s(ct(r, u), {
+  } = o, a = (c = t("clickEditText"), u = {}) => {
+    const { style: l, ...h } = u;
+    return s(ct(c, l), {
       sizeToFit: !0,
       positionToFit: !0,
       ...h
     });
-  }, i = (r, c) => {
+  }, i = (c, u) => {
     e("drawing", {
       content: "text",
-      callback: (u) => {
-        n("insertText", r, { ...c, position: u });
+      callback: (l) => {
+        n("insertText", c, { ...u, position: l });
       }
     });
-  }, l = /\.txt$/i;
+  }, r = /\.txt$/i;
   return {
     name: "mce:text",
     commands: [
@@ -3774,8 +3773,8 @@ const ns = (o) => {
       {
         name: "txt",
         accept: ".txt",
-        test: (r) => !!(r instanceof Blob && r.type.startsWith("text/plain") || r instanceof File && l.test(r.name)),
-        load: async (r) => ct(await r.text())
+        test: (c) => !!(c instanceof Blob && c.type.startsWith("text/plain") || c instanceof File && r.test(c.name)),
+        load: async (c) => ct(await c.text())
       }
     ]
   };
@@ -3870,16 +3869,16 @@ const ns = (o) => {
     config: s,
     currentAabb: a,
     registerConfig: i,
-    selection: l
+    selection: r
   } = o;
   i("zoomToFitOffset", { ...St });
-  function r() {
+  function c() {
     e.value.addZoom(0.25);
   }
-  function c() {
+  function u() {
     e.value.addZoom(-0.25);
   }
-  function u() {
+  function l() {
     e.value.setZoom(1);
   }
   function h(w, d = !1) {
@@ -3890,15 +3889,15 @@ const ns = (o) => {
     s.value.scrollbar && (x.right += 8, x.bottom += 8), s.value.ruler && (x.left += 16, x.top += 16);
     const O = t.value.width - (x.left + x.right), L = t.value.height - (x.top + x.bottom), C = p.left, A = p.top, m = p.width, y = p.height;
     if (m && y) {
-      const _ = O / m, v = L / y;
+      const _ = O / m, g = L / y;
       e.value.setZoom(
-        w === "contain" ? Math.min(_, v) : Math.max(_, v)
+        w === "contain" ? Math.min(_, g) : Math.max(_, g)
       );
       const b = e.value.zoom.x;
-      let T = x.left, M = x.top;
-      _ < v ? M += (L - y * b) / 2 : T += (O - m * b) / 2, e.value.position.set(
+      let T = x.left, S = x.top;
+      _ < g ? S += (L - y * b) / 2 : T += (O - m * b) / 2, e.value.position.set(
         -C * b + T,
-        -A * b + M
+        -A * b + S
       );
     }
   }
@@ -3908,18 +3907,18 @@ const ns = (o) => {
   function f() {
     h("cover");
   }
-  function g() {
+  function v() {
     h("contain", !0);
   }
   return {
     name: "mce:zoom",
     commands: [
-      { command: "zoomIn", handle: r },
-      { command: "zoomOut", handle: c },
-      { command: "zoomTo100", handle: u },
+      { command: "zoomIn", handle: c },
+      { command: "zoomOut", handle: u },
+      { command: "zoomTo100", handle: l },
       { command: "zoomToFit", handle: k },
       { command: "zoomToCover", handle: f },
-      { command: "zoomToSelection", handle: g }
+      { command: "zoomToSelection", handle: v }
     ],
     hotkeys: [
       { command: "zoomIn", key: "CmdOrCtrl+=" },
@@ -3931,7 +3930,7 @@ const ns = (o) => {
     events: {
       setDoc: k,
       setCurrentFrame: () => {
-        l.value.length ? g() : k();
+        r.value.length ? v() : k();
       }
     },
     setup: () => {
@@ -4024,14 +4023,14 @@ class Be extends Xt {
       typeof s == "function" ? a = s(this, t) : a = s, this.plugins.set(a.name, a);
       const {
         commands: i = [],
-        hotkeys: l = [],
-        loaders: r = [],
-        exporters: c = [],
-        events: u
+        hotkeys: r = [],
+        loaders: c = [],
+        exporters: u = [],
+        events: l
       } = a;
-      if (this.registerCommand(i), this.registerHotkey(l), this.registerLoader(r), this.registerExporter(c), u)
-        for (const h in u)
-          this.on(h, u[h]);
+      if (this.registerCommand(i), this.registerHotkey(r), this.registerLoader(c), this.registerExporter(u), l)
+        for (const h in l)
+          this.on(h, l[h]);
     };
     e.forEach((s) => {
       try {
@@ -4146,7 +4145,7 @@ function zs(o) {
           component: Mt,
           icon: s
         };
-      const a = Object.keys(e.sets).find((r) => typeof s == "string" && s.startsWith(`${r}:`)), i = a ? s.slice(a.length + 1) : s;
+      const a = Object.keys(e.sets).find((c) => typeof s == "string" && s.startsWith(`${c}:`)), i = a ? s.slice(a.length + 1) : s;
       return {
         component: e.sets[a ?? e.defaultSet].component,
         icon: i
@@ -4242,7 +4241,7 @@ const Bs = on({
   setup(o) {
     const { auxiliaryLines: e } = de();
     return (t, n) => ($(), P("div", js, [
-      ($(!0), P(se, null, _e(S(e), (s, a) => ($(), P("div", {
+      ($(!0), P(se, null, _e(M(e), (s, a) => ($(), P("div", {
         key: a,
         class: be(s.class),
         style: q({
@@ -4328,51 +4327,51 @@ function Ws(o, e, t, n) {
   let s = { top: 0, left: 0, right: 0, bottom: 0 };
   const a = [{ id: "", layer: { ...s } }];
   for (const i of o) {
-    const l = e.get(i), r = t.get(i), c = n.get(i);
-    if (!l || !r || !c)
+    const r = e.get(i), c = t.get(i), u = n.get(i);
+    if (!r || !c || !u)
       continue;
-    const u = {
+    const l = {
       ...s,
-      [l.value]: Number.parseInt(String(s[l.value]), 10) + (c.value ? Number.parseInt(String(r.value), 10) : 0)
+      [r.value]: Number.parseInt(String(s[r.value]), 10) + (u.value ? Number.parseInt(String(c.value), 10) : 0)
     };
     a.push({
       id: i,
-      layer: u
-    }), s = u;
+      layer: l
+    }), s = l;
   }
   return a;
 }
 function Ks(o) {
-  const e = Se(Je, null), t = z(() => e ? e.rootZIndex.value - 100 : zt), n = V([]), s = Ae(/* @__PURE__ */ new Map()), a = Ae(/* @__PURE__ */ new Map()), i = Ae(/* @__PURE__ */ new Map()), l = Ae(/* @__PURE__ */ new Map()), r = Ae(/* @__PURE__ */ new Map()), { resizeRef: c, contentRect: u } = Xs(), h = z(() => {
+  const e = Se(Je, null), t = z(() => e ? e.rootZIndex.value - 100 : zt), n = V([]), s = Ae(/* @__PURE__ */ new Map()), a = Ae(/* @__PURE__ */ new Map()), i = Ae(/* @__PURE__ */ new Map()), r = Ae(/* @__PURE__ */ new Map()), c = Ae(/* @__PURE__ */ new Map()), { resizeRef: u, contentRect: l } = Xs(), h = z(() => {
     const A = /* @__PURE__ */ new Map(), m = o.overlaps ?? [];
     for (const y of m.filter((_) => _.includes(":"))) {
-      const [_, v] = y.split(":");
-      if (!n.value.includes(_) || !n.value.includes(v))
+      const [_, g] = y.split(":");
+      if (!n.value.includes(_) || !n.value.includes(g))
         continue;
-      const b = s.get(_), T = s.get(v), M = a.get(_), F = a.get(v);
-      !b || !T || !M || !F || (A.set(v, { position: b.value, amount: Number.parseInt(String(M.value), 10) }), A.set(_, { position: T.value, amount: -Number.parseInt(String(F.value), 10) }));
+      const b = s.get(_), T = s.get(g), S = a.get(_), F = a.get(g);
+      !b || !T || !S || !F || (A.set(g, { position: b.value, amount: Number.parseInt(String(S.value), 10) }), A.set(_, { position: T.value, amount: -Number.parseInt(String(F.value), 10) }));
     }
     return A;
   }), k = z(() => {
     const A = [...new Set([...i.values()].map((y) => y.value))].sort((y, _) => y - _), m = [];
     for (const y of A) {
-      const _ = n.value.filter((v) => i.get(v)?.value === y);
+      const _ = n.value.filter((g) => i.get(g)?.value === y);
       m.push(..._);
     }
-    return Ws(m, s, a, l);
-  }), f = z(() => !Array.from(r.values()).some((A) => A.value)), g = z(() => k.value[k.value.length - 1].layer), w = Te(() => ({
-    "--mce-layout-left": qe(g.value.left),
-    "--mce-layout-right": qe(g.value.right),
-    "--mce-layout-top": qe(g.value.top),
-    "--mce-layout-bottom": qe(g.value.bottom),
+    return Ws(m, s, a, r);
+  }), f = z(() => !Array.from(c.values()).some((A) => A.value)), v = z(() => k.value[k.value.length - 1].layer), w = Te(() => ({
+    "--mce-layout-left": qe(v.value.left),
+    "--mce-layout-right": qe(v.value.right),
+    "--mce-layout-top": qe(v.value.top),
+    "--mce-layout-bottom": qe(v.value.bottom),
     ...f.value ? void 0 : { transition: "none" }
   })), d = z(() => k.value.slice(1).map(({ id: A }, m) => {
-    const { layer: y } = k.value[m], _ = a.get(A), v = s.get(A);
+    const { layer: y } = k.value[m], _ = a.get(A), g = s.get(A);
     return {
       id: A,
       ...y,
       size: Number(_.value),
-      position: v.value
+      position: g.value
     };
   })), p = (A) => d.value.find((m) => m.id === A), x = Qe(), O = Ze(!1);
   He(() => {
@@ -4382,17 +4381,17 @@ function Ks(o) {
       id: m,
       order: y,
       position: _,
-      layoutSize: v,
+      layoutSize: g,
       elementSize: b,
       active: T,
-      disableTransitions: M,
+      disableTransitions: S,
       absolute: F
     }) => {
-      i.set(m, y), s.set(m, _), a.set(m, v), l.set(m, T), M && r.set(m, M);
+      i.set(m, y), s.set(m, _), a.set(m, g), r.set(m, T), S && c.set(m, S);
       const E = je(ln, x?.vnode).indexOf(A);
       E > -1 ? n.value.splice(E, 0, m) : n.value.push(m);
       const N = z(() => d.value.findIndex((U) => U.id === m)), B = z(() => t.value + k.value.length * 2 - N.value * 2), j = z(() => {
-        const U = _.value === "left" || _.value === "right", W = _.value === "right", Q = _.value === "bottom", he = b.value ?? v.value, Y = he === 0 ? "%" : "px", xe = {
+        const U = _.value === "left" || _.value === "right", W = _.value === "right", Q = _.value === "bottom", he = b.value ?? g.value, Y = he === 0 ? "%" : "px", xe = {
           [_.value]: 0,
           zIndex: B.value,
           transform: `translate${U ? "X" : "Y"}(${(T.value ? 0 : -(he === 0 ? 100 : he)) * (W || Q ? -1 : 1)}${Y})`,
@@ -4419,13 +4418,13 @@ function Ks(o) {
       return { layoutItemStyles: j, layoutItemScrimStyles: D, zIndex: B };
     },
     unregister: (A) => {
-      i.delete(A), s.delete(A), a.delete(A), l.delete(A), r.delete(A), n.value = n.value.filter((m) => m !== A);
+      i.delete(A), s.delete(A), a.delete(A), r.delete(A), c.delete(A), n.value = n.value.filter((m) => m !== A);
     },
-    mainRect: g,
+    mainRect: v,
     mainStyles: w,
     getLayoutItem: p,
     items: d,
-    layoutRect: u,
+    layoutRect: l,
     rootZIndex: t
   });
   const L = Te(() => [
@@ -4441,8 +4440,8 @@ function Ks(o) {
     layoutStyles: C,
     getLayoutItem: p,
     items: d,
-    layoutRect: u,
-    layoutRef: c
+    layoutRect: l,
+    layoutRef: u
   };
 }
 const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
@@ -4453,8 +4452,8 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
   },
   setup(o) {
     const e = o, t = Rt(), { iconData: n } = zs(z(() => e.icon)), s = !!(t.onClick || t.onClickOnce);
-    return (a, i) => ($(), oe(Bt(S(n).component), {
-      icon: S(n).icon,
+    return (a, i) => ($(), oe(Bt(M(n).component), {
+      icon: M(n).icon,
       tag: e.tag,
       class: be(["mce-icon", {
         "mce-icon--disabled": e.disabled
@@ -4479,7 +4478,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     const n = o, s = t, a = Rs(), i = z({
       get: () => n.modelValue,
       set: (p) => s("update:modelValue", p)
-    }), l = V(), r = {
+    }), r = V(), c = {
       getBoundingClientRect() {
         const { x: p = 0, y: x = 0 } = n.target;
         return {
@@ -4493,7 +4492,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           height: 0
         };
       }
-    }, c = z(() => typeof n.target == "object" && !(n.target instanceof Element) && "x" in n.target && "y" in n.target ? r : n.target ?? l.value), u = ce("contentElTpl"), h = z(() => n.attach ?? a.attach?.value ?? "body"), { floatingStyles: k, update: f } = Un(c, u, {
+    }, u = z(() => typeof n.target == "object" && !(n.target instanceof Element) && "x" in n.target && "y" in n.target ? c : n.target ?? r.value), l = ce("contentElTpl"), h = z(() => n.attach ?? a.attach?.value ?? "body"), { floatingStyles: k, update: f } = Un(u, l, {
       placement: z(() => n.location),
       whileElementsMounted: qn,
       middleware: [
@@ -4501,16 +4500,16 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         Hn(),
         Yn({ padding: 20 })
       ]
-    }), g = z(() => ({
+    }), v = z(() => ({
       ...k.value,
       zIndex: 2e3 + a.index.value
     })), w = z(() => ({
-      ref: (p) => l.value = p
+      ref: (p) => r.value = p
     }));
     let d = [];
     return He(() => {
       const { trigger: p, stop: x } = kn(
-        u,
+        l,
         (O) => {
           i.value && (i.value = !1, s("click:outside", O));
         },
@@ -4521,9 +4520,9 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         Dt("pointerdown", p, { passive: !0, capture: !0 })
       ];
     }), we(() => d.forEach((p) => p())), e({
-      activatorEl: l,
-      target: c,
-      contentEl: u,
+      activatorEl: r,
+      target: u,
+      contentEl: l,
       updateLocation: f
     }), (p, x) => ($(), P(se, null, [
       ee(p.$slots, "activator", {
@@ -4538,7 +4537,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           key: 0,
           ref: "contentElTpl",
           class: "mce-overlay",
-          style: g.value
+          style: v.value
         }, p.$attrs), [
           ee(p.$slots, "default")
         ], 16)) : Z("", !0)
@@ -4565,12 +4564,12 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
   }),
   emits: /* @__PURE__ */ $e(["click:item"], ["update:modelValue"]),
   setup(o, { expose: e, emit: t }) {
-    const n = o, s = t, a = ke(o, "modelValue"), i = V(-1), l = ce("overlayTpl"), r = ce("menuItemTplRefs"), c = z(() => !!n.items?.some((x) => "checked" in x)), u = Pt(), h = Se(Ot, null), k = Ze(/* @__PURE__ */ new Set());
+    const n = o, s = t, a = ke(o, "modelValue"), i = V(-1), r = ce("overlayTpl"), c = ce("menuItemTplRefs"), u = z(() => !!n.items?.some((x) => "checked" in x)), l = Pt(), h = Se(Ot, null), k = Ze(/* @__PURE__ */ new Set());
     Le(Ot, {
-      register: () => k.value.add(u),
-      unregister: () => k.value.delete(u),
+      register: () => k.value.add(l),
+      unregister: () => k.value.delete(l),
       closeParents(x) {
-        !k.value.size && !n.persistent && (x == null || l.value?.contentEl && !Mo(x, l.value.contentEl)) && (a.value = !1, h?.closeParents());
+        !k.value.size && !n.persistent && (x == null || r.value?.contentEl && !Mo(x, r.value.contentEl)) && (a.value = !1, h?.closeParents());
       }
     }), we(() => {
       h?.unregister();
@@ -4579,11 +4578,11 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       const x = {};
       return n.openOnHover && (x.onMouseenter = () => a.value = !0), x;
     });
-    function g(x) {
+    function v(x) {
       h?.closeParents(x);
     }
     function w() {
-      l.value?.updateLocation();
+      r.value?.updateLocation();
     }
     function d(x, O, L) {
       x.children?.length ? i.value = O : (a.value = !1, h?.closeParents(L), x.handle?.(L), s("click:item", x, L));
@@ -4605,7 +4604,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         target: n.target,
         attach: n.attach,
         class: "mce-menu",
-        "onClick:outside": g
+        "onClick:outside": v
       }, {
         activator: ne((C) => [
           ee(x.$slots, "activator", Oe(C, {
@@ -4638,7 +4637,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
                   ]]),
                   onClick: (m) => d(C, A, m)
                 }, [
-                  c.value ? ($(), P("div", Qs, [
+                  u.value ? ($(), P("div", Qs, [
                     C.checked ? ($(), oe(Ee, {
                       key: 0,
                       icon: "$check"
@@ -4661,7 +4660,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
               items: o.items?.[i.value]?.children,
               location: "right",
               "model-value": i.value > -1,
-              target: r.value?.[i.value],
+              target: c.value?.[i.value],
               attach: !1,
               offset: 16,
               "onUpdate:modelValue": O[0] || (O[0] = (C) => i.value = -1),
@@ -4702,14 +4701,14 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       contextMenu: s,
       exec: a,
       getKbd: i,
-      t: l,
-      hotkeys: r
-    } = de(), c = ke(o, "modelValue"), u = ke(o, "position"), h = ce("menuTplRef");
+      t: r,
+      hotkeys: c
+    } = de(), u = ke(o, "modelValue"), l = ke(o, "position"), h = ce("menuTplRef");
     function k() {
       h.value?.updateLocation();
     }
     function f(w) {
-      w.preventDefault(), c.value = !0, u.value = {
+      w.preventDefault(), u.value = !0, l.value = {
         x: w.clientX,
         y: w.clientY
       }, k();
@@ -4719,28 +4718,28 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     }, { immediate: !0 }), we(() => {
       t.value?.removeEventListener("contextmenu", f);
     });
-    function g(w) {
+    function v(w) {
       a(w.key);
     }
     return e({
       updateLocation: k
     }), (w, d) => ($(), oe(na, {
       ref: "menuTplRef",
-      modelValue: c.value,
-      "onUpdate:modelValue": d[0] || (d[0] = (p) => c.value = p),
+      modelValue: u.value,
+      "onUpdate:modelValue": d[0] || (d[0] = (p) => u.value = p),
       offset: 10,
       class: "mce-context-menu",
-      target: u.value,
+      target: l.value,
       location: "bottom-start",
-      items: S(s),
+      items: M(s),
       style: q({
-        maxHeight: `${S(n).height * 0.8}px`
+        maxHeight: `${M(n).height * 0.8}px`
       }),
-      "onClick:item": g
+      "onClick:item": v
     }, {
       title: ne(({ item: p }) => [
-        I("span", oa, K(S(l)(p.key)), 1),
-        S(r).has(p.key) ? ($(), P("span", sa, K(S(i)(p.key)), 1)) : Z("", !0)
+        I("span", oa, K(M(r)(p.key)), 1),
+        M(c).has(p.key) ? ($(), P("span", sa, K(M(i)(p.key)), 1)) : Z("", !0)
       ]),
       _: 1
     }, 8, ["modelValue", "target", "items", "style"]));
@@ -4758,24 +4757,24 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       camera: s,
       drawboardAabb: a,
       setCursor: i
-    } = de(), { x: l, y: r } = Cn();
-    function c(u) {
+    } = de(), { x: r, y: c } = Cn();
+    function u(l) {
       const h = s.value.toGlobal({
-        x: u.clientX - a.value.left,
-        y: u.clientY - a.value.top
+        x: l.clientX - a.value.left,
+        y: l.clientY - a.value.top
       });
       t.value?.callback?.(h), i(void 0);
     }
-    return (u, h) => S(e) === "drawing" ? ($(), P("div", {
+    return (l, h) => M(e) === "drawing" ? ($(), P("div", {
       key: 0,
       class: "mce-drawing",
       style: q({
-        left: `${S(l)}px`,
-        top: `${S(r)}px`
+        left: `${M(r)}px`,
+        top: `${M(c)}px`
       }),
-      onMousedown: c
+      onMousedown: u
     }, [
-      S(t)?.content ? ($(), P("div", ia, K(S(n)(S(t).content)), 1)) : Z("", !0)
+      M(t)?.content ? ($(), P("div", ia, K(M(n)(M(t).content)), 1)) : Z("", !0)
     ], 36)) : Z("", !0);
   }
 }), la = /* @__PURE__ */ X({
@@ -4792,24 +4791,24 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       selection: s,
       isFrame: a
     } = de(), i = ce("overlayTpl");
-    function l() {
+    function r() {
       i.value?.updateLocation();
     }
-    return pe(() => n(s.value), l, {
+    return pe(() => n(s.value), r, {
       deep: !0
     }), e({
-      updateLocation: l
-    }), (r, c) => ($(), oe(tt, {
+      updateLocation: r
+    }), (c, u) => ($(), oe(tt, {
       ref: "overlayTpl",
       class: "mce-floatbar",
       location: t.location,
-      offset: S(s)[0] && S(a)(S(s)[0]) ? 32 : 8,
+      offset: M(s)[0] && M(a)(M(s)[0]) ? 32 : 8,
       target: t.target,
       attach: !1,
       "model-value": !0
     }, {
       default: ne(() => [
-        S(s).length > 0 ? ee(r.$slots, "default", { key: 0 }) : Z("", !0)
+        M(s).length > 0 ? ee(c.$slots, "default", { key: 0 }) : Z("", !0)
       ]),
       _: 3
     }, 8, ["location", "offset", "target"]));
@@ -4827,39 +4826,39 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       hoverElement: s,
       selection: a,
       state: i,
-      config: l,
-      exec: r
-    } = de(), c = V(!1);
-    async function u() {
-      c.value = !0, await Xe(), t.value && (t.value.focus(), t.value.select());
+      config: r,
+      exec: c
+    } = de(), u = V(!1);
+    async function l() {
+      u.value = !0, await Xe(), t.value && (t.value.focus(), t.value.select());
     }
     async function h(k) {
-      c.value || (a.value = [e.value], await Xe(), r("startTransform", k));
+      u.value || (a.value = [e.value], await Xe(), c("startTransform", k));
     }
     return (k, f) => ze(($(), P("div", {
-      style: q(S(Me)(S(n)(e.value))),
+      style: q(M(Me)(M(n)(e.value))),
       class: be(["mce-frame", [
-        S(l).frameOutline && "mce-frame--outline"
+        M(r).frameOutline && "mce-frame--outline"
       ]])
     }, [
       ze(I("div", {
         class: "mce-frame__name",
-        onDblclick: u,
+        onDblclick: l,
         onPointerdown: h,
-        onPointerenter: f[2] || (f[2] = (g) => !S(i) && (s.value = e.value)),
-        onPointerleave: f[3] || (f[3] = (g) => !S(i) && (s.value = void 0))
+        onPointerenter: f[2] || (f[2] = (v) => !M(i) && (s.value = e.value)),
+        onPointerleave: f[3] || (f[3] = (v) => !M(i) && (s.value = void 0))
       }, [
         I("div", null, K(e.value.name), 1),
         ze(I("input", {
           ref: "inputTpl",
-          "onUpdate:modelValue": f[0] || (f[0] = (g) => e.value.name = g),
-          onBlur: f[1] || (f[1] = (g) => c.value = !1)
+          "onUpdate:modelValue": f[0] || (f[0] = (v) => e.value.name = v),
+          onBlur: f[1] || (f[1] = (v) => u.value = !1)
         }, null, 544), [
-          [Ue, c.value],
+          [Ue, u.value],
           [bn, e.value.name]
         ])
       ], 544), [
-        [Ue, S(l).viewMode === "edgeless"]
+        [Ue, M(r).viewMode === "edgeless"]
       ])
     ], 6)), [
       [Ue, e.value.visible]
@@ -4871,7 +4870,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     const {
       frames: e
     } = de();
-    return (t, n) => ($(!0), P(se, null, _e(S(e), (s, a) => ($(), oe(ca, {
+    return (t, n) => ($(!0), P(se, null, _e(M(e), (s, a) => ($(), oe(ca, {
       key: a,
       "model-value": s
     }, null, 8, ["model-value"]))), 128));
@@ -4889,13 +4888,13 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       t.value,
       n(e.value)
     ));
-    return (l, r) => i.value ? ($(), P("div", {
+    return (r, c) => i.value ? ($(), P("div", {
       key: 0,
       class: "mce-back-selected-aera",
-      onClick: r[0] || (r[0] = We((c) => S(s)("zoomToSelection"), ["prevent"]))
+      onClick: c[0] || (c[0] = We((u) => M(s)("zoomToSelection"), ["prevent"]))
     }, [
       H(Ee, { icon: "$gps" }),
-      I("span", null, K(S(a)("goBackSelectedArea")), 1)
+      I("span", null, K(M(a)("goBackSelectedArea")), 1)
     ])) : Z("", !0);
   }
 }), ma = ["data-name"], ha = /* @__PURE__ */ X({
@@ -4906,13 +4905,13 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       hoverElement: t,
       getObbInDrawboard: n
     } = de(), s = z(() => n(t.value));
-    return (a, i) => S(t) && !S(t).equal(S(e)[0]) ? ($(), P("div", {
+    return (a, i) => M(t) && !M(t).equal(M(e)[0]) ? ($(), P("div", {
       key: 0,
       class: "mce-hover",
-      "data-name": S(t).name,
+      "data-name": M(t).name,
       style: q({
         borderColor: "currentcolor",
-        ...S(Me)(s.value)
+        ...M(Me)(s.value)
       })
     }, null, 12, ma)) : Z("", !0);
   }
@@ -4935,10 +4934,10 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     }
     return e({
       updateLocation: a
-    }), (i, l) => ($(), oe(tt, {
+    }), (i, r) => ($(), oe(tt, {
       ref: "overlayTpl",
       modelValue: n.value,
-      "onUpdate:modelValue": l[0] || (l[0] = (r) => n.value = r),
+      "onUpdate:modelValue": r[0] || (r[0] = (c) => n.value = c),
       class: "mce-tooltip",
       location: t.location,
       offset: t.offset,
@@ -4952,8 +4951,8 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     }, [
       i.$slots.activator ? {
         name: "activator",
-        fn: ne((r) => [
-          ee(i.$slots, "activator", ft(pt(r)))
+        fn: ne((c) => [
+          ee(i.$slots, "activator", ft(pt(c)))
         ]),
         key: "0"
       } : void 0
@@ -4976,28 +4975,28 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     labelFormat: { type: Function, default: (o) => String(o) }
   },
   setup(o, { expose: e }) {
-    const t = o, n = Rt(), s = z(() => t.pixelRatio), a = V(), i = V({ x: 0, y: 0 }), l = ce("canvasTpl"), r = "OffscreenCanvas" in window ? new OffscreenCanvas(t.size, t.size) : document.createElement("canvas"), c = r.getContext("2d"), u = V(), h = Ae({
+    const t = o, n = Rt(), s = z(() => t.pixelRatio), a = V(), i = V({ x: 0, y: 0 }), r = ce("canvasTpl"), c = "OffscreenCanvas" in window ? new OffscreenCanvas(t.size, t.size) : document.createElement("canvas"), u = c.getContext("2d"), l = V(), h = Ae({
       text: "#000",
       border: "#000"
     });
     function k() {
       if (!t.selected?.width || !t.selected?.height)
         return;
-      c.fillStyle = "#6165FD20";
+      u.fillStyle = "#6165FD20";
       const E = t.vertical ? t.selected.top : t.selected.left, N = t.vertical ? t.selected.height : t.selected.width;
-      c.fillRect(E, 0, N, t.size);
+      u.fillRect(E, 0, N, t.size);
     }
     function f(E, N, B, j) {
-      c.lineWidth = B, c.strokeStyle = j, c.beginPath(), c.moveTo(E[0], E[1]), c.lineTo(N[0], N[1]), c.stroke();
+      u.lineWidth = B, u.strokeStyle = j, u.beginPath(), u.moveTo(E[0], E[1]), u.lineTo(N[0], N[1]), u.stroke();
     }
-    function g(E, N, B = 1) {
+    function v(E, N, B = 1) {
       const j = E, D = t.size, U = E, W = t.size - N * B;
-      c.moveTo(j, D), c.lineTo(U, W);
+      u.moveTo(j, D), u.lineTo(U, W);
     }
     function w(E, N, B, j) {
-      c.font = `${j}px sans-serif`, c.textAlign = "left", c.textBaseline = "bottom";
+      u.font = `${j}px sans-serif`, u.textAlign = "left", u.textBaseline = "bottom";
       const D = N, U = t.size - B;
-      c.save(), t.vertical && (c.translate(0, t.size), c.scale(1, -1)), c.fillText(E, D, U), c.restore();
+      u.save(), t.vertical && (u.translate(0, t.size), u.scale(1, -1)), u.fillText(E, D, U), u.restore();
     }
     const d = z(() => {
       const E = Math.max(t.unit / t.zoom, 1), N = t.unitFractions, B = Math.floor(Math.log10(E)), j = E / 10 ** B;
@@ -5012,7 +5011,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       const E = -t.position / t.zoom;
       return Math.floor(E / d.value) * d.value;
     }), x = z(() => {
-      const N = ((t.vertical ? u.value?.height : u.value?.width) ?? 0) / t.zoom;
+      const N = ((t.vertical ? l.value?.height : l.value?.width) ?? 0) / t.zoom;
       return p.value + Math.ceil(N / d.value) * d.value;
     });
     function O(E) {
@@ -5022,73 +5021,73 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       return Math.round((E - t.position) / t.zoom);
     }
     function C() {
-      const E = l.value;
-      if (!E || !r.width || !r.height)
+      const E = r.value;
+      if (!E || !c.width || !c.height)
         return;
-      c.clearRect(0, 0, r.width, r.height), c.save(), c.scale(s.value, s.value), t.vertical && (c.scale(1, -1), c.translate(0, 0), c.rotate(-Math.PI / 2)), k(), t.axis && f(
+      u.clearRect(0, 0, c.width, c.height), u.save(), u.scale(s.value, s.value), t.vertical && (u.scale(1, -1), u.translate(0, 0), u.rotate(-Math.PI / 2)), k(), t.axis && f(
         [0, t.size],
         [t.vertical ? E.height : E.width, t.size],
         2,
         h.border
       );
       const N = (D, U) => {
-        g(D, 10), w(U, D + 2, 4, 8);
-      }, B = (D) => g(D, 4);
+        v(D, 10), w(U, D + 2, 4, 8);
+      }, B = (D) => v(D, 4);
       let j = d.value / 10;
-      j = (j > 0 ? 1 : -1) * Math.max(1, Math.abs(j)), c.beginPath(), c.lineWidth = 1, c.strokeStyle = h.text, c.fillStyle = h.text;
+      j = (j > 0 ? 1 : -1) * Math.max(1, Math.abs(j)), u.beginPath(), u.lineWidth = 1, u.strokeStyle = h.text, u.fillStyle = h.text;
       for (let D = p.value; D <= x.value; D += j)
         D % d.value === 0 && N(O(D), t.labelFormat(D));
-      c.stroke(), c.beginPath(), c.lineWidth = 1, c.strokeStyle = h.border;
+      u.stroke(), u.beginPath(), u.lineWidth = 1, u.strokeStyle = h.border;
       for (let D = p.value; D <= x.value; D += j)
         D % d.value === 0 || D % j === 0 && B(O(D));
-      if (c.stroke(), c.restore(), "transferToImageBitmap" in r)
-        E.getContext("bitmaprenderer").transferFromImageBitmap(r.transferToImageBitmap());
+      if (u.stroke(), u.restore(), "transferToImageBitmap" in c)
+        E.getContext("bitmaprenderer").transferFromImageBitmap(c.transferToImageBitmap());
       else {
         const D = E.getContext("2d");
-        D && (D.clearRect(0, 0, E.width, E.height), D.drawImage(r, 0, 0));
+        D && (D.clearRect(0, 0, E.width, E.height), D.drawImage(c, 0, 0));
       }
     }
     pe(
-      [l, () => t.zoom, () => t.position, () => t.selected],
+      [r, () => t.zoom, () => t.position, () => t.selected],
       () => {
         C();
       },
       { immediate: !0, deep: !0 }
     );
     const A = jt(() => {
-      if (!l.value)
+      if (!r.value)
         return;
-      const E = l.value.parentElement.getBoundingClientRect();
-      r.width = l.value.width = E.width * s.value, r.height = l.value.height = E.height * s.value, l.value.style.width = `${E.width}px`, l.value.style.height = `${E.height}px`, u.value = E, C();
+      const E = r.value.parentElement.getBoundingClientRect();
+      c.width = r.value.width = E.width * s.value, c.height = r.value.height = E.height * s.value, r.value.style.width = `${E.width}px`, r.value.style.height = `${E.height}px`, l.value = E, C();
     }, 50);
     He(() => {
       A();
-      const E = l.value;
+      const E = r.value;
       if (E) {
         const N = window.getComputedStyle(E);
         h.text = N.getPropertyValue("--text-color").trim(), h.border = N.getPropertyValue("--border-color").trim();
       }
     }), we(() => {
-      r.width = 0, r.height = 0;
+      c.width = 0, c.height = 0;
     });
     const m = V([]), y = V(), _ = z(() => {
       const E = [...m.value];
       return typeof y.value == "number" && E.unshift(y.value), E;
     });
-    function v(E) {
+    function g(E) {
       return L(
-        t.vertical ? E.clientY - u.value.top : E.clientX - u.value.left
+        t.vertical ? E.clientY - l.value.top : E.clientX - l.value.left
       );
     }
     function b(E) {
-      const N = v(E);
+      const N = g(E);
       t.refline && m.value.push(N);
     }
     function T(E, N = !1) {
-      const B = v(E);
+      const B = g(E);
       t.refline && N && (y.value = B), a.value = t.labelFormat(B), i.value = { x: E.clientX, y: E.clientY };
     }
-    function M() {
+    function S() {
       y.value = void 0, a.value = void 0;
     }
     function F(E) {
@@ -5097,24 +5096,24 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     function R(E, N) {
       E.stopPropagation(), E.preventDefault();
       const B = (D) => {
-        m.value[N] = v(D);
+        m.value[N] = g(D);
       }, j = () => {
         window.removeEventListener("mousemove", B), window.removeEventListener("mouseup", j);
       };
       window.addEventListener("mousemove", B), window.addEventListener("mouseup", j);
     }
     return e({
-      box: u
+      box: l
     }), (E, N) => ($(), P(se, null, [
       ze(($(), P("div", Oe({
         class: ["mce-ruler", [
           `mce-ruler--${t.vertical ? "vertical" : "horizontal"}`
         ]],
         style: { "--size": `${t.size}px` }
-      }, S(n), {
+      }, M(n), {
         onMousedown: b,
         onMousemove: N[0] || (N[0] = (B) => T(B, !0)),
-        onMouseleave: M
+        onMouseleave: S
       }), [
         I("canvas", {
           ref: "canvasTpl",
@@ -5123,7 +5122,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           height: t.size
         }, null, 8, pa)
       ], 16)), [
-        [S(Gt), S(A)]
+        [M(Gt), M(A)]
       ]),
       ($(!0), P(se, null, _e(_.value, (B, j) => ($(), P("div", {
         key: j,
@@ -5141,7 +5140,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         onDblclick: (D) => F(j),
         onMousedown: (D) => R(D, j),
         onMousemove: () => a.value = `${B}`,
-        onMouseleave: M
+        onMouseleave: S
       }, null, 46, va))), 128)),
       H(fa, {
         "model-value": !!a.value,
@@ -5167,16 +5166,16 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     return (a, i) => ($(), P("div", ga, [
       H(mt, {
         refline: "",
-        zoom: S(e).zoom.x,
-        position: S(e).position.x,
+        zoom: M(e).zoom.x,
+        position: M(e).position.x,
         selected: s.value,
         axis: "",
         size: 16
       }, null, 8, ["zoom", "position", "selected"]),
       H(mt, {
         refline: "",
-        zoom: S(e).zoom.y,
-        position: S(e).position.y,
+        zoom: M(e).zoom.y,
+        position: M(e).position.y,
         selected: s.value,
         axis: "",
         vertical: "",
@@ -5203,13 +5202,13 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
   }),
   emits: /* @__PURE__ */ $e(["scroll"], ["update:modelValue"]),
   setup(o, { emit: e }) {
-    const t = o, n = e, s = (b, T, M) => b * (1 - M) + T * M, a = (b, T) => s(b / 2, 1 - b / 2, T), i = ke(o, "modelValue"), l = ce("trackTplRef"), r = ce("thumbTplRef"), c = V(0), u = z(
-      () => t.infinite ? t.length * t.zoom + c.value + Math.abs(i.value) * 2 : i.value > 0 ? i.value + t.length * t.zoom : Math.max(c.value - i.value, t.length * t.zoom)
+    const t = o, n = e, s = (b, T, S) => b * (1 - S) + T * S, a = (b, T) => s(b / 2, 1 - b / 2, T), i = ke(o, "modelValue"), r = ce("trackTplRef"), c = ce("thumbTplRef"), u = V(0), l = z(
+      () => t.infinite ? t.length * t.zoom + u.value + Math.abs(i.value) * 2 : i.value > 0 ? i.value + t.length * t.zoom : Math.max(u.value - i.value, t.length * t.zoom)
     ), h = z(
       () => t.infinite ? Math.abs(i.value) - i.value : i.value > 0 ? 0 : -i.value
-    ), k = z(() => Math.max(0.05, Math.min(1, c.value / u.value))), f = z(() => h.value / (u.value - c.value) * (1 - k.value)), g = jt(() => {
-      const b = l.value?.getBoundingClientRect() ?? { width: 0, height: 0 };
-      c.value = t.vertical ? b.height : b.width;
+    ), k = z(() => Math.max(0.05, Math.min(1, u.value / l.value))), f = z(() => h.value / (l.value - u.value) * (1 - k.value)), v = jt(() => {
+      const b = r.value?.getBoundingClientRect() ?? { width: 0, height: 0 };
+      u.value = t.vertical ? b.height : b.width;
     }, 50), w = z(() => t.infinite ? a(k.value, f.value) : f.value), d = z(() => 1 - w.value - k.value), p = z(() => t.vertical ? `${w.value * 100}%` : "0%"), x = z(() => t.vertical ? `${d.value * 100}%` : "50%"), O = z(() => t.vertical ? "0%" : `${w.value * 100}%`), L = z(() => t.vertical ? "50%" : `${d.value * 100}%`);
     function C(b) {
       n("scroll", b - i.value), i.value = b;
@@ -5221,28 +5220,28 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     let y;
     function _(b) {
       const T = b.target;
-      let M = 0;
-      if (r.value?.contains(T)) {
-        v();
+      let S = 0;
+      if (c.value?.contains(T)) {
+        g();
         return;
-      } else if (l.value?.contains(T)) {
-        const F = (t.vertical ? b.offsetY : b.offsetX) / c.value;
+      } else if (r.value?.contains(T)) {
+        const F = (t.vertical ? b.offsetY : b.offsetX) / u.value;
         if (F < w.value)
-          M = 1;
+          S = 1;
         else if (F > 1 - d.value)
-          M = -1;
+          S = -1;
         else {
-          v();
+          g();
           return;
         }
       }
-      A(xa * M), y = setTimeout(() => _(b), $t);
+      A(xa * S), y = setTimeout(() => _(b), $t);
     }
-    function v() {
+    function g() {
       clearTimeout(y);
     }
     return we(() => {
-      v();
+      g();
     }), (b, T) => ze(($(), P("div", {
       class: be(["mce-scrollbar", {
         "mce-scrollbar--vertical": t.vertical,
@@ -5271,8 +5270,8 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         ])
       ], 512)
     ], 6)), [
-      [S(Gt), S(g)],
-      [S(Gn), [_, { delay: $t, onMouseUp: v }]]
+      [M(Gt), M(v)],
+      [M(Gn), [_, { delay: $t, onMouseUp: g }]]
     ]);
   }
 }), _a = /* @__PURE__ */ X({
@@ -5290,17 +5289,17 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     } = de();
     return (s, a) => ($(), P(se, null, [
       H(It, Oe(e, {
-        modelValue: S(t).position.y,
-        "onUpdate:modelValue": a[0] || (a[0] = (i) => S(t).position.y = i),
-        zoom: S(t).zoom.y,
+        modelValue: M(t).position.y,
+        "onUpdate:modelValue": a[0] || (a[0] = (i) => M(t).position.y = i),
+        zoom: M(t).zoom.y,
         vertical: "",
-        length: S(n).height
+        length: M(n).height
       }), null, 16, ["modelValue", "zoom", "length"]),
       H(It, Oe(e, {
-        modelValue: S(t).position.x,
-        "onUpdate:modelValue": a[1] || (a[1] = (i) => S(t).position.x = i),
-        zoom: S(t).zoom.x,
-        length: S(n).width
+        modelValue: M(t).position.x,
+        "onUpdate:modelValue": a[1] || (a[1] = (i) => M(t).position.x = i),
+        zoom: M(t).zoom.x,
+        length: M(n).width
       }), null, 16, ["modelValue", "zoom", "length"])
     ], 64));
   }
@@ -5356,22 +5355,22 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       "resize-top-right": (m) => x("resizeBevel", 180 + m),
       "resize-bottom-right": (m) => x("resizeBevel", 90 + m),
       "resize-bottom-left": (m) => x("resizeBevel", 180 + m)
-    }, i = ke(n, "modelValue"), l = z({
+    }, i = ke(n, "modelValue"), r = z({
       get: () => {
-        let { left: m = 0, top: y = 0, width: _ = 0, height: v = 0, rotate: b = 0 } = i.value ?? {};
-        return Number.isNaN(Number(_)) && (_ = 0), Number.isNaN(Number(v)) && (v = 0), { left: m, top: y, width: _, height: v, rotate: b };
+        let { left: m = 0, top: y = 0, width: _ = 0, height: g = 0, rotate: b = 0 } = i.value ?? {};
+        return Number.isNaN(Number(_)) && (_ = 0), Number.isNaN(Number(g)) && (g = 0), { left: m, top: y, width: _, height: g, rotate: b };
       },
       set: (m) => i.value = m
-    }), r = V(!1), c = V(), u = z(() => {
-      const { width: m = 0, height: y = 0 } = l.value, _ = 6, v = _ / 2, b = 8, T = b / 2, M = 12;
+    }), c = V(!1), u = V(), l = z(() => {
+      const { width: m = 0, height: y = 0 } = r.value, _ = 6, g = _ / 2, b = 8, T = b / 2, S = 12;
       let F;
       return n.handleStrategy === "point" ? F = [
         // move
-        { type: "move", x: -v, y: T, width: _, height: y - b },
-        { type: "move", x: T, y: -v, width: m - b, height: _ },
-        { type: "move", x: m - v, y: T, width: _, height: y - b },
-        { type: "move", x: T, y: y - v, width: m - b, height: _ },
-        { type: "move", x: -v, y: T, width: _, height: y - b },
+        { type: "move", x: -g, y: T, width: _, height: y - b },
+        { type: "move", x: T, y: -g, width: m - b, height: _ },
+        { type: "move", x: m - g, y: T, width: _, height: y - b },
+        { type: "move", x: T, y: y - g, width: m - b, height: _ },
+        { type: "move", x: -g, y: T, width: _, height: y - b },
         // resize
         { type: "resize-top", x: m / 2 - T, y: -T, width: b, height: b },
         { type: "resize-right", x: m - T, y: y / 2 - T, width: b, height: b },
@@ -5382,57 +5381,57 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         { type: "resize-bottom-left", x: -T, y: y - T, width: b, height: b },
         { type: "resize-bottom-right", x: m - T, y: y - T, width: b, height: b },
         // rotate
-        { type: "rotate-top-left", x: -M - T, y: -M - T, width: M, height: M },
-        { type: "rotate-top-right", x: m + T, y: -M - T, width: M, height: M },
-        { type: "rotate-bottom-left", x: -M - T, y: y + T, width: M, height: M },
-        { type: "rotate-bottom-right", x: m + T, y: y + T, width: M, height: M }
+        { type: "rotate-top-left", x: -S - T, y: -S - T, width: S, height: S },
+        { type: "rotate-top-right", x: m + T, y: -S - T, width: S, height: S },
+        { type: "rotate-bottom-left", x: -S - T, y: y + T, width: S, height: S },
+        { type: "rotate-bottom-right", x: m + T, y: y + T, width: S, height: S }
       ] : F = [
         // resize
-        { type: "resize-top", x: T, y: -v, width: m - b, height: _ },
-        { type: "resize-right", x: m - v, y: T, width: _, height: y - b },
-        { type: "resize-bottom", x: T, y: y - v, width: m - b, height: _ },
-        { type: "resize-left", x: -v, y: T, width: _, height: y - b },
+        { type: "resize-top", x: T, y: -g, width: m - b, height: _ },
+        { type: "resize-right", x: m - g, y: T, width: _, height: y - b },
+        { type: "resize-bottom", x: T, y: y - g, width: m - b, height: _ },
+        { type: "resize-left", x: -g, y: T, width: _, height: y - b },
         { type: "resize-top-left", x: -T, y: -T, width: b, height: b },
         { type: "resize-top-right", x: m - T, y: -T, width: b, height: b },
         { type: "resize-bottom-left", x: -T, y: y - T, width: b, height: b },
         { type: "resize-bottom-right", x: m - T, y: y - T, width: b, height: b },
         // rotate
-        { type: "rotate-top-left", x: -M - T, y: -M - T, width: M, height: M },
-        { type: "rotate-top-right", x: m + T, y: -M - T, width: M, height: M },
-        { type: "rotate-bottom-left", x: -M - T, y: y + T, width: M, height: M },
-        { type: "rotate-bottom-right", x: m + T, y: y + T, width: M, height: M }
+        { type: "rotate-top-left", x: -S - T, y: -S - T, width: S, height: S },
+        { type: "rotate-top-right", x: m + T, y: -S - T, width: S, height: S },
+        { type: "rotate-bottom-left", x: -S - T, y: y + T, width: S, height: S },
+        { type: "rotate-bottom-right", x: m + T, y: y + T, width: S, height: S }
       ], F.filter((R) => n.handles.includes(R.type)).map((R) => (R.width = Math.max(R.width, 0), R.height = Math.max(R.height, 0), R));
     }), h = V(), k = z(() => {
-      const { width: m = 0, height: y = 0 } = l.value;
+      const { width: m = 0, height: y = 0 } = r.value;
       return {
         width: n.initialSize && !m ? void 0 : `${m}px`,
         height: n.initialSize && !y ? void 0 : `${y}px`
       };
     }), f = z(() => {
-      const { left: m = 0, top: y = 0, rotate: _ = 0 } = l.value, v = _ * Math.PI / 180, b = Math.cos(v), T = Math.sin(v);
+      const { left: m = 0, top: y = 0, rotate: _ = 0 } = r.value, g = _ * Math.PI / 180, b = Math.cos(g), T = Math.sin(g);
       return {
         ...k.value,
         transform: `matrix(${b}, ${T}, ${-T}, ${b}, ${m}, ${y})`
       };
-    }), g = z(() => n.visibility === "auto" && r.value), w = z(() => n.tipFormat?.("size"));
+    }), v = z(() => n.visibility === "auto" && c.value), w = z(() => n.tipFormat?.("size"));
     function d(m, y) {
       if (m && m.button !== void 0 && m.button !== 0)
         return !1;
       m?.preventDefault(), m?.stopPropagation();
-      const { left: _ = 0, top: v = 0, width: b = 0, height: T = 0, rotate: M = 0 } = l.value, F = b && T ? b / T : 0, R = y === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : u.value[y];
-      c.value = R.type;
+      const { left: _ = 0, top: g = 0, width: b = 0, height: T = 0, rotate: S = 0 } = r.value, F = b && T ? b / T : 0, R = y === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : l.value[y];
+      u.value = R.type;
       const E = R.type === "move", N = R.type.startsWith("rotate"), B = R.type === "resize-left" || R.type === "resize-right", j = R.type.split("-").length === 2, D = {
         x: _ + b / 2,
-        y: v + T / 2
+        y: g + T / 2
       }, U = {
         x: _,
-        y: v
+        y: g
       };
       E || (U.x += R.x + R.width / 2, U.y += R.y + R.height / 2);
       const W = L(
         U,
         D,
-        E ? 0 : M
+        E ? 0 : S
       ), Q = {
         x: D.x * 2 - W.x,
         y: D.y * 2 - W.y
@@ -5442,9 +5441,9 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       ) / (Math.PI / 180);
       let Y = m ? { x: m.clientX, y: m.clientY } : void 0;
       function xe() {
-        r.value = !0, s("start", l.value);
+        c.value = !0, s("start", r.value);
       }
-      !n.threshold && !r.value && xe();
+      !n.threshold && !c.value && xe();
       function ae(ye) {
         const J = {};
         Y || (Y = { x: ye.clientX, y: ye.clientY });
@@ -5452,7 +5451,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           x: ye.clientX - Y.x,
           y: ye.clientY - Y.y
         };
-        if (!r.value) {
+        if (!c.value) {
           if (Math.abs(me.x) < n.threshold && Math.abs(me.y) < n.threshold)
             return;
           xe();
@@ -5470,12 +5469,12 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
             ue.y - D.y,
             ue.x - D.x
           ) / (Math.PI / 180);
-          J.rotate = (M + ge - he + 360) % 360;
+          J.rotate = (S + ge - he + 360) % 360;
         } else if (j) {
-          const ge = L(ue, W, -M), re = L(
+          const ge = L(ue, W, -S), re = L(
             B ? { x: ge.x, y: W.y } : { x: W.x, y: ge.y },
             W,
-            M
+            S
           ), De = {
             x: re.x - (re.x - Q.x) / 2,
             y: re.y + (Q.y - re.y) / 2
@@ -5493,18 +5492,18 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
             me.x > me.y ? (ue.x = W.x + me.x, ue.y = W.y + nt * me.x / F) : (ue.x = W.x + nt * me.y * F, ue.y = W.y + me.y);
           }
           const ge = C(ue, Q), re = [
-            L(ue, ge, -M),
-            L(Q, ge, -M)
+            L(ue, ge, -S),
+            L(Q, ge, -S)
           ], [De, Ce] = re[0].x > re[1].x ? [re[1].x, re[0].x] : [re[0].x, re[1].x], [xt, un] = re[0].y > re[1].y ? [re[1].y, re[0].y] : [re[0].y, re[1].y];
           J.width = Ce - De, J.height = un - xt, J.left = De, J.top = xt;
         }
         if ("width" in J && J.width <= 0 || "height" in J && J.height <= 0)
           return;
-        const te = { ...l.value }, ie = { ...l.value, ...J };
-        l.value = ie, s("move", ie, te);
+        const te = { ...r.value }, ie = { ...r.value, ...J };
+        r.value = ie, s("move", ie, te);
       }
       function ve() {
-        window.removeEventListener("pointermove", ae), window.removeEventListener("pointerup", ve, !0), r.value = !1, s("end", l.value);
+        window.removeEventListener("pointermove", ae), window.removeEventListener("pointerup", ve, !0), c.value = !1, s("end", r.value);
       }
       return window.addEventListener("pointermove", ae), window.addEventListener("pointerup", ve, !0), !0;
     }
@@ -5518,10 +5517,10 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       return `<svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><filter id="shadow" color-interpolation-filters="sRGB"><feDropShadow dx="1" dy="1" stdDeviation="1.2" flood-opacity=".5"/></filter></defs><g fill="none" transform="rotate(${y} 16 16)" filter="url(%23shadow)">${_}</g></svg>`.replace(/"/g, "'");
     }
     function O(m) {
-      return m === "move" ? "move" : `url("data:image/svg+xml,${a[m](l.value.rotate ?? 0)}") 16 16, pointer`;
+      return m === "move" ? "move" : `url("data:image/svg+xml,${a[m](r.value.rotate ?? 0)}") 16 16, pointer`;
     }
     function L(m, y, _) {
-      const v = _ * Math.PI / 180, b = Math.cos(v), T = Math.sin(v);
+      const g = _ * Math.PI / 180, b = Math.cos(g), T = Math.sin(g);
       return {
         x: (m.x - y.x) * b - (m.y - y.y) * T + y.x,
         y: (m.x - y.x) * T + (m.y - y.y) * b + y.y
@@ -5540,16 +5539,16 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       const y = Qe()?.proxy?.$el;
       if (y && n.initialSize) {
         await Xe();
-        let _, v;
+        let _, g;
         const b = getComputedStyle(y);
-        if (b.width.endsWith("px") && b.height.endsWith("px") ? (_ = Number(b.width.replace("px", "")), v = Number(b.height.replace("px", ""))) : { width: _, height: v } = y.getBoundingClientRect(), _ && v)
-          l.value = { ...l.value, width: _, height: v };
+        if (b.width.endsWith("px") && b.height.endsWith("px") ? (_ = Number(b.width.replace("px", "")), g = Number(b.height.replace("px", ""))) : { width: _, height: g } = y.getBoundingClientRect(), _ && g)
+          r.value = { ...r.value, width: _, height: g };
         else if ("ResizeObserver" in globalThis) {
-          const T = new ResizeObserver(([M]) => {
-            M.contentRect.width && M.contentRect.height && (l.value = {
-              ...l.value,
-              width: M.contentRect.width,
-              height: M.contentRect.height
+          const T = new ResizeObserver(([S]) => {
+            S.contentRect.width && S.contentRect.height && (r.value = {
+              ...r.value,
+              width: S.contentRect.width,
+              height: S.contentRect.height
             }, T.unobserve(y));
           });
           T.observe(y);
@@ -5557,15 +5556,15 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       }
     }), e({
       start: d,
-      activeHandle: c,
-      transforming: r
+      activeHandle: u,
+      transforming: c
     }), (m, y) => ($(), oe(Bt(o.tag), {
       class: "mce-transformable",
       style: q(f.value)
     }, {
       default: ne(() => [
         ee(m.$slots, "default", {
-          value: S(i),
+          value: M(i),
           moveProps: {
             onPointerdown: d,
             style: { cursor: "move" }
@@ -5580,12 +5579,12 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
             class: "mce-transformable__box",
             style: q({
               strokeDasharray: n.borderStyle === "dashed" ? "4px" : void 0,
-              opacity: o.visibility === "none" ? 0 : g.value ? ".4" : void 0,
-              strokeWidth: g.value ? "0.5px" : void 0
+              opacity: o.visibility === "none" ? 0 : v.value ? ".4" : void 0,
+              strokeWidth: v.value ? "0.5px" : void 0
             })
           }, null, 4),
           I("g", Ca, [
-            ($(!0), P(se, null, _e(u.value.filter((_) => !(!o.resizable && _.type.startsWith("resize") || !o.rotatable && _.type.startsWith("rotate") || !o.moveable && _.type === "move")), (_, v) => ($(), P(se, { key: v }, [
+            ($(!0), P(se, null, _e(l.value.filter((_) => !(!o.resizable && _.type.startsWith("resize") || !o.rotatable && _.type.startsWith("rotate") || !o.moveable && _.type === "move")), (_, g) => ($(), P(se, { key: g }, [
               (o.handleStrategy === "point" ? _.type.startsWith("resize") : _.type === "resize-top-left" || _.type === "resize-top-right" || _.type === "resize-bottom-left" || _.type === "resize-bottom-right") ? ($(), P(se, { key: 0 }, [
                 n.handleShape === "rect" ? ($(), P("rect", {
                   key: 0,
@@ -5597,7 +5596,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
                   fill: o.handleColor,
                   class: "mce-transformable__handle",
                   style: q({
-                    opacity: o.visibility === "none" || r.value && o.visibility !== "visible" ? 0 : void 0
+                    opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
                   })
                 }, null, 12, Aa)) : ($(), P("circle", {
                   key: 1,
@@ -5608,7 +5607,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
                   fill: o.handleColor,
                   class: "mce-transformable__handle",
                   style: q({
-                    opacity: o.visibility === "none" || r.value && o.visibility !== "visible" ? 0 : void 0
+                    opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
                   })
                 }, null, 12, Ta))
               ], 64)) : Z("", !0),
@@ -5623,18 +5622,18 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
                 "aria-label": _.type,
                 class: "mce-transformable__handle-box",
                 style: q({
-                  opacity: o.visibility === "none" || r.value && o.visibility !== "visible" ? 0 : void 0
+                  opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
                 }),
-                cursor: r.value ? "auto" : O(_.type),
-                onPointerdown: (b) => d(b, v)
+                cursor: c.value ? "auto" : O(_.type),
+                onPointerdown: (b) => d(b, g)
               }, null, 44, Ea)
             ], 64))), 128))
           ]),
           I("g", {
             "pointer-events": "all",
-            style: q(g.value ? { opacity: ".4", strokeWidth: "0.5px" } : void 0)
+            style: q(v.value ? { opacity: ".4", strokeWidth: "0.5px" } : void 0)
           }, [
-            ee(m.$slots, "svg", { box: l.value })
+            ee(m.$slots, "svg", { box: r.value })
           ], 4)
         ])),
         w.value ? ($(), P("div", Sa, K(w.value), 1)) : Z("", !0)
@@ -5655,17 +5654,17 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       resizeElement: s,
       selection: a,
       camera: i,
-      obbToFit: l,
-      getObbInDrawboard: r,
-      getObb: c,
-      registerCommand: u,
+      obbToFit: r,
+      getObbInDrawboard: c,
+      getObb: u,
+      registerCommand: l,
       unregisterCommand: h,
       isFrame: k,
       isLock: f,
-      config: g
+      config: v
     } = de(), w = ce("transformableRef");
     vt(() => {
-      u({ command: "startTransform", handle: (C) => !!w.value?.start(C) });
+      l({ command: "startTransform", handle: (C) => !!w.value?.start(C) });
     }), we(() => {
       h("startTransform");
     });
@@ -5673,11 +5672,11 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       if (a.value.length !== 1)
         return [];
       const C = [];
-      return a.value[0]?.findAncestor((A) => (A instanceof G && C.push(r(A)), !1)), C;
+      return a.value[0]?.findAncestor((A) => (A instanceof G && C.push(c(A)), !1)), C;
     }), p = z(() => n.value !== "selecting" && a.value.length === 1 ? [] : a.value.map((C) => ({
       name: C.name,
-      box: r(C)
-    }))), x = z(() => r(a.value)), O = z({
+      box: c(C)
+    }))), x = z(() => c(a.value)), O = z({
       get: () => x.value,
       set: (C) => {
         const A = i.value.zoom, m = x.value, y = {
@@ -5687,8 +5686,8 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           height: Math.round((C.height - m.height) / A.y),
           rotate: Math.round((C.rotate ?? 0) - (m.rotate ?? 0))
         }, _ = w.value?.activeHandle ?? "move";
-        a.value.forEach((v) => {
-          const b = v.style, T = {
+        a.value.forEach((g) => {
+          const b = g.style, T = {
             left: b.left + y.left,
             top: b.top + y.top,
             width: b.width + y.width,
@@ -5696,16 +5695,16 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
             rotate: b.rotate + y.rotate
           };
           _.startsWith("rotate") || _.startsWith("resize") && (s(
-            v,
-            T.width / v.style.width,
-            T.height / v.style.height,
-            k(v) ? void 0 : _.split("-").length > 2 ? { deep: !0, textFontSizeToFit: !0 } : { deep: !0, textToFit: !0 }
-          ), T.width = v.style.width, T.height = v.style.height), Object.assign(b, T), v.updateGlobalTransform(), v.findAncestor((M) => (M instanceof G && !k(M) && l(M), !1));
+            g,
+            T.width / g.style.width,
+            T.height / g.style.height,
+            k(g) ? void 0 : _.split("-").length > 2 ? { deep: !0, textFontSizeToFit: !0 } : { deep: !0, textToFit: !0 }
+          ), T.width = g.style.width, T.height = g.style.height), Object.assign(b, T), g.updateGlobalTransform(), g.findAncestor((S) => (S instanceof G && !k(S) && r(S), !1));
         });
       }
     });
     function L() {
-      const C = a.value.length === 1 ? a.value[0].style : c(a.value);
+      const C = a.value.length === 1 ? a.value[0].style : u(a.value);
       return `${Number(C.width.toFixed(2))} × ${Number(C.height.toFixed(2))}`;
     }
     return e({
@@ -5716,15 +5715,15 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         class: "mce-parent-element-obb",
         style: q({
           borderColor: "currentColor",
-          ...S(Me)(m)
+          ...M(Me)(m)
         })
       }, null, 4))), 128)),
-      S(n) === "selecting" ? ($(), P("div", {
+      M(n) === "selecting" ? ($(), P("div", {
         key: 0,
         class: "mce-selected-area",
         style: q({
           borderColor: "currentcolor",
-          ...S(Me)(t.selectedArea)
+          ...M(Me)(t.selectedArea)
         })
       }, null, 4)) : Z("", !0),
       ($(!0), P(se, null, _e(p.value, (m, y) => ($(), P("div", {
@@ -5732,7 +5731,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         class: "mce-element-obb",
         style: q({
           borderColor: "currentcolor",
-          ...S(Me)(m.box)
+          ...M(Me)(m.box)
         })
       }, null, 4))), 128)),
       O.value.width && O.value.height ? ($(), oe(Ma, {
@@ -5740,15 +5739,15 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         ref: "transformableRef",
         modelValue: O.value,
         "onUpdate:modelValue": A[0] || (A[0] = (m) => O.value = m),
-        visibility: S(n) !== "selecting" ? "auto" : "none",
-        moveable: S(a)[0] && !S(f)(S(a)[0]),
+        visibility: M(n) !== "selecting" ? "auto" : "none",
+        moveable: M(a)[0] && !M(f)(M(a)[0]),
         "resize-strategy": t.resizeStrategy,
-        "handle-shape": S(g).handleShape,
+        "handle-shape": M(v).handleShape,
         class: "mce-selection-obb",
-        "border-style": S(a).length > 1 ? "dashed" : "solid",
+        "border-style": M(a).length > 1 ? "dashed" : "solid",
         "tip-format": L,
-        onMove: A[1] || (A[1] = () => !S(n) && (n.value = "transforming")),
-        onEnd: A[2] || (A[2] = () => S(n) === "transforming" && (n.value = void 0))
+        onMove: A[1] || (A[1] = () => !M(n) && (n.value = "transforming")),
+        onEnd: A[2] || (A[2] = () => M(n) === "transforming" && (n.value = void 0))
       }, ht({ _: 2 }, [
         C.$slots.transformable ? {
           name: "svg",
@@ -5760,7 +5759,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       ]), 1032, ["modelValue", "visibility", "moveable", "resize-strategy", "handle-shape", "border-style"])) : Z("", !0),
       O.value.width && O.value.height && C.$slots.default ? ($(), P("div", {
         key: 2,
-        style: q([{ position: "absolute" }, S(Me)(O.value)])
+        style: q([{ position: "absolute" }, M(Me)(O.value)])
       }, [
         ee(C.$slots, "default", { box: O.value })
       ], 4)) : Z("", !0)
@@ -5782,17 +5781,17 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       layoutStyles: s,
       items: a,
       getLayoutItem: i,
-      layoutRef: l
+      layoutRef: r
     } = Ks(t);
     return e({
       items: a,
       getLayoutItem: i
-    }), (r, c) => ($(), P("div", {
-      ref: S(l),
-      class: be([S(n)]),
-      style: q([S(s)])
+    }), (c, u) => ($(), P("div", {
+      ref: M(r),
+      class: be([M(n)]),
+      style: q([M(s)])
     }, [
-      ee(r.$slots, "default")
+      ee(c.$slots, "default")
     ], 6));
   }
 }), Ft = /* @__PURE__ */ X({
@@ -5823,7 +5822,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       class: be(["mce-layout-item", [
         `mce-layout-item--${e.position}`
       ]]),
-      style: q([S(t)])
+      style: q([M(t)])
     }, [
       ee(n.$slots, "default")
     ], 6));
@@ -5842,7 +5841,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       class: be(["mce-main", [
         { "mce-main--scrollable": e.scrollable }
       ]]),
-      style: q([S(t)])
+      style: q([M(t)])
     }, [
       e.scrollable ? ($(), P("div", Ia, [
         ee(n.$slots, "default")
@@ -5893,65 +5892,65 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       exporting: s,
       exportProgress: a
     } = de();
-    return (i, l) => ($(), P("div", Va, [
+    return (i, r) => ($(), P("div", Va, [
       I("div", ja, [
-        S(e) === "typing" ? ($(), P(se, { key: 0 }, [
+        M(e) === "typing" ? ($(), P(se, { key: 0 }, [
           I("div", Ua, [
-            I("span", Xa, K(S(n)("Command")), 1),
-            I("span", Ha, K(S(n)("Enter")), 1)
+            I("span", Xa, K(M(n)("Command")), 1),
+            I("span", Ha, K(M(n)("Enter")), 1)
           ]),
-          l[1] || (l[1] = I("span", null, "/", -1)),
+          r[1] || (r[1] = I("span", null, "/", -1)),
           I("div", Ya, [
-            I("span", qa, K(S(n)("Escape")), 1),
-            I("span", null, K(S(t)("commitChanges")), 1)
+            I("span", qa, K(M(n)("Escape")), 1),
+            I("span", null, K(M(t)("commitChanges")), 1)
           ])
-        ], 64)) : S(e) === "transforming" ? ($(), P(se, { key: 1 }, [
+        ], 64)) : M(e) === "transforming" ? ($(), P(se, { key: 1 }, [
           I("div", Ga, [
             H(Ee, { icon: "$mouseRightClick" })
           ]),
-          l[2] || (l[2] = I("span", null, " / ", -1)),
+          r[2] || (r[2] = I("span", null, " / ", -1)),
           I("div", Wa, [
-            I("span", Ka, K(S(n)("Escape")), 1),
-            I("span", null, K(S(t)("cancel")), 1)
+            I("span", Ka, K(M(n)("Escape")), 1),
+            I("span", null, K(M(t)("cancel")), 1)
           ]),
-          l[3] || (l[3] = I("div", { class: "mce-statusbar__divider" }, null, -1)),
+          r[3] || (r[3] = I("div", { class: "mce-statusbar__divider" }, null, -1)),
           I("div", Ja, [
-            I("span", Za, K(S(n)("Shift")), 1),
-            I("span", null, K(S(t)("constrainToAxis")), 1)
+            I("span", Za, K(M(n)("Shift")), 1),
+            I("span", null, K(M(t)("constrainToAxis")), 1)
           ])
-        ], 64)) : S(e) ? ($(), P("span", Qa, K(S(t)(S(e))), 1)) : ($(), P(se, { key: 3 }, [
+        ], 64)) : M(e) ? ($(), P("span", Qa, K(M(t)(M(e))), 1)) : ($(), P(se, { key: 3 }, [
           I("div", ei, [
             H(Ee, { icon: "$mouseLeftClick" }),
-            I("span", null, K(S(t)("selectObject")), 1)
+            I("span", null, K(M(t)("selectObject")), 1)
           ]),
-          l[4] || (l[4] = I("span", null, " + ", -1)),
+          r[4] || (r[4] = I("span", null, " + ", -1)),
           I("div", ti, [
-            I("span", ni, K(S(n)("Shift")), 1),
-            I("span", null, K(S(t)("extend")), 1)
+            I("span", ni, K(M(n)("Shift")), 1),
+            I("span", null, K(M(t)("extend")), 1)
           ]),
-          l[5] || (l[5] = I("div", { class: "mce-statusbar__divider" }, null, -1)),
+          r[5] || (r[5] = I("div", { class: "mce-statusbar__divider" }, null, -1)),
           I("div", oi, [
             H(Ee, { icon: "$mouseLeftClick" }),
-            I("span", null, K(S(t)("selectArea")), 1)
+            I("span", null, K(M(t)("selectArea")), 1)
           ]),
-          l[6] || (l[6] = I("span", null, " + ", -1)),
+          r[6] || (r[6] = I("span", null, " + ", -1)),
           I("div", si, [
-            I("span", ai, K(S(n)("Shift")), 1),
-            I("span", null, K(S(t)("extend")), 1)
+            I("span", ai, K(M(n)("Shift")), 1),
+            I("span", null, K(M(t)("extend")), 1)
           ]),
-          l[7] || (l[7] = I("div", { class: "mce-statusbar__divider" }, null, -1)),
+          r[7] || (r[7] = I("div", { class: "mce-statusbar__divider" }, null, -1)),
           I("div", ii, [
             H(Ee, { icon: "$mouseLeftClick" }),
-            I("span", null, K(S(t)("dragSelected")), 1)
+            I("span", null, K(M(t)("dragSelected")), 1)
           ])
         ], 64))
       ]),
       I("div", ri, [
-        S(s) ? ($(), oe(Da, {
+        M(s) ? ($(), oe(Da, {
           key: 0,
-          modelValue: S(a),
-          "onUpdate:modelValue": l[0] || (l[0] = (r) => wn(a) ? a.value = r : null),
-          label: S(t)("exporting")
+          modelValue: M(a),
+          "onUpdate:modelValue": r[0] || (r[0] = (c) => wn(a) ? a.value = c : null),
+          label: M(t)("exporting")
         }, null, 8, ["modelValue", "label"])) : Z("", !0)
       ])
     ]));
@@ -5965,11 +5964,11 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       textSelection: s,
       textToFit: a,
       getObb: i,
-      registerCommand: l,
-      unregisterCommand: r,
-      camera: c
-    } = de(), u = V(), h = z(() => {
-      const { zoom: d, position: p } = c.value;
+      registerCommand: r,
+      unregisterCommand: c,
+      camera: u
+    } = de(), l = V(), h = z(() => {
+      const { zoom: d, position: p } = u.value;
       return {
         transformOrigin: "left top",
         transform: `translate(${p.x}px, ${p.y}px) scale(${d.x}, ${d.y})`
@@ -5983,7 +5982,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     function f(d) {
       s.value = d.detail;
     }
-    function g() {
+    function v() {
       const d = t.value[0], p = d.shape;
       (!p.enabled || !p._path2DSet.paths.length) && a(d);
     }
@@ -5992,11 +5991,11 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       if (!p)
         return !1;
       p.text.isValid() || p.text.setContent(" "), p.text.update(), n.value = "typing";
-      const x = u.value;
+      const x = l.value;
       return x.set(p.text.base), await Xe(), x.pointerdown(d);
     }
-    return vt(() => l({ command: "startTyping", handle: w })), we(() => r("startTyping")), e({
-      textEditor: u
+    return vt(() => r({ command: "startTyping", handle: w })), we(() => c("startTyping")), e({
+      textEditor: l
     }), (d, p) => ze(($(), P("div", {
       class: "mce-text-editor",
       style: q({
@@ -6011,18 +6010,18 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       }, [
         I("text-editor", {
           ref_key: "textEditor",
-          ref: u,
+          ref: l,
           class: "mce-text-editor__editor",
           style: {
             "--color": "var(--mce-theme-primary)"
           },
           "data-pointerdown_to_drawboard": "",
           onSelected: f,
-          onUpdate: g
+          onUpdate: v
         }, null, 544)
       ], 4)
     ], 4)), [
-      [Ue, S(t)[0] && S(n) === "typing"]
+      [Ue, M(t)[0] && M(n) === "typing"]
     ]);
   }
 }), di = { class: "mce-payhead" }, mi = /* @__PURE__ */ X({
@@ -6099,7 +6098,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       timeline: s,
       endTime: a,
       selection: i
-    } = de(), l = V(1e3 / 30), r = ce("rulerTpl"), c = V(!0), u = V([0, 0]), h = z(() => e.value.findAll((O) => !!(O instanceof G && O.children.some((L) => L instanceof In))));
+    } = de(), r = V(1e3 / 30), c = ce("rulerTpl"), u = V(!0), l = V([0, 0]), h = z(() => e.value.findAll((O) => !!(O instanceof G && O.children.some((L) => L instanceof In))));
     function k(O) {
       if (O.ctrlKey) {
         if (!(O.wheelDeltaY ? Math.abs(Math.abs(O.wheelDeltaY) - Math.abs(3 * O.deltaY)) < 3 : O.deltaMode === 0)) {
@@ -6108,24 +6107,24 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           t.value = Math.exp(y);
         }
       } else
-        O.preventDefault(), u.value = [
-          Math.min(0, u.value[0] - O.deltaX),
-          Math.min(0, u.value[1] - O.deltaY)
+        O.preventDefault(), l.value = [
+          Math.min(0, l.value[0] - O.deltaX),
+          Math.min(0, l.value[1] - O.deltaY)
         ];
     }
     function f(O) {
-      const L = r.value?.box;
+      const L = c.value?.box;
       if (L) {
-        n.value = (O.clientX - L.left + u.value[0]) * t.value;
+        n.value = (O.clientX - L.left + l.value[0]) * t.value;
         const C = (m) => {
-          n.value = (m.clientX - L.left + u.value[0]) * t.value;
+          n.value = (m.clientX - L.left + l.value[0]) * t.value;
         }, A = () => {
           window.removeEventListener("mousemove", C), window.removeEventListener("mouseup", A);
         };
         window.addEventListener("mousemove", C), window.addEventListener("mouseup", A);
       }
     }
-    function g(O) {
+    function v(O) {
       if (O % 30 === 0) {
         const L = Math.floor(O / 30 / 60), C = Math.floor(O / 30) % 60, A = String(L).padStart(2, "0"), m = String(C).padStart(2, "0");
         return `${A}:${m}`;
@@ -6134,7 +6133,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     }
     let w;
     function d() {
-      c.value = !1;
+      u.value = !1;
       let O;
       function L(C) {
         O !== void 0 && C !== void 0 && s.value.addTime(C - O), O = C, w = requestAnimationFrame(L);
@@ -6142,10 +6141,10 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       L();
     }
     function p() {
-      c.value = !0, w !== void 0 && (cancelAnimationFrame(w), w = void 0);
+      u.value = !0, w !== void 0 && (cancelAnimationFrame(w), w = void 0);
     }
     function x() {
-      c.value ? d() : p();
+      u.value ? d() : p();
     }
     return we(p), (O, L) => ($(), P("div", {
       class: "mce-timeline",
@@ -6158,7 +6157,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           onClick: x
         }, [
           H(Ee, {
-            icon: c.value ? "$play" : "$pause"
+            icon: u.value ? "$play" : "$pause"
           }, null, 8, ["icon"])
         ])
       ]),
@@ -6167,7 +6166,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           I("div", ki, [
             I("div", {
               style: q({
-                transform: `translateY(${u.value[1]}px)`
+                transform: `translateY(${l.value[1]}px)`
               })
             }, [
               ($(!0), P(se, null, _e(h.value, (C, A) => ($(), oe(bi, {
@@ -6186,27 +6185,27 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
             I("div", Ai, [
               H(mt, {
                 ref: "rulerTpl",
-                zoom: 1 / S(t) * l.value,
+                zoom: 1 / M(t) * r.value,
                 unit: 100,
                 "unit-fractions": [1, 3],
                 style: { position: "relative" },
-                position: u.value[0],
-                "label-format": g
+                position: l.value[0],
+                "label-format": v
               }, null, 8, ["zoom", "position"])
             ]),
             I("div", Ti, [
               I("div", {
                 style: q({
-                  width: `${S(a) / S(t)}px`,
-                  transform: `translate(${u.value[0]}px, ${u.value[1]}px)`
+                  width: `${M(a) / M(t)}px`,
+                  transform: `translate(${l.value[0]}px, ${l.value[1]}px)`
                 })
               }, [
                 ($(!0), P(se, null, _e(h.value, (C, A) => ($(), oe(gi, { key: A }, {
                   default: ne(() => [
                     H(vi, {
                       node: C,
-                      "ms-per-px": S(t),
-                      active: S(i).some((m) => m.equal(C)),
+                      "ms-per-px": M(t),
+                      active: M(i).some((m) => m.equal(C)),
                       onMousedown: We((m) => i.value = [C], ["stop"])
                     }, null, 8, ["node", "ms-per-px", "active", "onMousedown"])
                   ]),
@@ -6216,7 +6215,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
             ]),
             H(mi, {
               style: q({
-                transform: `translate(${u.value[0] + Math.ceil(S(n) / S(t))}px, 0px)`
+                transform: `translate(${l.value[0] + Math.ceil(M(n) / M(t))}px, 0px)`
               })
             }, null, 8, ["style"])
           ])
@@ -6248,14 +6247,14 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     const {
       config: a,
       drawboardDom: i,
-      renderEngine: l,
-      camera: r,
-      bindRenderCanvas: c,
-      hoverElement: u,
+      renderEngine: r,
+      camera: c,
+      bindRenderCanvas: u,
+      hoverElement: l,
       state: h,
       setCursor: k,
       isFrame: f,
-      selectArea: g,
+      selectArea: v,
       exec: w,
       isLock: d,
       selection: p,
@@ -6267,15 +6266,15 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
       attach: z(() => C.value)
     }), Vt(A, (E) => {
       const { width: N, height: B } = E[0].contentRect;
-      l.value.resize(N, B);
+      r.value.resize(N, B);
     }), vt(() => {
-      l.value.on("pointerdown", T), l.value.on("pointermove", M), l.value.on("pointerover", F);
+      r.value.on("pointerdown", T), r.value.on("pointermove", S), r.value.on("pointerover", F);
     }), He(() => {
-      c(A.value, i.value);
+      u(A.value, i.value);
     }), we(() => {
-      l.value.off("pointerdown", T), l.value.off("pointermove", M), l.value.off("pointerover", F);
+      r.value.off("pointerdown", T), r.value.off("pointermove", S), r.value.off("pointerover", F);
     });
-    function v(E) {
+    function g(E) {
       return f(E);
     }
     function b(E) {
@@ -6290,14 +6289,14 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           element: j,
           oldElement: D,
           event: E,
-          isExcluded: v
+          isExcluded: g
         });
         U && !(U instanceof G) ? (B = U.element, N = U.cursor) : B = U;
       }
-      u.value = B, k(N);
+      l.value = B, k(N);
     }
     function T(E) {
-      if (E.srcElement !== i.value && E.srcElement.dataset?.pointerdown_to_drawboard === void 0 || r.value.spaceKey || ![0, 2].includes(E.button))
+      if (E.srcElement !== i.value && E.srcElement.dataset?.pointerdown_to_drawboard === void 0 || c.value.spaceKey || ![0, 2].includes(E.button))
         return;
       const N = p.value[0], B = E.target, j = { x: E.clientX, y: E.clientY };
       let D = { ...j }, U = !1, W = !1, Q = [], he;
@@ -6311,7 +6310,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
             element: B,
             oldElement: N,
             event: E,
-            isExcluded: v
+            isExcluded: g
           });
           te && !(te instanceof G) ? Q = te.element ? [te.element] : [] : Q = te ? [te] : [], p.value = Q;
         }
@@ -6322,7 +6321,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           element: B,
           oldElement: N,
           event: te,
-          isExcluded: v
+          isExcluded: g
         });
         ie && !(ie instanceof G) ? Q = ie.element ? [ie.element] : [] : Q = ie ? [ie] : [], p.value = Q;
       }
@@ -6332,7 +6331,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           top: Math.min(j.y, D.y) - O.value.top,
           width: Math.abs(j.x - D.x),
           height: Math.abs(j.y - D.y)
-        }, Q = g(_.value);
+        }, Q = v(_.value);
       }
       function ve() {
         const te = t.activeStrategy({
@@ -6366,15 +6365,15 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
             }
           b(E);
         }
-        l.value.off("pointermove", J), document.removeEventListener("pointermove", me), document.removeEventListener("pointerup", ue), W = !0;
+        r.value.off("pointermove", J), document.removeEventListener("pointermove", me), document.removeEventListener("pointerup", ue), W = !0;
       }
-      l.value.on("pointermove", J), document.addEventListener("pointermove", me), document.addEventListener("pointerup", ue);
+      r.value.on("pointermove", J), document.addEventListener("pointermove", me), document.addEventListener("pointerup", ue);
     }
-    function M(E) {
-      E.srcElement === i.value && (L.value = { x: E.clientX, y: E.clientY }, !(r.value.grabbing || E.button === 1 || h.value && h.value !== "typing") && b(E));
+    function S(E) {
+      E.srcElement === i.value && (L.value = { x: E.clientX, y: E.clientY }, !(c.value.grabbing || E.button === 1 || h.value && h.value !== "typing") && b(E));
     }
     function F() {
-      L.value = void 0, u.value = void 0, k(void 0);
+      L.value = void 0, l.value = void 0, k(void 0);
     }
     function R() {
       i.value && (i.value.scrollLeft && (i.value.scrollLeft = 0), i.value.scrollTop && (i.value.scrollTop = 0));
@@ -6388,7 +6387,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
               ref_key: "drawboardDom",
               ref: i,
               class: "mce-editor__drawboard",
-              "data-pixel-ratio": S(l).pixelRatio,
+              "data-pixel-ratio": M(r).pixelRatio,
               onDblclick: N[0] || (N[0] = (B) => n("dblclick:drawboard", B)),
               onScroll: R,
               onWheel: N[1] || (N[1] = We(() => {
@@ -6403,7 +6402,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
               H(za, {
                 ref: "selectorTpl",
                 "selected-area": _.value,
-                "resize-strategy": S(p)[0] ? t.resizeStrategy(S(p)[0]) : void 0
+                "resize-strategy": M(p)[0] ? t.resizeStrategy(M(p)[0]) : void 0
               }, {
                 transformable: ne(({ box: B }) => [
                   ee(E.$slots, "transformer", { box: B })
@@ -6413,10 +6412,10 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
                 ]),
                 _: 3
               }, 8, ["selected-area", "resize-strategy"]),
-              S(a).scrollbar ? ($(), oe(_a, { key: 0 })) : Z("", !0),
+              M(a).scrollbar ? ($(), oe(_a, { key: 0 })) : Z("", !0),
               E.$slots.floatbar ? ($(), oe(la, {
                 key: 1,
-                target: S(h) === "typing" ? y.value?.textEditor : m.value?.transformable?.$el
+                target: M(h) === "typing" ? y.value?.textEditor : m.value?.transformable?.$el
               }, {
                 default: ne(() => [
                   ee(E.$slots, "floatbar")
@@ -6425,7 +6424,7 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
               }, 8, ["target"])) : Z("", !0),
               H(aa),
               H(da),
-              S(a).ruler ? ($(), oe(ba, { key: 2 })) : Z("", !0),
+              M(a).ruler ? ($(), oe(ba, { key: 2 })) : Z("", !0),
               ee(E.$slots, "drawboard")
             ], 40, Mi)
           ]),
@@ -6433,8 +6432,8 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
         }),
         ee(E.$slots, "default"),
         H(Ft, {
-          modelValue: S(a).statusbar,
-          "onUpdate:modelValue": N[2] || (N[2] = (B) => S(a).statusbar = B),
+          modelValue: M(a).statusbar,
+          "onUpdate:modelValue": N[2] || (N[2] = (B) => M(a).statusbar = B),
           position: "bottom",
           size: 24
         }, {
@@ -6444,8 +6443,8 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
           _: 1
         }, 8, ["modelValue"]),
         H(Ft, {
-          modelValue: S(a).timeline,
-          "onUpdate:modelValue": N[3] || (N[3] = (B) => S(a).timeline = B),
+          modelValue: M(a).timeline,
+          "onUpdate:modelValue": N[3] || (N[3] = (B) => M(a).timeline = B),
           position: "bottom",
           size: 160
         }, {
@@ -6478,23 +6477,23 @@ const Ot = Symbol.for("MceMenuSymbol"), Ee = /* @__PURE__ */ X({
     return e({
       isActive: n,
       updateLocation: i
-    }), (l, r) => ($(), oe(tt, {
+    }), (r, c) => ($(), oe(tt, {
       ref: "overlayTpl",
       modelValue: n.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (c) => n.value = c),
+      "onUpdate:modelValue": c[0] || (c[0] = (u) => n.value = u),
       location: t.location,
       offset: t.offset,
       target: t.target,
       attach: t.attach,
       class: "mce-dialog"
     }, {
-      activator: ne((c) => [
-        ee(l.$slots, "activator", Oe(c, {
-          props: { ...c.props, ...a.value }
+      activator: ne((u) => [
+        ee(r.$slots, "activator", Oe(u, {
+          props: { ...u.props, ...a.value }
         }))
       ]),
       default: ne(() => [
-        ee(l.$slots, "default")
+        ee(r.$slots, "default")
       ]),
       _: 3
     }, 8, ["modelValue", "location", "offset", "target", "attach"]));