mce 0.15.37 → 0.15.39

package/README.md

@@ -1,4 +1,4 @@
-<h1 align="center">mce</h1>
+<h1 align="center">ModernCanvasEditor</h1>
 
 <p align="center">
   <a href="https://unpkg.com/mce">
@@ -18,7 +18,7 @@
   </a>
 </p>
 
-<p align="center">The headless canvas editor framework. only the ESM.</p>
+<p align="center">A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.</p>
 
 ## 📦 Install
 

package/dist/components/ForegroundCropper.vue.d.ts

@@ -1,3 +1,18 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare var __VLS_11: {
+    scale: number;
+    ok: () => void;
+    cancel: () => void;
+    setAspectRatio: (ratio: 0 | [number, number]) => void;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, 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/Selection.vue.d.ts

@@ -1,9 +1,16 @@
 import type { TransformValue } from './shared/TransformControls.vue';
-declare var __VLS_14: {}, __VLS_21: {};
+declare var __VLS_8: {
+    scale: number;
+    ok: () => void;
+    cancel: () => void;
+    setAspectRatio: (ratio: 0 | [number, number]) => void;
+}, __VLS_10: {}, __VLS_25: {};
 type __VLS_Slots = {} & {
-    transform?: (props: typeof __VLS_14) => any;
+    'foreground-cropper'?: (props: typeof __VLS_8) => any;
 } & {
-    default?: (props: typeof __VLS_21) => any;
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    transform?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {
     transformControls: Readonly<import("vue").ShallowRef<({
@@ -21,7 +28,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             readonly resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal" | undefined;
             readonly handleStrategy?: "point" | undefined;
             readonly handleShape?: "rect" | "circle" | undefined;
-            readonly handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[] | undefined;
+            readonly handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[] | undefined;
             readonly scale?: [number, number] | undefined;
             readonly offset?: [number, number] | undefined;
             readonly hideUi?: boolean | undefined;
@@ -61,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
             handleStrategy?: "point";
             handleShape?: "rect" | "circle";
-            handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+            handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
             scale?: [number, number];
             offset?: [number, number];
             hideUi?: boolean;
@@ -78,7 +85,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
         }>, {
             start: (event?: MouseEvent, index?: number) => boolean;
-            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
+            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
             transforming: import("vue").Ref<boolean, boolean>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             move: (args_0: TransformValue, args_1: TransformValue) => any;
@@ -94,7 +101,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             tag: string | any;
             threshold: number;
             handleShape: "rect" | "circle";
-            handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+            handles: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -124,7 +131,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         tag: string | any;
         threshold: number;
         handleShape: "rect" | "circle";
-        handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+        handles: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
     }> & Omit<Readonly<{
         tag?: string | any;
         color?: string;
@@ -137,7 +144,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
         handleStrategy?: "point";
         handleShape?: "rect" | "circle";
-        handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+        handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
         scale?: [number, number];
         offset?: [number, number];
         hideUi?: boolean;
@@ -154,7 +161,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
     }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
-        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
+        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
         transforming: import("vue").Ref<boolean, boolean>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
@@ -199,7 +206,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             readonly resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal" | undefined;
             readonly handleStrategy?: "point" | undefined;
             readonly handleShape?: "rect" | "circle" | undefined;
-            readonly handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[] | undefined;
+            readonly handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[] | undefined;
             readonly scale?: [number, number] | undefined;
             readonly offset?: [number, number] | undefined;
             readonly hideUi?: boolean | undefined;
@@ -239,7 +246,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
             handleStrategy?: "point";
             handleShape?: "rect" | "circle";
-            handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+            handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
             scale?: [number, number];
             offset?: [number, number];
             hideUi?: boolean;
@@ -256,7 +263,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
         }>, {
             start: (event?: MouseEvent, index?: number) => boolean;
-            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
+            activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
             transforming: import("vue").Ref<boolean, boolean>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             move: (args_0: TransformValue, args_1: TransformValue) => any;
@@ -272,7 +279,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             tag: string | any;
             threshold: number;
             handleShape: "rect" | "circle";
-            handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+            handles: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -302,7 +309,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         tag: string | any;
         threshold: number;
         handleShape: "rect" | "circle";
-        handles: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+        handles: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
     }> & Omit<Readonly<{
         tag?: string | any;
         color?: string;
@@ -315,7 +322,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         resizeStrategy?: "lockAspectRatio" | "lockAspectRatioDiagonal";
         handleStrategy?: "point";
         handleShape?: "rect" | "circle";
-        handles?: ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
+        handles?: ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
         scale?: [number, number];
         offset?: [number, number];
         hideUi?: boolean;
@@ -332,7 +339,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         "onUpdate:modelValue"?: ((value: Partial<TransformValue> | undefined) => any) | undefined;
     }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "movable" | "rotatable" | "resizable" | "tag" | "threshold" | "handleShape" | "handles")> & import("vue").ShallowUnwrapRef<{
         start: (event?: MouseEvent, index?: number) => boolean;
-        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-r" | "resize-b" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
+        activeHandle: import("vue").Ref<("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined, ("move" | "resize-t" | "resize-b" | "resize-r" | "resize-l" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined>;
         transforming: import("vue").Ref<boolean, boolean>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {

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

@@ -2,14 +2,13 @@ import type { ImageFillCropRect } from 'modern-idoc';
 /**
  * TODO 撤回无法重渲
  */
+type View = Record<'left' | 'top' | 'width' | 'height' | 'scaleX' | 'scaleY', number>;
 type __VLS_Props = {
     image: string;
-    minScale?: number;
-    maxScale?: number;
 };
 declare function ok(): void;
 declare function cancel(): void;
-declare function applySourceTransformToStyle(): void;
+declare function setAspectRatio(ratio: 0 | [number, number]): void;
 type __VLS_ModelProps = {
     /**
      * CropRect (value are based on Source !!!)
@@ -41,14 +40,14 @@ type __VLS_ModelProps = {
      *  |----- 0 -----|
      */
     modelValue?: ImageFillCropRect;
-    'style'?: Record<string, any>;
+    'view': View;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_7: {
     scale: number;
     ok: typeof ok;
     cancel: typeof cancel;
-    applySourceTransformToStyle: typeof applySourceTransformToStyle;
+    setAspectRatio: typeof setAspectRatio;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
@@ -57,28 +56,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     start: () => any;
     end: () => any;
     "update:modelValue": (value: ImageFillCropRect) => any;
-    "update:transform": (args_0: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    }) => any;
-    "update:style": (value: Record<string, any>) => any;
+    "update:view": (value: View) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onStart?: (() => any) | undefined;
     onEnd?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: ImageFillCropRect) => any) | undefined;
-    "onUpdate:transform"?: ((args_0: {
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    }) => any) | undefined;
-    "onUpdate:style"?: ((value: Record<string, any>) => any) | undefined;
-}>, {
-    minScale: number;
-    maxScale: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onUpdate:view"?: ((value: View) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.css

@@ -55,9 +55,9 @@
   transform-origin: left bottom;
   font-size: 0.75rem;
   line-height: 1.5;
-  white-space: nowrap;
   pointer-events: auto;
   user-select: none;
+  max-width: 100%;
 }
 .mce-frame__name > div {
   position: relative;
@@ -65,6 +65,10 @@
   box-sizing: content-box;
   color: rgb(var(--mce-theme-on-surface));
   opacity: 0.5;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .mce-frame__name > input {
   position: absolute;
@@ -755,13 +759,15 @@
   border-style: dashed;
   color: rgba(var(--mce-theme-primary), 1);
   opacity: 0.5;
+  border-color: currentColor;
 }
-.mce-selection__area {
+.mce-selection__marquee {
   position: absolute;
   border-width: 1px;
   border-style: solid;
   color: rgba(var(--mce-theme-primary), 1);
   background-color: rgba(var(--mce-theme-primary), 0.1);
+  border-color: currentcolor;
 }
 .mce-selection__transform {
   position: absolute;
@@ -772,6 +778,7 @@
   border-width: 1px;
   border-style: solid;
   color: rgba(var(--mce-theme-primary), 1);
+  border-color: currentcolor;
 }.mce-smart-guides {
   position: absolute;
   overflow: hidden;