mce 0.16.6 → 0.17.0

package/dist/index.css

@@ -1,19 +1,4 @@
-.mce-drawing {
-  position: absolute;
-}
-.mce-drawing__tip {
-  margin: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.168627451);
-  border-radius: 4px;
-  width: fit-content;
-  height: 22px;
-  padding: 0 4px;
-  font-size: 0.875rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background-color: rgba(var(--mce-theme-surface), 1);
-}.mce-icon {
+.mce-icon {
   align-items: center;
   display: inline-flex;
   font-feature-settings: "liga";
@@ -391,7 +376,7 @@
 }
 .mce-context-menu .mce-overlay-content {
   max-height: var(--max-height);
-}.mce-node-creator {
+}.mce-creator {
   position: relative;
   width: 100%;
   height: 100%;
@@ -399,13 +384,13 @@
   flex-direction: column;
   overflow: hidden;
 }
-.mce-node-creator__tree {
+.mce-creator__tree {
   flex: 1;
   padding: 8px;
   width: 100%;
   overflow: auto;
 }
-.mce-node-creator__node {
+.mce-creator__node {
   position: relative;
   flex: none;
   display: flex;
@@ -417,7 +402,7 @@
   min-width: max-content;
   border-radius: 4px;
 }
-.mce-node-creator__node:before {
+.mce-creator__node:before {
   content: "";
   position: absolute;
   left: 0;
@@ -428,7 +413,7 @@
   pointer-events: none;
   border-radius: inherit;
 }
-.mce-node-creator__node:after {
+.mce-creator__node:after {
   content: "";
   position: absolute;
   left: 0;
@@ -439,16 +424,16 @@
   pointer-events: none;
   border-radius: inherit;
 }
-.mce-node-creator__node:hover {
+.mce-creator__node:hover {
   --overlay-color: rgba(var(--mce-theme-on-background), var(--mce-hover-opacity));
 }
-.mce-node-creator__node--active {
+.mce-creator__node--active {
   --underlay-color: rgba(var(--mce-theme-primary), calc(var(--mce-activated-opacity) * 3));
 }
-.mce-node-creator__node--active:hover {
+.mce-creator__node--active:hover {
   --overlay-color: rgba(var(--mce-theme-primary), var(--mce-hover-opacity));
 }
-.mce-node-creator__actions {
+.mce-creator__actions {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
@@ -550,14 +535,13 @@
   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));
+  cursor: pointer;
 }
 .mce-ruler--vertical {
   width: var(--size);
-  cursor: ew-resize;
 }
 .mce-ruler--horizontal {
   height: var(--size);
-  cursor: ns-resize;
 }
 .mce-ruler__canvas {
   display: block;
@@ -567,19 +551,38 @@
 }
 .mce-ruler-refline {
   position: absolute;
+  pointer-events: auto !important;
+  width: 10px;
+  height: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.mce-ruler-refline:before {
+  content: "";
+  display: block;
   border-style: dashed;
   border-width: 0;
   border-color: var(--line-color);
-  pointer-events: auto !important;
+  width: 100%;
+  height: 100%;
 }
 .mce-ruler-refline--vertical {
-  border-top-width: 1px;
+  transform: translateY(-50%);
   cursor: ns-resize;
 }
+.mce-ruler-refline--vertical.mce-ruler-refline:before {
+  height: 0;
+  border-top-width: 1px;
+}
 .mce-ruler-refline--horizontal {
-  border-left-width: 1px;
+  transform: translateX(-50%);
   cursor: ew-resize;
 }
+.mce-ruler-refline--horizontal.mce-ruler-refline:before {
+  width: 0;
+  border-left-width: 1px;
+}
 .mce-ruler-refline--temp {
   opacity: var(--mce-low-emphasis-opacity);
   pointer-events: none !important;
@@ -649,11 +652,11 @@
   font-size: 0.875rem;
   cursor: pointer;
   white-space: nowrap;
-}.mce-transform-controls {
+}.mce-transform {
   left: 0;
   top: 0;
 }
-.mce-transform-controls__svg {
+.mce-transform__svg {
   position: absolute;
   left: 0;
   top: 0;
@@ -664,29 +667,29 @@
   color: rgb(var(--mce-theme-primary));
   stroke: currentColor;
 }
-.mce-transform-controls__diagonal {
+.mce-transform__diagonal {
   stroke-width: 1px;
   stroke-dasharray: 2px;
   visibility: hidden;
 }
-.mce-transform-controls__rect {
+.mce-transform__rect {
   stroke-width: 1px;
 }
-.mce-transform-controls__handle {
+.mce-transform__handle {
   fill: white;
   stroke-width: 1px;
 }
-.mce-transform-controls__handle-rect {
+.mce-transform__handle-rect {
   stroke-width: 1px;
   fill: transparent;
   stroke: transparent;
 }
-.mce-transform-controls__rotator {
+.mce-transform__rotator {
   fill: white;
   stroke-width: 0.5px;
   stroke: currentColor;
 }
-.mce-transform-controls__tip {
+.mce-transform__tip {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -698,31 +701,31 @@
   border-radius: 3px;
   text-wrap: nowrap;
 }
-.mce-transform-controls--dashed .mce-transform-controls__rect {
+.mce-transform--dashed .mce-transform__rect {
   stroke-dasharray: 4px;
 }
-.mce-transform-controls--resizing .mce-transform-controls__diagonal {
+.mce-transform--resizing .mce-transform__diagonal {
   visibility: visible;
 }
-.mce-transform-controls--moving .mce-transform-controls__handle,
-.mce-transform-controls--moving .mce-transform-controls__handle-rect,
-.mce-transform-controls--moving .mce-transform-controls__rotator,
-.mce-transform-controls--moving .mce-transform-controls__tip {
+.mce-transform--moving .mce-transform__handle,
+.mce-transform--moving .mce-transform__handle-rect,
+.mce-transform--moving .mce-transform__rotator,
+.mce-transform--moving .mce-transform__tip {
   visibility: hidden;
 }
-.mce-transform-controls--moving .mce-transform-controls__rect {
+.mce-transform--moving .mce-transform__rect {
   opacity: 0.4;
   stroke-width: 0.5px;
 }
-.mce-transform-controls--moving .mce-transform-controls__svg-slot {
+.mce-transform--moving .mce-transform__svg-slot {
   opacity: 0.4;
   stroke-width: 0.5px;
 }
-.mce-transform-controls--hide-ui .mce-transform-controls__handle,
-.mce-transform-controls--hide-ui .mce-transform-controls__handle-rect,
-.mce-transform-controls--hide-ui .mce-transform-controls__rect,
-.mce-transform-controls--hide-ui .mce-transform-controls__rotator,
-.mce-transform-controls--hide-ui .mce-transform-controls__tip {
+.mce-transform--ui-hide .mce-transform__handle,
+.mce-transform--ui-hide .mce-transform__handle-rect,
+.mce-transform--ui-hide .mce-transform__rect,
+.mce-transform--ui-hide .mce-transform__rotator,
+.mce-transform--ui-hide .mce-transform__tip {
   visibility: hidden;
 }.mce-cropper {
   pointer-events: auto;
@@ -798,7 +801,7 @@
 }
 .mce-smart-guides__alignment {
   position: absolute;
-  background-color: #FF4AFF;
+  background-color: rgb(var(--mce-theme-secondary));
   height: 1px;
   width: 1px;
 }
@@ -807,11 +810,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(244, 36, 253, 0.2);
+  background-color: rgba(var(--mce-theme-secondary), 0.2);
 }
 .mce-smart-guides__area:before {
   content: "";
-  background: #1690ff;
+  background: rgb(var(--mce-theme-primary));
   height: 1px;
   width: 100%;
 }
@@ -820,8 +823,8 @@
   content: "";
   height: 5px;
   width: 100%;
-  border-left: 1px solid #1690ff;
-  border-right: 1px solid #1690ff;
+  border-left: 1px solid rgb(var(--mce-theme-primary));
+  border-right: 1px solid rgb(var(--mce-theme-primary));
 }
 .mce-smart-guides__area--vertical:before {
   height: 100%;
@@ -832,8 +835,8 @@
   width: 5px;
   border-left: none;
   border-right: none;
-  border-top: 1px solid #1690ff;
-  border-bottom: 1px solid #1690ff;
+  border-top: 1px solid rgb(var(--mce-theme-primary));
+  border-bottom: 1px solid rgb(var(--mce-theme-primary));
 }.mce-smart-selection {
   position: absolute;
   overflow: hidden;
@@ -842,29 +845,85 @@
   top: 0;
   bottom: 0;
 }
-.mce-smart-selection .mce-smart-handle {
+.mce-smart-selection__node {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
-  pointer-events: auto;
 }
-.mce-smart-selection .mce-smart-handle__btn {
+.mce-smart-selection__node--active .mce-smart-selection__ring {
+  background: rgb(var(--mce-theme-primary));
+}
+.mce-smart-selection__ghost {
+  position: absolute;
+  border: 1px solid rgb(var(--mce-theme-primary));
+}
+.mce-smart-selection__ring {
   width: 1px;
   height: 1px;
   border-radius: 100%;
-  border: 1px solid #FF24BD;
-  outline: 1px solid #FFFFFF;
+  border: 1px solid rgb(var(--mce-theme-secondary));
+  outline: 1px solid rgb(var(--mce-theme-on-secondary));
+  pointer-events: auto;
 }
-.mce-smart-selection .mce-smart-handle__btn:hover {
-  background: #FF24BD;
+.mce-smart-selection__ring:hover {
+  background: rgb(var(--mce-theme-secondary));
 }
-.mce-smart-selection .mce-smart-handle__btn--active {
+.mce-smart-selection__spacing {
+  position: absolute;
+  left: 0;
+  top: 0;
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mce-smart-selection__spacing-line {
+  height: 10px;
+  width: 10px;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mce-smart-selection__spacing-line:before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(var(--mce-theme-secondary));
+}
+.mce-smart-selection--hover .mce-smart-selection__ring {
   width: 10px;
   height: 10px;
 }
-.mce-smart-selection .mce-smart-handle--active .mce-smart-handle__btn {
-  background: #FF24BD;
+.mce-smart-selection--hover .mce-smart-selection__spacing {
+  visibility: visible;
+}
+.mce-smart-selection--vertical .mce-smart-selection__spacing-line {
+  height: 6px;
+  cursor: row-resize;
+}
+.mce-smart-selection--vertical .mce-smart-selection__spacing-line:before {
+  height: 1px;
+}
+.mce-smart-selection--horizontal .mce-smart-selection__spacing-line {
+  width: 6px;
+  cursor: col-resize;
+}
+.mce-smart-selection--horizontal .mce-smart-selection__spacing-line:before {
+  width: 1px;
+}
+.mce-smart-selection--ring .mce-smart-selection__spacing {
+  visibility: hidden;
+}
+.mce-smart-selection--spacing .mce-smart-selection__spacing {
+  visibility: visible;
+  background-color: rgb(var(--mce-theme-secondary));
+  opacity: 0.3;
+}
+.mce-smart-selection--spacing .mce-smart-selection__spacing-line {
+  visibility: hidden;
 }.progress-indicator[data-v-3b286483] {
   display: flex;
   align-items: center;
@@ -906,7 +965,7 @@
 100% {
     left: 100%;
 }
-}.mce-statusbar[data-v-a1f0e31b] {
+}.mce-statusbar[data-v-39842d8e] {
   user-select: none;
   position: relative;
   display: flex;
@@ -923,29 +982,29 @@
   white-space: nowrap;
   overflow-x: auto;
 }
-.mce-statusbar__main[data-v-a1f0e31b] {
+.mce-statusbar__main[data-v-39842d8e] {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 4px;
   height: 100%;
 }
-.mce-statusbar__item[data-v-a1f0e31b] {
+.mce-statusbar__item[data-v-39842d8e] {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.mce-statusbar__item > svg[data-v-a1f0e31b] {
+.mce-statusbar__item > svg[data-v-39842d8e] {
   width: 1em;
   height: 1em;
 }
-.mce-statusbar__divider[data-v-a1f0e31b] {
+.mce-statusbar__divider[data-v-39842d8e] {
   width: 0;
   height: 60%;
   border-right: 1px solid rgba(var(--mce-theme-on-surface), 0.1);
   margin: 0 8px;
 }
-.mce-statusbar__kbd[data-v-a1f0e31b] {
+.mce-statusbar__kbd[data-v-39842d8e] {
   outline: 1px solid rgba(var(--mce-theme-on-surface), 0.1);
   border-radius: 4px;
   display: flex;
@@ -954,20 +1013,6 @@
   font-size: 0.75rem;
   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;
@@ -1232,6 +1277,21 @@
   height: max-content;
   min-height: 100%;
   overflow: hidden;
+}.mce-drawing {
+  position: absolute;
+}
+.mce-drawing__tip {
+  margin: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.168627451);
+  border-radius: 4px;
+  width: fit-content;
+  height: 22px;
+  padding: 0 4px;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: rgba(var(--mce-theme-surface), 1);
 }.mce-toolbelt {
   pointer-events: auto !important;
   position: absolute;
@@ -1273,6 +1333,20 @@
   height: 100%;
   font-size: 0.75rem;
   border-radius: 4px;
+}.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-floatbar .mce-overlay-content {
   overflow: visible;
 }.mce-float-panel {
@@ -1359,6 +1433,8 @@
 }.mce-editor {
   --mce-theme-primary: 69, 151, 248;
   --mce-theme-on-primary: 255, 255, 255;
+  --mce-theme-secondary: 244, 36, 253;
+  --mce-theme-on-secondary: 255, 255, 255;
   --mce-theme-surface: 255, 255, 255;
   --mce-theme-on-surface: 30, 30, 30;
   --mce-theme-surface-variant: 35, 37, 41;

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { default as EditorLayoutItem } from './components/shared/LayoutItem.vue'
 export { default as Menu } from './components/shared/Menu.vue';
 export { default as Ruler } from './components/shared/Ruler.vue';
 export { default as Scrollbar } from './components/shared/Scrollbar.vue';
-export { default as TransformControls } from './components/shared/TransformControls.vue';
+export { default as Transform } from './components/shared/Transform.vue';
 export { default as EditorToolbelt } from './components/Toolbelt.vue';
 export { useEditor } from './composables';
 export * from './editor';