mce 0.15.32 → 0.15.33

package/dist/index.js

@@ -1072,6 +1072,7 @@ const en = {
   "constrainToAxis": "Constrain to axis",
   "loading": "Loading",
   "drawing": "Drawing",
+  "exporting": "Exporting",
   "selecting": "Selecting",
   "selectObject": "Select object",
   "commitChanges": "Commit changes",
@@ -1177,7 +1178,9 @@ const en = {
   "alignTop": "Align top",
   "alignVerticalCenter": "Align vertical center",
   "alignBottom": "Align bottom",
-  "exporting": "Exporting"
+  "distributeHorizontalSpacing": "Distribute horizontal spacing",
+  "distributeVerticalSpacing": "Distribute vertical spacing",
+  "tidyUp": "Tidy up"
 };
 const zhHans = {
   "cancel": "取消",
@@ -1290,7 +1293,10 @@ const zhHans = {
   "alignRight": "贴右侧",
   "alignTop": "贴顶部",
   "alignVerticalCenter": "垂直居中",
-  "alignBottom": "贴底部"
+  "alignBottom": "贴底部",
+  "distributeHorizontalSpacing": "水平分布间距",
+  "distributeVerticalSpacing": "垂直分布间距",
+  "tidyUp": "整理"
 };
 const _0_locale = defineMixin((editor, options) => {
   const {
@@ -1688,11 +1694,12 @@ function parseKey(key) {
     switch (v) {
       case "Meta":
       case "Control":
+      case "Ctrl":
       case "CommandOrControl":
+      case "CmdOrCtrl":
         return "CmdOrCtrl";
       case "Alt":
       case "Shift":
-      case "CmdOrCtrl":
         return v;
       default:
         return String.fromCharCode(getCharCode(v));
@@ -4276,7 +4283,7 @@ const _arrange = definePlugin((editor) => {
     selection,
     getAabb
   } = editor;
-  function zOrder2(target, type) {
+  function zOrder2(type, target = selection.value) {
     const els = Array.isArray(target) ? target : [target];
     els.forEach((el) => {
       const parent = el.getParent();
@@ -4349,30 +4356,78 @@ const _arrange = definePlugin((editor) => {
       }
     });
   }
-  function bringToFront(target = selection.value) {
-    target && zOrder2(target, "bringToFront");
-  }
-  function bringForward(target = selection.value[0]) {
-    target && zOrder2(target, "bringForward");
-  }
-  function sendBackward(target = selection.value[0]) {
-    target && zOrder2(target, "sendBackward");
-  }
-  function sendToBack(target = selection.value) {
-    target && zOrder2(target, "sendToBack");
-  }
-  function distributeSpacing(_direction) {
+  function distributeSpacing(direction) {
+    const els = elementSelection.value;
+    if (els.length < 2) {
+      return;
+    }
+    const items = els.map((el) => {
+      return {
+        el,
+        aabb: el.getGlobalAabb()
+      };
+    });
+    const count2 = items.length;
+    switch (direction) {
+      case "vertical": {
+        const sorted = [...items].sort((a, b) => a.aabb.y - b.aabb.y);
+        const start = sorted[0];
+        const end = sorted[count2 - 1];
+        const startEdge = start.aabb.y;
+        const endEdge = end.aabb.y + end.aabb.height;
+        const totalSize = sorted.reduce((sum, node) => sum + node.aabb.height, 0);
+        const totalSpacing = endEdge - startEdge - totalSize;
+        const gapSize = totalSpacing / (count2 - 1);
+        let current = start.aabb.y + start.aabb.height;
+        for (let i = 1; i < count2 - 1; i++) {
+          const item = sorted[i];
+          current += gapSize;
+          let top = current;
+          const parentAabb = item.el.getParent()?.getGlobalAabb?.();
+          if (parentAabb) {
+            top = top - parentAabb.top;
+          }
+          item.el.style.top = top;
+          current += item.aabb.height;
+        }
+        break;
+      }
+      case "horizontal": {
+        const sorted = [...items].sort((a, b) => a.aabb.x - b.aabb.x);
+        const start = sorted[0];
+        const end = sorted[count2 - 1];
+        const startEdge = start.aabb.x;
+        const endEdge = end.aabb.x + end.aabb.width;
+        const totalSize = sorted.reduce((sum, node) => sum + node.aabb.width, 0);
+        const totalSpacing = endEdge - startEdge - totalSize;
+        const gapSize = totalSpacing / (count2 - 1);
+        let current = start.aabb.x + start.aabb.width;
+        for (let i = 1; i < count2 - 1; i++) {
+          const item = sorted[i];
+          current += gapSize;
+          let left = current;
+          const parentAabb = item.el.getParent()?.getGlobalAabb?.();
+          if (parentAabb) {
+            left = left - parentAabb.left;
+          }
+          item.el.style.left = left;
+          current += item.aabb.width;
+        }
+        break;
+      }
+    }
   }
   function tidyUp() {
+    distributeSpacing("vertical");
   }
   return {
     name: "mce:arrange",
     commands: [
       { command: "zOrder", handle: zOrder2 },
-      { command: "bringForward", handle: bringForward },
-      { command: "sendBackward", handle: sendBackward },
-      { command: "bringToFront", handle: bringToFront },
-      { command: "sendToBack", handle: sendToBack },
+      { command: "bringForward", handle: () => zOrder2("bringForward") },
+      { command: "sendBackward", handle: () => zOrder2("sendBackward") },
+      { command: "bringToFront", handle: () => zOrder2("bringToFront") },
+      { command: "sendToBack", handle: () => zOrder2("sendToBack") },
       { command: "align", handle: align },
       { command: "alignLeft", handle: () => align("left") },
       { command: "alignRight", handle: () => align("right") },
@@ -4381,8 +4436,8 @@ const _arrange = definePlugin((editor) => {
       { command: "alignHorizontalCenter", handle: () => align("horizontal-center") },
       { command: "alignVerticalCenter", handle: () => align("vertical-center") },
       { command: "distributeSpacing", handle: distributeSpacing },
-      { command: "distributeHorizontalSpacing", handle: () => distributeSpacing() },
-      { command: "distributeVerticalSpacing", handle: () => distributeSpacing() },
+      { command: "distributeHorizontalSpacing", handle: () => distributeSpacing("horizontal") },
+      { command: "distributeVerticalSpacing", handle: () => distributeSpacing("vertical") },
       { command: "tidyUp", handle: tidyUp }
     ],
     hotkeys: [
@@ -4529,11 +4584,11 @@ const _copyAs = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$n = {
+const _hoisted_1$r = {
   key: 0,
   class: "mce-drawing__tip"
 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
   setup(__props) {
     const {
@@ -4551,7 +4606,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           top: `${unref(drawboardPointer).y}px`
         })
       }, [
-        unref(activeDrawingTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$n, toDisplayString(unref(t)(unref(activeDrawingTool).name)), 1)) : createCommentVNode("", true)
+        unref(activeDrawingTool)?.name ? (openBlock(), createElementBlock("div", _hoisted_1$r, toDisplayString(unref(t)(unref(activeDrawingTool).name)), 1)) : createCommentVNode("", true)
       ], 4)) : createCommentVNode("", true);
     };
   }
@@ -4563,7 +4618,7 @@ const _drawingTool = definePlugin((editor) => {
   return {
     name: "mce:drawingTool",
     components: [
-      { name: "drawing", type: "overlay", component: _sfc_main$D }
+      { name: "drawing", type: "overlay", component: _sfc_main$E }
     ],
     commands: [
       { command: "setActiveDrawingTool", handle: (val) => setActiveDrawingTool(val) }
@@ -4860,7 +4915,7 @@ const ComponentIcon = defineComponent({
     };
   }
 });
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     disabled: Boolean,
@@ -5518,7 +5573,7 @@ const defaultHoverStrategy = (context) => {
   }
   return element.findAncestor(cb);
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "Frame",
   props: {
     "modelValue": { required: true },
@@ -5593,19 +5648,22 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = { class: "mce-frames" };
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "Frames",
   setup(__props) {
     const {
       frames
     } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
-        return openBlock(), createBlock(_sfc_main$B, {
-          key,
-          "model-value": frame
-        }, null, 8, ["model-value"]);
-      }), 128);
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(frames), (frame, key) => {
+          return openBlock(), createBlock(_sfc_main$C, {
+            key,
+            "model-value": frame
+          }, null, 8, ["model-value"]);
+        }), 128))
+      ]);
     };
   }
 });
@@ -5660,7 +5718,7 @@ const _frame = definePlugin((editor) => {
       { command: "setActiveDrawingTool:frame", key: "F" }
     ],
     components: [
-      { type: "overlay", component: _sfc_main$A, order: "before" }
+      { type: "overlay", component: _sfc_main$B, order: "before" }
     ]
   };
 });
@@ -5739,8 +5797,8 @@ const _history = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$m = ["data-name"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = ["data-name"];
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "Hover",
   setup(__props) {
     const {
@@ -5760,7 +5818,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           borderRadius: `${(unref(hoverElement).style.borderRadius ?? 0) * unref(camera).zoom.x}px`,
           ...hoverElementObb.value.toCssStyle()
         })
-      }, null, 12, _hoisted_1$m)) : createCommentVNode("", true);
+      }, null, 12, _hoisted_1$p)) : createCommentVNode("", true);
     };
   }
 });
@@ -5768,7 +5826,7 @@ const _hover = definePlugin(() => {
   return {
     name: "mce:hover",
     components: [
-      { type: "overlay", component: _sfc_main$z, order: "before" }
+      { type: "overlay", component: _sfc_main$A, order: "before" }
     ]
   };
 });
@@ -6047,7 +6105,7 @@ const _json = definePlugin((editor) => {
     ]
   };
 });
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "Btn",
   props: {
     active: { type: Boolean },
@@ -6066,10 +6124,10 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = ["data-id"];
-const _hoisted_2$c = { class: "mce-layer__content" };
+const _hoisted_1$o = ["data-id"];
+const _hoisted_2$d = { class: "mce-layer__content" };
 const _hoisted_3$b = { class: "mce-layer__prepend" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
     inheritAttrs: false
@@ -6292,9 +6350,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         }, [
           _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
           _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
-          createElementVNode("div", _hoisted_2$c, [
+          createElementVNode("div", _hoisted_2$d, [
             createElementVNode("div", _hoisted_3$b, [
-              childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
+              childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$D), {
                 key: 0,
                 class: "mce-layer__arrow",
                 icon: "$arrowRight",
@@ -6307,7 +6365,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               class: "mce-layer__thumbnail",
               onDblclick: onDblclickThumbnail
             }, [
-              createVNode(unref(_sfc_main$C), { icon: thumbnailIcon.value }, null, 8, ["icon"])
+              createVNode(unref(_sfc_main$D), { icon: thumbnailIcon.value }, null, 8, ["icon"])
             ], 32),
             createElementVNode("div", {
               class: "mce-layer__name",
@@ -6340,7 +6398,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }])
             }, [
               props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$y, {
+                Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$z, {
                   key: 0,
                   icon: "",
                   class: "mce-layer__btn mce-layer__btn--show",
@@ -6351,12 +6409,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   }), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), { icon: "$collapse" })
+                    createVNode(unref(_sfc_main$D), { icon: "$collapse" })
                   ]),
                   _: 1
                 })) : createCommentVNode("", true)
               ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createVNode(_sfc_main$y, {
+                createVNode(_sfc_main$z, {
                   icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": unref(isLock)(props.node)
@@ -6364,13 +6422,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), {
+                    createVNode(unref(_sfc_main$D), {
                       icon: unref(isLock)(props.node) ? "$lock" : "$unlock"
                     }, null, 8, ["icon"])
                   ]),
                   _: 1
                 }, 8, ["class"]),
-                createVNode(_sfc_main$y, {
+                createVNode(_sfc_main$z, {
                   icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": !unref(isVisible)(props.node)
@@ -6378,7 +6436,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), {
+                    createVNode(unref(_sfc_main$D), {
                       icon: unref(isVisible)(props.node) ? "$visible" : "$unvisible"
                     }, null, 8, ["icon"])
                   ]),
@@ -6387,7 +6445,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               ], 64))
             ], 2)
           ])
-        ], 46, _hoisted_1$l),
+        ], 46, _hoisted_1$o),
         opened.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(childrenLength.value, (i) => {
           return openBlock(), createBlock(_component_MceLayer, {
             key: i,
@@ -6400,9 +6458,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = { class: "mce-layers" };
-const _hoisted_2$b = { class: "mce-layers__wrapper" };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = { class: "mce-layers" };
+const _hoisted_2$c = { class: "mce-layers__wrapper" };
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "Layers",
   setup(__props) {
     const {
@@ -6446,9 +6504,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       layerScrollIntoView();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        createElementVNode("div", _hoisted_2$b, [
-          createVNode(_sfc_main$x, {
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+        createElementVNode("div", _hoisted_2$c, [
+          createVNode(_sfc_main$y, {
             root: true,
             node: unref(root),
             opened: true
@@ -6462,7 +6520,7 @@ const _layers = definePlugin(() => {
   return {
     name: "mce:layers",
     components: [
-      { name: "layers", type: "panel", position: "float", component: _sfc_main$w }
+      { name: "layers", type: "panel", position: "float", component: _sfc_main$x }
     ]
   };
 });
@@ -6473,19 +6531,19 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$v = {};
-const _hoisted_1$j = {
+const _sfc_main$w = {};
+const _hoisted_1$m = {
   class: "mce-made-with",
   href: "https://github.com/qq15725/mce",
   target: "_blank"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("a", _hoisted_1$j, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("a", _hoisted_1$m, [..._cache[0] || (_cache[0] = [
     createElementVNode("div", null, "MADE WITH", -1),
     createElementVNode("div", null, "MCE", -1)
   ])]);
 }
-const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render]]);
+const MadeWith = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render]]);
 const _madeWith = definePlugin((editor) => {
   const {
     config,
@@ -6503,7 +6561,7 @@ const _madeWith = definePlugin((editor) => {
     ]
   };
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -6629,8 +6687,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = ["onMouseenter"];
-const _hoisted_2$a = ["onClick"];
+const _hoisted_1$l = ["onMouseenter"];
+const _hoisted_2$b = ["onClick"];
 const _hoisted_3$a = {
   key: 0,
   class: "mce-list-item__checked"
@@ -6648,7 +6706,7 @@ const _hoisted_7$3 = {
   key: 3,
   class: "mce-list-item__append"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceMenu"
   },
@@ -6731,7 +6789,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_MceMenu = resolveComponent("MceMenu");
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isActive.value = $event),
@@ -6778,7 +6836,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
                     hasPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_3$a, [
-                      item.checked ? (openBlock(), createBlock(unref(_sfc_main$C), {
+                      item.checked ? (openBlock(), createBlock(unref(_sfc_main$D), {
                         key: 0,
                         icon: "$check"
                       })) : createCommentVNode("", true)
@@ -6796,13 +6854,13 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true),
                     item.children?.length || _ctx.$slots.append ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
                       renderSlot(_ctx.$slots, "append", { item }),
-                      item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$C), {
+                      item.children?.length ? (openBlock(), createBlock(unref(_sfc_main$D), {
                         key: 0,
                         icon: "$arrowRight"
                       })) : createCommentVNode("", true)
                     ])) : createCommentVNode("", true)
-                  ], 10, _hoisted_2$a)
-                ], 40, _hoisted_1$i))
+                  ], 10, _hoisted_2$b)
+                ], 40, _hoisted_1$l))
               ], 64);
             }), 128)),
             opened.value > -1 && __props.items?.[opened.value]?.children?.length ? (openBlock(), createBlock(_component_MceMenu, {
@@ -6853,7 +6911,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "ContextMenu",
   props: {
     "modelValue": { type: Boolean },
@@ -6939,7 +6997,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$t, {
+      return openBlock(), createBlock(_sfc_main$u, {
         ref: "menuTplRef",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -7166,7 +7224,10 @@ const _menu = definePlugin((editor, options) => {
   const layerPositionMenu = computed(() => ({
     key: "layerPosition",
     children: [
-      ...alignMenus.value
+      ...alignMenus.value,
+      { key: "distributeHorizontalSpacing", disabled: !hasSelected.value },
+      { key: "distributeVerticalSpacing", disabled: !hasSelected.value },
+      { key: "tidyUp", disabled: !hasSelected.value }
     ]
   }));
   const mainMenu = computed(() => [
@@ -7226,7 +7287,7 @@ const _menu = definePlugin((editor, options) => {
   return {
     name: "mce:menu",
     components: [
-      { type: "overlay", component: _sfc_main$s }
+      { type: "overlay", component: _sfc_main$t }
     ]
   };
 });
@@ -7290,10 +7351,10 @@ const _new = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$h = { class: "mce-node-creator" };
-const _hoisted_2$9 = { class: "mce-node-creator__tree" };
+const _hoisted_1$k = { class: "mce-node-creator" };
+const _hoisted_2$a = { class: "mce-node-creator__tree" };
 const _hoisted_3$9 = { class: "mce-node-creator__actions" };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "NodeCreator",
   props: {
     "isActive": { type: Boolean },
@@ -7376,8 +7437,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       ];
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        createElementVNode("div", _hoisted_2$a, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(tree.value, (node, index) => {
             return openBlock(), createBlock(Node2, {
               key: index,
@@ -7386,13 +7447,13 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         createElementVNode("div", _hoisted_3$9, [
-          createVNode(_sfc_main$y, { onClick: cancel }, {
+          createVNode(_sfc_main$z, { onClick: cancel }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(t)("cancel")), 1)
             ]),
             _: 1
           }),
-          createVNode(_sfc_main$y, { onClick: create }, {
+          createVNode(_sfc_main$z, { onClick: create }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(t)("create")), 1)
             ]),
@@ -7412,7 +7473,7 @@ const _node = definePlugin((editor) => {
   return {
     name: "mce:node",
     components: [
-      { name: "nodeCreator", type: "panel", position: "float", component: _sfc_main$r }
+      { name: "nodeCreator", type: "panel", position: "float", component: _sfc_main$s }
     ],
     commands: [
       { command: "addSubNode", handle: () => config.value.nodeCreator = true }
@@ -11545,16 +11606,16 @@ const _rotate = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$g = {
+const _hoisted_1$j = {
   key: 0,
   class: "mce-tooltip__arrow"
 };
-const _hoisted_2$8 = { class: "mce-tooltip__content" };
+const _hoisted_2$9 = { class: "mce-tooltip__content" };
 const _hoisted_3$8 = {
   key: 0,
   class: "mce-tooltip__kbd"
 };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "Tooltip",
   props: /* @__PURE__ */ mergeModels({
     ...makeMceOverlayProps({
@@ -11585,7 +11646,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -11598,8 +11659,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }, createSlots({
         default: withCtx(() => [
           isActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            __props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$g)) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_2$8, [
+            __props.showArrow ? (openBlock(), createElementBlock("div", _hoisted_1$j)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_2$9, [
               renderSlot(_ctx.$slots, "default"),
               _ctx.$slots.kbd ? (openBlock(), createElementBlock("div", _hoisted_3$8, [
                 renderSlot(_ctx.$slots, "kbd")
@@ -11626,10 +11687,10 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = ["width", "height"];
-const _hoisted_2$7 = ["onDblclick", "onMousedown", "onMousemove"];
+const _hoisted_1$i = ["width", "height"];
+const _hoisted_2$8 = ["onDblclick", "onMousedown", "onMousemove"];
 const _hoisted_3$7 = { style: { "font-size": "0.75rem", "text-wrap": "nowrap" } };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -11885,7 +11946,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             class: "mce-ruler__canvas",
             width: props.size,
             height: props.size
-          }, null, 8, _hoisted_1$f)
+          }, null, 8, _hoisted_1$i)
         ], 16)), [
           [unref(vResizeObserver), unref(resize)]
         ]),
@@ -11907,9 +11968,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             onMousedown: ($event) => onReflineMousedown($event, index),
             onMousemove: () => tipText.value = `${item}`,
             onMouseleave: onLeave
-          }, null, 46, _hoisted_2$7);
+          }, null, 46, _hoisted_2$8);
         }), 128)),
-        createVNode(_sfc_main$q, {
+        createVNode(_sfc_main$r, {
           "model-value": !!tipText.value,
           target: tipPos.value,
           offset: 24
@@ -11923,8 +11984,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "mce-rulers" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = { class: "mce-rulers" };
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -11935,8 +11996,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       selectionAabbInDrawboard
     } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createVNode(_sfc_main$p, {
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+        createVNode(_sfc_main$q, {
           refline: "",
           zoom: unref(camera).zoom.x,
           position: unref(camera).position.x,
@@ -11944,7 +12005,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           axis: "",
           size: 16
         }, null, 8, ["zoom", "position", "selected"]),
-        createVNode(_sfc_main$p, {
+        createVNode(_sfc_main$q, {
           refline: "",
           zoom: unref(camera).zoom.y,
           position: unref(camera).position.y,
@@ -11969,7 +12030,7 @@ const _ruler = definePlugin((editor) => {
     components: [
       {
         type: "overlay",
-        component: _sfc_main$o,
+        component: _sfc_main$p,
         ignore: () => !config.value.ruler
       }
     ]
@@ -12006,11 +12067,11 @@ const _saveAs = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$d = {
+const _hoisted_1$g = {
   ref: "trackTplRef",
   class: "mce-scrollbar__track"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "Scrollbar",
   props: /* @__PURE__ */ mergeModels({
     length: {},
@@ -12097,7 +12158,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           [props.vertical ? "top" : "left"]: `${props.offset}px`
         })
       }, [
-        createElementVNode("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_1$g, [
           createElementVNode("div", {
             ref: "thumbTplRef",
             class: normalizeClass(["mce-scrollbar__thumb", {
@@ -12117,7 +12178,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "mce-scrollbars" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -12133,19 +12195,19 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       rootAabb
     } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$n, mergeProps(props, {
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createVNode(_sfc_main$o, mergeProps(props, {
           modelValue: unref(camera).position.y,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(camera).position.y = $event),
           vertical: "",
           length: unref(rootAabb).height * unref(camera).zoom.y
         }), null, 16, ["modelValue", "length"]),
-        createVNode(_sfc_main$n, mergeProps(props, {
+        createVNode(_sfc_main$o, mergeProps(props, {
           modelValue: unref(camera).position.x,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(camera).position.x = $event),
           length: unref(rootAabb).width * unref(camera).zoom.x
         }), null, 16, ["modelValue", "length"])
-      ], 64);
+      ]);
     };
   }
 });
@@ -12164,7 +12226,7 @@ const _scroll = definePlugin((editor) => {
     components: [
       {
         type: "overlay",
-        component: _sfc_main$m,
+        component: _sfc_main$n,
         ignore: () => !config.value.scrollbar
       }
     ]
@@ -12200,7 +12262,7 @@ const _scroll = definePlugin((editor) => {
     // },
   };
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "GoBackSelectedArea",
   setup(__props) {
     const {
@@ -12218,7 +12280,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         class: "mce-back-selected-aera",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
-        createVNode(unref(_sfc_main$C), { icon: "$gps" }),
+        createVNode(unref(_sfc_main$D), { icon: "$gps" }),
         createElementVNode("span", null, toDisplayString(unref(t)("goBackSelectedArea")), 1)
       ])) : createCommentVNode("", true);
     };
@@ -12407,7 +12469,7 @@ const _selection = definePlugin((editor) => {
       { command: "lockOrUnlockSelection", key: "Shift+CmdOrCtrl+L" }
     ],
     components: [
-      { type: "overlay", component: _sfc_main$l }
+      { type: "overlay", component: _sfc_main$m }
     ],
     events: {
       selectionTransforming: ({ elements }) => {
@@ -12694,14 +12756,16 @@ const _slice = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$c = { class: "mce-smart-guides" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$e = { class: "mce-smart-guides" };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "SmartGuides",
+  props: {
+    snapLines: {}
+  },
   setup(__props) {
-    const { snapLines } = useEditor();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(snapLines), (item, key) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.snapLines, (item, key) => {
           return openBlock(), createElementBlock("div", {
             key,
             class: normalizeClass(item.class.map((v) => `mce-smart-guides__${v}`)),
@@ -13998,14 +14062,10 @@ const _smartGuides = definePlugin((editor) => {
   }
   Object.assign(editor, {
     snapThreshold,
-    snapLines,
     getSnapPoints
   });
   return {
     name: "mce:smartGuides",
-    components: [
-      { type: "overlay", component: _sfc_main$k }
-    ],
     events: {
       selectionTransforming: ({ handle }) => {
         if (handle === "move") {
@@ -14015,7 +14075,13 @@ const _smartGuides = definePlugin((editor) => {
       selectionTransformEnd: () => {
         linePairs.value = [];
       }
-    }
+    },
+    components: [
+      {
+        type: "overlay",
+        component: () => h(_sfc_main$l, { snapLines: snapLines.value })
+      }
+    ]
   };
 });
 function createLine(pos, type, box) {
@@ -14044,1819 +14110,2006 @@ function flipType(type) {
 function isLeftTopLine(line) {
   return ["vt", "hl"].includes(line.type);
 }
-const _smartSelection = definePlugin((_editor) => {
-  return {
-    name: "mce:smartSelection"
-  };
-});
-const _state = definePlugin((editor) => {
-  const {
-    state
-  } = editor;
-  return {
-    name: "mce:state",
-    commands: [
-      { command: "setState", handle: (val) => state.value = val }
-    ],
-    hotkeys: [
-      { command: "setState:move", key: "V" },
-      { command: "setState:hand", key: "H" }
-    ]
-  };
-});
-const _hoisted_1$b = { class: "progress-indicator" };
-const _hoisted_2$6 = {
-  key: 0,
-  class: "progress-indicator__status"
+const _hoisted_1$d = ["rx", "ry"];
+const _hoisted_2$7 = { "pointer-events": "none" };
+const _hoisted_3$6 = ["x", "y", "width", "height", "aria-label"];
+const _hoisted_4$3 = ["cx", "cy", "r", "aria-label"];
+const _hoisted_5$2 = ["x", "y", "width", "height", "aria-label", "rx", "ry"];
+const _hoisted_6$2 = ["transform"];
+const _hoisted_7$2 = { "pointer-events": "all" };
+const _hoisted_8$1 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
+const _hoisted_9$1 = {
+  "pointer-events": "all",
+  class: "mce-transform-controls__svg-slot"
 };
-const _hoisted_3$6 = { class: "progress-indicator__bar" };
-const _hoisted_4$3 = {
-  key: 1,
-  class: "progress-indicator__bar-indeterminate"
+const _hoisted_10$1 = {
+  key: 0,
+  class: "mce-transform-controls__tip"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  __name: "ProgressIndicator",
-  props: /* @__PURE__ */ mergeModels({
-    label: {},
-    indeterminate: { type: Boolean }
-  }, {
-    "modelValue": { default: 0 },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const progress = useModel(__props, "modelValue");
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        __props.label ? (openBlock(), createElementBlock("span", _hoisted_2$6, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$6, [
-          !__props.indeterminate ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "progress-indicator__bar-fill",
-            style: normalizeStyle$1({ width: `${progress.value * 100}%` })
-          }, null, 4)) : (openBlock(), createElementBlock("div", _hoisted_4$3))
-        ])
-      ]);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  __name: "TransformControls",
+  props: {
+    tag: { default: "div" },
+    modelValue: {},
+    color: {},
+    movable: { type: Boolean, default: true },
+    rotatable: { type: Boolean, default: true },
+    rotator: { type: Boolean },
+    resizable: { type: Boolean, default: true },
+    roundable: { type: Boolean },
+    threshold: { default: 0 },
+    resizeStrategy: {},
+    handleStrategy: {},
+    handleShape: { default: "rect" },
+    hideUi: { type: Boolean },
+    handles: { default: () => [
+      "move",
+      // resize
+      "resize-l",
+      "resize-t",
+      "resize-r",
+      "resize-b",
+      "resize-tl",
+      "resize-tr",
+      "resize-br",
+      "resize-bl",
+      // round
+      "round-tl",
+      "round-tr",
+      "round-bl",
+      "round-br",
+      // rotate
+      "rotate-tl",
+      "rotate-tr",
+      "rotate-bl",
+      "rotate-br"
+    ] },
+    initialSize: { type: Boolean },
+    borderStyle: {},
+    tipFormat: {}
+  },
+  emits: ["update:modelValue", "start", "move", "end"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const cursors = {
+      "rotate-tl": (angle) => createCursor("rotate", 360 + angle),
+      "rotate-tr": (angle) => createCursor("rotate", 90 + angle),
+      "rotate-bl": (angle) => createCursor("rotate", 270 + angle),
+      "rotate-br": (angle) => createCursor("rotate", 180 + angle),
+      "resize-l": (angle) => createCursor("resizeXy", 180 + angle),
+      "resize-t": (angle) => createCursor("resizeXy", 90 + angle),
+      "resize-r": (angle) => createCursor("resizeXy", 180 + angle),
+      "resize-b": (angle) => createCursor("resizeXy", 90 + angle),
+      "resize-tl": (angle) => createCursor("resizeBevel", 90 + angle),
+      "resize-tr": (angle) => createCursor("resizeBevel", 180 + angle),
+      "resize-br": (angle) => createCursor("resizeBevel", 90 + angle),
+      "resize-bl": (angle) => createCursor("resizeBevel", 180 + angle)
     };
-  }
-});
-const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-3b286483"]]);
-const _hoisted_1$a = { class: "mce-statusbar" };
-const _hoisted_2$5 = { class: "mce-statusbar__main" };
-const _hoisted_3$5 = { class: "mce-statusbar__item" };
-const _hoisted_4$2 = { class: "mce-statusbar__kbd" };
-const _hoisted_5$2 = { class: "mce-statusbar__kbd" };
-const _hoisted_6$2 = { class: "mce-statusbar__item" };
-const _hoisted_7$2 = { class: "mce-statusbar__kbd" };
-const _hoisted_8$1 = { class: "mce-statusbar__item" };
-const _hoisted_9$1 = { class: "mce-statusbar__item" };
-const _hoisted_10$1 = { class: "mce-statusbar__kbd" };
-const _hoisted_11$1 = { class: "mce-statusbar__item" };
-const _hoisted_12 = { class: "mce-statusbar__kbd" };
-const _hoisted_13 = { key: 2 };
-const _hoisted_14 = { class: "mce-statusbar__item" };
-const _hoisted_15 = { class: "mce-statusbar__item" };
-const _hoisted_16 = { class: "mce-statusbar__kbd" };
-const _hoisted_17 = { class: "mce-statusbar__item" };
-const _hoisted_18 = { class: "mce-statusbar__item" };
-const _hoisted_19 = { class: "mce-statusbar__kbd" };
-const _hoisted_20 = { class: "mce-statusbar__item" };
-const _hoisted_21 = { class: "mce-statusbar__item" };
-const _hoisted_22 = { class: "mce-statusbar__progress" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  __name: "Statusbar",
-  setup(__props) {
-    const {
-      state,
-      t,
-      getKbd,
-      exporting,
-      exportProgress,
-      selection,
-      isElement
-    } = useEditor();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("div", _hoisted_2$5, [
-          unref(state) === "typing" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createElementVNode("div", _hoisted_3$5, [
-              createElementVNode("span", _hoisted_4$2, toDisplayString(unref(getKbd)("Command")), 1),
-              createElementVNode("span", _hoisted_5$2, toDisplayString(unref(getKbd)("Enter")), 1)
-            ]),
-            _cache[1] || (_cache[1] = createElementVNode("span", null, "/", -1)),
-            createElementVNode("div", _hoisted_6$2, [
-              createElementVNode("span", _hoisted_7$2, toDisplayString(unref(getKbd)("Escape")), 1),
-              createElementVNode("span", null, toDisplayString(unref(t)("commitChanges")), 1)
-            ])
-          ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createElementVNode("div", _hoisted_8$1, [
-              createVNode(unref(_sfc_main$C), { icon: "$mouseRightClick" })
-            ]),
-            _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
-            createElementVNode("div", _hoisted_9$1, [
-              createElementVNode("span", _hoisted_10$1, toDisplayString(unref(getKbd)("Escape")), 1),
-              createElementVNode("span", null, toDisplayString(unref(t)("cancel")), 1)
-            ]),
-            _cache[3] || (_cache[3] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
-            createElementVNode("div", _hoisted_11$1, [
-              createElementVNode("span", _hoisted_12, toDisplayString(unref(getKbd)("Shift")), 1),
-              createElementVNode("span", null, toDisplayString(unref(t)("constrainToAxis")), 1)
-            ])
-          ], 64)) : unref(state) ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(unref(t)(unref(state))), 1)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-            createElementVNode("div", _hoisted_14, [
-              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
-              createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
-            ]),
-            _cache[5] || (_cache[5] = createElementVNode("span", null, " + ", -1)),
-            createElementVNode("div", _hoisted_15, [
-              createElementVNode("span", _hoisted_16, toDisplayString(unref(getKbd)("Shift")), 1),
-              createElementVNode("span", null, toDisplayString(unref(t)("extend")), 1)
-            ]),
-            _cache[6] || (_cache[6] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
-            createElementVNode("div", _hoisted_17, [
-              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
-              createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
-            ]),
-            _cache[7] || (_cache[7] = createElementVNode("span", null, " + ", -1)),
-            createElementVNode("div", _hoisted_18, [
-              createElementVNode("span", _hoisted_19, toDisplayString(unref(getKbd)("Shift")), 1),
-              createElementVNode("span", null, toDisplayString(unref(t)("extend")), 1)
-            ]),
-            _cache[8] || (_cache[8] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
-            createElementVNode("div", _hoisted_20, [
-              createVNode(unref(_sfc_main$C), { icon: "$mouseLeftClick" }),
-              createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
-            ]),
-            unref(selection).length === 1 && unref(isElement)(unref(selection)[0]) && unref(selection)[0].text.isValid() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-              _cache[4] || (_cache[4] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
-              createElementVNode("div", _hoisted_21, [
-                createElementVNode("span", null, toDisplayString(unref(getKbd)("Enter")), 1),
-                createElementVNode("span", null, toDisplayString(unref(t)("startTyping")), 1)
-              ])
-            ], 64)) : createCommentVNode("", true)
-          ], 64))
-        ]),
-        createElementVNode("div", _hoisted_22, [
-          unref(exporting) ? (openBlock(), createBlock(ProgressIndicator, {
-            key: 0,
-            modelValue: unref(exportProgress),
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(exportProgress) ? exportProgress.value = $event : null),
-            label: unref(t)("exporting")
-          }, null, 8, ["modelValue", "label"])) : createCommentVNode("", true)
-        ])
-      ]);
-    };
-  }
-});
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-a1f0e31b"]]);
-const _statusbar = definePlugin((editor) => {
-  const {
-    registerConfig
-  } = editor;
-  registerConfig("statusbar", false);
-  return {
-    name: "mce:statusbar",
-    components: [
-      {
-        name: "statusbar",
-        type: "panel",
-        position: "bottom",
-        size: 24,
-        component: Statusbar
-      }
-    ]
-  };
-});
-const _text = definePlugin((editor) => {
-  const {
-    t,
-    addElement,
-    setActiveDrawingTool
-  } = editor;
-  const addTextElement = (options = {}) => {
-    const {
-      content = t("doubleClickEditText"),
-      style,
-      ...restOptions
-    } = options;
-    return addElement(
-      createTextElement(content, {
-        fontSize: 64,
-        ...style
-      }),
-      {
-        sizeToFit: true,
-        active: true,
-        ...restOptions
-      }
-    );
-  };
-  const RE = /\.txt$/i;
-  return {
-    name: "mce:text",
-    commands: [
-      { command: "addTextElement", handle: addTextElement }
-    ],
-    loaders: [
-      {
-        name: "txt",
-        accept: ".txt",
-        test: (source) => {
-          if (source instanceof Blob) {
-            if (source.type.startsWith("text/plain")) {
-              return true;
-            }
-          }
-          if (source instanceof File) {
-            if (RE.test(source.name)) {
-              return true;
-            }
-          }
-          return false;
-        },
-        load: async (source) => {
-          return createTextElement(await source.text());
-        }
-      }
-    ],
-    drawingTools: [
-      {
-        name: "text",
-        handle: (position) => {
-          addTextElement({
-            position
-          });
-          setActiveDrawingTool(void 0);
-        }
-      }
-    ],
-    hotkeys: [
-      { command: "setActiveDrawingTool:text", key: "T" }
-    ]
-  };
-});
-const _hoisted_1$9 = { class: "mce-payhead" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "Playhead",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [..._cache[0] || (_cache[0] = [
-        createElementVNode("header", { class: "mce-payhead__header" }, null, -1),
-        createElementVNode("main", { class: "mce-payhead__main" }, null, -1)
-      ])]);
-    };
-  }
-});
-const _hoisted_1$8 = {
-  key: 0,
-  class: "mce-segment__edge mce-segment__edge--front"
-};
-const _hoisted_2$4 = {
-  class: "mce-segment__node",
-  style: { "overflow": "hidden" }
-};
-const _hoisted_3$4 = {
-  key: 1,
-  class: "mce-segment__edge mce-segment__edge--end"
-};
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  __name: "Segment",
-  props: {
-    node: {},
-    msPerPx: { default: 1 },
-    active: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const blocks = computed(() => {
-      const node = props.node;
-      if (node instanceof Element2D) {
-        return node.children.filter((child) => child instanceof Animation).map((anim) => {
-          const box = {
-            left: anim.delay / props.msPerPx,
-            top: 0,
-            width: anim.duration / props.msPerPx
-          };
-          if (box.width) {
-            box.width = `${box.width}px`;
-          } else {
-            box.width = "100%";
-          }
-          return {
-            name: anim.name,
-            style: {
-              width: box.width,
-              transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
-            }
-          };
-        });
-      }
-      return [];
-    });
-    const style = computed(() => {
-      const node = props.node;
-      const box = {
-        left: node.delay / props.msPerPx,
-        top: 0,
-        width: node.duration / props.msPerPx
-      };
-      if (box.width) {
-        box.width = `${box.width}px`;
-      } else {
-        box.width = "100%";
-      }
-      return {
-        width: box.width,
-        transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
-      };
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["mce-segment", [
-          `mce-segment--${(__props.node.meta.inEditorIs ?? "none").toLowerCase()}`,
-          __props.active && `mce-segment--active`
-        ]]),
-        style: normalizeStyle$1(style.value)
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block, index) => {
-          return openBlock(), createElementBlock("div", {
-            key: index,
-            class: "mce-segment__block",
-            style: normalizeStyle$1(block.style)
-          }, toDisplayString(block.name), 5);
-        }), 128)),
-        __props.active ? (openBlock(), createElementBlock("div", _hoisted_1$8)) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$4, toDisplayString(props.node.name), 1),
-        __props.active ? (openBlock(), createElementBlock("div", _hoisted_3$4)) : createCommentVNode("", true)
-      ], 6);
-    };
-  }
-});
-const _hoisted_1$7 = { class: "mce-track" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "Track",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
-        renderSlot(_ctx.$slots, "default")
-      ]);
-    };
-  }
-});
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "Trackhead",
-  props: {
-    node: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "mce-trackhead",
-        style: normalizeStyle$1({
-          height: `var(--timeline-track-height__${__props.node.meta.inEditorIs}, 22px)`
-        })
-      }, toDisplayString(__props.node.meta.inEditorIs), 5);
-    };
-  }
-});
-const _hoisted_1$6 = { class: "mce-timeline__toolbar" };
-const _hoisted_2$3 = { class: "mce-timeline__main" };
-const _hoisted_3$3 = { class: "mce-timeline__left" };
-const _hoisted_4$1 = { class: "mce-timeline__left-wrapper" };
-const _hoisted_5$1 = { class: "mce-timeline__right-wrapper" };
-const _hoisted_6$1 = { class: "mce-timeline__ruler" };
-const _hoisted_7$1 = { class: "mce-timeline__track" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "Timeline",
-  setup(__props) {
-    const {
-      isElement,
-      root,
-      msPerPx,
-      currentTime,
-      timeline,
-      endTime,
-      selection
-    } = useEditor();
-    const fps = ref(1e3 / 30);
-    const ruler = useTemplateRef("rulerTpl");
-    const paused = ref(true);
-    const offset2 = ref([0, 0]);
-    const elements = computed(() => {
-      return root.value.findAll((node) => {
-        if (isElement(node)) {
-          if (node.children.some((child) => child instanceof Animation)) {
-            return true;
-          }
-        }
-        return false;
-      });
+    const modelValue = useModel(props, "modelValue");
+    const model = computed({
+      get: () => {
+        let { left = 0, top = 0, width = 0, height = 0, rotate = 0, borderRadius = 0 } = modelValue.value ?? {};
+        if (Number.isNaN(Number(width)))
+          width = 0;
+        if (Number.isNaN(Number(height)))
+          height = 0;
+        return { left, top, width, height, rotate, borderRadius };
+      },
+      set: (val) => modelValue.value = val
     });
-    function onWheel(e) {
-      if (e.ctrlKey || e.metaKey) {
-        e.preventDefault();
-        const factor = e.ctrlKey && IN_MAC_OS ? 10 : 1;
-        const delta = e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 2e-3) * factor;
-        const logCur = Math.log(msPerPx.value);
-        const logNew = logCur + delta;
-        msPerPx.value = Math.exp(logNew);
-      } else {
-        e.preventDefault();
-        offset2.value = [
-          Math.min(0, offset2.value[0] - e.deltaX),
-          Math.min(0, offset2.value[1] - e.deltaY)
-        ];
-      }
-    }
-    function onMousedown(e) {
-      const box = ruler.value?.box;
-      if (box) {
-        currentTime.value = (e.clientX - box.left - offset2.value[0]) * msPerPx.value;
-        const move = (e2) => {
-          currentTime.value = (e2.clientX - box.left - offset2.value[0]) * msPerPx.value;
+    const transforming = ref(false);
+    const activeHandle = ref();
+    const computedHandles = computed(() => {
+      const shape = props.handleShape;
+      const size = shape === "rect" ? 8 : 10;
+      const { width = 0, height = 0, borderRadius } = model.value;
+      const center = { x: width / 2, y: height / 2 };
+      const lines = [
+        { type: "t", points: [[0, 0], [1, 0]] },
+        { type: "r", points: [[1, 0], [1, 1]] },
+        { type: "b", points: [[0, 1], [1, 1]] },
+        { type: "l", points: [[0, 0], [0, 1]] }
+      ];
+      const points = [
+        { type: "t", point: [0.5, 0], width: 1.4, height: 0.6 },
+        { type: "r", point: [1, 0.5], width: 0.6, height: 1.4 },
+        { type: "b", point: [0.5, 1], width: 1.4, height: 0.6 },
+        { type: "l", point: [0, 0.5], width: 0.6, height: 1.4 },
+        { type: "tl", point: [0, 0] },
+        { type: "tr", point: [1, 0] },
+        { type: "bl", point: [0, 1] },
+        { type: "br", point: [1, 1] }
+      ];
+      const lineHandles = lines.map((item) => {
+        const [p1, p2] = item.points;
+        const minX = Math.min(p1[0], p2[0]) * width;
+        const maxX = Math.max(p1[0], p2[0]) * width;
+        const minY = Math.min(p1[1], p2[1]) * height;
+        const maxY = Math.max(p1[1], p2[1]) * height;
+        return {
+          type: item.type,
+          x: minX - size / 2,
+          y: minY - size / 2,
+          width: maxX - minX + size,
+          height: maxY - minY + size
         };
-        const up = () => {
-          window.removeEventListener("mousemove", move);
-          window.removeEventListener("mouseup", up);
+      });
+      const pointHandles = points.map((item) => {
+        const _w = size * (item.width ?? 1);
+        const _h = size * (item.height ?? 1);
+        return {
+          type: item.type,
+          shape,
+          x: item.point[0] * width - _w / 2,
+          y: item.point[1] * height - _h / 2,
+          width: _w,
+          height: _h
         };
-        window.addEventListener("mousemove", move);
-        window.addEventListener("mouseup", up);
-      }
-    }
-    function rulerLabelFormat(f) {
-      if (f % 30 === 0) {
-        const m = Math.floor(f / 30 / 60);
-        const s = Math.floor(f / 30) % 60;
-        const mm = String(m).padStart(2, "0");
-        const ss = String(s).padStart(2, "0");
-        return `${mm}:${ss}`;
-      }
-      return `${Math.floor(f % 30)}f`;
-    }
-    let requestId;
-    function play() {
-      paused.value = false;
-      let prevTime;
-      function loop(time) {
-        if (prevTime !== void 0 && time !== void 0) {
-          timeline.value.addTime(time - prevTime);
+      });
+      const diagonalPointHandles = pointHandles.filter((item) => item.type.length === 2);
+      const rotateHandles = diagonalPointHandles.map((item) => {
+        const _w = item.width * 1.5;
+        const _h = item.height * 1.5;
+        let x = item.x;
+        let y = item.y;
+        if (center.x > item.x) {
+          x -= _w;
+        } else {
+          x += item.width;
         }
-        prevTime = time;
-        requestId = requestAnimationFrame(loop);
-      }
-      loop();
-    }
-    function pause() {
-      paused.value = true;
-      if (requestId !== void 0) {
-        cancelAnimationFrame(requestId);
-        requestId = void 0;
-      }
-    }
-    function toggle() {
-      if (paused.value) {
-        play();
+        if (center.y > item.y) {
+          y -= _h;
+        } else {
+          y += item.height;
+        }
+        return {
+          ...item,
+          shape: void 0,
+          type: `rotate-${item.type}`,
+          x,
+          y,
+          width: _w,
+          height: _h
+        };
+      });
+      const minSize = Math.min(width, height);
+      const roundedHandles = props.roundable ? diagonalPointHandles.map((item) => {
+        const _w = item.width * 0.8;
+        const _h = item.height * 0.8;
+        const sign2 = {
+          x: center.x - item.x > 0 ? 1 : -1,
+          y: center.y - item.y > 0 ? 1 : -1
+        };
+        const offset2 = minSize * 0.1;
+        const ws = (borderRadius + offset2) / (width / 2 + offset2);
+        const hs = (borderRadius + offset2) / (height / 2 + offset2);
+        return {
+          ...item,
+          shape: "circle",
+          type: `round-${item.type}`,
+          x: item.x + sign2.x * width / 2 * ws,
+          y: item.y + sign2.y * height / 2 * hs,
+          width: _w,
+          height: _h
+        };
+      }) : [];
+      let handles;
+      if (props.handleStrategy === "point") {
+        handles = [
+          // move
+          ...lineHandles.map((item) => ({ ...item, type: "move" })),
+          // resize
+          ...pointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          // round
+          ...roundedHandles,
+          // rotate
+          ...rotateHandles
+        ];
       } else {
-        pause();
-      }
-    }
-    onBeforeUnmount(pause);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "mce-timeline",
-        onWheel: _cache[0] || (_cache[0] = withModifiers(() => {
-        }, ["prevent"]))
-      }, [
-        createElementVNode("div", _hoisted_1$6, [
-          createElementVNode("div", {
-            class: "mce-timeline__play",
-            onClick: toggle
-          }, [
-            createVNode(unref(_sfc_main$C), {
-              icon: paused.value ? "$play" : "$pause"
-            }, null, 8, ["icon"])
-          ])
-        ]),
-        createElementVNode("div", _hoisted_2$3, [
-          createElementVNode("div", _hoisted_3$3, [
-            createElementVNode("div", _hoisted_4$1, [
-              createElementVNode("div", {
-                style: normalizeStyle$1({
-                  transform: `translateY(${offset2.value[1]}px)`
-                })
-              }, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
-                  return openBlock(), createBlock(_sfc_main$e, {
-                    key: index,
-                    node
-                  }, null, 8, ["node"]);
-                }), 128))
-              ], 4)
-            ])
-          ]),
-          createElementVNode("div", {
-            class: "mce-timeline__right",
-            onWheel,
-            onMousedown
-          }, [
-            createElementVNode("div", _hoisted_5$1, [
-              createElementVNode("div", _hoisted_6$1, [
-                createVNode(_sfc_main$p, {
-                  ref: "rulerTpl",
-                  zoom: 1 / unref(msPerPx) * fps.value,
-                  unit: 100,
-                  "unit-fractions": [1, 3],
-                  style: { "position": "relative" },
-                  position: -offset2.value[0],
-                  "label-format": rulerLabelFormat
-                }, null, 8, ["zoom", "position"])
-              ]),
-              createElementVNode("div", _hoisted_7$1, [
-                createElementVNode("div", {
-                  style: normalizeStyle$1({
-                    width: `${unref(endTime) / unref(msPerPx)}px`,
-                    transform: `translate(${offset2.value[0]}px, ${offset2.value[1]}px)`
-                  })
-                }, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
-                    return openBlock(), createBlock(_sfc_main$f, { key: index }, {
-                      default: withCtx(() => [
-                        createVNode(_sfc_main$g, {
-                          node,
-                          "ms-per-px": unref(msPerPx),
-                          active: unref(selection).some((v) => v.equal(node)),
-                          onMousedown: withModifiers(($event) => selection.value = [node], ["stop"])
-                        }, null, 8, ["node", "ms-per-px", "active", "onMousedown"])
-                      ]),
-                      _: 2
-                    }, 1024);
-                  }), 128))
-                ], 4)
-              ]),
-              createVNode(_sfc_main$h, {
-                style: normalizeStyle$1({
-                  transform: `translate(${offset2.value[0] + Math.ceil(unref(currentTime) / unref(msPerPx))}px, 0px)`
-                })
-              }, null, 8, ["style"])
-            ])
-          ], 32)
-        ])
-      ], 32);
-    };
-  }
-});
-const _timeline = definePlugin((editor) => {
-  const {
-    registerConfig
-  } = editor;
-  registerConfig("timeline", false);
-  return {
-    name: "mce:timeline",
-    components: [
-      {
-        name: "timeline",
-        type: "panel",
-        position: "bottom",
-        size: 160,
-        component: _sfc_main$d
+        handles = [
+          // resize
+          ...lineHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          ...diagonalPointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
+          // round
+          ...roundedHandles,
+          // rotate
+          ...rotateHandles
+        ];
       }
-    ],
-    hotkeys: [
-      { command: "panels:timeline", key: "Alt+2" }
-    ]
-  };
-});
-const _hoisted_1$5 = { class: "mce-toolbelt" };
-const _hoisted_2$2 = { key: 0 };
-const _hoisted_3$2 = { key: 1 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "Toolbelt",
-  setup(__props) {
-    const {
-      state,
-      t,
-      setActiveDrawingTool,
-      activeDrawingTool,
-      hotkeys,
-      getKbd
-    } = useEditor();
-    const activeShape = ref(0);
-    const activePen = ref(0);
-    const shapeItems = computed(() => {
-      const keys = [
-        "rectangle",
-        "line",
-        "arrow",
-        "ellipse",
-        "polygon",
-        "star"
-      ];
-      return [
-        ...keys.map((key, index) => {
-          return {
-            key,
-            handle: () => {
-              activeShape.value = index;
-              setActiveDrawingTool(key);
-            },
-            checked: activeDrawingTool.value?.name === key
-          };
-        }),
-        {
-          key: "image",
-          handle: () => setActiveDrawingTool("image"),
-          checked: activeDrawingTool.value?.name === "image"
+      return handles.filter((handle) => {
+        if (props.handles.includes(handle.type)) {
+          return !(!props.resizable && handle.type.startsWith("resize") || !props.rotatable && handle.type.startsWith("rotate") || !props.movable && handle.type === "move");
         }
-      ];
+        return false;
+      }).map((anchor) => {
+        anchor.width = Math.max(anchor.width, 0);
+        anchor.height = Math.max(anchor.height, 0);
+        return anchor;
+      });
     });
-    const penItems = computed(() => {
-      const keys = [
-        "pen",
-        "pencil"
-      ];
-      return [
-        ...keys.map((key, index) => {
-          return {
-            key,
-            handle: () => {
-              activePen.value = index;
-              setActiveDrawingTool(key);
-            },
-            checked: activeDrawingTool.value?.name === key
-          };
-        })
-      ];
+    const handlesRef = ref();
+    const sizeStyle = computed(() => {
+      const { width = 0, height = 0 } = model.value;
+      return {
+        width: props.initialSize && !width ? void 0 : `${width}px`,
+        height: props.initialSize && !height ? void 0 : `${height}px`
+      };
     });
-    const items = computed(() => {
-      return [
-        {
-          key: ["hand"].includes(state.value || "") ? "hand" : "move",
-          active: state.value !== "drawing",
-          handle: () => {
-            if (["hand"].includes(state.value || "")) ;
-            else {
-              setActiveDrawingTool(void 0);
-            }
-          },
-          children: [
-            { key: "move", handle: () => setActiveDrawingTool(void 0) },
-            { key: "hand", handle: () => state.value = "hand" }
-          ]
-        },
-        {
-          key: activeDrawingTool.value?.name === "slice" ? "slice" : "frame",
-          active: ["frame", "slice"].includes(activeDrawingTool.value?.name),
-          handle: () => setActiveDrawingTool("frame"),
-          children: [
-            { key: "frame", handle: () => setActiveDrawingTool("frame") },
-            { key: "slice", handle: () => setActiveDrawingTool("slice") }
-          ]
-        },
-        {
-          ...shapeItems.value.find((v) => v.checked) ?? shapeItems.value[activeShape.value],
-          children: shapeItems.value
-        },
-        {
-          key: "text",
-          active: activeDrawingTool.value?.name === "text",
-          handle: () => setActiveDrawingTool("text")
-        },
-        {
-          ...penItems.value.find((v) => v.checked) ?? penItems.value[activePen.value],
-          children: penItems.value
-        }
-      ];
+    const style = computed(() => {
+      const { left = 0, top = 0, rotate = 0 } = model.value;
+      const radian = rotate * Math.PI / 180;
+      const cos = Math.cos(radian);
+      const sin = Math.sin(radian);
+      return {
+        ...sizeStyle.value,
+        transform: `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${left}, ${top})`
+      };
     });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (tool, key) => {
-          return openBlock(), createElementBlock("div", {
-            key,
-            class: "mce-toolbelt__group"
-          }, [
-            createVNode(_sfc_main$q, {
-              location: "top",
-              offset: 12,
-              "show-arrow": ""
-            }, {
-              activator: withCtx(({ props: slotProps }) => [
-                createVNode(_sfc_main$y, mergeProps({
-                  icon: "",
-                  class: "mce-toolbelt__btn",
-                  active: tool.active || tool.checked || false
-                }, { ref_for: true }, slotProps, {
-                  onClick: tool.handle
-                }), {
-                  default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), {
-                      icon: `$${tool.key}`
-                    }, null, 8, ["icon"])
-                  ]),
-                  _: 2
-                }, 1040, ["active", "onClick"])
-              ]),
-              default: withCtx(() => [
-                createElementVNode("span", null, toDisplayString(unref(t)(tool.key)), 1)
-              ]),
-              kbd: withCtx(() => [
-                unref(hotkeys).has(`setState:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(unref(getKbd)(`setState:${tool.key}`)), 1)) : unref(hotkeys).has(`setActiveDrawingTool:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(unref(getKbd)(`setActiveDrawingTool:${tool.key}`)), 1)) : createCommentVNode("", true)
-              ]),
-              _: 2
-            }, 1024),
-            tool.children?.length ? (openBlock(), createBlock(_sfc_main$t, {
-              key: 0,
-              items: tool.children,
-              offset: 12,
-              location: "top-start"
-            }, {
-              activator: withCtx(({ props }) => [
-                createVNode(_sfc_main$y, mergeProps({
-                  icon: "",
-                  class: "mce-toolbelt__arrow"
-                }, { ref_for: true }, props), {
-                  default: withCtx(() => [
-                    createVNode(unref(_sfc_main$C), { icon: "$arrowDown" })
-                  ]),
-                  _: 1
-                }, 16)
-              ]),
-              title: withCtx(({ item }) => [
-                createTextVNode(toDisplayString(unref(t)(item.key)), 1)
-              ]),
-              kbd: withCtx(({ item }) => [
-                unref(hotkeys).has(`setState:${item.key}`) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  createTextVNode(toDisplayString(unref(getKbd)(`setState:${item.key}`)), 1)
-                ], 64)) : unref(hotkeys).has(`setActiveDrawingTool:${item.key}`) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createTextVNode(toDisplayString(unref(getKbd)(`setActiveDrawingTool:${item.key}`)), 1)
-                ], 64)) : createCommentVNode("", true)
-              ]),
-              prepend: withCtx(({ item }) => [
-                createVNode(unref(_sfc_main$C), {
-                  class: "mce-toolbelt__icon",
-                  icon: `$${item.key}`
-                }, null, 8, ["icon"])
-              ]),
-              _: 2
-            }, 1032, ["items"])) : createCommentVNode("", true)
-          ]);
-        }), 128))
-      ]);
-    };
-  }
-});
-const _toolbelt = definePlugin((editor) => {
-  const {
-    registerConfig
-  } = editor;
-  const toolbelt = registerConfig("toolbelt", false);
-  return {
-    name: "mce:toolbelt",
-    components: [
-      {
-        name: "toolbelt",
-        type: "overlay",
-        component: _sfc_main$c,
-        ignore: () => !toolbelt.value
+    const tip = computed(() => props.tipFormat?.("size"));
+    function start(event, index) {
+      if (event && event.button !== void 0 && event.button !== 0) {
+        return false;
       }
-    ]
-  };
-});
-const _transform = definePlugin((editor) => {
-  const {
-    elementSelection,
-    exec
-  } = editor;
-  async function _enter() {
-    if (elementSelection.value.length === 1) {
-      const element = elementSelection.value[0];
-      if (element.text.isValid()) {
-        await exec("startTyping");
+      event?.preventDefault();
+      event?.stopPropagation();
+      const { left, top, width, height, rotate, borderRadius } = model.value;
+      let aspectRatio = 0;
+      if (width && height) {
+        aspectRatio = width / height;
       }
-    }
-  }
-  const when = () => Boolean(elementSelection.value.length > 0);
-  function flip2(target) {
-    switch (target) {
-      case "horizontal":
-        elementSelection.value.forEach((el) => {
-          el.style.scaleX = -el.style.scaleX;
-        });
-        break;
-      case "vertical":
-        elementSelection.value.forEach((el) => {
-          el.style.scaleY = -el.style.scaleY;
-        });
-        break;
-    }
-  }
-  return {
-    name: "mce:transform",
-    commands: [
-      { command: "enter", handle: _enter },
-      { command: "flip", handle: flip2 },
-      { command: "flipHorizontal", handle: () => flip2("horizontal") },
-      { command: "flipVertical", handle: () => flip2("vertical") }
-    ],
-    hotkeys: [
-      { command: "enter", key: ["Enter"], when },
-      { command: "flipHorizontal", key: "Shift+H" },
-      { command: "flipVertical", key: "Shift+V" }
-    ]
-  };
-});
-const _ui = definePlugin((editor) => {
-  return {
-    name: "mce:ui",
-    setup: () => {
-      const {
-        drawboardDom,
-        drawboardAabb,
-        drawboardPointer
-      } = editor;
-      useResizeObserver$1(drawboardDom, (entries) => {
-        const { left: _left, top: _top, width, height } = entries[0].contentRect;
-        const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
-        drawboardAabb.value = new Aabb2D(left, top, width, height);
-      });
-      document.addEventListener("mousemove", (event) => {
-        drawboardPointer.value = new Vector2$1(
-          event.clientX - drawboardAabb.value.left,
-          event.clientY - drawboardAabb.value.top
-        );
-      });
-    }
-  };
-});
-const _url = definePlugin((editor) => {
-  const {
-    load,
-    http
-  } = editor;
-  return {
-    name: "mce:url",
-    loaders: [
-      {
-        name: "url",
-        test: (source) => {
-          return typeof source === "string";
-        },
-        load: async (url) => {
-          const blob = await http.request({ url, responseType: "blob" });
-          const file = new File([blob], url, { type: blob.type });
-          try {
-            return await load(file);
-          } catch (error) {
-            throw new Error(`Failed to load source "${url}", ${error}`);
+      const handle = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
+      activeHandle.value = handle.type;
+      const handleArr = handle.type.split("-");
+      const last = handleArr.length > 1 ? handleArr.pop() || "" : "";
+      const key = handleArr.join("-");
+      const isMove = key === "move";
+      const isRotate = key === "rotate";
+      const isRound = key === "round";
+      const isHorizontal = last === "l" || last === "r";
+      const isHorizontalVertical = last.length === 1;
+      const centerPoint = {
+        x: left + width / 2,
+        y: top + height / 2
+      };
+      const startPoint = {
+        x: left,
+        y: top
+      };
+      if (!isMove) {
+        startPoint.x += handle.x + handle.width / 2;
+        startPoint.y += handle.y + handle.height / 2;
+      }
+      const sign2 = {
+        x: startPoint.x - centerPoint.x > 0 ? 1 : -1,
+        y: startPoint.y - centerPoint.y > 0 ? 1 : -1
+      };
+      const rotatedStartPoint = rotatePoint2(startPoint, centerPoint, rotate);
+      const rotatedSymmetricPoint = {
+        x: centerPoint.x * 2 - rotatedStartPoint.x,
+        y: centerPoint.y * 2 - rotatedStartPoint.y
+      };
+      const startAngle = Math.atan2(
+        rotatedStartPoint.y - centerPoint.y,
+        rotatedStartPoint.x - centerPoint.x
+      ) / (Math.PI / 180);
+      let startClientPoint = event ? { x: event.clientX, y: event.clientY } : void 0;
+      function startTransform() {
+        transforming.value = true;
+        emit("start", model.value);
+      }
+      if (!props.threshold && !transforming.value) {
+        startTransform();
+      }
+      function _onPointerMove(event2) {
+        const updated = {};
+        if (!startClientPoint) {
+          startClientPoint = { x: event2.clientX, y: event2.clientY };
+        }
+        const rotatedOffset = {
+          x: event2.clientX - startClientPoint.x,
+          y: event2.clientY - startClientPoint.y
+        };
+        if (!transforming.value) {
+          if (Math.abs(rotatedOffset.x) < props.threshold && Math.abs(rotatedOffset.y) < props.threshold) {
+            return;
+          }
+          startTransform();
+        }
+        const rotatedCurrentPoint = {
+          x: rotatedStartPoint.x + rotatedOffset.x,
+          y: rotatedStartPoint.y + rotatedOffset.y
+        };
+        if (isMove) {
+          if (props.movable) {
+            updated.left = startPoint.x + rotatedOffset.x;
+            updated.top = startPoint.y + rotatedOffset.y;
+          }
+        } else if (isRotate) {
+          if (props.rotatable) {
+            const endAngle = Math.atan2(
+              rotatedCurrentPoint.y - centerPoint.y,
+              rotatedCurrentPoint.x - centerPoint.x
+            ) / (Math.PI / 180);
+            updated.rotate = rotate + endAngle - startAngle;
           }
-        }
-      }
-    ]
-  };
-});
-const _view = definePlugin((editor) => {
-  const {
-    config
-  } = editor;
-  return {
-    name: "mce:view",
-    commands: [
-      { command: "view", handle: (view) => config.value[view] = !config.value[view] }
-    ],
-    hotkeys: [
-      { command: "view:pixelGrid", key: 'Shift+"' },
-      { command: "view:ruler", key: "Shift+R" }
-    ]
-  };
-});
-const _zoom = definePlugin((editor) => {
-  const {
-    registerConfig,
-    camera,
-    zoomTo,
-    exec,
-    config,
-    findFrame,
-    selection
-  } = editor;
-  registerConfig("zoomToFit", "contain");
-  function zoomToFrame(type, options) {
-    const value = findFrame(type);
-    if (value) {
-      selection.value = [value];
-      zoomTo(value, options);
-    }
-  }
-  return {
-    name: "mce:zoom",
-    commands: [
-      { command: "zoomIn", handle: () => camera.value.addZoom(0.25) },
-      { command: "zoomOut", handle: () => camera.value.addZoom(-0.25) },
-      { command: "zoomTo100", handle: () => camera.value.setZoom(1) },
-      { command: "zoomToFit", handle: () => zoomTo("root", { mode: config.value.zoomToFit }) },
-      { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) },
-      { command: "zoomToNextFrame", handle: (options) => zoomToFrame("next", options) },
-      { command: "zoomToPreviousFrame", handle: (options) => zoomToFrame("previous", options) }
-    ],
-    hotkeys: [
-      { command: "zoomIn", key: "CmdOrCtrl+=" },
-      { command: "zoomOut", key: "CmdOrCtrl+-" },
-      { command: "zoomTo100", key: "CmdOrCtrl+0" },
-      { command: "zoomToFit", key: "Shift+1" },
-      { command: "zoomToSelection", key: "Shift+2" },
-      { command: "zoomToNextFrame", key: "N" },
-      { command: "zoomToPreviousFrame", key: "Shift+N" }
-    ],
-    events: {
-      setDoc: () => exec("zoomToFit")
-    }
-  };
-});
-const plugins = [
-  _arrange,
-  _autoNest,
-  _copyAs,
-  _drawingTool,
-  _edit,
-  _frame,
-  _gif,
-  _history,
-  _hover,
-  _html,
-  _image,
-  _import,
-  _json,
-  _layers,
-  _madeWith,
-  _menu,
-  _move,
-  _new,
-  _node,
-  _open,
-  _panels,
-  _pen,
-  _rotate,
-  _ruler,
-  _saveAs,
-  _scroll,
-  _selection,
-  _shape,
-  _slice,
-  _smartGuides,
-  _smartSelection,
-  _state,
-  _statusbar,
-  _text,
-  _timeline,
-  _toolbelt,
-  _transform,
-  _ui,
-  _url,
-  _view,
-  _zoom
-];
-class Editor extends Observable {
-  static injectionKey = /* @__PURE__ */ Symbol.for("EditorKey");
-  debug = ref(false);
-  onEmit;
-  plugins = /* @__PURE__ */ new Map();
-  pluginsComponents = computed(() => {
-    return {
-      overlay: this.getPlugins("overlay"),
-      panel: this.getPlugins("panel")
-    };
-  });
-  _setups = [];
-  constructor(options = {}) {
-    super();
-    this._setupObservable();
-    this._setupOptions(options);
-  }
-  _setupObservable() {
-    this.on = this.on.bind(this);
-    this.once = this.once.bind(this);
-    this.off = this.off.bind(this);
-    this.emit = this.emit.bind(this);
-  }
-  getPlugins = (type) => {
-    return Array.from(this.plugins.values()).flatMap((p) => p.components?.filter((c) => {
-      return c.type === type && c.ignore?.() !== true;
-    }) ?? []);
-  };
-  log = (...args) => {
-    if (this.debug.value) {
-      console.warn(`[mce][${(/* @__PURE__ */ new Date()).toLocaleTimeString()}]`, ...args);
-    }
-  };
-  emit = (event, ...args) => {
-    this.onEmit?.(event, ...args);
-    return super.emit(event, ...args);
-  };
-  _setupOptions(options) {
-    const {
-      debug = false,
-      plugins: plugins$1 = [],
-      configCacheInLocal
-    } = options;
-    this.debug.value = debug;
-    this.config = configCacheInLocal ? useLocalStorage("config", () => ({})) : ref({});
-    this._setups = [];
-    this._useMixins(
-      mixins,
-      options
-    );
-    this.use([
-      ...plugins,
-      ...plugins$1
-    ], options);
-  }
-  _useMixins(mixins2, options) {
-    const use = (mixin) => {
-      const result = mixin(this, options);
-      switch (typeof result) {
-        case "object":
-          if (Array.isArray(result)) {
-            result.map((v) => use(v));
+        } else if (isRound) {
+          const offset2 = rotatePoint2(rotatedOffset, { x: 0, y: 0 }, -rotate);
+          const dx = -sign2.x * offset2.x;
+          const dy = -sign2.y * offset2.y;
+          const _offset = dx < dy ? dy : dx;
+          updated.borderRadius = borderRadius + _offset;
+        } else if (isHorizontalVertical) {
+          const currentPoint = rotatePoint2(rotatedCurrentPoint, centerPoint, -rotate);
+          const newCurrentPoint = isHorizontal ? { x: currentPoint.x, y: startPoint.y } : { x: startPoint.x, y: currentPoint.y };
+          const newRotatedCurrentPoint = rotatePoint2(newCurrentPoint, centerPoint, rotate);
+          const distance2 = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
+          if (isHorizontal) {
+            updated.width = distance2;
+            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
+              updated.height = distance2 / aspectRatio;
+            } else {
+              updated.height = height;
+            }
           } else {
-            Object.assign(this, result);
+            updated.height = distance2;
+            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
+              updated.width = distance2 * aspectRatio;
+            } else {
+              updated.width = width;
+            }
           }
-          break;
-        case "function":
-        default:
-          if (result) {
-            this._setups.push(result);
+          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
+          updated.left = newCenterPoint.x - updated.width / 2;
+          updated.top = newCenterPoint.y - updated.height / 2;
+        } else {
+          let newRotatedCurrentPoint;
+          if ((props.resizeStrategy === "lockAspectRatio" || props.resizeStrategy === "lockAspectRatioDiagonal") && aspectRatio) {
+            const offset2 = rotatePoint2(rotatedOffset, { x: 0, y: 0 }, -rotate);
+            const dx = sign2.x * offset2.x;
+            const dy = sign2.y * offset2.y;
+            let newCurrentPoint;
+            if (dx > dy * aspectRatio) {
+              newCurrentPoint = {
+                x: startPoint.x + sign2.x * dx,
+                y: startPoint.y + sign2.y * dx / aspectRatio
+              };
+            } else {
+              newCurrentPoint = {
+                x: startPoint.x + sign2.x * dy * aspectRatio,
+                y: startPoint.y + sign2.y * dy
+              };
+            }
+            newRotatedCurrentPoint = rotatePoint2(newCurrentPoint, centerPoint, rotate);
+          } else {
+            newRotatedCurrentPoint = rotatedCurrentPoint;
           }
-          break;
+          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
+          const points = [
+            rotatePoint2(newRotatedCurrentPoint, newCenterPoint, -rotate),
+            rotatePoint2(rotatedSymmetricPoint, newCenterPoint, -rotate)
+          ];
+          const [minX, maxX] = points[0].x > points[1].x ? [points[1].x, points[0].x] : [points[0].x, points[1].x];
+          const [minY, maxY] = points[0].y > points[1].y ? [points[1].y, points[0].y] : [points[0].y, points[1].y];
+          updated.width = maxX - minX;
+          updated.height = maxY - minY;
+          updated.left = minX;
+          updated.top = minY;
+        }
+        if ("width" in updated && updated.width <= 0 || "height" in updated && updated.height <= 0) {
+          return;
+        }
+        if (updated.borderRadius ?? borderRadius) {
+          updated.borderRadius = Math.min(
+            Math.max(0, updated.borderRadius ?? borderRadius),
+            Math.min((updated.width ?? width) / 2, (updated.height ?? height) / 2)
+          );
+        }
+        const oldValue = { ...model.value };
+        const newValue = { ...model.value, ...updated };
+        model.value = newValue;
+        emit("move", newValue, oldValue);
+      }
+      function _onPointerUp() {
+        window.removeEventListener("pointermove", _onPointerMove);
+        window.removeEventListener("pointerup", _onPointerUp, true);
+        transforming.value = false;
+        activeHandle.value = void 0;
+        emit("end", model.value);
       }
+      window.addEventListener("pointermove", _onPointerMove);
+      window.addEventListener("pointerup", _onPointerUp, true);
+      return true;
+    }
+    const cursorMap = {
+      rotate: '<path d="M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z" fill="white"/>',
+      resizeXy: '<path d="m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z" fill="white"/><path d="m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z" fill="black"/>',
+      resizeBevel: '<path d="m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z" fill="white"/><path d="m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z" fill="black"/>'
     };
-    mixins2.forEach(use);
-  }
-  use(plugins2, options) {
-    const use = (plugin) => {
-      let result;
-      if (typeof plugin === "function") {
-        result = plugin(this, options);
-      } else {
-        result = plugin;
+    function createCursor(type, angle) {
+      const path = cursorMap[type];
+      return `<svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><filter id="shadow" color-interpolation-filters="sRGB"><feDropShadow dx="1" dy="1" stdDeviation="1.2" flood-opacity=".5"/></filter></defs><g fill="none" transform="rotate(${angle} 16 16)" filter="url(%23shadow)">${path}</g></svg>`.replace(/"/g, "'");
+    }
+    function getCursor(type) {
+      if (type === "move") {
+        return "move";
       }
-      this.plugins.set(result.name, result);
-      const {
-        events,
-        commands = [],
-        hotkeys = [],
-        loaders = [],
-        exporters = [],
-        drawingTools = []
-      } = result;
-      this.registerCommand(commands);
-      this.registerHotkey(hotkeys);
-      this.registerLoader(loaders);
-      this.registerExporter(exporters);
-      this.registerDrawingTool(drawingTools);
-      if (events) {
-        for (const k in events) {
-          this.on(k, events[k]);
-        }
+      const create = cursors[type];
+      if (!create) {
+        return void 0;
       }
-    };
-    plugins2.forEach((p) => {
-      try {
-        use(p);
-      } catch (err) {
-        console.error(`Failed to use plugin`, err);
+      return `url("data:image/svg+xml,${create(model.value.rotate ?? 0)}") 16 16, pointer`;
+    }
+    function rotatePoint2(point, origin, angle) {
+      const radian = angle * Math.PI / 180;
+      const cos = Math.cos(radian);
+      const sin = Math.sin(radian);
+      return {
+        x: (point.x - origin.x) * cos - (point.y - origin.y) * sin + origin.x,
+        y: (point.x - origin.x) * sin + (point.y - origin.y) * cos + origin.y
+      };
+    }
+    function getMidpoint(point1, point2) {
+      return {
+        x: (point2.x + point1.x) / 2,
+        y: (point2.y + point1.y) / 2
+      };
+    }
+    function getDistance(point1, point2) {
+      const dx = point2.x - point1.x;
+      const dy = point2.y - point1.y;
+      return (dx + dy >= 0 ? 1 : -1) * Math.sqrt(dx * dx + dy * dy);
+    }
+    onMounted(async () => {
+      const vm = getCurrentInstance();
+      const root = vm?.proxy?.$el;
+      if (root && props.initialSize) {
+        await nextTick();
+        let width;
+        let height;
+        const style2 = getComputedStyle(root);
+        if (style2.width.endsWith("px") && style2.height.endsWith("px")) {
+          width = Number(style2.width.replace("px", ""));
+          height = Number(style2.height.replace("px", ""));
+        } else {
+          ({ width, height } = root.getBoundingClientRect());
+        }
+        if (width && height) {
+          model.value = { ...model.value, width, height };
+        } else if ("ResizeObserver" in globalThis) {
+          const observer = new ResizeObserver(([entry]) => {
+            if (entry.contentRect.width && entry.contentRect.height) {
+              model.value = {
+                ...model.value,
+                width: entry.contentRect.width,
+                height: entry.contentRect.height
+              };
+              observer.unobserve(root);
+            }
+          });
+          observer.observe(root);
+        }
       }
     });
-  }
-  _setuped = false;
-  setup = async () => {
-    if (!this._setuped) {
-      this._setuped = true;
-      await Promise.all([
-        ...this._setups.map(async (setup) => {
-          try {
-            await setup();
-          } catch (err) {
-            console.error(`Failed to setup mixin`, err);
-          }
-        }),
-        ...[...this.plugins.values()].map(async (p) => {
-          try {
-            await p.setup?.();
-          } catch (err) {
-            console.error(`Failed to setup ${p.name} plugin`, err);
+    __expose({
+      start,
+      activeHandle,
+      transforming
+    });
+    function Diagonal() {
+      const handle = activeHandle.value;
+      if (!handle || !handle.startsWith("resize")) {
+        return void 0;
+      }
+      switch (props.resizeStrategy) {
+        case "lockAspectRatio":
+          break;
+        case "lockAspectRatioDiagonal":
+          if (handle.split("-").length === 2) {
+            return void 0;
           }
-        })
-      ]);
-      this.emit("ready");
-    }
-  };
-  install = (app) => {
-    app.provide(Editor.injectionKey, this);
-  };
-}
-function useEditor() {
-  let editor = inject(Editor.injectionKey, null);
-  if (!editor) {
-    const _editor = getCurrentInstance()?.proxy?.editor;
-    if (_editor instanceof Editor) {
-      editor = _editor;
+          break;
+        default:
+          return void 0;
+      }
+      if (handle === "resize-t" || handle === "resize-r" || handle === "resize-tr" || handle === "resize-bl") {
+        return h("line", {
+          class: "mce-transform-controls__diagonal",
+          x1: "100%",
+          y1: "0",
+          x2: "0",
+          y2: "100%"
+        });
+      } else if (handle === "resize-l" || handle === "resize-b" || handle === "resize-tl" || handle === "resize-br") {
+        return h("line", {
+          class: "mce-transform-controls__diagonal",
+          x1: "0",
+          y1: "0",
+          x2: "100%",
+          y2: "100%"
+        });
+      }
+      return void 0;
     }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+        class: normalizeClass(["mce-transform-controls", [
+          transforming.value && "mce-transform-controls--transforming",
+          props.hideUi && "mce-transform-controls--hide-ui",
+          __props.resizeStrategy && `mce-transform-controls--${__props.resizeStrategy}`,
+          activeHandle.value && `mce-transform-controls--${activeHandle.value}`,
+          activeHandle.value === "move" && "mce-transform-controls--moving",
+          activeHandle.value?.startsWith("resize") && "mce-transform-controls--resizing",
+          activeHandle.value?.startsWith("rotate") && "mce-transform-controls--rotateing",
+          props.borderStyle && `mce-transform-controls--${props.borderStyle}`
+        ]]),
+        style: normalizeStyle$1(style.value)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {
+            value: unref(modelValue),
+            props: {
+              onPointerdown: start
+            },
+            start
+          }),
+          (openBlock(), createElementBlock("svg", {
+            class: "mce-transform-controls__svg",
+            style: normalizeStyle$1({ color: __props.color })
+          }, [
+            _cache[1] || (_cache[1] = createElementVNode("rect", {
+              width: "100%",
+              height: "100%",
+              fill: "none",
+              class: "mce-transform-controls__rect"
+            }, null, -1)),
+            createElementVNode("rect", {
+              class: "mce-transform-controls__rect",
+              width: "100%",
+              height: "100%",
+              fill: "none",
+              rx: model.value.borderRadius,
+              ry: model.value.borderRadius
+            }, null, 8, _hoisted_1$d),
+            createVNode(Diagonal),
+            createElementVNode("g", _hoisted_2$7, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+                return openBlock(), createElementBlock(Fragment, { key: index }, [
+                  handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    handle.shape === "rect" ? (openBlock(), createElementBlock("rect", {
+                      key: 0,
+                      x: handle.x,
+                      y: handle.y,
+                      width: handle.width,
+                      height: handle.height,
+                      "aria-label": handle.type,
+                      class: "mce-transform-controls__handle"
+                    }, null, 8, _hoisted_3$6)) : handle.width === handle.height ? (openBlock(), createElementBlock("circle", {
+                      key: 1,
+                      cx: handle.x + handle.width / 2,
+                      cy: handle.y + handle.width / 2,
+                      r: handle.width / 2,
+                      "aria-label": handle.type,
+                      class: "mce-transform-controls__handle"
+                    }, null, 8, _hoisted_4$3)) : (openBlock(), createElementBlock("rect", {
+                      key: 2,
+                      x: handle.x,
+                      y: handle.y,
+                      width: handle.width,
+                      height: handle.height,
+                      "aria-label": handle.type,
+                      rx: handle.width / 4,
+                      ry: handle.height / 4,
+                      class: "mce-transform-controls__handle"
+                    }, null, 8, _hoisted_5$2))
+                  ], 64)) : createCommentVNode("", true)
+                ], 64);
+              }), 128)),
+              __props.rotator ? (openBlock(), createElementBlock("g", {
+                key: 0,
+                transform: `matrix(1, 0, 0, 1, -32, ${model.value.height}) rotate(270 16 16)`,
+                class: "mce-transform-controls__rotator"
+              }, [..._cache[0] || (_cache[0] = [
+                createElementVNode("path", { d: "M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z" }, null, -1)
+              ])], 8, _hoisted_6$2)) : createCommentVNode("", true)
+            ]),
+            createElementVNode("g", _hoisted_7$2, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
+                return openBlock(), createElementBlock("rect", {
+                  key: index,
+                  ref_for: true,
+                  ref_key: "handlesRef",
+                  ref: handlesRef,
+                  x: handle.x,
+                  y: handle.y,
+                  width: handle.width,
+                  height: handle.height,
+                  "aria-label": handle.type,
+                  class: "mce-transform-controls__handle-rect",
+                  cursor: transforming.value ? "auto" : getCursor(handle.type),
+                  onPointerdown: (event) => start(event, index)
+                }, null, 40, _hoisted_8$1);
+              }), 128))
+            ]),
+            createElementVNode("g", _hoisted_9$1, [
+              renderSlot(_ctx.$slots, "svg", { box: model.value })
+            ])
+          ], 4)),
+          tip.value ? (openBlock(), createElementBlock("div", _hoisted_10$1, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["class", "style"]);
+    };
   }
-  return editor;
-}
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "Floatbar",
-  props: {
-    ...makeMceOverlayProps({
-      offset: 8
-    })
-  },
-  setup(__props, { expose: __expose }) {
-    const props = __props;
+});
+const _hoisted_1$c = {
+  key: 0,
+  class: "mce-smart-selection"
+};
+const _hoisted_2$6 = ["onClick"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "SmartSelection",
+  setup(__props) {
     const {
       elementSelection,
-      selectionAabbInDrawboard,
-      inEditorIs
+      getObb,
+      getAabb,
+      state,
+      camera,
+      resizeElement,
+      inEditorIs,
+      registerCommand
     } = useEditor();
-    const overlay = useTemplateRef("overlayTpl");
-    const style = computed(() => {
-      const location = props.location;
-      const aabb = selectionAabbInDrawboard.value;
-      if (location?.startsWith("top") || location?.startsWith("bottom")) {
+    const currentElement = ref();
+    const info = ref({
+      active: false,
+      spacing: void 0
+    });
+    registerCommand({
+      command: "setSmartSelectionCurrentElement",
+      handle: (el) => {
+        currentElement.value = el;
+      }
+    });
+    function update() {
+      if (currentElement.value) {
+        return;
+      }
+      const els = elementSelection.value;
+      let active = false;
+      let spacing;
+      if (state.value !== "transforming" && els.length > 1) {
+        let prev;
+        const items = els.map((el) => ({ el, aabb: getAabb(el) }));
+        active = true;
+        const sorted = [...items].sort((a, b) => a.aabb.y - b.aabb.y);
+        for (let i = 0; i < sorted.length; i++) {
+          const cur = sorted[i];
+          if (prev) {
+            if (!cur.aabb.overlap(prev.aabb, "x")) {
+              active = false;
+              break;
+            }
+            const _spacing = cur.aabb.y - (prev.aabb.y + prev.aabb.height);
+            if (spacing !== void 0 && Math.abs(spacing - _spacing) >= 1) {
+              active = false;
+              break;
+            }
+            spacing = _spacing;
+          }
+          prev = cur;
+        }
+        if (!active) {
+          active = true;
+          prev = void 0;
+          spacing = void 0;
+          const sorted2 = [...items].sort((a, b) => a.aabb.x - b.aabb.x);
+          for (let i = 0; i < sorted2.length; i++) {
+            const cur = sorted2[i];
+            if (prev) {
+              if (!cur.aabb.overlap(prev.aabb, "y")) {
+                active = false;
+                break;
+              }
+              const _spacing = cur.aabb.x - (prev.aabb.x + prev.aabb.width);
+              if (spacing !== void 0 && Math.abs(spacing - _spacing) >= 1) {
+                active = false;
+                break;
+              }
+              spacing = _spacing;
+            }
+            prev = cur;
+          }
+        }
+      }
+      info.value = {
+        active,
+        spacing
+      };
+    }
+    watch(() => elementSelection.value.map((el) => getAabb(el)), update);
+    watch(
+      state,
+      () => {
+        currentElement.value = void 0;
+      }
+    );
+    const handles = computed(() => {
+      return elementSelection.value.map((el) => {
         return {
-          "--height": "auto",
-          "--width": `${aabb.width}px`
+          el,
+          style: getObb(el, "drawboard").toCssStyle()
         };
-      } else if (location?.startsWith("left") || location?.startsWith("right")) {
-        return {
-          "--height": `${aabb.height}px`,
-          "--width": "auto"
+      });
+    });
+    const _transform2 = computed(() => {
+      const { left, top, width, height, rotationDegrees } = getObb(currentElement.value, "drawboard");
+      return {
+        left,
+        top,
+        width,
+        height,
+        rotate: rotationDegrees
+      };
+    });
+    const transform = computed({
+      get: () => _transform2.value,
+      set: (val) => {
+        const zoom = camera.value.zoom;
+        const oldTransform = _transform2.value;
+        const transform2 = {
+          left: val.left / zoom.x,
+          top: val.top / zoom.y,
+          width: Math.max(1, val.width / zoom.x),
+          height: Math.max(1, val.height / zoom.y)
+        };
+        const offsetStyle = {
+          left: transform2.left - oldTransform.left / zoom.x,
+          top: transform2.top - oldTransform.top / zoom.y,
+          width: transform2.width - oldTransform.width / zoom.x,
+          height: transform2.height - oldTransform.height / zoom.y
+        };
+        const el = currentElement.value;
+        const style = el.style;
+        const newStyle = {
+          left: style.left + offsetStyle.left,
+          top: style.top + offsetStyle.top,
+          width: style.width + offsetStyle.width,
+          height: style.height + offsetStyle.height
         };
+        const newWidth = Math.max(1, newStyle.width);
+        const newHeight = Math.max(1, newStyle.height);
+        const shape = el.shape;
+        resizeElement(
+          el,
+          newWidth,
+          newHeight,
+          inEditorIs(el, "Frame") ? void 0 : shape.isValid() ? { deep: true } : { deep: true, textToFit: true }
+        );
+        newStyle.width = el.style.width;
+        newStyle.height = el.style.height;
+        Object.assign(style, newStyle);
+        el.updateGlobalTransform();
       }
-      return {};
     });
-    const offset2 = computed(() => {
-      if (elementSelection.value.some((v) => inEditorIs(v, "Frame")) || props.location?.startsWith("bottom")) {
-        return 32;
+    return (_ctx, _cache) => {
+      return info.value.active ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(handles.value, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            class: normalizeClass(["mce-smart-handle", {
+              "mce-smart-handle--active": item.el.equal(currentElement.value)
+            }]),
+            style: normalizeStyle$1(item.style)
+          }, [
+            createElementVNode("div", {
+              class: "mce-smart-handle__btn",
+              onClick: ($event) => currentElement.value = item.el
+            }, null, 8, _hoisted_2$6)
+          ], 6);
+        }), 128)),
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$k, {
+          key: 0,
+          modelValue: transform.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
+          handles: ["resize-l", "resize-r", "resize-t", "resize-b"],
+          class: "mce-smart-selection__transform",
+          color: "#FF24BD"
+        }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _smartSelection = definePlugin((_editor) => {
+  return {
+    name: "mce:smartSelection",
+    components: [
+      {
+        type: "overlay",
+        component: _sfc_main$j
       }
-      return 8;
-    });
-    function updateLocation() {
-      overlay.value?.updateLocation();
-    }
-    watch(selectionAabbInDrawboard, updateLocation, { deep: true });
-    __expose({
-      updateLocation
-    });
+    ]
+  };
+});
+const _state = definePlugin((editor) => {
+  const {
+    state
+  } = editor;
+  return {
+    name: "mce:state",
+    commands: [
+      { command: "setState", handle: (val) => state.value = val }
+    ],
+    hotkeys: [
+      { command: "setState:move", key: "V" },
+      { command: "setState:hand", key: "H" }
+    ]
+  };
+});
+const _hoisted_1$b = { class: "progress-indicator" };
+const _hoisted_2$5 = {
+  key: 0,
+  class: "progress-indicator__status"
+};
+const _hoisted_3$5 = { class: "progress-indicator__bar" };
+const _hoisted_4$2 = {
+  key: 1,
+  class: "progress-indicator__bar-indeterminate"
+};
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "ProgressIndicator",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    indeterminate: { type: Boolean }
+  }, {
+    "modelValue": { default: 0 },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const progress = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
-        ref: "overlayTpl",
-        "content-style": style.value,
-        class: "mce-floatbar",
-        location: props.location,
-        middlewares: props.middlewares,
-        offset: offset2.value,
-        target: props.target,
-        attach: false,
-        "model-value": true
-      }, {
-        default: withCtx(() => [
-          unref(elementSelection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        __props.label ? (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3$5, [
+          !__props.indeterminate ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "progress-indicator__bar-fill",
+            style: normalizeStyle$1({ width: `${progress.value * 100}%` })
+          }, null, 4)) : (openBlock(), createElementBlock("div", _hoisted_4$2))
+        ])
+      ]);
+    };
+  }
+});
+const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-3b286483"]]);
+const _hoisted_1$a = { class: "mce-statusbar" };
+const _hoisted_2$4 = { class: "mce-statusbar__main" };
+const _hoisted_3$4 = { class: "mce-statusbar__item" };
+const _hoisted_4$1 = { class: "mce-statusbar__kbd" };
+const _hoisted_5$1 = { class: "mce-statusbar__kbd" };
+const _hoisted_6$1 = { class: "mce-statusbar__item" };
+const _hoisted_7$1 = { class: "mce-statusbar__kbd" };
+const _hoisted_8 = { class: "mce-statusbar__item" };
+const _hoisted_9 = { class: "mce-statusbar__item" };
+const _hoisted_10 = { class: "mce-statusbar__kbd" };
+const _hoisted_11 = { class: "mce-statusbar__item" };
+const _hoisted_12 = { class: "mce-statusbar__kbd" };
+const _hoisted_13 = { key: 2 };
+const _hoisted_14 = { class: "mce-statusbar__item" };
+const _hoisted_15 = { class: "mce-statusbar__item" };
+const _hoisted_16 = { class: "mce-statusbar__kbd" };
+const _hoisted_17 = { class: "mce-statusbar__item" };
+const _hoisted_18 = { class: "mce-statusbar__item" };
+const _hoisted_19 = { class: "mce-statusbar__kbd" };
+const _hoisted_20 = { class: "mce-statusbar__item" };
+const _hoisted_21 = { class: "mce-statusbar__item" };
+const _hoisted_22 = { class: "mce-statusbar__progress" };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "Statusbar",
+  setup(__props) {
+    const {
+      state,
+      t,
+      getKbd,
+      exporting,
+      exportProgress,
+      selection,
+      isElement
+    } = useEditor();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+        createElementVNode("div", _hoisted_2$4, [
+          unref(state) === "typing" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createElementVNode("div", _hoisted_3$4, [
+              createElementVNode("span", _hoisted_4$1, toDisplayString(unref(getKbd)("Command")), 1),
+              createElementVNode("span", _hoisted_5$1, toDisplayString(unref(getKbd)("Enter")), 1)
+            ]),
+            _cache[1] || (_cache[1] = createElementVNode("span", null, "/", -1)),
+            createElementVNode("div", _hoisted_6$1, [
+              createElementVNode("span", _hoisted_7$1, toDisplayString(unref(getKbd)("Escape")), 1),
+              createElementVNode("span", null, toDisplayString(unref(t)("commitChanges")), 1)
+            ])
+          ], 64)) : unref(state) === "transforming" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createElementVNode("div", _hoisted_8, [
+              createVNode(unref(_sfc_main$D), { icon: "$mouseRightClick" })
+            ]),
+            _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
+            createElementVNode("div", _hoisted_9, [
+              createElementVNode("span", _hoisted_10, toDisplayString(unref(getKbd)("Escape")), 1),
+              createElementVNode("span", null, toDisplayString(unref(t)("cancel")), 1)
+            ]),
+            _cache[3] || (_cache[3] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
+            createElementVNode("div", _hoisted_11, [
+              createElementVNode("span", _hoisted_12, toDisplayString(unref(getKbd)("Shift")), 1),
+              createElementVNode("span", null, toDisplayString(unref(t)("constrainToAxis")), 1)
+            ])
+          ], 64)) : unref(state) ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(unref(t)(unref(state))), 1)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+            createElementVNode("div", _hoisted_14, [
+              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
+              createElementVNode("span", null, toDisplayString(unref(t)("selectObject")), 1)
+            ]),
+            _cache[5] || (_cache[5] = createElementVNode("span", null, " + ", -1)),
+            createElementVNode("div", _hoisted_15, [
+              createElementVNode("span", _hoisted_16, toDisplayString(unref(getKbd)("Shift")), 1),
+              createElementVNode("span", null, toDisplayString(unref(t)("extend")), 1)
+            ]),
+            _cache[6] || (_cache[6] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
+            createElementVNode("div", _hoisted_17, [
+              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
+              createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
+            ]),
+            _cache[7] || (_cache[7] = createElementVNode("span", null, " + ", -1)),
+            createElementVNode("div", _hoisted_18, [
+              createElementVNode("span", _hoisted_19, toDisplayString(unref(getKbd)("Shift")), 1),
+              createElementVNode("span", null, toDisplayString(unref(t)("extend")), 1)
+            ]),
+            _cache[8] || (_cache[8] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
+            createElementVNode("div", _hoisted_20, [
+              createVNode(unref(_sfc_main$D), { icon: "$mouseLeftClick" }),
+              createElementVNode("span", null, toDisplayString(unref(t)("dragSelected")), 1)
+            ]),
+            unref(selection).length === 1 && unref(isElement)(unref(selection)[0]) && unref(selection)[0].text.isValid() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              _cache[4] || (_cache[4] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
+              createElementVNode("div", _hoisted_21, [
+                createElementVNode("span", null, toDisplayString(unref(getKbd)("Enter")), 1),
+                createElementVNode("span", null, toDisplayString(unref(t)("startTyping")), 1)
+              ])
+            ], 64)) : createCommentVNode("", true)
+          ], 64))
         ]),
-        _: 3
-      }, 8, ["content-style", "location", "middlewares", "offset", "target"]);
+        createElementVNode("div", _hoisted_22, [
+          unref(exporting) ? (openBlock(), createBlock(ProgressIndicator, {
+            key: 0,
+            modelValue: unref(exportProgress),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(exportProgress) ? exportProgress.value = $event : null),
+            label: unref(t)("exporting")
+          }, null, 8, ["modelValue", "label"])) : createCommentVNode("", true)
+        ])
+      ]);
     };
   }
 });
-const _hoisted_1$4 = { class: "mce-transform-controls__svg" };
-const _hoisted_2$1 = ["rx", "ry"];
-const _hoisted_3$1 = { "pointer-events": "none" };
-const _hoisted_4 = ["x", "y", "width", "height", "aria-label"];
-const _hoisted_5 = ["cx", "cy", "r", "aria-label"];
-const _hoisted_6 = ["x", "y", "width", "height", "aria-label", "rx", "ry"];
-const _hoisted_7 = ["transform"];
-const _hoisted_8 = { "pointer-events": "all" };
-const _hoisted_9 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
-const _hoisted_10 = {
-  "pointer-events": "all",
-  class: "mce-transform-controls__svg-slot"
-};
-const _hoisted_11 = {
-  key: 0,
-  class: "mce-transform-controls__tip"
-};
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "TransformControls",
-  props: {
-    tag: { default: "div" },
-    modelValue: {},
-    movable: { type: Boolean, default: true },
-    rotatable: { type: Boolean, default: true },
-    rotator: { type: Boolean },
-    resizable: { type: Boolean, default: true },
-    roundable: { type: Boolean },
-    threshold: { default: 0 },
-    resizeStrategy: {},
-    handleStrategy: {},
-    handleShape: { default: "rect" },
-    hideUi: { type: Boolean },
-    handles: { default: () => [
-      "move",
-      // resize
-      "resize-l",
-      "resize-t",
-      "resize-r",
-      "resize-b",
-      "resize-tl",
-      "resize-tr",
-      "resize-br",
-      "resize-bl",
-      // round
-      "round-tl",
-      "round-tr",
-      "round-bl",
-      "round-br",
-      // rotate
-      "rotate-tl",
-      "rotate-tr",
-      "rotate-bl",
-      "rotate-br"
-    ] },
-    initialSize: { type: Boolean },
-    borderStyle: {},
-    tipFormat: {}
-  },
-  emits: ["update:modelValue", "start", "move", "end"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const cursors = {
-      "rotate-tl": (angle) => createCursor("rotate", 360 + angle),
-      "rotate-tr": (angle) => createCursor("rotate", 90 + angle),
-      "rotate-bl": (angle) => createCursor("rotate", 270 + angle),
-      "rotate-br": (angle) => createCursor("rotate", 180 + angle),
-      "resize-l": (angle) => createCursor("resizeXy", 180 + angle),
-      "resize-t": (angle) => createCursor("resizeXy", 90 + angle),
-      "resize-r": (angle) => createCursor("resizeXy", 180 + angle),
-      "resize-b": (angle) => createCursor("resizeXy", 90 + angle),
-      "resize-tl": (angle) => createCursor("resizeBevel", 90 + angle),
-      "resize-tr": (angle) => createCursor("resizeBevel", 180 + angle),
-      "resize-br": (angle) => createCursor("resizeBevel", 90 + angle),
-      "resize-bl": (angle) => createCursor("resizeBevel", 180 + angle)
-    };
-    const modelValue = useModel(props, "modelValue");
-    const model = computed({
-      get: () => {
-        let { left = 0, top = 0, width = 0, height = 0, rotate = 0, borderRadius = 0 } = modelValue.value ?? {};
-        if (Number.isNaN(Number(width)))
-          width = 0;
-        if (Number.isNaN(Number(height)))
-          height = 0;
-        return { left, top, width, height, rotate, borderRadius };
-      },
-      set: (val) => modelValue.value = val
-    });
-    const transforming = ref(false);
-    const activeHandle = ref();
-    const computedHandles = computed(() => {
-      const shape = props.handleShape;
-      const size = shape === "rect" ? 8 : 10;
-      const { width = 0, height = 0, borderRadius } = model.value;
-      const center = { x: width / 2, y: height / 2 };
-      const lines = [
-        { type: "t", points: [[0, 0], [1, 0]] },
-        { type: "r", points: [[1, 0], [1, 1]] },
-        { type: "b", points: [[0, 1], [1, 1]] },
-        { type: "l", points: [[0, 0], [0, 1]] }
-      ];
-      const points = [
-        { type: "t", point: [0.5, 0], width: 1.4, height: 0.6 },
-        { type: "r", point: [1, 0.5], width: 0.6, height: 1.4 },
-        { type: "b", point: [0.5, 1], width: 1.4, height: 0.6 },
-        { type: "l", point: [0, 0.5], width: 0.6, height: 1.4 },
-        { type: "tl", point: [0, 0] },
-        { type: "tr", point: [1, 0] },
-        { type: "bl", point: [0, 1] },
-        { type: "br", point: [1, 1] }
-      ];
-      const lineHandles = lines.map((item) => {
-        const [p1, p2] = item.points;
-        const minX = Math.min(p1[0], p2[0]) * width;
-        const maxX = Math.max(p1[0], p2[0]) * width;
-        const minY = Math.min(p1[1], p2[1]) * height;
-        const maxY = Math.max(p1[1], p2[1]) * height;
-        return {
-          type: item.type,
-          x: minX - size / 2,
-          y: minY - size / 2,
-          width: maxX - minX + size,
-          height: maxY - minY + size
-        };
-      });
-      const pointHandles = points.map((item) => {
-        const _w = size * (item.width ?? 1);
-        const _h = size * (item.height ?? 1);
-        return {
-          type: item.type,
-          shape,
-          x: item.point[0] * width - _w / 2,
-          y: item.point[1] * height - _h / 2,
-          width: _w,
-          height: _h
-        };
-      });
-      const diagonalPointHandles = pointHandles.filter((item) => item.type.length === 2);
-      const rotateHandles = diagonalPointHandles.map((item) => {
-        const _w = item.width * 1.5;
-        const _h = item.height * 1.5;
-        let x = item.x;
-        let y = item.y;
-        if (center.x > item.x) {
-          x -= _w;
-        } else {
-          x += item.width;
-        }
-        if (center.y > item.y) {
-          y -= _h;
-        } else {
-          y += item.height;
-        }
-        return {
-          ...item,
-          shape: void 0,
-          type: `rotate-${item.type}`,
-          x,
-          y,
-          width: _w,
-          height: _h
-        };
-      });
-      const minSize = Math.min(width, height);
-      const roundedHandles = props.roundable ? diagonalPointHandles.map((item) => {
-        const _w = item.width * 0.8;
-        const _h = item.height * 0.8;
-        const sign2 = {
-          x: center.x - item.x > 0 ? 1 : -1,
-          y: center.y - item.y > 0 ? 1 : -1
-        };
-        const offset2 = minSize * 0.1;
-        const ws = (borderRadius + offset2) / (width / 2 + offset2);
-        const hs = (borderRadius + offset2) / (height / 2 + offset2);
-        return {
-          ...item,
-          shape: "circle",
-          type: `round-${item.type}`,
-          x: item.x + sign2.x * width / 2 * ws,
-          y: item.y + sign2.y * height / 2 * hs,
-          width: _w,
-          height: _h
-        };
-      }) : [];
-      let handles;
-      if (props.handleStrategy === "point") {
-        handles = [
-          // move
-          ...lineHandles.map((item) => ({ ...item, type: "move" })),
-          // resize
-          ...pointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          // round
-          ...roundedHandles,
-          // rotate
-          ...rotateHandles
-        ];
-      } else {
-        handles = [
-          // resize
-          ...lineHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          ...diagonalPointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          // round
-          ...roundedHandles,
-          // rotate
-          ...rotateHandles
-        ];
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-a1f0e31b"]]);
+const _statusbar = definePlugin((editor) => {
+  const {
+    registerConfig
+  } = editor;
+  registerConfig("statusbar", false);
+  return {
+    name: "mce:statusbar",
+    components: [
+      {
+        name: "statusbar",
+        type: "panel",
+        position: "bottom",
+        size: 24,
+        component: Statusbar
+      }
+    ]
+  };
+});
+const _text = definePlugin((editor) => {
+  const {
+    t,
+    addElement,
+    setActiveDrawingTool
+  } = editor;
+  const addTextElement = (options = {}) => {
+    const {
+      content = t("doubleClickEditText"),
+      style,
+      ...restOptions
+    } = options;
+    return addElement(
+      createTextElement(content, {
+        fontSize: 64,
+        ...style
+      }),
+      {
+        sizeToFit: true,
+        active: true,
+        ...restOptions
+      }
+    );
+  };
+  const RE = /\.txt$/i;
+  return {
+    name: "mce:text",
+    commands: [
+      { command: "addTextElement", handle: addTextElement }
+    ],
+    loaders: [
+      {
+        name: "txt",
+        accept: ".txt",
+        test: (source) => {
+          if (source instanceof Blob) {
+            if (source.type.startsWith("text/plain")) {
+              return true;
+            }
+          }
+          if (source instanceof File) {
+            if (RE.test(source.name)) {
+              return true;
+            }
+          }
+          return false;
+        },
+        load: async (source) => {
+          return createTextElement(await source.text());
+        }
       }
-      return handles.filter((handle) => {
-        if (props.handles.includes(handle.type)) {
-          return !(!props.resizable && handle.type.startsWith("resize") || !props.rotatable && handle.type.startsWith("rotate") || !props.movable && handle.type === "move");
+    ],
+    drawingTools: [
+      {
+        name: "text",
+        handle: (position) => {
+          addTextElement({
+            position
+          });
+          setActiveDrawingTool(void 0);
         }
-        return false;
-      }).map((anchor) => {
-        anchor.width = Math.max(anchor.width, 0);
-        anchor.height = Math.max(anchor.height, 0);
-        return anchor;
-      });
-    });
-    const handlesRef = ref();
-    const sizeStyle = computed(() => {
-      const { width = 0, height = 0 } = model.value;
-      return {
-        width: props.initialSize && !width ? void 0 : `${width}px`,
-        height: props.initialSize && !height ? void 0 : `${height}px`
-      };
-    });
-    const style = computed(() => {
-      const { left = 0, top = 0, rotate = 0 } = model.value;
-      const radian = rotate * Math.PI / 180;
-      const cos = Math.cos(radian);
-      const sin = Math.sin(radian);
-      return {
-        ...sizeStyle.value,
-        transform: `matrix(${cos}, ${sin}, ${-sin}, ${cos}, ${left}, ${top})`
-      };
-    });
-    const tip = computed(() => props.tipFormat?.("size"));
-    function start(event, index) {
-      if (event && event.button !== void 0 && event.button !== 0) {
-        return false;
       }
-      event?.preventDefault();
-      event?.stopPropagation();
-      const { left, top, width, height, rotate, borderRadius } = model.value;
-      let aspectRatio = 0;
-      if (width && height) {
-        aspectRatio = width / height;
+    ],
+    hotkeys: [
+      { command: "setActiveDrawingTool:text", key: "T" }
+    ]
+  };
+});
+const _hoisted_1$9 = { class: "mce-payhead" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "Playhead",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [..._cache[0] || (_cache[0] = [
+        createElementVNode("header", { class: "mce-payhead__header" }, null, -1),
+        createElementVNode("main", { class: "mce-payhead__main" }, null, -1)
+      ])]);
+    };
+  }
+});
+const _hoisted_1$8 = {
+  key: 0,
+  class: "mce-segment__edge mce-segment__edge--front"
+};
+const _hoisted_2$3 = {
+  class: "mce-segment__node",
+  style: { "overflow": "hidden" }
+};
+const _hoisted_3$3 = {
+  key: 1,
+  class: "mce-segment__edge mce-segment__edge--end"
+};
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "Segment",
+  props: {
+    node: {},
+    msPerPx: { default: 1 },
+    active: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const blocks = computed(() => {
+      const node = props.node;
+      if (node instanceof Element2D) {
+        return node.children.filter((child) => child instanceof Animation).map((anim) => {
+          const box = {
+            left: anim.delay / props.msPerPx,
+            top: 0,
+            width: anim.duration / props.msPerPx
+          };
+          if (box.width) {
+            box.width = `${box.width}px`;
+          } else {
+            box.width = "100%";
+          }
+          return {
+            name: anim.name,
+            style: {
+              width: box.width,
+              transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
+            }
+          };
+        });
       }
-      const handle = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
-      activeHandle.value = handle.type;
-      const handleArr = handle.type.split("-");
-      const last = handleArr.length > 1 ? handleArr.pop() || "" : "";
-      const key = handleArr.join("-");
-      const isMove = key === "move";
-      const isRotate = key === "rotate";
-      const isRound = key === "round";
-      const isHorizontal = last === "l" || last === "r";
-      const isHorizontalVertical = last.length === 1;
-      const centerPoint = {
-        x: left + width / 2,
-        y: top + height / 2
-      };
-      const startPoint = {
-        x: left,
-        y: top
+      return [];
+    });
+    const style = computed(() => {
+      const node = props.node;
+      const box = {
+        left: node.delay / props.msPerPx,
+        top: 0,
+        width: node.duration / props.msPerPx
       };
-      if (!isMove) {
-        startPoint.x += handle.x + handle.width / 2;
-        startPoint.y += handle.y + handle.height / 2;
+      if (box.width) {
+        box.width = `${box.width}px`;
+      } else {
+        box.width = "100%";
       }
-      const sign2 = {
-        x: startPoint.x - centerPoint.x > 0 ? 1 : -1,
-        y: startPoint.y - centerPoint.y > 0 ? 1 : -1
-      };
-      const rotatedStartPoint = rotatePoint2(startPoint, centerPoint, rotate);
-      const rotatedSymmetricPoint = {
-        x: centerPoint.x * 2 - rotatedStartPoint.x,
-        y: centerPoint.y * 2 - rotatedStartPoint.y
+      return {
+        width: box.width,
+        transform: `matrix(1, 0, 0, 1, ${box.left}, ${box.top})`
       };
-      const startAngle = Math.atan2(
-        rotatedStartPoint.y - centerPoint.y,
-        rotatedStartPoint.x - centerPoint.x
-      ) / (Math.PI / 180);
-      let startClientPoint = event ? { x: event.clientX, y: event.clientY } : void 0;
-      function startTransform() {
-        transforming.value = true;
-        emit("start", model.value);
-      }
-      if (!props.threshold && !transforming.value) {
-        startTransform();
-      }
-      function _onPointerMove(event2) {
-        const updated = {};
-        if (!startClientPoint) {
-          startClientPoint = { x: event2.clientX, y: event2.clientY };
-        }
-        const rotatedOffset = {
-          x: event2.clientX - startClientPoint.x,
-          y: event2.clientY - startClientPoint.y
-        };
-        if (!transforming.value) {
-          if (Math.abs(rotatedOffset.x) < props.threshold && Math.abs(rotatedOffset.y) < props.threshold) {
-            return;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["mce-segment", [
+          `mce-segment--${(__props.node.meta.inEditorIs ?? "none").toLowerCase()}`,
+          __props.active && `mce-segment--active`
+        ]]),
+        style: normalizeStyle$1(style.value)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            class: "mce-segment__block",
+            style: normalizeStyle$1(block.style)
+          }, toDisplayString(block.name), 5);
+        }), 128)),
+        __props.active ? (openBlock(), createElementBlock("div", _hoisted_1$8)) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_2$3, toDisplayString(props.node.name), 1),
+        __props.active ? (openBlock(), createElementBlock("div", _hoisted_3$3)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+const _hoisted_1$7 = { class: "mce-track" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "Track",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "Trackhead",
+  props: {
+    node: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "mce-trackhead",
+        style: normalizeStyle$1({
+          height: `var(--timeline-track-height__${__props.node.meta.inEditorIs}, 22px)`
+        })
+      }, toDisplayString(__props.node.meta.inEditorIs), 5);
+    };
+  }
+});
+const _hoisted_1$6 = { class: "mce-timeline__toolbar" };
+const _hoisted_2$2 = { class: "mce-timeline__main" };
+const _hoisted_3$2 = { class: "mce-timeline__left" };
+const _hoisted_4 = { class: "mce-timeline__left-wrapper" };
+const _hoisted_5 = { class: "mce-timeline__right-wrapper" };
+const _hoisted_6 = { class: "mce-timeline__ruler" };
+const _hoisted_7 = { class: "mce-timeline__track" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "Timeline",
+  setup(__props) {
+    const {
+      isElement,
+      root,
+      msPerPx,
+      currentTime,
+      timeline,
+      endTime,
+      selection
+    } = useEditor();
+    const fps = ref(1e3 / 30);
+    const ruler = useTemplateRef("rulerTpl");
+    const paused = ref(true);
+    const offset2 = ref([0, 0]);
+    const elements = computed(() => {
+      return root.value.findAll((node) => {
+        if (isElement(node)) {
+          if (node.children.some((child) => child instanceof Animation)) {
+            return true;
           }
-          startTransform();
         }
-        const rotatedCurrentPoint = {
-          x: rotatedStartPoint.x + rotatedOffset.x,
-          y: rotatedStartPoint.y + rotatedOffset.y
+        return false;
+      });
+    });
+    function onWheel(e) {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        const factor = e.ctrlKey && IN_MAC_OS ? 10 : 1;
+        const delta = e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 2e-3) * factor;
+        const logCur = Math.log(msPerPx.value);
+        const logNew = logCur + delta;
+        msPerPx.value = Math.exp(logNew);
+      } else {
+        e.preventDefault();
+        offset2.value = [
+          Math.min(0, offset2.value[0] - e.deltaX),
+          Math.min(0, offset2.value[1] - e.deltaY)
+        ];
+      }
+    }
+    function onMousedown(e) {
+      const box = ruler.value?.box;
+      if (box) {
+        currentTime.value = (e.clientX - box.left - offset2.value[0]) * msPerPx.value;
+        const move = (e2) => {
+          currentTime.value = (e2.clientX - box.left - offset2.value[0]) * msPerPx.value;
         };
-        if (isMove) {
-          if (props.movable) {
-            updated.left = startPoint.x + rotatedOffset.x;
-            updated.top = startPoint.y + rotatedOffset.y;
-          }
-        } else if (isRotate) {
-          if (props.rotatable) {
-            const endAngle = Math.atan2(
-              rotatedCurrentPoint.y - centerPoint.y,
-              rotatedCurrentPoint.x - centerPoint.x
-            ) / (Math.PI / 180);
-            updated.rotate = rotate + endAngle - startAngle;
-          }
-        } else if (isRound) {
-          const offset2 = rotatePoint2(rotatedOffset, { x: 0, y: 0 }, -rotate);
-          const dx = -sign2.x * offset2.x;
-          const dy = -sign2.y * offset2.y;
-          const _offset = dx < dy ? dy : dx;
-          updated.borderRadius = borderRadius + _offset;
-        } else if (isHorizontalVertical) {
-          const currentPoint = rotatePoint2(rotatedCurrentPoint, centerPoint, -rotate);
-          const newCurrentPoint = isHorizontal ? { x: currentPoint.x, y: startPoint.y } : { x: startPoint.x, y: currentPoint.y };
-          const newRotatedCurrentPoint = rotatePoint2(newCurrentPoint, centerPoint, rotate);
-          const distance2 = Math.abs(getDistance(newRotatedCurrentPoint, rotatedSymmetricPoint));
-          if (isHorizontal) {
-            updated.width = distance2;
-            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
-              updated.height = distance2 / aspectRatio;
-            } else {
-              updated.height = height;
-            }
-          } else {
-            updated.height = distance2;
-            if (props.resizeStrategy === "lockAspectRatio" && aspectRatio) {
-              updated.width = distance2 * aspectRatio;
-            } else {
-              updated.width = width;
-            }
-          }
-          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
-          updated.left = newCenterPoint.x - updated.width / 2;
-          updated.top = newCenterPoint.y - updated.height / 2;
-        } else {
-          let newRotatedCurrentPoint;
-          if ((props.resizeStrategy === "lockAspectRatio" || props.resizeStrategy === "lockAspectRatioDiagonal") && aspectRatio) {
-            const offset2 = rotatePoint2(rotatedOffset, { x: 0, y: 0 }, -rotate);
-            const dx = sign2.x * offset2.x;
-            const dy = sign2.y * offset2.y;
-            let newCurrentPoint;
-            if (dx > dy * aspectRatio) {
-              newCurrentPoint = {
-                x: startPoint.x + sign2.x * dx,
-                y: startPoint.y + sign2.y * dx / aspectRatio
-              };
-            } else {
-              newCurrentPoint = {
-                x: startPoint.x + sign2.x * dy * aspectRatio,
-                y: startPoint.y + sign2.y * dy
-              };
-            }
-            newRotatedCurrentPoint = rotatePoint2(newCurrentPoint, centerPoint, rotate);
-          } else {
-            newRotatedCurrentPoint = rotatedCurrentPoint;
-          }
-          const newCenterPoint = getMidpoint(newRotatedCurrentPoint, rotatedSymmetricPoint);
-          const points = [
-            rotatePoint2(newRotatedCurrentPoint, newCenterPoint, -rotate),
-            rotatePoint2(rotatedSymmetricPoint, newCenterPoint, -rotate)
-          ];
-          const [minX, maxX] = points[0].x > points[1].x ? [points[1].x, points[0].x] : [points[0].x, points[1].x];
-          const [minY, maxY] = points[0].y > points[1].y ? [points[1].y, points[0].y] : [points[0].y, points[1].y];
-          updated.width = maxX - minX;
-          updated.height = maxY - minY;
-          updated.left = minX;
-          updated.top = minY;
+        const up = () => {
+          window.removeEventListener("mousemove", move);
+          window.removeEventListener("mouseup", up);
+        };
+        window.addEventListener("mousemove", move);
+        window.addEventListener("mouseup", up);
+      }
+    }
+    function rulerLabelFormat(f) {
+      if (f % 30 === 0) {
+        const m = Math.floor(f / 30 / 60);
+        const s = Math.floor(f / 30) % 60;
+        const mm = String(m).padStart(2, "0");
+        const ss = String(s).padStart(2, "0");
+        return `${mm}:${ss}`;
+      }
+      return `${Math.floor(f % 30)}f`;
+    }
+    let requestId;
+    function play() {
+      paused.value = false;
+      let prevTime;
+      function loop(time) {
+        if (prevTime !== void 0 && time !== void 0) {
+          timeline.value.addTime(time - prevTime);
         }
-        if ("width" in updated && updated.width <= 0 || "height" in updated && updated.height <= 0) {
-          return;
+        prevTime = time;
+        requestId = requestAnimationFrame(loop);
+      }
+      loop();
+    }
+    function pause() {
+      paused.value = true;
+      if (requestId !== void 0) {
+        cancelAnimationFrame(requestId);
+        requestId = void 0;
+      }
+    }
+    function toggle() {
+      if (paused.value) {
+        play();
+      } else {
+        pause();
+      }
+    }
+    onBeforeUnmount(pause);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "mce-timeline",
+        onWheel: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["prevent"]))
+      }, [
+        createElementVNode("div", _hoisted_1$6, [
+          createElementVNode("div", {
+            class: "mce-timeline__play",
+            onClick: toggle
+          }, [
+            createVNode(unref(_sfc_main$D), {
+              icon: paused.value ? "$play" : "$pause"
+            }, null, 8, ["icon"])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_2$2, [
+          createElementVNode("div", _hoisted_3$2, [
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", {
+                style: normalizeStyle$1({
+                  transform: `translateY(${offset2.value[1]}px)`
+                })
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
+                  return openBlock(), createBlock(_sfc_main$d, {
+                    key: index,
+                    node
+                  }, null, 8, ["node"]);
+                }), 128))
+              ], 4)
+            ])
+          ]),
+          createElementVNode("div", {
+            class: "mce-timeline__right",
+            onWheel,
+            onMousedown
+          }, [
+            createElementVNode("div", _hoisted_5, [
+              createElementVNode("div", _hoisted_6, [
+                createVNode(_sfc_main$q, {
+                  ref: "rulerTpl",
+                  zoom: 1 / unref(msPerPx) * fps.value,
+                  unit: 100,
+                  "unit-fractions": [1, 3],
+                  style: { "position": "relative" },
+                  position: -offset2.value[0],
+                  "label-format": rulerLabelFormat
+                }, null, 8, ["zoom", "position"])
+              ]),
+              createElementVNode("div", _hoisted_7, [
+                createElementVNode("div", {
+                  style: normalizeStyle$1({
+                    width: `${unref(endTime) / unref(msPerPx)}px`,
+                    transform: `translate(${offset2.value[0]}px, ${offset2.value[1]}px)`
+                  })
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(elements.value, (node, index) => {
+                    return openBlock(), createBlock(_sfc_main$e, { key: index }, {
+                      default: withCtx(() => [
+                        createVNode(_sfc_main$f, {
+                          node,
+                          "ms-per-px": unref(msPerPx),
+                          active: unref(selection).some((v) => v.equal(node)),
+                          onMousedown: withModifiers(($event) => selection.value = [node], ["stop"])
+                        }, null, 8, ["node", "ms-per-px", "active", "onMousedown"])
+                      ]),
+                      _: 2
+                    }, 1024);
+                  }), 128))
+                ], 4)
+              ]),
+              createVNode(_sfc_main$g, {
+                style: normalizeStyle$1({
+                  transform: `translate(${offset2.value[0] + Math.ceil(unref(currentTime) / unref(msPerPx))}px, 0px)`
+                })
+              }, null, 8, ["style"])
+            ])
+          ], 32)
+        ])
+      ], 32);
+    };
+  }
+});
+const _timeline = definePlugin((editor) => {
+  const {
+    registerConfig
+  } = editor;
+  registerConfig("timeline", false);
+  return {
+    name: "mce:timeline",
+    components: [
+      {
+        name: "timeline",
+        type: "panel",
+        position: "bottom",
+        size: 160,
+        component: _sfc_main$c
+      }
+    ],
+    hotkeys: [
+      { command: "panels:timeline", key: "Alt+2" }
+    ]
+  };
+});
+const _hoisted_1$5 = { class: "mce-toolbelt" };
+const _hoisted_2$1 = { key: 0 };
+const _hoisted_3$1 = { key: 1 };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "Toolbelt",
+  setup(__props) {
+    const {
+      state,
+      t,
+      setActiveDrawingTool,
+      activeDrawingTool,
+      hotkeys,
+      getKbd
+    } = useEditor();
+    const activeShape = ref(0);
+    const activePen = ref(0);
+    const shapeItems = computed(() => {
+      const keys = [
+        "rectangle",
+        "line",
+        "arrow",
+        "ellipse",
+        "polygon",
+        "star"
+      ];
+      return [
+        ...keys.map((key, index) => {
+          return {
+            key,
+            handle: () => {
+              activeShape.value = index;
+              setActiveDrawingTool(key);
+            },
+            checked: activeDrawingTool.value?.name === key
+          };
+        }),
+        {
+          key: "image",
+          handle: () => setActiveDrawingTool("image"),
+          checked: activeDrawingTool.value?.name === "image"
         }
-        if (updated.borderRadius ?? borderRadius) {
-          updated.borderRadius = Math.min(
-            Math.max(0, updated.borderRadius ?? borderRadius),
-            Math.min((updated.width ?? width) / 2, (updated.height ?? height) / 2)
-          );
+      ];
+    });
+    const penItems = computed(() => {
+      const keys = [
+        "pen",
+        "pencil"
+      ];
+      return [
+        ...keys.map((key, index) => {
+          return {
+            key,
+            handle: () => {
+              activePen.value = index;
+              setActiveDrawingTool(key);
+            },
+            checked: activeDrawingTool.value?.name === key
+          };
+        })
+      ];
+    });
+    const items = computed(() => {
+      return [
+        {
+          key: ["hand"].includes(state.value || "") ? "hand" : "move",
+          active: state.value !== "drawing",
+          handle: () => {
+            if (["hand"].includes(state.value || "")) ;
+            else {
+              setActiveDrawingTool(void 0);
+            }
+          },
+          children: [
+            { key: "move", handle: () => setActiveDrawingTool(void 0) },
+            { key: "hand", handle: () => state.value = "hand" }
+          ]
+        },
+        {
+          key: activeDrawingTool.value?.name === "slice" ? "slice" : "frame",
+          active: ["frame", "slice"].includes(activeDrawingTool.value?.name),
+          handle: () => setActiveDrawingTool("frame"),
+          children: [
+            { key: "frame", handle: () => setActiveDrawingTool("frame") },
+            { key: "slice", handle: () => setActiveDrawingTool("slice") }
+          ]
+        },
+        {
+          ...shapeItems.value.find((v) => v.checked) ?? shapeItems.value[activeShape.value],
+          children: shapeItems.value
+        },
+        {
+          key: "text",
+          active: activeDrawingTool.value?.name === "text",
+          handle: () => setActiveDrawingTool("text")
+        },
+        {
+          ...penItems.value.find((v) => v.checked) ?? penItems.value[activePen.value],
+          children: penItems.value
         }
-        const oldValue = { ...model.value };
-        const newValue = { ...model.value, ...updated };
-        model.value = newValue;
-        emit("move", newValue, oldValue);
+      ];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (tool, key) => {
+          return openBlock(), createElementBlock("div", {
+            key,
+            class: "mce-toolbelt__group"
+          }, [
+            createVNode(_sfc_main$r, {
+              location: "top",
+              offset: 12,
+              "show-arrow": ""
+            }, {
+              activator: withCtx(({ props: slotProps }) => [
+                createVNode(_sfc_main$z, mergeProps({
+                  icon: "",
+                  class: "mce-toolbelt__btn",
+                  active: tool.active || tool.checked || false
+                }, { ref_for: true }, slotProps, {
+                  onClick: tool.handle
+                }), {
+                  default: withCtx(() => [
+                    createVNode(unref(_sfc_main$D), {
+                      icon: `$${tool.key}`
+                    }, null, 8, ["icon"])
+                  ]),
+                  _: 2
+                }, 1040, ["active", "onClick"])
+              ]),
+              default: withCtx(() => [
+                createElementVNode("span", null, toDisplayString(unref(t)(tool.key)), 1)
+              ]),
+              kbd: withCtx(() => [
+                unref(hotkeys).has(`setState:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(unref(getKbd)(`setState:${tool.key}`)), 1)) : unref(hotkeys).has(`setActiveDrawingTool:${tool.key}`) ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(unref(getKbd)(`setActiveDrawingTool:${tool.key}`)), 1)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1024),
+            tool.children?.length ? (openBlock(), createBlock(_sfc_main$u, {
+              key: 0,
+              items: tool.children,
+              offset: 12,
+              location: "top-start"
+            }, {
+              activator: withCtx(({ props }) => [
+                createVNode(_sfc_main$z, mergeProps({
+                  icon: "",
+                  class: "mce-toolbelt__arrow"
+                }, { ref_for: true }, props), {
+                  default: withCtx(() => [
+                    createVNode(unref(_sfc_main$D), { icon: "$arrowDown" })
+                  ]),
+                  _: 1
+                }, 16)
+              ]),
+              title: withCtx(({ item }) => [
+                createTextVNode(toDisplayString(unref(t)(item.key)), 1)
+              ]),
+              kbd: withCtx(({ item }) => [
+                unref(hotkeys).has(`setState:${item.key}`) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createTextVNode(toDisplayString(unref(getKbd)(`setState:${item.key}`)), 1)
+                ], 64)) : unref(hotkeys).has(`setActiveDrawingTool:${item.key}`) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createTextVNode(toDisplayString(unref(getKbd)(`setActiveDrawingTool:${item.key}`)), 1)
+                ], 64)) : createCommentVNode("", true)
+              ]),
+              prepend: withCtx(({ item }) => [
+                createVNode(unref(_sfc_main$D), {
+                  class: "mce-toolbelt__icon",
+                  icon: `$${item.key}`
+                }, null, 8, ["icon"])
+              ]),
+              _: 2
+            }, 1032, ["items"])) : createCommentVNode("", true)
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _toolbelt = definePlugin((editor) => {
+  const {
+    registerConfig
+  } = editor;
+  const toolbelt = registerConfig("toolbelt", false);
+  return {
+    name: "mce:toolbelt",
+    components: [
+      {
+        name: "toolbelt",
+        type: "overlay",
+        component: _sfc_main$b,
+        ignore: () => !toolbelt.value
       }
-      function _onPointerUp() {
-        window.removeEventListener("pointermove", _onPointerMove);
-        window.removeEventListener("pointerup", _onPointerUp, true);
-        transforming.value = false;
-        activeHandle.value = void 0;
-        emit("end", model.value);
+    ]
+  };
+});
+const _transform = definePlugin((editor) => {
+  const {
+    elementSelection,
+    exec
+  } = editor;
+  async function _enter() {
+    if (elementSelection.value.length === 1) {
+      const element = elementSelection.value[0];
+      if (element.text.isValid()) {
+        await exec("startTyping");
       }
-      window.addEventListener("pointermove", _onPointerMove);
-      window.addEventListener("pointerup", _onPointerUp, true);
-      return true;
     }
-    const cursorMap = {
-      rotate: '<path d="M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z" fill="white"/>',
-      resizeXy: '<path d="m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z" fill="white"/><path d="m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z" fill="black"/>',
-      resizeBevel: '<path d="m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z" fill="white"/><path d="m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z" fill="black"/>'
-    };
-    function createCursor(type, angle) {
-      const path = cursorMap[type];
-      return `<svg height="32" width="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><filter id="shadow" color-interpolation-filters="sRGB"><feDropShadow dx="1" dy="1" stdDeviation="1.2" flood-opacity=".5"/></filter></defs><g fill="none" transform="rotate(${angle} 16 16)" filter="url(%23shadow)">${path}</g></svg>`.replace(/"/g, "'");
+  }
+  const when = () => Boolean(elementSelection.value.length > 0);
+  function flip2(target) {
+    switch (target) {
+      case "horizontal":
+        elementSelection.value.forEach((el) => {
+          el.style.scaleX = -el.style.scaleX;
+        });
+        break;
+      case "vertical":
+        elementSelection.value.forEach((el) => {
+          el.style.scaleY = -el.style.scaleY;
+        });
+        break;
+    }
+  }
+  return {
+    name: "mce:transform",
+    commands: [
+      { command: "enter", handle: _enter },
+      { command: "flip", handle: flip2 },
+      { command: "flipHorizontal", handle: () => flip2("horizontal") },
+      { command: "flipVertical", handle: () => flip2("vertical") }
+    ],
+    hotkeys: [
+      { command: "enter", key: ["Enter"], when },
+      { command: "flipHorizontal", key: "Shift+H" },
+      { command: "flipVertical", key: "Shift+V" }
+    ]
+  };
+});
+const _ui = definePlugin((editor) => {
+  return {
+    name: "mce:ui",
+    setup: () => {
+      const {
+        drawboardDom,
+        drawboardAabb,
+        drawboardPointer
+      } = editor;
+      useResizeObserver$1(drawboardDom, (entries) => {
+        const { left: _left, top: _top, width, height } = entries[0].contentRect;
+        const { left = _left, top = _top } = drawboardDom.value?.getBoundingClientRect() ?? {};
+        drawboardAabb.value = new Aabb2D(left, top, width, height);
+      });
+      document.addEventListener("mousemove", (event) => {
+        drawboardPointer.value = new Vector2$1(
+          event.clientX - drawboardAabb.value.left,
+          event.clientY - drawboardAabb.value.top
+        );
+      });
     }
-    function getCursor(type) {
-      if (type === "move") {
-        return "move";
-      }
-      const create = cursors[type];
-      if (!create) {
-        return void 0;
+  };
+});
+const _url = definePlugin((editor) => {
+  const {
+    load,
+    http
+  } = editor;
+  return {
+    name: "mce:url",
+    loaders: [
+      {
+        name: "url",
+        test: (source) => {
+          return typeof source === "string";
+        },
+        load: async (url) => {
+          const blob = await http.request({ url, responseType: "blob" });
+          const file = new File([blob], url, { type: blob.type });
+          try {
+            return await load(file);
+          } catch (error) {
+            throw new Error(`Failed to load source "${url}", ${error}`);
+          }
+        }
       }
-      return `url("data:image/svg+xml,${create(model.value.rotate ?? 0)}") 16 16, pointer`;
-    }
-    function rotatePoint2(point, origin, angle) {
-      const radian = angle * Math.PI / 180;
-      const cos = Math.cos(radian);
-      const sin = Math.sin(radian);
-      return {
-        x: (point.x - origin.x) * cos - (point.y - origin.y) * sin + origin.x,
-        y: (point.x - origin.x) * sin + (point.y - origin.y) * cos + origin.y
-      };
+    ]
+  };
+});
+const _view = definePlugin((editor) => {
+  const {
+    config
+  } = editor;
+  return {
+    name: "mce:view",
+    commands: [
+      { command: "view", handle: (view) => config.value[view] = !config.value[view] }
+    ],
+    hotkeys: [
+      { command: "view:pixelGrid", key: 'Shift+"' },
+      { command: "view:ruler", key: "Shift+R" }
+    ]
+  };
+});
+const _zoom = definePlugin((editor) => {
+  const {
+    registerConfig,
+    camera,
+    zoomTo,
+    exec,
+    config,
+    findFrame,
+    selection
+  } = editor;
+  registerConfig("zoomToFit", "contain");
+  function zoomToFrame(type, options) {
+    const value = findFrame(type);
+    if (value) {
+      selection.value = [value];
+      zoomTo(value, options);
     }
-    function getMidpoint(point1, point2) {
-      return {
-        x: (point2.x + point1.x) / 2,
-        y: (point2.y + point1.y) / 2
-      };
+  }
+  return {
+    name: "mce:zoom",
+    commands: [
+      { command: "zoomIn", handle: () => camera.value.addZoom(0.25) },
+      { command: "zoomOut", handle: () => camera.value.addZoom(-0.25) },
+      { command: "zoomTo100", handle: () => camera.value.setZoom(1) },
+      { command: "zoomToFit", handle: () => zoomTo("root", { mode: config.value.zoomToFit }) },
+      { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) },
+      { command: "zoomToNextFrame", handle: (options) => zoomToFrame("next", options) },
+      { command: "zoomToPreviousFrame", handle: (options) => zoomToFrame("previous", options) }
+    ],
+    hotkeys: [
+      { command: "zoomIn", key: "CmdOrCtrl+=" },
+      { command: "zoomOut", key: "CmdOrCtrl+-" },
+      { command: "zoomTo100", key: "CmdOrCtrl+0" },
+      { command: "zoomToFit", key: "Shift+1" },
+      { command: "zoomToSelection", key: "Shift+2" },
+      { command: "zoomToNextFrame", key: "N" },
+      { command: "zoomToPreviousFrame", key: "Shift+N" }
+    ],
+    events: {
+      setDoc: () => exec("zoomToFit")
     }
-    function getDistance(point1, point2) {
-      const dx = point2.x - point1.x;
-      const dy = point2.y - point1.y;
-      return (dx + dy >= 0 ? 1 : -1) * Math.sqrt(dx * dx + dy * dy);
+  };
+});
+const plugins = [
+  _arrange,
+  _autoNest,
+  _copyAs,
+  _drawingTool,
+  _edit,
+  _frame,
+  _gif,
+  _history,
+  _hover,
+  _html,
+  _image,
+  _import,
+  _json,
+  _layers,
+  _madeWith,
+  _menu,
+  _move,
+  _new,
+  _node,
+  _open,
+  _panels,
+  _pen,
+  _rotate,
+  _ruler,
+  _saveAs,
+  _scroll,
+  _selection,
+  _shape,
+  _slice,
+  _smartGuides,
+  _smartSelection,
+  _state,
+  _statusbar,
+  _text,
+  _timeline,
+  _toolbelt,
+  _transform,
+  _ui,
+  _url,
+  _view,
+  _zoom
+];
+class Editor extends Observable {
+  static injectionKey = /* @__PURE__ */ Symbol.for("EditorKey");
+  debug = ref(false);
+  onEmit;
+  plugins = /* @__PURE__ */ new Map();
+  pluginsComponents = computed(() => {
+    return {
+      overlay: this.getPlugins("overlay"),
+      panel: this.getPlugins("panel")
+    };
+  });
+  _setups = [];
+  constructor(options = {}) {
+    super();
+    this._setupObservable();
+    this._setupOptions(options);
+  }
+  _setupObservable() {
+    this.on = this.on.bind(this);
+    this.once = this.once.bind(this);
+    this.off = this.off.bind(this);
+    this.emit = this.emit.bind(this);
+  }
+  getPlugins = (type) => {
+    return Array.from(this.plugins.values()).flatMap((p) => p.components?.filter((c) => {
+      return c.type === type && c.ignore?.() !== true;
+    }) ?? []);
+  };
+  log = (...args) => {
+    if (this.debug.value) {
+      console.warn(`[mce][${(/* @__PURE__ */ new Date()).toLocaleTimeString()}]`, ...args);
     }
-    onMounted(async () => {
-      const vm = getCurrentInstance();
-      const root = vm?.proxy?.$el;
-      if (root && props.initialSize) {
-        await nextTick();
-        let width;
-        let height;
-        const style2 = getComputedStyle(root);
-        if (style2.width.endsWith("px") && style2.height.endsWith("px")) {
-          width = Number(style2.width.replace("px", ""));
-          height = Number(style2.height.replace("px", ""));
-        } else {
-          ({ width, height } = root.getBoundingClientRect());
-        }
-        if (width && height) {
-          model.value = { ...model.value, width, height };
-        } else if ("ResizeObserver" in globalThis) {
-          const observer = new ResizeObserver(([entry]) => {
-            if (entry.contentRect.width && entry.contentRect.height) {
-              model.value = {
-                ...model.value,
-                width: entry.contentRect.width,
-                height: entry.contentRect.height
-              };
-              observer.unobserve(root);
-            }
-          });
-          observer.observe(root);
+  };
+  emit = (event, ...args) => {
+    this.onEmit?.(event, ...args);
+    return super.emit(event, ...args);
+  };
+  _setupOptions(options) {
+    const {
+      debug = false,
+      plugins: plugins$1 = [],
+      configCacheInLocal
+    } = options;
+    this.debug.value = debug;
+    this.config = configCacheInLocal ? useLocalStorage("config", () => ({})) : ref({});
+    this._setups = [];
+    this._useMixins(
+      mixins,
+      options
+    );
+    this.use([
+      ...plugins,
+      ...plugins$1
+    ], options);
+  }
+  _useMixins(mixins2, options) {
+    const use = (mixin) => {
+      const result = mixin(this, options);
+      switch (typeof result) {
+        case "object":
+          if (Array.isArray(result)) {
+            result.map((v) => use(v));
+          } else {
+            Object.assign(this, result);
+          }
+          break;
+        case "function":
+        default:
+          if (result) {
+            this._setups.push(result);
+          }
+          break;
+      }
+    };
+    mixins2.forEach(use);
+  }
+  use(plugins2, options) {
+    const use = (plugin) => {
+      let result;
+      if (typeof plugin === "function") {
+        result = plugin(this, options);
+      } else {
+        result = plugin;
+      }
+      this.plugins.set(result.name, result);
+      const {
+        events,
+        commands = [],
+        hotkeys = [],
+        loaders = [],
+        exporters = [],
+        drawingTools = []
+      } = result;
+      this.registerCommand(commands);
+      this.registerHotkey(hotkeys);
+      this.registerLoader(loaders);
+      this.registerExporter(exporters);
+      this.registerDrawingTool(drawingTools);
+      if (events) {
+        for (const k in events) {
+          this.on(k, events[k]);
         }
       }
-    });
-    __expose({
-      start,
-      activeHandle,
-      transforming
-    });
-    function Diagonal() {
-      const handle = activeHandle.value;
-      if (!handle || !handle.startsWith("resize")) {
-        return void 0;
+    };
+    plugins2.forEach((p) => {
+      try {
+        use(p);
+      } catch (err) {
+        console.error(`Failed to use plugin`, err);
       }
-      switch (props.resizeStrategy) {
-        case "lockAspectRatio":
-          break;
-        case "lockAspectRatioDiagonal":
-          if (handle.split("-").length === 2) {
-            return void 0;
+    });
+  }
+  _setuped = false;
+  setup = async () => {
+    if (!this._setuped) {
+      this._setuped = true;
+      await Promise.all([
+        ...this._setups.map(async (setup) => {
+          try {
+            await setup();
+          } catch (err) {
+            console.error(`Failed to setup mixin`, err);
           }
-          break;
-        default:
-          return void 0;
+        }),
+        ...[...this.plugins.values()].map(async (p) => {
+          try {
+            await p.setup?.();
+          } catch (err) {
+            console.error(`Failed to setup ${p.name} plugin`, err);
+          }
+        })
+      ]);
+      this.emit("ready");
+    }
+  };
+  install = (app) => {
+    app.provide(Editor.injectionKey, this);
+  };
+}
+function useEditor() {
+  let editor = inject(Editor.injectionKey, null);
+  if (!editor) {
+    const _editor = getCurrentInstance()?.proxy?.editor;
+    if (_editor instanceof Editor) {
+      editor = _editor;
+    }
+  }
+  return editor;
+}
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "Floatbar",
+  props: {
+    ...makeMceOverlayProps({
+      offset: 8
+    })
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const {
+      elementSelection,
+      selectionAabbInDrawboard,
+      inEditorIs
+    } = useEditor();
+    const overlay = useTemplateRef("overlayTpl");
+    const style = computed(() => {
+      const location = props.location;
+      const aabb = selectionAabbInDrawboard.value;
+      if (location?.startsWith("top") || location?.startsWith("bottom")) {
+        return {
+          "--height": "auto",
+          "--width": `${aabb.width}px`
+        };
+      } else if (location?.startsWith("left") || location?.startsWith("right")) {
+        return {
+          "--height": `${aabb.height}px`,
+          "--width": "auto"
+        };
       }
-      if (handle === "resize-t" || handle === "resize-r" || handle === "resize-tr" || handle === "resize-bl") {
-        return h("line", {
-          class: "mce-transform-controls__diagonal",
-          x1: "100%",
-          y1: "0",
-          x2: "0",
-          y2: "100%"
-        });
-      } else if (handle === "resize-l" || handle === "resize-b" || handle === "resize-tl" || handle === "resize-br") {
-        return h("line", {
-          class: "mce-transform-controls__diagonal",
-          x1: "0",
-          y1: "0",
-          x2: "100%",
-          y2: "100%"
-        });
+      return {};
+    });
+    const offset2 = computed(() => {
+      if (elementSelection.value.some((v) => inEditorIs(v, "Frame")) || props.location?.startsWith("bottom")) {
+        return 32;
       }
-      return void 0;
+      return 8;
+    });
+    function updateLocation() {
+      overlay.value?.updateLocation();
     }
+    watch(selectionAabbInDrawboard, updateLocation, { deep: true });
+    __expose({
+      updateLocation
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        class: normalizeClass(["mce-transform-controls", [
-          transforming.value && "mce-transform-controls--transforming",
-          props.hideUi && "mce-transform-controls--hide-ui",
-          __props.resizeStrategy && `mce-transform-controls--${__props.resizeStrategy}`,
-          activeHandle.value && `mce-transform-controls--${activeHandle.value}`,
-          activeHandle.value === "move" && "mce-transform-controls--moving",
-          activeHandle.value?.startsWith("resize") && "mce-transform-controls--resizing",
-          activeHandle.value?.startsWith("rotate") && "mce-transform-controls--rotateing",
-          props.borderStyle && `mce-transform-controls--${props.borderStyle}`
-        ]]),
-        style: normalizeStyle$1(style.value)
+      return openBlock(), createBlock(_sfc_main$v, {
+        ref: "overlayTpl",
+        "content-style": style.value,
+        class: "mce-floatbar",
+        location: props.location,
+        middlewares: props.middlewares,
+        offset: offset2.value,
+        target: props.target,
+        attach: false,
+        "model-value": true
       }, {
         default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default", {
-            value: unref(modelValue),
-            props: {
-              onPointerdown: start
-            },
-            start
-          }),
-          (openBlock(), createElementBlock("svg", _hoisted_1$4, [
-            _cache[1] || (_cache[1] = createElementVNode("rect", {
-              width: "100%",
-              height: "100%",
-              fill: "none",
-              class: "mce-transform-controls__rect"
-            }, null, -1)),
-            createElementVNode("rect", {
-              class: "mce-transform-controls__rect",
-              width: "100%",
-              height: "100%",
-              fill: "none",
-              rx: model.value.borderRadius,
-              ry: model.value.borderRadius
-            }, null, 8, _hoisted_2$1),
-            createVNode(Diagonal),
-            createElementVNode("g", _hoisted_3$1, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
-                return openBlock(), createElementBlock(Fragment, { key: index }, [
-                  handle.shape ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    handle.shape === "rect" ? (openBlock(), createElementBlock("rect", {
-                      key: 0,
-                      x: handle.x,
-                      y: handle.y,
-                      width: handle.width,
-                      height: handle.height,
-                      "aria-label": handle.type,
-                      class: "mce-transform-controls__handle"
-                    }, null, 8, _hoisted_4)) : handle.width === handle.height ? (openBlock(), createElementBlock("circle", {
-                      key: 1,
-                      cx: handle.x + handle.width / 2,
-                      cy: handle.y + handle.width / 2,
-                      r: handle.width / 2,
-                      "aria-label": handle.type,
-                      class: "mce-transform-controls__handle"
-                    }, null, 8, _hoisted_5)) : (openBlock(), createElementBlock("rect", {
-                      key: 2,
-                      x: handle.x,
-                      y: handle.y,
-                      width: handle.width,
-                      height: handle.height,
-                      "aria-label": handle.type,
-                      rx: handle.width / 4,
-                      ry: handle.height / 4,
-                      class: "mce-transform-controls__handle"
-                    }, null, 8, _hoisted_6))
-                  ], 64)) : createCommentVNode("", true)
-                ], 64);
-              }), 128)),
-              __props.rotator ? (openBlock(), createElementBlock("g", {
-                key: 0,
-                transform: `matrix(1, 0, 0, 1, -32, ${model.value.height}) rotate(270 16 16)`,
-                class: "mce-transform-controls__rotator"
-              }, [..._cache[0] || (_cache[0] = [
-                createElementVNode("path", { d: "M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z" }, null, -1)
-              ])], 8, _hoisted_7)) : createCommentVNode("", true)
-            ]),
-            createElementVNode("g", _hoisted_8, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
-                return openBlock(), createElementBlock("rect", {
-                  key: index,
-                  ref_for: true,
-                  ref_key: "handlesRef",
-                  ref: handlesRef,
-                  x: handle.x,
-                  y: handle.y,
-                  width: handle.width,
-                  height: handle.height,
-                  "aria-label": handle.type,
-                  class: "mce-transform-controls__handle-rect",
-                  cursor: transforming.value ? "auto" : getCursor(handle.type),
-                  onPointerdown: (event) => start(event, index)
-                }, null, 40, _hoisted_9);
-              }), 128))
-            ]),
-            createElementVNode("g", _hoisted_10, [
-              renderSlot(_ctx.$slots, "svg", { box: model.value })
-            ])
-          ])),
-          tip.value ? (openBlock(), createElementBlock("div", _hoisted_11, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
+          unref(elementSelection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["class", "style"]);
+      }, 8, ["content-style", "location", "middlewares", "offset", "target"]);
     };
   }
 });
-const _hoisted_1$3 = { class: "mce-cropper" };
+const _hoisted_1$4 = { class: "mce-cropper" };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "Cropper",
   props: /* @__PURE__ */ mergeModels({
@@ -15995,7 +16248,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       ok();
     }
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", {
           class: "mce-cropper__source",
           style: normalizeStyle$1(sourceStyle.value)
@@ -16005,7 +16258,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ref: canvasRef
           }, null, 512)
         ], 4),
-        createVNode(_sfc_main$a, {
+        createVNode(_sfc_main$k, {
           modelValue: sourceTransform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sourceTransform.value = $event),
           class: "mce-cropper__transformable",
@@ -16050,6 +16303,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$3 = { class: "mce-selector" };
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -16303,11 +16557,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       transformable
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-selector__parent-obb",
+            class: "mce-selector__parent",
             style: normalizeStyle$1({
               borderColor: "currentColor",
               ...style
@@ -16317,7 +16571,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-selector__obb",
+            class: "mce-selector__node",
             style: normalizeStyle$1({
               borderColor: "currentcolor",
               ...style
@@ -16326,13 +16580,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         }), 128)) : createCommentVNode("", true),
         unref(state) === "selecting" ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: "mce-selector__selected-area",
+          class: "mce-selector__area",
           style: normalizeStyle$1({
             borderColor: "currentcolor",
             ...props.selectedArea.toCssStyle()
           })
         }, null, 4)) : createCommentVNode("", true),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, mergeProps({
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
           key: 2,
           ref: "transformableTpl"
         }, unref(config).transformControls, {
@@ -16364,7 +16618,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "default", { box: transform.value })
         ], 4)) : createCommentVNode("", true)
-      ], 64);
+      ]);
     };
   }
 });
@@ -16396,7 +16650,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       isActive
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$k, {
         modelValue: transform.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => transform.value = $event),
         class: "mce-float-panel",
@@ -16408,12 +16662,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", mergeProps({ class: "mce-float-panel__card" }, slotProps), [
             __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
               createElementVNode("div", null, toDisplayString(__props.title), 1),
-              createVNode(_sfc_main$y, {
+              createVNode(_sfc_main$z, {
                 icon: "",
                 onClick: _cache[0] || (_cache[0] = ($event) => isActive.value = false)
               }, {
                 default: withCtx(() => [
-                  createVNode(unref(_sfc_main$C), { icon: "$close" })
+                  createVNode(unref(_sfc_main$D), { icon: "$close" })
                 ]),
                 _: 1
               })
@@ -17037,7 +17291,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   _: 3
                 }, 8, ["selected-area", "resize-strategy"]),
                 createVNode(_sfc_main$2, { ref: "textEditorTpl" }, null, 512),
-                slots.floatbar ? (openBlock(), createBlock(_sfc_main$b, {
+                slots.floatbar ? (openBlock(), createBlock(_sfc_main$a, {
                   key: 0,
                   location: "top-start",
                   target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el,
@@ -17048,7 +17302,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                slots["floatbar-top"] ? (openBlock(), createBlock(_sfc_main$b, {
+                slots["floatbar-top"] ? (openBlock(), createBlock(_sfc_main$a, {
                   key: 1,
                   location: "top-start",
                   target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el,
@@ -17059,7 +17313,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
-                slots["floatbar-bottom"] ? (openBlock(), createBlock(_sfc_main$b, {
+                slots["floatbar-bottom"] ? (openBlock(), createBlock(_sfc_main$a, {
                   key: 2,
                   location: "bottom-start",
                   target: selector.value?.transformable?.$el,
@@ -17157,7 +17411,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       updateLocation
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, {
+      return openBlock(), createBlock(_sfc_main$v, {
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
@@ -17185,10 +17439,10 @@ export {
   _sfc_main as Dialog,
   Doc,
   Editor,
-  _sfc_main$w as EditorLayers,
+  _sfc_main$x as EditorLayers,
   _sfc_main$1 as EditorLayout,
   _sfc_main$4 as EditorLayoutItem,
-  _sfc_main$c as EditorToolbelt,
+  _sfc_main$b as EditorToolbelt,
   IconsSymbol,
   MceLayerItemKey,
   MceLayerKey,
@@ -17196,12 +17450,12 @@ export {
   MceLayoutKey,
   MceMenuSymbol,
   MceOverlaySymbol,
-  _sfc_main$t as Menu,
+  _sfc_main$u as Menu,
   Model,
-  _sfc_main$p as Ruler,
+  _sfc_main$q as Ruler,
   SUPPORTS_CLIPBOARD,
-  _sfc_main$n as Scrollbar,
-  _sfc_main$a as TransformControls,
+  _sfc_main$o as Scrollbar,
+  _sfc_main$k as TransformControls,
   USER_AGENT,
   boundingBoxToStyle,
   consoleError,