mce 0.17.0 → 0.17.1

package/dist/index.js

@@ -417,7 +417,6 @@ function propsFactory(props, source) {
     }, {});
   };
 }
-crypto.getRandomValues.bind(crypto);
 const _0_config_base = defineMixin((editor, options) => {
   const {
     registerConfig,
@@ -442,13 +441,13 @@ const _0_config_base = defineMixin((editor, options) => {
   });
   const checkerboardConfig = registerConfig("canvas.checkerboard", {
     default: {
-      enabled: false,
+      enabled: true,
       style: "grid"
     }
   });
   const pixelGridConfig = registerConfig("canvas.pixelGrid", {
     default: {
-      enabled: false
+      enabled: true
     }
   });
   const pixelateConfig = registerConfig("canvas.pixelate", {
@@ -463,7 +462,7 @@ const _0_config_base = defineMixin((editor, options) => {
   });
   const cameraConfig = registerConfig("viewport.camera", {
     default: {
-      enabled: false
+      enabled: true
     }
   });
   return () => {
@@ -758,7 +757,6 @@ class YDoc extends Observable {
   _yChildrenIds;
   _nodeMap = /* @__PURE__ */ new Map();
   indexeddb;
-  _ready = false;
   _isSelfTransaction(transaction) {
     if (transaction) {
       return !transaction.origin || transaction.origin === this._yDoc.clientID;
@@ -788,6 +786,9 @@ class YDoc extends Observable {
     this.indexeddb = await indexeddb.whenSynced;
     console.info("loaded data from indexed db");
   }
+  load() {
+    this._yDoc.load();
+  }
   transact(fn, should = true) {
     if (this._transacting !== void 0) {
       return fn();
@@ -809,18 +810,6 @@ class YDoc extends Observable {
     this._transacting = void 0;
     return result;
   }
-  async load(initFn) {
-    if (this._ready) {
-      return this;
-    }
-    this._ready = true;
-    await this.transact(async () => {
-      this._yDoc.load();
-      await initFn?.();
-    }, false);
-    this.undoManager.clear();
-    return this;
-  }
   _debug(..._args) {
   }
   _yChildrenChange(event, transaction) {
@@ -1111,11 +1100,12 @@ class YDoc extends Observable {
   }
 }
 class Doc extends Node$1 {
-  constructor(source, _local = false) {
+  _yDoc;
+  _source;
+  constructor(source) {
     super({
       name: "Doc"
     });
-    this._local = _local;
     let id;
     let _source;
     if (typeof source === "string") {
@@ -1143,11 +1133,10 @@ class Doc extends Node$1 {
     );
     _doc2.on("history", (um) => this.emit("history", um));
     _doc2._proxyRoot(this);
+    _doc2.load();
     this._yDoc = _doc2;
     this._source = _source;
   }
-  _yDoc;
-  _source;
   transact = (fn, should = true) => {
     return this._yDoc.transact(fn, should);
   };
@@ -1176,17 +1165,14 @@ class Doc extends Node$1 {
     this._yDoc._transacting = oldTransacting;
     return this;
   };
-  load = async () => {
+  loadIndexeddb = async () => {
+    console.log(this._yDoc.id);
+    await this._yDoc.loadIndexeddb();
+  };
+  init = () => {
     const source = this._source;
     this._source = void 0;
-    await this._yDoc.load(async () => {
-      if (this._local) {
-        try {
-          await this._yDoc.loadIndexeddb();
-        } catch (e) {
-          console.error(e);
-        }
-      }
+    this.transact(() => {
       if (source && typeof source !== "string") {
         if (Array.isArray(source)) {
           this.set({ children: source });
@@ -1194,7 +1180,9 @@ class Doc extends Node$1 {
           this.set(source);
         }
       }
-    });
+    }, false);
+    this.clearHistory();
+    return this;
   };
   destroy = () => {
     super.destroy();
@@ -1203,10 +1191,7 @@ class Doc extends Node$1 {
 }
 const _0_context = defineMixin((editor, options) => {
   const root = ref(
-    new Doc(
-      options.db?.local ? "doc" : void 0,
-      options.db?.local
-    )
+    new Doc(options.db?.local ? "doc" : void 0)
   );
   const docLoading = ref(false);
   const fonts = markRaw(new Fonts());
@@ -1378,7 +1363,6 @@ const _0_context = defineMixin((editor, options) => {
     onBeforeMount(() => {
       on("setDoc", onSetDoc);
       renderEngine.value.start();
-      root2.value.load();
       document.addEventListener("mousemove", onMouseMove);
     });
     onScopeDispose(() => {
@@ -1457,8 +1441,8 @@ const en = {
   "pen": "Pen",
   "pencil": "Pencil",
   "file": "File",
-  "new": "New",
-  "open": "Open",
+  "newDoc": "New",
+  "openDoc": "Open",
   "import": "Import",
   "export": "Export",
   "saveAs:png": "Save as PNG",
@@ -1576,8 +1560,8 @@ const zhHans = {
   "pen": "钢笔",
   "pencil": "铅笔",
   "file": "文件",
-  "new": "新建",
-  "open": "打开",
+  "newDoc": "新建",
+  "openDoc": "打开",
   "import": "导入",
   "export": "导出",
   "saveAs:png": "另存为 PNG",
@@ -1710,286 +1694,31 @@ const _1_frame = defineMixin((editor) => {
     getAncestorFrame
   });
 });
-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,
-  "<": 188,
-  ".": 190,
-  ">": 190,
-  "/": 191,
-  "?": 191,
-  "`": 192,
-  "~": 192,
-  "-": isff ? 173 : 189,
-  "_": isff ? 173 : 189,
-  "=": isff ? 61 : 187,
-  "+": isff ? 61 : 187,
-  ";": isff ? 59 : 186,
-  ":": isff ? 59 : 186,
-  "'": 222,
-  '"': 222,
-  "[": 219,
-  "{": 219,
-  "]": 221,
-  "}": 221,
-  "\\": 220,
-  "|": 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 "Ctrl":
-      case "CommandOrControl":
-      case "CmdOrCtrl":
-        return "CmdOrCtrl";
-      case "Alt":
-      case "Shift":
-        return v;
-      default:
-        return String.fromCharCode(getCharCode(v));
-    }
-  }).filter(Boolean).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).sort().join("+");
-}
-const _1_hotkey = defineMixin((editor) => {
+const _1_screen = defineMixin((editor) => {
   const {
+    config,
+    drawboardAabb,
     registerConfig
   } = editor;
-  const hotkeysData = registerConfig("hotkeys", {
-    default: () => []
+  const screenPadding = registerConfig("viewport.screenPadding", {
+    default: { left: 0, top: 0, bottom: 0, right: 0 }
   });
-  const hotkeys = reactive(/* @__PURE__ */ new Map());
-  function registerHotkey(value) {
-    if (Array.isArray(value)) {
-      value.forEach((item) => registerHotkey(item));
-    } else {
-      const {
-        when: _when,
-        handle: _handle,
-        ...hotkeyData
-      } = value;
-      const {
-        command
-      } = hotkeyData;
-      hotkeysData.value = [
-        ...hotkeysData.value.filter((v) => v.command !== command),
-        hotkeyData
-      ];
-      hotkeys.set(command, value);
-    }
-  }
-  function unregisterHotkey(command) {
-    hotkeysData.value = hotkeysData.value.filter((v) => v.command !== command);
-  }
-  function getKbd(command) {
-    if (!command) {
-      return "";
+  const screenControlsOffset = computed(() => {
+    const offset2 = {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0
+    };
+    if (config.value.ui.ruler.visible) {
+      offset2.left += 16;
+      offset2.top += 16;
     }
-    let keys;
-    const hotkey = hotkeysData.value.find((v) => v.command === command);
-    if (hotkey) {
-      keys = Array.isArray(hotkey.key) ? hotkey.key : [hotkey.key];
-    } else {
-      keys = [command];
+    if (config.value.ui.scrollbar.visible) {
+      offset2.right += 8;
+      offset2.bottom += 8;
     }
-    return keys[0].split("+").map((key) => {
-      switch (key) {
-        case "Control":
-          return isMac ? "⌃" : "Ctrl";
-        case "Ctrl":
-          return isMac ? "⌃" : "Ctrl";
-        case "Command":
-          return isMac ? "⌘" : isWindows ? "Win" : "Super";
-        case "Alt":
-          return isMac ? "⌥" : "Alt";
-        case "Shift":
-          return isMac ? "⇧" : "Shift";
-        case "CommandOrControl":
-        case "CmdOrCtrl":
-          return isMac ? "⌘" : "Ctrl";
-        default:
-          return kbdMap[key] ?? key.charAt(0).toUpperCase() + key.slice(1);
-      }
-    }).join("");
-  }
-  Object.assign(editor, {
-    hotkeys,
-    hotkeysData,
-    registerHotkey,
-    unregisterHotkey,
-    getKbd
-  });
-  return () => {
-    const {
-      exec
-    } = editor;
-    useEventListener(
-      isClient ? window : void 0,
-      "keydown",
-      (e) => {
-        if (isInputEvent(e)) {
-          return;
-        }
-        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 = parseKey(key);
-            if (eKey === tKey && (!hotkey?.when || hotkey.when(e))) {
-              if (hotkey?.preventDefault !== false) {
-                e.preventDefault();
-                e.stopPropagation();
-              }
-              if (hotkey?.handle) {
-                hotkey.handle(e);
-              } else {
-                exec(command);
-              }
-              editor.emit(`hotkey:${command}`, e);
-            }
-          });
-        });
-      },
-      false
-    );
-  };
-});
-const _1_screen = defineMixin((editor) => {
-  const {
-    config,
-    drawboardAabb,
-    registerConfig
-  } = editor;
-  const screenPadding = registerConfig("viewport.screenPadding", {
-    default: { left: 0, top: 0, bottom: 0, right: 0 }
-  });
-  const screenControlsOffset = computed(() => {
-    const offset2 = {
-      left: 0,
-      top: 0,
-      bottom: 0,
-      right: 0
-    };
-    if (config.value.ui.ruler.visible) {
-      offset2.left += 16;
-      offset2.top += 16;
-    }
-    if (config.value.ui.scrollbar.visible) {
-      offset2.right += 8;
-      offset2.bottom += 8;
-    }
-    return offset2;
+    return offset2;
   });
   const screenCenterOffset = computed(() => {
     const _screenControlsOffset = screenControlsOffset.value;
@@ -2318,162 +2047,6 @@ const _2_box = defineMixin((editor) => {
     isPointerInSelection
   });
 });
-const _2_export = defineMixin((editor) => {
-  const exporters = reactive(/* @__PURE__ */ new Map());
-  const exporting = ref(false);
-  const exportProgress = ref(0);
-  const registerExporter = (value) => {
-    if (Array.isArray(value)) {
-      value.forEach((item) => registerExporter(item));
-    } else {
-      exporters.set(value.name, value);
-    }
-  };
-  const unregisterExporter = (name) => {
-    exporters.delete(name);
-  };
-  const to = (name, options = {}) => {
-    const res = exporters.get(name)?.handle({
-      ...options,
-      onProgress: (progress) => {
-        exportProgress.value = progress;
-        options.onProgress?.(progress);
-      }
-    });
-    if (res instanceof Promise) {
-      exportProgress.value = 0;
-      exporting.value = true;
-      return res.finally(() => {
-        exporting.value = false;
-      });
-    } else {
-      return res;
-    }
-  };
-  Object.assign(editor, {
-    exporters,
-    exporting,
-    exportProgress,
-    registerExporter,
-    unregisterExporter,
-    export: to,
-    to
-  });
-});
-const _2_load = defineMixin((editor) => {
-  const {
-    state
-  } = editor;
-  const loaders = reactive(/* @__PURE__ */ new Map());
-  const registerLoader = (value) => {
-    if (Array.isArray(value)) {
-      value.forEach((v) => registerLoader(v));
-    } else {
-      loaders.set(value.name, value);
-    }
-  };
-  const unregisterLoader = (key) => {
-    loaders.delete(key);
-  };
-  const canLoad = async (source) => {
-    for (const loader of loaders.values()) {
-      if (await loader.test(source)) {
-        return true;
-      }
-    }
-    return false;
-  };
-  const load = async (source) => {
-    state.value = "loading";
-    const items = [];
-    let hasLoader = false;
-    try {
-      for (const loader of loaders.values()) {
-        if (await loader.test(source)) {
-          const res = await loader.load(source);
-          if (Array.isArray(res)) {
-            items.push(...res);
-          } else {
-            items.push(res);
-          }
-          hasLoader = true;
-          break;
-        }
-      }
-    } finally {
-      state.value = void 0;
-    }
-    if (!hasLoader) {
-      throw new Error(`Failed to load source "${source}"`);
-    }
-    return items;
-  };
-  const openFileDialog = (options = {}) => {
-    const {
-      multiple = false
-    } = options;
-    return new Promise((resolve) => {
-      const accepts = [];
-      for (const loader of loaders.values()) {
-        if (loader.accept) {
-          accepts.push(loader.accept);
-        }
-      }
-      const accept = accepts.join(",");
-      const { onChange, open } = useFileDialog({
-        accept,
-        reset: true,
-        multiple
-      });
-      onChange((files) => resolve(files ? Array.from(files) : []));
-      open();
-    });
-  };
-  Object.assign(editor, {
-    loaders,
-    registerLoader,
-    unregisterLoader,
-    canLoad,
-    load,
-    openFileDialog
-  });
-});
-const _3_view = defineMixin((editor) => {
-  const {
-    renderEngine
-  } = editor;
-  function bindRenderCanvas(canvas, eventTarget) {
-    function onRendered() {
-      const target = renderEngine.value.view;
-      if (!target.width || !target.height) {
-        return;
-      }
-      canvas.width = target.width;
-      canvas.height = target.height;
-      canvas.dataset.pixelRatio = target.dataset.pixelRatio;
-      canvas.getContext("2d")?.drawImage(target, 0, 0, target.width, target.height);
-    }
-    function unbind() {
-      if (canvas._onRendered) {
-        renderEngine.value.off("rendered", canvas._onRendered);
-      }
-      renderEngine.value.input.setTarget(renderEngine.value.view);
-    }
-    function bind() {
-      unbind();
-      canvas._onRendered = onRendered;
-      renderEngine.value.on("rendered", onRendered);
-      if (eventTarget) {
-        renderEngine.value.input.setTarget(eventTarget);
-      }
-    }
-    bind();
-    return unbind;
-  }
-  Object.assign(editor, {
-    bindRenderCanvas
-  });
-});
 const _4_0_node = defineMixin((editor) => {
   const {
     root,
@@ -2752,23 +2325,320 @@ const _4_3_element = defineMixin((editor) => {
       style.height *= scaleY;
       el2?.requestRender?.();
     }
-    handle(el);
-    if (options.deep) {
-      el.findOne((node) => {
-        if (isElement(node)) {
-          handle(node, true);
-        }
-        return false;
-      });
+    handle(el);
+    if (options.deep) {
+      el.findOne((node) => {
+        if (isElement(node)) {
+          handle(node, true);
+        }
+        return false;
+      });
+    }
+    options.textToFit && exec("textToFit", el);
+    options.textFontSizeToFit && exec("textFontSizeToFit", el, scaleX);
+  }
+  Object.assign(editor, {
+    addElement,
+    addElements: addElement,
+    resizeElement
+  });
+});
+const _exporter = defineMixin((editor) => {
+  const exporters = reactive(/* @__PURE__ */ new Map());
+  const exporting = ref(false);
+  const exportProgress = ref(0);
+  const registerExporter = (value) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => registerExporter(item));
+    } else {
+      exporters.set(value.name, value);
+    }
+  };
+  const unregisterExporter = (name) => {
+    exporters.delete(name);
+  };
+  const to = (name, options = {}) => {
+    const res = exporters.get(name)?.handle({
+      ...options,
+      onProgress: (progress) => {
+        exportProgress.value = progress;
+        options.onProgress?.(progress);
+      }
+    });
+    if (res instanceof Promise) {
+      exportProgress.value = 0;
+      exporting.value = true;
+      return res.finally(() => {
+        exporting.value = false;
+      });
+    } else {
+      return res;
+    }
+  };
+  Object.assign(editor, {
+    exporters,
+    exporting,
+    exportProgress,
+    registerExporter,
+    unregisterExporter,
+    export: to,
+    to
+  });
+});
+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,
+  "<": 188,
+  ".": 190,
+  ">": 190,
+  "/": 191,
+  "?": 191,
+  "`": 192,
+  "~": 192,
+  "-": isff ? 173 : 189,
+  "_": isff ? 173 : 189,
+  "=": isff ? 61 : 187,
+  "+": isff ? 61 : 187,
+  ";": isff ? 59 : 186,
+  ":": isff ? 59 : 186,
+  "'": 222,
+  '"': 222,
+  "[": 219,
+  "{": 219,
+  "]": 221,
+  "}": 221,
+  "\\": 220,
+  "|": 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 "Ctrl":
+      case "CommandOrControl":
+      case "CmdOrCtrl":
+        return "CmdOrCtrl";
+      case "Alt":
+      case "Shift":
+        return v;
+      default:
+        return String.fromCharCode(getCharCode(v));
+    }
+  }).filter(Boolean).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).sort().join("+");
+}
+const _hotkey = defineMixin((editor) => {
+  const {
+    registerConfig
+  } = editor;
+  const hotkeysData = registerConfig("hotkeys", {
+    default: () => []
+  });
+  const hotkeys = reactive(/* @__PURE__ */ new Map());
+  function registerHotkey(value) {
+    if (Array.isArray(value)) {
+      value.forEach((item) => registerHotkey(item));
+    } else {
+      const {
+        when: _when,
+        handle: _handle,
+        ...hotkeyData
+      } = value;
+      const {
+        command
+      } = hotkeyData;
+      hotkeysData.value = [
+        ...hotkeysData.value.filter((v) => v.command !== command),
+        hotkeyData
+      ];
+      hotkeys.set(command, value);
+    }
+  }
+  function unregisterHotkey(command) {
+    hotkeysData.value = hotkeysData.value.filter((v) => v.command !== command);
+  }
+  function getKbd(command) {
+    if (!command) {
+      return "";
+    }
+    let keys;
+    const hotkey = hotkeysData.value.find((v) => v.command === command);
+    if (hotkey) {
+      keys = Array.isArray(hotkey.key) ? hotkey.key : [hotkey.key];
+    } else {
+      keys = [command];
     }
-    options.textToFit && exec("textToFit", el);
-    options.textFontSizeToFit && exec("textFontSizeToFit", el, scaleX);
+    return keys[0].split("+").map((key) => {
+      switch (key) {
+        case "Control":
+          return isMac ? "⌃" : "Ctrl";
+        case "Ctrl":
+          return isMac ? "⌃" : "Ctrl";
+        case "Command":
+          return isMac ? "⌘" : isWindows ? "Win" : "Super";
+        case "Alt":
+          return isMac ? "⌥" : "Alt";
+        case "Shift":
+          return isMac ? "⇧" : "Shift";
+        case "CommandOrControl":
+        case "CmdOrCtrl":
+          return isMac ? "⌘" : "Ctrl";
+        default:
+          return kbdMap[key] ?? key.charAt(0).toUpperCase() + key.slice(1);
+      }
+    }).join("");
   }
   Object.assign(editor, {
-    addElement,
-    addElements: addElement,
-    resizeElement
+    hotkeys,
+    hotkeysData,
+    registerHotkey,
+    unregisterHotkey,
+    getKbd
   });
+  return () => {
+    const {
+      exec
+    } = editor;
+    useEventListener(
+      isClient ? window : void 0,
+      "keydown",
+      (e) => {
+        if (isInputEvent(e)) {
+          return;
+        }
+        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 = parseKey(key);
+            if (eKey === tKey && (!hotkey?.when || hotkey.when(e))) {
+              if (hotkey?.preventDefault !== false) {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+              if (hotkey?.handle) {
+                hotkey.handle(e);
+              } else {
+                exec(command);
+              }
+              editor.emit(`hotkey:${command}`, e);
+            }
+          });
+        });
+      },
+      false
+    );
+  };
 });
 function createHttp() {
   async function request(config) {
@@ -2836,7 +2706,85 @@ const _http = defineMixin((editor, options) => {
     http: options.http ?? createHttp()
   });
 });
-const _snap = defineMixin((editor) => {
+const _loader = defineMixin((editor) => {
+  const {
+    state
+  } = editor;
+  const loaders = reactive(/* @__PURE__ */ new Map());
+  const registerLoader = (value) => {
+    if (Array.isArray(value)) {
+      value.forEach((v) => registerLoader(v));
+    } else {
+      loaders.set(value.name, value);
+    }
+  };
+  const unregisterLoader = (key) => {
+    loaders.delete(key);
+  };
+  const canLoad = async (source) => {
+    for (const loader of loaders.values()) {
+      if (await loader.test(source)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const load = async (source) => {
+    state.value = "loading";
+    const items = [];
+    let hasLoader = false;
+    try {
+      for (const loader of loaders.values()) {
+        if (await loader.test(source)) {
+          const res = await loader.load(source);
+          if (Array.isArray(res)) {
+            items.push(...res);
+          } else {
+            items.push(res);
+          }
+          hasLoader = true;
+          break;
+        }
+      }
+    } finally {
+      state.value = void 0;
+    }
+    if (!hasLoader) {
+      throw new Error(`Failed to load source "${source}"`);
+    }
+    return items;
+  };
+  const openFileDialog = (options = {}) => {
+    const {
+      multiple = false
+    } = options;
+    return new Promise((resolve) => {
+      const accepts = [];
+      for (const loader of loaders.values()) {
+        if (loader.accept) {
+          accepts.push(loader.accept);
+        }
+      }
+      const accept = accepts.join(",");
+      const { onChange, open } = useFileDialog({
+        accept,
+        reset: true,
+        multiple
+      });
+      onChange((files) => resolve(files ? Array.from(files) : []));
+      open();
+    });
+  };
+  Object.assign(editor, {
+    loaders,
+    registerLoader,
+    unregisterLoader,
+    canLoad,
+    load,
+    openFileDialog
+  });
+});
+const _snapper = defineMixin((editor) => {
   const {
     camera
   } = editor;
@@ -3009,19 +2957,18 @@ const mixins = [
   _0_font,
   _0_locale,
   _1_frame,
-  _1_hotkey,
   _1_screen,
   _1_timeline,
   _1_upload,
   _2_box,
-  _2_export,
-  _2_load,
-  _3_view,
   _4_0_node,
   _4_2_frame,
   _4_3_element,
+  _exporter,
+  _hotkey,
   _http,
-  _snap,
+  _loader,
+  _snapper,
   _snapshot,
   _tool$1
 ];
@@ -3293,30 +3240,6 @@ const _autoNest = definePlugin((editor) => {
     }
   };
 });
-const _copyAs = definePlugin((editor) => {
-  const {
-    to,
-    exec,
-    exporters
-  } = editor;
-  const copyAs = async (key, options = {}) => {
-    let res = await to(key, {
-      selected: true,
-      ...options
-    });
-    const exporter = exporters.get(key);
-    if (exporter && typeof exporter.copyAs === "function") {
-      res = exporter.copyAs(res);
-    }
-    exec("copy", res);
-  };
-  return {
-    name: "mce:copyAs",
-    commands: [
-      { command: "copyAs", handle: copyAs }
-    ]
-  };
-});
 const _doc = definePlugin((editor, options) => {
   const {
     root,
@@ -3327,17 +3250,17 @@ const _doc = definePlugin((editor, options) => {
     config,
     to,
     waitUntilFontLoad,
-    fonts
+    fonts,
+    openFileDialog
   } = editor;
   const getDoc = () => {
     return to("json");
   };
-  const setDoc = async (source) => {
+  const setDoc = (source) => {
     fonts.clear();
-    await waitUntilFontLoad();
-    const oldRoot = root.value;
-    const _root = new Doc(source, config.value.db.local);
-    oldRoot.findOne((node) => {
+    const oldDoc = root.value;
+    const doc = source instanceof Doc ? source : new Doc(source);
+    oldDoc.findOne((node) => {
       if (node instanceof Element2D) {
         node.foreground.texture?.destroy();
         node.foreground.animatedTexture?.destroy();
@@ -3348,22 +3271,28 @@ const _doc = definePlugin((editor, options) => {
       }
       return false;
     });
-    root.value = _root;
-    oldRoot.remove();
-    await _root.load();
-    renderEngine.value.root.append(_root);
-    emit("setDoc", _root, oldRoot);
-    oldRoot.destroy();
-    return _root;
+    doc.init();
+    root.value = doc;
+    oldDoc.remove();
+    renderEngine.value.root.append(doc);
+    emit("setDoc", doc, oldDoc);
+    oldDoc.destroy();
+    return doc;
   };
   const loadDoc = async (source) => {
     docLoading.value = true;
     emit("docLoading", source);
     try {
-      const _doc2 = await setDoc(await load(source));
-      emit("docLoaded", source, _doc2);
+      await waitUntilFontLoad();
+      const data = await load(source);
+      const doc = new Doc(data);
+      if (config.value.db.local) {
+        await doc.loadIndexeddb();
+      }
+      setDoc(doc);
+      emit("docLoaded", source, doc);
       docLoading.value = false;
-      return _doc2;
+      return doc;
     } catch (err) {
       emit("docLoaded", source, err);
       docLoading.value = false;
@@ -3373,13 +3302,36 @@ const _doc = definePlugin((editor, options) => {
   const clearDoc = async () => {
     setDoc([]);
   };
+  const newDoc = async () => {
+    setDoc([]);
+  };
+  const openDoc = async () => {
+    const [file] = await openFileDialog();
+    if (file) {
+      await loadDoc(file);
+    }
+  };
+  Object.assign(editor, {
+    getDoc,
+    setDoc,
+    loadDoc,
+    clearDoc,
+    newDoc,
+    openDoc
+  });
   return {
     name: "mce:doc",
     commands: [
       { command: "getDoc", handle: getDoc },
       { command: "setDoc", handle: setDoc },
       { command: "loadDoc", handle: loadDoc },
-      { command: "clearDoc", handle: clearDoc }
+      { command: "clearDoc", handle: clearDoc },
+      { command: "newDoc", handle: clearDoc },
+      { command: "openDoc", handle: openDoc }
+    ],
+    hotkeys: [
+      { command: "newDoc", key: "Alt+CmdOrCtrl+Dead" },
+      { command: "openDoc", key: "CmdOrCtrl+O" }
     ],
     setup: async () => {
       const {
@@ -3387,6 +3339,10 @@ const _doc = definePlugin((editor, options) => {
       } = options;
       if (source) {
         await setDoc(source);
+      } else {
+        if (options.db?.local) {
+          await root.value.loadIndexeddb();
+        }
       }
     }
   };
@@ -3399,7 +3355,9 @@ const _edit = definePlugin((editor, options) => {
     canLoad,
     load,
     addElements,
-    hoverElement
+    hoverElement,
+    to,
+    exporters
   } = editor;
   const copiedData = ref();
   const useClipboard = options.clipboard !== false && SUPPORTS_CLIPBOARD;
@@ -3498,6 +3456,17 @@ const _edit = definePlugin((editor, options) => {
       }
     }
   };
+  const copyAs = async (key, options2 = {}) => {
+    let res = await to(key, {
+      selected: true,
+      ...options2
+    });
+    const exporter = exporters.get(key);
+    if (exporter && typeof exporter.copyAs === "function") {
+      res = exporter.copyAs(res);
+    }
+    exec("copy", res);
+  };
   const cut = async () => {
     await copy();
     exec("delete");
@@ -3629,6 +3598,7 @@ const _edit = definePlugin((editor, options) => {
       { command: "cancel", handle: cancel },
       { command: "delete", handle: _delete },
       { command: "copy", handle: copy },
+      { command: "copyAs", handle: copyAs },
       { command: "cut", handle: cut },
       { command: "paste", handle: paste },
       { command: "duplicate", handle: duplicate }
@@ -3755,8 +3725,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(resolveDynamicComponent(unref(iconData).component), {
         icon: unref(iconData).icon,
         tag: props.tag,
-        class: normalizeClass(["mce-icon", {
-          "mce-icon--disabled": props.disabled
+        class: normalizeClass(["m-icon", {
+          "m-icon--disabled": props.disabled
         }]),
         role: hasClick ? "button" : void 0,
         "aria-hidden": !hasClick,
@@ -3774,7 +3744,7 @@ const SvgIcon = defineComponent({
       return createVNode(props.tag, mergeProps(attrs, { style: null }), {
         default: () => [
           createElementVNode("svg", {
-            "class": "mce-icon__svg",
+            "class": "m-icon__svg",
             "xmlns": "http://www.w3.org/2000/svg",
             "viewBox": "0 0 24 24",
             "role": "img",
@@ -3884,8 +3854,8 @@ function useIcon(props) {
     iconData
   };
 }
-const MceLayerKey = /* @__PURE__ */ Symbol.for("mce:layer");
-const MceLayerItemKey = /* @__PURE__ */ Symbol.for("mce:layer-item");
+const LayerKey = /* @__PURE__ */ Symbol.for("layer");
+const LayerItemKey = /* @__PURE__ */ Symbol.for("layer-item");
 function createLayer() {
   const registered = ref([]);
   const nodeItems = /* @__PURE__ */ new Map();
@@ -3904,7 +3874,7 @@ function createLayer() {
     });
     return id;
   }
-  provide(MceLayerKey, {
+  provide(LayerKey, {
     selecting,
     openedItems,
     dragging,
@@ -3920,7 +3890,7 @@ function createLayer() {
       openedItems.set(id, opened);
       domItems.set(id, dom);
       registered.value.push(id);
-      const instances = findChildrenWithProvide(MceLayerItemKey, rootVm?.vnode);
+      const instances = findChildrenWithProvide(LayerItemKey, rootVm?.vnode);
       const instanceIndex = instances.indexOf(vm);
       if (instanceIndex > -1) {
         registered.value.splice(instanceIndex, 0, id);
@@ -3944,7 +3914,7 @@ function createLayer() {
         if (dragging.value) {
           const targets = e2.composedPath();
           const layer = targets.find((target) => {
-            return target instanceof HTMLElement && target.classList.contains("mce-layer");
+            return target instanceof HTMLElement && target.classList.contains("m-layer");
           });
           const id2 = layer?.dataset?.id;
           if (id2) {
@@ -3984,7 +3954,7 @@ function createLayer() {
   };
 }
 function useLayerItem(options) {
-  const root = inject(MceLayerKey);
+  const root = inject(LayerKey);
   if (!root)
     throw new Error("[mce] Could not find injected layer root");
   const id = `layer-item-${useId()}`;
@@ -3993,7 +3963,7 @@ function useLayerItem(options) {
     ...options
   };
   const vm = getCurrentInstance();
-  provide(MceLayerItemKey, { id });
+  provide(LayerItemKey, { id });
   root.register(vm, item);
   onBeforeUnmount(() => root.unregister(id));
   return {
@@ -4035,8 +4005,8 @@ function useResizeObserver(callback, box = "content") {
     contentRect: readonly(contentRect)
   };
 }
-const MceLayoutKey = /* @__PURE__ */ Symbol.for("mce:layout");
-const MceLayoutItemKey = /* @__PURE__ */ Symbol.for("mce:layout-item");
+const LayoutKey = /* @__PURE__ */ Symbol.for("layout");
+const LayoutItemKey = /* @__PURE__ */ Symbol.for("layout-item");
 const ROOT_ZINDEX = 500;
 function makeLayoutProps() {
   return {
@@ -4059,7 +4029,7 @@ function makeLayoutItemProps() {
   };
 }
 function useLayout() {
-  const layout = inject(MceLayoutKey);
+  const layout = inject(LayoutKey);
   if (!layout)
     throw new Error("[mce] Could not find injected layout");
   return {
@@ -4069,12 +4039,12 @@ function useLayout() {
   };
 }
 function useLayoutItem(options) {
-  const layout = inject(MceLayoutKey);
+  const layout = inject(LayoutKey);
   if (!layout)
     throw new Error("[mce] Could not find injected layout");
   const id = options.id ?? `layout-item-${useId()}`;
   const vm = getCurrentInstance();
-  provide(MceLayoutItemKey, { id });
+  provide(LayoutItemKey, { id });
   const isKeptAlive = shallowRef(false);
   onDeactivated(() => isKeptAlive.value = true);
   onActivated(() => isKeptAlive.value = false);
@@ -4111,7 +4081,7 @@ function generateLayers(layout, positions, layoutSizes, activeItems) {
   return layers;
 }
 function createLayout(props) {
-  const parentLayout = inject(MceLayoutKey, null);
+  const parentLayout = inject(LayoutKey, null);
   const rootZIndex = computed(() => parentLayout ? parentLayout.rootZIndex.value - 100 : ROOT_ZINDEX);
   const registered = ref([]);
   const positions = reactive(/* @__PURE__ */ new Map());
@@ -4155,10 +4125,10 @@ function createLayout(props) {
   });
   const mainStyles = toRef(() => {
     return {
-      "--mce-layout-left": convertToUnit(mainRect.value.left),
-      "--mce-layout-right": convertToUnit(mainRect.value.right),
-      "--mce-layout-top": convertToUnit(mainRect.value.top),
-      "--mce-layout-bottom": convertToUnit(mainRect.value.bottom),
+      "--m-layout-left": convertToUnit(mainRect.value.left),
+      "--m-layout-right": convertToUnit(mainRect.value.right),
+      "--m-layout-top": convertToUnit(mainRect.value.top),
+      "--m-layout-bottom": convertToUnit(mainRect.value.bottom),
       ...transitionsEnabled.value ? void 0 : { transition: "none" }
     };
   });
@@ -4183,7 +4153,7 @@ function createLayout(props) {
   onMounted(() => {
     isMounted.value = true;
   });
-  provide(MceLayoutKey, {
+  provide(LayoutKey, {
     register: (vm, {
       id,
       order,
@@ -4198,7 +4168,7 @@ function createLayout(props) {
       layoutSizes.set(id, layoutSize);
       activeItems.set(id, active);
       disableTransitions && disabledTransitions.set(id, disableTransitions);
-      const instances = findChildrenWithProvide(MceLayoutItemKey, rootVm?.vnode);
+      const instances = findChildrenWithProvide(LayoutItemKey, rootVm?.vnode);
       const instanceIndex = instances.indexOf(vm);
       if (instanceIndex > -1)
         registered.value.splice(instanceIndex, 0, id);
@@ -4257,8 +4227,8 @@ function createLayout(props) {
     rootZIndex
   });
   const layoutClasses = toRef(() => [
-    "mce-layout",
-    { "mce-layout--full-height": props.fullHeight }
+    "m-layout",
+    { "m-layout--full-height": props.fullHeight }
   ]);
   const layoutStyles = toRef(() => ({
     zIndex: parentLayout ? rootZIndex.value : void 0,
@@ -4430,15 +4400,15 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
         style: normalizeStyle$1(unref(getObb)(frame.value, "drawboard").toCssStyle()),
-        class: normalizeClass(["mce-frame", [
-          __props.outline && "mce-frame--outline",
-          unref(hoverElement)?.equal(frame.value) && "mce-frame--hover",
-          unref(selection).some((v) => v.equal(frame.value)) && "mce-frame--selected",
-          unref(isLock)(frame.value) && "mce-frame--lock"
+        class: normalizeClass(["m-frame", [
+          __props.outline && "m-frame--outline",
+          unref(hoverElement)?.equal(frame.value) && "m-frame--hover",
+          unref(selection).some((v) => v.equal(frame.value)) && "m-frame--selected",
+          unref(isLock)(frame.value) && "m-frame--lock"
         ]])
       }, [
         createElementVNode("div", {
-          class: "mce-frame__name",
+          class: "m-frame__name",
           onDblclick: withModifiers(onDblclick, ["prevent", "stop"]),
           onPointerdown,
           onPointerenter: _cache[2] || (_cache[2] = ($event) => !unref(state) && !unref(isLock)(frame.value) && (hoverElement.value = frame.value)),
@@ -4461,7 +4431,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$s = { class: "mce-frames" };
+const _hoisted_1$s = { class: "m-frames" };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "Frames",
   setup(__props) {
@@ -4594,45 +4564,6 @@ const _frame = definePlugin((editor) => {
     }
   };
 });
-const _gif = definePlugin((editor, options) => {
-  const {
-    assets: assets2,
-    fonts,
-    to
-  } = editor;
-  const gifWorkerUrl = options.gifWorkerUrl;
-  assets2.gifWorkerUrl = gifWorkerUrl;
-  return {
-    name: "mce:gif",
-    exporters: [
-      {
-        name: "gif",
-        saveAs: true,
-        handle: async (options2) => {
-          const { Encoder } = await import("modern-gif");
-          const { onProgress, ...restOptions } = options2;
-          const data = to("json", restOptions);
-          const { startTime, endTime } = data.meta;
-          const width = Math.floor(data.style.width);
-          const height = Math.floor(data.style.height);
-          const encoder = new Encoder({ width, height, workerUrl: gifWorkerUrl });
-          await render({
-            data,
-            width,
-            height,
-            fonts,
-            keyframes: Array.from({ length: ~~((endTime - startTime) / 100) }, (_, i) => startTime + i * 100),
-            onKeyframe: async (data2, { duration, progress }) => {
-              await encoder.encode({ data: data2, delay: duration });
-              onProgress?.(progress);
-            }
-          });
-          return await encoder.flush("blob");
-        }
-      }
-    ]
-  };
-});
 const _history = definePlugin((editor) => {
   const {
     root
@@ -4688,7 +4619,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return unref(hoverElement) && !unref(selection).some((node) => node.equal(unref(hoverElement))) ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: "mce-hover",
+        class: "m-hover",
         "data-name": unref(hoverElement).name,
         style: normalizeStyle$1({
           borderColor: "currentcolor",
@@ -4994,9 +4925,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["mce-btn", {
-          "mce-btn--active": __props.active,
-          "mce-btn--icon": __props.icon
+        class: normalizeClass(["m-btn", {
+          "m-btn--active": __props.active,
+          "m-btn--icon": __props.icon
         }])
       }, [
         renderSlot(_ctx.$slots, "default")
@@ -5005,8 +4936,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$q = ["data-id"];
-const _hoisted_2$c = { class: "mce-layer__content" };
-const _hoisted_3$b = { class: "mce-layer__prepend" };
+const _hoisted_2$c = { class: "m-layer__content" };
+const _hoisted_3$b = { class: "m-layer__prepend" };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MceLayer",
@@ -5212,13 +5143,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           ref_key: "dom",
           ref: dom,
-          class: normalizeClass(["mce-layer", [
-            props.root && "mce-layer--root",
-            (__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"
+          class: normalizeClass(["m-layer", [
+            props.root && "m-layer--root",
+            (__props.active || selected.value) && "m-layer--active",
+            selected.value && "m-layer--selected",
+            opened.value && "m-layer--open",
+            isHoverElement.value && "m-layer--hover",
+            unref(dropping) && "m-layer--dropping"
           ]]),
           style: normalizeStyle$1({
             "--indent-padding": `${props.indent * 16}px`
@@ -5229,13 +5160,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           onMouseleave,
           onContextmenu
         }, [
-          _cache[5] || (_cache[5] = createElementVNode("span", { class: "mce-layer__underlay" }, null, -1)),
-          _cache[6] || (_cache[6] = createElementVNode("span", { class: "mce-layer__overlay" }, null, -1)),
+          _cache[5] || (_cache[5] = createElementVNode("span", { class: "m-layer__underlay" }, null, -1)),
+          _cache[6] || (_cache[6] = createElementVNode("span", { class: "m-layer__overlay" }, null, -1)),
           createElementVNode("div", _hoisted_2$c, [
             createElementVNode("div", _hoisted_3$b, [
               childrenLength.value ? (openBlock(), createBlock(unref(_sfc_main$F), {
                 key: 0,
-                class: "mce-layer__arrow",
+                class: "m-layer__arrow",
                 icon: "$arrowRight",
                 onClick: onClickExpand,
                 onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
@@ -5243,13 +5174,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
               })) : createCommentVNode("", true)
             ]),
             createElementVNode("div", {
-              class: "mce-layer__thumbnail",
+              class: "m-layer__thumbnail",
               onDblclick: onDblclickThumbnail
             }, [
               createVNode(unref(_sfc_main$F), { icon: thumbnailIcon.value }, null, 8, ["icon"])
             ], 32),
             createElementVNode("div", {
-              class: "mce-layer__name",
+              class: "m-layer__name",
               onDblclick: onDblclickName
             }, [
               editing.value ? withDirectives((openBlock(), createElementBlock("input", {
@@ -5259,7 +5190,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => editValue.value = $event),
                 name: "layer-name",
                 type: "text",
-                class: "mce-layer__input",
+                class: "m-layer__input",
                 spellcheck: "false",
                 autocapitalize: "off",
                 autocorrect: "off",
@@ -5273,16 +5204,16 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
               }, toDisplayString(editValue.value || thumbnailName.value), 5)
             ], 32),
             createElementVNode("div", {
-              class: normalizeClass(["mce-layer__action", {
-                "mce-layer__action--hover": hovering.value,
-                "mce-layer__action--show": hovering.value || unref(isLock)(props.node) || !unref(isVisible)(props.node)
+              class: normalizeClass(["m-layer__action", {
+                "m-layer__action--hover": hovering.value,
+                "m-layer__action--show": hovering.value || unref(isLock)(props.node) || !unref(isVisible)(props.node)
               }])
             }, [
               props.root ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                 Array.from(unref(openedItems).values()).filter((v) => v.value).length > 1 ? (openBlock(), createBlock(_sfc_main$B, {
                   key: 0,
                   icon: "",
-                  class: "mce-layer__btn mce-layer__btn--show",
+                  class: "m-layer__btn m-layer__btn--show",
                   onMousedown: _cache[2] || (_cache[2] = withModifiers(($event) => unref(openedItems).forEach((item, _id) => {
                     if (_id !== unref(id)) {
                       item.value = false;
@@ -5297,8 +5228,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
               ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 createVNode(_sfc_main$B, {
                   icon: "",
-                  class: normalizeClass(["mce-layer__btn", {
-                    "mce-layer__btn--show": unref(isLock)(props.node)
+                  class: normalizeClass(["m-layer__btn", {
+                    "m-layer__btn--show": unref(isLock)(props.node)
                   }]),
                   onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(setLock)(props.node, !unref(isLock)(props.node)), ["prevent", "stop"]))
                 }, {
@@ -5311,8 +5242,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                 }, 8, ["class"]),
                 createVNode(_sfc_main$B, {
                   icon: "",
-                  class: normalizeClass(["mce-layer__btn", {
-                    "mce-layer__btn--show": !unref(isVisible)(props.node)
+                  class: normalizeClass(["m-layer__btn", {
+                    "m-layer__btn--show": !unref(isVisible)(props.node)
                   }]),
                   onClick: _cache[4] || (_cache[4] = withModifiers(($event) => unref(setVisible)(props.node, !unref(isVisible)(props.node)), ["prevent", "stop"]))
                 }, {
@@ -5339,8 +5270,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$p = { class: "mce-layers" };
-const _hoisted_2$b = { class: "mce-layers__wrapper" };
+const _hoisted_1$p = { class: "m-layers" };
+const _hoisted_2$b = { class: "m-layers__wrapper" };
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "Layers",
   setup(__props) {
@@ -5422,7 +5353,7 @@ const _export_sfc = (sfc, props) => {
 };
 const _sfc_main$y = {};
 const _hoisted_1$o = {
-  class: "mce-made-with",
+  class: "m-made-with",
   href: "https://github.com/qq15725/mce",
   target: "_blank"
 };
@@ -5456,7 +5387,7 @@ const _madeWith = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$n = { class: "mce-manage-memory" };
+const _hoisted_1$n = { class: "m-manage-memory" };
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "MemoryManager",
   setup(__props) {
@@ -5617,13 +5548,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         }, [
           isActive.value ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
-            class: "mce-overlay",
+            class: "m-overlay",
             style: style.value
           }, _ctx.$attrs), [
             createElementVNode("div", {
               ref: "contentElTpl",
               style: normalizeStyle$1(contentStyle.value),
-              class: normalizeClass(["mce-overlay-content", props.contentClass])
+              class: normalizeClass(["m-overlay-content", props.contentClass])
             }, [
               renderSlot(_ctx.$slots, "default")
             ], 6)
@@ -5637,20 +5568,20 @@ const _hoisted_1$m = ["onMouseenter"];
 const _hoisted_2$a = ["onClick"];
 const _hoisted_3$a = {
   key: 0,
-  class: "mce-list-item__checked"
+  class: "m-list-item__checked"
 };
 const _hoisted_4$4 = {
   key: 1,
-  class: "mce-list-item__prepend"
+  class: "m-list-item__prepend"
 };
-const _hoisted_5$3 = { class: "mce-list-item__title" };
+const _hoisted_5$3 = { class: "m-list-item__title" };
 const _hoisted_6$3 = {
   key: 2,
-  class: "mce-list-item__kbd"
+  class: "m-list-item__kbd"
 };
 const _hoisted_7$2 = {
   key: 3,
-  class: "mce-list-item__append"
+  class: "m-list-item__append"
 };
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
@@ -5743,7 +5674,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         offset: props.offset,
         target: props.target,
         attach: props.attach,
-        class: "mce-menu",
+        class: "m-menu",
         "onClick:outside": onClickOutside2
       }, {
         activator: withCtx((slotProps) => [
@@ -5757,7 +5688,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           __props.items?.length ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: "mce-list",
+            class: "m-list",
             onMouseleave
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
@@ -5766,18 +5697,18 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                   key: 0,
                   ref_for: true,
                   ref: (el) => menuItemRefs.value[index] = el ?? void 0,
-                  class: "mce-list__divider"
+                  class: "m-list__divider"
                 }, null, 512)) : (openBlock(), createElementBlock("div", {
                   key: 1,
                   ref_for: true,
                   ref: (el) => menuItemRefs.value[index] = el ?? void 0,
-                  class: "mce-list__item",
+                  class: "m-list__item",
                   onMouseenter: ($event) => onMouseenter(item, index)
                 }, [
                   createElementVNode("div", {
-                    class: normalizeClass(["mce-list-item", [
-                      item.disabled && "mce-list-item--disabled",
-                      opened.value === index && "mce-list-item--opened"
+                    class: normalizeClass(["m-list-item", [
+                      item.disabled && "m-list-item--disabled",
+                      opened.value === index && "m-list-item--opened"
                     ]]),
                     onClick: (e) => onClickItem(item, index, e)
                   }, [
@@ -5947,7 +5878,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         ref: "menuTplRef",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-        class: "mce-context-menu",
+        class: "m-context-menu",
         offset: 10,
         target,
         location: "right-start",
@@ -5995,8 +5926,8 @@ const _menu = definePlugin((editor, options) => {
   const fileMenu = computed(() => ({
     key: "file",
     children: [
-      { key: "new" },
-      { key: "open" },
+      { key: "newDoc" },
+      { key: "openDoc" },
       { type: "divider" },
       { key: "import" },
       exportMenu.value.children.length && exportMenu.value
@@ -6266,26 +6197,9 @@ const _menu = definePlugin((editor, options) => {
     ]
   };
 });
-const _new = definePlugin((editor) => {
-  const {
-    exec
-  } = editor;
-  function _new2() {
-    exec("setDoc", []);
-  }
-  return {
-    name: "mce:new",
-    commands: [
-      { command: "new", handle: _new2 }
-    ],
-    hotkeys: [
-      { command: "new", key: "Alt+CmdOrCtrl+Dead" }
-    ]
-  };
-});
-const _hoisted_1$l = { class: "mce-creator" };
-const _hoisted_2$9 = { class: "mce-creator__tree" };
-const _hoisted_3$9 = { class: "mce-creator__actions" };
+const _hoisted_1$l = { class: "m-creator" };
+const _hoisted_2$9 = { class: "m-creator__tree" };
+const _hoisted_3$9 = { class: "m-creator__actions" };
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "Creator",
   props: {
@@ -6353,8 +6267,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       return [
         h("div", {
           class: [
-            "mce-creator__node",
-            activeNodeName.value === node.name && "mce-creator__node--active"
+            "m-creator__node",
+            activeNodeName.value === node.name && "m-creator__node--active"
           ],
           style: {
             "--indent-padding": `${indent * 16}px`
@@ -6422,27 +6336,6 @@ const _node = definePlugin((editor) => {
     ]
   };
 });
-const _open = definePlugin((editor) => {
-  const {
-    openFileDialog,
-    exec
-  } = editor;
-  async function open() {
-    const [file] = await openFileDialog();
-    if (file) {
-      await exec("loadDoc", file);
-    }
-  }
-  return {
-    name: "mce:open",
-    commands: [
-      { command: "open", handle: open }
-    ],
-    hotkeys: [
-      { command: "open", key: "CmdOrCtrl+O" }
-    ]
-  };
-});
 function earcut(data, holeIndices, dim = 2) {
   const hasHoles = holeIndices && holeIndices.length;
   const outerLen = hasHoles ? holeIndices[0] * dim : data.length;
@@ -10519,12 +10412,12 @@ const _pen = definePlugin((editor) => {
 });
 const _hoisted_1$k = {
   key: 0,
-  class: "mce-tooltip__arrow"
+  class: "m-tooltip__arrow"
 };
-const _hoisted_2$8 = { class: "mce-tooltip__content" };
+const _hoisted_2$8 = { class: "m-tooltip__content" };
 const _hoisted_3$8 = {
   key: 0,
-  class: "mce-tooltip__kbd"
+  class: "m-tooltip__kbd"
 };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "Tooltip",
@@ -10546,8 +10439,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const contentClass = computed(() => {
       const [side, align = "center"] = props.location.split("-");
       return [
-        `mce-tooltip--side-${side}`,
-        `mce-tooltip--align-${align}`
+        `m-tooltip--side-${side}`,
+        `m-tooltip--align-${align}`
       ];
     });
     function updateLocation() {
@@ -10561,7 +10454,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ref: "overlayTpl",
         modelValue: isActive.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
-        class: "mce-tooltip",
+        class: "m-tooltip",
         "content-class": contentClass.value,
         location: props.location,
         offset: props.offset,
@@ -10643,7 +10536,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     });
     const borderColor = computed(() => props.borderColor ?? colors.border);
     const textColor = computed(() => props.textColor ?? colors.text);
-    const lineColor = computed(() => props.lineColor ?? "rgb(var(--mce-theme-secondary))");
+    const lineColor = computed(() => props.lineColor ?? "rgb(var(--m-theme-secondary))");
     function drawSelected() {
       if (!props.selected?.width || !props.selected?.height)
         return;
@@ -10871,8 +10764,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         withDirectives((openBlock(), createElementBlock("div", mergeProps({
-          class: ["mce-ruler", [
-            `mce-ruler--${props.vertical ? "vertical" : "horizontal"}`
+          class: ["m-ruler", [
+            `m-ruler--${props.vertical ? "vertical" : "horizontal"}`
           ]],
           style: { "--size": `${props.size}px` }
         }, unref(attrs), {
@@ -10882,7 +10775,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         }), [
           createElementVNode("canvas", {
             ref: "canvasTpl",
-            class: "mce-ruler__canvas",
+            class: "m-ruler__canvas",
             width: props.size,
             height: props.size
           }, null, 8, _hoisted_1$j)
@@ -10892,11 +10785,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: normalizeClass(["mce-ruler-refline", {
-              "mce-ruler-refline--vertical": props.vertical,
-              "mce-ruler-refline--horizontal": !props.vertical,
-              "mce-ruler-refline--temp": item === tempLine.value,
-              "mce-ruler-refline--locked": props.locked
+            class: normalizeClass(["m-ruler-refline", {
+              "m-ruler-refline--vertical": props.vertical,
+              "m-ruler-refline--horizontal": !props.vertical,
+              "m-ruler-refline--temp": item === tempLine.value,
+              "m-ruler-refline--locked": props.locked
             }]),
             style: normalizeStyle$1({
               [props.vertical ? "height" : "width"]: void 0,
@@ -10926,7 +10819,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = { class: "mce-rulers" };
+const _hoisted_1$i = { class: "m-rulers" };
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "Rulers",
   props: {
@@ -10971,7 +10864,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           "line-color": unref(config).lineColor,
           locked: unref(config).locked
         }, null, 8, ["modelValue", "zoom", "position", "selected", "line-color", "locked"]),
-        _cache[2] || (_cache[2] = createElementVNode("div", { class: "mce-rulers__left-top" }, null, -1))
+        _cache[2] || (_cache[2] = createElementVNode("div", { class: "m-rulers__left-top" }, null, -1))
       ]);
     };
   }
@@ -10995,7 +10888,7 @@ const _ruler = definePlugin((editor) => {
   });
   const config = registerConfig("ui.ruler", {
     default: {
-      visible: false,
+      visible: true,
       adsorbed: false,
       locked: false
     }
@@ -11057,7 +10950,7 @@ const _saveAs = definePlugin((editor) => {
 });
 const _hoisted_1$h = {
   ref: "trackTplRef",
-  class: "mce-scrollbar__track"
+  class: "m-scrollbar__track"
 };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "Scrollbar",
@@ -11126,9 +11019,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
-        class: normalizeClass(["mce-scrollbar", {
-          "mce-scrollbar--vertical": props.vertical,
-          "mce-scrollbar--horizontal": !props.vertical
+        class: normalizeClass(["m-scrollbar", {
+          "m-scrollbar--vertical": props.vertical,
+          "m-scrollbar--horizontal": !props.vertical
         }]),
         style: normalizeStyle$1({
           [props.vertical ? "height" : "width"]: `calc(100% - ${props.size + props.offset}px)`,
@@ -11139,8 +11032,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_1$h, [
           createElementVNode("div", {
             ref: "thumbTplRef",
-            class: normalizeClass(["mce-scrollbar__thumb", {
-              "mce-scrollbar__thumb--active": isActive.value
+            class: normalizeClass(["m-scrollbar__thumb", {
+              "m-scrollbar__thumb--active": isActive.value
             }]),
             style: normalizeStyle$1({
               top: thumbTop.value,
@@ -11157,7 +11050,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "mce-scrollbars" };
+const _hoisted_1$g = { class: "m-scrollbars" };
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "Scrollbars",
   props: {
@@ -11200,7 +11093,7 @@ const _scroll = definePlugin((editor) => {
   } = editor;
   const config = registerConfig("ui.scrollbar", {
     default: {
-      visible: false
+      visible: true
     }
   });
   const scrollTo = async (target, options = {}) => {
@@ -11353,7 +11246,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return isActive.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: "mce-scroll-to-selection",
+        class: "m-scroll-to-selection",
         onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(exec)("scrollToSelection", { behavior: "smooth" }), ["prevent"]))
       }, [
         createVNode(unref(_sfc_main$F), { icon: "$gps" }),
@@ -11372,11 +11265,11 @@ const _hoisted_7$1 = { "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__svg-slot"
+  class: "m-transform__svg-slot"
 };
 const _hoisted_10$1 = {
   key: 0,
-  class: "mce-transform__tip"
+  class: "m-transform__tip"
 };
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Transform",
@@ -11906,7 +11799,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       }
       if (handle === "resize-t" || handle === "resize-r" || handle === "resize-tr" || handle === "resize-bl") {
         return h("line", {
-          class: "mce-transform__diagonal",
+          class: "m-transform__diagonal",
           x1: "100%",
           y1: "0",
           x2: "0",
@@ -11914,7 +11807,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         });
       } else if (handle === "resize-l" || handle === "resize-b" || handle === "resize-tl" || handle === "resize-br") {
         return h("line", {
-          class: "mce-transform__diagonal",
+          class: "m-transform__diagonal",
           x1: "0",
           y1: "0",
           x2: "100%",
@@ -11925,15 +11818,15 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        class: normalizeClass(["mce-transform", [
-          !props.ui && "mce-transform--ui-hide",
-          transforming.value && "mce-transform--transforming",
-          __props.resizeStrategy && `mce-transform--${__props.resizeStrategy}`,
-          activeHandle.value && `mce-transform--${activeHandle.value}`,
-          activeHandle.value === "move" && "mce-transform--moving",
-          activeHandle.value?.startsWith("resize") && "mce-transform--resizing",
-          activeHandle.value?.startsWith("rotate") && "mce-transform--rotateing",
-          props.borderStyle && `mce-transform--${props.borderStyle}`
+        class: normalizeClass(["m-transform", [
+          !props.ui && "m-transform--ui-hide",
+          transforming.value && "m-transform--transforming",
+          __props.resizeStrategy && `m-transform--${__props.resizeStrategy}`,
+          activeHandle.value && `m-transform--${activeHandle.value}`,
+          activeHandle.value === "move" && "m-transform--moving",
+          activeHandle.value?.startsWith("resize") && "m-transform--resizing",
+          activeHandle.value?.startsWith("rotate") && "m-transform--rotateing",
+          props.borderStyle && `m-transform--${props.borderStyle}`
         ]]),
         style: normalizeStyle$1(style.value)
       }, {
@@ -11946,17 +11839,17 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             start: onPointerDown
           }),
           (openBlock(), createElementBlock("svg", {
-            class: "mce-transform__svg",
+            class: "m-transform__svg",
             style: normalizeStyle$1({ color: __props.color })
           }, [
             _cache[1] || (_cache[1] = createElementVNode("rect", {
               width: "100%",
               height: "100%",
               fill: "none",
-              class: "mce-transform__rect"
+              class: "m-transform__rect"
             }, null, -1)),
             createElementVNode("rect", {
-              class: "mce-transform__rect",
+              class: "m-transform__rect",
               width: "100%",
               height: "100%",
               fill: "none",
@@ -11975,14 +11868,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                       width: handle.width,
                       height: handle.height,
                       "aria-label": handle.type,
-                      class: "mce-transform__handle"
+                      class: "m-transform__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__handle"
+                      class: "m-transform__handle"
                     }, null, 8, _hoisted_4$3)) : (openBlock(), createElementBlock("rect", {
                       key: 2,
                       x: handle.x,
@@ -11992,7 +11885,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                       "aria-label": handle.type,
                       rx: handle.width / 4,
                       ry: handle.height / 4,
-                      class: "mce-transform__handle"
+                      class: "m-transform__handle"
                     }, null, 8, _hoisted_5$2))
                   ], 64)) : createCommentVNode("", true)
                 ], 64);
@@ -12000,7 +11893,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               __props.rotator ? (openBlock(), createElementBlock("g", {
                 key: 0,
                 transform: `matrix(1, 0, 0, 1, -32, ${model.value.height}) rotate(270 16 16)`,
-                class: "mce-transform__rotator"
+                class: "m-transform__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)
@@ -12017,7 +11910,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                   width: handle.width,
                   height: handle.height,
                   "aria-label": handle.type,
-                  class: "mce-transform__handle-rect",
+                  class: "m-transform__handle-rect",
                   cursor: transforming.value ? "auto" : getCursor(handle.type),
                   onPointerdown: (event) => onPointerDown(event, index)
                 }, null, 40, _hoisted_8$1);
@@ -12034,7 +11927,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "mce-cropper" };
+const _hoisted_1$e = { class: "m-cropper" };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "Cropper",
   props: /* @__PURE__ */ mergeModels({
@@ -12195,7 +12088,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", {
-          class: "mce-cropper__source",
+          class: "m-cropper__source",
           style: normalizeStyle$1(unref(boundingBoxToStyle)(sourceTransform.value))
         }, [
           createElementVNode("canvas", {
@@ -12206,11 +12099,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         createVNode(_sfc_main$m, {
           modelValue: sourceTransform.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sourceTransform.value = $event),
-          class: "mce-cropper__transform",
+          class: "m-cropper__transform",
           rotatable: false
         }, {
           default: withCtx(({ props: slotProps }) => [
-            createElementVNode("div", mergeProps({ class: "mce-cropper__transform_rect" }, slotProps), null, 16)
+            createElementVNode("div", mergeProps({ class: "m-cropper__transform_rect" }, slotProps), null, 16)
           ]),
           _: 1
         }, 8, ["modelValue"]),
@@ -12267,7 +12160,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "mce-selection" };
+const _hoisted_1$d = { class: "m-selection" };
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "Selection",
   setup(__props, { expose: __expose }) {
@@ -12398,25 +12291,25 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(parentObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-selection__parent",
+            class: "m-selection__parent",
             style: normalizeStyle$1(style)
           }, null, 4);
         }), 128)),
         unref(state) !== "moving" && unref(state) !== "transforming" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectionObbStyles.value, (style, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-selection__node",
+            class: "m-selection__node",
             style: normalizeStyle$1(style)
           }, null, 4);
         }), 128)) : createCommentVNode("", true),
         unref(state) === "selecting" || unref(state) === "painting" ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: "mce-selection__marquee",
+          class: "m-selection__marquee",
           style: normalizeStyle$1(unref(selectionMarquee).toCssStyle())
         }, null, 4)) : createCommentVNode("", true),
         transformValue.value.width && transformValue.value.height ? (openBlock(), createElementBlock("div", {
           key: 2,
-          class: "mce-selection__slot",
+          class: "m-selection__slot",
           style: normalizeStyle$1(unref(selectionObbInDrawboard).toCssStyle())
         }, [
           createVNode(_sfc_main$k, null, {
@@ -12438,7 +12331,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           roundable: roundable.value,
           ui: unref(state) !== "moving",
           "border-style": unref(state) === "cropping" ? "dashed" : "solid",
-          class: "mce-selection__transform",
+          class: "m-selection__transform",
           tip,
           scale: [unref(camera).zoom.x, unref(camera).zoom.y],
           offset: [-unref(camera).position.x, -unref(camera).position.y],
@@ -12945,7 +12838,7 @@ const _slice = definePlugin((editor) => {
 });
 const _hoisted_1$c = {
   key: 0,
-  class: "mce-smart-guides"
+  class: "m-smart-guides"
 };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "SmartGuides",
@@ -12961,7 +12854,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         (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}`)),
+            class: normalizeClass(item.class.map((v) => `m-smart-guides__${v}`)),
             style: normalizeStyle$1({
               left: `${item.style.left}px`,
               top: `${item.style.top}px`,
@@ -14728,23 +14621,23 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return info.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["mce-smart-selection", {
-          "mce-smart-selection--hover": !unref(state) && unref(isPointerInSelection),
-          [`mce-smart-selection--${info.value.direction}`]: true,
-          [`mce-smart-selection--${dragState.value}`]: dragState.value !== void 0
+        class: normalizeClass(["m-smart-selection", {
+          "m-smart-selection--hover": !unref(state) && unref(isPointerInSelection),
+          [`m-smart-selection--${info.value.direction}`]: true,
+          [`m-smart-selection--${dragState.value}`]: dragState.value !== void 0
         }])
       }, [
         unref(state) !== "moving" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(boxes.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               key: index,
-              class: normalizeClass(["mce-smart-selection__node", {
-                "mce-smart-selection__node--active": item.el.equal(currentElement.value)
+              class: normalizeClass(["m-smart-selection__node", {
+                "m-smart-selection__node--active": item.el.equal(currentElement.value)
               }]),
               style: normalizeStyle$1(item.style)
             }, [
               createElementVNode("div", {
-                class: "mce-smart-selection__ring",
+                class: "m-smart-selection__ring",
                 onPointerdown: ($event) => onRingDrag($event, item)
               }, null, 40, _hoisted_1$b)
             ], 6);
@@ -14754,8 +14647,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             "model-value": currentTransform.value
           }, transformProps, {
             handles: ["resize-l", "resize-r", "resize-t", "resize-b"],
-            class: "mce-smart-selection__transform",
-            color: "rgb(var(--mce-theme-secondary))",
+            class: "m-smart-selection__transform",
+            color: "rgb(var(--m-theme-secondary))",
             scale: [unref(camera).zoom.x, unref(camera).zoom.y],
             offset: [-unref(camera).position.x, -unref(camera).position.y]
           }), null, 16, ["model-value", "scale", "offset"])) : createCommentVNode("", true)
@@ -14763,18 +14656,18 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(spacingHandles.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "mce-smart-selection__spacing",
+            class: "m-smart-selection__spacing",
             style: normalizeStyle$1(item.style)
           }, [
             createElementVNode("div", {
-              class: "mce-smart-selection__spacing-line",
+              class: "m-smart-selection__spacing-line",
               onPointerdown: _cache[0] || (_cache[0] = ($event) => onSpacingDrag($event))
             }, null, 32)
           ], 4);
         }), 128)),
         _globalAabb.value ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: "mce-smart-selection__ghost",
+          class: "m-smart-selection__ghost",
           style: normalizeStyle$1(_globalAabb.value.toCssStyle())
         }, null, 4)) : createCommentVNode("", true)
       ], 2)) : createCommentVNode("", true);
@@ -14818,15 +14711,15 @@ const _state = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$a = { class: "progress-indicator" };
+const _hoisted_1$a = { class: "m-progress-indicator" };
 const _hoisted_2$5 = {
   key: 0,
-  class: "progress-indicator__status"
+  class: "m-progress-indicator__status"
 };
-const _hoisted_3$5 = { class: "progress-indicator__bar" };
+const _hoisted_3$5 = { class: "m-progress-indicator__bar" };
 const _hoisted_4$2 = {
   key: 1,
-  class: "progress-indicator__bar-indeterminate"
+  class: "m-progress-indicator__bar-indeterminate"
 };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ProgressIndicator",
@@ -14846,7 +14739,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_3$5, [
           !__props.indeterminate ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: "progress-indicator__bar-fill",
+            class: "m-progress-indicator__bar-fill",
             style: normalizeStyle$1({ width: `${progress.value * 100}%` })
           }, null, 4)) : (openBlock(), createElementBlock("div", _hoisted_4$2))
         ])
@@ -14854,29 +14747,29 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-3b286483"]]);
-const _hoisted_1$9 = { 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 = { 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 ProgressIndicator = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-cc8ac0cb"]]);
+const _hoisted_1$9 = { class: "m-statusbar" };
+const _hoisted_2$4 = { class: "m-statusbar__main" };
+const _hoisted_3$4 = { class: "m-statusbar__item" };
+const _hoisted_4$1 = { class: "m-statusbar__kbd" };
+const _hoisted_5$1 = { class: "m-statusbar__kbd" };
+const _hoisted_6$1 = { class: "m-statusbar__item" };
+const _hoisted_7 = { class: "m-statusbar__kbd" };
+const _hoisted_8 = { class: "m-statusbar__item" };
+const _hoisted_9 = { class: "m-statusbar__item" };
+const _hoisted_10 = { class: "m-statusbar__kbd" };
+const _hoisted_11 = { class: "m-statusbar__item" };
+const _hoisted_12 = { class: "m-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 _hoisted_14 = { class: "m-statusbar__item" };
+const _hoisted_15 = { class: "m-statusbar__item" };
+const _hoisted_16 = { class: "m-statusbar__kbd" };
+const _hoisted_17 = { class: "m-statusbar__item" };
+const _hoisted_18 = { class: "m-statusbar__item" };
+const _hoisted_19 = { class: "m-statusbar__kbd" };
+const _hoisted_20 = { class: "m-statusbar__item" };
+const _hoisted_21 = { class: "m-statusbar__item" };
+const _hoisted_22 = { class: "m-statusbar__progress" };
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Statusbar",
   setup(__props) {
@@ -14912,7 +14805,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               createElementVNode("span", null, toDisplayString(unref(t)("cancel")), 1)
             ]),
             unref(state) === "moving" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-              _cache[2] || (_cache[2] = createElementVNode("div", { class: "mce-statusbar__divider" }, null, -1)),
+              _cache[2] || (_cache[2] = createElementVNode("div", { class: "m-statusbar__divider" }, null, -1)),
               createElementVNode("div", _hoisted_11, [
                 createElementVNode("span", _hoisted_12, toDisplayString(unref(getKbd)("Shift")), 1),
                 createElementVNode("span", null, toDisplayString(unref(t)("constrainMovement")), 1)
@@ -14928,7 +14821,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               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)),
+            _cache[6] || (_cache[6] = createElementVNode("div", { class: "m-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_17, [
               createVNode(unref(_sfc_main$F), { icon: "$mouseLeftClick" }),
               createElementVNode("span", null, toDisplayString(unref(t)("selectArea")), 1)
@@ -14938,13 +14831,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               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)),
+            _cache[8] || (_cache[8] = createElementVNode("div", { class: "m-statusbar__divider" }, null, -1)),
             createElementVNode("div", _hoisted_20, [
               createVNode(unref(_sfc_main$F), { 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)),
+              _cache[4] || (_cache[4] = createElementVNode("div", { class: "m-statusbar__divider" }, null, -1)),
               createElementVNode("div", _hoisted_21, [
                 createElementVNode("span", null, toDisplayString(unref(getKbd)("Enter")), 1),
                 createElementVNode("span", null, toDisplayString(unref(t)("startTyping")), 1)
@@ -14964,14 +14857,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-39842d8e"]]);
+const Statusbar = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-12c3be94"]]);
 const _statusbar = definePlugin((editor) => {
   const {
     registerConfig
   } = editor;
   const config = registerConfig("ui.statusbar", {
     default: {
-      visible: false
+      visible: true
     }
   });
   return {
@@ -15025,29 +14918,29 @@ const _test = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$8 = { class: "mce-payhead" };
+const _hoisted_1$8 = { class: "m-payhead" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Playhead",
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$8, [..._cache[0] || (_cache[0] = [
-        createElementVNode("header", { class: "mce-payhead__header" }, null, -1),
-        createElementVNode("main", { class: "mce-payhead__main" }, null, -1)
+        createElementVNode("header", { class: "m-payhead__header" }, null, -1),
+        createElementVNode("main", { class: "m-payhead__main" }, null, -1)
       ])]);
     };
   }
 });
 const _hoisted_1$7 = {
   key: 0,
-  class: "mce-segment__edge mce-segment__edge--front"
+  class: "m-segment__edge m-segment__edge--front"
 };
 const _hoisted_2$3 = {
-  class: "mce-segment__node",
+  class: "m-segment__node",
   style: { "overflow": "hidden" }
 };
 const _hoisted_3$3 = {
   key: 1,
-  class: "mce-segment__edge mce-segment__edge--end"
+  class: "m-segment__edge m-segment__edge--end"
 };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Segment",
@@ -15102,16 +14995,16 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["mce-segment", [
-          `mce-segment--${(__props.node.meta.inEditorIs ?? "none").toLowerCase()}`,
-          __props.active && `mce-segment--active`
+        class: normalizeClass(["m-segment", [
+          `m-segment--${(__props.node.meta.inEditorIs ?? "none").toLowerCase()}`,
+          __props.active && `m-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",
+            class: "m-segment__block",
             style: normalizeStyle$1(block.style)
           }, null, 4);
         }), 128)),
@@ -15122,7 +15015,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = { class: "mce-track" };
+const _hoisted_1$6 = { class: "m-track" };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "Track",
   setup(__props) {
@@ -15141,7 +15034,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "mce-trackhead",
+        class: "m-trackhead",
         style: normalizeStyle$1({
           height: `var(--timeline-track-height__${__props.node.meta.inEditorIs}, 22px)`
         })
@@ -15149,12 +15042,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { class: "mce-timeline__toolbar" };
-const _hoisted_2$2 = { class: "mce-timeline__main" };
-const _hoisted_3$2 = { class: "mce-timeline__left-wrapper" };
-const _hoisted_4 = { class: "mce-timeline__right-wrapper" };
-const _hoisted_5 = { class: "mce-timeline__ruler" };
-const _hoisted_6 = { class: "mce-timeline__track" };
+const _hoisted_1$5 = { class: "m-timeline__toolbar" };
+const _hoisted_2$2 = { class: "m-timeline__main" };
+const _hoisted_3$2 = { class: "m-timeline__left-wrapper" };
+const _hoisted_4 = { class: "m-timeline__right-wrapper" };
+const _hoisted_5 = { class: "m-timeline__ruler" };
+const _hoisted_6 = { class: "m-timeline__track" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "Timeline",
   setup(__props) {
@@ -15252,13 +15145,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(pause);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "mce-timeline",
+        class: "m-timeline",
         onWheel: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["prevent"]))
       }, [
         createElementVNode("div", _hoisted_1$5, [
           createElementVNode("div", {
-            class: "mce-timeline__play",
+            class: "m-timeline__play",
             onClick: toggle
           }, [
             createVNode(unref(_sfc_main$F), {
@@ -15268,7 +15161,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         ]),
         createElementVNode("div", _hoisted_2$2, [
           createElementVNode("div", {
-            class: "mce-timeline__left",
+            class: "m-timeline__left",
             onWheel
           }, [
             createElementVNode("div", _hoisted_3$2, [
@@ -15287,7 +15180,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ])
           ], 32),
           createElementVNode("div", {
-            class: "mce-timeline__right",
+            class: "m-timeline__right",
             onWheel,
             onMousedown
           }, [
@@ -15394,7 +15287,7 @@ const _timeline = definePlugin((editor) => {
 });
 const _hoisted_1$4 = {
   key: 0,
-  class: "mce-drawing__tip"
+  class: "m-drawing__tip"
 };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "Drawing",
@@ -15408,7 +15301,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return unref(state) === "drawing" && unref(drawboardPointer) ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: "mce-drawing",
+        class: "m-drawing",
         style: normalizeStyle$1({
           left: `${unref(drawboardPointer).x}px`,
           top: `${unref(drawboardPointer).y}px`
@@ -15433,7 +15326,7 @@ const _tool = definePlugin((editor) => {
     ]
   };
 });
-const _hoisted_1$3 = { class: "mce-toolbelt" };
+const _hoisted_1$3 = { class: "m-toolbelt" };
 const _hoisted_2$1 = { key: 0 };
 const _hoisted_3$1 = { key: 1 };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
@@ -15539,7 +15432,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (tool, key) => {
           return openBlock(), createElementBlock("div", {
             key,
-            class: "mce-toolbelt__group"
+            class: "m-toolbelt__group"
           }, [
             createVNode(_sfc_main$s, {
               location: "top",
@@ -15549,7 +15442,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               activator: withCtx(({ props: slotProps }) => [
                 createVNode(_sfc_main$B, mergeProps({
                   icon: "",
-                  class: "mce-toolbelt__btn",
+                  class: "m-toolbelt__btn",
                   active: tool.active || tool.checked || false
                 }, { ref_for: true }, slotProps, {
                   onClick: tool.handle
@@ -15579,7 +15472,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               activator: withCtx(({ props }) => [
                 createVNode(_sfc_main$B, mergeProps({
                   icon: "",
-                  class: "mce-toolbelt__arrow"
+                  class: "m-toolbelt__arrow"
                 }, { ref_for: true }, props), {
                   default: withCtx(() => [
                     createVNode(unref(_sfc_main$F), { icon: "$arrowDown" })
@@ -15599,7 +15492,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               ]),
               prepend: withCtx(({ item }) => [
                 createVNode(unref(_sfc_main$F), {
-                  class: "mce-toolbelt__icon",
+                  class: "m-toolbelt__icon",
                   icon: `$${item.key}`
                 }, null, 8, ["icon"])
               ]),
@@ -15617,7 +15510,7 @@ const _toolbelt = definePlugin((editor) => {
   } = editor;
   const config = registerConfig("ui.toolbelt", {
     default: {
-      visible: false
+      visible: true
     }
   });
   return {
@@ -15982,13 +15875,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
-        class: "mce-text-editor",
+        class: "m-text-editor",
         style: normalizeStyle$1({
           ...mainStyleWithScale.value
         })
       }, [
         createElementVNode("div", {
-          class: "mce-text-editor__wrapper",
+          class: "m-text-editor__wrapper",
           style: normalizeStyle$1({
             ...textEditorStyle.value
           })
@@ -15996,9 +15889,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           createElementVNode("text-editor", {
             ref_key: "textEditor",
             ref: textEditor,
-            class: "mce-text-editor__editor",
+            class: "m-text-editor__editor",
             style: {
-              "--color": "var(--mce-theme-primary)"
+              "--color": "var(--m-theme-primary)"
             },
             "data-pointerdown_to_drawboard": "",
             onSelected: onUpdateTextSelection,
@@ -17384,12 +17277,10 @@ const _zoom = definePlugin((editor) => {
 const plugins = [
   _arrange,
   _autoNest,
-  _copyAs,
   _doc,
   _edit,
   _formatPaint,
   _frame,
-  _gif,
   _history,
   _hover,
   _html,
@@ -17400,9 +17291,7 @@ const plugins = [
   _madeWith,
   _memory,
   _menu,
-  _new,
   _node,
-  _open,
   _pen,
   _ruler,
   _saveAs,
@@ -17674,7 +17563,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_sfc_main$w, {
         ref: "overlayTpl",
         "content-style": style.value,
-        class: "mce-floatbar",
+        class: "m-floatbar",
         location: props.location,
         middlewares: props.middlewares,
         offset: offset2.value,
@@ -17692,7 +17581,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$2 = {
   key: 0,
-  class: "mce-float-panel__title"
+  class: "m-float-panel__title"
 };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "FloatPanel",
@@ -17722,13 +17611,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         key: 0,
         modelValue: transform.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => transform.value = $event),
-        class: "mce-float-panel",
+        class: "m-float-panel",
         ui: false,
         onWheel: _cache[3] || (_cache[3] = withModifiers(() => {
         }, ["stop"]))
       }, {
         default: withCtx(({ props: slotProps }) => [
-          createElementVNode("div", mergeProps({ class: "mce-float-panel__card" }, slotProps), [
+          createElementVNode("div", mergeProps({ class: "m-float-panel__card" }, slotProps), [
             __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
               createElementVNode("div", null, toDisplayString(__props.title), 1),
               createVNode(_sfc_main$B, {
@@ -17742,7 +17631,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               })
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
-              class: "mce-float-panel__content",
+              class: "m-float-panel__content",
               onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
               }, ["stop"]))
             }, [
@@ -17824,8 +17713,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(normalizeClass([
-          "mce-layout-item",
-          `mce-layout-item--${props.position}`,
+          "m-layout-item",
+          `m-layout-item--${props.position}`,
           props.class
         ])),
         style: normalizeStyle$1(normalizeStyle$1([unref(layoutItemStyles), props.style]))
@@ -17837,7 +17726,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$1 = {
   key: 0,
-  class: "mce-main__scroller"
+  class: "m-main__scroller"
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "Main",
@@ -17849,8 +17738,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const { mainStyles } = useLayout();
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("main", {
-        class: normalizeClass(["mce-main", [
-          { "mce-main--scrollable": props.scrollable }
+        class: normalizeClass(["m-main", [
+          { "m-main--scrollable": props.scrollable }
         ]]),
         style: normalizeStyle$1([unref(mainStyles)])
       }, [
@@ -17864,11 +17753,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 const _hoisted_1 = ["data-pixel-ratio"];
 const _hoisted_2 = {
   ref: "canvasTpl",
-  class: "mce-editor__canvas"
+  class: "m-editor__canvas"
 };
 const _hoisted_3 = {
   ref: "overlayContainerTpl",
-  class: "mce-overlay-container"
+  class: "m-overlay-container"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "EditorLayout",
@@ -17900,7 +17789,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       drawboardDom,
       renderEngine,
       camera,
-      bindRenderCanvas,
       hoverElement,
       state,
       setCursor,
@@ -17937,6 +17825,34 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       renderEngine.value.off("pointermove", onEnginePointerMove);
       renderEngine.value.off("pointerover", onEnginePointerOver);
     });
+    function bindRenderCanvas(canvas2, eventTarget) {
+      function onRendered() {
+        const target = renderEngine.value.view;
+        if (!target.width || !target.height) {
+          return;
+        }
+        canvas2.width = target.width;
+        canvas2.height = target.height;
+        canvas2.dataset.pixelRatio = target.dataset.pixelRatio;
+        canvas2.getContext("2d")?.drawImage(target, 0, 0, target.width, target.height);
+      }
+      function unbind() {
+        if (canvas2._onRendered) {
+          renderEngine.value.off("rendered", canvas2._onRendered);
+        }
+        renderEngine.value.input.setTarget(renderEngine.value.view);
+      }
+      function bind() {
+        unbind();
+        canvas2._onRendered = onRendered;
+        renderEngine.value.on("rendered", onRendered);
+        if (eventTarget) {
+          renderEngine.value.input.setTarget(eventTarget);
+        }
+      }
+      bind();
+      return unbind;
+    }
     function onHover(event) {
       let cursor;
       let hovered;
@@ -18228,10 +18144,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$4, {
-        class: normalizeClass(["mce-editor", [
-          unref(state) && `mce-editor--${unref(state)}`,
-          unref(activeTool) && `mce-editor--drawing-tool-${unref(activeTool).name}`,
-          grabbing.value && `mce-editor--grabbing`
+        class: normalizeClass(["m-editor", [
+          unref(state) && `m-editor--${unref(state)}`,
+          unref(activeTool) && `m-editor--drawing-tool-${unref(activeTool).name}`,
+          grabbing.value && `m-editor--grabbing`
         ]])
       }, {
         default: withCtx(() => [
@@ -18240,7 +18156,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 ref_key: "drawboardDom",
                 ref: drawboardDom,
-                class: "mce-editor__drawboard",
+                class: "m-editor__drawboard",
                 "data-pixel-ratio": unref(renderEngine).pixelRatio,
                 onDblclick: _cache[0] || (_cache[0] = ($event) => onDoubleclick($event)),
                 onScroll,
@@ -18369,7 +18285,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         offset: props.offset,
         target: props.target,
         attach: props.attach,
-        class: "mce-dialog"
+        class: "m-dialog"
       }, {
         activator: withCtx((slotProps) => [
           renderSlot(_ctx.$slots, "activator", mergeProps(slotProps, {