mce 0.1.4 → 0.2.1

package/README.md

@@ -18,7 +18,7 @@
   </a>
 </p>
 
-<p align="center">Modern canvas editor, based modern-canvas and Vue.js. only the ESM.</p>
+<p align="center">The headless canvas editor framework. only the ESM.</p>
 
 ## 📦 Install
 
@@ -30,7 +30,7 @@ npm i mce
 
 ```vue
 <script setup lang="ts">
-  import { Drawboard, Editor } from 'mce'
+  import { Editor, EditorLayout, EditorLayoutItem } from 'mce'
   import 'mce/styles'
 
   const editor = new Editor({
@@ -42,7 +42,6 @@ npm i mce
     camera: true,
     ruler: true,
     scrollbar: true,
-    bottombar: true,
     statusbar: true,
     wheelZoom: false,
     frameGap: 48,
@@ -85,23 +84,15 @@ npm i mce
 
 <template>
   <div style="width: 100vw; height: 100vh">
-    <Drawboard :editor="editor">
-      <template #selector="{ box }">
-        Selector
-      </template>
-
-      <template #transformer="{ box }">
-        <text>Transformer(in SVG)</text>
-      </template>
-
-      <template #floatbar>
-        Floatbar
-      </template>
-
-      <template #bottombar>
-        Bottombar
-      </template>
-    </Drawboard>
+    <EditorLayout :editor="editor">
+      <template #selector="{ box }" />
+      <template #transformer="{ box }" />
+      <template #floatbar />
+      <template #drawboard />
+      <EditorLayoutItem model-value position="top" :size="56" />
+      <EditorLayoutItem model-value position="left" :size="380" />
+      <EditorLayoutItem model-value position="right" :size="260" />
+    </EditorLayout>
   </div>
 </template>
 ```
@@ -111,12 +102,12 @@ slot sub component
 ```vue
 <script setup lang="ts">
   import { useEditor } from 'mce'
-  const { activeElement } = useEditor()
+  const { selection } = useEditor()
 </script>
 
 <template>
   <div>
-    {{ activeElement }}
+    {{ selection }}
   </div>
 </template>
 ```

package/dist/components/{Drawboard.vue.d.ts → EditorLayout.vue.d.ts}

@@ -8,7 +8,7 @@ type __VLS_Slots = {
         box: Partial<OrientedBoundingBox>;
     }) => void;
     floatbar?: () => void;
-    bottombar?: () => void;
+    drawboard?: () => void;
     default?: () => void;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/components/shared/Icon.vue.d.ts

@@ -1,18 +1,18 @@
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     icon: {
-        type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
     };
     tag: {
-        type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
         default: string;
     };
     disabled: BooleanConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
-        type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
     };
     tag: {
-        type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
         default: string;
     };
     disabled: BooleanConstructor;

package/dist/components/shared/Layout.vue.d.ts

@@ -0,0 +1,40 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    overlaps: import("vue").Prop<string[]>;
+    fullHeight: BooleanConstructor;
+}>, {
+    items: import("vue").ComputedRef<{
+        size: number;
+        position: import("../..").Position;
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        id: string;
+    }[]>;
+    getLayoutItem: (id: string) => {
+        size: number;
+        position: import("../..").Position;
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        id: string;
+    } | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    overlaps: import("vue").Prop<string[]>;
+    fullHeight: BooleanConstructor;
+}>> & Readonly<{}>, {
+    fullHeight: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/shared/LayoutItem.vue.d.ts

@@ -0,0 +1,55 @@
+import type { PropType } from 'vue';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    position: {
+        type: PropType<"top" | "right" | "bottom" | "left">;
+        required: true;
+    };
+    size: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    modelValue: BooleanConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+    position: {
+        type: PropType<"top" | "right" | "bottom" | "left">;
+        required: true;
+    };
+    size: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    modelValue: BooleanConstructor;
+}>> & Readonly<{}>, {
+    size: string | number;
+    absolute: boolean;
+    order: string | number;
+    modelValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/shared/Main.vue.d.ts

@@ -0,0 +1,21 @@
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    scrollable: BooleanConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    scrollable: BooleanConstructor;
+}>> & Readonly<{}>, {
+    scrollable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/composables/editor.d.ts

@@ -1,3 +1,3 @@
 import { Editor } from '../editor';
 export declare function useEditor(): Editor;
-export declare function provideEditor(): Editor;
+export declare function provideEditor(editor?: Editor): Editor;

package/dist/composables/icon.d.ts

@@ -2,29 +2,29 @@ import type { Component, MaybeRefOrGetter } from 'vue';
 export type IconValue = string | (string | [path: string, opacity: number])[] | Component;
 export declare function makeIconProps(): {
     icon: {
-        type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
     };
     tag: {
-        type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
         default: string;
     };
 };
 export declare const MceSvgIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     icon: {
-        type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
     };
     tag: {
-        type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
         default: string;
     };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
-        type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
     };
     tag: {
-        type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
         default: string;
     };
 }>> & Readonly<{}>, {
@@ -32,20 +32,20 @@ export declare const MceSvgIcon: import("vue").DefineComponent<import("vue").Ext
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const MceComponentIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     icon: {
-        type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
     };
     tag: {
-        type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
         default: string;
     };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
-        type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
     };
     tag: {
-        type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+        type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
         default: string;
     };
 }>> & Readonly<{}>, {
@@ -55,20 +55,20 @@ export declare function useIcon(props: MaybeRefOrGetter<IconValue | undefined>):
     iconData: import("vue").ComputedRef<{
         component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             icon: {
-                type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+                type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
             };
             tag: {
-                type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+                type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
                 default: string;
             };
         }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             icon: {
-                type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+                type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
             };
             tag: {
-                type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+                type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
                 default: string;
             };
         }>> & Readonly<{}>, {
@@ -78,20 +78,20 @@ export declare function useIcon(props: MaybeRefOrGetter<IconValue | undefined>):
     } | {
         component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             icon: {
-                type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+                type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
             };
             tag: {
-                type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+                type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
                 default: string;
             };
         }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             icon: {
-                type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+                type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
             };
             tag: {
-                type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+                type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
                 default: string;
             };
         }>> & Readonly<{}>, {

package/dist/composables/index.d.ts

@@ -1,6 +1,8 @@
 export * from './editor';
 export * from './icon';
 export * from './icons';
+export * from './layout';
 export * from './menu';
 export * from './overlay';
+export * from './resizeObserver';
 export * from './strategy';

package/dist/composables/layout.d.ts

@@ -0,0 +1,133 @@
+import type { ComponentInternalInstance, CSSProperties, InjectionKey, Prop, Ref } from 'vue';
+export type Position = 'top' | 'left' | 'right' | 'bottom';
+interface Layer {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+interface LayoutItem extends Layer {
+    id: string;
+    size: number;
+    position: Position;
+}
+interface LayoutProvide {
+    register: (vm: ComponentInternalInstance, options: {
+        id: string;
+        order: Ref<number>;
+        position: Ref<Position>;
+        layoutSize: Ref<number | string>;
+        elementSize: Ref<number | string | undefined>;
+        active: Ref<boolean>;
+        disableTransitions?: Ref<boolean>;
+        absolute: Ref<boolean | undefined>;
+    }) => {
+        layoutItemStyles: Ref<CSSProperties>;
+        layoutItemScrimStyles: Ref<CSSProperties>;
+        zIndex: Ref<number>;
+    };
+    unregister: (id: string) => void;
+    mainRect: Ref<Layer>;
+    mainStyles: Ref<CSSProperties>;
+    getLayoutItem: (id: string) => LayoutItem | undefined;
+    items: Ref<LayoutItem[]>;
+    layoutRect: Ref<DOMRectReadOnly | undefined>;
+    rootZIndex: Ref<number>;
+}
+export declare const MceLayoutKey: InjectionKey<LayoutProvide>;
+export declare const MceLayoutItemKey: InjectionKey<{
+    id: string;
+}>;
+export declare function makeLayoutProps(): {
+    overlaps: Prop<string[]>;
+    fullHeight: BooleanConstructor;
+};
+export declare function makeLayoutItemProps(): {
+    name: {
+        type: StringConstructor;
+    };
+    order: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    absolute: BooleanConstructor;
+};
+export declare function useLayout(): {
+    getLayoutItem: (id: string) => LayoutItem | undefined;
+    mainRect: Ref<Layer, Layer>;
+    mainStyles: Ref<CSSProperties, CSSProperties>;
+};
+export declare function useLayoutItem(options: {
+    id: string | undefined;
+    order: Ref<number>;
+    position: Ref<Position>;
+    layoutSize: Ref<number | string>;
+    elementSize: Ref<number | string | undefined>;
+    active: Ref<boolean>;
+    disableTransitions?: Ref<boolean>;
+    absolute: Ref<boolean | undefined>;
+}): {
+    layoutItemStyles: Ref<CSSProperties, CSSProperties>;
+    layoutRect: Ref<DOMRectReadOnly | undefined, DOMRectReadOnly | undefined>;
+    layoutItemScrimStyles: Ref<CSSProperties, CSSProperties>;
+};
+export declare function createLayout(props: {
+    overlaps?: string[];
+    fullHeight?: boolean;
+}): {
+    layoutClasses: Readonly<Ref<(string | {
+        'mce-layout--full-height': boolean | undefined;
+    })[], (string | {
+        'mce-layout--full-height': boolean | undefined;
+    })[]>>;
+    layoutStyles: Readonly<Ref<{
+        zIndex: number | undefined;
+        position: "relative" | undefined;
+        overflow: string | undefined;
+    }, {
+        zIndex: number | undefined;
+        position: "relative" | undefined;
+        overflow: string | undefined;
+    }>>;
+    getLayoutItem: (id: string) => {
+        size: number;
+        position: Position;
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        id: string;
+    } | undefined;
+    items: import("vue").ComputedRef<{
+        size: number;
+        position: Position;
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        id: string;
+    }[]>;
+    layoutRect: Readonly<Ref<{
+        readonly bottom: number;
+        readonly height: number;
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly width: number;
+        readonly x: number;
+        readonly y: number;
+        readonly toJSON: () => any;
+    } | undefined, {
+        readonly bottom: number;
+        readonly height: number;
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly width: number;
+        readonly x: number;
+        readonly y: number;
+        readonly toJSON: () => any;
+    } | undefined>>;
+    layoutRef: import("..").TemplateRef;
+};
+export {};

package/dist/composables/resizeObserver.d.ts

@@ -0,0 +1,8 @@
+import type { DeepReadonly, Ref } from 'vue';
+import type { TemplateRef } from '../utils';
+interface ResizeState {
+    resizeRef: TemplateRef;
+    contentRect: DeepReadonly<Ref<DOMRectReadOnly | undefined>>;
+}
+export declare function useResizeObserver(callback?: ResizeObserverCallback, box?: 'content' | 'border'): ResizeState;
+export {};

package/dist/editor.d.ts

@@ -29,7 +29,6 @@ export declare class Editor extends Observable<Events> {
     setup: () => Promise<void>;
     install: (app: App) => void;
 }
-export declare function createEditor(options?: Options): Editor;
 export interface PluginObject {
     name: string;
     ignore?: boolean | (() => boolean);

package/dist/iconsets/mdi-svg.d.ts

@@ -3,20 +3,20 @@ export declare const aliases: IconAliases;
 export declare const svg: {
     component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         icon: {
-            type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+            type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
         };
         tag: {
-            type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+            type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
             default: string;
         };
     }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         icon: {
-            type: (ObjectConstructor | ArrayConstructor | FunctionConstructor | StringConstructor)[];
+            type: (ObjectConstructor | ArrayConstructor | StringConstructor | FunctionConstructor)[];
         };
         tag: {
-            type: (ObjectConstructor | FunctionConstructor | StringConstructor)[];
+            type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
             default: string;
         };
     }>> & Readonly<{}>, {

package/dist/index.css

@@ -1 +1 @@
-.mce-auxiliary{position:absolute;overflow:hidden;inset:0}.mce-auxiliary__alignment{position:absolute;background-color:#ff4aff;height:1px;width:1px}.mce-auxiliary__area{position:absolute;display:flex;align-items:center;justify-content:center;background-color:#f424fd33}.mce-auxiliary__area:before{content:"";background:#1690ff;height:1px;width:100%}.mce-auxiliary__area:after{position:absolute;content:"";height:5px;width:100%;border-left:1px solid #1690ff;border-right:1px solid #1690ff}.mce-auxiliary__area--vertical:before{height:100%;width:1px}.mce-auxiliary__area--vertical:after{height:100%;width:5px;border-left:none;border-right:none;border-top:1px solid #1690ff;border-bottom:1px solid #1690ff}.mce-bottombar{position:absolute}.mce-icon{align-items:center;display:inline-flex;font-feature-settings:"liga";height:1em;justify-content:center;letter-spacing:normal;line-height:1;position:relative;opacity:var(--mce-icon-opacity, 1);text-indent:0;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;width:1em;min-width:1em}.mce-icon__svg{fill:currentColor;width:100%;height:100%}.mce-overlay>*{pointer-events:auto}.mce-menu{-webkit-user-select:none;user-select:none}.mce-list{display:flex;flex-direction:column;background-color:rgb(var(--mce-theme-on-surface));color:rgb(var(--mce-theme-surface));box-shadow:var(--mce-shadow);padding:8px;border-radius:8px;gap:2px;max-height:inherit;overflow-y:auto}.mce-list__divider{border-bottom:1px solid rgba(var(--mce-theme-surface),.12)}.mce-list-item{display:flex;width:100%;padding:4px 8px;border-radius:4px;cursor:pointer;align-items:center;gap:12px}.mce-list-item--opened,.mce-list-item:hover{background-color:rgba(var(--mce-theme-primary),1);color:rgba(var(--mce-theme-on-primary),1)}.mce-list-item--disabled{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.4}.mce-list-item__prepend{width:12px;height:12px;display:flex;align-items:center;justify-content:center}.mce-list-item__title{flex:1;display:flex;align-items:center;font-size:12px;white-space:nowrap}.mce-list-item__append{width:12px;height:12px;display:flex;align-items:center;justify-content:center;font-size:22px}.mce-context-menu__title{flex:1}.mce-context-menu__kbd{letter-spacing:.08em;margin-left:24px;opacity:.3}.mce-drawing{pointer-events:auto!important;position:fixed}.mce-drawing__content{margin:4px;border:1px solid rgba(0,0,0,.168627451);border-radius:4px;width:fit-content;height:22px;padding:0 4px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:rgba(var(--mce-theme-surface),1)}.mce-frame{position:absolute}.mce-frame--outline{outline:1px solid rgba(0,0,0,.168627451)}.mce-frame__name{position:absolute;top:0;left:0;transform:translateY(-100%) translateY(-4px);transform-origin:left bottom;font-size:12px;line-height:1.5;white-space:nowrap;pointer-events:auto;-webkit-user-select:none;user-select:none}.mce-frame__name>div{position:relative;min-width:28px;box-sizing:content-box;color:rgba(var(--mce-theme-on-surface),.8)}.mce-frame__name>input{position:absolute;left:0;top:0;outline:none;width:100%;height:100%;border:1px solid rgba(0,0,0,.168627451);border-radius:4px;cursor:default}.mce-back-selected-aera{pointer-events:auto!important;position:absolute;left:50%;bottom:24px;padding:4px 8px;display:flex;align-items:center;gap:4px;color:rgba(var(--mce-theme-surface),1);background-color:rgba(var(--mce-theme-on-background),var(--mce-medium-emphasis-opacity));transform:translate(-50%);-webkit-backdrop-filter:blur(var(--mce-blur));backdrop-filter:blur(var(--mce-blur));border-radius:8px;font-size:14px;cursor:pointer}.mce-hover{position:absolute;border-style:solid;border-width:2px;color:rgba(var(--mce-theme-primary),1)}.mce-tooltip{background:rgb(var(--mce-theme-surface-variant));color:rgb(var(--mce-theme-on-surface-variant));border-radius:4px;font-size:.875rem;line-height:1.6;display:inline-block;padding:5px 16px;text-transform:initial;width:auto;opacity:1;transition-property:opacity,transform;overflow-wrap:break-word}.mce-ruler{position:absolute;left:0;top:0;width:100%;height:100%;--text-color: rgba(var(--mce-theme-on-background), var(--mce-low-emphasis-opacity));--border-color: rgba(var(--mce-border-color), var(--mce-border-opacity))}.mce-ruler--vertical{width:var(--size)}.mce-ruler--horizontal{height:var(--size)}.mce-ruler__canvas{display:block;pointer-events:auto;cursor:pointer;background-color:rgb(var(--mce-theme-surface));-webkit-backdrop-filter:blur(var(--mce-blur));backdrop-filter:blur(var(--mce-blur))}.mce-ruler-refline{position:absolute;border-style:dashed;border-width:0;border-color:rgb(var(--mce-theme-primary));pointer-events:auto!important}.mce-ruler-refline--vertical{border-top-width:1px;cursor:ns-resize}.mce-ruler-refline--horizontal{border-left-width:1px;cursor:ew-resize}.mce-ruler-refline--temp{border-color:rgba(var(--mce-theme-primary),var(--mce-low-emphasis-opacity));pointer-events:none!important}.mce-rulers{position:absolute;inset:0;pointer-events:none}.mce-rulers__left-top{position:absolute;left:0;top:0;width:16px;height:16px;border:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity));border-top-width:0;border-left-width:0;background-color:rgb(var(--mce-theme-surface))}.mce-scrollbar{position:absolute;display:flex;pointer-events:auto!important}.mce-scrollbar--vertical{right:0;flex-direction:column}.mce-scrollbar--horizontal{bottom:0}.mce-scrollbar__track{flex:1}.mce-scrollbar__thumb{position:absolute;border-radius:calc(infinity * 1px);background-color:rgba(var(--mce-theme-on-background),var(--mce-low-emphasis-opacity));-webkit-backdrop-filter:blur(var(--mce-blur));backdrop-filter:blur(var(--mce-blur))}.mce-scrollbar__thumb--active,.mce-scrollbar__thumb:hover{background-color:rgba(var(--mce-theme-on-background),var(--mce-medium-emphasis-opacity))}.mce-transformable{left:0;top:0;color:rgb(var(--mce-theme-primary))}.mce-transformable__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}.mce-transformable__box{stroke:currentColor;stroke-width:1px}.mce-transformable__handle{stroke:currentColor;stroke-width:1px;pointer-events:none}.mce-transformable__handle-box{stroke-width:1px;fill:transparent;stroke:transparent}.mce-transformable__tip{position:absolute;bottom:0;left:50%;transform:translate(-50%,calc(100% + 8px));background-color:rgb(var(--mce-theme-primary));color:rgb(var(--mce-theme-on-primary));font-size:12px;padding:2px 4px;border-radius:3px;text-wrap:nowrap}.mce-parent-element-obb{position:absolute;pointer-events:none;border-width:1px;border-style:dashed;color:rgba(var(--mce-theme-primary),1);opacity:.5}.mce-selected-area{position:absolute;border-width:1px;border-style:solid;color:rgba(var(--mce-theme-primary),1);background-color:rgba(var(--mce-theme-primary),.1)}.mce-selection-obb{position:absolute;color:rgba(var(--mce-theme-primary),1)}.mce-element-obb{position:absolute;border-width:1px;border-style:solid;color:rgba(var(--mce-theme-primary),1)}.progress-indicator[data-v-49cebb96]{display:flex;align-items:center;gap:12px}.progress-indicator__status[data-v-49cebb96]{font-size:12px;color:rgb(var(--mce-theme-on-surface))}.progress-indicator__bar[data-v-49cebb96]{position:relative;width:100px;height:6px;background-color:rgb(var(--mce-theme-background));border-radius:4px;overflow:hidden}.progress-indicator__bar-fill[data-v-49cebb96]{position:absolute;top:0;left:0;height:100%;background-color:rgb(var(--mce-theme-primary));transition:width .3s ease}.progress-indicator__bar-indeterminate[data-v-49cebb96]{position:absolute;top:0;left:-30%;width:30%;height:100%;background-color:#3b82f6;animation:indeterminate-slide-49cebb96 1.5s linear infinite}@keyframes indeterminate-slide-49cebb96{0%{left:-30%}to{left:100%}}.mce-statusbar[data-v-b59bbabb]{-webkit-user-select:none;user-select:none;position:relative;display:flex;align-items:center;gap:4px;font-size:12px;line-height:1;width:100%;height:24px;padding:0 8px;background-color:rgba(var(--mce-theme-surface),1);color:rgba(var(--mce-theme-on-surface),1);font-weight:700}.mce-statusbar__main[data-v-b59bbabb]{flex:1;display:flex;align-items:center}.mce-statusbar__item[data-v-b59bbabb]{display:flex;align-items:center;gap:4px}.mce-statusbar__item>svg[data-v-b59bbabb]{width:1em;height:1em}.mce-statusbar__divider[data-v-b59bbabb]{width:0;height:60%;border-right:1px solid rgba(var(--mce-theme-on-surface),.2);margin:0 8px}.mce-statusbar__kbd[data-v-b59bbabb]{outline:1px solid rgba(var(--mce-theme-on-surface),.4);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;padding:0 2px;font-family:system-ui,-apple-system,sans-serif}.mce-text-editor{position:absolute;width:0;height:0;left:0;top:0;overflow:visible}.mce-text-editor__wrapper{position:absolute}.mce-text-editor__editor{pointer-events:auto!important;cursor:move}.mce-payhead{bottom:0;left:-5px;position:absolute;top:0;width:10px;color:rgb(var(--mce-theme-on-surface));cursor:col-resize}.mce-payhead__header{position:relative;background-color:transparent;border:2px solid currentColor;border-bottom:none;height:12px;left:0;position:-webkit-sticky;position:sticky;right:0;top:0;width:10px}.mce-payhead__header:after{box-sizing:content-box;content:"";background-color:transparent;border-bottom:2px solid currentColor;border-right:2px solid currentColor;bottom:0;display:block;height:5px;position:absolute;right:0;transform:rotate(45deg) translate(2.8px,2px);width:5px}.mce-payhead__main{background-color:currentColor;bottom:0;left:4px;position:absolute;top:16px;transform:translate(.5px);width:1px}.mce-segment{display:flex;font-size:12px;align-items:center;position:absolute;top:2px;height:calc(100% - 4px);-webkit-user-select:none;user-select:none;flex-wrap:nowrap;color:#fff;border-radius:2px;background-color:#cc9641}.mce-segment--active{outline:1px solid rgb(var(--mce-theme-on-surface))}.mce-segment__animation{position:absolute;bottom:2px}.mce-segment__animation--in{width:0;left:4px;background-color:#fff;height:2px}.mce-segment__animation--in:after{border-color:transparent transparent transparent white;border-style:solid;border-width:5px 0 0 6px;bottom:0;content:"";display:block;height:0;left:100%;position:absolute;width:0}.mce-segment__animation--out{width:0;right:4px;background-color:#fff;height:2px}.mce-segment__animation--out:before{border-color:transparent white transparent transparent;border-style:solid;border-width:5px 6px 0 0;bottom:0;content:"";display:block;height:0;position:absolute;right:100%;width:0}.mce-segment__animation--stay{left:0;background-color:#fff;height:2px}.mce-segment__animation--stay:before{border-color:transparent white transparent transparent;border-style:solid;border-width:5px 6px 0 0;bottom:0;content:"";display:block;height:0;position:absolute;right:100%;width:0}.mce-segment__animation--stay:after{border-color:transparent transparent transparent white;border-style:solid;border-width:5px 0 0 6px;bottom:0;content:"";display:block;height:0;left:100%;position:absolute;width:0}.mce-segment__edge{align-items:center;background-color:rgb(var(--mce-theme-on-surface));bottom:0;content:"";display:flex;justify-content:center;pointer-events:auto;position:absolute;top:0;width:4px;cursor:col-resize}.mce-segment__edge:before{background-color:rgb(var(--mce-theme-surface));content:"";display:block;height:10px;width:2px}.mce-segment__edge--front{border-bottom-left-radius:2px;border-top-left-radius:2px;left:0}.mce-segment__edge--end{border-bottom-right-radius:2px;border-top-right-radius:2px;right:0}.mce-segment__node{border-radius:2px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mce-track{position:relative;display:flex;height:22px;background-color:rgb(var(--mce-theme-background))}.mce-trackhead{display:flex;height:22px;min-height:22px;align-items:center;color:rgba(var(--mce-theme-on-surface),.6);font-size:12px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mce-timeline{position:relative;height:160px;color:rgb(var(--mce-theme-on-surface));background-color:rgb(var(--mce-theme-surface));display:flex;flex-direction:column;width:100%;border-top:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity));border-bottom:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity))}.mce-timeline__toolbar{display:flex;align-items:center;height:24px;border-bottom:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity))}.mce-timeline__play{position:absolute;left:50%;transform:translate(-50%);cursor:pointer}.mce-timeline__main{position:relative;display:flex;min-height:0;flex:1}.mce-timeline__left{display:flex;flex-direction:column-reverse;align-items:center;width:120px;height:max-content;min-height:100%;padding-top:24px;overflow:hidden}.mce-timeline__left-wrapper{position:relative;height:100%;width:100%;padding:0 0 0 4px}.mce-timeline__right{position:relative;display:flex;min-width:0;flex:1;overflow:hidden;flex-direction:column;border-left:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity));padding-left:48px}.mce-timeline__right-wrapper{position:relative;height:100%;width:100%}.mce-timeline__ruler{position:relative;width:100%;height:24px;min-height:24px}.mce-timeline__track{position:relative;display:flex;flex-direction:column-reverse;justify-content:start;gap:8px;flex:1;height:max-content;min-height:100%;overflow:hidden}.mce-drawboard{--mce-theme-primary: 97, 101, 253;--mce-theme-on-primary: 247, 247, 248;--mce-theme-surface: 255, 255, 255;--mce-theme-on-surface: 56, 56, 56;--mce-theme-surface-variant: 35, 37, 41;--mce-theme-on-surface-variant: 255, 255, 255;--mce-theme-background: 240, 242, 245;--mce-theme-on-background: 56, 56, 56;--mce-border-color: 0, 0, 0;--mce-border-opacity: .08;--mce-high-emphasis-opacity: 1;--mce-medium-emphasis-opacity: .5;--mce-low-emphasis-opacity: .3;--mce-shadow: 0 8px 32px 2px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .2);--mce-blur: 8px}.mce-drawboard{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background-color:rgb(var(--mce-theme-surface));color:rgb(var(--mce-theme-on-surface));overflow:hidden;-webkit-user-select:none;user-select:none;cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4Ij48aW1hZ2UgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFFQUFBQUJBQ0FZQUFBQ3FhWEhlQUFBR0JVbEVRVlI0QWV5WXowOGtSUlRIZXhhRlVTRUVRamlRRUFnbitBK01ISmlERi84SkU0OWNTRkQ1RlRETUhFQVE5S3pSZytGSE5pSGVKRkZqQW5PQnJLekdZRlRRRzRSQUVHRloxdDBaRk1YdnAzZHIwcGxNTTkzTDdzeDAwNlJlcXZyVnE2cjMvYjczdW91NVpkM3d2NGlBRzU0QWxsc0d4RVFNYzA1QmgyZ3FQQTJBVGpRQVJGY2w1WXVTYWttTmhCNTVRV1Btc05NdytBMndCZ1dnZUFaNHpkblpXZkx5OGpLVHpXYS9QVGs1U1oyZW5xWmsrSkxFRUFJWjJMTk82bUEyQUJqUEFRS282dVBqNC9HNnVycGhKbXBxYXJvYkdob0c2K3ZyaDBUSS9hT2pJNGg0UlhPR0RBZ2pLOWlMUFRRVm5JYlRlSXZqakNFZzN0allPSUF5bFVwWnNWak1vdWNaYVdwcWVsZEVIR2N5bWE5RlZFcTZseVdRRWNnU0FiVDh0eHRSSkpweHBmOWROT2wwbXM1S0pwTTVJZ3daOFhqOE5ZZ1NHZmNPRHcrVGxJbU1JU091M3BEQi9wQXJWV1UySE1Rem5FUWdvZnJpNHNMV0p4SUo1bklDRVVnczlqZ3JEQm5OemMzdlVDWWk0MVFsa3RTQ3dKU0lEVlFPMHlBQXViVzB0UFE1aXA2ZUhycUNBaEZJTFBhWURHTVV0Qkp4RW5CcFFQVDI5djU0Y0hEd014bUFHTDFiN3lUQ1pJV1BFbkhidGlSNlF3RGdrZjkwNnIrU2kxZ3N4ck0xUGo2dVIyOE5JaEN0dFYrY2hvd0NKVkxvWGVIdGtHZHM1U1FBOEJmYS94L0orY0xDd3J4Nnkwc0dZSmN2RUlFWU1zejhreEk1MFZma202MnRyZGVsNTRYSnU4ZjRJbFhwbXZOUUNDRDZmK3Y0ODRHQmdZMzkvZjFmTkg1cUVsaUxPSWt3V1VHSmRIWjJmcm01dVZsV0V2SUp5R1dBSE0vT3pjMHRxdmRWQnRpN0NVUWd6cXpvNk9nWWtUMmZUajdCdklUMStQeGEvczVPQXFoNU1zQXVBUmxtUjBaRzdQc0FaWUJJOTh4YU9wMjI5NnF0clgxVkE2N1hYTUx3cDZRa2NLRE96elhLZ0N5Z0RMTFNadmthcUw5MkdaZzlJSEoxZGRWQzBHMXZiMytpbnVpWDVUMlFUNEF6Q3lBZ016OC92eUFIcmF2dUJNd1hFc0FpZ0hVS091eDFhZHJzNnVyNlZPT1NSbDNuNVpvYkFTWUx6b2VHaHU3eU1zUnBKTGZTWllDTkV5eGpkQWhMZG5kM2Z4c2RIWDEvWW1MaVBYMGUrNldqNUNnOXNvOEFTRlc2bGs4QUorT0lJY0RPQXIyMGJNZUszUW1TeWFTZDJvQkYyR3huWitmM3djSEJENGVIaHovUVBtKzJ0YldOVDA1TzNoa2JHMXZYL0FOSlJuSXVLUXNKaFFnQUxNNUFBbzVsRnhjWDUrU2c1L2ZBOHZMeVYvcU1maVRBYjdXM3Q2ZG1abWJ1VEU5UHIybVBJNGNjYTN3cStVdkNPV1FDNU91eGRLMFFBWnlPSXhDQVU5d0o3REpnSXBGSTBCVVVreUZyYTJzL3pjN09ic2pvUkFMb1EvVk9RY2ZjZmVrZlNpQUEwaUZmajZWcnhRZ3dYNE9Nbnp2QjFOU1VFL3dmZ29NQStrK05UZVRQTkFZOFpRYlJGVVVBa2NBaEhDTTZSZThFMUw4QVdTc3JLMStvcDdidnFTZktBS1luM1lrNGM2UzlxWDB5amJNNFUwdEsyOXd5QUM5TUdaZ3M4SFFuaU1mamtBWkloQ2pUQTVob0E1cUlReXAyQU9jY3ppdUxYRVVBRWNGQkhNWHBLKzhFcHY0M05qYStGNUpIRWdEVEF4ckFFTWxlN01uZWlNeksyN3dRUUlyaXZLYzdRWDkvUDlkbkFDT3NZejFScmdqQStYUmZSUUMyT0E0QWdOaFpvRStiRGNSRUhDTlQvK3ZyNjdmMWpDMlJaaDNyRWFrcnN4VWpBTENrTEdDSTZKVjNncXFxS213TkFZd3JHandoS1VZQU5vQ0FBS0thMVFVbjl6c0JrZWRlWUxKQjlmK0RGb1NXQUlCUkJvL01yMFVBNTY0djBCYnAzOWZYOTUzR1pBcUVrUUZra0ZUbGE4Vk85cElCZ0FDTW5RSGE4S0grUVJMZTlkdDdlM3UvNnRuaVgrYnU3dTdQTk9hdER3SFlzb2Jza2JweW14Y0M4QjRnZ0FJY0lCOEk4TWV0cmExdjY2WDRSa3RMUzUrTStPYno2U05Mc0dXTjFKWGR2Qkpnc2dBQ0FNbU5qcHNlVjF1RW14NDY1ckNoQkVKSkFKSGxZc1B0RGdLNDVpS015UUN5ZzNjRjZROXBsUjErZWVjMUEyUnFFVkVpQzBDQVFnS2dpVHc5MFNmOXNjR1dOUlV2ZmdnQURNQUFDQWxrQXFBaGc3RkovY0JFSDBCK0NXQ05JWUZ5Z0FpQTAwTk1vTUFENW1rSVlCMUNqZWNMK2tESmRRZ0lGRkEzWnlNQzNKaTVLZm9vQTI1S3BOMXdSaG5neHN4TjBZY3VBL3dHTGlMQUwyTmhzNDh5SUd3UjlZc255Z0MvaklYTlBzcUFzRVhVTDU0b0Evd3lGamI3S0FQQ0ZsRy9lS0lNOE10WTJPeWpEQWg2Uksvci8vOEFBQUQvLzltR1FIRUFBQUFHU1VSQlZBTUFFTFdobi9KQ0EzY0FBQUFBU1VWT1JLNUNZSUk9IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiLz48L3N2Zz4=) 4 4,auto}.mce-drawboard *{box-sizing:border-box}.mce-drawboard__overlay-container{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.mce-drawboard__main{position:relative;width:100%;flex:1;overflow:hidden}.mce-drawboard__main>*{pointer-events:none}.mce-drawboard__canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
+.mce-auxiliary{position:absolute;overflow:hidden;inset:0}.mce-auxiliary__alignment{position:absolute;background-color:#ff4aff;height:1px;width:1px}.mce-auxiliary__area{position:absolute;display:flex;align-items:center;justify-content:center;background-color:#f424fd33}.mce-auxiliary__area:before{content:"";background:#1690ff;height:1px;width:100%}.mce-auxiliary__area:after{position:absolute;content:"";height:5px;width:100%;border-left:1px solid #1690ff;border-right:1px solid #1690ff}.mce-auxiliary__area--vertical:before{height:100%;width:1px}.mce-auxiliary__area--vertical:after{height:100%;width:5px;border-left:none;border-right:none;border-top:1px solid #1690ff;border-bottom:1px solid #1690ff}.mce-icon{align-items:center;display:inline-flex;font-feature-settings:"liga";height:1em;justify-content:center;letter-spacing:normal;line-height:1;position:relative;opacity:var(--mce-icon-opacity, 1);text-indent:0;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;width:1em;min-width:1em}.mce-icon__svg{fill:currentColor;width:100%;height:100%}.mce-overlay>*{pointer-events:auto}.mce-menu{-webkit-user-select:none;user-select:none}.mce-list{display:flex;flex-direction:column;background-color:rgb(var(--mce-theme-on-surface));color:rgb(var(--mce-theme-surface));box-shadow:var(--mce-shadow);padding:8px;border-radius:8px;gap:2px;max-height:inherit;overflow-y:auto}.mce-list__divider{border-bottom:1px solid rgba(var(--mce-theme-surface),.12)}.mce-list-item{display:flex;width:100%;padding:4px 8px;border-radius:4px;cursor:pointer;align-items:center;gap:12px}.mce-list-item--opened,.mce-list-item:hover{background-color:rgba(var(--mce-theme-primary),1);color:rgba(var(--mce-theme-on-primary),1)}.mce-list-item--disabled{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.4}.mce-list-item__prepend{width:12px;height:12px;display:flex;align-items:center;justify-content:center}.mce-list-item__title{flex:1;display:flex;align-items:center;font-size:12px;white-space:nowrap}.mce-list-item__append{width:12px;height:12px;display:flex;align-items:center;justify-content:center;font-size:22px}.mce-context-menu__title{flex:1}.mce-context-menu__kbd{letter-spacing:.08em;margin-left:24px;opacity:.3}.mce-drawing{pointer-events:auto!important;position:fixed}.mce-drawing__content{margin:4px;border:1px solid rgba(0,0,0,.168627451);border-radius:4px;width:fit-content;height:22px;padding:0 4px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:rgba(var(--mce-theme-surface),1)}.mce-frame{position:absolute}.mce-frame--outline{outline:1px solid rgba(0,0,0,.168627451)}.mce-frame__name{position:absolute;top:0;left:0;transform:translateY(-100%) translateY(-4px);transform-origin:left bottom;font-size:12px;line-height:1.5;white-space:nowrap;pointer-events:auto;-webkit-user-select:none;user-select:none}.mce-frame__name>div{position:relative;min-width:28px;box-sizing:content-box;color:rgba(var(--mce-theme-on-surface),.8)}.mce-frame__name>input{position:absolute;left:0;top:0;outline:none;width:100%;height:100%;border:1px solid rgba(0,0,0,.168627451);border-radius:4px;cursor:default}.mce-back-selected-aera{pointer-events:auto!important;position:absolute;left:50%;bottom:24px;padding:4px 8px;display:flex;align-items:center;gap:4px;color:rgba(var(--mce-theme-surface),1);background-color:rgba(var(--mce-theme-on-background),var(--mce-medium-emphasis-opacity));transform:translate(-50%);-webkit-backdrop-filter:blur(var(--mce-blur));backdrop-filter:blur(var(--mce-blur));border-radius:8px;font-size:14px;cursor:pointer}.mce-hover{position:absolute;border-style:solid;border-width:2px;color:rgba(var(--mce-theme-primary),1)}.mce-tooltip{background:rgb(var(--mce-theme-surface-variant));color:rgb(var(--mce-theme-on-surface-variant));border-radius:4px;font-size:.875rem;line-height:1.6;display:inline-block;padding:5px 16px;text-transform:initial;width:auto;opacity:1;transition-property:opacity,transform;overflow-wrap:break-word}.mce-ruler{position:absolute;left:0;top:0;width:100%;height:100%;--text-color: rgba(var(--mce-theme-on-background), var(--mce-low-emphasis-opacity));--border-color: rgba(var(--mce-border-color), var(--mce-border-opacity))}.mce-ruler--vertical{width:var(--size)}.mce-ruler--horizontal{height:var(--size)}.mce-ruler__canvas{display:block;pointer-events:auto;cursor:pointer;background-color:rgb(var(--mce-theme-surface));-webkit-backdrop-filter:blur(var(--mce-blur));backdrop-filter:blur(var(--mce-blur))}.mce-ruler-refline{position:absolute;border-style:dashed;border-width:0;border-color:rgb(var(--mce-theme-primary));pointer-events:auto!important}.mce-ruler-refline--vertical{border-top-width:1px;cursor:ns-resize}.mce-ruler-refline--horizontal{border-left-width:1px;cursor:ew-resize}.mce-ruler-refline--temp{border-color:rgba(var(--mce-theme-primary),var(--mce-low-emphasis-opacity));pointer-events:none!important}.mce-rulers{position:absolute;inset:0;pointer-events:none}.mce-rulers__left-top{position:absolute;left:0;top:0;width:16px;height:16px;border:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity));border-top-width:0;border-left-width:0;background-color:rgb(var(--mce-theme-surface))}.mce-scrollbar{position:absolute;display:flex;pointer-events:auto!important}.mce-scrollbar--vertical{right:0;flex-direction:column}.mce-scrollbar--horizontal{bottom:0}.mce-scrollbar__track{flex:1}.mce-scrollbar__thumb{position:absolute;border-radius:calc(infinity * 1px);background-color:rgba(var(--mce-theme-on-background),var(--mce-low-emphasis-opacity));-webkit-backdrop-filter:blur(var(--mce-blur));backdrop-filter:blur(var(--mce-blur))}.mce-scrollbar__thumb--active,.mce-scrollbar__thumb:hover{background-color:rgba(var(--mce-theme-on-background),var(--mce-medium-emphasis-opacity))}.mce-transformable{left:0;top:0;color:rgb(var(--mce-theme-primary))}.mce-transformable__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}.mce-transformable__box{stroke:currentColor;stroke-width:1px}.mce-transformable__handle{stroke:currentColor;stroke-width:1px;pointer-events:none}.mce-transformable__handle-box{stroke-width:1px;fill:transparent;stroke:transparent}.mce-transformable__tip{position:absolute;bottom:0;left:50%;transform:translate(-50%,calc(100% + 8px));background-color:rgb(var(--mce-theme-primary));color:rgb(var(--mce-theme-on-primary));font-size:12px;padding:2px 4px;border-radius:3px;text-wrap:nowrap}.mce-parent-element-obb{position:absolute;pointer-events:none;border-width:1px;border-style:dashed;color:rgba(var(--mce-theme-primary),1);opacity:.5}.mce-selected-area{position:absolute;border-width:1px;border-style:solid;color:rgba(var(--mce-theme-primary),1);background-color:rgba(var(--mce-theme-primary),.1)}.mce-selection-obb{position:absolute;color:rgba(var(--mce-theme-primary),1)}.mce-element-obb{position:absolute;border-width:1px;border-style:solid;color:rgba(var(--mce-theme-primary),1)}.mce-layout{--mce-scrollbar-offset: 0px;display:flex;flex:1 1 auto}.mce-layout--full-height{--mce-scrollbar-offset: inherit;height:100%}.mce-layout-item,.mce-layout-item--absolute{position:absolute}.mce-layout-item--left{border-right:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity))}.mce-layout-item--top{border-bottom:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity))}.mce-layout-item--right{border-left:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity))}.mce-layout-item--bottom{border-top:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity))}.mce-main{flex:1 0 auto;max-width:100%;padding-left:var(--mce-layout-left);padding-right:var(--mce-layout-right);padding-top:var(--mce-layout-top);padding-bottom:var(--mce-layout-bottom)}.mce-main__scroller{max-width:100%;position:relative}.mce-main--scrollable{display:flex;position:absolute;top:0;left:0;width:100%;height:100%}.mce-main--scrollable>.v-main__scroller{flex:1 1 auto;overflow-y:auto;--v-layout-left: 0px;--v-layout-right: 0px;--v-layout-top: 0px;--v-layout-bottom: 0px}.progress-indicator[data-v-c4234331]{display:flex;align-items:center;gap:12px}.progress-indicator__status[data-v-c4234331]{font-size:12px;color:rgb(var(--mce-theme-on-surface))}.progress-indicator__bar[data-v-c4234331]{position:relative;width:100px;height:6px;background-color:rgb(var(--mce-theme-background));border-radius:4px;overflow:hidden}.progress-indicator__bar-fill[data-v-c4234331]{position:absolute;top:0;left:0;height:100%;background-color:rgb(var(--mce-theme-primary));transition:width .3s ease}.progress-indicator__bar-indeterminate[data-v-c4234331]{position:absolute;top:0;left:-30%;width:30%;height:100%;background-color:#3b82f6;animation:indeterminate-slide-c4234331 1.5s linear infinite}@keyframes indeterminate-slide-c4234331{0%{left:-30%}to{left:100%}}.mce-statusbar[data-v-36c89bd7]{-webkit-user-select:none;user-select:none;position:relative;display:flex;align-items:center;gap:4px;font-size:12px;line-height:1;width:100%;height:100%;padding:0 8px;background-color:rgba(var(--mce-theme-surface),1);color:rgba(var(--mce-theme-on-surface),1);font-weight:700}.mce-statusbar__main[data-v-36c89bd7]{flex:1;display:flex;align-items:center}.mce-statusbar__item[data-v-36c89bd7]{display:flex;align-items:center;gap:4px}.mce-statusbar__item>svg[data-v-36c89bd7]{width:1em;height:1em}.mce-statusbar__divider[data-v-36c89bd7]{width:0;height:60%;border-right:1px solid rgba(var(--mce-theme-on-surface),.2);margin:0 8px}.mce-statusbar__kbd[data-v-36c89bd7]{outline:1px solid rgba(var(--mce-theme-on-surface),.4);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;padding:0 2px;font-family:system-ui,-apple-system,sans-serif}.mce-text-editor{position:absolute;width:0;height:0;left:0;top:0;overflow:visible}.mce-text-editor__wrapper{position:absolute}.mce-text-editor__editor{pointer-events:auto!important;cursor:move}.mce-payhead{bottom:0;left:-5px;position:absolute;top:0;width:10px;color:rgb(var(--mce-theme-on-surface));cursor:col-resize}.mce-payhead__header{position:relative;background-color:transparent;border:2px solid currentColor;border-bottom:none;height:12px;left:0;position:-webkit-sticky;position:sticky;right:0;top:0;width:10px}.mce-payhead__header:after{box-sizing:content-box;content:"";background-color:transparent;border-bottom:2px solid currentColor;border-right:2px solid currentColor;bottom:0;display:block;height:5px;position:absolute;right:0;transform:rotate(45deg) translate(2.8px,2px);width:5px}.mce-payhead__main{background-color:currentColor;bottom:0;left:4px;position:absolute;top:16px;transform:translate(.5px);width:1px}.mce-segment{display:flex;font-size:12px;align-items:center;position:absolute;top:2px;height:calc(100% - 4px);-webkit-user-select:none;user-select:none;flex-wrap:nowrap;color:#fff;border-radius:2px;background-color:#cc9641}.mce-segment--active{outline:1px solid rgb(var(--mce-theme-on-surface))}.mce-segment__animation{position:absolute;bottom:2px}.mce-segment__animation--in{width:0;left:4px;background-color:#fff;height:2px}.mce-segment__animation--in:after{border-color:transparent transparent transparent white;border-style:solid;border-width:5px 0 0 6px;bottom:0;content:"";display:block;height:0;left:100%;position:absolute;width:0}.mce-segment__animation--out{width:0;right:4px;background-color:#fff;height:2px}.mce-segment__animation--out:before{border-color:transparent white transparent transparent;border-style:solid;border-width:5px 6px 0 0;bottom:0;content:"";display:block;height:0;position:absolute;right:100%;width:0}.mce-segment__animation--stay{left:0;background-color:#fff;height:2px}.mce-segment__animation--stay:before{border-color:transparent white transparent transparent;border-style:solid;border-width:5px 6px 0 0;bottom:0;content:"";display:block;height:0;position:absolute;right:100%;width:0}.mce-segment__animation--stay:after{border-color:transparent transparent transparent white;border-style:solid;border-width:5px 0 0 6px;bottom:0;content:"";display:block;height:0;left:100%;position:absolute;width:0}.mce-segment__edge{align-items:center;background-color:rgb(var(--mce-theme-on-surface));bottom:0;content:"";display:flex;justify-content:center;pointer-events:auto;position:absolute;top:0;width:4px;cursor:col-resize}.mce-segment__edge:before{background-color:rgb(var(--mce-theme-surface));content:"";display:block;height:10px;width:2px}.mce-segment__edge--front{border-bottom-left-radius:2px;border-top-left-radius:2px;left:0}.mce-segment__edge--end{border-bottom-right-radius:2px;border-top-right-radius:2px;right:0}.mce-segment__node{border-radius:2px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mce-track{position:relative;display:flex;height:22px;background-color:rgb(var(--mce-theme-background))}.mce-trackhead{display:flex;height:22px;min-height:22px;align-items:center;color:rgba(var(--mce-theme-on-surface),.6);font-size:12px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mce-timeline{position:relative;color:rgb(var(--mce-theme-on-surface));background-color:rgb(var(--mce-theme-surface));display:flex;flex-direction:column;width:100%;height:100%}.mce-timeline__toolbar{display:flex;align-items:center;height:24px;border-bottom:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity))}.mce-timeline__play{position:absolute;left:50%;transform:translate(-50%);cursor:pointer}.mce-timeline__main{position:relative;display:flex;min-height:0;flex:1}.mce-timeline__left{display:flex;flex-direction:column-reverse;align-items:center;width:120px;height:max-content;min-height:100%;padding-top:24px;overflow:hidden}.mce-timeline__left-wrapper{position:relative;height:100%;width:100%;padding:0 0 0 4px}.mce-timeline__right{position:relative;display:flex;min-width:0;flex:1;overflow:hidden;flex-direction:column;border-left:1px solid rgba(var(--mce-border-color),var(--mce-border-opacity));padding-left:48px}.mce-timeline__right-wrapper{position:relative;height:100%;width:100%}.mce-timeline__ruler{position:relative;width:100%;height:24px;min-height:24px}.mce-timeline__track{position:relative;display:flex;flex-direction:column-reverse;justify-content:start;gap:8px;flex:1;height:max-content;min-height:100%;overflow:hidden}.mce-editor{--mce-theme-primary: 97, 101, 253;--mce-theme-on-primary: 247, 247, 248;--mce-theme-surface: 255, 255, 255;--mce-theme-on-surface: 56, 56, 56;--mce-theme-surface-variant: 35, 37, 41;--mce-theme-on-surface-variant: 255, 255, 255;--mce-theme-background: 240, 242, 245;--mce-theme-on-background: 56, 56, 56;--mce-border-color: 0, 0, 0;--mce-border-opacity: .08;--mce-high-emphasis-opacity: 1;--mce-medium-emphasis-opacity: .5;--mce-low-emphasis-opacity: .3;--mce-shadow: 0 8px 32px 2px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .2);--mce-blur: 8px}.mce-editor{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background-color:rgb(var(--mce-theme-surface));color:rgb(var(--mce-theme-on-surface));overflow:hidden;-webkit-user-select:none;user-select:none;cursor:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4Ij48aW1hZ2UgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFFQUFBQUJBQ0FZQUFBQ3FhWEhlQUFBR0JVbEVRVlI0QWV5WXowOGtSUlRIZXhhRlVTRUVRamlRRUFnbitBK01ISmlERi84SkU0OWNTRkQ1RlRETUhFQVE5S3pSZytGSE5pSGVKRkZqQW5PQnJLekdZRlRRRzRSQUVHRloxdDBaRk1YdnAzZHIwcGxNTTkzTDdzeDAwNlJlcXZyVnE2cjMvYjczdW91NVpkM3d2NGlBRzU0QWxsc0d4RVFNYzA1QmgyZ3FQQTJBVGpRQVJGY2w1WXVTYWttTmhCNTVRV1Btc05NdytBMndCZ1dnZUFaNHpkblpXZkx5OGpLVHpXYS9QVGs1U1oyZW5xWmsrSkxFRUFJWjJMTk82bUEyQUJqUEFRS282dVBqNC9HNnVycGhKbXBxYXJvYkdob0c2K3ZyaDBUSS9hT2pJNGg0UlhPR0RBZ2pLOWlMUFRRVm5JYlRlSXZqakNFZzN0allPSUF5bFVwWnNWak1vdWNaYVdwcWVsZEVIR2N5bWE5RlZFcTZseVdRRWNnU0FiVDh0eHRSSkpweHBmOWROT2wwbXM1S0pwTTVJZ3daOFhqOE5ZZ1NHZmNPRHcrVGxJbU1JU091M3BEQi9wQXJWV1UySE1Rem5FUWdvZnJpNHNMV0p4SUo1bklDRVVnczlqZ3JEQm5OemMzdlVDWWk0MVFsa3RTQ3dKU0lEVlFPMHlBQXViVzB0UFE1aXA2ZUhycUNBaEZJTFBhWURHTVV0Qkp4RW5CcFFQVDI5djU0Y0hEd014bUFHTDFiN3lUQ1pJV1BFbkhidGlSNlF3RGdrZjkwNnIrU2kxZ3N4ck0xUGo2dVIyOE5JaEN0dFYrY2hvd0NKVkxvWGVIdGtHZHM1U1FBOEJmYS94L0orY0xDd3J4Nnkwc0dZSmN2RUlFWU1zejhreEk1MFZma202MnRyZGVsNTRYSnU4ZjRJbFhwbXZOUUNDRDZmK3Y0ODRHQmdZMzkvZjFmTkg1cUVsaUxPSWt3V1VHSmRIWjJmcm01dVZsV0V2SUp5R1dBSE0vT3pjMHRxdmRWQnRpN0NVUWd6cXpvNk9nWWtUMmZUajdCdklUMStQeGEvczVPQXFoNU1zQXVBUmxtUjBaRzdQc0FaWUJJOTh4YU9wMjI5NnF0clgxVkE2N1hYTUx3cDZRa2NLRE96elhLZ0N5Z0RMTFNadmthcUw5MkdaZzlJSEoxZGRWQzBHMXZiMytpbnVpWDVUMlFUNEF6Q3lBZ016OC92eUFIcmF2dUJNd1hFc0FpZ0hVS091eDFhZHJzNnVyNlZPT1NSbDNuNVpvYkFTWUx6b2VHaHU3eU1zUnBKTGZTWllDTkV5eGpkQWhMZG5kM2Z4c2RIWDEvWW1MaVBYMGUrNldqNUNnOXNvOEFTRlc2bGs4QUorT0lJY0RPQXIyMGJNZUszUW1TeWFTZDJvQkYyR3huWitmM3djSEJENGVIaHovUVBtKzJ0YldOVDA1TzNoa2JHMXZYL0FOSlJuSXVLUXNKaFFnQUxNNUFBbzVsRnhjWDUrU2c1L2ZBOHZMeVYvcU1maVRBYjdXM3Q2ZG1abWJ1VEU5UHIybVBJNGNjYTN3cStVdkNPV1FDNU91eGRLMFFBWnlPSXhDQVU5d0o3REpnSXBGSTBCVVVreUZyYTJzL3pjN09ic2pvUkFMb1EvVk9RY2ZjZmVrZlNpQUEwaUZmajZWcnhRZ3dYNE9Nbnp2QjFOU1VFL3dmZ29NQStrK05UZVRQTkFZOFpRYlJGVVVBa2NBaEhDTTZSZThFMUw4QVdTc3JLMStvcDdidnFTZktBS1luM1lrNGM2UzlxWDB5amJNNFUwdEsyOXd5QUM5TUdaZ3M4SFFuaU1mamtBWkloQ2pUQTVob0E1cUlReXAyQU9jY3ppdUxYRVVBRWNGQkhNWHBLKzhFcHY0M05qYStGNUpIRWdEVEF4ckFFTWxlN01uZWlNeksyN3dRUUlyaXZLYzdRWDkvUDlkbkFDT3NZejFScmdqQStYUmZSUUMyT0E0QWdOaFpvRStiRGNSRUhDTlQvK3ZyNjdmMWpDMlJaaDNyRWFrcnN4VWpBTENrTEdDSTZKVjNncXFxS213TkFZd3JHandoS1VZQU5vQ0FBS0thMVFVbjl6c0JrZWRlWUxKQjlmK0RGb1NXQUlCUkJvL01yMFVBNTY0djBCYnAzOWZYOTUzR1pBcUVrUUZra0ZUbGE4Vk85cElCZ0FDTW5RSGE4S0grUVJMZTlkdDdlM3UvNnRuaVgrYnU3dTdQTk9hdER3SFlzb2Jza2JweW14Y0M4QjRnZ0FJY0lCOEk4TWV0cmExdjY2WDRSa3RMUzUrTStPYno2U05Mc0dXTjFKWGR2Qkpnc2dBQ0FNbU5qcHNlVjF1RW14NDY1ckNoQkVKSkFKSGxZc1B0RGdLNDVpS015UUN5ZzNjRjZROXBsUjErZWVjMUEyUnFFVkVpQzBDQVFnS2dpVHc5MFNmOXNjR1dOUlV2ZmdnQURNQUFDQWxrQXFBaGc3RkovY0JFSDBCK0NXQ05JWUZ5Z0FpQTAwTk1vTUFENW1rSVlCMUNqZWNMK2tESmRRZ0lGRkEzWnlNQzNKaTVLZm9vQTI1S3BOMXdSaG5neHN4TjBZY3VBL3dHTGlMQUwyTmhzNDh5SUd3UjlZc255Z0MvaklYTlBzcUFzRVhVTDU0b0Evd3lGamI3S0FQQ0ZsRy9lS0lNOE10WTJPeWpEQWg2Uksvci8vOEFBQUQvLzltR1FIRUFBQUFHU1VSQlZBTUFFTFdobi9KQ0EzY0FBQUFBU1VWT1JLNUNZSUk9IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiLz48L3N2Zz4=) 4 4,auto}.mce-editor *{box-sizing:border-box}.mce-editor__overlay-container{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.mce-editor__drawboard{position:relative;width:100%;height:100%;overflow:hidden}.mce-editor__drawboard>*{pointer-events:none}.mce-editor__canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import './typed-global.d.ts';
 import './typed-plugins.d.ts';
-export { default as Drawboard } from './components/Drawboard.vue';
+export { default as EditorLayout } from './components/EditorLayout.vue';
+export { default as EditorLayoutItem } from './components/shared/LayoutItem.vue';
 export { default as Transformable } from './components/shared/Transformable.vue';
 export * from './composables';
 export * from './editor';