mce 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,15 +1,15 @@
-import { ref as V, computed as O, watch as pe, markRaw as fe, warn as Bt, shallowRef as Je, reactive as Ce, nextTick as Pe, inject as Se, provide as De, defineComponent as X, createVNode as H, mergeProps as Ne, createElementVNode as F, toValue as yn, getCurrentInstance as Ze, onScopeDispose as gn, createElementBlock as R, openBlock as I, Fragment as ne, renderList as _e, unref as S, normalizeStyle as q, normalizeClass as be, onBeforeUnmount as we, readonly as bn, toRef as Ee, onMounted as He, useId as Lt, onDeactivated as wn, onActivated as xn, useAttrs as Dt, createBlock as le, resolveDynamicComponent as Vt, useTemplateRef as ue, renderSlot as te, Teleport as _n, createCommentVNode as Q, mergeModels as Re, useModel as Ae, resolveComponent as kn, withCtx as re, createTextVNode as Cn, toDisplayString as K, createSlots as ht, normalizeProps as ft, guardReactiveProps as pt, withDirectives as ze, vShow as Xe, vModelText as En, withModifiers as We, onBeforeMount as vt, isRef as Tn } from "vue";
-import { useFileDialog as jt, useEventListener as Ut, isClient as An, useResizeObserver as Xt, useLocalStorage as Sn, onClickOutside as Mn, useMouse as zn, useDebounceFn as Ht } from "@vueuse/core";
-import { Timeline as On, Engine as $n, Camera2D as In, DrawboardEffect as Fn, Element2D as G, IN_BROWSER as yt, clamp as Pn, assets as Yt, TimelineNode as Nn, Transform2D as Rn, DEG_TO_RAD as Bn, Node as kt, render as Qe, Animation as Ln } from "modern-canvas";
-import { getObjectValueByPath as Dn, setObjectValueByPath as Vn, normalizeTextContent as jn, idGenerator as gt, normalizeElement as qt, Observable as Gt, Reactivable as Un, property as Ye } from "modern-idoc";
-import { saveAs as Wt } from "file-saver";
+import { ref as V, computed as O, watch as pe, markRaw as fe, warn as Lt, shallowRef as Ze, reactive as Ee, nextTick as Re, inject as Se, provide as De, defineComponent as X, createVNode as H, mergeProps as Oe, createElementVNode as F, toValue as yn, getCurrentInstance as Qe, onScopeDispose as gn, createElementBlock as R, openBlock as $, Fragment as se, renderList as _e, unref as S, normalizeStyle as q, normalizeClass as be, onBeforeUnmount as we, readonly as bn, toRef as Te, onMounted as He, useId as Dt, onDeactivated as wn, onActivated as xn, useAttrs as Vt, createBlock as oe, resolveDynamicComponent as jt, useTemplateRef as ce, renderSlot as Q, Teleport as _n, createCommentVNode as ee, mergeModels as $e, useModel as ke, resolveComponent as kn, withCtx as ne, createTextVNode as Cn, toDisplayString as K, createSlots as pt, normalizeProps as vt, guardReactiveProps as yt, withDirectives as ze, vShow as Xe, vModelText as En, withModifiers as Ke, onBeforeMount as gt, isRef as Tn } from "vue";
+import { useFileDialog as Ut, useEventListener as Xt, isClient as An, useResizeObserver as Ht, useLocalStorage as Sn, onClickOutside as Mn, useMouse as zn, useDebounceFn as Yt } from "@vueuse/core";
+import { Timeline as On, Engine as $n, Camera2D as In, DrawboardEffect as Fn, Element2D as G, IN_BROWSER as bt, clamp as Pn, assets as qt, TimelineNode as Nn, Transform2D as Rn, DEG_TO_RAD as Bn, Node as Ct, render as et, Animation as Ln } from "modern-canvas";
+import { getObjectValueByPath as Dn, setObjectValueByPath as Vn, normalizeTextContent as jn, idGenerator as wt, normalizeElement as Gt, Observable as Wt, Reactivable as Un, property as Ye } from "modern-idoc";
+import { saveAs as Kt } from "file-saver";
 import { Fonts as Xn } from "modern-font";
-import { merge as Kt, throttle as Hn, cloneDeep as Yn } from "lodash-es";
-import { measureText as rt } from "modern-text";
+import { merge as Jt, throttle as Hn, cloneDeep as Yn } from "lodash-es";
+import { measureText as lt } from "modern-text";
 import { TextEditor as qn } from "modern-text/web-components";
-import * as ie from "yjs";
+import * as le from "yjs";
 import { useFloating as Gn, offset as Wn, flip as Kn, shift as Jn, autoUpdate as Zn } from "@floating-ui/vue";
-import { vResizeObserver as Jt, vOnLongPress as Qn } from "@vueuse/components";
+import { vResizeObserver as Zt, vOnLongPress as Qn } from "@vueuse/components";
 const eo = (o) => {
   const {
     emit: e
@@ -23,55 +23,55 @@ const eo = (o) => {
       t.value.delete(r);
     },
     exec: (r, ...i) => {
-      const [l, c] = r.split(":");
-      c !== void 0 && i.unshift(c);
-      const u = t.value.get(l);
+      const [c, l] = r.split(":");
+      l !== void 0 && i.unshift(l);
+      const u = t.value.get(c);
       if (!u)
-        throw new Error(`Command "${l}" not found`);
+        throw new Error(`Command "${c}" not found`);
       const d = u.handle(...i);
-      return e(`command:${l}`, d), d;
+      return e(`command:${c}`, d), d;
     }
   });
 }, to = (o) => {
   const {
     config: e
   } = o;
-  function t(c, u) {
-    return Dn(e.value, c) ?? u;
+  function t(l, u) {
+    return Dn(e.value, l) ?? u;
   }
-  function n(c, u) {
-    Vn(e.value, c, u);
+  function n(l, u) {
+    Vn(e.value, l, u);
   }
-  function s(c) {
+  function s(l) {
     return O({
-      get: () => t(c),
-      set: (u) => n(c, u)
+      get: () => t(l),
+      set: (u) => n(l, u)
     });
   }
-  function a(c, u) {
-    const d = s(c);
+  function a(l, u) {
+    const d = s(l);
     return d.value === void 0 && (d.value = u), d;
   }
   function r() {
-    return new Promise((c) => {
-      const { onChange: u, open: d } = jt({
+    return new Promise((l) => {
+      const { onChange: u, open: d } = Ut({
         accept: ".json",
         reset: !0,
         multiple: !1
       });
       u(async (g) => {
         const h = g?.[0];
-        h && (e.value = JSON.parse(await h.text()), c(e.value));
+        h && (e.value = JSON.parse(await h.text()), l(e.value));
       }), d();
     });
   }
   function i() {
     return new Blob([JSON.stringify(e.value)], { type: "application/json" });
   }
-  function l(c = "settings.json") {
-    Wt(
+  function c(l = "settings.json") {
+    Kt(
       i(),
-      c
+      l
     );
   }
   Object.assign(o, {
@@ -81,7 +81,7 @@ const eo = (o) => {
     registerConfig: a,
     importConfig: r,
     exportConfig: i,
-    saveAsConfig: l
+    saveAsConfig: c
   });
 }, no = (o, e) => {
   const {
@@ -126,9 +126,9 @@ const eo = (o) => {
   s.root.append(a.value), s.root.append(r.value);
   const i = V(s);
   i.value.start();
-  const l = V(), c = V({ left: 0, top: 0, width: 0, height: 0 }), u = V(), d = V(), g = O(() => d.value?.root), h = V(), v = V(), y = V();
-  function f(z, $) {
-    switch (v.value = z, y.value = $, z) {
+  const c = V(), l = V({ left: 0, top: 0, width: 0, height: 0 }), u = V(), d = V(), g = O(() => d.value?.root), h = V(), v = V(), y = V();
+  function f(z, I) {
+    switch (v.value = z, y.value = I, z) {
       case "drawing":
         p("crosshair");
         break;
@@ -139,10 +139,10 @@ const eo = (o) => {
     i.value.input.setCursor(z);
   }
   function _() {
-    const { x: z = 0, y: $ = 0 } = h.value ?? {};
+    const { x: z = 0, y: I = 0 } = h.value ?? {};
     return a.value.toGlobal({
-      x: z - c.value.left,
-      y: $ - c.value.top
+      x: z - l.value.left,
+      y: I - l.value.top
     }, { x: 0, y: 0 });
   }
   Object.assign(o, {
@@ -152,8 +152,8 @@ const eo = (o) => {
     camera: a,
     drawboardEffect: r,
     root: g,
-    drawboardDom: l,
-    drawboardAabb: c,
+    drawboardDom: c,
+    drawboardAabb: l,
     workspace: u,
     doc: d,
     state: v,
@@ -189,21 +189,21 @@ const eo = (o) => {
     emit: t,
     fonts: n
   } = o, s = V(!1);
-  async function a(l, c) {
-    const u = await n.load(l, c);
+  async function a(c, l) {
+    const u = await n.load(c, l);
     return console.log("loadFont", u), t("loadFont", u), u;
   }
-  async function r(l, c) {
+  async function r(c, l) {
     s.value = !0;
     try {
-      n.fallbackFont = await a(l, c);
+      n.fallbackFont = await a(c, l);
     } finally {
       s.value = !1;
     }
   }
   async function i() {
     for (; s.value; )
-      await new Promise((l) => setTimeout(l, 100));
+      await new Promise((c) => setTimeout(c, 100));
     return await n.waitUntilLoad();
   }
   return Object.assign(o, {
@@ -213,9 +213,9 @@ const eo = (o) => {
     waitUntilFontLoad: i
   }), () => {
     const {
-      defaultFont: l
+      defaultFont: c
     } = e;
-    l && r(l);
+    c && r(c);
   };
 }, io = {
   cancel: "Cancel",
@@ -289,7 +289,8 @@ const eo = (o) => {
   alignRight: "Align right",
   alignTop: "Align top",
   alignVerticalCenter: "Align vertical center",
-  alignBottom: "Align bottom"
+  alignBottom: "Align bottom",
+  exporting: "Exporting"
 }, ro = (o, e) => {
   const {
     locale: t
@@ -298,7 +299,7 @@ const eo = (o) => {
       locale: a,
       fallback: r,
       messages: i = {}
-    } = Kt({
+    } = Jt({
       locale: "en",
       fallback: "en",
       messages: {
@@ -312,7 +313,7 @@ const eo = (o) => {
     };
   });
   function s(a, r) {
-    const { locale: i, localeMessages: l, fallbackMessages: c } = n.value, u = e.t?.(a, r) ?? l?.[a ?? -1] ?? c?.[a ?? -1] ?? l?.[r ?? -1] ?? c?.[r ?? -1];
+    const { locale: i, localeMessages: c, fallbackMessages: l } = n.value, u = e.t?.(a, r) ?? c?.[a ?? -1] ?? l?.[a ?? -1] ?? c?.[r ?? -1] ?? l?.[r ?? -1];
     return u === void 0 && console.warn(`[mce] Not found '${a}' key in '${i}' locale messages.`), u ?? a ?? r;
   }
   Object.assign(o, {
@@ -322,16 +323,16 @@ const eo = (o) => {
   const {
     root: e,
     getAncestor: t
-  } = o, n = O(() => e.value?.children.filter(l) ?? []), s = V(-1), a = O(() => n.value[s.value]), r = O(() => {
+  } = o, n = O(() => e.value?.children.filter(c) ?? []), s = V(-1), a = O(() => n.value[s.value]), r = O(() => {
     const { left: u = 0, top: d = 0, width: g = 0, height: h = 0 } = a.value?.style ?? {};
     return { left: u, top: d, width: g, height: h };
   }), i = V([]);
-  function l(u) {
+  function c(u) {
     return u instanceof G && u.meta?.inEditorIs === "Frame";
   }
-  function c(u) {
+  function l(u) {
     const d = t(u);
-    return d && l(d) ? d : void 0;
+    return d && c(d) ? d : void 0;
   }
   return Object.assign(o, {
     frames: n,
@@ -339,14 +340,14 @@ const eo = (o) => {
     currentFrameIndex: s,
     currentFrame: a,
     currentFrameAabb: r,
-    isFrame: l,
-    getAncestorFrame: c
+    isFrame: c,
+    getAncestorFrame: l
   }), () => {
     const {
       selection: u
     } = o;
     pe(() => u.value.length === 1 && u.value[0], (d) => {
-      d && l(d) && (s.value = n.value.findIndex((g) => g.equal(d)));
+      d && c(d) && (s.value = n.value.findIndex((g) => g.equal(d)));
     });
   };
 };
@@ -359,7 +360,7 @@ function Me(o) {
   };
   return o.rotate && (e.transform = `rotate(${o.rotate}deg)`), e;
 }
-function Ct(o, e) {
+function Et(o, e) {
   const t = e.left + e.width, n = e.top + e.height;
   return o.x >= e.left && o.x <= t && o.y >= e.top && o.y <= n;
 }
@@ -377,12 +378,12 @@ function co(o, e) {
   if (!o.rotate && !e.rotate)
     return Be(o, e);
   {
-    const t = ([i, l], [c, u]) => Math.abs(i * c + l * u), n = ({ width: i, height: l, rotate: c = 0 }) => {
-      c = -c % 180;
-      const u = c / 180 * Math.PI, d = [Math.cos(u), -Math.sin(u)], g = [Math.sin(u), Math.cos(u)];
+    const t = ([i, c], [l, u]) => Math.abs(i * l + c * u), n = ({ width: i, height: c, rotate: l = 0 }) => {
+      l = -l % 180;
+      const u = l / 180 * Math.PI, d = [Math.cos(u), -Math.sin(u)], g = [Math.sin(u), Math.cos(u)];
       return {
         axis: [d, g],
-        projectionRadius: (h) => i / 2 * t(h, d) + l / 2 * t(h, g)
+        projectionRadius: (h) => i / 2 * t(h, d) + c / 2 * t(h, g)
       };
     }, s = n(o), a = n(e), r = [
       o.left + o.width / 2 - (e.left + e.width / 2),
@@ -414,12 +415,12 @@ function Qi(o) {
   return { left: e.x1, top: e.y1, width: e.x2 - e.x1, height: e.y2 - e.y1 };
 }
 function uo(o) {
-  Bt(`mce: ${o}`);
+  Lt(`mce: ${o}`);
 }
 function er(o) {
-  Bt(`mce error: ${o}`);
+  Lt(`mce error: ${o}`);
 }
-const Et = yt && window.navigator && "clipboard" in navigator, Zt = yt ? window.navigator?.userAgent : "", $e = /Macintosh|Mac OS X/i.test(Zt), mo = /Windows/i.test(Zt);
+const Tt = bt && window.navigator && "clipboard" in navigator, Qt = bt ? window.navigator?.userAgent : "", Fe = /Macintosh|Mac OS X/i.test(Qt), mo = /Windows/i.test(Qt);
 function ho(o, e = {}) {
   const { useCrossOrigin: t = !1, timeout: n } = e;
   return new Promise((s, a) => {
@@ -432,8 +433,8 @@ function ho(o, e = {}) {
       r.onload = null, r.onerror = null, a(new Error(`image load timeout (${n} ms)`));
     }, n)), r.onload = function() {
       i && clearTimeout(i);
-      const l = this.naturalWidth, c = this.naturalHeight;
-      !l || !c ? a(new Error("failed to read natural size")) : s({ width: l, height: c });
+      const c = this.naturalWidth, l = this.naturalHeight;
+      !c || !l ? a(new Error("failed to read natural size")) : s({ width: c, height: l });
     }, r.onerror = function() {
       i && clearTimeout(i), a(new Error(`failed to load image: ${o}`));
     }, r.src = o;
@@ -452,11 +453,11 @@ const fo = {
   "image/heif": [".heif"],
   "image/heic": [".heic"],
   "image/avif": [".avif"]
-}, Qt = Object.values(fo).flat(), en = new RegExp(`\\.(?:${Qt.map((o) => o.substring(1)).join("|")})`, "i");
-function lt(o, e) {
-  const t = rt({ style: e, content: o }).boundingBox;
+}, en = Object.values(fo).flat(), ct = new RegExp(`\\.(?:${en.map((o) => o.substring(1)).join("|")})`, "i");
+function ut(o, e) {
+  const t = lt({ style: e, content: o }).boundingBox;
   return {
-    id: gt(),
+    id: wt(),
     style: {
       ...e,
       width: t.width,
@@ -466,9 +467,9 @@ function lt(o, e) {
     meta: { inPptIs: "Shape" }
   };
 }
-async function ct(o) {
+async function dt(o) {
   return {
-    id: gt(),
+    id: wt(),
     style: {
       ...await ho(o)
     },
@@ -477,8 +478,8 @@ async function ct(o) {
   };
 }
 function po(o, e) {
-  const t = o.clientX, n = o.clientY, s = e.getBoundingClientRect(), a = s.left, r = s.top, i = s.right, l = s.bottom;
-  return t >= a && t <= i && n >= r && n <= l;
+  const t = o.clientX, n = o.clientY, s = e.getBoundingClientRect(), a = s.left, r = s.top, i = s.right, c = s.bottom;
+  return t >= a && t <= i && n >= r && n <= c;
 }
 function vo(o) {
   if (o && "$el" in o) {
@@ -487,14 +488,14 @@ function vo(o) {
   }
   return o;
 }
-function qe(o, e = "px") {
+function Ge(o, e = "px") {
   if (o == null || o === "")
     return;
   const t = Number(o);
   return Number.isNaN(t) ? String(o) : Number.isFinite(t) ? `${t}${e}` : void 0;
 }
 function yo() {
-  const o = Je(), e = (t) => {
+  const o = Ze(), e = (t) => {
     o.value = t;
   };
   return Object.defineProperty(e, "value", {
@@ -551,25 +552,25 @@ const ko = (o) => {
   const {
     registerConfig: e
   } = o, t = e("hotkeys", xo), n = V(/* @__PURE__ */ new Map());
-  function s(l) {
-    if (Array.isArray(l))
-      l.forEach((c) => s(c));
+  function s(c) {
+    if (Array.isArray(c))
+      c.forEach((l) => s(l));
     else {
       const {
-        when: c,
+        when: l,
         handle: u,
         ...d
-      } = l, {
+      } = c, {
         command: g
       } = d;
       t.value = [
         ...t.value.filter((h) => h.command !== g),
         d
-      ], n.value.set(g, l);
+      ], n.value.set(g, c);
     }
   }
-  function a(l) {
-    t.value = t.value.filter((c) => c.command !== l);
+  function a(c) {
+    t.value = t.value.filter((l) => l.command !== c);
   }
   const r = {
     ArrowUp: "↑",
@@ -594,26 +595,26 @@ const ko = (o) => {
     "™": "2",
     Dead: "N"
   };
-  function i(l) {
-    if (!l)
+  function i(c) {
+    if (!c)
       return "";
-    let c;
-    const u = t.value.find((d) => d.command === l);
-    return u ? c = Array.isArray(u.key) ? u.key : [u.key] : c = [l], c[0].split("+").map((d) => {
+    let l;
+    const u = t.value.find((d) => d.command === c);
+    return u ? l = Array.isArray(u.key) ? u.key : [u.key] : l = [c], l[0].split("+").map((d) => {
       switch (d) {
         case "Control":
-          return $e ? "⌃" : "Ctrl";
+          return Fe ? "⌃" : "Ctrl";
         case "Ctrl":
-          return $e ? "⌃" : "Ctrl";
+          return Fe ? "⌃" : "Ctrl";
         case "Command":
-          return $e ? "⌘" : mo ? "Win" : "Super";
+          return Fe ? "⌘" : mo ? "Win" : "Super";
         case "Alt":
-          return $e ? "⌥" : "Alt";
+          return Fe ? "⌥" : "Alt";
         case "Shift":
-          return $e ? "⇧" : "Shift";
+          return Fe ? "⇧" : "Shift";
         case "CommandOrControl":
         case "CmdOrCtrl":
-          return $e ? "⌘" : "Ctrl";
+          return Fe ? "⌘" : "Ctrl";
         default:
           return r[d] ?? d.charAt(0).toUpperCase() + d.slice(1);
       }
@@ -627,19 +628,19 @@ const ko = (o) => {
     getKbd: i
   }), () => {
     const {
-      exec: l
+      exec: c
     } = o;
-    Ut(
+    Xt(
       An ? window : void 0,
       "keydown",
-      (c) => {
-        if (_o(c))
+      (l) => {
+        if (_o(l))
           return;
         const u = [
-          (c.metaKey || c.ctrlKey) && "CmdOrCtrl",
-          c.altKey && "Alt",
-          c.shiftKey && "Shift",
-          !["Meta", "Control", "Alt", "Shift"].includes(c.key) && c.key
+          (l.metaKey || l.ctrlKey) && "CmdOrCtrl",
+          l.altKey && "Alt",
+          l.shiftKey && "Shift",
+          !["Meta", "Control", "Alt", "Shift"].includes(l.key) && l.key
         ].filter(Boolean).map((d) => d.toLowerCase()).sort().join("+");
         t.value.forEach((d) => {
           const g = d.command, h = n.value.get(g);
@@ -654,7 +655,7 @@ const ko = (o) => {
                   return p;
               }
             }).filter(Boolean).map((p) => p.toLowerCase()).sort().join("+");
-            u === f && (!h?.when || h.when(c)) && (c.preventDefault(), h?.handle ? h.handle(c) : l(g), o.emit(`hotkey:${g}`, c));
+            u === f && (!h?.when || h.when(l)) && (l.preventDefault(), h?.handle ? h.handle(l) : c(g), o.emit(`hotkey:${g}`, l));
           });
         });
       },
@@ -668,38 +669,38 @@ const ko = (o) => {
     renderEngine: n
   } = o, s = V(10), a = O({
     get: () => t.value.currentTime,
-    set: (c) => {
+    set: (l) => {
       const { startTime: u, endTime: d } = t.value;
-      t.value.currentTime = Pn(c, u, d);
+      t.value.currentTime = Pn(l, u, d);
     }
-  }), r = O(() => t.value.startTime), i = O(() => t.value.endTime), l = (c) => {
+  }), r = O(() => t.value.startTime), i = O(() => t.value.endTime), c = (l) => {
     const u = { startTime: 0, endTime: 0 };
     function d(h) {
       return h instanceof Nn && (u.startTime = Math.min(u.startTime, h.globalStartTime), u.endTime = Math.max(u.endTime, h.globalEndTime)), h instanceof G && (h.background.animatedTexture && (u.endTime = Math.max(u.endTime, h.globalStartTime + h.background.animatedTexture.duration)), h.foreground.animatedTexture && (u.endTime = Math.max(u.endTime, h.globalStartTime + h.foreground.animatedTexture.duration)), h.fill.animatedTexture && (u.endTime = Math.max(u.endTime, h.globalStartTime + h.fill.animatedTexture.duration)), h.outline.animatedTexture && (u.endTime = Math.max(u.endTime, h.globalStartTime + h.outline.animatedTexture.duration))), !1;
     }
-    return (Array.isArray(c) ? c : [c]).forEach((h) => h.findOne(d)), u;
+    return (Array.isArray(l) ? l : [l]).forEach((h) => h.findOne(d)), u;
   };
   return Object.assign(o, {
     msPerPx: s,
     currentTime: a,
     startTime: r,
     endTime: i,
-    getTimeRange: l
+    getTimeRange: c
   }), () => {
     const {
-      on: c
+      on: l
     } = o;
     async function u() {
-      await n.value.nextTick(), t.value.endTime = e.value ? l(e.value).endTime : 0;
+      await n.value.nextTick(), t.value.endTime = e.value ? c(e.value).endTime : 0;
     }
-    Yt.on("loaded", u), c("setDoc", u);
+    qt.on("loaded", u), l("setDoc", u);
   };
 }, Eo = (o, e) => {
   Object.assign(o, {
     upload: async (n) => e.upload ? await e.upload(n) : URL.createObjectURL(n)
   });
 };
-function Tt(...o) {
+function At(...o) {
 }
 const To = (o) => {
   const {
@@ -733,9 +734,9 @@ const To = (o) => {
       }), h.style.left += f.left, h.style.top += f.top, h.style.width = f.width, h.style.height = f.height, h.updateGlobalTransform(), h.children.forEach((_, z) => {
         if (_ instanceof G) {
           _.updateGlobalTransform();
-          const $ = p[z], E = _.toLocal({
-            x: $.left + $.width / 2,
-            y: $.top + $.height / 2
+          const I = p[z], E = _.toLocal({
+            x: I.left + I.width / 2,
+            y: I.top + I.height / 2
           }), C = _.pivot, m = _.style, b = [
             E.x - C.x,
             E.y - C.y
@@ -748,10 +749,10 @@ const To = (o) => {
   function r(h, v) {
     let y;
     if (Array.isArray(h) && h.length > 0)
-      h.length === 1 ? y = r(h[0]) : y = { ...l(h), rotate: 0 };
+      h.length === 1 ? y = r(h[0]) : y = { ...c(h), rotate: 0 };
     else if (h instanceof G) {
       const f = h.style;
-      Tt([f.left, f.top, f.width, f.height, f.rotate]);
+      At([f.left, f.top, f.width, f.height, f.rotate]);
       const { rect: p, rotation: _ } = h.getGlobalObb();
       y = {
         left: p.left,
@@ -777,11 +778,11 @@ const To = (o) => {
   function i(h) {
     return r(h, "drawboard");
   }
-  function l(h, v) {
+  function c(h, v) {
     let y;
     if (Array.isArray(h) && h.length > 0)
       if (h.length === 1)
-        y = l(h[0]);
+        y = c(h[0]);
       else {
         const f = {
           minX: Number.MAX_SAFE_INTEGER,
@@ -791,7 +792,7 @@ const To = (o) => {
         };
         h.forEach((p) => {
           if (p instanceof G) {
-            const _ = l(p);
+            const _ = c(p);
             f.minX = Math.min(f.minX, _.left), f.minY = Math.min(f.minY, _.top), f.maxX = Math.max(f.maxX, _.left + _.width), f.maxY = Math.max(f.maxY, _.top + _.height);
           }
         }), y = {
@@ -803,7 +804,7 @@ const To = (o) => {
       }
     else if (h instanceof G) {
       const f = h.style;
-      Tt([f.left, f.top, f.width, f.height, f.rotate]);
+      At([f.left, f.top, f.width, f.height, f.rotate]);
       const p = h.getGlobalAabb();
       y = {
         left: p.left,
@@ -824,39 +825,39 @@ const To = (o) => {
     }
     return y;
   }
-  function c(h) {
-    return l(h, "drawboard");
+  function l(h) {
+    return c(h, "drawboard");
   }
   function u(h) {
     const v = { ...h }, y = e.value.zoom, f = e.value.position;
     return v.left *= y.x, v.top *= y.y, v.width *= y.x, v.height *= y.y, v.left += f.x, v.top += f.y, v;
   }
-  const d = O(() => l(t.value?.children ?? [])), g = O(() => l(n.value));
+  const d = O(() => c(t.value?.children ?? [])), g = O(() => c(n.value));
   Object.assign(o, {
     obbToFit: a,
     getObb: r,
     getObbInDrawboard: i,
-    getAabb: l,
-    getAabbInDrawboard: c,
+    getAabb: c,
+    getAabbInDrawboard: l,
     aabbToDrawboardAabb: u,
     rootAabb: d,
     currentAabb: g
   });
 }, Ao = (o) => {
   const e = V(/* @__PURE__ */ new Map()), t = V(!1), n = V(0), s = (i) => {
-    Array.isArray(i) ? i.forEach((l) => s(l)) : e.value.set(i.name, i);
+    Array.isArray(i) ? i.forEach((c) => s(c)) : e.value.set(i.name, i);
   }, a = (i) => {
     e.value.delete(i);
-  }, r = (i, l = {}) => {
-    const c = e.value.get(i)?.handle({
-      ...l,
+  }, r = (i, c = {}) => {
+    const l = e.value.get(i)?.handle({
+      ...c,
       onProgress: (u) => {
-        n.value = u, l.onProgress?.(u);
+        n.value = u, c.onProgress?.(u);
       }
     });
-    return c instanceof Promise ? (n.value = 0, t.value = !0, c.finally(() => {
+    return l instanceof Promise ? (n.value = 0, t.value = !0, l.finally(() => {
       t.value = !1;
-    })) : c;
+    })) : l;
   };
   Object.assign(o, {
     exporters: e,
@@ -880,26 +881,26 @@ const To = (o) => {
     handle: (r) => {
       const {
         selected: i = !1,
-        scale: l
+        scale: c
       } = r;
-      let c = [];
-      Array.isArray(i) ? c = i : (i === !0 && (c = n.value), c.length === 0 && (c = s.value?.children ?? []));
-      const u = t(c, "frame");
+      let l = [];
+      Array.isArray(i) ? l = i : (i === !0 && (l = n.value), l.length === 0 && (l = s.value?.children ?? []));
+      const u = t(l, "frame");
       return {
         style: {
           width: u.width,
           height: u.height,
-          scaleX: l,
-          scaleY: l
+          scaleX: c,
+          scaleY: c
         },
-        children: c.map((d) => {
+        children: l.map((d) => {
           const g = d.toJSON();
           return u.left && (g.style.left = (g.style.left ?? 0) - u.left), u.top && (g.style.top = (g.style.top ?? 0) - u.top), g.meta ??= {}, g.meta.inPptIs = "Slide", g;
         }),
         meta: {
           inPptIs: "Pptx",
           inCanvasIs: "Node2D",
-          ...a(c)
+          ...a(l)
         }
       };
     }
@@ -908,7 +909,7 @@ const To = (o) => {
   const {
     state: e
   } = o, t = V(/* @__PURE__ */ new Map()), n = (i) => {
-    Array.isArray(i) ? i.forEach((l) => n(l)) : t.value.set(i.name, i);
+    Array.isArray(i) ? i.forEach((c) => n(c)) : t.value.set(i.name, i);
   };
   Object.assign(o, {
     loaders: t,
@@ -918,34 +919,34 @@ const To = (o) => {
     },
     load: async (i) => {
       e.value = "loading";
-      let l;
+      let c;
       try {
-        for (const c of t.value.values())
-          if (await c.test(i)) {
-            l = await c.load(i);
+        for (const l of t.value.values())
+          if (await l.test(i)) {
+            c = await l.load(i);
             break;
           }
       } finally {
         e.value = void 0;
       }
-      if (l === void 0)
+      if (c === void 0)
         throw new Error(`Failed to load source "${i}"`);
-      return l;
+      return c;
     },
     openFileDialog: (i = {}) => {
       const {
-        multiple: l = !1
+        multiple: c = !1
       } = i;
-      return new Promise((c) => {
+      return new Promise((l) => {
         const u = [];
         for (const v of t.value.values())
           v.accept && u.push(v.accept);
-        const d = u.join(","), { onChange: g, open: h } = jt({
+        const d = u.join(","), { onChange: g, open: h } = Ut({
           accept: d,
           reset: !0,
-          multiple: l
+          multiple: c
         });
-        g((v) => c(v ? Array.from(v) : [])), h();
+        g((v) => l(v ? Array.from(v) : [])), h();
       });
     }
   });
@@ -969,8 +970,8 @@ const To = (o) => {
     currentFrameAabb: n,
     config: s
   } = o, a = O(() => s.value.viewMode === "frame" ? n.value : t.value);
-  function r(i, l) {
-    function c() {
+  function r(i, c) {
+    function l() {
       const g = e.value.view;
       !g.width || !g.height || (i.width = g.width, i.height = g.height, i.dataset.pixelRatio = g.dataset.pixelRatio, i.getContext("2d")?.drawImage(g, 0, 0, g.width, g.height));
     }
@@ -978,7 +979,7 @@ const To = (o) => {
       i._onRendered && e.value.off("rendered", i._onRendered), e.value.input.setTarget(e.value.view);
     }
     function d() {
-      u(), i._onRendered = c, e.value.on("rendered", c), l && e.value.input.setTarget(l);
+      u(), i._onRendered = l, e.value.on("rendered", l), c && e.value.input.setTarget(c);
     }
     return d(), u;
   }
@@ -988,15 +989,15 @@ const To = (o) => {
   }), () => {
     const {
       root: i,
-      currentFrame: l,
-      on: c,
+      currentFrame: c,
+      on: l,
       exec: u
     } = o;
     function d() {
       switch (s.value.viewMode) {
         case "frame":
           i.value?.children.forEach((g) => {
-            g instanceof G && (g.visible = g.equal(l.value));
+            g instanceof G && (g.visible = g.equal(c.value));
           });
           break;
         case "edgeless":
@@ -1007,7 +1008,7 @@ const To = (o) => {
       }
       u("zoomToFit");
     }
-    pe(() => s.value.viewMode, d), c("setCurrentFrame", d), c("setDoc", d);
+    pe(() => s.value.viewMode, d), l("setCurrentFrame", d), l("setDoc", d);
   };
 }, $o = (o) => {
   const {
@@ -1016,16 +1017,16 @@ const To = (o) => {
   function t(s) {
     function a(r) {
       const i = r.text.base.characters;
-      let l = 0, c;
+      let c = 0, l;
       i.forEach((f) => {
         const p = f.lineBox.left + f.lineBox.width;
-        p > l && (c = f, l = p);
+        p > c && (l = f, c = p);
       });
-      const u = {}, d = i.filter((f) => f.lineBox.top === c?.lineBox.top).map((f) => (Object.assign(
+      const u = {}, d = i.filter((f) => f.lineBox.top === l?.lineBox.top).map((f) => (Object.assign(
         u,
         { ...f.parent.style },
         { ...f.parent.parent.style }
-      ), f.content)).join(""), { boundingBox: g } = rt({
+      ), f.content)).join(""), { boundingBox: g } = lt({
         style: {
           ...r.style.toJSON(),
           width: "auto"
@@ -1057,25 +1058,25 @@ const To = (o) => {
       t(s);
       return;
     }
-    function i(l) {
-      if (!l.text?.isValid?.() || typeof l.text?.content != "object")
+    function i(c) {
+      if (!c.text?.isValid?.() || typeof c.text?.content != "object")
         return;
-      const c = l.style.toJSON();
+      const l = c.style.toJSON();
       switch (r) {
         case "autoWidth":
-          c.width = "auto";
+          l.width = "auto";
           break;
         case "autoHeight":
-          c.height = "auto";
+          l.height = "auto";
           break;
       }
-      const { boundingBox: u } = rt({
-        style: c,
-        content: l.text.content
+      const { boundingBox: u } = lt({
+        style: l,
+        content: c.text.content
       });
-      (l.style.width !== u.width || l.style.height !== u.height) && (l.style.width = u.width, l.style.height = u.height, l.requestRedraw());
+      (c.style.width !== u.width || c.style.height !== u.height) && (c.style.width = u.width, c.style.height = u.height, c.requestRedraw());
     }
-    i(s), s.findOne((l) => (l instanceof G && i(l), !1));
+    i(s), s.findOne((c) => (c instanceof G && i(c), !1));
   }
   return Object.assign(o, {
     textFontSizeToFit: t,
@@ -1107,8 +1108,8 @@ const To = (o) => {
     textFontSizeToFit: a,
     textToFit: r,
     log: i,
-    root: l,
-    isFrame: c,
+    root: c,
+    isFrame: l,
     isLock: u,
     getObbInDrawboard: d,
     config: g,
@@ -1133,27 +1134,27 @@ const To = (o) => {
         x = n.value;
       else {
         const U = f.value[0];
-        U && (c(U) ? x = U : x = h(U));
+        U && (l(U) ? x = U : x = h(U));
       }
     let N = t.value.top;
     const L = t.value.left + t.value.width + g.value.frameGap, j = Array.isArray(b), D = e.value.transact(() => {
       const W = (j ? b : [b]).map((he) => {
         const Y = e.value.addElement(he, { parentId: x?.id, regenId: A });
         if (x) {
-          const { width: xe, height: oe } = x.style, ve = xe / 2, ye = oe / 2;
+          const { width: xe, height: ae } = x.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, ce = J > 1 ? ve / J : ye;
+            const J = Y.style.width / Y.style.height, me = J > 1 ? ve : ye * J, ue = J > 1 ? ve / J : ye;
             E(
               Y,
               me / Y.style.width,
-              ce / Y.style.height,
+              ue / Y.style.height,
               {
                 deep: !0,
                 textFontSizeToFit: !0
               }
             );
           }
-          w && (Y.style.left = Math.round(xe - Y.style.width) / 2, Y.style.top = Math.round(oe - Y.style.height) / 2);
+          w && (Y.style.left = Math.round(xe - Y.style.width) / 2, Y.style.top = Math.round(ae - Y.style.height) / 2);
         } else
           w && (Y.style.top = Math.round(N), Y.style.left = Math.round(L), N += Y.style.height + g.value.frameGap);
         return Y;
@@ -1175,9 +1176,9 @@ const To = (o) => {
     b === f.value[0]?.id && (f.value = []), e.value?.deleteElement(b);
   }
   function z(b, k) {
-    $(b)?.setProperties(k);
+    I(b)?.setProperties(k);
   }
-  function $(b) {
+  function I(b) {
     return e.value?.nodeMap?.get(b);
   }
   function E(b, k, x, w = {}) {
@@ -1202,14 +1203,14 @@ const To = (o) => {
       f.value = b ? [b] : [];
   }
   function m(b) {
-    const k = l.value?.children.flatMap((x) => c(x) ? x.children : [x]).filter((x) => "isVisibleInTree" in x && x.isVisibleInTree() && co(b, d(x)) && !u(x)) ?? [];
+    const k = c.value?.children.flatMap((x) => l(x) ? x.children : [x]).filter((x) => "isVisibleInTree" in x && x.isVisibleInTree() && co(b, d(x)) && !u(x)) ?? [];
     return f.value = k, k;
   }
   Object.assign(o, {
     addElement: p,
     deleteElement: _,
     updateElement: z,
-    getElement: $,
+    getElement: I,
     resizeElement: E,
     pointerActivateElement: C,
     selectArea: m
@@ -1223,11 +1224,11 @@ const To = (o) => {
     frameThumbs: a,
     emit: r,
     selection: i,
-    frames: l,
-    config: c
+    frames: c,
+    config: l
   } = o;
   function u(y = {}, f) {
-    const p = qt({
+    const p = Gt({
       ...y,
       id: void 0,
       name: "Frame",
@@ -1236,8 +1237,8 @@ const To = (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 _ = f ?? (s.value > -1 ? s.value + 1 : l.value.length - 1);
+    p.style ??= {}, p.style.left = n.value.left + n.value.width + l.value.frameGap, p.style.width ||= n.value.width, p.style.height ||= n.value.height;
+    const _ = f ?? (s.value > -1 ? s.value + 1 : c.value.length - 1);
     e.value?.addElement(p, { index: _ }), v(_), r("addFrame", _);
   }
   function d(y = s.value) {
@@ -1262,9 +1263,9 @@ const To = (o) => {
     f && (e.value?.deleteElement(f), a.value.splice(y, 1), v(y), r("deleteFrame", y));
   }
   function v(y = s.value) {
-    y = Math.max(0, Math.min(l.value.length - 1, y));
+    y = Math.max(0, Math.min(c.value.length - 1, y));
     const f = s.value;
-    s.value = y, c.value.viewMode === "edgeless" ? i.value = [l.value[y]] : i.value = [], r("setCurrentFrame", y, f);
+    s.value = y, l.value.viewMode === "edgeless" ? i.value = [c.value[y]] : i.value = [], r("setCurrentFrame", y, f);
   }
   Object.assign(o, {
     addFrame: u,
@@ -1274,7 +1275,7 @@ const To = (o) => {
     setCurrentFrame: v
   });
 };
-function Oe(o) {
+function Ie(o) {
   return new Promise((e, t) => {
     o.onerror = (n) => t(new Error(n.target.error)), o.onsuccess = (n) => e(n.target.result);
   });
@@ -1291,7 +1292,7 @@ function No(o, e) {
   });
 }
 function Ro(o) {
-  return Oe(indexedDB.deleteDatabase(o));
+  return Ie(indexedDB.deleteDatabase(o));
 }
 function Bo(o, e) {
   return e.forEach((t) => o.createObjectStore.apply(o, t));
@@ -1301,22 +1302,22 @@ function Ue(o, e, t = "readwrite") {
   return e.map((s) => Yo(n, s));
 }
 function nn(o, e) {
-  return Oe(o.count(e));
+  return Ie(o.count(e));
 }
 function Lo(o, e) {
-  return Oe(o.get(e));
+  return Ie(o.get(e));
 }
 function on(o, e) {
-  return Oe(o.delete(e));
+  return Ie(o.delete(e));
 }
 function Do(o, e, t) {
-  return Oe(o.put(e, t));
+  return Ie(o.put(e, t));
 }
-function ut(o, e) {
-  return Oe(o.add(e));
+function mt(o, e) {
+  return Ie(o.add(e));
 }
 function Vo(o, e, t) {
-  return Oe(o.getAll(e, t));
+  return Ie(o.getAll(e, t));
 }
 function jo(o, e, t) {
   let n = null;
@@ -1355,15 +1356,15 @@ function qo(o, e) {
 function Go(o, e) {
   return IDBKeyRange.lowerBound(o, e);
 }
-const st = "custom", sn = "updates", an = 500;
+const at = "custom", sn = "updates", an = 500;
 function rn(o, e, t) {
   const [n] = Ue(
     o.db,
     [sn]
   ), s = Go(o._dbref, !1);
   return Vo(n, s).then((a) => {
-    o._destroyed || (e?.(n), ie.transact(o.doc, () => {
-      a.forEach((r) => ie.applyUpdate(o.doc, r));
+    o._destroyed || (e?.(n), le.transact(o.doc, () => {
+      a.forEach((r) => le.applyUpdate(o.doc, r));
     }, o, !1), t?.(n));
   }).then(() => Uo(n).then((a) => {
     o._dbref = a + 1;
@@ -1373,7 +1374,7 @@ function rn(o, e, t) {
 }
 function Wo(o, e = !0) {
   return rn(o).then((t) => {
-    (e || o._dbsize >= an) && ut(t, ie.encodeStateAsUpdate(o.doc)).then(() => on(
+    (e || o._dbsize >= an) && mt(t, le.encodeStateAsUpdate(o.doc)).then(() => on(
       t,
       qo(o._dbref, !0)
     )).then(() => nn(t).then((n) => {
@@ -1381,7 +1382,7 @@ function Wo(o, e = !0) {
     }));
   });
 }
-class Ko extends Gt {
+class Ko extends Wt {
   constructor(e, t) {
     super(), this.name = e, this.doc = t, this._db = No(e, (n) => {
       Bo(n, [
@@ -1391,7 +1392,7 @@ class Ko extends Gt {
     }), this.whenSynced = new Promise((n) => this.on("synced", () => n(this))), this._db.then((n) => {
       this.db = n, rn(
         this,
-        (s) => ut(s, ie.encodeStateAsUpdate(t)),
+        (s) => mt(s, le.encodeStateAsUpdate(t)),
         () => {
           this._destroyed || (this.synced = !0, this.emit("synced", this));
         }
@@ -1399,7 +1400,7 @@ class Ko extends Gt {
     }), this._storeUpdate = (n, s) => {
       if (this.db && s !== this) {
         const [a] = Ue(this.db, [sn]);
-        ut(a, n), ++this._dbsize >= an && (this._storeTimeoutId !== null && clearTimeout(this._storeTimeoutId), this._storeTimeoutId = setTimeout(() => {
+        mt(a, n), ++this._dbsize >= an && (this._storeTimeoutId !== null && clearTimeout(this._storeTimeoutId), this._storeTimeoutId = setTimeout(() => {
           Wo(this, !1), this._storeTimeoutId = null;
         }, this._storeTimeout));
       }
@@ -1427,26 +1428,26 @@ class Ko extends Gt {
   }
   get(e) {
     return this._db.then((t) => {
-      const [n] = Ue(t, [st], "readonly");
+      const [n] = Ue(t, [at], "readonly");
       return Lo(n, e);
     });
   }
   set(e, t) {
     return this._db.then((n) => {
-      const [s] = Ue(n, [st]);
+      const [s] = Ue(n, [at]);
       return Do(s, t, e);
     });
   }
   del(e) {
     return this._db.then((t) => {
-      const [n] = Ue(t, [st]);
+      const [n] = Ue(t, [at]);
       return on(n, e);
     });
   }
 }
 class ln extends Un {
-  constructor(e = gt()) {
-    super(), this.id = e, this._yDoc = fe(new ie.Doc({ guid: this.id })), this._yDoc.on("update", (...t) => this.emit("update", ...t)), this._yProps = fe(this._yDoc.getMap("props")), this._propertyAccessor = {
+  constructor(e = wt()) {
+    super(), this.id = e, this._yDoc = fe(new le.Doc({ guid: this.id })), this._yDoc.on("update", (...t) => this.emit("update", ...t)), this._yProps = fe(this._yDoc.getMap("props")), this._propertyAccessor = {
       getProperty: (t) => this._yProps.doc ? this._yProps.get(t) : void 0,
       setProperty: (t, n) => {
         this.transact(() => this._yProps.set(t, n));
@@ -1459,7 +1460,7 @@ class ln extends Un {
   indexeddb;
   _ready = !1;
   _setupUndoManager(e = []) {
-    const t = fe(new ie.UndoManager([
+    const t = fe(new le.UndoManager([
       this._yProps,
       ...e
     ], {
@@ -1521,32 +1522,32 @@ var Jo = Object.defineProperty, Zo = (o, e, t, n) => {
   return s && Jo(e, t, s), s;
 };
 function Qo(o, e = {}, t, n = !1) {
-  const s = qt({
+  const s = Gt({
     ...e,
     id: n ? void 0 : e.id,
     meta: {
       inCanvasIs: "Element2D",
       ...e?.meta ?? {}
     }
-  }), a = s.id, r = new ie.Array();
+  }), a = s.id, r = new le.Array();
   for (const i in s)
     o.set(i, s[i]);
-  return o.set("id", a), o.set("parentId", t), o.set("name", s.name ?? a), o.set("childrenIds", r), o.set("meta", new ie.Map(Object.entries(s.meta ?? {}))), s?.meta?.inCanvasIs === "Element2D" && (o.set("style", new ie.Map(Object.entries(s.style ?? {}))), o.set("background", new ie.Map(Object.entries(s.background ?? {}))), o.set("shape", new ie.Map(Object.entries(s.shape ?? {}))), o.set("fill", new ie.Map(Object.entries(s.fill ?? {}))), o.set("outline", new ie.Map(Object.entries(s.outline ?? {}))), o.set("text", new ie.Map(Object.entries(s.text ?? {}))), o.set("foreground", new ie.Map(Object.entries(s.foreground ?? {}))), o.set("shadow", new ie.Map(Object.entries(s.shadow ?? {})))), {
+  return o.set("id", a), o.set("parentId", t), o.set("name", s.name ?? a), o.set("childrenIds", r), 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: r
   };
 }
 function cn(o, e, t = !1) {
-  const n = [], s = new ie.Map(), { normalized: a, yChildrenIds: r } = Qo(s, o, e, t), i = a.id;
-  return n.push({ id: i, element: s }), a.children?.forEach((l) => {
-    const c = cn(l, i, t);
-    r.push([c[0].id]), n.push(...c);
+  const n = [], s = new le.Map(), { normalized: a, yChildrenIds: r } = Qo(s, o, e, t), i = a.id;
+  return n.push({ id: i, element: s }), a.children?.forEach((c) => {
+    const l = cn(c, i, t);
+    r.push([l[0].id]), n.push(...l);
   }), n;
 }
 class un extends ln {
   _yChildren;
   _yChildrenIds;
-  root = Ce(new kt());
+  root = Ee(new Ct());
   nodeMap = /* @__PURE__ */ new Map();
   get meta() {
     return this.root.meta;
@@ -1572,7 +1573,7 @@ class un extends ln {
   }
   async load(e) {
     return super.load(async () => {
-      await e?.(), this._yChildren.size || (this.init(), await Pe()), this._proxyProps(this.root, this._yProps);
+      await e?.(), this._yChildren.size || (this.init(), await Re()), this._proxyProps(this.root, this._yProps);
       const t = this._yProps.get("meta");
       t && this._proxyProps(this.root.meta, t, !0), this._proxyChildren(this.root, this._yChildrenIds), this._yChildrenIds.forEach((n) => {
         const s = this._yChildren.get(n);
@@ -1621,9 +1622,9 @@ class un extends ln {
   _addElement(e, t = {}) {
     const { parentId: n, index: s, regenId: a } = t, r = cn(e, n, a);
     r.forEach((d) => this._yChildren.set(d.id, d.element));
-    const l = r.map((d) => this._getOrCreateNode(d.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([l.id]), c.appendChild(l)) : (u.insert(s, [l.id]), c.moveChild(l, s))), l;
+    const c = r.map((d) => this._getOrCreateNode(d.element))[0];
+    let l, u;
+    return n ? (l = this.nodeMap.get(n), u = this._yChildren.get(n)?.get("childrenIds")) : (l = this.root, u = this._yChildrenIds), l && u && (s === void 0 ? (u.push([c.id]), l.appendChild(c)) : (u.insert(s, [c.id]), l.moveChild(c, s))), c;
   }
   addElement(e, t) {
     return this.transact(() => this._addElement(e, t));
@@ -1633,7 +1634,7 @@ class un extends ln {
   }
   set(e) {
     const { children: t = [], meta: n = {}, ...s } = e;
-    return this.reset(), this.addElements(t), this.setProperties(s), this._yProps.set("meta", new ie.Map(Object.entries(n))), this;
+    return this.reset(), this.addElements(t), this.setProperties(s), this._yProps.set("meta", new le.Map(Object.entries(n))), this;
   }
   _deleteElement(e) {
     const t = this.nodeMap.get(e), n = this._yChildren.get(e);
@@ -1669,19 +1670,19 @@ class un extends ln {
     if (n) {
       e._propertyAccessor = void 0;
       const r = {};
-      t.forEach((i, l) => {
-        r[l] = e.getProperty(l);
-      }), e._propertyAccessor = fe(s), t.forEach((i, l) => {
-        const c = e.getProperty(l), u = r[l];
-        c !== void 0 && !Object.is(c, u) && (e.setProperty(l, c), e.requestUpdate(l, c, u));
+      t.forEach((i, c) => {
+        r[c] = e.getProperty(c);
+      }), e._propertyAccessor = fe(s), t.forEach((i, c) => {
+        const l = e.getProperty(c), u = r[c];
+        l !== void 0 && !Object.is(l, u) && (e.setProperty(c, l), e.requestUpdate(c, l, u));
       });
     }
     e.setPropertyAccessor(s);
     const a = (r, i) => {
       this._isSelfTransaction(i) || this.transact(() => {
-        const { keysChanged: l, changes: c } = r;
-        l.forEach((u) => {
-          const d = c.keys.get(u), g = d?.oldValue;
+        const { keysChanged: c, changes: l } = r;
+        c.forEach((u) => {
+          const d = l.keys.get(u), g = d?.oldValue;
           switch (d?.action) {
             case "add":
             case "update":
@@ -1706,13 +1707,13 @@ class un extends ln {
         return;
       const r = e.children;
       let i = 0;
-      s.changes.delta.forEach((l) => {
-        if (l.retain !== void 0 && (i += l.retain), l.delete)
-          for (let c = i; c < i + l.delete; c++)
-            r[c]?.remove();
-        if (l.insert) {
-          const c = Array.isArray(l.insert) ? l.insert : [l.insert];
-          c.forEach((u, d) => {
+      s.changes.delta.forEach((c) => {
+        if (c.retain !== void 0 && (i += c.retain), c.delete)
+          for (let l = i; l < i + c.delete; l++)
+            r[l]?.remove();
+        if (c.insert) {
+          const l = Array.isArray(c.insert) ? c.insert : [c.insert];
+          l.forEach((u, d) => {
             let g = this.nodeMap.get(u);
             const h = (v) => {
               e.moveChild(v, i + d);
@@ -1720,7 +1721,7 @@ class un extends ln {
             g ? h(g) : setTimeout(() => {
               g = this.nodeMap.get(u), g && h(g);
             }, 0);
-          }), i += c.length;
+          }), i += l.length;
         }
       });
     };
@@ -1746,8 +1747,8 @@ class un extends ln {
   _getOrCreateNode(e) {
     const t = e.get("id");
     let n = this.nodeMap.get(t);
-    return n || (this.undoManager.addToScope(e), n = Ce(
-      kt.parse({
+    return n || (this.undoManager.addToScope(e), n = Ee(
+      Ct.parse({
         meta: {
           inCanvasIs: e.get("meta")?.get("inCanvasIs")
         }
@@ -1764,12 +1765,12 @@ class un extends ln {
 Zo([
   Ye({ default: "doc" })
 ], un.prototype, "name");
-var es = Object.defineProperty, et = (o, e, t, n) => {
+var es = Object.defineProperty, tt = (o, e, t, n) => {
   for (var s = void 0, a = o.length - 1, r; a >= 0; a--)
     (r = o[a]) && (s = r(e, t, s) || s);
   return s && es(e, t, s), s;
 };
-class tt extends ln {
+class nt extends ln {
   docs = /* @__PURE__ */ new Map();
   set(e = {}) {
     return super.reset(), this.setProperties(e), this;
@@ -1780,18 +1781,18 @@ class tt extends ln {
     return this.docs.set(e.id, e), e;
   }
 }
-et([
+tt([
   Ye()
-], tt.prototype, "name");
-et([
+], nt.prototype, "name");
+tt([
   Ye()
-], tt.prototype, "type");
-et([
+], nt.prototype, "type");
+tt([
   Ye()
-], tt.prototype, "createdAt");
-et([
+], nt.prototype, "createdAt");
+tt([
   Ye()
-], tt.prototype, "updatedAt");
+], nt.prototype, "updatedAt");
 const ts = (o, e) => {
   const {
     workspace: t,
@@ -1800,15 +1801,15 @@ const ts = (o, e) => {
     emit: a,
     selection: r,
     setCurrentFrame: i,
-    state: l,
-    to: c,
+    state: c,
+    to: l,
     waitUntilFontLoad: u,
     config: d,
     load: g
   } = o, h = () => {
     s.value.root.removeChildren(), s.value.root.children.length = 0, n.value = void 0, r.value = [], a("clearDoc");
-  }, v = () => c("json"), y = async (p) => {
-    l.value = "loading";
+  }, v = () => l("json"), y = async (p) => {
+    c.value = "loading";
     const _ = new un(typeof p == "string" ? p : p.id);
     try {
       await u(), h(), await _.load(async () => {
@@ -1819,9 +1820,9 @@ const ts = (o, e) => {
             console.error(z);
           }
         typeof p != "string" && _.set(p);
-      }), _.on("update", Hn((z, $) => a("updateDoc", z, $), 200)), t.value?.addDoc(_), n.value?.destroy(), n.value = _, s.value.root.appendChild(_.root), i(0), a("setDoc", _);
+      }), _.on("update", Hn((z, I) => a("updateDoc", z, I), 200)), t.value?.addDoc(_), n.value?.destroy(), n.value = _, s.value.root.appendChild(_.root), i(0), a("setDoc", _);
     } finally {
-      l.value = void 0;
+      c.value = void 0;
     }
     return _;
   };
@@ -1848,10 +1849,10 @@ const ts = (o, e) => {
     frameThumbs: a,
     log: r,
     fonts: i,
-    registerConfig: l
+    registerConfig: c
   } = o;
-  l("frameScreenshot", !1);
-  async function c() {
+  c("frameScreenshot", !1);
+  async function l() {
     a.value.length = t.value.length;
     for (let h = 0; h < t.value.length; h++)
       await d(h);
@@ -1859,7 +1860,7 @@ const ts = (o, e) => {
   async function u(h) {
     await o.waitUntilFontLoad();
     let v;
-    return h instanceof G ? v = h.toJSON() : v = { ...h }, v.style ??= {}, v.style.top = 0, v.style.left = 0, await Qe({
+    return h instanceof G ? v = h.toJSON() : v = { ...h }, v.style ??= {}, v.style.top = 0, v.style.left = 0, await et({
       width: v.style.width,
       height: v.style.height,
       fonts: i,
@@ -1887,12 +1888,12 @@ const ts = (o, e) => {
     p.fillStyle = "rgba(0, 0, 0, 0)", p.clearRect(0, 0, h.width, h.height);
     const { zoom: _, position: z } = s.value;
     h.width = y.width, h.height = y.height;
-    const $ = y.width * _.x, E = y.height * _.y;
+    const I = y.width * _.x, E = y.height * _.y;
     p.drawImage(
       v,
       (y.left * _.x + z.x) * f,
       (y.top * _.x + z.y) * f,
-      $ * f,
+      I * f,
       E * f,
       0,
       0,
@@ -1901,7 +1902,7 @@ const ts = (o, e) => {
     );
   }
   return Object.assign(o, {
-    snapshot: c,
+    snapshot: l,
     captureElementScreenshot: u,
     captureFrameScreenshot: d,
     renderFrameThumb: g
@@ -1911,7 +1912,7 @@ const ts = (o, e) => {
       config: v
     } = o;
     h("setDoc", (y) => {
-      v.value.frameScreenshot && c();
+      v.value.frameScreenshot && l();
       function f(p) {
         if (v.value.frameScreenshot) {
           const _ = p.getIndex();
@@ -1955,13 +1956,13 @@ const ts = (o, e) => {
 function ss(o, e) {
   return o < e ? -1 : o === e ? 0 : 1;
 }
-function at(o, e) {
+function it(o, e) {
   return o === e;
 }
-function Fe(o) {
+function Ne(o) {
   return typeof o > "u";
 }
-class bt {
+class xt {
   /**
    * First node in the list
    * @type {Object}
@@ -1997,7 +1998,7 @@ class bt {
    * or if the element is undefined.
    */
   add(e, t) {
-    if (Fe(t) && (t = this.nElements), t < 0 || t > this.nElements || Fe(e))
+    if (Ne(t) && (t = this.nElements), t < 0 || t > this.nElements || Ne(e))
       return !1;
     const n = this.createNode(e);
     if (this.nElements === 0 || this.lastNode === null)
@@ -2064,8 +2065,8 @@ class bt {
    * element.
    */
   indexOf(e, t) {
-    const n = t || at;
-    if (Fe(e))
+    const n = t || it;
+    if (Ne(e))
       return -1;
     let s = this.firstNode, a = 0;
     for (; s !== null; ) {
@@ -2112,8 +2113,8 @@ class bt {
    * @return {boolean} true if the list contained the specified element.
    */
   remove(e, t) {
-    const n = t || at;
-    if (this.nElements < 1 || Fe(e))
+    const n = t || it;
+    if (this.nElements < 1 || Ne(e))
       return !1;
     let s = null, a = this.firstNode;
     for (; a !== null; ) {
@@ -2140,8 +2141,8 @@ class bt {
    * @return {boolean} true if this list is equal to the given list.
    */
   equals(e, t) {
-    const n = t || at;
-    return !(e instanceof bt) || this.size() !== e.size() ? !1 : this.equalsAux(this.firstNode, e.firstNode, n);
+    const n = t || it;
+    return !(e instanceof xt) || this.size() !== e.size() ? !1 : this.equalsAux(this.firstNode, e.firstNode, n);
   }
   /**
    * @private
@@ -2260,7 +2261,7 @@ class as {
    * @constructor
    */
   constructor() {
-    this.list = new bt();
+    this.list = new xt();
   }
   /**
    * Inserts the specified element into the end of this queue.
@@ -2397,7 +2398,7 @@ class is {
    * @return {boolean} true if this tree did not already contain the specified element.
    */
   add(e) {
-    return Fe(e) ? !1 : this.insertNode(this.createNode(e)) !== null ? (this.nElements++, !0) : !1;
+    return Ne(e) ? !1 : this.insertNode(this.createNode(e)) !== null ? (this.nElements++, !0) : !1;
   }
   /**
    * Removes all of the elements from this tree.
@@ -2426,7 +2427,7 @@ class is {
    * false otherwise.
    */
   contains(e) {
-    return Fe(e) ? !1 : this.searchNode(this.root, e) !== null;
+    return Ne(e) ? !1 : this.searchNode(this.root, e) !== null;
   }
   /**
    * 搜索元素
@@ -2663,12 +2664,12 @@ class is {
     };
   }
 }
-class At extends is {
+class St extends is {
 }
-function Ie(o, e, t) {
+function Pe(o, e, t) {
   return { pos: o, type: e, box: t };
 }
-function Ge(o) {
+function We(o) {
   const e = "box" in o ? o.box : o;
   return {
     left: e.hl.pos,
@@ -2677,10 +2678,10 @@ function Ge(o) {
     height: e.vb.pos - e.vt.pos
   };
 }
-function St(o) {
+function Mt(o) {
   return o === "vt" ? "vb" : o === "vb" ? "vt" : o === "hl" ? "hr" : o === "hr" ? "hl" : o;
 }
-function it(o) {
+function rt(o) {
   return ["vt", "hl"].includes(o.type);
 }
 const rs = (o) => {
@@ -2696,13 +2697,13 @@ const rs = (o) => {
       return;
     const C = {};
     let m, b, k, x;
-    return E.instanceId ? (C.id = E.instanceId, { top: m, left: b, height: k, width: x } = s(E)) : (C.id = Math.random(), { top: m, left: b, height: k, width: x } = E), C.vt = Ie(m, "vt", C), C.vm = Ie(m + k / 2, "vm", C), C.vb = Ie(m + k, "vb", C), C.hl = Ie(b, "hl", C), C.hm = Ie(b + x / 2, "hm", C), C.hr = Ie(b + x, "hr", C), C;
+    return E.instanceId ? (C.id = E.instanceId, { top: m, left: b, height: k, width: x } = s(E)) : (C.id = Math.random(), { top: m, left: b, height: k, width: x } = E), C.vt = Pe(m, "vt", C), C.vm = Pe(m + k / 2, "vm", C), C.vb = Pe(m + k, "vb", C), C.hl = Pe(b, "hl", C), C.hm = Pe(b + x / 2, "hm", C), C.hr = Pe(b + x, "hr", C), C;
   }
-  const i = O(() => 4), l = O(() => new Set(
+  const i = O(() => 4), c = O(() => new Set(
     [
       t.value[0]?.instanceId
     ].filter(Boolean)
-  )), c = O(() => {
+  )), l = O(() => {
     if (t.value[0])
       return r(t.value[0]);
   }), u = O(() => {
@@ -2714,20 +2715,20 @@ const rs = (o) => {
     const E = [
       ...u.value?.children ?? a.value?.children ?? []
     ];
-    return e.value && u.value?.equal(e.value) && E.push(u.value), E.filter((C) => !l.value.has(C.instanceId)).map((C) => r(C)).filter(Boolean);
+    return e.value && u.value?.equal(e.value) && E.push(u.value), E.filter((C) => !c.value.has(C.instanceId)).map((C) => r(C)).filter(Boolean);
   }), h = O(() => g.value.reduce(
     (E, C) => ([C.vt, C.vm, C.vb].forEach((m) => E.vLines.add(m)), [C.hl, C.hm, C.hr].forEach((m) => E.hLines.add(m)), E),
     {
-      vLines: new At((E, C) => E.pos - C.pos),
-      hLines: new At((E, C) => E.pos - C.pos)
+      vLines: new St((E, C) => E.pos - C.pos),
+      hLines: new St((E, C) => E.pos - C.pos)
     }
   ));
   function v(E) {
     return E.box?.id === -1;
   }
   function y(E, C) {
-    const m = ["vt", "vb"].includes(C.type) ? "vertical" : "horizontal", b = m === "vertical" ? "horizontal" : "vertical", k = it(C);
-    let x = St(C.type);
+    const m = ["vt", "vb"].includes(C.type) ? "vertical" : "horizontal", b = m === "vertical" ? "horizontal" : "vertical", k = rt(C);
+    let x = Mt(C.type);
     if (k) {
       if (C.pos > d.value[x].pos)
         return [];
@@ -2744,14 +2745,14 @@ const rs = (o) => {
       } else if (C.pos > P.pos)
         return;
       const B = v(P);
-      x !== P.type && !B || Be(Ge(C), Ge(P), b) && (!B && T && T.box.id !== P.box.id && Be(Ge(T), Ge(P), m) || (T = P, w.push(P), x = St(x)));
+      x !== P.type && !B || Be(We(C), We(P), b) && (!B && T && T.box.id !== P.box.id && Be(We(T), We(P), m) || (T = P, w.push(P), x = Mt(x)));
     };
     return k ? E.outorderTraversal(M) : E.inorderTraversal(M), w;
   }
   function f(E, C) {
     if (!E.length)
       return [];
-    const m = it(C), b = E[0].pos;
+    const m = rt(C), b = E[0].pos;
     let k = Math.abs(C.pos - b);
     const x = [];
     E = [C].concat(E);
@@ -2774,9 +2775,9 @@ const rs = (o) => {
     }, x);
   }
   const p = O(() => {
-    if (!c.value)
+    if (!l.value)
       return [];
-    const { vLines: E, hLines: C } = h.value, m = c.value, b = { vt: [], vb: [], hl: [], hr: [] }, k = [];
+    const { vLines: E, hLines: C } = h.value, m = l.value, b = { vt: [], vb: [], hl: [], hr: [] }, k = [];
     return [
       { sources: [m.vt, m.vm, m.vb], targets: E },
       { sources: [m.hl, m.hm, m.hr], targets: C }
@@ -2802,7 +2803,7 @@ const rs = (o) => {
       if (T && P && (!v(T) || !v(P))) {
         const A = Math.abs(M.pos - T.pos), N = Math.abs(B.pos - P.pos);
         if (Math.abs(A - N) < i.value) {
-          const L = it(M);
+          const L = rt(M);
           k.push({
             target: T,
             source: M,
@@ -2880,7 +2881,7 @@ const rs = (o) => {
       return M;
     });
   });
-  function $(E = !1) {
+  function I(E = !1) {
     const C = [], m = [];
     for (const b of p.value) {
       const { target: k, source: x, type: w } = b, T = k.box, M = x.box;
@@ -2901,7 +2902,7 @@ const rs = (o) => {
   }
   return Object.assign(o, {
     auxiliaryLines: z,
-    getAdsorptionPoints: $
+    getAdsorptionPoints: I
   }), {
     name: "mce:auxiliary"
   };
@@ -2914,7 +2915,7 @@ const rs = (o) => {
   } = o, a = V();
   async function r() {
     const u = e.value.length === 1 ? [e.value[0].toJSON()] : e.value.map((d) => d.toJSON());
-    if (Et) {
+    if (Tt) {
       const d = "text/html";
       await navigator.clipboard.write([
         new ClipboardItem({
@@ -2929,8 +2930,8 @@ const rs = (o) => {
   async function i() {
     await r(), t("delete");
   }
-  async function l() {
-    if (Et) {
+  async function c() {
+    if (Tt) {
       const u = await navigator.clipboard.read(), d = [];
       for (const g of u)
         for (const h of g.types) {
@@ -2940,7 +2941,7 @@ const rs = (o) => {
           else
             switch (v.type) {
               case "text/plain":
-                d.push(lt(await v.text()));
+                d.push(ut(await v.text()));
                 break;
               case "text/html": {
                 const y = new DOMParser().parseFromString(await v.text(), "text/html"), f = y.querySelector("mce-clipboard");
@@ -2955,7 +2956,7 @@ const rs = (o) => {
                       new Uint8Array(
                         atob(
                           p.getAttribute("data-clipboard")?.replace(/\s+/g, "") ?? ""
-                        ).split("").map(($) => $.charCodeAt(0))
+                        ).split("").map((I) => I.charCodeAt(0))
                       )
                     )
                   ), z = new Blob([_], {
@@ -2984,8 +2985,8 @@ const rs = (o) => {
       regenId: !0
     });
   }
-  async function c() {
-    await r(), await l();
+  async function l() {
+    await r(), await c();
   }
   return Object.assign(o, {
     copiedData: a
@@ -2994,8 +2995,8 @@ const rs = (o) => {
     commands: [
       { command: "copy", handle: r },
       { command: "cut", handle: i },
-      { command: "paste", handle: l },
-      { command: "duplicate", handle: c }
+      { command: "paste", handle: c },
+      { command: "duplicate", handle: l }
     ],
     hotkeys: [
       { command: "copy", key: "CmdOrCtrl+c", editable: !1 },
@@ -3059,7 +3060,7 @@ const rs = (o) => {
     isFrame: r,
     doc: i
   } = o;
-  function l() {
+  function c() {
     const d = s.value;
     if (d.length === 0)
       return;
@@ -3080,7 +3081,7 @@ const rs = (o) => {
       }), d.forEach((v) => e(v.id));
     });
   }
-  function c() {
+  function l() {
     const d = s.value[0];
     if (!d)
       return;
@@ -3096,13 +3097,13 @@ const rs = (o) => {
     });
   }
   function u() {
-    s.value.length === 1 ? r(s.value[0]) && c() : s.value.length > 1 && l();
+    s.value.length === 1 ? r(s.value[0]) && l() : s.value.length > 1 && c();
   }
   return {
     name: "mce:frame",
     commands: [
-      { command: "frame", handle: l },
-      { command: "unframe", handle: c },
+      { command: "frame", handle: c },
+      { command: "unframe", handle: l },
       { command: "frame/unframe", handle: u }
     ],
     hotkeys: [
@@ -3114,15 +3115,15 @@ const rs = (o) => {
     fonts: t,
     to: n
   } = o, s = e.gifWorkerUrl;
-  return Yt.gifWorkerUrl = s, {
+  return qt.gifWorkerUrl = s, {
     name: "mce:gif",
     exporters: [
       {
         name: "gif",
         handle: async (a) => {
-          const { Encoder: r } = await import("modern-gif"), { onProgress: i, ...l } = a, c = n("json", l), { startTime: u, endTime: d } = c.meta, g = Math.floor(c.style.width), h = Math.floor(c.style.height), v = new r({ width: g, height: h, workerUrl: s });
-          return await Qe({
-            data: c,
+          const { Encoder: r } = await import("modern-gif"), { onProgress: i, ...c } = a, l = n("json", c), { startTime: u, endTime: d } = l.meta, g = Math.floor(l.style.width), h = Math.floor(l.style.height), v = new r({ width: g, height: h, workerUrl: s });
+          return await et({
+            data: l,
             width: g,
             height: h,
             fonts: t,
@@ -3165,7 +3166,7 @@ const rs = (o) => {
       }), u.forEach((h) => a(h.id));
     });
   }
-  function l() {
+  function c() {
     const u = n.value[0];
     if (!u)
       return;
@@ -3180,15 +3181,15 @@ const rs = (o) => {
       }), a(u.id);
     });
   }
-  function c() {
-    n.value.length === 1 ? l() : n.value.length > 1 && i();
+  function l() {
+    n.value.length === 1 ? c() : n.value.length > 1 && i();
   }
   return {
     name: "mce:group",
     commands: [
       { command: "group", handle: i },
-      { command: "ungroup", handle: l },
-      { command: "group/ungroup", handle: c }
+      { command: "ungroup", handle: c },
+      { command: "group/ungroup", handle: l }
     ],
     hotkeys: [
       { command: "group/ungroup", key: "CmdOrCtrl+g" }
@@ -3206,8 +3207,8 @@ const rs = (o) => {
     e.value?.undo();
   }
   return t("setDoc", (i) => {
-    i.on("history", (l) => {
-      n.value = l.canUndo(), s.value = l.canRedo();
+    i.on("history", (c) => {
+      n.value = c.canUndo(), s.value = c.canRedo();
     });
   }), Object.assign(o, {
     canUndo: n,
@@ -3233,11 +3234,11 @@ const rs = (o) => {
     to: s,
     fonts: a,
     upload: r
-  } = o, i = async (u, d) => n(await ct(u), {
+  } = o, i = async (u, d) => n(await dt(u), {
     sizeToFit: !0,
     positionToFit: !0,
     ...d
-  }), l = () => {
+  }), c = () => {
     e("drawing", {
       content: "image",
       callback: (u) => {
@@ -3245,11 +3246,11 @@ const rs = (o) => {
       }
     });
   };
-  function c(u) {
+  function l(u) {
     return {
       name: u,
       handle: async (d) => {
-        const g = await s("json", d), h = await Qe({
+        const g = await s("json", d), h = await et({
           data: g,
           fonts: a,
           width: g.style.width,
@@ -3268,19 +3269,19 @@ const rs = (o) => {
     name: "mce:image",
     commands: [
       { command: "insertImage", handle: i },
-      { command: "drawImage", handle: l }
+      { command: "drawImage", handle: c }
     ],
     exporters: [
-      c("jpeg"),
-      c("png"),
-      c("webp")
+      l("jpeg"),
+      l("png"),
+      l("webp")
     ],
     loaders: [
       {
         name: "image",
-        accept: Qt.join(","),
-        test: (u) => !!(u instanceof Blob && u.type.startsWith("image/") || u instanceof File && en.test(u.name)),
-        load: async (u) => await ct(await r(u))
+        accept: en.join(","),
+        test: (u) => !!(u instanceof Blob && u.type.startsWith("image/") || u instanceof File && ct.test(u.name)),
+        load: async (u) => await dt(await r(u))
       }
     ]
   };
@@ -3297,9 +3298,9 @@ const rs = (o) => {
         const r = await t({ multiple: !0 });
         return n((await Promise.all(
           r.map(async (i) => {
-            const l = await e(i);
-            let c;
-            return l.meta?.inEditorIs === "Doc" ? c = l.children ?? [] : c = [l], c;
+            const c = await e(i);
+            let l;
+            return c.meta?.inEditorIs === "Doc" ? l = c.children ?? [] : l = [c], l;
           })
         )).flat(), {
           ...a,
@@ -3316,14 +3317,14 @@ const rs = (o) => {
   const {
     selection: e
   } = o;
-  function t(i, l) {
+  function t(i, c) {
     (Array.isArray(i) ? i : [i]).forEach((u) => {
       const d = u.getParent();
       if (!d)
         return;
       let g = u.getIndex();
       const h = d.children.length - 1, v = 0;
-      switch (l) {
+      switch (c) {
         case "bringForward":
           g = Math.min(d.children.length - 1, g + 1);
           break;
@@ -3444,7 +3445,7 @@ const rs = (o) => {
     selection: s,
     textSelection: a,
     config: r
-  } = o, i = O(() => s.value.length > 0), l = O(() => ({
+  } = o, i = O(() => s.value.length > 0), c = O(() => ({
     key: "export",
     children: [
       { key: "saveAs:png" },
@@ -3457,14 +3458,14 @@ const rs = (o) => {
       { key: "saveAs:pptx" },
       { key: "saveAs:json" }
     ]
-  })), c = O(() => ({
+  })), l = O(() => ({
     key: "file",
     children: [
       { key: "new" },
       { key: "open" },
       { type: "divider" },
       { key: "import" },
-      l.value,
+      c.value,
       { type: "divider" },
       { key: "preferences" }
     ]
@@ -3537,7 +3538,7 @@ const rs = (o) => {
   })), z = O(() => [
     { key: "hide/show", disabled: !i.value },
     { key: "lock/unlock", disabled: !i.value }
-  ]), $ = O(() => ({
+  ]), I = O(() => ({
     key: "object",
     children: [
       ...f.value,
@@ -3561,10 +3562,10 @@ const rs = (o) => {
       ...E.value
     ]
   })), m = O(() => [
-    c.value,
+    l.value,
     h.value,
     y.value,
-    $.value,
+    I.value,
     C.value
   ]), b = O(() => s.value.length > 0 ? a.value ? [
     ...d.value
@@ -3578,13 +3579,13 @@ const rs = (o) => {
     C.value,
     _.value,
     { type: "divider" },
-    l.value
+    c.value
   ] : [
     d.value[2],
     { type: "divider" },
     ...m.value,
     { type: "divider" },
-    l.value
+    c.value
   ]);
   return Object.assign(o, {
     mainMenu: m,
@@ -3644,7 +3645,7 @@ const rs = (o) => {
       {
         name: "mp4",
         handle: async (n) => {
-          const { MP4Encoder: s } = await import("modern-mp4"), { onProgress: a, ...r } = n, i = t("json", r), { startTime: l, endTime: c } = i.meta, u = Math.floor(i.style.width / 2) * 2, d = Math.floor(i.style.height / 2) * 2, g = 30, h = {
+          const { MP4Encoder: s } = await import("modern-mp4"), { onProgress: a, ...r } = n, i = t("json", r), { startTime: c, endTime: l } = i.meta, u = Math.floor(i.style.width / 2) * 2, d = Math.floor(i.style.height / 2) * 2, g = 30, h = {
             width: u,
             height: d,
             framerate: g,
@@ -3663,20 +3664,20 @@ const rs = (o) => {
             throw new Error("Failed to parse encoding configuration");
           const _ = new s(h);
           let z = 1;
-          return await Qe({
+          return await et({
             data: i,
             width: u,
             height: d,
             fonts: e,
-            onFrame: async ($, { duration: E, progress: C }) => {
-              const m = await createImageBitmap(new ImageData($, u, d));
+            onFrame: async (I, { duration: E, progress: C }) => {
+              const m = await createImageBitmap(new ImageData(I, u, d));
               await _.encode({
                 data: m,
                 timestamp: z,
                 duration: E
               }), m.close(), z += E, a?.(C);
             },
-            keyframes: Array.from({ length: ~~((c - l) / v) }, ($, E) => l + E * v)
+            keyframes: Array.from({ length: ~~((l - c) / v) }, (I, E) => c + E * v)
           }), await _.flush();
         }
       }
@@ -3770,10 +3771,10 @@ const rs = (o) => {
       {
         name: "pptx",
         handle: async (i) => {
-          const { idocToPptx: l } = await import("modern-openxml"), c = await s("json", i);
+          const { idocToPptx: c } = await import("modern-openxml"), l = await s("json", i);
           return new Blob([
-            await l({
-              ...c,
+            await c({
+              ...l,
               fonts: a
             })
           ], {
@@ -3788,15 +3789,15 @@ const rs = (o) => {
         accept: ".pptx",
         test: (i) => !!(i instanceof Blob && i.type.startsWith("application/vnd.openxmlformats-officedocument.presentationml.presentation") || i instanceof File && r.test(i.name)),
         load: async (i) => {
-          const { pptxToIdoc: l } = await import("modern-openxml"), c = await import("modern-openxml/presetShapeDefinitions").then((d) => d.default), u = await l(await i.arrayBuffer(), {
-            presetShapeDefinitions: c,
+          const { pptxToIdoc: c } = await import("modern-openxml"), l = await import("modern-openxml/presetShapeDefinitions").then((d) => d.default), u = await c(await i.arrayBuffer(), {
+            presetShapeDefinitions: l,
             upload: async (d, g) => {
               const h = g.image;
-              let v = zt(g.image);
+              let v = Ot(g.image);
               const y = As(d);
               if (!v) {
                 const f = Ss(y);
-                f && (v = zt(f));
+                f && (v = Ot(f));
               }
               return await t(
                 new File([y], h, {
@@ -3815,7 +3816,7 @@ const rs = (o) => {
       }
     ]
   };
-}, Mt = {
+}, zt = {
   jpeg: "image/jpeg",
   jpg: "image/jpeg",
   png: "image/png",
@@ -3826,9 +3827,9 @@ const rs = (o) => {
   emf: "image/emf",
   wmf: "image/wmf"
 };
-function zt(o) {
+function Ot(o) {
   const e = o.split("."), t = e[e.length - 1].toLowerCase();
-  return t in Mt ? Mt[t] : null;
+  return t in zt ? zt[t] : null;
 }
 function As(o) {
   const e = atob(o), t = e.length, n = new ArrayBuffer(t), s = new Uint8Array(n);
@@ -3898,7 +3899,7 @@ const Ms = (o) => {
           selected: !0,
           ...r
         });
-        i instanceof Blob || (i = new Blob([JSON.stringify(i)], { type: "application/json" })), Wt(i, `${a}.${n}`);
+        i instanceof Blob || (i = new Blob([JSON.stringify(i)], { type: "application/json" })), Kt(i, `${a}.${n}`);
       } }
     ]
   };
@@ -3914,22 +3915,22 @@ const Ms = (o) => {
     e.value = [];
   }
   function a() {
-    const l = e.value[0]?.parent;
-    l instanceof G && (e.value = [l]);
+    const c = e.value[0]?.parent;
+    c instanceof G && (e.value = [c]);
   }
   function r() {
-    const l = e.value[0];
-    if (!l)
+    const c = e.value[0];
+    if (!c)
       return;
-    const c = l.previousSibling;
-    c instanceof G && !l.equal(c) && (e.value = [c]);
+    const l = c.previousSibling;
+    l instanceof G && !c.equal(l) && (e.value = [l]);
   }
   function i() {
-    const l = e.value[0];
-    if (!l)
+    const c = e.value[0];
+    if (!c)
       return;
-    const c = l.nextSibling;
-    c instanceof G && !l.equal(c) && (e.value = [c]);
+    const l = c.nextSibling;
+    l instanceof G && !c.equal(l) && (e.value = [l]);
   }
   return {
     name: "mce:select",
@@ -3954,18 +3955,18 @@ const Ms = (o) => {
     t,
     exec: n,
     addElement: s
-  } = o, a = (l = t("clickEditText"), c = {}) => {
-    const { style: u, ...d } = c;
-    return s(lt(l, u), {
+  } = o, a = (c = t("clickEditText"), l = {}) => {
+    const { style: u, ...d } = l;
+    return s(ut(c, u), {
       sizeToFit: !0,
       positionToFit: !0,
       ...d
     });
-  }, r = (l, c) => {
+  }, r = (c, l) => {
     e("drawing", {
       content: "text",
       callback: (u) => {
-        n("insertText", l, { ...c, position: u });
+        n("insertText", c, { ...l, position: u });
       }
     });
   }, i = /\.txt$/i;
@@ -3979,8 +3980,8 @@ const Ms = (o) => {
       {
         name: "txt",
         accept: ".txt",
-        test: (l) => !!(l instanceof Blob && l.type.startsWith("text/plain") || l instanceof File && i.test(l.name)),
-        load: async (l) => lt(await l.text())
+        test: (c) => !!(c instanceof Blob && c.type.startsWith("text/plain") || c instanceof File && i.test(c.name)),
+        load: async (c) => ut(await c.text())
       }
     ]
   };
@@ -4014,10 +4015,10 @@ const Ms = (o) => {
     loaders: [
       {
         name: "url",
-        test: (e) => typeof e == "string" && e.startsWith("http"),
+        test: (e) => typeof e == "string" && (e.startsWith("http") || ct.test(e)),
         load: async (e) => {
-          if (en.test(e) || await o(e))
-            return await ct(e);
+          if (ct.test(e) || await o(e))
+            return await dt(e);
           throw new Error(`Failed to load url, ${e}`);
         }
       }
@@ -4067,7 +4068,7 @@ const Ms = (o) => {
       { command: "hide/show", key: "Shift+CmdOrCtrl+h" }
     ]
   };
-}, Ot = { left: 0, top: 0, bottom: 0, right: 0 }, Rs = (o) => {
+}, $t = { left: 0, top: 0, bottom: 0, right: 0 }, Rs = (o) => {
   const {
     camera: e,
     drawboardAabb: t,
@@ -4077,11 +4078,11 @@ const Ms = (o) => {
     registerConfig: r,
     selection: i
   } = o;
-  r("zoomToFitOffset", { ...Ot });
-  function l() {
+  r("zoomToFitOffset", { ...$t });
+  function c() {
     e.value.addZoom(0.25);
   }
-  function c() {
+  function l() {
     e.value.addZoom(-0.25);
   }
   function u() {
@@ -4089,19 +4090,19 @@ const Ms = (o) => {
   }
   function d(y, f = !1) {
     const p = f ? a.value : n.value, _ = {
-      ...Ot,
+      ...$t,
       ...s.value.zoomToFitOffset
     };
     s.value.scrollbar && (_.right += 8, _.bottom += 8), s.value.ruler && (_.left += 16, _.top += 16);
-    const z = t.value.width - (_.left + _.right), $ = t.value.height - (_.top + _.bottom), E = p.left, C = p.top, m = p.width, b = p.height;
+    const z = t.value.width - (_.left + _.right), I = t.value.height - (_.top + _.bottom), E = p.left, C = p.top, m = p.width, b = p.height;
     if (m && b) {
-      const k = z / m, x = $ / b;
+      const k = z / m, x = I / b;
       e.value.setZoom(
         y === "contain" ? Math.min(k, x) : Math.max(k, x)
       );
       const w = e.value.zoom.x;
       let T = _.left, M = _.top;
-      k < x ? M += ($ - b * w) / 2 : T += (z - m * w) / 2, e.value.position.set(
+      k < x ? M += (I - b * w) / 2 : T += (z - m * w) / 2, e.value.position.set(
         -E * w + T,
         -C * w + M
       );
@@ -4119,8 +4120,8 @@ const Ms = (o) => {
   return {
     name: "mce:zoom",
     commands: [
-      { command: "zoomIn", handle: l },
-      { command: "zoomOut", handle: c },
+      { command: "zoomIn", handle: c },
+      { command: "zoomOut", handle: l },
       { command: "zoomTo100", handle: u },
       { command: "zoomToFit", handle: g },
       { command: "zoomToCover", handle: h },
@@ -4144,9 +4145,9 @@ const Ms = (o) => {
         drawboardDom: y,
         config: f
       } = o;
-      pe(() => f.value.viewMode, g), Xt(y, (p) => {
-        const { left: _, top: z, width: $, height: E } = p[0].contentRect, { left: C = _, top: m = z } = y.value?.getBoundingClientRect() ?? {};
-        t.value = { left: C, top: m, width: $, height: E }, g();
+      pe(() => f.value.viewMode, g), Ht(y, (p) => {
+        const { left: _, top: z, width: I, height: E } = p[0].contentRect, { left: C = _, top: m = z } = y.value?.getBoundingClientRect() ?? {};
+        t.value = { left: C, top: m, width: I, height: E }, g();
       });
     }
   };
@@ -4181,7 +4182,7 @@ const Ms = (o) => {
   Ns,
   Rs
 ];
-class Le extends Gt {
+class Le extends Wt {
   static injectionKey = Symbol.for("EditorKey");
   debug = V(!1);
   onEmit;
@@ -4233,11 +4234,11 @@ class Le extends Gt {
       const {
         commands: r = [],
         hotkeys: i = [],
-        loaders: l = [],
-        exporters: c = [],
+        loaders: c = [],
+        exporters: l = [],
         events: u
       } = a;
-      if (this.registerCommand(r), this.registerHotkey(i), this.registerLoader(l), this.registerExporter(c), u)
+      if (this.registerCommand(r), this.registerHotkey(i), this.registerLoader(c), this.registerExporter(l), u)
         for (const d in u)
           this.on(d, u[d]);
     };
@@ -4284,7 +4285,7 @@ function de() {
 function Ls(o = new Le()) {
   return De(Le.injectionKey, o), o;
 }
-function wt() {
+function _t() {
   return {
     icon: {
       type: [String, Function, Object, Array]
@@ -4298,9 +4299,9 @@ function wt() {
 const dn = X({
   name: "MceSvgIcon",
   inheritAttrs: !1,
-  props: wt(),
+  props: _t(),
   setup(o, { attrs: e }) {
-    return () => H(o.tag, Ne(e, { style: null }), {
+    return () => H(o.tag, Oe(e, { style: null }), {
       default: () => [
         F("svg", {
           class: "mce-icon__svg",
@@ -4321,9 +4322,9 @@ const dn = X({
       ]
     });
   }
-}), $t = X({
+}), It = X({
   name: "MceComponentIcon",
-  props: wt(),
+  props: _t(),
   setup(o, { slots: e }) {
     return () => H(o.tag, null, {
       default: () => [
@@ -4341,7 +4342,7 @@ function Ds(o) {
       const n = yn(o);
       if (!n)
         return {
-          component: $t
+          component: It
         };
       let s = n;
       if (typeof s == "string" && (s = s.trim(), s.startsWith("$") && (s = e.aliases?.[s.slice(1)])), s || console.warn(`Could not find aliased icon "${n}"`), Array.isArray(s))
@@ -4351,10 +4352,10 @@ function Ds(o) {
         };
       if (typeof s != "string")
         return {
-          component: $t,
+          component: It,
           icon: s
         };
-      const a = Object.keys(e.sets).find((l) => typeof s == "string" && s.startsWith(`${l}:`)), r = a ? s.slice(a.length + 1) : s;
+      const a = Object.keys(e.sets).find((c) => typeof s == "string" && s.startsWith(`${c}:`)), r = a ? s.slice(a.length + 1) : s;
       return {
         component: e.sets[a ?? e.defaultSet].component,
         icon: r
@@ -4374,7 +4375,7 @@ const Vs = {
   component: dn
 }, mn = Symbol.for("mce:icons");
 function Us(o = {}) {
-  return Kt({
+  return Jt({
     defaultSet: "svg",
     aliases: Vs,
     sets: {
@@ -4382,7 +4383,7 @@ function Us(o = {}) {
     }
   }, o);
 }
-const dt = Symbol.for("MceOverlaySymbol"), nt = tn({
+const ht = Symbol.for("MceOverlaySymbol"), qe = tn({
   location: String,
   offset: Number,
   target: Object,
@@ -4409,11 +4410,11 @@ function hn(o = {}) {
   };
 }
 function Ys(o = {}) {
-  let e = Se(dt, null);
-  return e || (e = hn(o), De(dt, e)), e;
+  let e = Se(ht, null);
+  return e || (e = hn(o), De(ht, e)), e;
 }
 function qs() {
-  const o = Se(dt, Hs()), e = Ze();
+  const o = Se(ht, Hs()), e = Qe();
   if (!e)
     throw new Error("Failed to useOverlayRoot, vm is null");
   const t = o.register(e.uid);
@@ -4449,8 +4450,8 @@ const Gs = tn({
   __name: "Auxiliary",
   setup(o) {
     const { auxiliaryLines: e } = de();
-    return (t, n) => (I(), R("div", Zs, [
-      (I(!0), R(ne, null, _e(S(e), (s, a) => (I(), R("div", {
+    return (t, n) => ($(), R("div", Zs, [
+      ($(!0), R(se, null, _e(S(e), (s, a) => ($(), R("div", {
         key: a,
         class: be(s.class),
         style: q({
@@ -4465,7 +4466,7 @@ const Gs = tn({
 });
 function ea(o, e = "content") {
   const t = yo(), n = V();
-  if (yt) {
+  if (bt) {
     const s = new ResizeObserver((a) => {
       o?.(a, s), a.length && (e === "content" ? n.value = a[0].contentRect : n.value = a[0].target.getBoundingClientRect());
     });
@@ -4482,7 +4483,7 @@ function ea(o, e = "content") {
     contentRect: bn(n)
   };
 }
-const Ke = Symbol.for("mce:layout"), fn = Symbol.for("mce:layout-item"), It = 1e3;
+const Je = Symbol.for("mce:layout"), fn = Symbol.for("mce:layout-item"), Ft = 1e3;
 function ta() {
   return {
     overlaps: {
@@ -4505,7 +4506,7 @@ function na() {
   };
 }
 function oa() {
-  const o = Se(Ke);
+  const o = Se(Je);
   if (!o)
     throw new Error("[mce] Could not find injected layout");
   return {
@@ -4515,12 +4516,12 @@ function oa() {
   };
 }
 function sa(o) {
-  const e = Se(Ke);
+  const e = Se(Je);
   if (!e)
     throw new Error("[mce] Could not find injected layout");
-  const t = o.id ?? `layout-item-${Lt()}`, n = Ze();
+  const t = o.id ?? `layout-item-${Dt()}`, n = Qe();
   De(fn, { id: t });
-  const s = Je(!1);
+  const s = Ze(!1);
   wn(() => s.value = !0), xn(() => s.value = !1);
   const {
     layoutItemStyles: a,
@@ -4536,12 +4537,12 @@ function aa(o, e, t, n) {
   let s = { top: 0, left: 0, right: 0, bottom: 0 };
   const a = [{ id: "", layer: { ...s } }];
   for (const r of o) {
-    const i = e.get(r), l = t.get(r), c = n.get(r);
-    if (!i || !l || !c)
+    const i = e.get(r), c = t.get(r), l = n.get(r);
+    if (!i || !c || !l)
       continue;
     const u = {
       ...s,
-      [i.value]: Number.parseInt(String(s[i.value]), 10) + (c.value ? Number.parseInt(String(l.value), 10) : 0)
+      [i.value]: Number.parseInt(String(s[i.value]), 10) + (l.value ? Number.parseInt(String(c.value), 10) : 0)
     };
     a.push({
       id: r,
@@ -4551,7 +4552,7 @@ function aa(o, e, t, n) {
   return a;
 }
 function ia(o) {
-  const e = Se(Ke, null), t = O(() => e ? e.rootZIndex.value - 100 : It), n = V([]), s = Ce(/* @__PURE__ */ new Map()), a = Ce(/* @__PURE__ */ new Map()), r = Ce(/* @__PURE__ */ new Map()), i = Ce(/* @__PURE__ */ new Map()), l = Ce(/* @__PURE__ */ new Map()), { resizeRef: c, contentRect: u } = ea(), d = O(() => {
+  const e = Se(Je, null), t = O(() => e ? e.rootZIndex.value - 100 : Ft), n = V([]), s = Ee(/* @__PURE__ */ new Map()), a = Ee(/* @__PURE__ */ new Map()), r = Ee(/* @__PURE__ */ new Map()), i = Ee(/* @__PURE__ */ new Map()), c = Ee(/* @__PURE__ */ new Map()), { resizeRef: l, contentRect: u } = ea(), d = O(() => {
     const C = /* @__PURE__ */ new Map(), m = o.overlaps ?? [];
     for (const b of m.filter((k) => k.includes(":"))) {
       const [k, x] = b.split(":");
@@ -4568,11 +4569,11 @@ function ia(o) {
       m.push(...k);
     }
     return aa(m, s, a, i);
-  }), h = O(() => !Array.from(l.values()).some((C) => C.value)), v = O(() => g.value[g.value.length - 1].layer), y = Ee(() => ({
-    "--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),
+  }), h = O(() => !Array.from(c.values()).some((C) => C.value)), v = O(() => g.value[g.value.length - 1].layer), y = Te(() => ({
+    "--mce-layout-left": Ge(v.value.left),
+    "--mce-layout-right": Ge(v.value.right),
+    "--mce-layout-top": Ge(v.value.top),
+    "--mce-layout-bottom": Ge(v.value.bottom),
     ...h.value ? void 0 : { transition: "none" }
   })), f = O(() => g.value.slice(1).map(({ id: C }, m) => {
     const { layer: b } = g.value[m], k = a.get(C), x = s.get(C);
@@ -4582,10 +4583,10 @@ function ia(o) {
       size: Number(k.value),
       position: x.value
     };
-  })), p = (C) => f.value.find((m) => m.id === C), _ = Ze(), z = Je(!1);
+  })), p = (C) => f.value.find((m) => m.id === C), _ = Qe(), z = Ze(!1);
   He(() => {
     z.value = !0;
-  }), De(Ke, {
+  }), De(Je, {
     register: (C, {
       id: m,
       order: b,
@@ -4596,7 +4597,7 @@ function ia(o) {
       disableTransitions: M,
       absolute: P
     }) => {
-      r.set(m, b), s.set(m, k), a.set(m, x), i.set(m, T), M && l.set(m, M);
+      r.set(m, b), s.set(m, k), a.set(m, x), i.set(m, T), M && c.set(m, M);
       const A = je(fn, _?.vnode).indexOf(C);
       A > -1 ? n.value.splice(A, 0, m) : n.value.push(m);
       const N = O(() => f.value.findIndex((U) => U.id === m)), L = O(() => t.value + g.value.length * 2 - N.value * 2), j = O(() => {
@@ -4604,22 +4605,22 @@ function ia(o) {
           [k.value]: 0,
           zIndex: L.value,
           transform: `translate${U ? "X" : "Y"}(${(T.value ? 0 : -(he === 0 ? 100 : he)) * (W || Z ? -1 : 1)}${Y})`,
-          position: P.value || t.value !== It ? "absolute" : "fixed",
+          position: P.value || t.value !== Ft ? "absolute" : "fixed",
           ...h.value ? void 0 : { transition: "none" }
         };
         if (!z.value)
           return xe;
-        const oe = f.value[N.value];
-        oe || uo(`[mce] Could not find layout item "${m}"`);
+        const ae = f.value[N.value];
+        ae || uo(`[mce] Could not find layout item "${m}"`);
         const ve = d.value.get(m);
-        return ve && (oe[ve.position] += ve.amount), {
+        return ve && (ae[ve.position] += ve.amount), {
           ...xe,
-          height: U ? `calc(100% - ${oe.top}px - ${oe.bottom}px)` : w.value ? `${w.value}px` : void 0,
-          left: W ? void 0 : `${oe.left}px`,
-          right: W ? `${oe.right}px` : void 0,
-          top: k.value !== "bottom" ? `${oe.top}px` : void 0,
-          bottom: k.value !== "top" ? `${oe.bottom}px` : void 0,
-          width: U ? w.value ? `${w.value}px` : void 0 : `calc(100% - ${oe.left}px - ${oe.right}px)`
+          height: U ? `calc(100% - ${ae.top}px - ${ae.bottom}px)` : w.value ? `${w.value}px` : void 0,
+          left: W ? void 0 : `${ae.left}px`,
+          right: W ? `${ae.right}px` : void 0,
+          top: k.value !== "bottom" ? `${ae.top}px` : void 0,
+          bottom: k.value !== "top" ? `${ae.bottom}px` : void 0,
+          width: U ? w.value ? `${w.value}px` : void 0 : `calc(100% - ${ae.left}px - ${ae.right}px)`
         };
       }), D = O(() => ({
         zIndex: L.value - 1
@@ -4627,7 +4628,7 @@ function ia(o) {
       return { layoutItemStyles: j, layoutItemScrimStyles: D, zIndex: L };
     },
     unregister: (C) => {
-      r.delete(C), s.delete(C), a.delete(C), i.delete(C), l.delete(C), n.value = n.value.filter((m) => m !== C);
+      r.delete(C), s.delete(C), a.delete(C), i.delete(C), c.delete(C), n.value = n.value.filter((m) => m !== C);
     },
     mainRect: v,
     mainStyles: y,
@@ -4636,32 +4637,32 @@ function ia(o) {
     layoutRect: u,
     rootZIndex: t
   });
-  const $ = Ee(() => [
+  const I = Te(() => [
     "mce-layout",
     { "mce-layout--full-height": o.fullHeight }
-  ]), E = Ee(() => ({
+  ]), E = Te(() => ({
     zIndex: e ? t.value : void 0,
     position: e ? "relative" : void 0,
     overflow: e ? "hidden" : void 0
   }));
   return {
-    layoutClasses: $,
+    layoutClasses: I,
     layoutStyles: E,
     getLayoutItem: p,
     items: f,
     layoutRect: u,
-    layoutRef: c
+    layoutRef: l
   };
 }
-const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
+const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
   __name: "Icon",
   props: {
     disabled: Boolean,
-    ...wt()
+    ..._t()
   },
   setup(o) {
-    const e = o, t = Dt(), { iconData: n } = Ds(O(() => e.icon)), s = !!(t.onClick || t.onClickOnce);
-    return (a, r) => (I(), le(Vt(S(n).component), {
+    const e = o, t = Vt(), { iconData: n } = Ds(O(() => e.icon)), s = !!(t.onClick || t.onClickOnce);
+    return (a, r) => ($(), oe(jt(S(n).component), {
       icon: S(n).icon,
       tag: e.tag,
       class: be(["mce-icon", {
@@ -4672,7 +4673,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       tabindex: s ? e.disabled ? -1 : 0 : void 0
     }, null, 8, ["icon", "tag", "class", "role", "aria-hidden", "tabindex"]));
   }
-}), xt = /* @__PURE__ */ X({
+}), ot = /* @__PURE__ */ X({
   inheritAttrs: !1,
   __name: "Overlay",
   props: {
@@ -4680,14 +4681,14 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       type: Boolean,
       default: !1
     },
-    ...nt()
+    ...qe()
   },
   emits: ["click:outside", "update:modelValue"],
   setup(o, { expose: e, emit: t }) {
     const n = o, s = t, a = qs(), r = O({
       get: () => n.modelValue,
       set: (p) => s("update:modelValue", p)
-    }), i = V(), l = {
+    }), i = V(), c = {
       getBoundingClientRect() {
         const { x: p = 0, y: _ = 0 } = n.target;
         return {
@@ -4701,7 +4702,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           height: 0
         };
       }
-    }, c = O(() => typeof n.target == "object" && !(n.target instanceof Element) && "x" in n.target && "y" in n.target ? l : n.target ?? i.value), u = ue("contentElTpl"), d = O(() => n.attach ?? a.attach?.value ?? "body"), { floatingStyles: g, update: h } = Gn(c, u, {
+    }, l = O(() => typeof n.target == "object" && !(n.target instanceof Element) && "x" in n.target && "y" in n.target ? c : n.target ?? i.value), u = ce("contentElTpl"), d = O(() => n.attach ?? a.attach?.value ?? "body"), { floatingStyles: g, update: h } = Gn(l, u, {
       placement: O(() => n.location),
       whileElementsMounted: Zn,
       middleware: [
@@ -4726,30 +4727,30 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       );
       f = [
         _,
-        Ut("pointerdown", p, { passive: !0, capture: !0 })
+        Xt("pointerdown", p, { passive: !0, capture: !0 })
       ];
     }), we(() => f.forEach((p) => p())), e({
       activatorEl: i,
-      target: c,
+      target: l,
       contentEl: u,
       updateLocation: h
-    }), (p, _) => (I(), R(ne, null, [
-      te(p.$slots, "activator", {
+    }), (p, _) => ($(), R(se, null, [
+      Q(p.$slots, "activator", {
         props: y.value,
         isActive: r.value
       }),
-      (I(), le(_n, {
+      ($(), oe(_n, {
         disabled: d.value === !1,
         to: typeof d.value == "boolean" ? void 0 : d.value
       }, [
-        r.value ? (I(), R("div", Ne({
+        r.value ? ($(), R("div", Oe({
           key: 0,
           ref: "contentElTpl",
           class: "mce-overlay",
           style: v.value
         }, p.$attrs), [
-          te(p.$slots, "default")
-        ], 16)) : Q("", !0)
+          Q(p.$slots, "default")
+        ], 16)) : ee("", !0)
       ], 8, ["disabled", "to"]))
     ], 64));
   }
@@ -4759,8 +4760,8 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
 }, ma = /* @__PURE__ */ X({
   name: "MceMenu",
   __name: "Menu",
-  props: /* @__PURE__ */ Re({
-    ...nt(),
+  props: /* @__PURE__ */ $e({
+    ...qe(),
     items: Object,
     openOnHover: Boolean,
     persistent: Boolean
@@ -4768,12 +4769,12 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ Re(["click:item"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ $e(["click:item"], ["update:modelValue"]),
   setup(o, { expose: e, emit: t }) {
-    const n = o, s = t, a = Ae(o, "modelValue"), r = V(-1), i = ue("overlayTpl"), l = ue("menuItemTplRefs"), c = Lt(), u = Se(Ft, null), d = Je(/* @__PURE__ */ new Set());
-    De(Ft, {
-      register: () => d.value.add(c),
-      unregister: () => d.value.delete(c),
+    const n = o, s = t, a = ke(o, "modelValue"), r = V(-1), i = ce("overlayTpl"), c = ce("menuItemTplRefs"), l = Dt(), u = Se(Pt, null), d = Ze(/* @__PURE__ */ new Set());
+    De(Pt, {
+      register: () => d.value.add(l),
+      unregister: () => d.value.delete(l),
       closeParents(p) {
         !d.value.size && !n.persistent && (p == null || i.value?.contentEl && !po(p, i.value.contentEl)) && (a.value = !1, u?.closeParents());
       }
@@ -4801,10 +4802,10 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       updateLocation: v
     }), (p, _) => {
       const z = kn("MceMenu");
-      return I(), le(xt, {
+      return $(), oe(ot, {
         ref: "overlayTpl",
         modelValue: a.value,
-        "onUpdate:modelValue": _[2] || (_[2] = ($) => a.value = $),
+        "onUpdate:modelValue": _[2] || (_[2] = (I) => a.value = I),
         location: n.location,
         offset: n.offset,
         target: n.target,
@@ -4812,75 +4813,75 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         class: "mce-menu",
         "onClick:outside": h
       }, {
-        activator: re(($) => [
-          te(p.$slots, "activator", Ne($, {
-            props: { ...$.props, ...g.value }
+        activator: ne((I) => [
+          Q(p.$slots, "activator", Oe(I, {
+            props: { ...I.props, ...g.value }
           }))
         ]),
-        default: re(() => [
-          o.items?.length ? (I(), R("div", {
+        default: ne(() => [
+          o.items?.length ? ($(), R("div", {
             key: 0,
             class: "mce-list",
             onMouseleave: f
           }, [
-            (I(!0), R(ne, null, _e(o.items, ($, E) => (I(), R(ne, { key: E }, [
-              $.type === "divider" ? (I(), R("div", {
+            ($(!0), R(se, null, _e(o.items, (I, E) => ($(), R(se, { key: E }, [
+              I.type === "divider" ? ($(), R("div", {
                 key: 0,
                 ref_for: !0,
                 ref: "menuItemTplRefs",
                 class: "mce-list__divider"
-              }, null, 512)) : (I(), R("div", {
+              }, null, 512)) : ($(), R("div", {
                 key: 1,
                 ref_for: !0,
                 ref: "menuItemTplRefs",
                 class: "mce-list__item",
-                onMouseenter: (C) => $.disabled ? r.value = -1 : r.value = E
+                onMouseenter: (C) => I.disabled ? r.value = -1 : r.value = E
               }, [
                 F("div", {
                   class: be(["mce-list-item", [
-                    $.disabled && "mce-list-item--disabled",
+                    I.disabled && "mce-list-item--disabled",
                     r.value === E && "mce-list-item--opened"
                   ]]),
-                  onClick: (C) => y($, E, C)
+                  onClick: (C) => y(I, E, C)
                 }, [
                   F("div", ca, [
-                    $.checked ? (I(), le(Te, {
+                    I.checked ? ($(), oe(Ae, {
                       key: 0,
                       icon: "$check"
-                    })) : Q("", !0)
+                    })) : ee("", !0)
                   ]),
                   F("div", ua, [
-                    te(p.$slots, "title", { item: $ }, () => [
-                      Cn(K($.key), 1)
+                    Q(p.$slots, "title", { item: I }, () => [
+                      Cn(K(I.key), 1)
                     ])
                   ]),
-                  $.children?.length ? (I(), R("div", da, [
-                    H(Te, { icon: "$menuRight" })
-                  ])) : Q("", !0)
+                  I.children?.length ? ($(), R("div", da, [
+                    H(Ae, { icon: "$menuRight" })
+                  ])) : ee("", !0)
                 ], 10, la)
               ], 40, ra))
             ], 64))), 128)),
-            r.value > -1 && o.items?.[r.value]?.children?.length ? (I(), le(z, {
+            r.value > -1 && o.items?.[r.value]?.children?.length ? ($(), oe(z, {
               key: 0,
               "open-on-hover": "",
               items: o.items?.[r.value]?.children,
               location: "right",
               "model-value": r.value > -1,
-              target: l.value?.[r.value],
+              target: c.value?.[r.value],
               attach: !1,
               offset: 16,
-              "onUpdate:modelValue": _[0] || (_[0] = ($) => r.value = -1),
-              "onClick:item": _[1] || (_[1] = ($, E) => s("click:item", $, E))
-            }, ht({ _: 2 }, [
+              "onUpdate:modelValue": _[0] || (_[0] = (I) => r.value = -1),
+              "onClick:item": _[1] || (_[1] = (I, E) => s("click:item", I, E))
+            }, pt({ _: 2 }, [
               p.$slots.title ? {
                 name: "title",
-                fn: re(($) => [
-                  te(p.$slots, "title", ft(pt($)))
+                fn: ne((I) => [
+                  Q(p.$slots, "title", vt(yt(I)))
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["items", "model-value", "target"])) : Q("", !0)
-          ], 32)) : Q("", !0)
+            ]), 1032, ["items", "model-value", "target"])) : ee("", !0)
+          ], 32)) : ee("", !0)
         ]),
         _: 3
       }, 8, ["modelValue", "location", "offset", "target", "attach"]);
@@ -4908,13 +4909,13 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       exec: a,
       getKbd: r,
       t: i,
-      hotkeys: l
-    } = de(), c = Ae(o, "modelValue"), u = Ae(o, "position"), d = ue("menuTplRef");
+      hotkeys: c
+    } = de(), l = ke(o, "modelValue"), u = ke(o, "position"), d = ce("menuTplRef");
     function g() {
       d.value?.updateLocation();
     }
     function h(y) {
-      y.preventDefault(), c.value = !0, u.value = {
+      y.preventDefault(), l.value = !0, u.value = {
         x: y.clientX,
         y: y.clientY
       }, g();
@@ -4929,10 +4930,10 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     }
     return e({
       updateLocation: g
-    }), (y, f) => (I(), le(ma, {
+    }), (y, f) => ($(), oe(ma, {
       ref: "menuTplRef",
-      modelValue: c.value,
-      "onUpdate:modelValue": f[0] || (f[0] = (p) => c.value = p),
+      modelValue: l.value,
+      "onUpdate:modelValue": f[0] || (f[0] = (p) => l.value = p),
       offset: 10,
       class: "mce-context-menu",
       target: u.value,
@@ -4943,9 +4944,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       }),
       "onClick:item": v
     }, {
-      title: re(({ item: p }) => [
+      title: ne(({ item: p }) => [
         F("span", ha, K(S(i)(p.key)), 1),
-        S(l).has(p.key) ? (I(), R("span", fa, K(S(r)(p.key)), 1)) : Q("", !0)
+        S(c).has(p.key) ? ($(), R("span", fa, K(S(r)(p.key)), 1)) : ee("", !0)
       ]),
       _: 1
     }, 8, ["modelValue", "target", "items", "style"]));
@@ -4963,30 +4964,30 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       camera: s,
       drawboardAabb: a,
       setCursor: r
-    } = de(), { x: i, y: l } = zn();
-    function c(u) {
+    } = de(), { x: i, y: c } = zn();
+    function l(u) {
       const d = s.value.toGlobal({
         x: u.clientX - a.value.left,
         y: u.clientY - a.value.top
       });
       t.value?.callback?.(d), r(void 0);
     }
-    return (u, d) => S(e) === "drawing" ? (I(), R("div", {
+    return (u, d) => S(e) === "drawing" ? ($(), R("div", {
       key: 0,
       class: "mce-drawing",
       style: q({
         left: `${S(i)}px`,
-        top: `${S(l)}px`
+        top: `${S(c)}px`
       }),
-      onMousedown: c
+      onMousedown: l
     }, [
-      S(t)?.content ? (I(), R("div", va, K(S(n)(S(t).content)), 1)) : Q("", !0)
-    ], 36)) : Q("", !0);
+      S(t)?.content ? ($(), R("div", va, K(S(n)(S(t).content)), 1)) : ee("", !0)
+    ], 36)) : ee("", !0);
   }
 }), ga = /* @__PURE__ */ X({
   __name: "Floatbar",
   props: {
-    ...nt({
+    ...qe({
       location: "top-start",
       offset: 8
     })
@@ -4996,7 +4997,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       getAabbInDrawboard: n,
       selection: s,
       isFrame: a
-    } = de(), r = ue("overlayTpl");
+    } = de(), r = ce("overlayTpl");
     function i() {
       r.value?.updateLocation();
     }
@@ -5004,7 +5005,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       deep: !0
     }), e({
       updateLocation: i
-    }), (l, c) => (I(), le(xt, {
+    }), (c, l) => ($(), oe(ot, {
       ref: "overlayTpl",
       class: "mce-floatbar",
       location: t.location,
@@ -5013,8 +5014,8 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       attach: !1,
       "model-value": !0
     }, {
-      default: re(() => [
-        S(s).length > 0 ? te(l.$slots, "default", { key: 0 }) : Q("", !0)
+      default: ne(() => [
+        S(s).length > 0 ? Q(c.$slots, "default", { key: 0 }) : ee("", !0)
       ]),
       _: 3
     }, 8, ["location", "offset", "target"]));
@@ -5027,21 +5028,21 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
   },
   emits: ["update:modelValue"],
   setup(o) {
-    const e = Ae(o, "modelValue"), t = ue("inputTpl"), {
+    const e = ke(o, "modelValue"), t = ce("inputTpl"), {
       getObbInDrawboard: n,
       hoverElement: s,
       selection: a,
       state: r,
       config: i,
-      exec: l
-    } = de(), c = V(!1);
+      exec: c
+    } = de(), l = V(!1);
     async function u() {
-      c.value = !0, await Pe(), t.value && (t.value.focus(), t.value.select());
+      l.value = !0, await Re(), t.value && (t.value.focus(), t.value.select());
     }
     async function d(g) {
-      c.value || (a.value = [e.value], await Pe(), l("startTransform", g));
+      l.value || (a.value = [e.value], await Re(), c("startTransform", g));
     }
-    return (g, h) => ze((I(), R("div", {
+    return (g, h) => ze(($(), R("div", {
       style: q(S(Me)(S(n)(e.value))),
       class: be(["mce-frame", [
         S(i).frameOutline && "mce-frame--outline"
@@ -5058,9 +5059,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         ze(F("input", {
           ref: "inputTpl",
           "onUpdate:modelValue": h[0] || (h[0] = (v) => e.value.name = v),
-          onBlur: h[1] || (h[1] = (v) => c.value = !1)
+          onBlur: h[1] || (h[1] = (v) => l.value = !1)
         }, null, 544), [
-          [Xe, c.value],
+          [Xe, l.value],
           [En, e.value.name]
         ])
       ], 544), [
@@ -5076,7 +5077,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     const {
       frames: e
     } = de();
-    return (t, n) => (I(!0), R(ne, null, _e(S(e), (s, a) => (I(), le(ba, {
+    return (t, n) => ($(!0), R(se, null, _e(S(e), (s, a) => ($(), oe(ba, {
       key: a,
       "model-value": s
     }, null, 8, ["model-value"]))), 128));
@@ -5094,14 +5095,14 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       t.value,
       n(e.value)
     ));
-    return (i, l) => r.value ? (I(), R("div", {
+    return (i, c) => r.value ? ($(), R("div", {
       key: 0,
       class: "mce-back-selected-aera",
-      onClick: l[0] || (l[0] = We((c) => S(s)("zoomToSelection"), ["prevent"]))
+      onClick: c[0] || (c[0] = Ke((l) => S(s)("zoomToSelection"), ["prevent"]))
     }, [
-      H(Te, { icon: "$gps" }),
+      H(Ae, { icon: "$gps" }),
       F("span", null, K(S(a)("goBackSelectedArea")), 1)
-    ])) : Q("", !0);
+    ])) : ee("", !0);
   }
 }), _a = ["data-name"], ka = /* @__PURE__ */ X({
   __name: "Hover",
@@ -5111,7 +5112,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       hoverElement: t,
       getObbInDrawboard: n
     } = de(), s = O(() => n(t.value));
-    return (a, r) => S(t) && !S(t).equal(S(e)[0]) ? (I(), R("div", {
+    return (a, r) => S(t) && !S(t).equal(S(e)[0]) ? ($(), R("div", {
       key: 0,
       class: "mce-hover",
       "data-name": S(t).name,
@@ -5119,12 +5120,12 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         borderColor: "currentcolor",
         ...S(Me)(s.value)
       })
-    }, null, 12, _a)) : Q("", !0);
+    }, null, 12, _a)) : ee("", !0);
   }
 }), Ca = /* @__PURE__ */ X({
   __name: "Tooltip",
-  props: /* @__PURE__ */ Re({
-    ...nt({
+  props: /* @__PURE__ */ $e({
+    ...qe({
       location: "right",
       offset: 8
     })
@@ -5134,37 +5135,37 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
   }),
   emits: ["update:modelValue"],
   setup(o, { expose: e }) {
-    const t = o, n = Ae(o, "modelValue"), s = ue("overlayTpl");
+    const t = o, n = ke(o, "modelValue"), s = ce("overlayTpl");
     function a() {
       s.value?.updateLocation();
     }
     return e({
       updateLocation: a
-    }), (r, i) => (I(), le(xt, {
+    }), (r, i) => ($(), oe(ot, {
       ref: "overlayTpl",
       modelValue: n.value,
-      "onUpdate:modelValue": i[0] || (i[0] = (l) => n.value = l),
+      "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value = c),
       class: "mce-tooltip",
       location: t.location,
       offset: t.offset,
       target: t.target,
       attach: t.attach
-    }, ht({
-      default: re(() => [
-        n.value ? te(r.$slots, "default", { key: 0 }) : Q("", !0)
+    }, pt({
+      default: ne(() => [
+        n.value ? Q(r.$slots, "default", { key: 0 }) : ee("", !0)
       ]),
       _: 2
     }, [
       r.$slots.activator ? {
         name: "activator",
-        fn: re((l) => [
-          te(r.$slots, "activator", ft(pt(l)))
+        fn: ne((c) => [
+          Q(r.$slots, "activator", vt(yt(c)))
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["modelValue", "location", "offset", "target", "attach"]));
   }
-}), Ea = ["width", "height"], Ta = ["onDblclick", "onMousedown", "onMousemove"], Aa = { style: { "font-size": "12px", "text-wrap": "nowrap" } }, mt = /* @__PURE__ */ X({
+}), Ea = ["width", "height"], Ta = ["onDblclick", "onMousedown", "onMousemove"], Aa = { style: { "font-size": "12px", "text-wrap": "nowrap" } }, ft = /* @__PURE__ */ X({
   inheritAttrs: !1,
   __name: "Ruler",
   props: {
@@ -5181,28 +5182,28 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     labelFormat: { type: Function, default: (o) => String(o) }
   },
   setup(o, { expose: e }) {
-    const t = o, n = Dt(), s = O(() => t.pixelRatio), a = V(), r = V({ x: 0, y: 0 }), i = ue("canvasTpl"), l = "OffscreenCanvas" in window ? new OffscreenCanvas(t.size, t.size) : document.createElement("canvas"), c = l.getContext("2d"), u = V(), d = Ce({
+    const t = o, n = Vt(), s = O(() => t.pixelRatio), a = V(), r = V({ x: 0, y: 0 }), i = ce("canvasTpl"), c = "OffscreenCanvas" in window ? new OffscreenCanvas(t.size, t.size) : document.createElement("canvas"), l = c.getContext("2d"), u = V(), d = Ee({
       text: "#000",
       border: "#000"
     });
     function g() {
       if (!t.selected?.width || !t.selected?.height)
         return;
-      c.fillStyle = "#6165FD20";
+      l.fillStyle = "#6165FD20";
       const A = t.vertical ? t.selected.top : t.selected.left, N = t.vertical ? t.selected.height : t.selected.width;
-      c.fillRect(A, 0, N, t.size);
+      l.fillRect(A, 0, N, t.size);
     }
     function h(A, N, L, j) {
-      c.lineWidth = L, c.strokeStyle = j, c.beginPath(), c.moveTo(A[0], A[1]), c.lineTo(N[0], N[1]), c.stroke();
+      l.lineWidth = L, l.strokeStyle = j, l.beginPath(), l.moveTo(A[0], A[1]), l.lineTo(N[0], N[1]), l.stroke();
     }
     function v(A, N, L = 1) {
       const j = A, D = t.size, U = A, W = t.size - N * L;
-      c.moveTo(j, D), c.lineTo(U, W);
+      l.moveTo(j, D), l.lineTo(U, W);
     }
     function y(A, N, L, j) {
-      c.font = `${j}px sans-serif`, c.textAlign = "left", c.textBaseline = "bottom";
+      l.font = `${j}px sans-serif`, l.textAlign = "left", l.textBaseline = "bottom";
       const D = N, U = t.size - L;
-      c.save(), t.vertical && (c.translate(0, t.size), c.scale(1, -1)), c.fillText(A, D, U), c.restore();
+      l.save(), t.vertical && (l.translate(0, t.size), l.scale(1, -1)), l.fillText(A, D, U), l.restore();
     }
     const f = O(() => {
       const A = Math.max(t.unit / t.zoom, 1), N = t.unitFractions, L = Math.floor(Math.log10(A)), j = A / 10 ** L;
@@ -5223,14 +5224,14 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     function z(A) {
       return Math.round(A * t.zoom + t.position);
     }
-    function $(A) {
+    function I(A) {
       return Math.round((A - t.position) / t.zoom);
     }
     function E() {
       const A = i.value;
-      if (!A || !l.width || !l.height)
+      if (!A || !c.width || !c.height)
         return;
-      c.clearRect(0, 0, l.width, l.height), c.save(), c.scale(s.value, s.value), t.vertical && (c.scale(1, -1), c.translate(0, 0), c.rotate(-Math.PI / 2)), g(), t.axis && h(
+      l.clearRect(0, 0, c.width, c.height), l.save(), l.scale(s.value, s.value), t.vertical && (l.scale(1, -1), l.translate(0, 0), l.rotate(-Math.PI / 2)), g(), t.axis && h(
         [0, t.size],
         [t.vertical ? A.height : A.width, t.size],
         2,
@@ -5240,17 +5241,17 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         v(D, 10), y(U, D + 2, 4, 8);
       }, L = (D) => v(D, 4);
       let j = f.value / 10;
-      j = (j > 0 ? 1 : -1) * Math.max(1, Math.abs(j)), c.beginPath(), c.lineWidth = 1, c.strokeStyle = d.text, c.fillStyle = d.text;
+      j = (j > 0 ? 1 : -1) * Math.max(1, Math.abs(j)), l.beginPath(), l.lineWidth = 1, l.strokeStyle = d.text, l.fillStyle = d.text;
       for (let D = p.value; D <= _.value; D += j)
         D % f.value === 0 && N(z(D), t.labelFormat(D));
-      c.stroke(), c.beginPath(), c.lineWidth = 1, c.strokeStyle = d.border;
+      l.stroke(), l.beginPath(), l.lineWidth = 1, l.strokeStyle = d.border;
       for (let D = p.value; D <= _.value; D += j)
         D % f.value === 0 || D % j === 0 && L(z(D));
-      if (c.stroke(), c.restore(), "transferToImageBitmap" in l)
-        A.getContext("bitmaprenderer").transferFromImageBitmap(l.transferToImageBitmap());
+      if (l.stroke(), l.restore(), "transferToImageBitmap" in c)
+        A.getContext("bitmaprenderer").transferFromImageBitmap(c.transferToImageBitmap());
       else {
         const D = A.getContext("2d");
-        D && (D.clearRect(0, 0, A.width, A.height), D.drawImage(l, 0, 0));
+        D && (D.clearRect(0, 0, A.width, A.height), D.drawImage(c, 0, 0));
       }
     }
     pe(
@@ -5260,11 +5261,11 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       },
       { immediate: !0, deep: !0 }
     );
-    const C = Ht(() => {
+    const C = Yt(() => {
       if (!i.value)
         return;
       const A = i.value.parentElement.getBoundingClientRect();
-      l.width = i.value.width = A.width * s.value, l.height = i.value.height = A.height * s.value, i.value.style.width = `${A.width}px`, i.value.style.height = `${A.height}px`, u.value = A, E();
+      c.width = i.value.width = A.width * s.value, c.height = i.value.height = A.height * s.value, i.value.style.width = `${A.width}px`, i.value.style.height = `${A.height}px`, u.value = A, E();
     }, 50);
     He(() => {
       C();
@@ -5274,14 +5275,14 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         d.text = N.getPropertyValue("--text-color").trim(), d.border = N.getPropertyValue("--border-color").trim();
       }
     }), we(() => {
-      l.width = 0, l.height = 0;
+      c.width = 0, c.height = 0;
     });
     const m = V([]), b = V(), k = O(() => {
       const A = [...m.value];
       return typeof b.value == "number" && A.unshift(b.value), A;
     });
     function x(A) {
-      return $(
+      return I(
         t.vertical ? A.clientY - u.value.top : A.clientX - u.value.left
       );
     }
@@ -5310,8 +5311,8 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     }
     return e({
       box: u
-    }), (A, N) => (I(), R(ne, null, [
-      ze((I(), R("div", Ne({
+    }), (A, N) => ($(), R(se, null, [
+      ze(($(), R("div", Oe({
         class: ["mce-ruler", [
           `mce-ruler--${t.vertical ? "vertical" : "horizontal"}`
         ]],
@@ -5328,9 +5329,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           height: t.size
         }, null, 8, Ea)
       ], 16)), [
-        [S(Jt), S(C)]
+        [S(Zt), S(C)]
       ]),
-      (I(!0), R(ne, null, _e(k.value, (L, j) => (I(), R("div", {
+      ($(!0), R(se, null, _e(k.value, (L, j) => ($(), R("div", {
         key: j,
         class: be(["mce-ruler-refline", {
           "mce-ruler-refline--vertical": t.vertical,
@@ -5353,7 +5354,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         target: r.value,
         offset: 24
       }, {
-        default: re(() => [
+        default: ne(() => [
           F("div", Aa, K(a.value), 1)
         ]),
         _: 1
@@ -5369,8 +5370,8 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       getAabbInDrawboard: t,
       selection: n
     } = de(), s = O(() => t(n.value));
-    return (a, r) => (I(), R("div", Sa, [
-      H(mt, {
+    return (a, r) => ($(), R("div", Sa, [
+      H(ft, {
         refline: "",
         zoom: S(e).zoom.x,
         position: S(e).position.x,
@@ -5378,7 +5379,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         axis: "",
         size: 16
       }, null, 8, ["zoom", "position", "selected"]),
-      H(mt, {
+      H(ft, {
         refline: "",
         zoom: S(e).zoom.y,
         position: S(e).position.y,
@@ -5393,9 +5394,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
 }), za = {
   ref: "trackTplRef",
   class: "mce-scrollbar__track"
-}, Oa = 50, Pt = 50, Nt = /* @__PURE__ */ X({
+}, Oa = 50, Nt = 50, Rt = /* @__PURE__ */ X({
   __name: "Scrollbar",
-  props: /* @__PURE__ */ Re({
+  props: /* @__PURE__ */ $e({
     zoom: {},
     length: {},
     vertical: { type: Boolean },
@@ -5406,16 +5407,16 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ Re(["scroll"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ $e(["scroll"], ["update:modelValue"]),
   setup(o, { emit: e }) {
-    const t = o, n = e, s = (w, T, M) => w * (1 - M) + T * M, a = (w, T) => s(w / 2, 1 - w / 2, T), r = Ae(o, "modelValue"), i = ue("trackTplRef"), l = ue("thumbTplRef"), c = V(0), u = O(
-      () => t.infinite ? t.length * t.zoom + c.value + Math.abs(r.value) * 2 : r.value > 0 ? r.value + t.length * t.zoom : Math.max(c.value - r.value, t.length * t.zoom)
+    const t = o, n = e, s = (w, T, M) => w * (1 - M) + T * M, a = (w, T) => s(w / 2, 1 - w / 2, T), r = ke(o, "modelValue"), i = ce("trackTplRef"), c = ce("thumbTplRef"), l = V(0), u = O(
+      () => t.infinite ? t.length * t.zoom + l.value + Math.abs(r.value) * 2 : r.value > 0 ? r.value + t.length * t.zoom : Math.max(l.value - r.value, t.length * t.zoom)
     ), d = O(
       () => t.infinite ? Math.abs(r.value) - r.value : r.value > 0 ? 0 : -r.value
-    ), g = O(() => Math.max(0.05, Math.min(1, c.value / u.value))), h = O(() => d.value / (u.value - c.value) * (1 - g.value)), v = Ht(() => {
+    ), g = O(() => Math.max(0.05, Math.min(1, l.value / u.value))), h = O(() => d.value / (u.value - l.value) * (1 - g.value)), v = Yt(() => {
       const w = i.value?.getBoundingClientRect() ?? { width: 0, height: 0 };
-      c.value = t.vertical ? w.height : w.width;
-    }, 50), y = O(() => t.infinite ? a(g.value, h.value) : h.value), f = O(() => 1 - y.value - g.value), p = O(() => t.vertical ? `${y.value * 100}%` : "0%"), _ = O(() => t.vertical ? `${f.value * 100}%` : "50%"), z = O(() => t.vertical ? "0%" : `${y.value * 100}%`), $ = O(() => t.vertical ? "50%" : `${f.value * 100}%`);
+      l.value = t.vertical ? w.height : w.width;
+    }, 50), y = O(() => t.infinite ? a(g.value, h.value) : h.value), f = O(() => 1 - y.value - g.value), p = O(() => t.vertical ? `${y.value * 100}%` : "0%"), _ = O(() => t.vertical ? `${f.value * 100}%` : "50%"), z = O(() => t.vertical ? "0%" : `${y.value * 100}%`), I = O(() => t.vertical ? "50%" : `${f.value * 100}%`);
     function E(w) {
       n("scroll", w - r.value), r.value = w;
     }
@@ -5427,11 +5428,11 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     function k(w) {
       const T = w.target;
       let M = 0;
-      if (l.value?.contains(T)) {
+      if (c.value?.contains(T)) {
         x();
         return;
       } else if (i.value?.contains(T)) {
-        const P = (t.vertical ? w.offsetY : w.offsetX) / c.value;
+        const P = (t.vertical ? w.offsetY : w.offsetX) / l.value;
         if (P < y.value)
           M = 1;
         else if (P > 1 - f.value)
@@ -5441,14 +5442,14 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           return;
         }
       }
-      C(Oa * M), b = setTimeout(() => k(w), Pt);
+      C(Oa * M), b = setTimeout(() => k(w), Nt);
     }
     function x() {
       clearTimeout(b);
     }
     return we(() => {
       x();
-    }), (w, T) => ze((I(), R("div", {
+    }), (w, T) => ze(($(), R("div", {
       class: be(["mce-scrollbar", {
         "mce-scrollbar--vertical": t.vertical,
         "mce-scrollbar--horizontal": !t.vertical
@@ -5469,15 +5470,15 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
             top: p.value,
             bottom: _.value,
             left: z.value,
-            right: $.value
+            right: I.value
           })
         }, null, 6), [
           [Xe, t.infinite || g.value < 1]
         ])
       ], 512)
     ], 6)), [
-      [S(Jt), S(v)],
-      [S(Qn), [k, { delay: Pt, onMouseUp: x }]]
+      [S(Zt), S(v)],
+      [S(Qn), [k, { delay: Nt, onMouseUp: x }]]
     ]);
   }
 }), $a = /* @__PURE__ */ X({
@@ -5493,15 +5494,15 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       camera: t,
       viewAabb: n
     } = de();
-    return (s, a) => (I(), R(ne, null, [
-      H(Nt, Ne(e, {
+    return (s, a) => ($(), R(se, null, [
+      H(Rt, Oe(e, {
         modelValue: S(t).position.y,
         "onUpdate:modelValue": a[0] || (a[0] = (r) => S(t).position.y = r),
         zoom: S(t).zoom.y,
         vertical: "",
         length: S(n).height
       }), null, 16, ["modelValue", "zoom", "length"]),
-      H(Nt, Ne(e, {
+      H(Rt, Oe(e, {
         modelValue: S(t).position.x,
         "onUpdate:modelValue": a[1] || (a[1] = (r) => S(t).position.x = r),
         zoom: S(t).zoom.x,
@@ -5561,13 +5562,13 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       "resize-top-right": (m) => _("resizeBevel", 180 + m),
       "resize-bottom-right": (m) => _("resizeBevel", 90 + m),
       "resize-bottom-left": (m) => _("resizeBevel", 180 + m)
-    }, r = Ae(n, "modelValue"), i = O({
+    }, r = ke(n, "modelValue"), i = O({
       get: () => {
         let { left: m = 0, top: b = 0, width: k = 0, height: x = 0, rotate: w = 0 } = r.value ?? {};
         return Number.isNaN(Number(k)) && (k = 0), Number.isNaN(Number(x)) && (x = 0), { left: m, top: b, width: k, height: x, rotate: w };
       },
       set: (m) => r.value = m
-    }), l = V(!1), c = V(), u = O(() => {
+    }), c = V(!1), l = V(), u = O(() => {
       const { width: m = 0, height: b = 0 } = i.value, k = 6, x = k / 2, w = 8, T = w / 2, M = 12;
       let P;
       return n.handleStrategy === "point" ? P = [
@@ -5619,13 +5620,13 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         ...g.value,
         transform: `matrix(${w}, ${T}, ${-T}, ${w}, ${m}, ${b})`
       };
-    }), v = O(() => n.visibility === "auto" && l.value), y = O(() => n.tipFormat?.("size"));
+    }), v = O(() => n.visibility === "auto" && c.value), y = O(() => n.tipFormat?.("size"));
     function f(m, b) {
       if (m && m.button !== void 0 && m.button !== 0)
         return !1;
       m?.preventDefault(), m?.stopPropagation();
       const { left: k = 0, top: x = 0, width: w = 0, height: T = 0, rotate: M = 0 } = i.value, P = w && T ? w / T : 0, B = b === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : u.value[b];
-      c.value = B.type;
+      l.value = B.type;
       const A = B.type === "move", N = B.type.startsWith("rotate"), L = B.type === "resize-left" || B.type === "resize-right", j = B.type.split("-").length === 2, D = {
         x: k + w / 2,
         y: x + T / 2
@@ -5634,7 +5635,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         y: x
       };
       A || (U.x += B.x + B.width / 2, U.y += B.y + B.height / 2);
-      const W = $(
+      const W = I(
         U,
         D,
         A ? 0 : M
@@ -5647,71 +5648,71 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       ) / (Math.PI / 180);
       let Y = m ? { x: m.clientX, y: m.clientY } : void 0;
       function xe() {
-        l.value = !0, s("start", i.value);
+        c.value = !0, s("start", i.value);
       }
-      !n.threshold && !l.value && xe();
-      function oe(ye) {
+      !n.threshold && !c.value && xe();
+      function ae(ye) {
         const J = {};
         Y || (Y = { x: ye.clientX, y: ye.clientY });
         const me = {
           x: ye.clientX - Y.x,
           y: ye.clientY - Y.y
         };
-        if (!l.value) {
+        if (!c.value) {
           if (Math.abs(me.x) < n.threshold && Math.abs(me.y) < n.threshold)
             return;
           xe();
         }
-        const ce = {
+        const ue = {
           x: W.x + me.x,
           y: W.y + me.y
         };
         if (A) {
           if (!n.moveable)
             return;
-          J.left = ce.x, J.top = ce.y;
+          J.left = ue.x, J.top = ue.y;
         } else if (N) {
           const ge = Math.atan2(
-            ce.y - D.y,
-            ce.x - D.x
+            ue.y - D.y,
+            ue.x - D.x
           ) / (Math.PI / 180);
           J.rotate = (M + ge - he + 360) % 360;
         } else if (j) {
-          const ge = $(ce, W, -M), ae = $(
+          const ge = I(ue, W, -M), re = I(
             L ? { x: ge.x, y: W.y } : { x: W.x, y: ge.y },
             W,
             M
           ), Ve = {
-            x: ae.x - (ae.x - Z.x) / 2,
-            y: ae.y + (Z.y - ae.y) / 2
-          }, ke = C(ae, Z);
-          L ? (J.width = ke, P && n.resizeStrategy === "aspectRatio" && (J.height = ke / P)) : (J.height = ke, P && n.resizeStrategy === "aspectRatio" && (J.width = ke * P)), J.left = Ve.x - (L ? ke : w) / 2, J.top = Ve.y - (L ? T : ke) / 2;
+            x: re.x - (re.x - Z.x) / 2,
+            y: re.y + (Z.y - re.y) / 2
+          }, Ce = C(re, Z);
+          L ? (J.width = Ce, P && n.resizeStrategy === "aspectRatio" && (J.height = Ce / P)) : (J.height = Ce, P && n.resizeStrategy === "aspectRatio" && (J.width = Ce * P)), J.left = Ve.x - (L ? Ce : w) / 2, J.top = Ve.y - (L ? T : Ce) / 2;
         } else {
           if (P && (n.resizeStrategy === "aspectRatio" || n.resizeStrategy === "diagonalAspectRatio")) {
-            let ot = 1;
+            let st = 1;
             switch (B.type) {
               case "resize-top-right":
               case "resize-bottom-left":
-                ot = -1;
+                st = -1;
                 break;
             }
-            me.x > me.y ? (ce.x = W.x + me.x, ce.y = W.y + ot * me.x / P) : (ce.x = W.x + ot * me.y * P, ce.y = W.y + me.y);
+            me.x > me.y ? (ue.x = W.x + me.x, ue.y = W.y + st * me.x / P) : (ue.x = W.x + st * me.y * P, ue.y = W.y + me.y);
           }
-          const ge = E(ce, Z), ae = [
-            $(ce, ge, -M),
-            $(Z, ge, -M)
-          ], [Ve, ke] = ae[0].x > ae[1].x ? [ae[1].x, ae[0].x] : [ae[0].x, ae[1].x], [_t, vn] = ae[0].y > ae[1].y ? [ae[1].y, ae[0].y] : [ae[0].y, ae[1].y];
-          J.width = ke - Ve, J.height = vn - _t, J.left = Ve, J.top = _t;
+          const ge = E(ue, Z), re = [
+            I(ue, ge, -M),
+            I(Z, ge, -M)
+          ], [Ve, Ce] = re[0].x > re[1].x ? [re[1].x, re[0].x] : [re[0].x, re[1].x], [kt, vn] = re[0].y > re[1].y ? [re[1].y, re[0].y] : [re[0].y, re[1].y];
+          J.width = Ce - Ve, J.height = vn - kt, J.left = Ve, J.top = kt;
         }
         if ("width" in J && J.width <= 0 || "height" in J && J.height <= 0)
           return;
-        const ee = { ...i.value }, se = { ...i.value, ...J };
-        i.value = se, s("move", se, ee);
+        const te = { ...i.value }, ie = { ...i.value, ...J };
+        i.value = ie, s("move", ie, te);
       }
       function ve() {
-        window.removeEventListener("pointermove", oe), window.removeEventListener("pointerup", ve, !0), l.value = !1, s("end", i.value);
+        window.removeEventListener("pointermove", ae), window.removeEventListener("pointerup", ve, !0), c.value = !1, s("end", i.value);
       }
-      return window.addEventListener("pointermove", oe), window.addEventListener("pointerup", ve, !0), !0;
+      return window.addEventListener("pointermove", ae), window.addEventListener("pointerup", ve, !0), !0;
     }
     const p = {
       rotate: '<path d="M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z" fill="white"/>',
@@ -5725,7 +5726,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     function z(m) {
       return m === "move" ? "move" : `url("data:image/svg+xml,${a[m](i.value.rotate ?? 0)}") 16 16, pointer`;
     }
-    function $(m, b, k) {
+    function I(m, b, k) {
       const x = k * Math.PI / 180, w = Math.cos(x), T = Math.sin(x);
       return {
         x: (m.x - b.x) * w - (m.y - b.y) * T + b.x,
@@ -5742,9 +5743,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       return Math.sqrt((m.x - b.x) ** 2 + (m.y - b.y) ** 2);
     }
     return He(async () => {
-      const b = Ze()?.proxy?.$el;
+      const b = Qe()?.proxy?.$el;
       if (b && n.initialSize) {
-        await Pe();
+        await Re();
         let k, x;
         const w = getComputedStyle(b);
         if (w.width.endsWith("px") && w.height.endsWith("px") ? (k = Number(w.width.replace("px", "")), x = Number(w.height.replace("px", ""))) : { width: k, height: x } = b.getBoundingClientRect(), k && x)
@@ -5762,14 +5763,14 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       }
     }), e({
       start: f,
-      activeHandle: c,
-      transforming: l
-    }), (m, b) => (I(), le(Vt(o.tag), {
+      activeHandle: l,
+      transforming: c
+    }), (m, b) => ($(), oe(jt(o.tag), {
       class: "mce-transformable",
       style: q(h.value)
     }, {
-      default: re(() => [
-        te(m.$slots, "default", {
+      default: ne(() => [
+        Q(m.$slots, "default", {
           value: S(r),
           moveProps: {
             onPointerdown: f,
@@ -5777,7 +5778,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           },
           start: f
         }),
-        (I(), R("svg", Ia, [
+        ($(), R("svg", Ia, [
           F("rect", {
             width: "100%",
             height: "100%",
@@ -5790,9 +5791,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
             })
           }, null, 4),
           F("g", Fa, [
-            (I(!0), R(ne, null, _e(u.value.filter((k) => !(!o.resizable && k.type.startsWith("resize") || !o.rotatable && k.type.startsWith("rotate") || !o.moveable && k.type === "move")), (k, x) => (I(), R(ne, { key: x }, [
-              (o.handleStrategy === "point" ? k.type.startsWith("resize") : k.type === "resize-top-left" || k.type === "resize-top-right" || k.type === "resize-bottom-left" || k.type === "resize-bottom-right") ? (I(), R(ne, { key: 0 }, [
-                n.handleShape === "rect" ? (I(), R("rect", {
+            ($(!0), R(se, null, _e(u.value.filter((k) => !(!o.resizable && k.type.startsWith("resize") || !o.rotatable && k.type.startsWith("rotate") || !o.moveable && k.type === "move")), (k, x) => ($(), R(se, { key: x }, [
+              (o.handleStrategy === "point" ? k.type.startsWith("resize") : k.type === "resize-top-left" || k.type === "resize-top-right" || k.type === "resize-bottom-left" || k.type === "resize-bottom-right") ? ($(), R(se, { key: 0 }, [
+                n.handleShape === "rect" ? ($(), R("rect", {
                   key: 0,
                   x: k.x,
                   y: k.y,
@@ -5802,9 +5803,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
                   fill: o.handleColor,
                   class: "mce-transformable__handle",
                   style: q({
-                    opacity: o.visibility === "none" || l.value && o.visibility !== "visible" ? 0 : void 0
+                    opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
                   })
-                }, null, 12, Pa)) : (I(), R("circle", {
+                }, null, 12, Pa)) : ($(), R("circle", {
                   key: 1,
                   cx: k.x + k.width / 2,
                   cy: k.y + k.width / 2,
@@ -5813,10 +5814,10 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
                   fill: o.handleColor,
                   class: "mce-transformable__handle",
                   style: q({
-                    opacity: o.visibility === "none" || l.value && o.visibility !== "visible" ? 0 : void 0
+                    opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
                   })
                 }, null, 12, Na))
-              ], 64)) : Q("", !0),
+              ], 64)) : ee("", !0),
               F("rect", {
                 ref_for: !0,
                 ref_key: "handlesRef",
@@ -5828,9 +5829,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
                 "aria-label": k.type,
                 class: "mce-transformable__handle-box",
                 style: q({
-                  opacity: o.visibility === "none" || l.value && o.visibility !== "visible" ? 0 : void 0
+                  opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
                 }),
-                cursor: l.value ? "auto" : z(k.type),
+                cursor: c.value ? "auto" : z(k.type),
                 onPointerdown: (w) => f(w, x)
               }, null, 44, Ra)
             ], 64))), 128))
@@ -5839,10 +5840,10 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
             "pointer-events": "all",
             style: q(v.value ? { opacity: ".4", strokeWidth: "0.5px" } : void 0)
           }, [
-            te(m.$slots, "svg", { box: i.value })
+            Q(m.$slots, "svg", { box: i.value })
           ], 4)
         ])),
-        y.value ? (I(), R("div", Ba, K(y.value), 1)) : Q("", !0)
+        y.value ? ($(), R("div", Ba, K(y.value), 1)) : ee("", !0)
       ]),
       _: 3
     }, 8, ["style"]));
@@ -5861,15 +5862,15 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       selection: a,
       camera: r,
       obbToFit: i,
-      getObbInDrawboard: l,
-      getObb: c,
+      getObbInDrawboard: c,
+      getObb: l,
       registerCommand: u,
       unregisterCommand: d,
       isFrame: g,
       isLock: h,
       config: v
-    } = de(), y = ue("transformableRef");
-    vt(() => {
+    } = de(), y = ce("transformableRef");
+    gt(() => {
       u({ command: "startTransform", handle: (E) => !!y.value?.start(E) });
     }), we(() => {
       d("startTransform");
@@ -5878,11 +5879,11 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       if (a.value.length !== 1)
         return [];
       const E = [];
-      return a.value[0]?.findAncestor((C) => (C instanceof G && E.push(l(C)), !1)), E;
+      return a.value[0]?.findAncestor((C) => (C instanceof G && E.push(c(C)), !1)), E;
     }), p = O(() => n.value !== "selecting" && a.value.length === 1 ? [] : a.value.map((E) => ({
       name: E.name,
-      box: l(E)
-    }))), _ = O(() => l(a.value)), z = O({
+      box: c(E)
+    }))), _ = O(() => c(a.value)), z = O({
       get: () => _.value,
       set: (E) => {
         const C = r.value.zoom, m = _.value, b = {
@@ -5909,14 +5910,14 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         });
       }
     });
-    function $() {
-      const E = a.value.length === 1 ? a.value[0].style : c(a.value);
+    function I() {
+      const E = a.value.length === 1 ? a.value[0].style : l(a.value);
       return `${Number(E.width.toFixed(2))} × ${Number(E.height.toFixed(2))}`;
     }
     return e({
       transformable: y
-    }), (E, C) => (I(), R(ne, null, [
-      (I(!0), R(ne, null, _e(f.value, (m, b) => (I(), R("div", {
+    }), (E, C) => ($(), R(se, null, [
+      ($(!0), R(se, null, _e(f.value, (m, b) => ($(), R("div", {
         key: b,
         class: "mce-parent-element-obb",
         style: q({
@@ -5924,15 +5925,15 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           ...S(Me)(m)
         })
       }, null, 4))), 128)),
-      S(n) === "selecting" ? (I(), R("div", {
+      S(n) === "selecting" ? ($(), R("div", {
         key: 0,
         class: "mce-selected-area",
         style: q({
           borderColor: "currentcolor",
           ...S(Me)(t.selectedArea)
         })
-      }, null, 4)) : Q("", !0),
-      (I(!0), R(ne, null, _e(p.value, (m, b) => (I(), R("div", {
+      }, null, 4)) : ee("", !0),
+      ($(!0), R(se, null, _e(p.value, (m, b) => ($(), R("div", {
         key: b,
         class: "mce-element-obb",
         style: q({
@@ -5940,7 +5941,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           ...S(Me)(m.box)
         })
       }, null, 4))), 128)),
-      z.value.width && z.value.height ? (I(), le(La, {
+      z.value.width && z.value.height ? ($(), oe(La, {
         key: 1,
         ref: "transformableRef",
         modelValue: z.value,
@@ -5951,24 +5952,24 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         "handle-shape": S(v).handleShape,
         class: "mce-selection-obb",
         "border-style": S(a).length > 1 ? "dashed" : "solid",
-        "tip-format": $,
+        "tip-format": I,
         onMove: C[1] || (C[1] = () => !S(n) && (n.value = "transforming")),
         onEnd: C[2] || (C[2] = () => S(n) === "transforming" && (n.value = void 0))
-      }, ht({ _: 2 }, [
+      }, pt({ _: 2 }, [
         E.$slots.transformable ? {
           name: "svg",
-          fn: re((m) => [
-            te(E.$slots, "transformable", ft(pt(m)))
+          fn: ne((m) => [
+            Q(E.$slots, "transformable", vt(yt(m)))
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["modelValue", "visibility", "moveable", "resize-strategy", "handle-shape", "border-style"])) : Q("", !0),
-      z.value.width && z.value.height && E.$slots.default ? (I(), R("div", {
+      ]), 1032, ["modelValue", "visibility", "moveable", "resize-strategy", "handle-shape", "border-style"])) : ee("", !0),
+      z.value.width && z.value.height && E.$slots.default ? ($(), R("div", {
         key: 2,
         style: q([{ position: "absolute" }, S(Me)(z.value)])
       }, [
-        te(E.$slots, "default", { box: z.value })
-      ], 4)) : Q("", !0)
+        Q(E.$slots, "default", { box: z.value })
+      ], 4)) : ee("", !0)
     ], 64));
   }
 }), Va = /* @__PURE__ */ X({
@@ -5992,15 +5993,15 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     return e({
       items: a,
       getLayoutItem: r
-    }), (l, c) => (I(), R("div", {
+    }), (c, l) => ($(), R("div", {
       ref: S(i),
       class: be([S(n)]),
       style: q([S(s)])
     }, [
-      te(l.$slots, "default")
+      Q(c.$slots, "default")
     ], 6));
   }
-}), Rt = /* @__PURE__ */ X({
+}), Bt = /* @__PURE__ */ X({
   __name: "LayoutItem",
   props: {
     position: {
@@ -6018,19 +6019,19 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     const e = o, { layoutItemStyles: t } = sa({
       id: e.name,
       order: O(() => Number.parseInt(String(e.order), 10)),
-      position: Ee(() => e.position),
-      elementSize: Ee(() => e.size),
-      layoutSize: Ee(() => e.size),
-      active: Ee(() => e.modelValue),
-      absolute: Ee(() => e.absolute)
+      position: Te(() => e.position),
+      elementSize: Te(() => e.size),
+      layoutSize: Te(() => e.size),
+      active: Te(() => e.modelValue),
+      absolute: Te(() => e.absolute)
     });
-    return (n, s) => (I(), R("div", {
+    return (n, s) => ($(), R("div", {
       class: be(["mce-layout-item", [
         `mce-layout-item--${e.position}`
       ]]),
       style: q([S(t)])
     }, [
-      te(n.$slots, "default")
+      Q(n.$slots, "default")
     ], 6));
   }
 }), Ua = {
@@ -6043,15 +6044,15 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
   },
   setup(o) {
     const e = o, { mainStyles: t } = oa();
-    return (n, s) => (I(), R("main", {
+    return (n, s) => ($(), R("main", {
       class: be(["mce-main", [
         { "mce-main--scrollable": e.scrollable }
       ]]),
       style: q([S(t)])
     }, [
-      e.scrollable ? (I(), R("div", Ua, [
-        te(n.$slots, "default")
-      ])) : te(n.$slots, "default", { key: 1 })
+      e.scrollable ? ($(), R("div", Ua, [
+        Q(n.$slots, "default")
+      ])) : Q(n.$slots, "default", { key: 1 })
     ], 6));
   }
 }), Ha = { class: "progress-indicator" }, Ya = {
@@ -6062,7 +6063,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
   class: "progress-indicator__bar-indeterminate"
 }, Wa = /* @__PURE__ */ X({
   __name: "ProgressIndicator",
-  props: /* @__PURE__ */ Re({
+  props: /* @__PURE__ */ $e({
     label: {},
     indeterminate: { type: Boolean }
   }, {
@@ -6071,11 +6072,11 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
   }),
   emits: ["update:modelValue"],
   setup(o) {
-    const e = Ae(o, "modelValue");
-    return (t, n) => (I(), R("div", Ha, [
-      o.label ? (I(), R("span", Ya, K(o.label), 1)) : Q("", !0),
+    const e = ke(o, "modelValue");
+    return (t, n) => ($(), R("div", Ha, [
+      o.label ? ($(), R("span", Ya, K(o.label), 1)) : ee("", !0),
       F("div", qa, [
-        o.indeterminate ? (I(), R("div", Ga)) : (I(), R("div", {
+        o.indeterminate ? ($(), R("div", Ga)) : ($(), R("div", {
           key: 0,
           class: "progress-indicator__bar-fill",
           style: q({ width: `${e.value * 100}%` })
@@ -6098,9 +6099,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       exporting: s,
       exportProgress: a
     } = de();
-    return (r, i) => (I(), R("div", Ja, [
+    return (r, i) => ($(), R("div", Ja, [
       F("div", Za, [
-        S(e) === "typing" ? (I(), R(ne, { key: 0 }, [
+        S(e) === "typing" ? ($(), R(se, { key: 0 }, [
           F("div", Qa, [
             F("span", ei, K(S(n)("Command")), 1),
             F("span", ti, K(S(n)("Enter")), 1)
@@ -6110,9 +6111,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
             F("span", oi, K(S(n)("Escape")), 1),
             F("span", null, K(S(t)("commitChanges")), 1)
           ])
-        ], 64)) : S(e) === "transforming" ? (I(), R(ne, { key: 1 }, [
+        ], 64)) : S(e) === "transforming" ? ($(), R(se, { key: 1 }, [
           F("div", si, [
-            H(Te, { icon: "$mouseRightClick" })
+            H(Ae, { icon: "$mouseRightClick" })
           ]),
           i[2] || (i[2] = F("span", null, " / ", -1)),
           F("div", ai, [
@@ -6124,9 +6125,9 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
             F("span", li, K(S(n)("Shift")), 1),
             F("span", null, K(S(t)("constrainToAxis")), 1)
           ])
-        ], 64)) : S(e) ? (I(), R("span", ci, K(S(t)(S(e))), 1)) : (I(), R(ne, { key: 3 }, [
+        ], 64)) : S(e) ? ($(), R("span", ci, K(S(t)(S(e))), 1)) : ($(), R(se, { key: 3 }, [
           F("div", ui, [
-            H(Te, { icon: "$mouseLeftClick" }),
+            H(Ae, { icon: "$mouseLeftClick" }),
             F("span", null, K(S(t)("selectObject")), 1)
           ]),
           i[4] || (i[4] = F("span", null, " + ", -1)),
@@ -6136,7 +6137,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           ]),
           i[5] || (i[5] = F("div", { class: "mce-statusbar__divider" }, null, -1)),
           F("div", hi, [
-            H(Te, { icon: "$mouseLeftClick" }),
+            H(Ae, { icon: "$mouseLeftClick" }),
             F("span", null, K(S(t)("selectArea")), 1)
           ]),
           i[6] || (i[6] = F("span", null, " + ", -1)),
@@ -6146,18 +6147,18 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           ]),
           i[7] || (i[7] = F("div", { class: "mce-statusbar__divider" }, null, -1)),
           F("div", vi, [
-            H(Te, { icon: "$mouseLeftClick" }),
+            H(Ae, { icon: "$mouseLeftClick" }),
             F("span", null, K(S(t)("dragSelected")), 1)
           ])
         ], 64))
       ]),
       F("div", yi, [
-        S(s) ? (I(), le(Ka, {
+        S(s) ? ($(), oe(Ka, {
           key: 0,
           modelValue: S(a),
-          "onUpdate:modelValue": i[0] || (i[0] = (l) => Tn(a) ? a.value = l : null),
+          "onUpdate:modelValue": i[0] || (i[0] = (c) => Tn(a) ? a.value = c : null),
           label: S(t)("exporting")
-        }, null, 8, ["modelValue", "label"])) : Q("", !0)
+        }, null, 8, ["modelValue", "label"])) : ee("", !0)
       ])
     ]));
   }
@@ -6171,10 +6172,10 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       textToFit: a,
       getObb: r,
       registerCommand: i,
-      unregisterCommand: l,
-      camera: c
+      unregisterCommand: c,
+      camera: l
     } = de(), u = V(), d = O(() => {
-      const { zoom: f, position: p } = c.value;
+      const { zoom: f, position: p } = l.value;
       return {
         transformOrigin: "left top",
         transform: `translate(${p.x}px, ${p.y}px) scale(${f.x}, ${f.y})`
@@ -6198,11 +6199,11 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         return !1;
       p.text.isValid() || p.text.setContent(" "), p.text.update(), n.value = "typing";
       const _ = u.value;
-      return _.set(p.text.base), await Pe(), _.pointerdown(f);
+      return _.set(p.text.base), await Re(), _.pointerdown(f);
     }
-    return vt(() => i({ command: "startTyping", handle: y })), we(() => l("startTyping")), e({
+    return gt(() => i({ command: "startTyping", handle: y })), we(() => c("startTyping")), e({
       textEditor: u
-    }), (f, p) => ze((I(), R("div", {
+    }), (f, p) => ze(($(), R("div", {
       class: "mce-text-editor",
       style: q({
         ...d.value
@@ -6233,7 +6234,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
 }), xi = { class: "mce-payhead" }, _i = /* @__PURE__ */ X({
   __name: "Playhead",
   setup(o) {
-    return (e, t) => (I(), R("div", xi, [...t[0] || (t[0] = [
+    return (e, t) => ($(), R("div", xi, [...t[0] || (t[0] = [
       F("header", { class: "mce-payhead__header" }, null, -1),
       F("main", { class: "mce-payhead__main" }, null, -1)
     ])]));
@@ -6262,23 +6263,23 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         transform: `matrix(1, 0, 0, 1, ${n.left}, ${n.top})`
       };
     });
-    return (n, s) => (I(), R("div", {
+    return (n, s) => ($(), R("div", {
       class: be(["mce-segment", [
         `mce-segment--${o.node.meta.inEditorIs}`,
         o.active && "mce-segment--active"
       ]]),
       style: q(t.value)
     }, [
-      o.active ? (I(), R("div", ki)) : Q("", !0),
+      o.active ? ($(), R("div", ki)) : ee("", !0),
       F("span", Ci, K(e.node.name), 1),
-      o.active ? (I(), R("div", Ei)) : Q("", !0)
+      o.active ? ($(), R("div", Ei)) : ee("", !0)
     ], 6));
   }
 }), Ai = { class: "mce-track" }, Si = /* @__PURE__ */ X({
   __name: "Track",
   setup(o) {
-    return (e, t) => (I(), R("div", Ai, [
-      te(e.$slots, "default")
+    return (e, t) => ($(), R("div", Ai, [
+      Q(e.$slots, "default")
     ]));
   }
 }), Mi = /* @__PURE__ */ X({
@@ -6287,7 +6288,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     node: {}
   },
   setup(o) {
-    return (e, t) => (I(), R("div", {
+    return (e, t) => ($(), R("div", {
       class: "mce-trackhead",
       style: q({
         height: `var(--timeline-track-height__${o.node.meta.inEditorIs}, 22px)`
@@ -6304,7 +6305,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       timeline: s,
       endTime: a,
       selection: r
-    } = de(), i = V(1e3 / 30), l = ue("rulerTpl"), c = V(!0), u = V([0, 0]), d = O(() => e.value?.findAll((z) => !!(z instanceof G && z.children.some(($) => $ instanceof Ln))) ?? []);
+    } = de(), i = V(1e3 / 30), c = ce("rulerTpl"), l = V(!0), u = V([0, 0]), d = O(() => e.value?.findAll((z) => !!(z instanceof G && z.children.some((I) => I instanceof Ln))) ?? []);
     function g(z) {
       if (z.ctrlKey) {
         if (!(z.wheelDeltaY ? Math.abs(Math.abs(z.wheelDeltaY) - Math.abs(3 * z.deltaY)) < 3 : z.deltaMode === 0)) {
@@ -6319,11 +6320,11 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         ];
     }
     function h(z) {
-      const $ = l.value?.box;
-      if ($) {
-        n.value = (z.clientX - $.left + u.value[0]) * t.value;
+      const I = c.value?.box;
+      if (I) {
+        n.value = (z.clientX - I.left + u.value[0]) * t.value;
         const E = (m) => {
-          n.value = (m.clientX - $.left + u.value[0]) * t.value;
+          n.value = (m.clientX - I.left + u.value[0]) * t.value;
         }, C = () => {
           window.removeEventListener("mousemove", E), window.removeEventListener("mouseup", C);
         };
@@ -6332,29 +6333,29 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     }
     function v(z) {
       if (z % 30 === 0) {
-        const $ = Math.floor(z / 30 / 60), E = Math.floor(z / 30) % 60, C = String($).padStart(2, "0"), m = String(E).padStart(2, "0");
+        const I = Math.floor(z / 30 / 60), E = Math.floor(z / 30) % 60, C = String(I).padStart(2, "0"), m = String(E).padStart(2, "0");
         return `${C}:${m}`;
       }
       return `${Math.floor(z % 30)}f`;
     }
     let y;
     function f() {
-      c.value = !1;
+      l.value = !1;
       let z;
-      function $(E) {
-        z !== void 0 && E !== void 0 && s.value.addTime(E - z), z = E, y = requestAnimationFrame($);
+      function I(E) {
+        z !== void 0 && E !== void 0 && s.value.addTime(E - z), z = E, y = requestAnimationFrame(I);
       }
-      $();
+      I();
     }
     function p() {
-      c.value = !0, y !== void 0 && (cancelAnimationFrame(y), y = void 0);
+      l.value = !0, y !== void 0 && (cancelAnimationFrame(y), y = void 0);
     }
     function _() {
-      c.value ? f() : p();
+      l.value ? f() : p();
     }
-    return we(p), (z, $) => (I(), R("div", {
+    return we(p), (z, I) => ($(), R("div", {
       class: "mce-timeline",
-      onWheel: $[0] || ($[0] = We(() => {
+      onWheel: I[0] || (I[0] = Ke(() => {
       }, ["prevent"]))
     }, [
       F("div", zi, [
@@ -6362,8 +6363,8 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
           class: "mce-timeline__play",
           onClick: _
         }, [
-          H(Te, {
-            icon: c.value ? "$play" : "$pause"
+          H(Ae, {
+            icon: l.value ? "$play" : "$pause"
           }, null, 8, ["icon"])
         ])
       ]),
@@ -6375,7 +6376,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
                 transform: `translateY(${u.value[1]}px)`
               })
             }, [
-              (I(!0), R(ne, null, _e(d.value, (E, C) => (I(), le(Mi, {
+              ($(!0), R(se, null, _e(d.value, (E, C) => ($(), oe(Mi, {
                 key: C,
                 node: E
               }, null, 8, ["node"]))), 128))
@@ -6389,7 +6390,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         }, [
           F("div", Fi, [
             F("div", Pi, [
-              H(mt, {
+              H(ft, {
                 ref: "rulerTpl",
                 zoom: 1 / S(t) * i.value,
                 unit: 100,
@@ -6406,13 +6407,13 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
                   transform: `translate(${u.value[0]}px, ${u.value[1]}px)`
                 })
               }, [
-                (I(!0), R(ne, null, _e(d.value, (E, C) => (I(), le(Si, { key: C }, {
-                  default: re(() => [
+                ($(!0), R(se, null, _e(d.value, (E, C) => ($(), oe(Si, { key: C }, {
+                  default: ne(() => [
                     H(Ti, {
                       node: E,
                       "ms-per-px": S(t),
                       active: S(r).some((m) => m.equal(E)),
-                      onMousedown: We((m) => r.value = [E], ["stop"])
+                      onMousedown: Ke((m) => r.value = [E], ["stop"])
                     }, null, 8, ["node", "ms-per-px", "active", "onMousedown"])
                   ]),
                   _: 2
@@ -6454,8 +6455,8 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       config: a,
       drawboardDom: r,
       renderEngine: i,
-      camera: l,
-      bindRenderCanvas: c,
+      camera: c,
+      bindRenderCanvas: l,
       hoverElement: u,
       state: d,
       setCursor: g,
@@ -6466,17 +6467,17 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       selection: p,
       getAabbInDrawboard: _,
       drawboardAabb: z,
-      drawboardPointer: $
-    } = s, E = ue("overlayContainerTpl"), C = ue("canvasTpl"), m = ue("selectorTpl"), b = ue("textEditorTpl"), k = V({ left: 0, top: 0, width: 0, height: 0 });
+      drawboardPointer: I
+    } = s, E = ce("overlayContainerTpl"), C = ce("canvasTpl"), m = ce("selectorTpl"), b = ce("textEditorTpl"), k = V({ left: 0, top: 0, width: 0, height: 0 });
     Ys({
       attach: O(() => E.value)
-    }), Xt(C, (A) => {
+    }), Ht(C, (A) => {
       const { width: N, height: L } = A[0].contentRect;
       i.value.resize(N, L);
-    }), vt(() => {
+    }), gt(() => {
       i.value.on("pointerdown", T), i.value.on("pointermove", M), i.value.on("pointerover", P);
     }), He(() => {
-      c(C.value, r.value);
+      l(C.value, r.value);
     }), we(() => {
       i.value.off("pointerdown", T), i.value.off("pointermove", M), i.value.off("pointerover", P);
     });
@@ -6485,7 +6486,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
     }
     function w(A) {
       let N, L;
-      if (Ct(
+      if (Et(
         { x: A.clientX, y: A.clientY },
         _(p.value)
       ))
@@ -6502,36 +6503,36 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       u.value = L, g(N);
     }
     function T(A) {
-      if (A.srcElement !== r.value && A.srcElement.dataset?.pointerdown_to_drawboard === void 0 || l.value.spaceKey || ![0, 2].includes(A.button))
+      if (A.srcElement !== r.value && A.srcElement.dataset?.pointerdown_to_drawboard === void 0 || c.value.spaceKey || ![0, 2].includes(A.button))
         return;
       const N = p.value[0], L = A.target, j = { x: A.clientX, y: A.clientY };
       let D = { ...j }, U = !1, W = !1, Z = [], he;
-      const Y = Ct({
+      const Y = Et({
         x: j.x + -z.value.left,
         y: j.y + -z.value.top
       }, _(p.value));
       if (A.button === 2) {
         if (!Y) {
-          const ee = t.activeStrategy({
+          const te = t.activeStrategy({
             element: L,
             oldElement: N,
             event: A,
             isExcluded: x
           });
-          ee && !(ee instanceof G) ? Z = ee.element ? [ee.element] : [] : Z = ee ? [ee] : [], p.value = Z;
+          te && !(te instanceof G) ? Z = te.element ? [te.element] : [] : Z = te ? [te] : [], p.value = Z;
         }
         return;
       }
-      function xe(ee) {
-        const se = t.activeStrategy({
+      function xe(te) {
+        const ie = t.activeStrategy({
           element: L,
           oldElement: N,
-          event: ee,
+          event: te,
           isExcluded: x
         });
-        se && !(se instanceof G) ? Z = se.element ? [se.element] : [] : Z = se ? [se] : [], p.value = Z;
+        ie && !(ie instanceof G) ? Z = ie.element ? [ie.element] : [] : Z = ie ? [ie] : [], p.value = Z;
       }
-      function oe() {
+      function ae() {
         d.value !== "selecting" && (d.value = "selecting"), k.value = {
           left: Math.min(j.x, D.x) - z.value.left,
           top: Math.min(j.y, D.y) - z.value.top,
@@ -6540,55 +6541,55 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
         }, Z = v(k.value);
       }
       function ve() {
-        const ee = t.activeStrategy({
+        const te = t.activeStrategy({
           element: L,
           oldElement: N,
           event: A,
           isExcluded: () => !1
         });
-        let se;
-        ee && !(ee instanceof G) ? (se = ee.element, he = ee.state) : se = ee, se && (A?.ctrlKey || A?.shiftKey || A?.metaKey) ? p.value.findIndex((ge) => ge.equal(se)) > -1 ? Z = p.value.filter((ge) => !ge.equal(se)) : Z = [...p.value, se] : Z = se ? [se] : [];
+        let ie;
+        te && !(te instanceof G) ? (ie = te.element, he = te.state) : ie = te, ie && (A?.ctrlKey || A?.shiftKey || A?.metaKey) ? p.value.findIndex((ge) => ge.equal(ie)) > -1 ? Z = p.value.filter((ge) => !ge.equal(ie)) : Z = [...p.value, ie] : Z = ie ? [ie] : [];
       }
       function ye() {
         return !U && (Math.abs(D.x - j.x) >= 3 || Math.abs(D.y - j.y) >= 3);
       }
-      function J(ee) {
-        Y ? ye() && (U = !0, y("startTransform")) : L && !h(L) && ye() && (U = !0, xe(ee), Pe(() => {
+      function J(te) {
+        Y ? ye() && (U = !0, y("startTransform")) : L && !h(L) && ye() && (U = !0, xe(te), Re(() => {
           W || y("startTransform");
         }));
       }
-      function me(ee) {
-        D = { x: ee.clientX, y: ee.clientY }, Y || (!L || h(L)) && oe();
+      function me(te) {
+        D = { x: te.clientX, y: te.clientY }, Y || (!L || h(L)) && ae();
       }
-      async function ce(ee) {
+      async function ue(te) {
         if (d.value && (d.value = void 0), !U) {
           if (L && ve(), p.value = Z, he && Z[0] && !f(Z[0]))
             switch (he) {
               case "typing": {
-                await y("startTyping", ee);
+                await y("startTyping", te);
                 break;
               }
             }
           w(A);
         }
-        i.value.off("pointermove", J), document.removeEventListener("pointermove", me), document.removeEventListener("pointerup", ce), W = !0;
+        i.value.off("pointermove", J), document.removeEventListener("pointermove", me), document.removeEventListener("pointerup", ue), W = !0;
       }
-      i.value.on("pointermove", J), document.addEventListener("pointermove", me), document.addEventListener("pointerup", ce);
+      i.value.on("pointermove", J), document.addEventListener("pointermove", me), document.addEventListener("pointerup", ue);
     }
     function M(A) {
-      A.srcElement === r.value && ($.value = { x: A.clientX, y: A.clientY }, !(l.value.grabbing || A.button === 1 || d.value && d.value !== "typing") && w(A));
+      A.srcElement === r.value && (I.value = { x: A.clientX, y: A.clientY }, !(c.value.grabbing || A.button === 1 || d.value && d.value !== "typing") && w(A));
     }
     function P() {
-      $.value = void 0, u.value = void 0, g(void 0);
+      I.value = void 0, u.value = void 0, g(void 0);
     }
     function B() {
       r.value && (r.value.scrollLeft && (r.value.scrollLeft = 0), r.value.scrollTop && (r.value.scrollTop = 0));
     }
-    return (A, N) => (I(), le(ja, { class: "mce-editor" }, {
-      default: re(() => [
+    return (A, N) => ($(), oe(ja, { class: "mce-editor" }, {
+      default: ne(() => [
         H(Va),
         H(Xa, null, {
-          default: re(() => [
+          default: ne(() => [
             F("div", {
               ref_key: "drawboardDom",
               ref: r,
@@ -6596,7 +6597,7 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
               "data-pixel-ratio": S(i).pixelRatio,
               onDblclick: N[0] || (N[0] = (L) => n("dblclick:drawboard", L)),
               onScroll: B,
-              onWheel: N[1] || (N[1] = We(() => {
+              onWheel: N[1] || (N[1] = Ke(() => {
               }, ["prevent"]))
             }, [
               F("canvas", Di, null, 512),
@@ -6610,51 +6611,51 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
                 "selected-area": k.value,
                 "resize-strategy": S(p)[0] ? t.resizeStrategy(S(p)[0]) : void 0
               }, {
-                transformable: re(({ box: L }) => [
-                  te(A.$slots, "transformer", { box: L })
+                transformable: ne(({ box: L }) => [
+                  Q(A.$slots, "transformer", { box: L })
                 ]),
-                default: re(({ box: L }) => [
-                  te(A.$slots, "selector", { box: L })
+                default: ne(({ box: L }) => [
+                  Q(A.$slots, "selector", { box: L })
                 ]),
                 _: 3
               }, 8, ["selected-area", "resize-strategy"]),
-              S(a).scrollbar ? (I(), le($a, { key: 0 })) : Q("", !0),
-              A.$slots.floatbar ? (I(), le(ga, {
+              S(a).scrollbar ? ($(), oe($a, { key: 0 })) : ee("", !0),
+              A.$slots.floatbar ? ($(), oe(ga, {
                 key: 1,
                 target: S(d) === "typing" ? b.value?.textEditor : m.value?.transformable?.$el
               }, {
-                default: re(() => [
-                  te(A.$slots, "floatbar")
+                default: ne(() => [
+                  Q(A.$slots, "floatbar")
                 ]),
                 _: 3
-              }, 8, ["target"])) : Q("", !0),
+              }, 8, ["target"])) : ee("", !0),
               H(pa),
               H(xa),
-              S(a).ruler ? (I(), le(Ma, { key: 2 })) : Q("", !0),
-              te(A.$slots, "drawboard")
+              S(a).ruler ? ($(), oe(Ma, { key: 2 })) : ee("", !0),
+              Q(A.$slots, "drawboard")
             ], 40, Li)
           ]),
           _: 3
         }),
-        te(A.$slots, "default"),
-        H(Rt, {
+        Q(A.$slots, "default"),
+        H(Bt, {
           modelValue: S(a).statusbar,
           "onUpdate:modelValue": N[2] || (N[2] = (L) => S(a).statusbar = L),
           position: "bottom",
           size: 24
         }, {
-          default: re(() => [
+          default: ne(() => [
             H(bi)
           ]),
           _: 1
         }, 8, ["modelValue"]),
-        H(Rt, {
+        H(Bt, {
           modelValue: S(a).timeline,
           "onUpdate:modelValue": N[3] || (N[3] = (L) => S(a).timeline = L),
           position: "bottom",
           size: 160
         }, {
-          default: re(() => [
+          default: ne(() => [
             H(Bi)
           ]),
           _: 1
@@ -6664,32 +6665,76 @@ const Ft = Symbol.for("MceMenuSymbol"), Te = /* @__PURE__ */ X({
       _: 3
     }));
   }
+}), ar = /* @__PURE__ */ X({
+  __name: "Dialog",
+  props: /* @__PURE__ */ $e({
+    ...qe()
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(o, { expose: e }) {
+    const t = o, n = ke(o, "modelValue"), s = ce("overlayTpl"), a = O(() => ({
+      onClick: () => n.value = !0
+    }));
+    function r() {
+      s.value?.updateLocation();
+    }
+    return e({
+      isActive: n,
+      updateLocation: r
+    }), (i, c) => ($(), oe(ot, {
+      ref: "overlayTpl",
+      modelValue: n.value,
+      "onUpdate:modelValue": c[0] || (c[0] = (l) => n.value = l),
+      location: t.location,
+      offset: t.offset,
+      target: t.target,
+      attach: t.attach,
+      class: "mce-dialog"
+    }, {
+      activator: ne((l) => [
+        Q(i.$slots, "activator", Oe(l, {
+          props: { ...l.props, ...a.value }
+        }))
+      ]),
+      default: ne(() => [
+        Q(i.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["modelValue", "location", "offset", "target", "attach"]));
+  }
 });
 export {
+  ar as Dialog,
   un as Doc,
   Le as Editor,
   sr as EditorLayout,
-  Rt as EditorLayoutItem,
+  Bt as EditorLayoutItem,
   mn as IconsSymbol,
-  $t as MceComponentIcon,
+  It as MceComponentIcon,
   fn as MceLayoutItemKey,
-  Ke as MceLayoutKey,
-  Ft as MceMenuSymbol,
-  dt as MceOverlaySymbol,
+  Je as MceLayoutKey,
+  Pt as MceMenuSymbol,
+  ht as MceOverlaySymbol,
   dn as MceSvgIcon,
+  ma as Menu,
   ln as Model,
-  Et as SUPPORTS_CLIPBOARD,
+  ft as Ruler,
+  Tt as SUPPORTS_CLIPBOARD,
+  Rt as Scrollbar,
   La as Transformable,
-  Zt as USER_AGENT,
-  tt as Workspace,
+  Qt as USER_AGENT,
+  nt as Workspace,
   Me as boundingBoxToStyle,
   er as consoleError,
   uo as consoleWarn,
-  qe as convertToUnit,
+  Ge as convertToUnit,
   Us as createIcons,
-  ct as createImageElement,
+  dt as createImageElement,
   ia as createLayout,
-  lt as createTextElement,
+  ut as createTextElement,
   Ks as defaultActiveStrategy,
   Js as defaultHoverStrategy,
   Ws as defaultResizeStrategy,
@@ -6699,19 +6744,19 @@ export {
   ho as getImageSizeFromUrl,
   go as getRandomValues,
   cn as iElementToYElements,
-  en as imageExtRe,
-  Qt as imageExts,
+  ct as imageExtRe,
+  en as imageExts,
   fo as imageMimeTypeExtMap,
   po as isClickInsideElement,
-  $e as isMac,
+  Fe as isMac,
   Be as isOverlappingAabb,
   co as isOverlappingObb,
-  Ct as isPointInsideAabb,
+  Et as isPointInsideAabb,
   mo as isWindows,
-  wt as makeIconProps,
+  _t as makeIconProps,
   na as makeLayoutItemProps,
   ta as makeLayoutProps,
-  nt as makeMceOverlayProps,
+  qe as makeMceOverlayProps,
   Gs as makeMceStrategyProps,
   Qi as minBoundingBox,
   os as mixins,