mce 0.2.4 → 0.2.6

package/dist/index.js

@@ -1,6 +1,6 @@
-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 { ref as V, computed as $, 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 $e, createElementVNode as F, toValue as yn, getCurrentInstance as Qe, onScopeDispose as gn, createElementBlock as R, openBlock as O, 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 Oe, 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 { Timeline as $n, Engine as On, 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";
@@ -23,37 +23,37 @@ const eo = (o) => {
       t.value.delete(r);
     },
     exec: (r, ...i) => {
-      const [c, l] = r.split(":");
-      l !== void 0 && i.unshift(l);
-      const u = t.value.get(c);
+      const [l, c] = r.split(":");
+      c !== void 0 && i.unshift(c);
+      const u = t.value.get(l);
       if (!u)
-        throw new Error(`Command "${c}" not found`);
+        throw new Error(`Command "${l}" not found`);
       const d = u.handle(...i);
-      return e(`command:${c}`, d), d;
+      return e(`command:${l}`, d), d;
     }
   });
 }, to = (o) => {
   const {
     config: e
   } = o;
-  function t(l, u) {
-    return Dn(e.value, l) ?? u;
+  function t(c, u) {
+    return Dn(e.value, c) ?? u;
   }
-  function n(l, u) {
-    Vn(e.value, l, u);
+  function n(c, u) {
+    Vn(e.value, c, u);
   }
-  function s(l) {
-    return O({
-      get: () => t(l),
-      set: (u) => n(l, u)
+  function s(c) {
+    return $({
+      get: () => t(c),
+      set: (u) => n(c, u)
     });
   }
-  function a(l, u) {
-    const d = s(l);
+  function a(c, u) {
+    const d = s(c);
     return d.value === void 0 && (d.value = u), d;
   }
   function r() {
-    return new Promise((l) => {
+    return new Promise((c) => {
       const { onChange: u, open: d } = Ut({
         accept: ".json",
         reset: !0,
@@ -61,17 +61,17 @@ const eo = (o) => {
       });
       u(async (g) => {
         const h = g?.[0];
-        h && (e.value = JSON.parse(await h.text()), l(e.value));
+        h && (e.value = JSON.parse(await h.text()), c(e.value));
       }), d();
     });
   }
   function i() {
     return new Blob([JSON.stringify(e.value)], { type: "application/json" });
   }
-  function c(l = "settings.json") {
+  function l(c = "settings.json") {
     Kt(
       i(),
-      l
+      c
     );
   }
   Object.assign(o, {
@@ -81,7 +81,7 @@ const eo = (o) => {
     registerConfig: a,
     importConfig: r,
     exportConfig: i,
-    saveAsConfig: c
+    saveAsConfig: l
   });
 }, no = (o, e) => {
   const {
@@ -114,7 +114,7 @@ const eo = (o) => {
 }, oo = (o) => {
   const {
     emit: e
-  } = o, t = fe(new Xn()), n = V(new On({ startTime: 0, endTime: 0, loop: !0, paused: !0 })), s = new $n({
+  } = o, t = fe(new Xn()), n = V(new $n({ startTime: 0, endTime: 0, loop: !0, paused: !0 })), s = new On({
     pixelRatio: 2,
     fonts: t,
     timeline: n.value,
@@ -126,7 +126,7 @@ const eo = (o) => {
   s.root.append(a.value), s.root.append(r.value);
   const i = V(s);
   i.value.start();
-  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();
+  const l = V(), c = V({ left: 0, top: 0, width: 0, height: 0 }), u = V(), d = V(), g = $(() => d.value?.root), h = V(), v = V(), y = V();
   function f(z, I) {
     switch (v.value = z, y.value = I, z) {
       case "drawing":
@@ -141,8 +141,8 @@ const eo = (o) => {
   function _() {
     const { x: z = 0, y: I = 0 } = h.value ?? {};
     return a.value.toGlobal({
-      x: z - l.value.left,
-      y: I - l.value.top
+      x: z - c.value.left,
+      y: I - c.value.top
     }, { x: 0, y: 0 });
   }
   Object.assign(o, {
@@ -152,8 +152,8 @@ const eo = (o) => {
     camera: a,
     drawboardEffect: r,
     root: g,
-    drawboardDom: c,
-    drawboardAabb: l,
+    drawboardDom: l,
+    drawboardAabb: c,
     workspace: u,
     doc: d,
     state: v,
@@ -189,21 +189,21 @@ const eo = (o) => {
     emit: t,
     fonts: n
   } = o, s = V(!1);
-  async function a(c, l) {
-    const u = await n.load(c, l);
+  async function a(l, c) {
+    const u = await n.load(l, c);
     return console.log("loadFont", u), t("loadFont", u), u;
   }
-  async function r(c, l) {
+  async function r(l, c) {
     s.value = !0;
     try {
-      n.fallbackFont = await a(c, l);
+      n.fallbackFont = await a(l, c);
     } finally {
       s.value = !1;
     }
   }
   async function i() {
     for (; s.value; )
-      await new Promise((c) => setTimeout(c, 100));
+      await new Promise((l) => setTimeout(l, 100));
     return await n.waitUntilLoad();
   }
   return Object.assign(o, {
@@ -213,9 +213,9 @@ const eo = (o) => {
     waitUntilFontLoad: i
   }), () => {
     const {
-      defaultFont: c
+      defaultFont: l
     } = e;
-    c && r(c);
+    l && r(l);
   };
 }, io = {
   cancel: "Cancel",
@@ -231,7 +231,6 @@ const eo = (o) => {
   file: "File",
   new: "New",
   open: "Open",
-  preferences: "Preferences",
   import: "Import",
   export: "Export",
   "saveAs:png": "Save as PNG",
@@ -294,7 +293,7 @@ const eo = (o) => {
 }, ro = (o, e) => {
   const {
     locale: t
-  } = e, n = O(() => {
+  } = e, n = $(() => {
     const {
       locale: a,
       fallback: r,
@@ -313,7 +312,7 @@ const eo = (o) => {
     };
   });
   function s(a, r) {
-    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];
+    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];
     return u === void 0 && console.warn(`[mce] Not found '${a}' key in '${i}' locale messages.`), u ?? a ?? r;
   }
   Object.assign(o, {
@@ -323,16 +322,16 @@ const eo = (o) => {
   const {
     root: e,
     getAncestor: t
-  } = o, n = O(() => e.value?.children.filter(c) ?? []), s = V(-1), a = O(() => n.value[s.value]), r = O(() => {
+  } = o, n = $(() => e.value?.children.filter(l) ?? []), s = V(-1), a = $(() => n.value[s.value]), r = $(() => {
     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 c(u) {
+  function l(u) {
     return u instanceof G && u.meta?.inEditorIs === "Frame";
   }
-  function l(u) {
+  function c(u) {
     const d = t(u);
-    return d && c(d) ? d : void 0;
+    return d && l(d) ? d : void 0;
   }
   return Object.assign(o, {
     frames: n,
@@ -340,14 +339,14 @@ const eo = (o) => {
     currentFrameIndex: s,
     currentFrame: a,
     currentFrameAabb: r,
-    isFrame: c,
-    getAncestorFrame: l
+    isFrame: l,
+    getAncestorFrame: c
   }), () => {
     const {
       selection: u
     } = o;
     pe(() => u.value.length === 1 && u.value[0], (d) => {
-      d && c(d) && (s.value = n.value.findIndex((g) => g.equal(d)));
+      d && l(d) && (s.value = n.value.findIndex((g) => g.equal(d)));
     });
   };
 };
@@ -378,12 +377,12 @@ function co(o, e) {
   if (!o.rotate && !e.rotate)
     return Be(o, e);
   {
-    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)];
+    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)];
       return {
         axis: [d, g],
-        projectionRadius: (h) => i / 2 * t(h, d) + c / 2 * t(h, g)
+        projectionRadius: (h) => i / 2 * t(h, d) + l / 2 * t(h, g)
       };
     }, s = n(o), a = n(e), r = [
       o.left + o.width / 2 - (e.left + e.width / 2),
@@ -395,7 +394,7 @@ function co(o, e) {
     return !0;
   }
 }
-function Qi(o) {
+function Zi(o) {
   if (o.length < 2)
     return {
       left: o[0]?.left ?? 0,
@@ -417,7 +416,7 @@ function Qi(o) {
 function uo(o) {
   Lt(`mce: ${o}`);
 }
-function er(o) {
+function Qi(o) {
   Lt(`mce error: ${o}`);
 }
 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);
@@ -433,8 +432,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 c = this.naturalWidth, l = this.naturalHeight;
-      !c || !l ? a(new Error("failed to read natural size")) : s({ width: c, height: l });
+      const l = this.naturalWidth, c = this.naturalHeight;
+      !l || !c ? a(new Error("failed to read natural size")) : s({ width: l, height: c });
     }, r.onerror = function() {
       i && clearTimeout(i), a(new Error(`failed to load image: ${o}`));
     }, r.src = o;
@@ -478,8 +477,8 @@ async function dt(o) {
   };
 }
 function po(o, e) {
-  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;
+  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;
 }
 function vo(o) {
   if (o && "$el" in o) {
@@ -534,7 +533,7 @@ function tn(o, e) {
   }, {});
 }
 const go = crypto.getRandomValues.bind(crypto), bo = () => go(new Uint32Array(1))[0], wo = "10000000-1000-4000-8000" + -1e11;
-function tr() {
+function er() {
   return wo.replace(/[018]/g, (o) => (o ^ bo() & 15 >> o / 4).toString(16));
 }
 const xo = [
@@ -552,25 +551,25 @@ const ko = (o) => {
   const {
     registerConfig: e
   } = o, t = e("hotkeys", xo), n = V(/* @__PURE__ */ new Map());
-  function s(c) {
-    if (Array.isArray(c))
-      c.forEach((l) => s(l));
+  function s(l) {
+    if (Array.isArray(l))
+      l.forEach((c) => s(c));
     else {
       const {
-        when: l,
+        when: c,
         handle: u,
         ...d
-      } = c, {
+      } = l, {
         command: g
       } = d;
       t.value = [
         ...t.value.filter((h) => h.command !== g),
         d
-      ], n.value.set(g, c);
+      ], n.value.set(g, l);
     }
   }
-  function a(c) {
-    t.value = t.value.filter((l) => l.command !== c);
+  function a(l) {
+    t.value = t.value.filter((c) => c.command !== l);
   }
   const r = {
     ArrowUp: "↑",
@@ -595,12 +594,12 @@ const ko = (o) => {
     "™": "2",
     Dead: "N"
   };
-  function i(c) {
-    if (!c)
+  function i(l) {
+    if (!l)
       return "";
-    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) => {
+    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) => {
       switch (d) {
         case "Control":
           return Fe ? "⌃" : "Ctrl";
@@ -628,19 +627,19 @@ const ko = (o) => {
     getKbd: i
   }), () => {
     const {
-      exec: c
+      exec: l
     } = o;
     Xt(
       An ? window : void 0,
       "keydown",
-      (l) => {
-        if (_o(l))
+      (c) => {
+        if (_o(c))
           return;
         const u = [
-          (l.metaKey || l.ctrlKey) && "CmdOrCtrl",
-          l.altKey && "Alt",
-          l.shiftKey && "Shift",
-          !["Meta", "Control", "Alt", "Shift"].includes(l.key) && l.key
+          (c.metaKey || c.ctrlKey) && "CmdOrCtrl",
+          c.altKey && "Alt",
+          c.shiftKey && "Shift",
+          !["Meta", "Control", "Alt", "Shift"].includes(c.key) && c.key
         ].filter(Boolean).map((d) => d.toLowerCase()).sort().join("+");
         t.value.forEach((d) => {
           const g = d.command, h = n.value.get(g);
@@ -655,7 +654,7 @@ const ko = (o) => {
                   return p;
               }
             }).filter(Boolean).map((p) => p.toLowerCase()).sort().join("+");
-            u === f && (!h?.when || h.when(l)) && (l.preventDefault(), h?.handle ? h.handle(l) : c(g), o.emit(`hotkey:${g}`, l));
+            u === f && (!h?.when || h.when(c)) && (c.preventDefault(), h?.handle ? h.handle(c) : l(g), o.emit(`hotkey:${g}`, c));
           });
         });
       },
@@ -667,33 +666,33 @@ const ko = (o) => {
     root: e,
     timeline: t,
     renderEngine: n
-  } = o, s = V(10), a = O({
+  } = o, s = V(10), a = $({
     get: () => t.value.currentTime,
-    set: (l) => {
+    set: (c) => {
       const { startTime: u, endTime: d } = t.value;
-      t.value.currentTime = Pn(l, u, d);
+      t.value.currentTime = Pn(c, u, d);
     }
-  }), r = O(() => t.value.startTime), i = O(() => t.value.endTime), c = (l) => {
+  }), r = $(() => t.value.startTime), i = $(() => t.value.endTime), l = (c) => {
     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(l) ? l : [l]).forEach((h) => h.findOne(d)), u;
+    return (Array.isArray(c) ? c : [c]).forEach((h) => h.findOne(d)), u;
   };
   return Object.assign(o, {
     msPerPx: s,
     currentTime: a,
     startTime: r,
     endTime: i,
-    getTimeRange: c
+    getTimeRange: l
   }), () => {
     const {
-      on: l
+      on: c
     } = o;
     async function u() {
-      await n.value.nextTick(), t.value.endTime = e.value ? c(e.value).endTime : 0;
+      await n.value.nextTick(), t.value.endTime = e.value ? l(e.value).endTime : 0;
     }
-    qt.on("loaded", u), l("setDoc", u);
+    qt.on("loaded", u), c("setDoc", u);
   };
 }, Eo = (o, e) => {
   Object.assign(o, {
@@ -749,7 +748,7 @@ const To = (o) => {
   function r(h, v) {
     let y;
     if (Array.isArray(h) && h.length > 0)
-      h.length === 1 ? y = r(h[0]) : y = { ...c(h), rotate: 0 };
+      h.length === 1 ? y = r(h[0]) : y = { ...l(h), rotate: 0 };
     else if (h instanceof G) {
       const f = h.style;
       At([f.left, f.top, f.width, f.height, f.rotate]);
@@ -778,11 +777,11 @@ const To = (o) => {
   function i(h) {
     return r(h, "drawboard");
   }
-  function c(h, v) {
+  function l(h, v) {
     let y;
     if (Array.isArray(h) && h.length > 0)
       if (h.length === 1)
-        y = c(h[0]);
+        y = l(h[0]);
       else {
         const f = {
           minX: Number.MAX_SAFE_INTEGER,
@@ -792,7 +791,7 @@ const To = (o) => {
         };
         h.forEach((p) => {
           if (p instanceof G) {
-            const _ = c(p);
+            const _ = l(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 = {
@@ -825,39 +824,39 @@ const To = (o) => {
     }
     return y;
   }
-  function l(h) {
-    return c(h, "drawboard");
+  function c(h) {
+    return l(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(() => c(t.value?.children ?? [])), g = O(() => c(n.value));
+  const d = $(() => l(t.value?.children ?? [])), g = $(() => l(n.value));
   Object.assign(o, {
     obbToFit: a,
     getObb: r,
     getObbInDrawboard: i,
-    getAabb: c,
-    getAabbInDrawboard: l,
+    getAabb: l,
+    getAabbInDrawboard: c,
     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((c) => s(c)) : e.value.set(i.name, i);
+    Array.isArray(i) ? i.forEach((l) => s(l)) : e.value.set(i.name, i);
   }, a = (i) => {
     e.value.delete(i);
-  }, r = (i, c = {}) => {
-    const l = e.value.get(i)?.handle({
-      ...c,
+  }, r = (i, l = {}) => {
+    const c = e.value.get(i)?.handle({
+      ...l,
       onProgress: (u) => {
-        n.value = u, c.onProgress?.(u);
+        n.value = u, l.onProgress?.(u);
       }
     });
-    return l instanceof Promise ? (n.value = 0, t.value = !0, l.finally(() => {
+    return c instanceof Promise ? (n.value = 0, t.value = !0, c.finally(() => {
       t.value = !1;
-    })) : l;
+    })) : c;
   };
   Object.assign(o, {
     exporters: e,
@@ -881,26 +880,26 @@ const To = (o) => {
     handle: (r) => {
       const {
         selected: i = !1,
-        scale: c
+        scale: l
       } = r;
-      let l = [];
-      Array.isArray(i) ? l = i : (i === !0 && (l = n.value), l.length === 0 && (l = s.value?.children ?? []));
-      const u = t(l, "frame");
+      let c = [];
+      Array.isArray(i) ? c = i : (i === !0 && (c = n.value), c.length === 0 && (c = s.value?.children ?? []));
+      const u = t(c, "frame");
       return {
         style: {
           width: u.width,
           height: u.height,
-          scaleX: c,
-          scaleY: c
+          scaleX: l,
+          scaleY: l
         },
-        children: l.map((d) => {
+        children: c.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(l)
+          ...a(c)
         }
       };
     }
@@ -909,7 +908,7 @@ const To = (o) => {
   const {
     state: e
   } = o, t = V(/* @__PURE__ */ new Map()), n = (i) => {
-    Array.isArray(i) ? i.forEach((c) => n(c)) : t.value.set(i.name, i);
+    Array.isArray(i) ? i.forEach((l) => n(l)) : t.value.set(i.name, i);
   };
   Object.assign(o, {
     loaders: t,
@@ -919,34 +918,34 @@ const To = (o) => {
     },
     load: async (i) => {
       e.value = "loading";
-      let c;
+      let l;
       try {
-        for (const l of t.value.values())
-          if (await l.test(i)) {
-            c = await l.load(i);
+        for (const c of t.value.values())
+          if (await c.test(i)) {
+            l = await c.load(i);
             break;
           }
       } finally {
         e.value = void 0;
       }
-      if (c === void 0)
+      if (l === void 0)
         throw new Error(`Failed to load source "${i}"`);
-      return c;
+      return l;
     },
     openFileDialog: (i = {}) => {
       const {
-        multiple: c = !1
+        multiple: l = !1
       } = i;
-      return new Promise((l) => {
+      return new Promise((c) => {
         const u = [];
         for (const v of t.value.values())
           v.accept && u.push(v.accept);
         const d = u.join(","), { onChange: g, open: h } = Ut({
           accept: d,
           reset: !0,
-          multiple: c
+          multiple: l
         });
-        g((v) => l(v ? Array.from(v) : [])), h();
+        g((v) => c(v ? Array.from(v) : [])), h();
       });
     }
   });
@@ -963,15 +962,15 @@ const To = (o) => {
       return "version" in s && "elements" in s && console.log(s), s;
     }
   });
-}, Oo = (o) => {
+}, $o = (o) => {
   const {
     renderEngine: e,
     rootAabb: t,
     currentFrameAabb: n,
     config: s
-  } = o, a = O(() => s.value.viewMode === "frame" ? n.value : t.value);
-  function r(i, c) {
-    function l() {
+  } = o, a = $(() => s.value.viewMode === "frame" ? n.value : t.value);
+  function r(i, l) {
+    function c() {
       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));
     }
@@ -979,7 +978,7 @@ const To = (o) => {
       i._onRendered && e.value.off("rendered", i._onRendered), e.value.input.setTarget(e.value.view);
     }
     function d() {
-      u(), i._onRendered = l, e.value.on("rendered", l), c && e.value.input.setTarget(c);
+      u(), i._onRendered = c, e.value.on("rendered", c), l && e.value.input.setTarget(l);
     }
     return d(), u;
   }
@@ -989,15 +988,15 @@ const To = (o) => {
   }), () => {
     const {
       root: i,
-      currentFrame: c,
-      on: l,
+      currentFrame: l,
+      on: c,
       exec: u
     } = o;
     function d() {
       switch (s.value.viewMode) {
         case "frame":
           i.value?.children.forEach((g) => {
-            g instanceof G && (g.visible = g.equal(c.value));
+            g instanceof G && (g.visible = g.equal(l.value));
           });
           break;
         case "edgeless":
@@ -1008,21 +1007,21 @@ const To = (o) => {
       }
       u("zoomToFit");
     }
-    pe(() => s.value.viewMode, d), l("setCurrentFrame", d), l("setDoc", d);
+    pe(() => s.value.viewMode, d), c("setCurrentFrame", d), c("setDoc", d);
   };
-}, $o = (o) => {
+}, Oo = (o) => {
   const {
     config: e
   } = o;
   function t(s) {
     function a(r) {
       const i = r.text.base.characters;
-      let c = 0, l;
+      let l = 0, c;
       i.forEach((f) => {
         const p = f.lineBox.left + f.lineBox.width;
-        p > c && (l = f, c = p);
+        p > l && (c = f, l = p);
       });
-      const u = {}, d = i.filter((f) => f.lineBox.top === l?.lineBox.top).map((f) => (Object.assign(
+      const u = {}, d = i.filter((f) => f.lineBox.top === c?.lineBox.top).map((f) => (Object.assign(
         u,
         { ...f.parent.style },
         { ...f.parent.parent.style }
@@ -1058,25 +1057,25 @@ const To = (o) => {
       t(s);
       return;
     }
-    function i(c) {
-      if (!c.text?.isValid?.() || typeof c.text?.content != "object")
+    function i(l) {
+      if (!l.text?.isValid?.() || typeof l.text?.content != "object")
         return;
-      const l = c.style.toJSON();
+      const c = l.style.toJSON();
       switch (r) {
         case "autoWidth":
-          l.width = "auto";
+          c.width = "auto";
           break;
         case "autoHeight":
-          l.height = "auto";
+          c.height = "auto";
           break;
       }
       const { boundingBox: u } = lt({
-        style: l,
-        content: c.text.content
+        style: c,
+        content: l.text.content
       });
-      (c.style.width !== u.width || c.style.height !== u.height) && (c.style.width = u.width, c.style.height = u.height, c.requestRedraw());
+      (l.style.width !== u.width || l.style.height !== u.height) && (l.style.width = u.width, l.style.height = u.height, l.requestRedraw());
     }
-    i(s), s.findOne((c) => (c instanceof G && i(c), !1));
+    i(s), s.findOne((l) => (l instanceof G && i(l), !1));
   }
   return Object.assign(o, {
     textFontSizeToFit: t,
@@ -1108,8 +1107,8 @@ const To = (o) => {
     textFontSizeToFit: a,
     textToFit: r,
     log: i,
-    root: c,
-    isFrame: l,
+    root: l,
+    isFrame: c,
     isLock: u,
     getObbInDrawboard: d,
     config: g,
@@ -1134,7 +1133,7 @@ const To = (o) => {
         x = n.value;
       else {
         const U = f.value[0];
-        U && (l(U) ? x = U : x = h(U));
+        U && (c(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(() => {
@@ -1203,7 +1202,7 @@ const To = (o) => {
       f.value = b ? [b] : [];
   }
   function m(b) {
-    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)) ?? [];
+    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)) ?? [];
     return f.value = k, k;
   }
   Object.assign(o, {
@@ -1224,8 +1223,8 @@ const To = (o) => {
     frameThumbs: a,
     emit: r,
     selection: i,
-    frames: c,
-    config: l
+    frames: l,
+    config: c
   } = o;
   function u(y = {}, f) {
     const p = Gt({
@@ -1237,8 +1236,8 @@ const To = (o) => {
         inEditorIs: "Frame"
       }
     });
-    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);
+    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);
     e.value?.addElement(p, { index: _ }), v(_), r("addFrame", _);
   }
   function d(y = s.value) {
@@ -1263,9 +1262,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(c.value.length - 1, y));
+    y = Math.max(0, Math.min(l.value.length - 1, y));
     const f = s.value;
-    s.value = y, l.value.viewMode === "edgeless" ? i.value = [c.value[y]] : i.value = [], r("setCurrentFrame", y, f);
+    s.value = y, c.value.viewMode === "edgeless" ? i.value = [l.value[y]] : i.value = [], r("setCurrentFrame", y, f);
   }
   Object.assign(o, {
     addFrame: u,
@@ -1539,9 +1538,9 @@ function Qo(o, e = {}, t, n = !1) {
 }
 function cn(o, e, t = !1) {
   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);
+  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);
   }), n;
 }
 class un extends ln {
@@ -1584,9 +1583,12 @@ class un extends ln {
   _isSelfTransaction(e) {
     return !e.origin || e.origin === this._yDoc.clientID;
   }
+  _debug(...e) {
+  }
   _onChildrenChange(e, t) {
     if (this._isSelfTransaction(t))
       return;
+    this._debug("_onChildrenChange", e);
     const { keysChanged: n, changes: s } = e;
     n.forEach((a) => {
       const r = s.keys.get(a), i = this._yChildren.get(a);
@@ -1622,9 +1624,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 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;
+    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;
   }
   addElement(e, t) {
     return this.transact(() => this._addElement(e, t));
@@ -1670,30 +1672,30 @@ class un extends ln {
     if (n) {
       e._propertyAccessor = void 0;
       const r = {};
-      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));
+      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));
       });
     }
     e.setPropertyAccessor(s);
     const a = (r, i) => {
-      this._isSelfTransaction(i) || this.transact(() => {
-        const { keysChanged: c, changes: l } = r;
-        c.forEach((u) => {
-          const d = l.keys.get(u), g = d?.oldValue;
+      this._isSelfTransaction(i) || (this._debug("_proxyProps", r, e), this.transact(() => {
+        const { keysChanged: l, changes: c } = r;
+        l.forEach((u) => {
+          const d = c.keys.get(u), g = d?.oldValue;
           switch (d?.action) {
             case "add":
             case "update":
               this.undoManager.stopCapturing(), e[u] = t.get(u), e.requestUpdate(u, t.get(u), g);
               break;
             case "delete":
-              this.undoManager.stopCapturing(), e[u] = void 0, e.requestUpdate(u, void 0, g);
+              this.undoManager.stopCapturing(), e[u] = void 0, e.requestUpdate(u, e[u], g);
               break;
           }
         });
-      }, !1);
+      }, !1));
     };
     e._yMap = fe(t), e._yMapObserveFn && t.unobserve(e._yMapObserveFn), e._yMapObserveFn = fe(a), t.observe(a);
   }
@@ -1705,15 +1707,16 @@ class un extends ln {
     const n = (s, a) => {
       if (this._isSelfTransaction(a))
         return;
+      this._debug("_proxyChildren", s, e);
       const r = e.children;
       let i = 0;
-      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) => {
+      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) => {
             let g = this.nodeMap.get(u);
             const h = (v) => {
               e.moveChild(v, i + d);
@@ -1721,7 +1724,7 @@ class un extends ln {
             g ? h(g) : setTimeout(() => {
               g = this.nodeMap.get(u), g && h(g);
             }, 0);
-          }), i += l.length;
+          }), i += c.length;
         }
       });
     };
@@ -1801,15 +1804,15 @@ const ts = (o, e) => {
     emit: a,
     selection: r,
     setCurrentFrame: i,
-    state: c,
-    to: l,
+    state: l,
+    to: c,
     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 = () => l("json"), y = async (p) => {
-    c.value = "loading";
+  }, v = () => c("json"), y = async (p) => {
+    l.value = "loading";
     const _ = new un(typeof p == "string" ? p : p.id);
     try {
       await u(), h(), await _.load(async () => {
@@ -1822,7 +1825,7 @@ const ts = (o, e) => {
         typeof p != "string" && _.set(p);
       }), _.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 {
-      c.value = void 0;
+      l.value = void 0;
     }
     return _;
   };
@@ -1849,10 +1852,10 @@ const ts = (o, e) => {
     frameThumbs: a,
     log: r,
     fonts: i,
-    registerConfig: c
+    registerConfig: l
   } = o;
-  c("frameScreenshot", !1);
-  async function l() {
+  l("frameScreenshot", !1);
+  async function c() {
     a.value.length = t.value.length;
     for (let h = 0; h < t.value.length; h++)
       await d(h);
@@ -1902,7 +1905,7 @@ const ts = (o, e) => {
     );
   }
   return Object.assign(o, {
-    snapshot: l,
+    snapshot: c,
     captureElementScreenshot: u,
     captureFrameScreenshot: d,
     renderFrameThumb: g
@@ -1912,7 +1915,7 @@ const ts = (o, e) => {
       config: v
     } = o;
     h("setDoc", (y) => {
-      v.value.frameScreenshot && l();
+      v.value.frameScreenshot && c();
       function f(p) {
         if (v.value.frameScreenshot) {
           const _ = p.getIndex();
@@ -1945,8 +1948,8 @@ const ts = (o, e) => {
   So,
   Mo,
   zo,
-  Oo,
   $o,
+  Oo,
   Io,
   Fo,
   Po,
@@ -2699,24 +2702,24 @@ const rs = (o) => {
     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 = 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), c = O(() => new Set(
+  const i = $(() => 4), l = $(() => new Set(
     [
       t.value[0]?.instanceId
     ].filter(Boolean)
-  )), l = O(() => {
+  )), c = $(() => {
     if (t.value[0])
       return r(t.value[0]);
-  }), u = O(() => {
+  }), u = $(() => {
     const E = t.value[0].parent;
     return E instanceof G ? E : void 0;
-  }), d = O(() => r(
+  }), d = $(() => r(
     u.value ?? { left: 0, top: 0, width: 0, height: 0 }
-  )), g = O(() => {
+  )), g = $(() => {
     const E = [
       ...u.value?.children ?? a.value?.children ?? []
     ];
-    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(
+    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);
+  }), h = $(() => 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 St((E, C) => E.pos - C.pos),
@@ -2774,10 +2777,10 @@ const rs = (o) => {
       pos: m ? b + k : b - k
     }, x);
   }
-  const p = O(() => {
-    if (!l.value)
+  const p = $(() => {
+    if (!c.value)
       return [];
-    const { vLines: E, hLines: C } = h.value, m = l.value, b = { vt: [], vb: [], hl: [], hr: [] }, k = [];
+    const { vLines: E, hLines: C } = h.value, m = c.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 }
@@ -2830,7 +2833,7 @@ const rs = (o) => {
         }
       }
     }), k;
-  }), _ = (E) => E, z = O(() => {
+  }), _ = (E) => E, z = $(() => {
     if (n.value !== "transforming")
       return [];
     const E = { left: 0, top: 0 };
@@ -2930,7 +2933,7 @@ const rs = (o) => {
   async function i() {
     await r(), t("delete");
   }
-  async function c() {
+  async function l() {
     if (Tt) {
       const u = await navigator.clipboard.read(), d = [];
       for (const g of u)
@@ -2985,8 +2988,8 @@ const rs = (o) => {
       regenId: !0
     });
   }
-  async function l() {
-    await r(), await c();
+  async function c() {
+    await r(), await l();
   }
   return Object.assign(o, {
     copiedData: a
@@ -2995,8 +2998,8 @@ const rs = (o) => {
     commands: [
       { command: "copy", handle: r },
       { command: "cut", handle: i },
-      { command: "paste", handle: c },
-      { command: "duplicate", handle: l }
+      { command: "paste", handle: l },
+      { command: "duplicate", handle: c }
     ],
     hotkeys: [
       { command: "copy", key: "CmdOrCtrl+c", editable: !1 },
@@ -3060,7 +3063,7 @@ const rs = (o) => {
     isFrame: r,
     doc: i
   } = o;
-  function c() {
+  function l() {
     const d = s.value;
     if (d.length === 0)
       return;
@@ -3081,7 +3084,7 @@ const rs = (o) => {
       }), d.forEach((v) => e(v.id));
     });
   }
-  function l() {
+  function c() {
     const d = s.value[0];
     if (!d)
       return;
@@ -3097,13 +3100,13 @@ const rs = (o) => {
     });
   }
   function u() {
-    s.value.length === 1 ? r(s.value[0]) && l() : s.value.length > 1 && c();
+    s.value.length === 1 ? r(s.value[0]) && c() : s.value.length > 1 && l();
   }
   return {
     name: "mce:frame",
     commands: [
-      { command: "frame", handle: c },
-      { command: "unframe", handle: l },
+      { command: "frame", handle: l },
+      { command: "unframe", handle: c },
       { command: "frame/unframe", handle: u }
     ],
     hotkeys: [
@@ -3121,9 +3124,9 @@ const rs = (o) => {
       {
         name: "gif",
         handle: async (a) => {
-          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 });
+          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 et({
-            data: l,
+            data: c,
             width: g,
             height: h,
             fonts: t,
@@ -3166,7 +3169,7 @@ const rs = (o) => {
       }), u.forEach((h) => a(h.id));
     });
   }
-  function c() {
+  function l() {
     const u = n.value[0];
     if (!u)
       return;
@@ -3181,15 +3184,15 @@ const rs = (o) => {
       }), a(u.id);
     });
   }
-  function l() {
-    n.value.length === 1 ? c() : n.value.length > 1 && i();
+  function c() {
+    n.value.length === 1 ? l() : n.value.length > 1 && i();
   }
   return {
     name: "mce:group",
     commands: [
       { command: "group", handle: i },
-      { command: "ungroup", handle: c },
-      { command: "group/ungroup", handle: l }
+      { command: "ungroup", handle: l },
+      { command: "group/ungroup", handle: c }
     ],
     hotkeys: [
       { command: "group/ungroup", key: "CmdOrCtrl+g" }
@@ -3207,8 +3210,8 @@ const rs = (o) => {
     e.value?.undo();
   }
   return t("setDoc", (i) => {
-    i.on("history", (c) => {
-      n.value = c.canUndo(), s.value = c.canRedo();
+    i.on("history", (l) => {
+      n.value = l.canUndo(), s.value = l.canRedo();
     });
   }), Object.assign(o, {
     canUndo: n,
@@ -3238,7 +3241,7 @@ const rs = (o) => {
     sizeToFit: !0,
     positionToFit: !0,
     ...d
-  }), c = () => {
+  }), l = () => {
     e("drawing", {
       content: "image",
       callback: (u) => {
@@ -3246,7 +3249,7 @@ const rs = (o) => {
       }
     });
   };
-  function l(u) {
+  function c(u) {
     return {
       name: u,
       handle: async (d) => {
@@ -3269,12 +3272,12 @@ const rs = (o) => {
     name: "mce:image",
     commands: [
       { command: "insertImage", handle: i },
-      { command: "drawImage", handle: c }
+      { command: "drawImage", handle: l }
     ],
     exporters: [
-      l("jpeg"),
-      l("png"),
-      l("webp")
+      c("jpeg"),
+      c("png"),
+      c("webp")
     ],
     loaders: [
       {
@@ -3298,9 +3301,9 @@ const rs = (o) => {
         const r = await t({ multiple: !0 });
         return n((await Promise.all(
           r.map(async (i) => {
-            const c = await e(i);
-            let l;
-            return c.meta?.inEditorIs === "Doc" ? l = c.children ?? [] : l = [c], l;
+            const l = await e(i);
+            let c;
+            return l.meta?.inEditorIs === "Doc" ? c = l.children ?? [] : c = [l], c;
           })
         )).flat(), {
           ...a,
@@ -3317,14 +3320,14 @@ const rs = (o) => {
   const {
     selection: e
   } = o;
-  function t(i, c) {
+  function t(i, l) {
     (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 (c) {
+      switch (l) {
         case "bringForward":
           g = Math.min(d.children.length - 1, g + 1);
           break;
@@ -3445,7 +3448,7 @@ const rs = (o) => {
     selection: s,
     textSelection: a,
     config: r
-  } = o, i = O(() => s.value.length > 0), c = O(() => ({
+  } = o, i = $(() => s.value.length > 0), l = $(() => ({
     key: "export",
     children: [
       { key: "saveAs:png" },
@@ -3458,27 +3461,25 @@ const rs = (o) => {
       { key: "saveAs:pptx" },
       { key: "saveAs:json" }
     ]
-  })), l = O(() => ({
+  })), c = $(() => ({
     key: "file",
     children: [
       { key: "new" },
       { key: "open" },
       { type: "divider" },
       { key: "import" },
-      c.value,
-      { type: "divider" },
-      { key: "preferences" }
+      l.value
     ]
-  })), u = O(() => [
+  })), u = $(() => [
     { key: "undo", disabled: !e.value },
     { key: "redo", disabled: !t.value }
-  ]), d = O(() => [
+  ]), d = $(() => [
     { key: "copy", disabled: !i.value },
     { key: "cut", disabled: !i.value },
     { key: "paste", disabled: !n.value },
     { key: "duplicate", disabled: !i.value },
     { key: "delete", disabled: !i.value }
-  ]), g = O(() => ({
+  ]), g = $(() => ({
     key: "select",
     children: [
       { key: "selectAll" },
@@ -3487,7 +3488,7 @@ const rs = (o) => {
       { key: "previousSelection", disabled: !i.value },
       { key: "nextSelection", disabled: !i.value }
     ]
-  })), h = O(() => ({
+  })), h = $(() => ({
     key: "edit",
     children: [
       ...u.value,
@@ -3496,7 +3497,7 @@ const rs = (o) => {
       { type: "divider" },
       ...g.value.children
     ]
-  })), v = O(() => ({
+  })), v = $(() => ({
     key: "zoom",
     children: [
       { key: "zoomIn" },
@@ -3505,7 +3506,7 @@ const rs = (o) => {
       { key: "zoomToFit" },
       { key: "zoomToSelection", disabled: !i.value }
     ]
-  })), y = O(() => ({
+  })), y = $(() => ({
     key: "view",
     children: [
       { key: "view:checkerboard", checked: r.value.checkerboard },
@@ -3518,10 +3519,10 @@ const rs = (o) => {
       { type: "divider" },
       ...v.value.children
     ]
-  })), f = O(() => [
+  })), f = $(() => [
     { key: "group/ungroup", disabled: !i.value },
     { key: "frame/unframe", disabled: !i.value }
-  ]), p = O(() => ({
+  ]), p = $(() => ({
     key: "layerOrder",
     children: [
       { key: "bringToFront", disabled: !i.value },
@@ -3529,16 +3530,16 @@ const rs = (o) => {
       { key: "sendBackward", disabled: !i.value },
       { key: "sendToBack", disabled: !i.value }
     ]
-  })), _ = O(() => ({
+  })), _ = $(() => ({
     key: "flip",
     children: [
       { key: "flipHorizontal", disabled: !i.value },
       { key: "flipVertical", disabled: !i.value }
     ]
-  })), z = O(() => [
+  })), z = $(() => [
     { key: "hide/show", disabled: !i.value },
     { key: "lock/unlock", disabled: !i.value }
-  ]), I = O(() => ({
+  ]), I = $(() => ({
     key: "object",
     children: [
       ...f.value,
@@ -3549,25 +3550,25 @@ const rs = (o) => {
       { type: "divider" },
       ...z.value
     ]
-  })), E = O(() => [
+  })), E = $(() => [
     { key: "alignLeft", disabled: !i.value },
     { key: "alignHorizontalCenter", disabled: !i.value },
     { key: "alignRight", disabled: !i.value },
     { key: "alignTop", disabled: !i.value },
     { key: "alignVerticalCenter", disabled: !i.value },
     { key: "alignBottom", disabled: !i.value }
-  ]), C = O(() => ({
+  ]), C = $(() => ({
     key: "layerPosition",
     children: [
       ...E.value
     ]
-  })), m = O(() => [
-    l.value,
+  })), m = $(() => [
+    c.value,
     h.value,
     y.value,
     I.value,
     C.value
-  ]), b = O(() => s.value.length > 0 ? a.value ? [
+  ]), b = $(() => s.value.length > 0 ? a.value ? [
     ...d.value
   ] : [
     ...d.value,
@@ -3579,13 +3580,13 @@ const rs = (o) => {
     C.value,
     _.value,
     { type: "divider" },
-    c.value
+    l.value
   ] : [
     d.value[2],
     { type: "divider" },
     ...m.value,
     { type: "divider" },
-    c.value
+    l.value
   ]);
   return Object.assign(o, {
     mainMenu: m,
@@ -3645,7 +3646,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: c, endTime: l } = 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: l, endTime: c } = 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,
@@ -3677,7 +3678,7 @@ const rs = (o) => {
                 duration: E
               }), m.close(), z += E, a?.(C);
             },
-            keyframes: Array.from({ length: ~~((l - c) / v) }, (I, E) => c + E * v)
+            keyframes: Array.from({ length: ~~((c - l) / v) }, (I, E) => l + E * v)
           }), await _.flush();
         }
       }
@@ -3771,10 +3772,10 @@ const rs = (o) => {
       {
         name: "pptx",
         handle: async (i) => {
-          const { idocToPptx: c } = await import("modern-openxml"), l = await s("json", i);
+          const { idocToPptx: l } = await import("modern-openxml"), c = await s("json", i);
           return new Blob([
-            await c({
-              ...l,
+            await l({
+              ...c,
               fonts: a
             })
           ], {
@@ -3789,15 +3790,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: c } = await import("modern-openxml"), l = await import("modern-openxml/presetShapeDefinitions").then((d) => d.default), u = await c(await i.arrayBuffer(), {
-            presetShapeDefinitions: l,
+          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,
             upload: async (d, g) => {
               const h = g.image;
-              let v = Ot(g.image);
+              let v = $t(g.image);
               const y = As(d);
               if (!v) {
                 const f = Ss(y);
-                f && (v = Ot(f));
+                f && (v = $t(f));
               }
               return await t(
                 new File([y], h, {
@@ -3827,7 +3828,7 @@ const rs = (o) => {
   emf: "image/emf",
   wmf: "image/wmf"
 };
-function Ot(o) {
+function $t(o) {
   const e = o.split("."), t = e[e.length - 1].toLowerCase();
   return t in zt ? zt[t] : null;
 }
@@ -3868,42 +3869,27 @@ function Ss(o) {
   }
 }
 const Ms = (o) => {
-  const e = V(!1);
-  function t() {
-    e.value = !e.value;
-  }
-  return Object.assign(o, {
-    preferencesVisible: e
-  }), {
-    name: "mce:preferences",
-    commands: [
-      { command: "preferences", handle: t }
-    ],
-    hotkeys: [
-      { command: "preferences", key: "CmdOrCtrl+,", editable: !1, system: !0 }
-    ]
-  };
-}, zs = (o) => {
   const {
-    to: e
+    to: e,
+    root: t
   } = o;
   return {
     name: "mce:saveAs",
     commands: [
-      { command: "saveAs", handle: async (n, s = {}) => {
+      { command: "saveAs", handle: async (s, a = {}) => {
         const {
-          filename: a = "download",
-          ...r
-        } = s;
-        let i = await e(n, {
+          filename: r = t.value?.meta.name ?? "download",
+          ...i
+        } = a;
+        let l = await e(s, {
           selected: !0,
-          ...r
+          ...i
         });
-        i instanceof Blob || (i = new Blob([JSON.stringify(i)], { type: "application/json" })), Kt(i, `${a}.${n}`);
+        l instanceof Blob || (l = new Blob([JSON.stringify(l)], { type: "application/json" })), Kt(l, `${r}.${s}`);
       } }
     ]
   };
-}, Os = (o) => {
+}, zs = (o) => {
   const {
     selection: e,
     root: t
@@ -3915,22 +3901,22 @@ const Ms = (o) => {
     e.value = [];
   }
   function a() {
-    const c = e.value[0]?.parent;
-    c instanceof G && (e.value = [c]);
+    const l = e.value[0]?.parent;
+    l instanceof G && (e.value = [l]);
   }
   function r() {
-    const c = e.value[0];
-    if (!c)
+    const l = e.value[0];
+    if (!l)
       return;
-    const l = c.previousSibling;
-    l instanceof G && !c.equal(l) && (e.value = [l]);
+    const c = l.previousSibling;
+    c instanceof G && !l.equal(c) && (e.value = [c]);
   }
   function i() {
-    const c = e.value[0];
-    if (!c)
+    const l = e.value[0];
+    if (!l)
       return;
-    const l = c.nextSibling;
-    l instanceof G && !c.equal(l) && (e.value = [l]);
+    const c = l.nextSibling;
+    c instanceof G && !l.equal(c) && (e.value = [c]);
   }
   return {
     name: "mce:select",
@@ -3955,18 +3941,18 @@ const Ms = (o) => {
     t,
     exec: n,
     addElement: s
-  } = o, a = (c = t("clickEditText"), l = {}) => {
-    const { style: u, ...d } = l;
-    return s(ut(c, u), {
+  } = o, a = (l = t("clickEditText"), c = {}) => {
+    const { style: u, ...d } = c;
+    return s(ut(l, u), {
       sizeToFit: !0,
       positionToFit: !0,
       ...d
     });
-  }, r = (c, l) => {
+  }, r = (l, c) => {
     e("drawing", {
       content: "text",
       callback: (u) => {
-        n("insertText", c, { ...l, position: u });
+        n("insertText", l, { ...c, position: u });
       }
     });
   }, i = /\.txt$/i;
@@ -3980,12 +3966,12 @@ const Ms = (o) => {
       {
         name: "txt",
         accept: ".txt",
-        test: (c) => !!(c instanceof Blob && c.type.startsWith("text/plain") || c instanceof File && i.test(c.name)),
-        load: async (c) => ut(await c.text())
+        test: (l) => !!(l instanceof Blob && l.type.startsWith("text/plain") || l instanceof File && i.test(l.name)),
+        load: async (l) => ut(await l.text())
       }
     ]
   };
-}, Is = (o) => {
+}, Os = (o) => {
   const {
     selection: e,
     getAabbInDrawboard: t,
@@ -4001,7 +3987,7 @@ const Ms = (o) => {
       );
     }
   };
-}, Fs = () => {
+}, Is = () => {
   async function o(e) {
     try {
       const n = (await fetch(e, { method: "HEAD" })).headers.get("Content-Type");
@@ -4024,7 +4010,7 @@ const Ms = (o) => {
       }
     ]
   };
-}, Ps = (o) => {
+}, Fs = (o) => {
   const {
     config: e
   } = o;
@@ -4038,7 +4024,7 @@ const Ms = (o) => {
       { command: "view:ruler", key: "Shift+R" }
     ]
   };
-}, Ns = (o) => {
+}, Ps = (o) => {
   const {
     selection: e
   } = o;
@@ -4068,7 +4054,7 @@ const Ms = (o) => {
       { command: "hide/show", key: "Shift+CmdOrCtrl+h" }
     ]
   };
-}, $t = { left: 0, top: 0, bottom: 0, right: 0 }, Rs = (o) => {
+}, Ot = { left: 0, top: 0, bottom: 0, right: 0 }, Ns = (o) => {
   const {
     camera: e,
     drawboardAabb: t,
@@ -4078,11 +4064,11 @@ const Ms = (o) => {
     registerConfig: r,
     selection: i
   } = o;
-  r("zoomToFitOffset", { ...$t });
-  function c() {
+  r("zoomToFitOffset", { ...Ot });
+  function l() {
     e.value.addZoom(0.25);
   }
-  function l() {
+  function c() {
     e.value.addZoom(-0.25);
   }
   function u() {
@@ -4090,7 +4076,7 @@ const Ms = (o) => {
   }
   function d(y, f = !1) {
     const p = f ? a.value : n.value, _ = {
-      ...$t,
+      ...Ot,
       ...s.value.zoomToFitOffset
     };
     s.value.scrollbar && (_.right += 8, _.bottom += 8), s.value.ruler && (_.left += 16, _.top += 16);
@@ -4120,8 +4106,8 @@ const Ms = (o) => {
   return {
     name: "mce:zoom",
     commands: [
-      { command: "zoomIn", handle: c },
-      { command: "zoomOut", handle: l },
+      { command: "zoomIn", handle: l },
+      { command: "zoomOut", handle: c },
       { command: "zoomTo100", handle: u },
       { command: "zoomToFit", handle: g },
       { command: "zoomToCover", handle: h },
@@ -4151,7 +4137,7 @@ const Ms = (o) => {
       });
     }
   };
-}, Bs = [
+}, Rs = [
   rs,
   ls,
   cs,
@@ -4174,13 +4160,12 @@ const Ms = (o) => {
   Ts,
   Ms,
   zs,
-  Os,
   $s,
+  Os,
   Is,
   Fs,
   Ps,
-  Ns,
-  Rs
+  Ns
 ];
 class Le extends Wt {
   static injectionKey = Symbol.for("EditorKey");
@@ -4208,7 +4193,7 @@ class Le extends Wt {
       os,
       e
     ), this.use([
-      ...Bs,
+      ...Rs,
       ...n
     ], e);
   }
@@ -4234,11 +4219,11 @@ class Le extends Wt {
       const {
         commands: r = [],
         hotkeys: i = [],
-        loaders: c = [],
-        exporters: l = [],
+        loaders: l = [],
+        exporters: c = [],
         events: u
       } = a;
-      if (this.registerCommand(r), this.registerHotkey(i), this.registerLoader(c), this.registerExporter(l), u)
+      if (this.registerCommand(r), this.registerHotkey(i), this.registerLoader(l), this.registerExporter(c), u)
         for (const d in u)
           this.on(d, u[d]);
     };
@@ -4273,16 +4258,16 @@ class Le extends Wt {
     e.provide(Le.injectionKey, this);
   };
 }
-function nr(o) {
+function tr(o) {
   return o;
 }
-function or(o) {
+function nr(o) {
   return o;
 }
 function de() {
   return Se(Le.injectionKey);
 }
-function Ls(o = new Le()) {
+function Bs(o = new Le()) {
   return De(Le.injectionKey, o), o;
 }
 function _t() {
@@ -4301,7 +4286,7 @@ const dn = X({
   inheritAttrs: !1,
   props: _t(),
   setup(o, { attrs: e }) {
-    return () => H(o.tag, Oe(e, { style: null }), {
+    return () => H(o.tag, $e(e, { style: null }), {
       default: () => [
         F("svg", {
           class: "mce-icon__svg",
@@ -4333,12 +4318,12 @@ const dn = X({
     });
   }
 });
-function Ds(o) {
+function Ls(o) {
   const e = Se(mn);
   if (!e)
     throw new Error("Missing Mce Icons provide!");
   return {
-    iconData: O(() => {
+    iconData: $(() => {
       const n = yn(o);
       if (!n)
         return {
@@ -4355,7 +4340,7 @@ function Ds(o) {
           component: It,
           icon: s
         };
-      const a = Object.keys(e.sets).find((c) => typeof s == "string" && s.startsWith(`${c}:`)), r = a ? s.slice(a.length + 1) : s;
+      const a = Object.keys(e.sets).find((l) => typeof s == "string" && s.startsWith(`${l}:`)), r = a ? s.slice(a.length + 1) : s;
       return {
         component: e.sets[a ?? e.defaultSet].component,
         icon: r
@@ -4363,7 +4348,7 @@ function Ds(o) {
     })
   };
 }
-const Vs = {
+const Ds = {
   play: "M8 5.14v14l11-7z",
   pause: "M14 19h4V5h-4M6 19h4V5H6z",
   gps: "M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m-8.95 5H1v-2h2.05C3.5 6.83 6.83 3.5 11 3.05V1h2v2.05c4.17.45 7.5 3.78 7.95 7.95H23v2h-2.05c-.45 4.17-3.78 7.5-7.95 7.95V23h-2v-2.05C6.83 20.5 3.5 17.17 3.05 13M12 5a7 7 0 0 0-7 7a7 7 0 0 0 7 7a7 7 0 0 0 7-7a7 7 0 0 0-7-7",
@@ -4371,15 +4356,15 @@ const Vs = {
   mouseLeftClick: "M13 9V1.07A8.01 8.01 0 0 1 19.75 7c.16.64.25 1.31.25 2zm4.66-2c-.48-1.35-1.43-2.5-2.66-3.19V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4zm7-6V1.07C7.06 1.56 4 4.92 4 9z",
   mouseRightClick: "M13 9V1.07c3.94.49 7 3.85 7 7.93zm-2 0V1.07A8.01 8.01 0 0 0 4.25 7C4.09 7.64 4 8.31 4 9zM6.34 7C6.82 5.65 7.78 4.5 9 3.81V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4z",
   check: "M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
-}, js = {
+}, Vs = {
   component: dn
 }, mn = Symbol.for("mce:icons");
-function Us(o = {}) {
+function js(o = {}) {
   return Jt({
     defaultSet: "svg",
-    aliases: Vs,
+    aliases: Ds,
     sets: {
-      svg: js
+      svg: Vs
     }
   }, o);
 }
@@ -4392,9 +4377,9 @@ const ht = Symbol.for("MceOverlaySymbol"), qe = tn({
     default: void 0
   }
 }, "makeMceOverlayProps");
-let Xs;
-function Hs() {
-  return Xs ??= hn();
+let Us;
+function Xs() {
+  return Us ??= hn();
 }
 function hn(o = {}) {
   const e = V([]);
@@ -4402,19 +4387,19 @@ function hn(o = {}) {
     register: (t) => {
       const n = e.value.push(t);
       return {
-        index: O(() => n),
+        index: $(() => n),
         attach: o.attach
       };
     },
     unregister: (t) => e.value.splice(e.value.indexOf(t), 1)
   };
 }
-function Ys(o = {}) {
+function Hs(o = {}) {
   let e = Se(ht, null);
   return e || (e = hn(o), De(ht, e)), e;
 }
-function qs() {
-  const o = Se(ht, Hs()), e = Qe();
+function Ys() {
+  const o = Se(ht, Xs()), e = Qe();
   if (!e)
     throw new Error("Failed to useOverlayRoot, vm is null");
   const t = o.register(e.uid);
@@ -4422,36 +4407,36 @@ function qs() {
     o.unregister(e.uid);
   }), t;
 }
-const Gs = tn({
+const qs = tn({
   resizeStrategy: Function,
   activeStrategy: Function,
   hoverStrategy: Function
-}, "makeMceStrategyProps"), Ws = (o) => {
+}, "makeMceStrategyProps"), Gs = (o) => {
   switch (o.meta?.inPptIs) {
     case "Picture":
       return "diagonalAspectRatio";
   }
   return o.foreground.isValid() ? "diagonalAspectRatio" : "free";
-}, Ks = (o) => {
+}, Ws = (o) => {
   const { element: e, oldElement: t, isExcluded: n } = o;
   if (e && !n(e))
     return e.equal(t) && e.text.isValid() ? {
       element: e,
       state: "typing"
     } : e;
-}, Js = (o) => {
+}, Ks = (o) => {
   const { element: e, isExcluded: t, oldElement: n } = o;
   if (e && !t(e))
     return e.equal(n) ? {
       element: e,
       cursor: "move"
     } : e;
-}, Zs = { class: "mce-auxiliary" }, Qs = /* @__PURE__ */ X({
+}, Js = { class: "mce-auxiliary" }, Zs = /* @__PURE__ */ X({
   __name: "Auxiliary",
   setup(o) {
     const { auxiliaryLines: e } = de();
-    return (t, n) => ($(), R("div", Zs, [
-      ($(!0), R(se, null, _e(S(e), (s, a) => ($(), R("div", {
+    return (t, n) => (O(), R("div", Js, [
+      (O(!0), R(se, null, _e(S(e), (s, a) => (O(), R("div", {
         key: a,
         class: be(s.class),
         style: q({
@@ -4464,7 +4449,7 @@ const Gs = tn({
     ]));
   }
 });
-function ea(o, e = "content") {
+function Qs(o, e = "content") {
   const t = yo(), n = V();
   if (bt) {
     const s = new ResizeObserver((a) => {
@@ -4484,7 +4469,7 @@ function ea(o, e = "content") {
   };
 }
 const Je = Symbol.for("mce:layout"), fn = Symbol.for("mce:layout-item"), Ft = 1e3;
-function ta() {
+function ea() {
   return {
     overlaps: {
       type: Array,
@@ -4493,7 +4478,7 @@ function ta() {
     fullHeight: Boolean
   };
 }
-function na() {
+function ta() {
   return {
     name: {
       type: String
@@ -4505,7 +4490,7 @@ function na() {
     absolute: Boolean
   };
 }
-function oa() {
+function na() {
   const o = Se(Je);
   if (!o)
     throw new Error("[mce] Could not find injected layout");
@@ -4515,7 +4500,7 @@ function oa() {
     mainStyles: o.mainStyles
   };
 }
-function sa(o) {
+function oa(o) {
   const e = Se(Je);
   if (!e)
     throw new Error("[mce] Could not find injected layout");
@@ -4528,21 +4513,21 @@ function sa(o) {
     layoutItemScrimStyles: r
   } = e.register(n, {
     ...o,
-    active: O(() => s.value ? !1 : o.active.value),
+    active: $(() => s.value ? !1 : o.active.value),
     id: t
   });
   return we(() => e.unregister(t)), { layoutItemStyles: a, layoutRect: e.layoutRect, layoutItemScrimStyles: r };
 }
-function aa(o, e, t, n) {
+function sa(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), c = t.get(r), l = n.get(r);
-    if (!i || !c || !l)
+    const i = e.get(r), l = t.get(r), c = n.get(r);
+    if (!i || !l || !c)
       continue;
     const u = {
       ...s,
-      [i.value]: Number.parseInt(String(s[i.value]), 10) + (l.value ? Number.parseInt(String(c.value), 10) : 0)
+      [i.value]: Number.parseInt(String(s[i.value]), 10) + (c.value ? Number.parseInt(String(l.value), 10) : 0)
     };
     a.push({
       id: r,
@@ -4551,8 +4536,8 @@ function aa(o, e, t, n) {
   }
   return a;
 }
-function ia(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(() => {
+function aa(o) {
+  const e = Se(Je, null), t = $(() => 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()), l = Ee(/* @__PURE__ */ new Map()), { resizeRef: c, contentRect: u } = Qs(), d = $(() => {
     const C = /* @__PURE__ */ new Map(), m = o.overlaps ?? [];
     for (const b of m.filter((k) => k.includes(":"))) {
       const [k, x] = b.split(":");
@@ -4562,20 +4547,20 @@ function ia(o) {
       !w || !T || !M || !P || (C.set(x, { position: w.value, amount: Number.parseInt(String(M.value), 10) }), C.set(k, { position: T.value, amount: -Number.parseInt(String(P.value), 10) }));
     }
     return C;
-  }), g = O(() => {
+  }), g = $(() => {
     const C = [...new Set([...r.values()].map((b) => b.value))].sort((b, k) => b - k), m = [];
     for (const b of C) {
       const k = n.value.filter((x) => r.get(x)?.value === b);
       m.push(...k);
     }
-    return aa(m, s, a, i);
-  }), h = O(() => !Array.from(c.values()).some((C) => C.value)), v = O(() => g.value[g.value.length - 1].layer), y = Te(() => ({
+    return sa(m, s, a, i);
+  }), h = $(() => !Array.from(l.values()).some((C) => C.value)), v = $(() => 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) => {
+  })), f = $(() => g.value.slice(1).map(({ id: C }, m) => {
     const { layer: b } = g.value[m], k = a.get(C), x = s.get(C);
     return {
       id: C,
@@ -4597,10 +4582,10 @@ function ia(o) {
       disableTransitions: M,
       absolute: P
     }) => {
-      r.set(m, b), s.set(m, k), a.set(m, x), i.set(m, T), M && c.set(m, M);
+      r.set(m, b), s.set(m, k), a.set(m, x), i.set(m, T), M && l.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(() => {
+      const N = $(() => f.value.findIndex((U) => U.id === m)), L = $(() => t.value + g.value.length * 2 - N.value * 2), j = $(() => {
         const U = k.value === "left" || k.value === "right", W = k.value === "right", Z = k.value === "bottom", he = w.value ?? x.value, Y = he === 0 ? "%" : "px", xe = {
           [k.value]: 0,
           zIndex: L.value,
@@ -4622,13 +4607,13 @@ function ia(o) {
           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(() => ({
+      }), D = $(() => ({
         zIndex: L.value - 1
       }));
       return { layoutItemStyles: j, layoutItemScrimStyles: D, zIndex: L };
     },
     unregister: (C) => {
-      r.delete(C), s.delete(C), a.delete(C), i.delete(C), c.delete(C), n.value = n.value.filter((m) => m !== C);
+      r.delete(C), s.delete(C), a.delete(C), i.delete(C), l.delete(C), n.value = n.value.filter((m) => m !== C);
     },
     mainRect: v,
     mainStyles: y,
@@ -4651,7 +4636,7 @@ function ia(o) {
     getLayoutItem: p,
     items: f,
     layoutRect: u,
-    layoutRef: l
+    layoutRef: c
   };
 }
 const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
@@ -4661,8 +4646,8 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     ..._t()
   },
   setup(o) {
-    const e = o, t = Vt(), { iconData: n } = Ds(O(() => e.icon)), s = !!(t.onClick || t.onClickOnce);
-    return (a, r) => ($(), oe(jt(S(n).component), {
+    const e = o, t = Vt(), { iconData: n } = Ls($(() => e.icon)), s = !!(t.onClick || t.onClickOnce);
+    return (a, r) => (O(), oe(jt(S(n).component), {
       icon: S(n).icon,
       tag: e.tag,
       class: be(["mce-icon", {
@@ -4685,10 +4670,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
   },
   emits: ["click:outside", "update:modelValue"],
   setup(o, { expose: e, emit: t }) {
-    const n = o, s = t, a = qs(), r = O({
+    const n = o, s = t, a = Ys(), r = $({
       get: () => n.modelValue,
       set: (p) => s("update:modelValue", p)
-    }), i = V(), c = {
+    }), i = V(), l = {
       getBoundingClientRect() {
         const { x: p = 0, y: _ = 0 } = n.target;
         return {
@@ -4702,18 +4687,18 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           height: 0
         };
       }
-    }, 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),
+    }, c = $(() => typeof n.target == "object" && !(n.target instanceof Element) && "x" in n.target && "y" in n.target ? l : n.target ?? i.value), u = ce("contentElTpl"), d = $(() => n.attach ?? a.attach?.value ?? "body"), { floatingStyles: g, update: h } = Gn(c, u, {
+      placement: $(() => n.location),
       whileElementsMounted: Zn,
       middleware: [
         Wn(() => n.offset ?? 0),
         Kn(),
         Jn({ padding: 20 })
       ]
-    }), v = O(() => ({
+    }), v = $(() => ({
       ...g.value,
       zIndex: 2e3 + a.index.value
-    })), y = O(() => ({
+    })), y = $(() => ({
       ref: (p) => i.value = p
     }));
     let f = [];
@@ -4731,19 +4716,19 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       ];
     }), we(() => f.forEach((p) => p())), e({
       activatorEl: i,
-      target: l,
+      target: c,
       contentEl: u,
       updateLocation: h
-    }), (p, _) => ($(), R(se, null, [
+    }), (p, _) => (O(), R(se, null, [
       Q(p.$slots, "activator", {
         props: y.value,
         isActive: r.value
       }),
-      ($(), oe(_n, {
+      (O(), oe(_n, {
         disabled: d.value === !1,
         to: typeof d.value == "boolean" ? void 0 : d.value
       }, [
-        r.value ? ($(), R("div", Oe({
+        r.value ? (O(), R("div", $e({
           key: 0,
           ref: "contentElTpl",
           class: "mce-overlay",
@@ -4754,13 +4739,13 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       ], 8, ["disabled", "to"]))
     ], 64));
   }
-}), ra = ["onMouseenter"], la = ["onClick"], ca = { class: "mce-list-item__prepend" }, ua = { class: "mce-list-item__title" }, da = {
+}), ia = ["onMouseenter"], ra = ["onClick"], la = { class: "mce-list-item__prepend" }, ca = { class: "mce-list-item__title" }, ua = {
   key: 0,
   class: "mce-list-item__append"
-}, ma = /* @__PURE__ */ X({
+}, da = /* @__PURE__ */ X({
   name: "MceMenu",
   __name: "Menu",
-  props: /* @__PURE__ */ $e({
+  props: /* @__PURE__ */ Oe({
     ...qe(),
     items: Object,
     openOnHover: Boolean,
@@ -4769,19 +4754,19 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ $e(["click:item"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ Oe(["click:item"], ["update:modelValue"]),
   setup(o, { expose: e, emit: t }) {
-    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());
+    const n = o, s = t, a = ke(o, "modelValue"), r = V(-1), i = ce("overlayTpl"), l = ce("menuItemTplRefs"), c = Dt(), u = Se(Pt, null), d = Ze(/* @__PURE__ */ new Set());
     De(Pt, {
-      register: () => d.value.add(l),
-      unregister: () => d.value.delete(l),
+      register: () => d.value.add(c),
+      unregister: () => d.value.delete(c),
       closeParents(p) {
         !d.value.size && !n.persistent && (p == null || i.value?.contentEl && !po(p, i.value.contentEl)) && (a.value = !1, u?.closeParents());
       }
     }), we(() => {
       u?.unregister();
     });
-    const g = O(() => {
+    const g = $(() => {
       const p = {};
       return n.openOnHover && (p.onMouseenter = () => a.value = !0), p;
     });
@@ -4802,7 +4787,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       updateLocation: v
     }), (p, _) => {
       const z = kn("MceMenu");
-      return $(), oe(ot, {
+      return O(), oe(ot, {
         ref: "overlayTpl",
         modelValue: a.value,
         "onUpdate:modelValue": _[2] || (_[2] = (I) => a.value = I),
@@ -4814,23 +4799,23 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         "onClick:outside": h
       }, {
         activator: ne((I) => [
-          Q(p.$slots, "activator", Oe(I, {
+          Q(p.$slots, "activator", $e(I, {
             props: { ...I.props, ...g.value }
           }))
         ]),
         default: ne(() => [
-          o.items?.length ? ($(), R("div", {
+          o.items?.length ? (O(), R("div", {
             key: 0,
             class: "mce-list",
             onMouseleave: f
           }, [
-            ($(!0), R(se, null, _e(o.items, (I, E) => ($(), R(se, { key: E }, [
-              I.type === "divider" ? ($(), R("div", {
+            (O(!0), R(se, null, _e(o.items, (I, E) => (O(), R(se, { key: E }, [
+              I.type === "divider" ? (O(), R("div", {
                 key: 0,
                 ref_for: !0,
                 ref: "menuItemTplRefs",
                 class: "mce-list__divider"
-              }, null, 512)) : ($(), R("div", {
+              }, null, 512)) : (O(), R("div", {
                 key: 1,
                 ref_for: !0,
                 ref: "menuItemTplRefs",
@@ -4844,30 +4829,30 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
                   ]]),
                   onClick: (C) => y(I, E, C)
                 }, [
-                  F("div", ca, [
-                    I.checked ? ($(), oe(Ae, {
+                  F("div", la, [
+                    I.checked ? (O(), oe(Ae, {
                       key: 0,
                       icon: "$check"
                     })) : ee("", !0)
                   ]),
-                  F("div", ua, [
+                  F("div", ca, [
                     Q(p.$slots, "title", { item: I }, () => [
                       Cn(K(I.key), 1)
                     ])
                   ]),
-                  I.children?.length ? ($(), R("div", da, [
+                  I.children?.length ? (O(), R("div", ua, [
                     H(Ae, { icon: "$menuRight" })
                   ])) : ee("", !0)
-                ], 10, la)
-              ], 40, ra))
+                ], 10, ra)
+              ], 40, ia))
             ], 64))), 128)),
-            r.value > -1 && o.items?.[r.value]?.children?.length ? ($(), oe(z, {
+            r.value > -1 && o.items?.[r.value]?.children?.length ? (O(), oe(z, {
               key: 0,
               "open-on-hover": "",
               items: o.items?.[r.value]?.children,
               location: "right",
               "model-value": r.value > -1,
-              target: c.value?.[r.value],
+              target: l.value?.[r.value],
               attach: !1,
               offset: 16,
               "onUpdate:modelValue": _[0] || (_[0] = (I) => r.value = -1),
@@ -4887,10 +4872,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       }, 8, ["modelValue", "location", "offset", "target", "attach"]);
     };
   }
-}), ha = { class: "mce-context-menu__title" }, fa = {
+}), ma = { class: "mce-context-menu__title" }, ha = {
   key: 0,
   class: "mce-context-menu__kbd"
-}, pa = /* @__PURE__ */ X({
+}, fa = /* @__PURE__ */ X({
   __name: "ContextMenu",
   props: {
     modelValue: { type: Boolean },
@@ -4909,13 +4894,13 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       exec: a,
       getKbd: r,
       t: i,
-      hotkeys: c
-    } = de(), l = ke(o, "modelValue"), u = ke(o, "position"), d = ce("menuTplRef");
+      hotkeys: l
+    } = de(), c = ke(o, "modelValue"), u = ke(o, "position"), d = ce("menuTplRef");
     function g() {
       d.value?.updateLocation();
     }
     function h(y) {
-      y.preventDefault(), l.value = !0, u.value = {
+      y.preventDefault(), c.value = !0, u.value = {
         x: y.clientX,
         y: y.clientY
       }, g();
@@ -4930,10 +4915,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     }
     return e({
       updateLocation: g
-    }), (y, f) => ($(), oe(ma, {
+    }), (y, f) => (O(), oe(da, {
       ref: "menuTplRef",
-      modelValue: l.value,
-      "onUpdate:modelValue": f[0] || (f[0] = (p) => l.value = p),
+      modelValue: c.value,
+      "onUpdate:modelValue": f[0] || (f[0] = (p) => c.value = p),
       offset: 10,
       class: "mce-context-menu",
       target: u.value,
@@ -4945,16 +4930,16 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       "onClick:item": v
     }, {
       title: ne(({ item: p }) => [
-        F("span", ha, K(S(i)(p.key)), 1),
-        S(c).has(p.key) ? ($(), R("span", fa, K(S(r)(p.key)), 1)) : ee("", !0)
+        F("span", ma, K(S(i)(p.key)), 1),
+        S(l).has(p.key) ? (O(), R("span", ha, K(S(r)(p.key)), 1)) : ee("", !0)
       ]),
       _: 1
     }, 8, ["modelValue", "target", "items", "style"]));
   }
-}), va = {
+}), pa = {
   key: 0,
   class: "mce-drawing__content"
-}, ya = /* @__PURE__ */ X({
+}, va = /* @__PURE__ */ X({
   __name: "Drawing",
   setup(o) {
     const {
@@ -4964,27 +4949,27 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       camera: s,
       drawboardAabb: a,
       setCursor: r
-    } = de(), { x: i, y: c } = zn();
-    function l(u) {
+    } = de(), { x: i, y: l } = zn();
+    function c(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" ? ($(), R("div", {
+    return (u, d) => S(e) === "drawing" ? (O(), R("div", {
       key: 0,
       class: "mce-drawing",
       style: q({
         left: `${S(i)}px`,
-        top: `${S(c)}px`
+        top: `${S(l)}px`
       }),
-      onMousedown: l
+      onMousedown: c
     }, [
-      S(t)?.content ? ($(), R("div", va, K(S(n)(S(t).content)), 1)) : ee("", !0)
+      S(t)?.content ? (O(), R("div", pa, K(S(n)(S(t).content)), 1)) : ee("", !0)
     ], 36)) : ee("", !0);
   }
-}), ga = /* @__PURE__ */ X({
+}), ya = /* @__PURE__ */ X({
   __name: "Floatbar",
   props: {
     ...qe({
@@ -5005,7 +4990,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       deep: !0
     }), e({
       updateLocation: i
-    }), (c, l) => ($(), oe(ot, {
+    }), (l, c) => (O(), oe(ot, {
       ref: "overlayTpl",
       class: "mce-floatbar",
       location: t.location,
@@ -5015,12 +5000,12 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       "model-value": !0
     }, {
       default: ne(() => [
-        S(s).length > 0 ? Q(c.$slots, "default", { key: 0 }) : ee("", !0)
+        S(s).length > 0 ? Q(l.$slots, "default", { key: 0 }) : ee("", !0)
       ]),
       _: 3
     }, 8, ["location", "offset", "target"]));
   }
-}), ba = /* @__PURE__ */ X({
+}), ga = /* @__PURE__ */ X({
   __name: "Frame",
   props: {
     modelValue: { required: !0 },
@@ -5034,15 +5019,15 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       selection: a,
       state: r,
       config: i,
-      exec: c
-    } = de(), l = V(!1);
+      exec: l
+    } = de(), c = V(!1);
     async function u() {
-      l.value = !0, await Re(), t.value && (t.value.focus(), t.value.select());
+      c.value = !0, await Re(), t.value && (t.value.focus(), t.value.select());
     }
     async function d(g) {
-      l.value || (a.value = [e.value], await Re(), c("startTransform", g));
+      c.value || (a.value = [e.value], await Re(), l("startTransform", g));
     }
-    return (g, h) => ze(($(), R("div", {
+    return (g, h) => ze((O(), R("div", {
       style: q(S(Me)(S(n)(e.value))),
       class: be(["mce-frame", [
         S(i).frameOutline && "mce-frame--outline"
@@ -5059,9 +5044,9 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         ze(F("input", {
           ref: "inputTpl",
           "onUpdate:modelValue": h[0] || (h[0] = (v) => e.value.name = v),
-          onBlur: h[1] || (h[1] = (v) => l.value = !1)
+          onBlur: h[1] || (h[1] = (v) => c.value = !1)
         }, null, 544), [
-          [Xe, l.value],
+          [Xe, c.value],
           [En, e.value.name]
         ])
       ], 544), [
@@ -5071,18 +5056,18 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       [Xe, e.value.visible]
     ]);
   }
-}), wa = /* @__PURE__ */ X({
+}), ba = /* @__PURE__ */ X({
   __name: "Frames",
   setup(o) {
     const {
       frames: e
     } = de();
-    return (t, n) => ($(!0), R(se, null, _e(S(e), (s, a) => ($(), oe(ba, {
+    return (t, n) => (O(!0), R(se, null, _e(S(e), (s, a) => (O(), oe(ga, {
       key: a,
       "model-value": s
     }, null, 8, ["model-value"]))), 128));
   }
-}), xa = /* @__PURE__ */ X({
+}), wa = /* @__PURE__ */ X({
   __name: "GoBackSelectedArea",
   setup(o) {
     const {
@@ -5091,28 +5076,28 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       aabbToDrawboardAabb: n,
       exec: s,
       t: a
-    } = de(), r = O(() => e.value.width && e.value.height && !Be(
+    } = de(), r = $(() => e.value.width && e.value.height && !Be(
       t.value,
       n(e.value)
     ));
-    return (i, c) => r.value ? ($(), R("div", {
+    return (i, l) => r.value ? (O(), R("div", {
       key: 0,
       class: "mce-back-selected-aera",
-      onClick: c[0] || (c[0] = Ke((l) => S(s)("zoomToSelection"), ["prevent"]))
+      onClick: l[0] || (l[0] = Ke((c) => S(s)("zoomToSelection"), ["prevent"]))
     }, [
       H(Ae, { icon: "$gps" }),
       F("span", null, K(S(a)("goBackSelectedArea")), 1)
     ])) : ee("", !0);
   }
-}), _a = ["data-name"], ka = /* @__PURE__ */ X({
+}), xa = ["data-name"], _a = /* @__PURE__ */ X({
   __name: "Hover",
   setup(o) {
     const {
       selection: e,
       hoverElement: t,
       getObbInDrawboard: n
-    } = de(), s = O(() => n(t.value));
-    return (a, r) => S(t) && !S(t).equal(S(e)[0]) ? ($(), R("div", {
+    } = de(), s = $(() => n(t.value));
+    return (a, r) => S(t) && !S(t).equal(S(e)[0]) ? (O(), R("div", {
       key: 0,
       class: "mce-hover",
       "data-name": S(t).name,
@@ -5120,11 +5105,11 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         borderColor: "currentcolor",
         ...S(Me)(s.value)
       })
-    }, null, 12, _a)) : ee("", !0);
+    }, null, 12, xa)) : ee("", !0);
   }
-}), Ca = /* @__PURE__ */ X({
+}), ka = /* @__PURE__ */ X({
   __name: "Tooltip",
-  props: /* @__PURE__ */ $e({
+  props: /* @__PURE__ */ Oe({
     ...qe({
       location: "right",
       offset: 8
@@ -5141,10 +5126,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     }
     return e({
       updateLocation: a
-    }), (r, i) => ($(), oe(ot, {
+    }), (r, i) => (O(), oe(ot, {
       ref: "overlayTpl",
       modelValue: n.value,
-      "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value = c),
+      "onUpdate:modelValue": i[0] || (i[0] = (l) => n.value = l),
       class: "mce-tooltip",
       location: t.location,
       offset: t.offset,
@@ -5158,14 +5143,14 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     }, [
       r.$slots.activator ? {
         name: "activator",
-        fn: ne((c) => [
-          Q(r.$slots, "activator", vt(yt(c)))
+        fn: ne((l) => [
+          Q(r.$slots, "activator", vt(yt(l)))
         ]),
         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" } }, ft = /* @__PURE__ */ X({
+}), Ca = ["width", "height"], Ea = ["onDblclick", "onMousedown", "onMousemove"], Ta = { style: { "font-size": "12px", "text-wrap": "nowrap" } }, ft = /* @__PURE__ */ X({
   inheritAttrs: !1,
   __name: "Ruler",
   props: {
@@ -5182,30 +5167,30 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     labelFormat: { type: Function, default: (o) => String(o) }
   },
   setup(o, { expose: e }) {
-    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({
+    const t = o, n = Vt(), s = $(() => t.pixelRatio), a = V(), r = V({ x: 0, y: 0 }), i = ce("canvasTpl"), l = "OffscreenCanvas" in window ? new OffscreenCanvas(t.size, t.size) : document.createElement("canvas"), c = l.getContext("2d"), u = V(), d = Ee({
       text: "#000",
       border: "#000"
     });
     function g() {
       if (!t.selected?.width || !t.selected?.height)
         return;
-      l.fillStyle = "#6165FD20";
+      c.fillStyle = "#6165FD20";
       const A = t.vertical ? t.selected.top : t.selected.left, N = t.vertical ? t.selected.height : t.selected.width;
-      l.fillRect(A, 0, N, t.size);
+      c.fillRect(A, 0, N, t.size);
     }
     function h(A, N, L, j) {
-      l.lineWidth = L, l.strokeStyle = j, l.beginPath(), l.moveTo(A[0], A[1]), l.lineTo(N[0], N[1]), l.stroke();
+      c.lineWidth = L, c.strokeStyle = j, c.beginPath(), c.moveTo(A[0], A[1]), c.lineTo(N[0], N[1]), c.stroke();
     }
     function v(A, N, L = 1) {
       const j = A, D = t.size, U = A, W = t.size - N * L;
-      l.moveTo(j, D), l.lineTo(U, W);
+      c.moveTo(j, D), c.lineTo(U, W);
     }
     function y(A, N, L, j) {
-      l.font = `${j}px sans-serif`, l.textAlign = "left", l.textBaseline = "bottom";
+      c.font = `${j}px sans-serif`, c.textAlign = "left", c.textBaseline = "bottom";
       const D = N, U = t.size - L;
-      l.save(), t.vertical && (l.translate(0, t.size), l.scale(1, -1)), l.fillText(A, D, U), l.restore();
+      c.save(), t.vertical && (c.translate(0, t.size), c.scale(1, -1)), c.fillText(A, D, U), c.restore();
     }
-    const f = O(() => {
+    const f = $(() => {
       const A = Math.max(t.unit / t.zoom, 1), N = t.unitFractions, L = Math.floor(Math.log10(A)), j = A / 10 ** L;
       let D = N[N.length - 1];
       for (const U of N)
@@ -5214,10 +5199,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           break;
         }
       return D * 10 ** L;
-    }), p = O(() => {
+    }), p = $(() => {
       const A = -t.position / t.zoom;
       return Math.floor(A / f.value) * f.value;
-    }), _ = O(() => {
+    }), _ = $(() => {
       const N = ((t.vertical ? u.value?.height : u.value?.width) ?? 0) / t.zoom;
       return p.value + Math.ceil(N / f.value) * f.value;
     });
@@ -5229,9 +5214,9 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     }
     function E() {
       const A = i.value;
-      if (!A || !c.width || !c.height)
+      if (!A || !l.width || !l.height)
         return;
-      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(
+      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(
         [0, t.size],
         [t.vertical ? A.height : A.width, t.size],
         2,
@@ -5241,17 +5226,17 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__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)), l.beginPath(), l.lineWidth = 1, l.strokeStyle = d.text, l.fillStyle = d.text;
+      j = (j > 0 ? 1 : -1) * Math.max(1, Math.abs(j)), c.beginPath(), c.lineWidth = 1, c.strokeStyle = d.text, c.fillStyle = d.text;
       for (let D = p.value; D <= _.value; D += j)
         D % f.value === 0 && N(z(D), t.labelFormat(D));
-      l.stroke(), l.beginPath(), l.lineWidth = 1, l.strokeStyle = d.border;
+      c.stroke(), c.beginPath(), c.lineWidth = 1, c.strokeStyle = d.border;
       for (let D = p.value; D <= _.value; D += j)
         D % f.value === 0 || D % j === 0 && L(z(D));
-      if (l.stroke(), l.restore(), "transferToImageBitmap" in c)
-        A.getContext("bitmaprenderer").transferFromImageBitmap(c.transferToImageBitmap());
+      if (c.stroke(), c.restore(), "transferToImageBitmap" in l)
+        A.getContext("bitmaprenderer").transferFromImageBitmap(l.transferToImageBitmap());
       else {
         const D = A.getContext("2d");
-        D && (D.clearRect(0, 0, A.width, A.height), D.drawImage(c, 0, 0));
+        D && (D.clearRect(0, 0, A.width, A.height), D.drawImage(l, 0, 0));
       }
     }
     pe(
@@ -5265,7 +5250,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       if (!i.value)
         return;
       const A = i.value.parentElement.getBoundingClientRect();
-      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();
+      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();
     }, 50);
     He(() => {
       C();
@@ -5275,9 +5260,9 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         d.text = N.getPropertyValue("--text-color").trim(), d.border = N.getPropertyValue("--border-color").trim();
       }
     }), we(() => {
-      c.width = 0, c.height = 0;
+      l.width = 0, l.height = 0;
     });
-    const m = V([]), b = V(), k = O(() => {
+    const m = V([]), b = V(), k = $(() => {
       const A = [...m.value];
       return typeof b.value == "number" && A.unshift(b.value), A;
     });
@@ -5311,8 +5296,8 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     }
     return e({
       box: u
-    }), (A, N) => ($(), R(se, null, [
-      ze(($(), R("div", Oe({
+    }), (A, N) => (O(), R(se, null, [
+      ze((O(), R("div", $e({
         class: ["mce-ruler", [
           `mce-ruler--${t.vertical ? "vertical" : "horizontal"}`
         ]],
@@ -5327,11 +5312,11 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           class: "mce-ruler__canvas",
           width: t.size,
           height: t.size
-        }, null, 8, Ea)
+        }, null, 8, Ca)
       ], 16)), [
         [S(Zt), S(C)]
       ]),
-      ($(!0), R(se, null, _e(k.value, (L, j) => ($(), R("div", {
+      (O(!0), R(se, null, _e(k.value, (L, j) => (O(), R("div", {
         key: j,
         class: be(["mce-ruler-refline", {
           "mce-ruler-refline--vertical": t.vertical,
@@ -5348,20 +5333,20 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         onMousedown: (D) => B(D, j),
         onMousemove: () => a.value = `${L}`,
         onMouseleave: M
-      }, null, 46, Ta))), 128)),
-      H(Ca, {
+      }, null, 46, Ea))), 128)),
+      H(ka, {
         "model-value": !!a.value,
         target: r.value,
         offset: 24
       }, {
         default: ne(() => [
-          F("div", Aa, K(a.value), 1)
+          F("div", Ta, K(a.value), 1)
         ]),
         _: 1
       }, 8, ["model-value", "target"])
     ], 64));
   }
-}), Sa = { class: "mce-rulers" }, Ma = /* @__PURE__ */ X({
+}), Aa = { class: "mce-rulers" }, Sa = /* @__PURE__ */ X({
   inheritAttrs: !1,
   __name: "Rulers",
   setup(o) {
@@ -5369,8 +5354,8 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       camera: e,
       getAabbInDrawboard: t,
       selection: n
-    } = de(), s = O(() => t(n.value));
-    return (a, r) => ($(), R("div", Sa, [
+    } = de(), s = $(() => t(n.value));
+    return (a, r) => (O(), R("div", Aa, [
       H(ft, {
         refline: "",
         zoom: S(e).zoom.x,
@@ -5391,12 +5376,12 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       r[0] || (r[0] = F("div", { class: "mce-rulers__left-top" }, null, -1))
     ]));
   }
-}), za = {
+}), Ma = {
   ref: "trackTplRef",
   class: "mce-scrollbar__track"
-}, Oa = 50, Nt = 50, Rt = /* @__PURE__ */ X({
+}, za = 50, Nt = 50, Rt = /* @__PURE__ */ X({
   __name: "Scrollbar",
-  props: /* @__PURE__ */ $e({
+  props: /* @__PURE__ */ Oe({
     zoom: {},
     length: {},
     vertical: { type: Boolean },
@@ -5407,16 +5392,16 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ $e(["scroll"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ Oe(["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 = 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(
+    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"), l = ce("thumbTplRef"), c = V(0), u = $(
+      () => 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)
+    ), d = $(
       () => t.infinite ? Math.abs(r.value) - r.value : r.value > 0 ? 0 : -r.value
-    ), 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(() => {
+    ), g = $(() => Math.max(0.05, Math.min(1, c.value / u.value))), h = $(() => d.value / (u.value - c.value) * (1 - g.value)), v = Yt(() => {
       const w = i.value?.getBoundingClientRect() ?? { width: 0, height: 0 };
-      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}%`);
+      c.value = t.vertical ? w.height : w.width;
+    }, 50), y = $(() => t.infinite ? a(g.value, h.value) : h.value), f = $(() => 1 - y.value - g.value), p = $(() => t.vertical ? `${y.value * 100}%` : "0%"), _ = $(() => t.vertical ? `${f.value * 100}%` : "50%"), z = $(() => t.vertical ? "0%" : `${y.value * 100}%`), I = $(() => t.vertical ? "50%" : `${f.value * 100}%`);
     function E(w) {
       n("scroll", w - r.value), r.value = w;
     }
@@ -5428,11 +5413,11 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     function k(w) {
       const T = w.target;
       let M = 0;
-      if (c.value?.contains(T)) {
+      if (l.value?.contains(T)) {
         x();
         return;
       } else if (i.value?.contains(T)) {
-        const P = (t.vertical ? w.offsetY : w.offsetX) / l.value;
+        const P = (t.vertical ? w.offsetY : w.offsetX) / c.value;
         if (P < y.value)
           M = 1;
         else if (P > 1 - f.value)
@@ -5442,14 +5427,14 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           return;
         }
       }
-      C(Oa * M), b = setTimeout(() => k(w), Nt);
+      C(za * M), b = setTimeout(() => k(w), Nt);
     }
     function x() {
       clearTimeout(b);
     }
     return we(() => {
       x();
-    }), (w, T) => ze(($(), R("div", {
+    }), (w, T) => ze((O(), R("div", {
       class: be(["mce-scrollbar", {
         "mce-scrollbar--vertical": t.vertical,
         "mce-scrollbar--horizontal": !t.vertical
@@ -5460,7 +5445,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         [t.vertical ? "top" : "left"]: `${t.offset}px`
       })
     }, [
-      F("div", za, [
+      F("div", Ma, [
         ze(F("div", {
           ref: "thumbTplRef",
           class: be(["mce-scrollbar__thumb", {
@@ -5494,15 +5479,15 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       camera: t,
       viewAabb: n
     } = de();
-    return (s, a) => ($(), R(se, null, [
-      H(Rt, Oe(e, {
+    return (s, a) => (O(), R(se, null, [
+      H(Rt, $e(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(Rt, Oe(e, {
+      H(Rt, $e(e, {
         modelValue: S(t).position.x,
         "onUpdate:modelValue": a[1] || (a[1] = (r) => S(t).position.x = r),
         zoom: S(t).zoom.x,
@@ -5510,10 +5495,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       }), null, 16, ["modelValue", "zoom", "length"])
     ], 64));
   }
-}), Ia = { class: "mce-transformable__svg" }, Fa = { "pointer-events": "all" }, Pa = ["x", "y", "width", "height", "aria-label", "fill"], Na = ["cx", "cy", "r", "aria-label", "fill"], Ra = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"], Ba = {
+}), Oa = { class: "mce-transformable__svg" }, Ia = { "pointer-events": "all" }, Fa = ["x", "y", "width", "height", "aria-label", "fill"], Pa = ["cx", "cy", "r", "aria-label", "fill"], Na = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"], Ra = {
   key: 0,
   class: "mce-transformable__tip"
-}, La = /* @__PURE__ */ X({
+}, Ba = /* @__PURE__ */ X({
   __name: "Transformable",
   props: {
     tag: { default: "div" },
@@ -5562,13 +5547,13 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       "resize-top-right": (m) => _("resizeBevel", 180 + m),
       "resize-bottom-right": (m) => _("resizeBevel", 90 + m),
       "resize-bottom-left": (m) => _("resizeBevel", 180 + m)
-    }, r = ke(n, "modelValue"), i = O({
+    }, r = ke(n, "modelValue"), i = $({
       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
-    }), c = V(!1), l = V(), u = O(() => {
+    }), l = V(!1), c = V(), u = $(() => {
       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 = [
@@ -5608,25 +5593,25 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         { type: "rotate-bottom-left", x: -M - T, y: b + T, width: M, height: M },
         { type: "rotate-bottom-right", x: m + T, y: b + T, width: M, height: M }
       ], P.filter((B) => n.handles.includes(B.type)).map((B) => (B.width = Math.max(B.width, 0), B.height = Math.max(B.height, 0), B));
-    }), d = V(), g = O(() => {
+    }), d = V(), g = $(() => {
       const { width: m = 0, height: b = 0 } = i.value;
       return {
         width: n.initialSize && !m ? void 0 : `${m}px`,
         height: n.initialSize && !b ? void 0 : `${b}px`
       };
-    }), h = O(() => {
+    }), h = $(() => {
       const { left: m = 0, top: b = 0, rotate: k = 0 } = i.value, x = k * Math.PI / 180, w = Math.cos(x), T = Math.sin(x);
       return {
         ...g.value,
         transform: `matrix(${w}, ${T}, ${-T}, ${w}, ${m}, ${b})`
       };
-    }), v = O(() => n.visibility === "auto" && c.value), y = O(() => n.tipFormat?.("size"));
+    }), v = $(() => n.visibility === "auto" && l.value), y = $(() => 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];
-      l.value = B.type;
+      c.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
@@ -5648,9 +5633,9 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       ) / (Math.PI / 180);
       let Y = m ? { x: m.clientX, y: m.clientY } : void 0;
       function xe() {
-        c.value = !0, s("start", i.value);
+        l.value = !0, s("start", i.value);
       }
-      !n.threshold && !c.value && xe();
+      !n.threshold && !l.value && xe();
       function ae(ye) {
         const J = {};
         Y || (Y = { x: ye.clientX, y: ye.clientY });
@@ -5658,7 +5643,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           x: ye.clientX - Y.x,
           y: ye.clientY - Y.y
         };
-        if (!c.value) {
+        if (!l.value) {
           if (Math.abs(me.x) < n.threshold && Math.abs(me.y) < n.threshold)
             return;
           xe();
@@ -5710,7 +5695,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         i.value = ie, s("move", ie, te);
       }
       function ve() {
-        window.removeEventListener("pointermove", ae), window.removeEventListener("pointerup", ve, !0), c.value = !1, s("end", i.value);
+        window.removeEventListener("pointermove", ae), window.removeEventListener("pointerup", ve, !0), l.value = !1, s("end", i.value);
       }
       return window.addEventListener("pointermove", ae), window.addEventListener("pointerup", ve, !0), !0;
     }
@@ -5763,9 +5748,9 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       }
     }), e({
       start: f,
-      activeHandle: l,
-      transforming: c
-    }), (m, b) => ($(), oe(jt(o.tag), {
+      activeHandle: c,
+      transforming: l
+    }), (m, b) => (O(), oe(jt(o.tag), {
       class: "mce-transformable",
       style: q(h.value)
     }, {
@@ -5778,7 +5763,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           },
           start: f
         }),
-        ($(), R("svg", Ia, [
+        (O(), R("svg", Oa, [
           F("rect", {
             width: "100%",
             height: "100%",
@@ -5790,10 +5775,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
               strokeWidth: v.value ? "0.5px" : void 0
             })
           }, null, 4),
-          F("g", Fa, [
-            ($(!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", {
+          F("g", Ia, [
+            (O(!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) => (O(), 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") ? (O(), R(se, { key: 0 }, [
+                n.handleShape === "rect" ? (O(), R("rect", {
                   key: 0,
                   x: k.x,
                   y: k.y,
@@ -5803,9 +5788,9 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
                   fill: o.handleColor,
                   class: "mce-transformable__handle",
                   style: q({
-                    opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
+                    opacity: o.visibility === "none" || l.value && o.visibility !== "visible" ? 0 : void 0
                   })
-                }, null, 12, Pa)) : ($(), R("circle", {
+                }, null, 12, Fa)) : (O(), R("circle", {
                   key: 1,
                   cx: k.x + k.width / 2,
                   cy: k.y + k.width / 2,
@@ -5814,9 +5799,9 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
                   fill: o.handleColor,
                   class: "mce-transformable__handle",
                   style: q({
-                    opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
+                    opacity: o.visibility === "none" || l.value && o.visibility !== "visible" ? 0 : void 0
                   })
-                }, null, 12, Na))
+                }, null, 12, Pa))
               ], 64)) : ee("", !0),
               F("rect", {
                 ref_for: !0,
@@ -5829,11 +5814,11 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
                 "aria-label": k.type,
                 class: "mce-transformable__handle-box",
                 style: q({
-                  opacity: o.visibility === "none" || c.value && o.visibility !== "visible" ? 0 : void 0
+                  opacity: o.visibility === "none" || l.value && o.visibility !== "visible" ? 0 : void 0
                 }),
-                cursor: c.value ? "auto" : z(k.type),
+                cursor: l.value ? "auto" : z(k.type),
                 onPointerdown: (w) => f(w, x)
-              }, null, 44, Ra)
+              }, null, 44, Na)
             ], 64))), 128))
           ]),
           F("g", {
@@ -5843,12 +5828,12 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
             Q(m.$slots, "svg", { box: i.value })
           ], 4)
         ])),
-        y.value ? ($(), R("div", Ba, K(y.value), 1)) : ee("", !0)
+        y.value ? (O(), R("div", Ra, K(y.value), 1)) : ee("", !0)
       ]),
       _: 3
     }, 8, ["style"]));
   }
-}), Da = /* @__PURE__ */ X({
+}), La = /* @__PURE__ */ X({
   inheritAttrs: !1,
   __name: "Selector",
   props: {
@@ -5862,8 +5847,8 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       selection: a,
       camera: r,
       obbToFit: i,
-      getObbInDrawboard: c,
-      getObb: l,
+      getObbInDrawboard: l,
+      getObb: c,
       registerCommand: u,
       unregisterCommand: d,
       isFrame: g,
@@ -5875,15 +5860,15 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     }), we(() => {
       d("startTransform");
     });
-    const f = O(() => {
+    const f = $(() => {
       if (a.value.length !== 1)
         return [];
       const 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) => ({
+      return a.value[0]?.findAncestor((C) => (C instanceof G && E.push(l(C)), !1)), E;
+    }), p = $(() => n.value !== "selecting" && a.value.length === 1 ? [] : a.value.map((E) => ({
       name: E.name,
-      box: c(E)
-    }))), _ = O(() => c(a.value)), z = O({
+      box: l(E)
+    }))), _ = $(() => l(a.value)), z = $({
       get: () => _.value,
       set: (E) => {
         const C = r.value.zoom, m = _.value, b = {
@@ -5911,13 +5896,13 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       }
     });
     function I() {
-      const E = a.value.length === 1 ? a.value[0].style : l(a.value);
+      const E = a.value.length === 1 ? a.value[0].style : c(a.value);
       return `${Number(E.width.toFixed(2))} × ${Number(E.height.toFixed(2))}`;
     }
     return e({
       transformable: y
-    }), (E, C) => ($(), R(se, null, [
-      ($(!0), R(se, null, _e(f.value, (m, b) => ($(), R("div", {
+    }), (E, C) => (O(), R(se, null, [
+      (O(!0), R(se, null, _e(f.value, (m, b) => (O(), R("div", {
         key: b,
         class: "mce-parent-element-obb",
         style: q({
@@ -5925,7 +5910,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           ...S(Me)(m)
         })
       }, null, 4))), 128)),
-      S(n) === "selecting" ? ($(), R("div", {
+      S(n) === "selecting" ? (O(), R("div", {
         key: 0,
         class: "mce-selected-area",
         style: q({
@@ -5933,7 +5918,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           ...S(Me)(t.selectedArea)
         })
       }, null, 4)) : ee("", !0),
-      ($(!0), R(se, null, _e(p.value, (m, b) => ($(), R("div", {
+      (O(!0), R(se, null, _e(p.value, (m, b) => (O(), R("div", {
         key: b,
         class: "mce-element-obb",
         style: q({
@@ -5941,7 +5926,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           ...S(Me)(m.box)
         })
       }, null, 4))), 128)),
-      z.value.width && z.value.height ? ($(), oe(La, {
+      z.value.width && z.value.height ? (O(), oe(Ba, {
         key: 1,
         ref: "transformableRef",
         modelValue: z.value,
@@ -5964,7 +5949,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           key: "0"
         } : void 0
       ]), 1032, ["modelValue", "visibility", "moveable", "resize-strategy", "handle-shape", "border-style"])) : ee("", !0),
-      z.value.width && z.value.height && E.$slots.default ? ($(), R("div", {
+      z.value.width && z.value.height && E.$slots.default ? (O(), R("div", {
         key: 2,
         style: q([{ position: "absolute" }, S(Me)(z.value)])
       }, [
@@ -5972,15 +5957,15 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       ], 4)) : ee("", !0)
     ], 64));
   }
-}), Va = /* @__PURE__ */ X({
+}), Da = /* @__PURE__ */ X({
   __name: "Setup",
   setup(o) {
     return de().setup(), (e, t) => null;
   }
-}), ja = /* @__PURE__ */ X({
+}), Va = /* @__PURE__ */ X({
   __name: "Layout",
   props: {
-    ...ta()
+    ...ea()
   },
   setup(o, { expose: e }) {
     const t = o, {
@@ -5989,16 +5974,16 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       items: a,
       getLayoutItem: r,
       layoutRef: i
-    } = ia(t);
+    } = aa(t);
     return e({
       items: a,
       getLayoutItem: r
-    }), (c, l) => ($(), R("div", {
+    }), (l, c) => (O(), R("div", {
       ref: S(i),
       class: be([S(n)]),
       style: q([S(s)])
     }, [
-      Q(c.$slots, "default")
+      Q(l.$slots, "default")
     ], 6));
   }
 }), Bt = /* @__PURE__ */ X({
@@ -6013,19 +5998,19 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       default: 300
     },
     modelValue: Boolean,
-    ...na()
+    ...ta()
   },
   setup(o) {
-    const e = o, { layoutItemStyles: t } = sa({
+    const e = o, { layoutItemStyles: t } = oa({
       id: e.name,
-      order: O(() => Number.parseInt(String(e.order), 10)),
+      order: $(() => Number.parseInt(String(e.order), 10)),
       position: Te(() => e.position),
       elementSize: Te(() => e.size),
       layoutSize: Te(() => e.size),
       active: Te(() => e.modelValue),
       absolute: Te(() => e.absolute)
     });
-    return (n, s) => ($(), R("div", {
+    return (n, s) => (O(), R("div", {
       class: be(["mce-layout-item", [
         `mce-layout-item--${e.position}`
       ]]),
@@ -6034,36 +6019,36 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       Q(n.$slots, "default")
     ], 6));
   }
-}), Ua = {
+}), ja = {
   key: 0,
   class: "mce-main__scroller"
-}, Xa = /* @__PURE__ */ X({
+}, Ua = /* @__PURE__ */ X({
   __name: "Main",
   props: {
     scrollable: Boolean
   },
   setup(o) {
-    const e = o, { mainStyles: t } = oa();
-    return (n, s) => ($(), R("main", {
+    const e = o, { mainStyles: t } = na();
+    return (n, s) => (O(), R("main", {
       class: be(["mce-main", [
         { "mce-main--scrollable": e.scrollable }
       ]]),
       style: q([S(t)])
     }, [
-      e.scrollable ? ($(), R("div", Ua, [
+      e.scrollable ? (O(), R("div", ja, [
         Q(n.$slots, "default")
       ])) : Q(n.$slots, "default", { key: 1 })
     ], 6));
   }
-}), Ha = { class: "progress-indicator" }, Ya = {
+}), Xa = { class: "progress-indicator" }, Ha = {
   key: 0,
   class: "progress-indicator__status"
-}, qa = { class: "progress-indicator__bar" }, Ga = {
+}, Ya = { class: "progress-indicator__bar" }, qa = {
   key: 1,
   class: "progress-indicator__bar-indeterminate"
-}, Wa = /* @__PURE__ */ X({
+}, Ga = /* @__PURE__ */ X({
   __name: "ProgressIndicator",
-  props: /* @__PURE__ */ $e({
+  props: /* @__PURE__ */ Oe({
     label: {},
     indeterminate: { type: Boolean }
   }, {
@@ -6073,10 +6058,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
   emits: ["update:modelValue"],
   setup(o) {
     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 ? ($(), R("div", Ga)) : ($(), R("div", {
+    return (t, n) => (O(), R("div", Xa, [
+      o.label ? (O(), R("span", Ha, K(o.label), 1)) : ee("", !0),
+      F("div", Ya, [
+        o.indeterminate ? (O(), R("div", qa)) : (O(), R("div", {
           key: 0,
           class: "progress-indicator__bar-fill",
           style: q({ width: `${e.value * 100}%` })
@@ -6089,7 +6074,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
   for (const [n, s] of e)
     t[n] = s;
   return t;
-}, Ka = /* @__PURE__ */ pn(Wa, [["__scopeId", "data-v-c4234331"]]), Ja = { class: "mce-statusbar" }, Za = { class: "mce-statusbar__main" }, Qa = { class: "mce-statusbar__item" }, ei = { class: "mce-statusbar__kbd" }, ti = { class: "mce-statusbar__kbd" }, ni = { class: "mce-statusbar__item" }, oi = { class: "mce-statusbar__kbd" }, si = { class: "mce-statusbar__item" }, ai = { class: "mce-statusbar__item" }, ii = { class: "mce-statusbar__kbd" }, ri = { class: "mce-statusbar__item" }, li = { class: "mce-statusbar__kbd" }, ci = { key: 2 }, ui = { class: "mce-statusbar__item" }, di = { class: "mce-statusbar__item" }, mi = { class: "mce-statusbar__kbd" }, hi = { class: "mce-statusbar__item" }, fi = { class: "mce-statusbar__item" }, pi = { class: "mce-statusbar__kbd" }, vi = { class: "mce-statusbar__item" }, yi = { class: "mce-statusbar__progress" }, gi = /* @__PURE__ */ X({
+}, Wa = /* @__PURE__ */ pn(Ga, [["__scopeId", "data-v-c4234331"]]), Ka = { class: "mce-statusbar" }, Ja = { class: "mce-statusbar__main" }, Za = { class: "mce-statusbar__item" }, Qa = { class: "mce-statusbar__kbd" }, ei = { class: "mce-statusbar__kbd" }, ti = { class: "mce-statusbar__item" }, ni = { class: "mce-statusbar__kbd" }, oi = { class: "mce-statusbar__item" }, si = { class: "mce-statusbar__item" }, ai = { class: "mce-statusbar__kbd" }, ii = { class: "mce-statusbar__item" }, ri = { class: "mce-statusbar__kbd" }, li = { key: 2 }, ci = { class: "mce-statusbar__item" }, ui = { class: "mce-statusbar__item" }, di = { class: "mce-statusbar__kbd" }, mi = { class: "mce-statusbar__item" }, hi = { class: "mce-statusbar__item" }, fi = { class: "mce-statusbar__kbd" }, pi = { class: "mce-statusbar__item" }, vi = { class: "mce-statusbar__progress" }, yi = /* @__PURE__ */ X({
   __name: "Statusbar",
   setup(o) {
     const {
@@ -6099,70 +6084,70 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       exporting: s,
       exportProgress: a
     } = de();
-    return (r, i) => ($(), R("div", Ja, [
-      F("div", Za, [
-        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)
+    return (r, i) => (O(), R("div", Ka, [
+      F("div", Ja, [
+        S(e) === "typing" ? (O(), R(se, { key: 0 }, [
+          F("div", Za, [
+            F("span", Qa, K(S(n)("Command")), 1),
+            F("span", ei, K(S(n)("Enter")), 1)
           ]),
           i[1] || (i[1] = F("span", null, "/", -1)),
-          F("div", ni, [
-            F("span", oi, K(S(n)("Escape")), 1),
+          F("div", ti, [
+            F("span", ni, K(S(n)("Escape")), 1),
             F("span", null, K(S(t)("commitChanges")), 1)
           ])
-        ], 64)) : S(e) === "transforming" ? ($(), R(se, { key: 1 }, [
-          F("div", si, [
+        ], 64)) : S(e) === "transforming" ? (O(), R(se, { key: 1 }, [
+          F("div", oi, [
             H(Ae, { icon: "$mouseRightClick" })
           ]),
           i[2] || (i[2] = F("span", null, " / ", -1)),
-          F("div", ai, [
-            F("span", ii, K(S(n)("Escape")), 1),
+          F("div", si, [
+            F("span", ai, K(S(n)("Escape")), 1),
             F("span", null, K(S(t)("cancel")), 1)
           ]),
           i[3] || (i[3] = F("div", { class: "mce-statusbar__divider" }, null, -1)),
-          F("div", ri, [
-            F("span", li, K(S(n)("Shift")), 1),
+          F("div", ii, [
+            F("span", ri, K(S(n)("Shift")), 1),
             F("span", null, K(S(t)("constrainToAxis")), 1)
           ])
-        ], 64)) : S(e) ? ($(), R("span", ci, K(S(t)(S(e))), 1)) : ($(), R(se, { key: 3 }, [
-          F("div", ui, [
+        ], 64)) : S(e) ? (O(), R("span", li, K(S(t)(S(e))), 1)) : (O(), R(se, { key: 3 }, [
+          F("div", ci, [
             H(Ae, { icon: "$mouseLeftClick" }),
             F("span", null, K(S(t)("selectObject")), 1)
           ]),
           i[4] || (i[4] = F("span", null, " + ", -1)),
-          F("div", di, [
-            F("span", mi, K(S(n)("Shift")), 1),
+          F("div", ui, [
+            F("span", di, K(S(n)("Shift")), 1),
             F("span", null, K(S(t)("extend")), 1)
           ]),
           i[5] || (i[5] = F("div", { class: "mce-statusbar__divider" }, null, -1)),
-          F("div", hi, [
+          F("div", mi, [
             H(Ae, { icon: "$mouseLeftClick" }),
             F("span", null, K(S(t)("selectArea")), 1)
           ]),
           i[6] || (i[6] = F("span", null, " + ", -1)),
-          F("div", fi, [
-            F("span", pi, K(S(n)("Shift")), 1),
+          F("div", hi, [
+            F("span", fi, K(S(n)("Shift")), 1),
             F("span", null, K(S(t)("extend")), 1)
           ]),
           i[7] || (i[7] = F("div", { class: "mce-statusbar__divider" }, null, -1)),
-          F("div", vi, [
+          F("div", pi, [
             H(Ae, { icon: "$mouseLeftClick" }),
             F("span", null, K(S(t)("dragSelected")), 1)
           ])
         ], 64))
       ]),
-      F("div", yi, [
-        S(s) ? ($(), oe(Ka, {
+      F("div", vi, [
+        S(s) ? (O(), oe(Wa, {
           key: 0,
           modelValue: S(a),
-          "onUpdate:modelValue": i[0] || (i[0] = (c) => Tn(a) ? a.value = c : null),
+          "onUpdate:modelValue": i[0] || (i[0] = (l) => Tn(a) ? a.value = l : null),
           label: S(t)("exporting")
         }, null, 8, ["modelValue", "label"])) : ee("", !0)
       ])
     ]));
   }
-}), bi = /* @__PURE__ */ pn(gi, [["__scopeId", "data-v-36c89bd7"]]), wi = /* @__PURE__ */ X({
+}), gi = /* @__PURE__ */ pn(yi, [["__scopeId", "data-v-36c89bd7"]]), bi = /* @__PURE__ */ X({
   __name: "TextEditor",
   setup(o, { expose: e }) {
     const {
@@ -6172,15 +6157,15 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       textToFit: a,
       getObb: r,
       registerCommand: i,
-      unregisterCommand: c,
-      camera: l
-    } = de(), u = V(), d = O(() => {
-      const { zoom: f, position: p } = l.value;
+      unregisterCommand: l,
+      camera: c
+    } = de(), u = V(), d = $(() => {
+      const { zoom: f, position: p } = c.value;
       return {
         transformOrigin: "left top",
         transform: `translate(${p.x}px, ${p.y}px) scale(${f.x}, ${f.y})`
       };
-    }), g = O(() => {
+    }), g = $(() => {
       const f = t.value[0], p = r(f), _ = f?.text.base?.boundingBox;
       return _ && (p.left += _.left, p.top += _.top), {
         ...Me(p)
@@ -6201,9 +6186,9 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       const _ = u.value;
       return _.set(p.text.base), await Re(), _.pointerdown(f);
     }
-    return gt(() => i({ command: "startTyping", handle: y })), we(() => c("startTyping")), e({
+    return gt(() => i({ command: "startTyping", handle: y })), we(() => l("startTyping")), e({
       textEditor: u
-    }), (f, p) => ze(($(), R("div", {
+    }), (f, p) => ze((O(), R("div", {
       class: "mce-text-editor",
       style: q({
         ...d.value
@@ -6231,24 +6216,24 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       [Xe, S(t)[0] && S(n) === "typing"]
     ]);
   }
-}), xi = { class: "mce-payhead" }, _i = /* @__PURE__ */ X({
+}), wi = { class: "mce-payhead" }, xi = /* @__PURE__ */ X({
   __name: "Playhead",
   setup(o) {
-    return (e, t) => ($(), R("div", xi, [...t[0] || (t[0] = [
+    return (e, t) => (O(), R("div", wi, [...t[0] || (t[0] = [
       F("header", { class: "mce-payhead__header" }, null, -1),
       F("main", { class: "mce-payhead__main" }, null, -1)
     ])]));
   }
-}), ki = {
+}), _i = {
   key: 0,
   class: "mce-segment__edge mce-segment__edge--front"
-}, Ci = {
+}, ki = {
   class: "mce-segment__node",
   style: { overflow: "hidden" }
-}, Ei = {
+}, Ci = {
   key: 1,
   class: "mce-segment__edge mce-segment__edge--end"
-}, Ti = /* @__PURE__ */ X({
+}, Ei = /* @__PURE__ */ X({
   __name: "Segment",
   props: {
     node: {},
@@ -6256,46 +6241,46 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     active: { type: Boolean }
   },
   setup(o) {
-    const e = o, t = O(() => {
+    const e = o, t = $(() => {
       const n = { left: 0, top: 0, width: 0 };
       return n.left = e.node.delay / e.msPerPx, n.width = e.node.duration / e.msPerPx, n.width ? n.width = `${n.width}px` : n.width = "100%", {
         width: n.width,
         transform: `matrix(1, 0, 0, 1, ${n.left}, ${n.top})`
       };
     });
-    return (n, s) => ($(), R("div", {
+    return (n, s) => (O(), R("div", {
       class: be(["mce-segment", [
         `mce-segment--${o.node.meta.inEditorIs}`,
         o.active && "mce-segment--active"
       ]]),
       style: q(t.value)
     }, [
-      o.active ? ($(), R("div", ki)) : ee("", !0),
-      F("span", Ci, K(e.node.name), 1),
-      o.active ? ($(), R("div", Ei)) : ee("", !0)
+      o.active ? (O(), R("div", _i)) : ee("", !0),
+      F("span", ki, K(e.node.name), 1),
+      o.active ? (O(), R("div", Ci)) : ee("", !0)
     ], 6));
   }
-}), Ai = { class: "mce-track" }, Si = /* @__PURE__ */ X({
+}), Ti = { class: "mce-track" }, Ai = /* @__PURE__ */ X({
   __name: "Track",
   setup(o) {
-    return (e, t) => ($(), R("div", Ai, [
+    return (e, t) => (O(), R("div", Ti, [
       Q(e.$slots, "default")
     ]));
   }
-}), Mi = /* @__PURE__ */ X({
+}), Si = /* @__PURE__ */ X({
   __name: "Trackhead",
   props: {
     node: {}
   },
   setup(o) {
-    return (e, t) => ($(), R("div", {
+    return (e, t) => (O(), R("div", {
       class: "mce-trackhead",
       style: q({
         height: `var(--timeline-track-height__${o.node.meta.inEditorIs}, 22px)`
       })
     }, K(o.node.meta.inEditorIs), 5));
   }
-}), zi = { class: "mce-timeline__toolbar" }, Oi = { class: "mce-timeline__main" }, $i = { class: "mce-timeline__left" }, Ii = { class: "mce-timeline__left-wrapper" }, Fi = { class: "mce-timeline__right-wrapper" }, Pi = { class: "mce-timeline__ruler" }, Ni = { class: "mce-timeline__track" }, Ri = 0.02, Bi = /* @__PURE__ */ X({
+}), Mi = { class: "mce-timeline__toolbar" }, zi = { class: "mce-timeline__main" }, $i = { class: "mce-timeline__left" }, Oi = { class: "mce-timeline__left-wrapper" }, Ii = { class: "mce-timeline__right-wrapper" }, Fi = { class: "mce-timeline__ruler" }, Pi = { class: "mce-timeline__track" }, Ni = 0.02, Ri = /* @__PURE__ */ X({
   __name: "Timeline",
   setup(o) {
     const {
@@ -6305,12 +6290,12 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       timeline: s,
       endTime: a,
       selection: r
-    } = 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))) ?? []);
+    } = de(), i = V(1e3 / 30), l = ce("rulerTpl"), c = V(!0), u = V([0, 0]), d = $(() => 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)) {
           z.preventDefault();
-          const E = t.value, C = Math.log(E), m = -z.deltaY * Ri, b = C + m;
+          const E = t.value, C = Math.log(E), m = -z.deltaY * Ni, b = C + m;
           t.value = Math.exp(b);
         }
       } else
@@ -6320,7 +6305,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
         ];
     }
     function h(z) {
-      const I = c.value?.box;
+      const I = l.value?.box;
       if (I) {
         n.value = (z.clientX - I.left + u.value[0]) * t.value;
         const E = (m) => {
@@ -6340,7 +6325,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     }
     let y;
     function f() {
-      l.value = !1;
+      c.value = !1;
       let z;
       function I(E) {
         z !== void 0 && E !== void 0 && s.value.addTime(E - z), z = E, y = requestAnimationFrame(I);
@@ -6348,35 +6333,35 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       I();
     }
     function p() {
-      l.value = !0, y !== void 0 && (cancelAnimationFrame(y), y = void 0);
+      c.value = !0, y !== void 0 && (cancelAnimationFrame(y), y = void 0);
     }
     function _() {
-      l.value ? f() : p();
+      c.value ? f() : p();
     }
-    return we(p), (z, I) => ($(), R("div", {
+    return we(p), (z, I) => (O(), R("div", {
       class: "mce-timeline",
       onWheel: I[0] || (I[0] = Ke(() => {
       }, ["prevent"]))
     }, [
-      F("div", zi, [
+      F("div", Mi, [
         F("div", {
           class: "mce-timeline__play",
           onClick: _
         }, [
           H(Ae, {
-            icon: l.value ? "$play" : "$pause"
+            icon: c.value ? "$play" : "$pause"
           }, null, 8, ["icon"])
         ])
       ]),
-      F("div", Oi, [
+      F("div", zi, [
         F("div", $i, [
-          F("div", Ii, [
+          F("div", Oi, [
             F("div", {
               style: q({
                 transform: `translateY(${u.value[1]}px)`
               })
             }, [
-              ($(!0), R(se, null, _e(d.value, (E, C) => ($(), oe(Mi, {
+              (O(!0), R(se, null, _e(d.value, (E, C) => (O(), oe(Si, {
                 key: C,
                 node: E
               }, null, 8, ["node"]))), 128))
@@ -6388,8 +6373,8 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           onWheel: g,
           onMousedown: h
         }, [
-          F("div", Fi, [
-            F("div", Pi, [
+          F("div", Ii, [
+            F("div", Fi, [
               H(ft, {
                 ref: "rulerTpl",
                 zoom: 1 / S(t) * i.value,
@@ -6400,16 +6385,16 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
                 "label-format": v
               }, null, 8, ["zoom", "position"])
             ]),
-            F("div", Ni, [
+            F("div", Pi, [
               F("div", {
                 style: q({
                   width: `${S(a) / S(t)}px`,
                   transform: `translate(${u.value[0]}px, ${u.value[1]}px)`
                 })
               }, [
-                ($(!0), R(se, null, _e(d.value, (E, C) => ($(), oe(Si, { key: C }, {
+                (O(!0), R(se, null, _e(d.value, (E, C) => (O(), oe(Ai, { key: C }, {
                   default: ne(() => [
-                    H(Ti, {
+                    H(Ei, {
                       node: E,
                       "ms-per-px": S(t),
                       active: S(r).some((m) => m.equal(E)),
@@ -6420,7 +6405,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
                 }, 1024))), 128))
               ], 4)
             ]),
-            H(_i, {
+            H(xi, {
               style: q({
                 transform: `translate(${u.value[0] + Math.ceil(S(n) / S(t))}px, 0px)`
               })
@@ -6430,19 +6415,19 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       ])
     ], 32));
   }
-}), Li = ["data-pixel-ratio"], Di = {
+}), Bi = ["data-pixel-ratio"], Li = {
   ref: "canvasTpl",
   class: "mce-editor__canvas"
-}, Vi = {
+}, Di = {
   ref: "overlayContainerTpl",
   class: "mce-editor__overlay-container"
-}, sr = /* @__PURE__ */ X({
+}, or = /* @__PURE__ */ X({
   __name: "EditorLayout",
   props: {
-    ...Gs({
-      resizeStrategy: Ws,
-      activeStrategy: Ks,
-      hoverStrategy: Js
+    ...qs({
+      resizeStrategy: Gs,
+      activeStrategy: Ws,
+      hoverStrategy: Ks
     }),
     editor: Le
   },
@@ -6450,13 +6435,13 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
   setup(o, { emit: e }) {
     const t = o, n = e;
     let s;
-    t.editor ? s = Ls(t.editor) : s = de(), De(mn, Us());
+    t.editor ? s = Bs(t.editor) : s = de(), De(mn, js());
     const {
       config: a,
       drawboardDom: r,
       renderEngine: i,
-      camera: c,
-      bindRenderCanvas: l,
+      camera: l,
+      bindRenderCanvas: c,
       hoverElement: u,
       state: d,
       setCursor: g,
@@ -6469,15 +6454,15 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       drawboardAabb: z,
       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)
+    Hs({
+      attach: $(() => E.value)
     }), Ht(C, (A) => {
       const { width: N, height: L } = A[0].contentRect;
       i.value.resize(N, L);
     }), gt(() => {
       i.value.on("pointerdown", T), i.value.on("pointermove", M), i.value.on("pointerover", P);
     }), He(() => {
-      l(C.value, r.value);
+      c(C.value, r.value);
     }), we(() => {
       i.value.off("pointerdown", T), i.value.off("pointermove", M), i.value.off("pointerover", P);
     });
@@ -6503,7 +6488,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       u.value = L, g(N);
     }
     function T(A) {
-      if (A.srcElement !== r.value && A.srcElement.dataset?.pointerdown_to_drawboard === void 0 || c.value.spaceKey || ![0, 2].includes(A.button))
+      if (A.srcElement !== r.value && A.srcElement.dataset?.pointerdown_to_drawboard === void 0 || l.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;
@@ -6577,7 +6562,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
       i.value.on("pointermove", J), document.addEventListener("pointermove", me), document.addEventListener("pointerup", ue);
     }
     function M(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));
+      A.srcElement === r.value && (I.value = { x: A.clientX, y: A.clientY }, !(l.value.grabbing || A.button === 1 || d.value && d.value !== "typing") && w(A));
     }
     function P() {
       I.value = void 0, u.value = void 0, g(void 0);
@@ -6585,10 +6570,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     function B() {
       r.value && (r.value.scrollLeft && (r.value.scrollLeft = 0), r.value.scrollTop && (r.value.scrollTop = 0));
     }
-    return (A, N) => ($(), oe(ja, { class: "mce-editor" }, {
+    return (A, N) => (O(), oe(Va, { class: "mce-editor" }, {
       default: ne(() => [
-        H(Va),
-        H(Xa, null, {
+        H(Da),
+        H(Ua, null, {
           default: ne(() => [
             F("div", {
               ref_key: "drawboardDom",
@@ -6600,13 +6585,13 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
               onWheel: N[1] || (N[1] = Ke(() => {
               }, ["prevent"]))
             }, [
-              F("canvas", Di, null, 512),
-              H(wi, { ref: "textEditorTpl" }, null, 512),
-              H(Qs),
-              H(ka),
-              H(wa),
-              H(ya),
-              H(Da, {
+              F("canvas", Li, null, 512),
+              H(bi, { ref: "textEditorTpl" }, null, 512),
+              H(Zs),
+              H(_a),
+              H(ba),
+              H(va),
+              H(La, {
                 ref: "selectorTpl",
                 "selected-area": k.value,
                 "resize-strategy": S(p)[0] ? t.resizeStrategy(S(p)[0]) : void 0
@@ -6619,8 +6604,8 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
                 ]),
                 _: 3
               }, 8, ["selected-area", "resize-strategy"]),
-              S(a).scrollbar ? ($(), oe($a, { key: 0 })) : ee("", !0),
-              A.$slots.floatbar ? ($(), oe(ga, {
+              S(a).scrollbar ? (O(), oe($a, { key: 0 })) : ee("", !0),
+              A.$slots.floatbar ? (O(), oe(ya, {
                 key: 1,
                 target: S(d) === "typing" ? b.value?.textEditor : m.value?.transformable?.$el
               }, {
@@ -6629,11 +6614,11 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
                 ]),
                 _: 3
               }, 8, ["target"])) : ee("", !0),
-              H(pa),
-              H(xa),
-              S(a).ruler ? ($(), oe(Ma, { key: 2 })) : ee("", !0),
+              H(fa),
+              H(wa),
+              S(a).ruler ? (O(), oe(Sa, { key: 2 })) : ee("", !0),
               Q(A.$slots, "drawboard")
-            ], 40, Li)
+            ], 40, Bi)
           ]),
           _: 3
         }),
@@ -6645,7 +6630,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           size: 24
         }, {
           default: ne(() => [
-            H(bi)
+            H(gi)
           ]),
           _: 1
         }, 8, ["modelValue"]),
@@ -6656,18 +6641,18 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
           size: 160
         }, {
           default: ne(() => [
-            H(Bi)
+            H(Ri)
           ]),
           _: 1
         }, 8, ["modelValue"]),
-        F("div", Vi, null, 512)
+        F("div", Di, null, 512)
       ]),
       _: 3
     }));
   }
-}), ar = /* @__PURE__ */ X({
+}), sr = /* @__PURE__ */ X({
   __name: "Dialog",
-  props: /* @__PURE__ */ $e({
+  props: /* @__PURE__ */ Oe({
     ...qe()
   }, {
     modelValue: { type: Boolean },
@@ -6675,7 +6660,7 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
   }),
   emits: ["update:modelValue"],
   setup(o, { expose: e }) {
-    const t = o, n = ke(o, "modelValue"), s = ce("overlayTpl"), a = O(() => ({
+    const t = o, n = ke(o, "modelValue"), s = ce("overlayTpl"), a = $(() => ({
       onClick: () => n.value = !0
     }));
     function r() {
@@ -6684,19 +6669,19 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
     return e({
       isActive: n,
       updateLocation: r
-    }), (i, c) => ($(), oe(ot, {
+    }), (i, l) => (O(), oe(ot, {
       ref: "overlayTpl",
       modelValue: n.value,
-      "onUpdate:modelValue": c[0] || (c[0] = (l) => n.value = l),
+      "onUpdate:modelValue": l[0] || (l[0] = (c) => n.value = c),
       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 }
+      activator: ne((c) => [
+        Q(i.$slots, "activator", $e(c, {
+          props: { ...c.props, ...a.value }
         }))
       ]),
       default: ne(() => [
@@ -6707,10 +6692,10 @@ const Pt = Symbol.for("MceMenuSymbol"), Ae = /* @__PURE__ */ X({
   }
 });
 export {
-  ar as Dialog,
+  sr as Dialog,
   un as Doc,
   Le as Editor,
-  sr as EditorLayout,
+  or as EditorLayout,
   Bt as EditorLayoutItem,
   mn as IconsSymbol,
   It as MceComponentIcon,
@@ -6719,27 +6704,27 @@ export {
   Pt as MceMenuSymbol,
   ht as MceOverlaySymbol,
   dn as MceSvgIcon,
-  ma as Menu,
+  da as Menu,
   ln as Model,
   ft as Ruler,
   Tt as SUPPORTS_CLIPBOARD,
   Rt as Scrollbar,
-  La as Transformable,
+  Ba as Transformable,
   Qt as USER_AGENT,
   nt as Workspace,
   Me as boundingBoxToStyle,
-  er as consoleError,
+  Qi as consoleError,
   uo as consoleWarn,
   Ge as convertToUnit,
-  Us as createIcons,
+  js as createIcons,
   dt as createImageElement,
-  ia as createLayout,
+  aa as createLayout,
   ut as createTextElement,
-  Ks as defaultActiveStrategy,
-  Js as defaultHoverStrategy,
-  Ws as defaultResizeStrategy,
-  or as defineMixin,
-  nr as definePlugin,
+  Ws as defaultActiveStrategy,
+  Ks as defaultHoverStrategy,
+  Gs as defaultResizeStrategy,
+  nr as defineMixin,
+  tr as definePlugin,
   je as findChildrenWithProvide,
   ho as getImageSizeFromUrl,
   go as getRandomValues,
@@ -6754,24 +6739,24 @@ export {
   Et as isPointInsideAabb,
   mo as isWindows,
   _t as makeIconProps,
-  na as makeLayoutItemProps,
-  ta as makeLayoutProps,
+  ta as makeLayoutItemProps,
+  ea as makeLayoutProps,
   qe as makeMceOverlayProps,
-  Gs as makeMceStrategyProps,
-  Qi as minBoundingBox,
+  qs as makeMceStrategyProps,
+  Zi as minBoundingBox,
   os as mixins,
-  Bs as plugins,
+  Rs as plugins,
   tn as propsFactory,
-  Ls as provideEditor,
-  Ys as provideOverlay,
+  Bs as provideEditor,
+  Hs as provideOverlay,
   vo as refElement,
   yo as templateRef,
   bo as uint32,
   de as useEditor,
-  Ds as useIcon,
-  oa as useLayout,
-  sa as useLayoutItem,
-  qs as useOverlay,
-  ea as useResizeObserver,
-  tr as uuidv4
+  Ls as useIcon,
+  na as useLayout,
+  oa as useLayoutItem,
+  Ys as useOverlay,
+  Qs as useResizeObserver,
+  er as uuidv4
 };