mce 0.18.3 → 0.18.4

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

@@ -0,0 +1,13 @@
+import type { Element2D } from 'modern-canvas';
+type __VLS_Props = {
+    element: Element2D;
+    scale: [number, number];
+    offset: [number, number];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEnd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -4,13 +4,13 @@ declare var __VLS_8: {
     ok: () => void;
     cancel: () => void;
     setAspectRatio: (ratio: 0 | [number, number]) => void;
-}, __VLS_10: {}, __VLS_25: {};
+}, __VLS_10: {}, __VLS_32: {};
 type __VLS_Slots = {} & {
     'foreground-cropper'?: (props: typeof __VLS_8) => any;
 } & {
     default?: (props: typeof __VLS_10) => any;
 } & {
-    transform?: (props: typeof __VLS_25) => any;
+    transform?: (props: typeof __VLS_32) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {
     transform: Readonly<import("vue").ShallowRef<({

package/dist/components/timeline/Segment.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     endTime: number;
     msPerPx?: number;
     active?: boolean;
+    rev?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     msPerPx: number;

package/dist/composables/icons.d.ts

@@ -5,6 +5,10 @@ export interface IconAliases {
     close: IconValue;
     play: IconValue;
     pause: IconValue;
+    skipPrevious: IconValue;
+    skipNext: IconValue;
+    stepBackward: IconValue;
+    stepForward: IconValue;
     gps: IconValue;
     arrowRight: IconValue;
     arrowDown: IconValue;

package/dist/index.css

@@ -535,7 +535,6 @@
   height: 100%;
   --text-color: rgba(var(--m-theme-on-background), var(--m-low-emphasis-opacity));
   --border-color: rgba(var(--m-border-color), var(--m-border-opacity));
-  cursor: pointer;
 }
 .m-ruler--vertical {
   width: var(--size);
@@ -754,6 +753,44 @@
 .m-cropper__transform_rect {
   width: 100%;
   height: 100%;
+}.m-path-editor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  color: rgba(var(--m-theme-primary), 1);
+}
+.m-path-editor__hit {
+  fill: none;
+  stroke: transparent;
+  stroke-width: 12;
+  pointer-events: stroke;
+  cursor: copy;
+}
+.m-path-editor__handle-line {
+  stroke: currentColor;
+  stroke-width: 1;
+  stroke-dasharray: 3 2;
+  opacity: 0.6;
+}
+.m-path-editor__anchor {
+  fill: white;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  pointer-events: auto;
+  cursor: move;
+}
+.m-path-editor__anchor--selected {
+  fill: rgba(var(--m-theme-primary), 1);
+}
+.m-path-editor__control {
+  fill: currentColor;
+  stroke: white;
+  stroke-width: 1;
+  pointer-events: auto;
+  cursor: move;
 }.m-selection {
   position: absolute;
   left: 0;
@@ -1020,7 +1057,6 @@
   top: 0;
   width: 10px;
   color: rgb(var(--m-theme-on-surface));
-  cursor: col-resize;
 }
 .m-payhead__header {
   position: relative;
@@ -1073,75 +1109,6 @@
 .m-segment--active {
   outline: 1px solid rgb(var(--m-theme-on-surface));
 }
-.m-segment__animation {
-  position: absolute;
-  bottom: 2px;
-}
-.m-segment__animation--in {
-  width: 0;
-  left: 4px;
-  background-color: white;
-  height: 2px;
-}
-.m-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;
-}
-.m-segment__animation--out {
-  width: 0;
-  right: 4px;
-  background-color: white;
-  height: 2px;
-}
-.m-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;
-}
-.m-segment__animation--stay {
-  left: 0;
-  background-color: white;
-  height: 2px;
-}
-.m-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;
-}
-.m-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;
-}
 .m-segment__edge {
   align-items: center;
   background-color: rgb(var(--m-theme-on-surface));
@@ -1173,6 +1140,9 @@
   right: 0;
 }
 .m-segment__node {
+  position: relative;
+  z-index: 1;
+  cursor: move;
   border-radius: 2px;
   padding: 2px 8px;
   white-space: nowrap;
@@ -1181,13 +1151,31 @@
 }
 .m-segment__block {
   position: absolute;
-  left: 0;
   top: 0;
-  font-size: 12px;
-  padding: 0 8px;
-  text-wrap: nowrap;
-  overflow: visible;
-  border-bottom: 1px solid rgb(var(--m-theme-surface));
+  height: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 2px;
+  box-sizing: border-box;
+  pointer-events: auto;
+  overflow: hidden;
+}
+.m-segment__block--animation {
+  background-color: rgba(255, 255, 255, 0.18);
+}
+.m-segment__block--animation:hover {
+  background-color: rgba(255, 255, 255, 0.28);
+}
+.m-segment__block--media {
+  background-color: rgba(64, 156, 96, 0.85);
+}
+.m-segment__block--media:hover {
+  background-color: rgb(64, 156, 96);
+}
+.m-segment__block--video {
+  background-color: rgba(116, 84, 196, 0.85);
+}
+.m-segment__block--video:hover {
+  background-color: rgb(116, 84, 196);
 }.m-track {
   position: relative;
   display: flex;
@@ -1195,15 +1183,92 @@
   background-color: rgb(var(--m-theme-background));
 }.m-trackhead {
   display: flex;
+  align-items: center;
   height: 22px;
   min-height: 22px;
-  align-items: center;
-  color: rgba(var(--m-theme-on-surface), 0.6);
+  padding: 0 4px;
+  color: rgba(var(--m-theme-on-surface), 0.8);
   font-size: 0.75rem;
   width: 100%;
+  border-radius: 4px;
+  user-select: none;
+}
+.m-trackhead:hover {
+  background-color: rgba(var(--m-theme-on-surface), 0.06);
+}
+.m-trackhead--selected {
+  background-color: rgba(var(--m-theme-primary), calc(var(--m-activated-opacity) * 3));
+}
+.m-trackhead--dropping {
+  box-shadow: 0 1px 0 0 rgb(var(--m-theme-on-background));
+}
+.m-trackhead__thumbnail {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex: none;
+  margin-right: 6px;
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+.m-trackhead__name {
+  flex: 1;
+  min-width: 0;
+  position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+.m-trackhead__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 2px;
+  margin: 0;
+  border: none;
+  outline: 1px solid rgb(var(--m-theme-primary));
+  background: rgb(var(--m-theme-surface));
+  color: inherit;
+  font: inherit;
+  border-radius: 2px;
+}
+.m-trackhead__action {
+  display: flex;
+  align-items: center;
+  flex: none;
+  gap: 1px;
+  margin-left: 4px;
+}
+.m-trackhead__action .m-trackhead__btn {
+  opacity: 0;
+  pointer-events: none;
+}
+.m-trackhead__action--show .m-trackhead__btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+.m-trackhead__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font-size: 0.75rem;
+}
+.m-trackhead__btn:hover {
+  background-color: rgba(var(--m-theme-on-surface), 0.12);
+}
+.m-trackhead__btn--show {
+  opacity: 1 !important;
+  pointer-events: auto !important;
 }.m-timeline {
   position: relative;
   color: rgb(var(--m-theme-on-surface));
@@ -1216,15 +1281,58 @@
 .m-timeline__toolbar {
   display: flex;
   align-items: center;
-  height: 24px;
+  gap: 8px;
+  height: 28px;
+  padding: 0 8px;
   border-bottom: 1px solid rgba(var(--m-border-color), var(--m-border-opacity));
+  font-size: 0.75rem;
+  user-select: none;
 }
-.m-timeline__play {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+.m-timeline__time {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-variant-numeric: tabular-nums;
+  min-width: 120px;
+}
+.m-timeline__time-sep {
+  opacity: 0.5;
+}
+.m-timeline__time--muted {
+  opacity: 0.5;
+}
+.m-timeline__controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.m-timeline__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
   cursor: pointer;
 }
+.m-timeline__btn:hover {
+  background-color: rgba(var(--m-theme-on-surface), 0.08);
+}
+.m-timeline__btn:active {
+  background-color: rgba(var(--m-theme-on-surface), 0.16);
+}
+.m-timeline__btn--primary {
+  width: 26px;
+  height: 26px;
+}
+.m-timeline__toolbar-spacer {
+  flex: 1;
+}
 .m-timeline__main {
   position: relative;
   display: flex;
@@ -1267,6 +1375,9 @@
   height: 24px;
   min-height: 24px;
 }
+.m-timeline__ruler, .m-timeline__ruler * {
+  cursor: default;
+}
 .m-timeline__track {
   position: relative;
   display: flex;