mce 0.15.24 → 0.15.26

package/dist/index.js

@@ -123,7 +123,7 @@ const _0_config_base = defineMixin((editor, options) => {
   registerConfig("frameOutline", false);
   registerConfig("frameGap", 48);
   registerConfig("typographyStrategy", "autoHeight");
-  registerConfig("handleShape", "rect");
+  registerConfig("transformControls", {});
   registerConfig("screenCenterOffset", { left: 0, top: 0, bottom: 0, right: 0 });
   registerConfig("localDb", false);
   return () => {
@@ -1515,6 +1515,14 @@ function findChildrenWithProvide(key, vnode) {
   }
   return [];
 }
+function isInputElement(target) {
+  const { tagName } = target;
+  const isInput = tagName === "INPUT" && !["checkbox", "radio", "range", "button", "file", "reset", "submit", "color"].includes(target.type);
+  if (target.isContentEditable || (isInput || tagName === "TEXTAREA" || tagName === "SELECT") && !target.readOnly) {
+    return true;
+  }
+  return false;
+}
 function isInputEvent(event) {
   if (!event)
     return false;
@@ -1522,10 +1530,8 @@ function isInputEvent(event) {
   if (!path && event.composedPath)
     path = event.composedPath();
   if (!path)
-    return false;
-  return path?.some(
-    (el) => ["INPUT", "TEXTAREA", "SELECT"].includes(el?.tagName) || el?.contentEditable === "true"
-  );
+    return isInputElement(event.target || event.srcElement);
+  return path?.some((el) => isInputElement(el));
 }
 function toKebabCase$1(str = "") {
   if (toKebabCase$1.cache.has(str))
@@ -1561,6 +1567,146 @@ const uuidv4Template = "10000000-1000-4000-8000" + -1e11;
 function uuidv4() {
   return uuidv4Template.replace(/[018]/g, (c) => (c ^ uint32() & 15 >> c / 4).toString(16));
 }
+const isff = typeof navigator !== "undefined" ? navigator.userAgent.toLowerCase().indexOf("firefox") > 0 : false;
+const _keyMap = {
+  "backspace": 8,
+  "⌫": 8,
+  "tab": 9,
+  "clear": 12,
+  "enter": 13,
+  "↩": 13,
+  "return": 13,
+  "esc": 27,
+  "escape": 27,
+  "space": 32,
+  "left": 37,
+  "up": 38,
+  "right": 39,
+  "down": 40,
+  /// https://w3c.github.io/uievents/#events-keyboard-key-location
+  "arrowup": 38,
+  "arrowdown": 40,
+  "arrowleft": 37,
+  "arrowright": 39,
+  "del": 46,
+  "delete": 46,
+  "ins": 45,
+  "insert": 45,
+  "home": 36,
+  "end": 35,
+  "pageup": 33,
+  "pagedown": 34,
+  "capslock": 20,
+  "num_0": 96,
+  "num_1": 97,
+  "num_2": 98,
+  "num_3": 99,
+  "num_4": 100,
+  "num_5": 101,
+  "num_6": 102,
+  "num_7": 103,
+  "num_8": 104,
+  "num_9": 105,
+  "num_multiply": 106,
+  "num_add": 107,
+  "num_enter": 108,
+  "num_subtract": 109,
+  "num_decimal": 110,
+  "num_divide": 111,
+  "⇪": 20,
+  ",": 188,
+  ".": 190,
+  "/": 191,
+  "`": 192,
+  "-": isff ? 173 : 189,
+  "=": isff ? 61 : 187,
+  ";": isff ? 59 : 186,
+  "'": 222,
+  "{": 219,
+  "}": 221,
+  "[": 219,
+  "]": 221,
+  "\\": 220
+};
+const _modifier = {
+  // shiftKey
+  "⇧": 16,
+  "shift": 16,
+  // altKey
+  "⌥": 18,
+  "alt": 18,
+  "option": 18,
+  // ctrlKey
+  "⌃": 17,
+  "ctrl": 17,
+  "control": 17,
+  // metaKey
+  "⌘": 91,
+  "cmd": 91,
+  "meta": 91,
+  "command": 91
+};
+const kbdMap = {
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  Slash: "/",
+  Semicolon: ";",
+  BracketLeft: "[",
+  BracketRight: "]",
+  Backslash: "\\",
+  Quote: "'",
+  Comma: ",",
+  Minus: "-",
+  Equal: "=",
+  Backspace: "⌫",
+  Enter: "⏎",
+  Escape: "Esc",
+  Dead: "N"
+};
+function getCharCode(x) {
+  let code = _keyMap[x.toLowerCase()] || _modifier[x.toLowerCase()] || x.toUpperCase().charCodeAt(0);
+  if (code === 93 || code === 224) {
+    code = 91;
+  }
+  if (code === 229) {
+    return 0;
+  }
+  return code;
+}
+function parseKey(key) {
+  return key.split("+").map((v) => {
+    switch (v) {
+      case "Meta":
+      case "Control":
+      case "CommandOrControl":
+        return "CmdOrCtrl";
+      case "Alt":
+      case "Shift":
+      case "CmdOrCtrl":
+        return v;
+      default:
+        return String.fromCharCode(getCharCode(v));
+    }
+  }).filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+}
+function parseKeyboardEvent(event) {
+  if (event.key.toLowerCase() === "capslock") {
+    return;
+  }
+  const { code } = event;
+  let key = event.keyCode || event.which || event.charCode;
+  if (code && /^Key[A-Z]$/.test(code)) {
+    key = code.charCodeAt(3);
+  }
+  return [
+    (event.metaKey || event.ctrlKey) && "CmdOrCtrl",
+    event.altKey && "Alt",
+    event.shiftKey && "Shift",
+    !["Meta", "Control", "Alt", "Shift"].includes(event.key) && String.fromCharCode(key)
+  ].filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+}
 const _1_hotkey = defineMixin((editor) => {
   const {
     registerConfig
@@ -1589,29 +1735,6 @@ const _1_hotkey = defineMixin((editor) => {
   function unregisterHotkey(command) {
     hotkeysData.value = hotkeysData.value.filter((v) => v.command !== command);
   }
-  const kbdMap = {
-    "ArrowUp": "↑",
-    "ArrowDown": "↓",
-    "ArrowLeft": "←",
-    "ArrowRight": "→",
-    "Slash": "/",
-    "Semicolon": ";",
-    "BracketLeft": "[",
-    "BracketRight": "]",
-    "Backslash": "\\",
-    "Quote": "'",
-    "Comma": ",",
-    "Minus": "-",
-    "Equal": "=",
-    "Backspace": "⌫",
-    "Enter": "⏎",
-    "Escape": "Esc",
-    "=": "+",
-    "º": "0",
-    "¡": "1",
-    "™": "2",
-    "Dead": "N"
-  };
   function getKbd(command) {
     if (!command) {
       return "";
@@ -1661,30 +1784,17 @@ const _1_hotkey = defineMixin((editor) => {
         if (isInputEvent(e)) {
           return;
         }
-        const eKey = [
-          (e.metaKey || e.ctrlKey) && "CmdOrCtrl",
-          e.altKey && "Alt",
-          e.shiftKey && "Shift",
-          !["Meta", "Control", "Alt", "Shift"].includes(e.key) && e.key
-        ].filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+        const eKey = parseKeyboardEvent(e);
         hotkeysData.value.forEach((hotkeyData) => {
           const command = hotkeyData.command;
           const hotkey = hotkeys.get(command);
           const keys = Array.isArray(hotkeyData.key) ? hotkeyData.key : [hotkeyData.key];
           keys.forEach((key) => {
-            const tKey = key.split("+").map((v) => {
-              switch (v) {
-                case "Meta":
-                case "Control":
-                case "CommandOrControl":
-                  return "CmdOrCtrl";
-                default:
-                  return v;
-              }
-            }).filter(Boolean).map((v) => v.toLowerCase()).sort().join("+");
+            const tKey = parseKey(key);
             if (eKey === tKey && (!hotkey?.when || hotkey.when(e))) {
               if (hotkey?.preventDefault !== false) {
                 e.preventDefault();
+                e.stopPropagation();
               }
               if (hotkey?.handle) {
                 hotkey.handle(e);
@@ -1705,22 +1815,36 @@ const _1_screen = defineMixin((editor) => {
     config,
     drawboardAabb
   } = editor;
-  const screenCenterOffset = computed(() => {
+  const screenControlsOffset = computed(() => {
     const offset2 = {
       left: 0,
       top: 0,
       bottom: 0,
-      right: 0,
-      ...config.value.screenCenterOffset
+      right: 0
     };
-    if (config.value.scrollbar) {
-      offset2.right += 8;
-      offset2.bottom += 8;
-    }
     if (config.value.ruler) {
       offset2.left += 16;
       offset2.top += 16;
     }
+    if (config.value.scrollbar) {
+      offset2.right += 8;
+      offset2.bottom += 8;
+    }
+    return offset2;
+  });
+  const screenCenterOffset = computed(() => {
+    const _screenControlsOffset = screenControlsOffset.value;
+    const offset2 = {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      ...config.value.screenCenterOffset
+    };
+    offset2.left += _screenControlsOffset.left;
+    offset2.top += _screenControlsOffset.top;
+    offset2.right += _screenControlsOffset.right;
+    offset2.bottom += _screenControlsOffset.bottom;
     return offset2;
   });
   const screenCenter = computed(() => {
@@ -1731,6 +1855,7 @@ const _1_screen = defineMixin((editor) => {
     };
   });
   Object.assign(editor, {
+    screenControlsOffset,
     screenCenterOffset,
     screenCenter
   });
@@ -1827,7 +1952,8 @@ const _2_box = defineMixin((editor) => {
     root,
     selection,
     getAncestorFrame,
-    drawboardAabb
+    drawboardAabb,
+    screenControlsOffset
   } = editor;
   function obbToFit(element) {
     const min = {
@@ -2010,15 +2136,18 @@ const _2_box = defineMixin((editor) => {
     return _aabb;
   }
   const viewportAabb = computed(() => {
+    const _camera = camera.value;
+    const { position, zoom } = _camera;
     noop(
-      camera.value.position.x,
-      camera.value.position.y,
-      camera.value.zoom.x,
-      camera.value.zoom.y
+      position.x,
+      position.y,
+      zoom.x,
+      zoom.y
     );
+    const { left, top, right, bottom } = screenControlsOffset.value;
     const { width, height } = drawboardAabb.value;
-    const p1 = camera.value.toGlobal({ x: 0, y: 0 });
-    const p2 = camera.value.toGlobal({ x: width, y: height });
+    const p1 = _camera.toGlobal({ x: left, y: top });
+    const p2 = _camera.toGlobal({ x: width - (right + left), y: height - (bottom + top) });
     return new Aabb2D({
       x: p1.x,
       y: p1.y,
@@ -3391,6 +3520,49 @@ const _4_2_frame = defineMixin((editor) => {
     findFrame,
     handleDragOutReparent
   });
+  return () => {
+    const {
+      on,
+      getGlobalPointer
+    } = editor;
+    const startContext = ref({});
+    on("selectionTransformStart", ({ elements }) => {
+      const ctx = {};
+      elements.forEach((el) => {
+        ctx[el.instanceId] = {
+          parent: el.getParent(),
+          index: el.getIndex()
+        };
+      });
+      startContext.value = ctx;
+    });
+    on("selectionTransforming", ({ handle, startEvent, elements }) => {
+      if (handle === "move" && !startEvent?.__FROM__) {
+        const idSet = /* @__PURE__ */ new Set();
+        elements.forEach((el) => {
+          if (isTopFrame(el)) {
+            idSet.add(el.instanceId);
+          } else {
+            idSet.add(el.findAncestor(isTopFrame)?.instanceId ?? 0);
+          }
+        });
+        if (idSet.size === 1) {
+          elements.forEach((element) => {
+            handleDragOutReparent(
+              element,
+              {
+                ...startContext.value[element.instanceId],
+                pointer: getGlobalPointer()
+              }
+            );
+          });
+        }
+      }
+    });
+    on("selectionTransformEnd", () => {
+      startContext.value = {};
+    });
+  };
 });
 const _4_3_element = defineMixin((editor) => {
   const {
@@ -3771,7 +3943,8 @@ const _scroll$1 = defineMixin((editor) => {
     selectionAabb,
     rootAabb,
     viewportAabb,
-    screenCenter
+    screenCenter,
+    screenCenterOffset
   } = editor;
   const scrollTo = async (target, options = {}) => {
     const {
@@ -3780,12 +3953,20 @@ const _scroll$1 = defineMixin((editor) => {
       duration = 500
     } = options;
     const _camera = camera.value;
+    const { position: _position, zoom } = _camera;
+    const oldPosition = { x: _position.x, y: _position.y };
     const _screenCenter = screenCenter.value;
     const offset2 = { x: 0, y: 0 };
-    let position = { x: 0, y: 0 };
-    if (typeof target === "object" && "x" in target && "y" in target) {
-      position.x = target.x;
-      position.y = target.y;
+    let targetPosition = {};
+    if (typeof target === "object") {
+      if ("x" in target) {
+        targetPosition.x = target.x;
+        offset2.x = -screenCenterOffset.value.left;
+      }
+      if ("y" in target) {
+        targetPosition.y = target.y;
+        offset2.y = -screenCenterOffset.value.top;
+      }
     } else {
       let aabb;
       if (Array.isArray(target)) {
@@ -3804,15 +3985,22 @@ const _scroll$1 = defineMixin((editor) => {
       if (intoView && viewportAabb.value.contains(aabb)) {
         return;
       }
-      position = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
+      targetPosition = { x: aabb.left + aabb.width / 2, y: aabb.top + aabb.height / 2 };
       offset2.x += -_screenCenter.x;
       offset2.y = -_screenCenter.y;
     }
-    position.x *= _camera.zoom.x;
-    position.x += offset2.x;
-    position.y *= _camera.zoom.y;
-    position.y += offset2.y;
-    const oldPosition = { x: _camera.position.x, y: _camera.position.y };
+    if (targetPosition.x !== void 0) {
+      targetPosition.x *= zoom.x;
+      targetPosition.x += offset2.x;
+    }
+    if (targetPosition.y !== void 0) {
+      targetPosition.y *= zoom.y;
+      targetPosition.y += offset2.y;
+    }
+    const position = {
+      ...oldPosition,
+      ...targetPosition
+    };
     switch (behavior) {
       case "smooth":
         await new Promise((resolve) => {
@@ -3825,7 +4013,7 @@ const _scroll$1 = defineMixin((editor) => {
             const elapsed = now - startTime;
             const progress = Math.min(elapsed / duration, 1);
             const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
-            _camera.position.set(
+            _position.set(
               oldPosition.x + positionDistance.x * ease,
               oldPosition.y + positionDistance.y * ease
             );
@@ -3840,7 +4028,7 @@ const _scroll$1 = defineMixin((editor) => {
         break;
       case "instant":
       default:
-        _camera.position.set(position.x, position.y);
+        _position.set(position.x, position.y);
         break;
     }
   };
@@ -3978,10 +4166,7 @@ const _zoom$1 = defineMixin((editor) => {
     const { width, height } = drawboardAabb.value;
     const tw = width - (offset2.left + offset2.right);
     const th = height - (offset2.top + offset2.bottom);
-    const sx = aabb.left;
-    const sy = aabb.top;
-    const sw = aabb.width;
-    const sh = aabb.height;
+    const [sx, sy, sw, sh] = aabb.toArray();
     if (!sw || !sh)
       return;
     const zw = tw / sw;
@@ -3990,10 +4175,22 @@ const _zoom$1 = defineMixin((editor) => {
     let targetZoom;
     if (typeof target === "number") {
       targetZoom = target;
-    } else if (mode === "cover") {
-      targetZoom = Math.max(zw, zh);
     } else {
-      targetZoom = Math.min(zw, zh);
+      switch (mode) {
+        case "width":
+          targetZoom = zw;
+          break;
+        case "height":
+          targetZoom = zh;
+          break;
+        case "cover":
+          targetZoom = Math.max(zw, zh);
+          break;
+        case "contain":
+        default:
+          targetZoom = Math.min(zw, zh);
+          break;
+      }
     }
     const oldZoom = Math.min(_camera.zoom.x, _camera.zoom.y);
     const newZoom = Math.min(
@@ -4196,12 +4393,12 @@ const _arrange = definePlugin((editor) => {
       { command: "sendBackward", key: "CmdOrCtrl+[" },
       { command: "bringToFront", key: "]" },
       { command: "sendToBack", key: "[" },
-      { command: "alignLeft", key: "Alt+a" },
-      { command: "alignRight", key: "Alt+d" },
-      { command: "alignTop", key: "Alt+w" },
-      { command: "alignBottom", key: "Alt+s" },
-      { command: "alignHorizontalCenter", key: "Alt+h" },
-      { command: "alignVerticalCenter", key: "Alt+v" }
+      { command: "alignLeft", key: "Alt+A" },
+      { command: "alignRight", key: "Alt+D" },
+      { command: "alignTop", key: "Alt+W" },
+      { command: "alignBottom", key: "Alt+S" },
+      { command: "alignHorizontalCenter", key: "Alt+H" },
+      { command: "alignVerticalCenter", key: "Alt+V" }
     ]
   };
 });
@@ -4539,10 +4736,10 @@ const _edit = definePlugin((editor, options) => {
       { command: "duplicate", handle: duplicate }
     ],
     hotkeys: [
-      { command: "copy", key: "CmdOrCtrl+c", editable: false },
-      { command: "cut", key: "CmdOrCtrl+x", editable: false },
-      { command: "paste", key: "CmdOrCtrl+v", editable: false, preventDefault: false },
-      { command: "duplicate", key: "CmdOrCtrl+d", editable: false }
+      { command: "copy", key: "CmdOrCtrl+C", editable: false },
+      { command: "cut", key: "CmdOrCtrl+X", editable: false },
+      { command: "paste", key: "CmdOrCtrl+V", editable: false, preventDefault: false },
+      { command: "duplicate", key: "CmdOrCtrl+D", editable: false }
     ],
     setup: () => {
       if (useClipboard) {
@@ -4560,33 +4757,6 @@ const _edit = definePlugin((editor, options) => {
     }
   };
 });
-const _enter = definePlugin((editor) => {
-  const {
-    selection,
-    isElement,
-    exec
-  } = editor;
-  async function _enter2() {
-    if (selection.value.length === 1) {
-      const node = selection.value[0];
-      if (isElement(node)) {
-        if (node.text.isValid()) {
-          await exec("startTyping");
-        }
-      }
-    }
-  }
-  const when = () => Boolean(selection.value.length > 0);
-  return {
-    name: "mce:enter",
-    commands: [
-      { command: "enter", handle: _enter2 }
-    ],
-    hotkeys: [
-      { command: "enter", key: ["Enter"], when }
-    ]
-  };
-});
 function makeIconProps() {
   return {
     icon: {
@@ -4675,6 +4845,7 @@ const aliases = {
   mouseLeftClick: "M13 9V1.07A8.01 8.01 0 0 1 19.75 7c.16.64.25 1.31.25 2zm4.66-2c-.48-1.35-1.43-2.5-2.66-3.19V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4zm7-6V1.07C7.06 1.56 4 4.92 4 9z",
   mouseRightClick: "M13 9V1.07c3.94.49 7 3.85 7 7.93zm-2 0V1.07A8.01 8.01 0 0 0 4.25 7C4.09 7.64 4 8.31 4 9zM6.34 7C6.82 5.65 7.78 4.5 9 3.81V7zM6 15v-2h12v2c0 1.59-.63 3.12-1.76 4.24A5.97 5.97 0 0 1 12 21a5.97 5.97 0 0 1-4.24-1.76A5.97 5.97 0 0 1 6 15m-2 0c0 2.12.84 4.16 2.34 5.66S9.88 23 12 23s4.16-.84 5.66-2.34S20 17.12 20 15v-4H4z",
   check: "M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z",
+  collapse: "m12 17.4l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.875-3.875q.575-.575 1.425-.575t1.425.575L17.3 19.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275zm0-10.8l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-3.875 3.875Q12.85 8.55 12 8.55t-1.425-.575L6.7 4.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275z",
   frame: "M17 9v6H7V9zm2-6h-2v3h2zM7 3H5v3h2zm16 4h-3v2h3zm-4 0H5v10h14zM4 7H1v2h3zm19 8h-3v2h3zM4 15H1v2h3zm15 3h-2v3h2zM7 18H5v3h2z",
   group: "M10 22q-.825 0-1.412-.587T8 20v-4H4q-.825 0-1.412-.587T2 14V4q0-.825.588-1.412T4 2h10q.825 0 1.413.588T16 4v4h4q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22zm0-2h10V10h-6V4H4v10h6zm2-8",
   shape: "M8 17.95q.25.025.488.038T9 18t.513-.012t.487-.038V20h10V10h-2.05q.025-.25.038-.488T18 9t-.012-.513T17.95 8H20q.825 0 1.413.588T22 10v10q0 .825-.587 1.413T20 22H10q-.825 0-1.412-.587T8 20zM9 16q-2.925 0-4.962-2.037T2 9t2.038-4.962T9 2t4.963 2.038T16 9t-2.037 4.963T9 16m0-2q2.075 0 3.538-1.463T14 9t-1.463-3.537T9 4T5.463 5.463T4 9t1.463 3.538T9 14m0-5",
@@ -4775,6 +4946,7 @@ function createLayer() {
   }
   provide(MceLayerKey, {
     selecting,
+    openedItems,
     dragging,
     droppingItemId,
     register: (vm, item) => {
@@ -5156,7 +5328,9 @@ const makeMceOverlayProps = propsFactory({
   attach: {
     type: [String, Boolean, Object],
     default: void 0
-  }
+  },
+  contentClass: Object,
+  contentStyle: Object
 }, "makeMceOverlayProps");
 let globalOverlayRoot;
 function getGlobalOverlayRoot() {
@@ -5287,8 +5461,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         const cloend = renderEngine.value.input._clonePointerEvent(event);
         cloend.srcElement = drawboardDom.value;
         cloend.target = frame.value;
-        cloend.__FORM__ = event.target;
-        exec("startPointerdown", cloend, {
+        cloend.__FROM__ = event.target;
+        exec("pointerDown", cloend, {
           allowTopFrame: true
         });
       }
@@ -5392,7 +5566,7 @@ const _frame = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "setActiveDrawingTool:frame", key: "f" }
+      { command: "setActiveDrawingTool:frame", key: "F" }
     ]
   };
 });
@@ -5510,8 +5684,8 @@ const _group = definePlugin((editor) => {
       { command: "ungroup", handle: ungroup }
     ],
     hotkeys: [
-      { command: "groupSelection", key: "CmdOrCtrl+g" },
-      { command: "frameSelection", key: "Alt+CmdOrCtrl+g" },
+      { command: "groupSelection", key: "CmdOrCtrl+G" },
+      { command: "frameSelection", key: "Alt+CmdOrCtrl+G" },
       { command: "ungroup", key: "CmdOrCtrl+Backspace" }
     ]
   };
@@ -5548,8 +5722,8 @@ const _history = definePlugin((editor) => {
       { command: "redo", handle: redo }
     ],
     hotkeys: [
-      { command: "undo", key: "CmdOrCtrl+z" },
-      { command: "redo", key: "Shift+CmdOrCtrl+z" }
+      { command: "undo", key: "CmdOrCtrl+Z" },
+      { command: "redo", key: "Shift+CmdOrCtrl+Z" }
     ]
   };
 });
@@ -5703,8 +5877,8 @@ const _image = definePlugin((editor) => {
       { name: "image", handle: (position) => exec("import", { position }) }
     ],
     hotkeys: [
-      { command: "copyAs:png", key: "Shift+CmdOrCtrl+c" },
-      { command: "setActiveDrawingTool:image", key: "Shift+CmdOrCtrl+k" }
+      { command: "copyAs:png", key: "Shift+CmdOrCtrl+C" },
+      { command: "setActiveDrawingTool:image", key: "Shift+CmdOrCtrl+K" }
     ]
   };
 });
@@ -5735,7 +5909,7 @@ const _import = definePlugin((editor) => {
       { command: "import", handle: _import2 }
     ],
     hotkeys: [
-      { command: "import", key: "CmdOrCtrl+i" }
+      { command: "import", key: "CmdOrCtrl+I" }
     ],
     setup: () => {
       const {
@@ -5929,13 +6103,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       dragging,
       dropping,
       onMousedown,
-      id
+      id,
+      openedItems
     } = useLayerItem({
       opened,
       node: computed(() => props.node),
       dom: computed(() => dom.value)
     });
-    const isActive = computed(() => selection.value.some((v) => v.equal(props.node)));
+    const selected = computed(() => selection.value.some((v) => v.equal(props.node)));
     const children = computed(() => props.node.children);
     const childrenLength = computed(() => children.value.length);
     const inputDom = ref();
@@ -6088,7 +6263,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ref: dom,
           class: normalizeClass(["mce-layer", [
             props.root && "mce-layer--root",
-            (__props.active || isActive.value) && "mce-layer--active",
+            (__props.active || selected.value) && "mce-layer--active",
+            selected.value && "mce-layer--selected",
             opened.value && "mce-layer--open",
             isHoverElement.value && "mce-layer--hover",
             unref(dropping) && "mce-layer--dropping"
@@ -6102,12 +6278,13 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           onMouseleave,
           onContextmenu
         }, [
-          _cache[4] || (_cache[4] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
-          _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
+          _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_3$b, [
               childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$C), {
                 key: 0,
+                class: "mce-layer__arrow",
                 icon: "$arrowRight",
                 onClick: onClickExpand,
                 onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
@@ -6150,13 +6327,29 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 "mce-layer__action--show": hovering.value || unref(isLock)(props.node) || !unref(isVisible)(props.node)
               }])
             }, [
-              props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$y, {
+                  key: 0,
+                  icon: "",
+                  class: "mce-layer__btn mce-layer__btn--show",
+                  onMousedown: _cache[2] || (_cache[2] = withModifiers(($event) => unref(openedItems).forEach((item, _id) => {
+                    if (_id !== unref(id)) {
+                      item.value = false;
+                    }
+                  }), ["prevent", "stop"]))
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(_sfc_main$C), { icon: "$collapse" })
+                  ]),
+                  _: 1
+                })) : createCommentVNode("", true)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 createVNode(_sfc_main$y, {
                   icon: "",
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": unref(isLock)(props.node)
                   }]),
-                  onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
+                  onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$C), {
@@ -6170,7 +6363,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["mce-layer__btn", {
                     "mce-layer__btn--show": !unref(isVisible)(props.node)
                   }]),
-                  onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
+                  onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$C), {
@@ -6188,7 +6381,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             key: i,
             node: children.value[childrenLength.value - i],
             indent: __props.root ? props.indent : props.indent + 1,
-            active: __props.active || isActive.value
+            active: __props.active || selected.value
           }, null, 8, ["node", "indent", "active"]);
         }), 128)) : createCommentVNode("", true)
       ], 64);
@@ -6275,7 +6468,7 @@ const _lock = definePlugin((editor) => {
       { command: "lock/unlock", handle: () => selection.value.forEach((el) => setLock(el, !isLock(el))) }
     ],
     hotkeys: [
-      { command: "lock/unlock", key: "Shift+CmdOrCtrl+l" }
+      { command: "lock/unlock", key: "Shift+CmdOrCtrl+L" }
     ]
   };
 });
@@ -6351,7 +6544,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
     };
     const target = computed(() => {
-      if (typeof props.target === "object" && !(props.target instanceof Element) && "x" in props.target && "y" in props.target) {
+      if (typeof props.target === "object" && !("getBoundingClientRect" in props.target) && !(props.target instanceof Element) && "x" in props.target && "y" in props.target) {
         return virtualElement;
       }
       return props.target ?? activatorEl.value;
@@ -6365,15 +6558,20 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       middleware: [
         middlewares.has("offset") && offset(() => props.offset ?? 0),
         middlewares.has("flip") && flip(),
-        middlewares.has("shift") && shift({ padding: 20 })
+        middlewares.has("shift") && shift({ crossAxis: true, padding: 20 })
       ].filter(Boolean)
     });
     const style = computed(() => {
       return {
-        ...floatingStyles.value,
         zIndex: 1500 + overlayItem.index.value
       };
     });
+    const contentStyle = computed(() => {
+      return {
+        ...floatingStyles.value,
+        ...props.contentStyle
+      };
+    });
     const activatorProps = computed(() => {
       return {
         ref: (el) => activatorEl.value = el
@@ -6421,11 +6619,16 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         }, [
           isActive.value ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
-            ref: "contentElTpl",
             class: "mce-overlay",
             style: style.value
           }, _ctx.$attrs), [
-            renderSlot(_ctx.$slots, "default")
+            createElementVNode("div", {
+              ref: "contentElTpl",
+              style: normalizeStyle$1(contentStyle.value),
+              class: normalizeClass(["mce-overlay-content", props.contentClass])
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 6)
           ], 16)) : createCommentVNode("", true)
         ], 8, ["disabled", "to"]))
       ], 64);
@@ -6528,6 +6731,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     }
     __expose({
       isActive,
+      activatorEl: computed(() => overlay.value?.activatorEl),
+      contentEl: computed(() => overlay.value?.contentEl),
       updateLocation
     });
     return (_ctx, _cache) => {
@@ -6681,6 +6886,24 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const isActive = useModel(__props, "modelValue");
     const position = useModel(__props, "position");
     const menuRef = useTemplateRef("menuTplRef");
+    const target = {
+      getBoundingClientRect() {
+        const box = menuRef.value?.contentEl?.getBoundingClientRect();
+        const { x, y } = position.value;
+        const width = 0;
+        const height = box?.height ?? 0;
+        return {
+          x,
+          y,
+          left: x,
+          top: y,
+          bottom: x + height,
+          right: y + width,
+          width,
+          height
+        };
+      }
+    };
     onBeforeMount(() => {
       registerCommand({ command: "openContextMenu", handle: onContextmenu });
     });
@@ -6726,14 +6949,15 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ref: "menuTplRef",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-        offset: 10,
         class: "mce-context-menu",
-        target: position.value,
-        location: "bottom-start",
+        offset: 10,
+        target,
+        location: "right-start",
         items: unref(contextMenu),
         style: normalizeStyle$1({
-          maxHeight: `${unref(drawboardAabb).height * 0.8}px`
+          "--max-height": `${unref(drawboardAabb).height * 0.8}px`
         }),
+        middlewares: ["offset", "shift"],
         "onClick:item": onClickItem
       }, {
         title: withCtx(({ item }) => [
@@ -6745,7 +6969,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           ], 64)) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["modelValue", "target", "items", "style"]);
+      }, 8, ["modelValue", "items", "style"]);
     };
   }
 });
@@ -7217,7 +7441,7 @@ const _open = definePlugin((editor) => {
       { command: "open", handle: open }
     ],
     hotkeys: [
-      { command: "open", key: "CmdOrCtrl+o" }
+      { command: "open", key: "CmdOrCtrl+O" }
     ]
   };
 });
@@ -7231,7 +7455,7 @@ const _panels = definePlugin((editor) => {
       { command: "panels", handle: (panel) => config.value[panel] = !config.value[panel] }
     ],
     hotkeys: [
-      { command: "panels:layers", key: "Alt+¡" }
+      { command: "panels:layers", key: "Alt+1" }
     ]
   };
 });
@@ -11304,8 +11528,8 @@ const _pen = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "setActiveDrawingTool:pen", key: "p" },
-      { command: "setActiveDrawingTool:pencil", key: "Shift+p" }
+      { command: "setActiveDrawingTool:pen", key: "P" },
+      { command: "setActiveDrawingTool:pencil", key: "Shift+P" }
     ]
   };
 });
@@ -11352,7 +11576,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const isActive = useModel(__props, "modelValue");
     const overlay = useTemplateRef("overlayTpl");
-    const classes = computed(() => {
+    const contentClass = computed(() => {
       const [side, align = "center"] = props.location.split("-");
       return [
         `mce-tooltip--side-${side}`,
@@ -11370,7 +11594,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-        class: normalizeClass(["mce-tooltip", classes.value]),
+        class: "mce-tooltip",
+        "content-class": contentClass.value,
         location: props.location,
         offset: props.offset,
         target: props.target,
@@ -11402,7 +11627,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["modelValue", "class", "location", "offset", "target", "attach"]);
+      ]), 1032, ["modelValue", "content-class", "location", "offset", "target", "attach"]);
     };
   }
 });
@@ -11949,6 +12174,36 @@ const _scroll = definePlugin((editor) => {
         ignore: () => !config.value.scrollbar
       }
     ]
+    // setup: () => {
+    //   const {
+    //     viewportAabb,
+    //     getGlobalPointer,
+    //     state,
+    //     camera,
+    //   } = editor
+    //
+    //   setInterval(() => {
+    //     if (state.value === 'transforming' || state.value === 'selecting') {
+    //       const _camera = camera.value
+    //       const { min, max } = viewportAabb.value
+    //       const { zoom } = _camera
+    //       const dist = 10 / zoom.x
+    //       const pointer = getGlobalPointer()
+    //       if (pointer.x - dist <= min.x) {
+    //         scrollTo({ x: min.x })
+    //       }
+    //       if (pointer.x + dist >= max.x) {
+    //         scrollTo({ x: max.x })
+    //       }
+    //       if (pointer.y - dist <= min.y) {
+    //         scrollTo({ y: min.y })
+    //       }
+    //       if (pointer.y + dist >= max.y) {
+    //         scrollTo({ y: max.y })
+    //       }
+    //     }
+    //   }, 100)
+    // },
   };
 });
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
@@ -12022,8 +12277,8 @@ const _selection = definePlugin((editor) => {
       { command: "selectNextSibling", handle: () => selectSibling("next") }
     ],
     hotkeys: [
-      { command: "selectAll", key: "CmdOrCtrl+a" },
-      { command: "deselectAll", key: "Shift+CmdOrCtrl+a" },
+      { command: "selectAll", key: "CmdOrCtrl+A" },
+      { command: "deselectAll", key: "Shift+CmdOrCtrl+A" },
       { command: "selectChildren", key: "Enter" },
       { command: "selectParent", key: "\\" },
       { command: "selectPreviousSibling", key: "Shift+Tab" },
@@ -12198,10 +12453,10 @@ const _shape = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "setActiveDrawingTool:rectangle", key: "r" },
-      { command: "setActiveDrawingTool:line", key: "l" },
-      { command: "setActiveDrawingTool:arrow", key: "Shift+l" },
-      { command: "setActiveDrawingTool:ellipse", key: "o" }
+      { command: "setActiveDrawingTool:rectangle", key: "R" },
+      { command: "setActiveDrawingTool:line", key: "L" },
+      { command: "setActiveDrawingTool:arrow", key: "Shift+L" },
+      { command: "setActiveDrawingTool:ellipse", key: "O" }
     ]
   };
 });
@@ -13548,8 +13803,8 @@ const _state = definePlugin((editor) => {
       { command: "setState", handle: (val) => state.value = val }
     ],
     hotkeys: [
-      { command: "setState:move", key: "v" },
-      { command: "setState:hand", key: "h" }
+      { command: "setState:move", key: "V" },
+      { command: "setState:hand", key: "H" }
     ]
   };
 });
@@ -13598,9 +13853,9 @@ 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 = { class: "mce-statusbar__item" };
-const _hoisted_10 = { class: "mce-statusbar__kbd" };
-const _hoisted_11 = { 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" };
@@ -13642,12 +13897,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               createVNode(unref(_sfc_main$C), { icon: "$mouseRightClick" })
             ]),
             _cache[2] || (_cache[2] = createElementVNode("span", null, " / ", -1)),
-            createElementVNode("div", _hoisted_9, [
-              createElementVNode("span", _hoisted_10, toDisplayString(unref(getKbd)("Escape")), 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, [
+            createElementVNode("div", _hoisted_11$1, [
               createElementVNode("span", _hoisted_12, toDisplayString(unref(getKbd)("Shift")), 1),
               createElementVNode("span", null, toDisplayString(unref(t)("constrainToAxis")), 1)
             ])
@@ -13780,7 +14035,7 @@ const _text = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "setActiveDrawingTool:text", key: "t" }
+      { command: "setActiveDrawingTool:text", key: "T" }
     ]
   };
 });
@@ -14111,7 +14366,7 @@ const _timeline = definePlugin((editor) => {
       }
     ],
     hotkeys: [
-      { command: "panels:timeline", key: "Alt+™" }
+      { command: "panels:timeline", key: "Alt+2" }
     ]
   };
 });
@@ -14308,8 +14563,18 @@ const _toolbelt = definePlugin((editor) => {
 });
 const _transform = definePlugin((editor) => {
   const {
-    elementSelection
+    elementSelection,
+    exec
   } = editor;
+  async function _enter() {
+    if (elementSelection.value.length === 1) {
+      const element = elementSelection.value[0];
+      if (element.text.isValid()) {
+        await exec("startTyping");
+      }
+    }
+  }
+  const when = () => Boolean(elementSelection.value.length > 0);
   function flipHorizontal() {
     elementSelection.value.forEach((el) => {
       el.style.scaleX = -el.style.scaleX;
@@ -14323,28 +14588,39 @@ const _transform = definePlugin((editor) => {
   return {
     name: "mce:transform",
     commands: [
+      { command: "enter", handle: _enter },
       { command: "flipHorizontal", handle: flipHorizontal },
       { command: "flipVertical", handle: flipVertical }
     ],
     hotkeys: [
-      { command: "flipHorizontal", key: "Shift+h" },
-      { command: "flipVertical", key: "Shift+v" }
+      { command: "enter", key: ["Enter"], when },
+      { command: "flipHorizontal", key: "Shift+H" },
+      { command: "flipVertical", key: "Shift+V" }
     ]
   };
 });
 const _ui = definePlugin((editor) => {
-  const {
-    selectionAabbInDrawboard,
-    emit
-  } = editor;
   return {
     name: "mce:ui",
     setup: () => {
-      watch(
-        selectionAabbInDrawboard,
-        (aabb) => emit("setTransform", { aabb }),
-        { deep: true }
-      );
+      const {
+        drawboardDom,
+        drawboardAabb,
+        drawboardPointer,
+        exec
+      } = 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);
+        exec("zoomToFit");
+      });
+      document.addEventListener("mousemove", (event) => {
+        drawboardPointer.value = new Vector2$1(
+          event.clientX - drawboardAabb.value.left,
+          event.clientY - drawboardAabb.value.top
+        );
+      });
     }
   };
 });
@@ -14417,7 +14693,7 @@ const _visibility = definePlugin((editor) => {
       { command: "hide/show", handle: hideOrShow }
     ],
     hotkeys: [
-      { command: "hide/show", key: "Shift+CmdOrCtrl+h" }
+      { command: "hide/show", key: "Shift+CmdOrCtrl+H" }
     ]
   };
 });
@@ -14425,9 +14701,7 @@ const _zoom = definePlugin((editor) => {
   const {
     registerConfig,
     camera,
-    drawboardAabb,
     zoomTo,
-    elementSelection,
     exec,
     config,
     findFrame,
@@ -14447,7 +14721,6 @@ const _zoom = definePlugin((editor) => {
       { command: "zoomIn", handle: () => camera.value.addZoom(0.25) },
       { command: "zoomOut", handle: () => camera.value.addZoom(-0.25) },
       { command: "zoomTo100", handle: () => camera.value.setZoom(1) },
-      { command: "zoomToCover", handle: () => zoomTo("root", { mode: "cover" }) },
       { command: "zoomToFit", handle: () => zoomTo("root", { mode: config.value.zoomToFit }) },
       { command: "zoomToSelection", handle: (options) => zoomTo("selection", options) },
       { command: "zoomToNextFrame", handle: (options) => zoomToFrame("next", options) },
@@ -14457,31 +14730,13 @@ const _zoom = definePlugin((editor) => {
       { command: "zoomIn", key: "CmdOrCtrl+=" },
       { command: "zoomOut", key: "CmdOrCtrl+-" },
       { command: "zoomTo100", key: "CmdOrCtrl+0" },
-      { command: "zoomToFit", key: "Shift+!" },
-      { command: "zoomToSelection", key: "Shift+@" },
-      { command: "zoomToNextFrame", key: "n" },
+      { command: "zoomToFit", key: "Shift+1" },
+      { command: "zoomToSelection", key: "Shift+2" },
+      { command: "zoomToNextFrame", key: "N" },
       { command: "zoomToPreviousFrame", key: "Shift+N" }
     ],
     events: {
-      setDoc: () => exec("zoomToFit"),
-      setCurrentFrame: () => {
-        if (elementSelection.value.length) {
-          exec("zoomToSelection");
-        } else {
-          exec("zoomToFit");
-        }
-      }
-    },
-    setup: () => {
-      const {
-        drawboardDom
-      } = 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);
-        exec("zoomToFit");
-      });
+      setDoc: () => exec("zoomToFit")
     }
   };
 });
@@ -14492,7 +14747,6 @@ const plugins = [
   _delete,
   _drawingTool,
   _edit,
-  _enter,
   _frame,
   _gif,
   _group,
@@ -14684,7 +14938,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "Floatbar",
   props: {
     ...makeMceOverlayProps({
-      middlewares: ["offset", "shift"],
       offset: 8
     })
   },
@@ -14701,11 +14954,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       const aabb = selectionAabbInDrawboard.value;
       if (location?.startsWith("top") || location?.startsWith("bottom")) {
         return {
-          width: `${aabb.width}px`
+          minWidth: `${aabb.width}px`
         };
       } else if (location?.startsWith("left") || location?.startsWith("right")) {
         return {
-          height: `${aabb.height}px`
+          minHeight: `${aabb.height}px`
         };
       }
       return {};
@@ -14726,7 +14979,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$u, {
         ref: "overlayTpl",
-        style: normalizeStyle$1(style.value),
+        "content-style": style.value,
         class: "mce-floatbar",
         location: props.location,
         middlewares: props.middlewares,
@@ -14739,33 +14992,37 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           unref(elementSelection).length > 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["style", "location", "middlewares", "offset", "target"]);
+      }, 8, ["content-style", "location", "middlewares", "offset", "target"]);
     };
   }
 });
-const _hoisted_1$4 = { class: "mce-transformable__svg" };
+const _hoisted_1$4 = { class: "mce-transform-controls__svg" };
 const _hoisted_2$1 = ["rx", "ry"];
-const _hoisted_3$1 = ["x", "y", "width", "height", "aria-label"];
-const _hoisted_4 = ["cx", "cy", "r", "aria-label"];
-const _hoisted_5 = { "pointer-events": "all" };
-const _hoisted_6 = ["x", "y", "width", "height", "aria-label", "cursor", "onPointerdown"];
-const _hoisted_7 = {
+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-transformable__svg-slot"
+  class: "mce-transform-controls__svg-slot"
 };
-const _hoisted_8 = {
+const _hoisted_11 = {
   key: 0,
-  class: "mce-transformable__tip"
+  class: "mce-transform-controls__tip"
 };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "Transformable",
+  __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 },
-    adjustableBorderRadius: { type: Boolean, default: false },
+    roundable: { type: Boolean },
     threshold: { default: 0 },
     resizeStrategy: {},
     handleStrategy: {},
@@ -14774,24 +15031,24 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     handles: { default: () => [
       "move",
       // resize
-      "resize-left",
-      "resize-top",
-      "resize-right",
-      "resize-bottom",
-      "resize-top-left",
-      "resize-top-right",
-      "resize-bottom-right",
-      "resize-bottom-left",
-      // border-radius
-      "border-radius-top-left",
-      "border-radius-top-right",
-      "border-radius-bottom-left",
-      "border-radius-bottom-right",
+      "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-top-left",
-      "rotate-top-right",
-      "rotate-bottom-left",
-      "rotate-bottom-right"
+      "rotate-tl",
+      "rotate-tr",
+      "rotate-bl",
+      "rotate-br"
     ] },
     initialSize: { type: Boolean },
     borderStyle: {},
@@ -14802,18 +15059,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const cursors = {
-      "rotate-top-left": (angle) => createCursor("rotate", 360 + angle),
-      "rotate-top-right": (angle) => createCursor("rotate", 90 + angle),
-      "rotate-bottom-left": (angle) => createCursor("rotate", 270 + angle),
-      "rotate-bottom-right": (angle) => createCursor("rotate", 180 + angle),
-      "resize-left": (angle) => createCursor("resizeXy", 180 + angle),
-      "resize-top": (angle) => createCursor("resizeXy", 90 + angle),
-      "resize-right": (angle) => createCursor("resizeXy", 180 + angle),
-      "resize-bottom": (angle) => createCursor("resizeXy", 90 + angle),
-      "resize-top-left": (angle) => createCursor("resizeBevel", 90 + angle),
-      "resize-top-right": (angle) => createCursor("resizeBevel", 180 + angle),
-      "resize-bottom-right": (angle) => createCursor("resizeBevel", 90 + angle),
-      "resize-bottom-left": (angle) => createCursor("resizeBevel", 180 + angle)
+      "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({
@@ -14830,25 +15087,25 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const transforming = ref(false);
     const activeHandle = ref();
     const computedHandles = computed(() => {
-      const size = 8;
+      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 shape = props.handleShape;
       const lines = [
-        { type: "top", points: [[0, 0], [1, 0]] },
-        { type: "right", points: [[1, 0], [1, 1]] },
-        { type: "bottom", points: [[0, 1], [1, 1]] },
-        { type: "left", points: [[0, 0], [0, 1]] }
+        { 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: "top", point: [0.5, 0] },
-        { type: "right", point: [1, 0.5] },
-        { type: "bottom", point: [0.5, 1] },
-        { type: "left", point: [0, 0.5] },
-        { type: "top-left", point: [0, 0] },
-        { type: "top-right", point: [1, 0] },
-        { type: "bottom-left", point: [0, 1] },
-        { type: "bottom-right", point: [1, 1] }
+        { 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;
@@ -14865,31 +15122,47 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         };
       });
       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 - size / 2,
-          y: item.point[1] * height - size / 2,
-          width: size,
-          height: size
+          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.split("-").length === 2);
+      const diagonalPointHandles = pointHandles.filter((item) => item.type.length === 2);
       const rotateHandles = diagonalPointHandles.map((item) => {
-        const sign2 = {
-          x: center.x - item.x > 0 ? 1 : -1,
-          y: center.y - item.y > 0 ? 1 : -1
-        };
+        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: item.x - sign2.x * size,
-          y: item.y - sign2.y * size
+          x,
+          y,
+          width: _w,
+          height: _h
         };
       });
       const minSize = Math.min(width, height);
-      const borderRadiusHandles = props.adjustableBorderRadius ? diagonalPointHandles.map((item) => {
+      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
@@ -14900,9 +15173,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         return {
           ...item,
           shape: "circle",
-          type: `border-radius-${item.type}`,
+          type: `round-${item.type}`,
           x: item.x + sign2.x * width / 2 * ws,
-          y: item.y + sign2.y * height / 2 * hs
+          y: item.y + sign2.y * height / 2 * hs,
+          width: _w,
+          height: _h
         };
       }) : [];
       let handles;
@@ -14912,8 +15187,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           ...lineHandles.map((item) => ({ ...item, type: "move" })),
           // resize
           ...pointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          // border-radius
-          ...borderRadiusHandles,
+          // round
+          ...roundedHandles,
           // rotate
           ...rotateHandles
         ];
@@ -14922,8 +15197,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           // resize
           ...lineHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
           ...diagonalPointHandles.map((item) => ({ ...item, type: `resize-${item.type}` })),
-          // border-radius
-          ...borderRadiusHandles,
+          // round
+          ...roundedHandles,
           // rotate
           ...rotateHandles
         ];
@@ -14971,11 +15246,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
       const handle = index === void 0 ? { type: "move", x: 0, y: 0, width: 0, height: 0 } : computedHandles.value[index];
       activeHandle.value = handle.type;
-      const isMove = handle.type === "move";
-      const isRotate = handle.type.startsWith("rotate");
-      const isBorderRadius = handle.type.startsWith("border-radius");
-      const isHorizontal = handle.type === "resize-left" || handle.type === "resize-right";
-      const isHorizontalVertical = handle.type.split("-").length === 2;
+      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
@@ -15009,7 +15287,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       if (!props.threshold && !transforming.value) {
         startTransform();
       }
-      function onMove(event2) {
+      function _onPointerMove(event2) {
         const updated = {};
         if (!startClientPoint) {
           startClientPoint = { x: event2.clientX, y: event2.clientY };
@@ -15041,7 +15319,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ) / (Math.PI / 180);
             updated.rotate = (rotate + endAngle - startAngle + 360) % 360;
           }
-        } else if (isBorderRadius) {
+        } else if (isRound) {
           const offset2 = rotatePoint2(rotatedOffset, { x: 0, y: 0 }, -rotate);
           const dx = -sign2.x * offset2.x;
           const dy = -sign2.y * offset2.y;
@@ -15118,15 +15396,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         model.value = newValue;
         emit("move", newValue, oldValue);
       }
-      function onEnd() {
-        window.removeEventListener("pointermove", onMove);
-        window.removeEventListener("pointerup", onEnd, true);
+      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", onMove);
-      window.addEventListener("pointerup", onEnd, true);
+      window.addEventListener("pointermove", _onPointerMove);
+      window.addEventListener("pointerup", _onPointerUp, true);
       return true;
     }
     const cursorMap = {
@@ -15220,17 +15498,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         default:
           return void 0;
       }
-      if (handle === "resize-top" || handle === "resize-right" || handle === "resize-top-right" || handle === "resize-bottom-left") {
+      if (handle === "resize-t" || handle === "resize-r" || handle === "resize-tr" || handle === "resize-bl") {
         return h("line", {
-          class: "mce-transformable__diagonal",
+          class: "mce-transform-controls__diagonal",
           x1: "100%",
           y1: "0",
           x2: "0",
           y2: "100%"
         });
-      } else if (handle === "resize-left" || handle === "resize-bottom" || handle === "resize-top-left" || handle === "resize-bottom-right") {
+      } else if (handle === "resize-l" || handle === "resize-b" || handle === "resize-tl" || handle === "resize-br") {
         return h("line", {
-          class: "mce-transformable__diagonal",
+          class: "mce-transform-controls__diagonal",
           x1: "0",
           y1: "0",
           x2: "100%",
@@ -15241,15 +15519,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        class: normalizeClass(["mce-transformable", [
-          transforming.value && "mce-transformable--transforming",
-          props.hideUi && "mce-transformable--hide-ui",
-          __props.resizeStrategy && `mce-transformable--${__props.resizeStrategy}`,
-          activeHandle.value && `mce-transformable--${activeHandle.value}`,
-          activeHandle.value === "move" && "mce-transformable--moving",
-          activeHandle.value?.startsWith("resize") && "mce-transformable--resizing",
-          activeHandle.value?.startsWith("rotate") && "mce-transformable--rotateing",
-          props.borderStyle && `mce-transformable--${props.borderStyle}`
+        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)
       }, {
@@ -15262,14 +15540,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             start
           }),
           (openBlock(), createElementBlock("svg", _hoisted_1$4, [
-            _cache[0] || (_cache[0] = createElementVNode("rect", {
+            _cache[1] || (_cache[1] = createElementVNode("rect", {
               width: "100%",
               height: "100%",
               fill: "none",
-              class: "mce-transformable__rect"
+              class: "mce-transform-controls__rect"
             }, null, -1)),
             createElementVNode("rect", {
-              class: "mce-transformable__rect",
+              class: "mce-transform-controls__rect",
               width: "100%",
               height: "100%",
               fill: "none",
@@ -15277,7 +15555,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               ry: model.value.borderRadius
             }, null, 8, _hoisted_2$1),
             createVNode(Diagonal),
-            createElementVNode("g", null, [
+            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 }, [
@@ -15288,20 +15566,37 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       width: handle.width,
                       height: handle.height,
                       "aria-label": handle.type,
-                      class: "mce-transformable__handle"
-                    }, null, 8, _hoisted_3$1)) : (openBlock(), createElementBlock("circle", {
+                      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-transformable__handle"
-                    }, null, 8, _hoisted_4))
+                      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))
+              }), 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_5, [
+            createElementVNode("g", _hoisted_8, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(computedHandles.value, (handle, index) => {
                 return openBlock(), createElementBlock("rect", {
                   key: index,
@@ -15313,17 +15608,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   width: handle.width,
                   height: handle.height,
                   "aria-label": handle.type,
-                  class: "mce-transformable__handle-rect",
+                  class: "mce-transform-controls__handle-rect",
                   cursor: transforming.value ? "auto" : getCursor(handle.type),
                   onPointerdown: (event) => start(event, index)
-                }, null, 40, _hoisted_6);
+                }, null, 40, _hoisted_9);
               }), 128))
             ]),
-            createElementVNode("g", _hoisted_7, [
+            createElementVNode("g", _hoisted_10, [
               renderSlot(_ctx.$slots, "svg", { box: model.value })
             ])
           ])),
-          tip.value ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
+          tip.value ? (openBlock(), createElementBlock("div", _hoisted_11, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
         ]),
         _: 3
       }, 8, ["class", "style"]);
@@ -15536,6 +15831,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const {
+      emit,
       isElement,
       state,
       resizeElement,
@@ -15553,17 +15849,15 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       config,
       snapThreshold,
       getSnapPoints,
-      handleDragOutReparent,
-      getGlobalPointer
+      hoverElement
     } = useEditor();
     const transformable = useTemplateRef("transformableTpl");
-    const startContext = ref({});
-    const currentEvent = ref();
+    const startEvent = ref();
     onBeforeMount(() => {
       registerCommand({
         command: "startTransform",
         handle: (event) => {
-          currentEvent.value = event;
+          startEvent.value = event;
           Boolean(transformable.value?.start(event));
         }
       });
@@ -15637,6 +15931,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }
       return currentPos;
     }
+    function createSelectionTransformContext() {
+      return {
+        startEvent: startEvent.value,
+        handle: transformable.value?.activeHandle ?? "move",
+        elements: elementSelection.value
+      };
+    }
     const transform = computed({
       get: () => _transform2.value,
       set: (val) => {
@@ -15684,7 +15985,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               element,
               newStyle.width / element.style.width,
               newStyle.height / element.style.height,
-              isFrame(element) ? void 0 : shape.isValid() ? { deep: true } : handle.split("-").length > 2 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
+              isFrame(element) ? void 0 : shape.isValid() ? { deep: true } : handle.split("-")[1].length > 1 ? { deep: true, textFontSizeToFit: true } : { deep: true, textToFit: true }
             );
             newStyle.width = element.style.width;
             newStyle.height = element.style.height;
@@ -15697,16 +15998,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }
             return false;
           });
-          if (handle === "move" && !currentEvent.value?.__FORM__) {
-            handleDragOutReparent(
-              element,
-              {
-                ...startContext.value[element.instanceId],
-                pointer: getGlobalPointer()
-              }
-            );
-          }
         });
+        emit("selectionTransforming", createSelectionTransformContext());
       }
     });
     const movable = computed(() => {
@@ -15724,19 +16017,15 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         return !isLock(element) && element.meta.rotatable !== false && element.meta.transformable !== false;
       });
     });
-    const adjustableBorderRadius = computed(() => {
-      const element = elementSelection.value[0];
-      return elementSelection.value.length === 1 && !isLock(element) && element.foreground.isValid();
+    const roundable = computed(() => {
+      if (elementSelection.value.length === 1) {
+        const element = elementSelection.value[0];
+        return hoverElement.value?.equal(element) && !isLock(element) && element.foreground.isValid();
+      }
+      return false;
     });
     function onStart() {
-      const ctx = {};
-      elementSelection.value.forEach((el) => {
-        ctx[el.instanceId] = {
-          parent: el.getParent(),
-          index: el.getIndex()
-        };
-      });
-      startContext.value = ctx;
+      emit("selectionTransformStart", createSelectionTransformContext());
     }
     function onMove() {
       if (!state.value) {
@@ -15747,7 +16036,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       if (state.value === "transforming") {
         state.value = void 0;
       }
-      startContext.value = {};
+      emit("selectionTransformEnd", createSelectionTransformContext());
     }
     function tipFormat() {
       const obb = elementSelection.value.length === 1 ? elementSelection.value[0].style : selectionObb.value;
@@ -15786,24 +16075,24 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             })
           }, null, 4);
         }), 128)),
-        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, {
+        transform.value.width && transform.value.height ? (openBlock(), createBlock(_sfc_main$a, mergeProps({
           key: 1,
-          ref: "transformableTpl",
+          ref: "transformableTpl"
+        }, unref(config).transformControls, {
           modelValue: transform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => transform.value = $event),
           movable: unref(state) !== "typing" && movable.value,
           resizable: unref(state) !== "typing" && resizable.value,
           rotatable: unref(state) !== "typing" && rotatable.value,
-          "adjustable-border-radius": adjustableBorderRadius.value,
+          roundable: unref(state) !== "typing" && roundable.value,
           "resize-strategy": props.resizeStrategy,
-          "handle-shape": unref(config).handleShape,
           class: "mce-selector__transform",
           "border-style": unref(elementSelection).length > 1 ? "dashed" : "solid",
           "tip-format": tipFormat,
           onStart,
           onMove,
           onEnd
-        }, createSlots({ _: 2 }, [
+        }), createSlots({ _: 2 }, [
           _ctx.$slots.transformable ? {
             name: "svg",
             fn: withCtx((slotProps) => [
@@ -15811,7 +16100,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["modelValue", "movable", "resizable", "rotatable", "adjustable-border-radius", "resize-strategy", "handle-shape", "border-style"])) : createCommentVNode("", true),
+        ]), 1040, ["modelValue", "movable", "resizable", "rotatable", "roundable", "resize-strategy", "border-style"])) : createCommentVNode("", true),
         transform.value.width && transform.value.height && _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "mce-selector__slot",
@@ -16104,7 +16393,7 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = {
   ref: "overlayContainerTpl",
-  class: "mce-editor__overlay-container"
+  class: "mce-overlay-container"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "EditorLayout",
@@ -16177,17 +16466,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       renderEngine.value.resize(width, height);
     });
     onBeforeMount(() => {
-      renderEngine.value.on("pointerdown", onPointerdown);
-      renderEngine.value.on("pointermove", onPointermove);
-      renderEngine.value.on("pointerover", onPointerover);
+      renderEngine.value.on("pointerdown", onEnginePointerDown);
+      renderEngine.value.on("pointermove", onEnginePointerMove);
+      renderEngine.value.on("pointerover", onEnginePointerOver);
     });
     onMounted(() => {
       bindRenderCanvas(canvas.value, drawboardDom.value);
     });
     onBeforeUnmount(() => {
-      renderEngine.value.off("pointerdown", onPointerdown);
-      renderEngine.value.off("pointermove", onPointermove);
-      renderEngine.value.off("pointerover", onPointerover);
+      renderEngine.value.off("pointerdown", onEnginePointerDown);
+      renderEngine.value.off("pointermove", onEnginePointerMove);
+      renderEngine.value.off("pointerover", onEnginePointerOver);
     });
     function onHover(event) {
       let cursor;
@@ -16211,14 +16500,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           hovered = result;
         }
       }
-      if (!(isElement(hovered) && !isLock(hovered) && !hovered.findAncestor((ancestor) => isLock(ancestor)) && !isTopFrame(hovered))) {
+      if (!(isElement(hovered) && !isLock(hovered) && !hovered.findAncestor((ancestor) => isLock(ancestor)) && (!hovered.children.some((node) => isElement(node)) || !isTopFrame(hovered)))) {
         hovered = void 0;
         cursor = void 0;
       }
       hoverElement.value = hovered;
       setCursor(cursor);
     }
-    function onPointerdown(downEvent, options = {}) {
+    function onEnginePointerDown(downEvent, options = {}) {
       if (downEvent.srcElement && downEvent.srcElement !== drawboardDom.value && downEvent.srcElement.dataset?.pointerdown_to_drawboard === void 0 || camera.value.spaceKey || ![0, 2].includes(downEvent.button)) {
         return;
       }
@@ -16226,7 +16515,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         allowTopFrame = false
       } = options;
       function isIncluded(node) {
-        return isElement(node) && !isLock(node) && (allowTopFrame || !isTopFrame(node)) && !node.findAncestor((ancestor) => isLock(ancestor));
+        return isElement(node) && !isLock(node) && (allowTopFrame || (!node.children.some((node2) => isElement(node2)) || !isTopFrame(node))) && !node.findAncestor((ancestor) => isLock(ancestor));
       }
       const drawing = state.value === "drawing";
       const hand = state.value === "hand";
@@ -16239,7 +16528,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       let isUp = false;
       let selected = [];
       let ctxState;
-      const inSelection = selectionAabbInDrawboard.value.contains({
+      const inSelection = allowTopFrame && elementSelection.value.some((node) => node.equal(element)) || selectionAabbInDrawboard.value.contains({
         x: start.x - drawboardAabb.value.left,
         y: start.y - drawboardAabb.value.top
       });
@@ -16323,7 +16612,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       function canStartDrag() {
         return !dragging && (Math.abs(current.x - start.x) >= 3 || Math.abs(current.y - start.y) >= 3);
       }
-      function onEngineMove(moveEvent) {
+      function _onEnginePointerMove(moveEvent) {
         if (drawing || hand) ;
         else {
           if (inSelection) {
@@ -16346,7 +16635,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           }
         }
       }
-      function onMove(moveEvent) {
+      function _onPointerMove(moveEvent) {
         current = { x: moveEvent.clientX, y: moveEvent.clientY };
         if (drawing) {
           drawingTool?.move?.(
@@ -16369,7 +16658,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
         prev = { ...current };
       }
-      async function onUp(upEvent) {
+      async function _onPointerUp(upEvent) {
         current = { x: upEvent.clientX, y: upEvent.clientY };
         if (drawing) {
           drawingTool?.end?.(
@@ -16402,30 +16691,26 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onHover(downEvent);
           }
         }
-        renderEngine.value.off("pointermove", onEngineMove);
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
+        renderEngine.value.off("pointermove", _onEnginePointerMove);
+        document.removeEventListener("pointermove", _onPointerMove);
+        document.removeEventListener("pointerup", _onPointerUp);
         isUp = true;
       }
-      renderEngine.value.on("pointermove", onEngineMove);
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
+      renderEngine.value.on("pointermove", _onEnginePointerMove);
+      document.addEventListener("pointermove", _onPointerMove);
+      document.addEventListener("pointerup", _onPointerUp);
     }
-    editor.registerCommand({ command: "startPointerdown", handle: onPointerdown });
-    function onPointermove(event) {
+    editor.registerCommand({ command: "pointerDown", handle: onEnginePointerDown });
+    function onEnginePointerMove(event) {
       if (event.srcElement !== drawboardDom.value) {
         return;
       }
-      drawboardPointer.value = new Vector2$1(
-        event.clientX - drawboardAabb.value.left,
-        event.clientY - drawboardAabb.value.top
-      );
       if (camera.value.grabbing || event.button === 1 || state.value && state.value !== "typing") {
         return;
       }
       onHover(event);
     }
-    function onPointerover(event) {
+    function onEnginePointerOver(event) {
       if (event.srcElement !== drawboardDom.value) {
         return;
       }
@@ -16478,36 +16763,33 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 }, ["prevent"]))
               }, [
                 createElementVNode("canvas", _hoisted_2, null, 512),
-                createVNode(_sfc_main$2, { ref: "textEditorTpl" }, null, 512),
-                createVNode(_sfc_main$7, {
-                  ref: "selectorTpl",
-                  "selected-area": selectedArea.value,
-                  "resize-strategy": resizeStrategy.value
+                slots.floatbar ? (openBlock(), createBlock(_sfc_main$b, {
+                  key: 0,
+                  location: "top-start",
+                  target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el,
+                  middlewares: ["offset", "shift"]
                 }, {
-                  transformable: withCtx(({ box }) => [
-                    renderSlot(_ctx.$slots, "transformer", mergeProps({ box }, slotProps))
-                  ]),
-                  default: withCtx(({ box }) => [
-                    createVNode(_sfc_main$8),
-                    renderSlot(_ctx.$slots, "selector", mergeProps({ box }, slotProps))
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "floatbar", normalizeProps(guardReactiveProps(slotProps)))
                   ]),
                   _: 3
-                }, 8, ["selected-area", "resize-strategy"]),
-                slots.floatbar || slots["floatbar-top"] ? (openBlock(), createBlock(_sfc_main$b, {
-                  key: 0,
+                }, 8, ["target"])) : createCommentVNode("", true),
+                slots["floatbar-top"] ? (openBlock(), createBlock(_sfc_main$b, {
+                  key: 1,
                   location: "top-start",
-                  target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el
+                  target: unref(state) === "typing" ? textEditor.value?.textEditor : selector.value?.transformable?.$el,
+                  middlewares: ["offset", "shift"]
                 }, {
                   default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "floatbar", normalizeProps(guardReactiveProps(slotProps))),
                     renderSlot(_ctx.$slots, "floatbar-top", normalizeProps(guardReactiveProps(slotProps)))
                   ]),
                   _: 3
                 }, 8, ["target"])) : createCommentVNode("", true),
                 slots["floatbar-bottom"] ? (openBlock(), createBlock(_sfc_main$b, {
-                  key: 1,
+                  key: 2,
                   location: "bottom-start",
-                  target: selector.value?.transformable?.$el
+                  target: selector.value?.transformable?.$el,
+                  middlewares: ["offset", "shift"]
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "floatbar-bottom", normalizeProps(guardReactiveProps(slotProps)))
@@ -16517,6 +16799,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pluginsComponents).overlay, (p, key) => {
                   return openBlock(), createBlock(resolveDynamicComponent(p.component), { key });
                 }), 128)),
+                createVNode(_sfc_main$2, { ref: "textEditorTpl" }, null, 512),
+                createVNode(_sfc_main$7, {
+                  ref: "selectorTpl",
+                  "selected-area": selectedArea.value,
+                  "resize-strategy": resizeStrategy.value
+                }, {
+                  transformable: withCtx(({ box }) => [
+                    renderSlot(_ctx.$slots, "transformer", mergeProps({ box }, slotProps))
+                  ]),
+                  default: withCtx(({ box }) => [
+                    createVNode(_sfc_main$8),
+                    renderSlot(_ctx.$slots, "selector", mergeProps({ box }, slotProps))
+                  ]),
+                  _: 3
+                }, 8, ["selected-area", "resize-strategy"]),
                 renderSlot(_ctx.$slots, "drawboard", normalizeProps(guardReactiveProps(slotProps)))
               ], 40, _hoisted_1)
             ]),
@@ -16642,7 +16939,7 @@ export {
   _sfc_main$p as Ruler,
   SUPPORTS_CLIPBOARD,
   _sfc_main$n as Scrollbar,
-  _sfc_main$a as Transformable,
+  _sfc_main$a as TransformControls,
   USER_AGENT,
   boundingBoxToStyle,
   consoleError,
@@ -16667,6 +16964,7 @@ export {
   imageExts,
   imageMimeTypeExtMap,
   isClickInsideElement,
+  isInputElement,
   isInputEvent,
   isMac,
   isWindows,