@video-editor/ui 0.0.1-beta.29 → 0.0.1-beta.31

package/dist/index.d.ts

@@ -36,6 +36,11 @@ track: TrackUnion;
 segmentDragEnd: (payload: SegmentDragPayload) => any;
 segmentResizeEnd: (payload: SegmentResizePayload) => any;
 "update:selectedSegmentId": (value: string | null) => any;
+videoSegmentMuteToggle: (payload: {
+segment: IVideoFramesSegment;
+track: TrackUnion;
+muted: boolean;
+}) => any;
 }, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
 "onAdd-segment"?: ((args_0: {
 track: TrackUnion;
@@ -52,6 +57,11 @@ track: TrackUnion;
 onSegmentDragEnd?: ((payload: SegmentDragPayload) => any) | undefined;
 onSegmentResizeEnd?: ((payload: SegmentResizePayload) => any) | undefined;
 "onUpdate:selectedSegmentId"?: ((value: string | null) => any) | undefined;
+onVideoSegmentMuteToggle?: ((payload: {
+segment: IVideoFramesSegment;
+track: TrackUnion;
+muted: boolean;
+}) => any) | undefined;
 }>, {
 selectedSegmentId: string | null;
 disableInteraction: boolean;
@@ -115,7 +125,17 @@ declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {},
 containerRef: HTMLDivElement;
 }, HTMLDivElement>;
 
-declare const __VLS_component_4: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+declare const __VLS_component_4: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"toggle-video-mute": (payload: {
+segmentId: string;
+muted: boolean;
+}) => any;
+}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
+"onToggle-video-mute"?: ((payload: {
+segmentId: string;
+muted: boolean;
+}) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
 containerRef: HTMLDivElement;
 waveformRef: HTMLDivElement;
 }, HTMLDivElement>;
@@ -382,6 +402,9 @@ declare function __VLS_template_4(): {
         }): any;
         overlay?(_: {
             segment: IFramesSegmentUnion;
+            isMuted: boolean;
+            toggleMute: typeof handleMuteToggle;
+            showMuteButton: boolean;
         }): any;
     };
     refs: {
@@ -434,6 +457,8 @@ declare function formatTime(ms: number): string;
 
 export declare const FramesSegment: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
+declare function handleMuteToggle(event: MouseEvent): void;
+
 export declare const SegmentBase: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {
 accentColor: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { V as i } from "./index-BEEVxCQj.js";
-import { A as s, F as d, S as V } from "./index-BEEVxCQj.js";
+import { V as i } from "./index-txPw7MRQ.js";
+import { A as s, F as d, S as V } from "./index-txPw7MRQ.js";
 import { V as o } from "./index-C0eQjJkj.js";
 const t = {
   install(e) {

package/dist/ui.css

@@ -1 +1 @@
-:where(.ve-playhead[data-v-8e647d40]){--ve-playhead-nudge: 0px;--at-apply: absolute z-20 pointer-events-auto cursor-ew-resize h-full;transform:translate(calc(-50% - var(--ve-playhead-nudge)))}:where(.ve-playhead__icon[data-v-8e647d40]){--at-apply: text-[#222226] pointer-events-none relative z-2}:where(.ve-playhead__line[data-v-8e647d40]){--at-apply: bg-[#222226] bottom-0 w-px translate-x--50% left-50% top-2px absolute pointer-events-none}:where(.ve-ruler[data-v-30f91636]){--ve-ruler-major: 8px;--ve-ruler-minor: 4px;--at-apply: sticky top-0 left-0 right-0 bg-white z-3 border-b border-[#e5e7eb] overflow-hidden}:where(.ve-ruler .ve-ruler__ticks[data-v-30f91636]){--at-apply: relative h-full w-full box-border}:where(.ve-ruler .ve-ruler__tick[data-v-30f91636]){--at-apply: absolute top-0 h-full text-center text-[#6b7280] text-[11px]}:where(.ve-ruler .ve-ruler__line[data-v-30f91636]){--at-apply: h-[var(--ve-ruler-minor)] w-px mx-auto bg-[#cbd5e1]}:where(.ve-ruler .ve-ruler__tick--major .ve-ruler__line[data-v-30f91636]){--at-apply: relative h-[var(--ve-ruler-major)] bg-[#94a3b8]}:where(.ve-ruler .ve-ruler__label[data-v-30f91636]){--at-apply: absolute font-mono text-right whitespace-nowrap left-4px bottom-0;transform:translateY(-50%)}:where(.ve-toolbar[data-v-85ddeb0f]){--at-apply: flex items-center justify-between gap-2 px-3 py-2.5 border-b border-[#eceff3]}:where(.ve-toolbar .ve-toolbar__group[data-v-85ddeb0f]){--at-apply: inline-flex items-center gap-2}:where(.ve-toolbar .ve-zoom[data-v-85ddeb0f]){--at-apply: min-w-14 text-center text-xs text-[#222226] px-2 py-1 border border-[#e5e7eb] rounded-lg bg-white}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]){--at-apply: border border-[#d1d5db] bg-white text-[#222226] rounded-lg h-7 w-7 cursor-pointer transition-all duration-150}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]:disabled){--at-apply: cursor-not-allowed opacity-45}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]:not(:disabled):hover){--at-apply: border-[#222226] text-[#222226]}:where(.ve-toolbar .ve-toolbar__time[data-v-85ddeb0f]){--at-apply: inline-flex items-center gap-1.5 text-xs font-mono text-[#222226] ml-auto}:where(.ve-toolbar .ve-toolbar__time-divider[data-v-85ddeb0f]){--at-apply: text-[#9ca3af]}.ve-timeline__tracks[data-v-902b9363]{position:relative;z-index:1;padding-bottom:.75rem;display:flex;flex-direction:column;gap:2px;flex:1}.ve-track[data-v-902b9363]{position:relative;background-color:#f8fafc;overflow:hidden}.ve-track--main[data-v-902b9363]{background-color:#f4f4f6}.ve-track--has-selection[data-v-902b9363]{background-color:#f2f2fa!important;box-shadow:inset 0 1px #e4e4fc,inset 0 -1px #e4e4fc}.ve-track__body[data-v-902b9363]{position:relative;height:100%}.ve-segment[data-v-902b9363]{position:absolute;top:0;bottom:0;border-radius:4px;color:#0f172a;cursor:pointer;display:flex;align-items:center;overflow:hidden;transition-duration:.15s}.ve-segment__content[data-v-902b9363]{display:flex;flex-direction:column;gap:.25rem;padding:.375rem .625rem}.ve-segment__title[data-v-902b9363]{font-size:12px;font-weight:700;text-transform:capitalize}.ve-segment__time[data-v-902b9363]{font-size:11px;color:#0f172acc;font-family:monospace}.ve-segment__selection[data-v-902b9363]{position:absolute;inset:0;pointer-events:none;z-index:10}.ve-segment__handle[data-v-902b9363]{position:absolute;height:100%;width:4px;background-color:#222226;cursor:ew-resize;pointer-events:auto;border:2px solid #222226}.ve-segment__handle--left[data-v-902b9363]{left:0;top:0;border-radius:.25rem 0 0 .25rem}.ve-segment__handle--right[data-v-902b9363]{right:0;top:0;border-radius:0 .25rem .25rem 0}.ve-segment__handle-dots[data-v-902b9363]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.125rem;justify-content:center}.ve-segment__handle-dot[data-v-902b9363]{border-radius:9999px;background-color:#fff;width:1px;height:1px}.ve-track__add-button[data-v-902b9363]{position:absolute;top:50%;transform:translateY(-50%);margin-left:.5rem;width:2.5rem;height:2.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#222226;background-color:#f2f2fa;cursor:pointer;transition:background-color .2s;border:1px solid #222226}.ve-track__add-button[data-v-902b9363]:hover{background-color:#e5e5e5}.ve-track__gap-add[data-v-902b9363]{position:absolute;top:0;bottom:0;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.ve-track__gap-add[data-v-902b9363]:hover{background-color:#efefef}.ve-track__gap-add-icon[data-v-902b9363]{display:none;color:#fff;background-color:#222226;padding:4px;border-radius:4px}.ve-track__gap-add:hover .ve-track__gap-add-icon[data-v-902b9363]{display:block}:where(.ve-timeline[data-v-4e3078d5]){--ve-primary: #222226;--at-apply: flex flex-col w-full max-w-full min-w-0 rounded-10px h-full}:where(.ve-timeline .ve-timeline__viewport[data-v-4e3078d5]){--at-apply: relative overflow-auto w-full flex-1 bg-white}:where(.ve-timeline .ve-timeline__content[data-v-4e3078d5]){--at-apply: min-h-full min-w-full}:where(.ve-timeline .ve-segment--dragging[data-v-4e3078d5]){--at-apply: absolute z-50 rounded-[4px] text-[#0f172a] cursor-pointer flex items-center overflow-hidden pointer-events-none;box-shadow:0 4px 16px #0000004d,inset 0 0 0 2px #ffffff80}:where(.ve-timeline .ve-segment--preview[data-v-4e3078d5]){--at-apply: absolute z-45 rounded-[4px] pointer-events-none;opacity:.7;box-shadow:0 2px 8px #0003,inset 0 0 0 2px #fff6}:where(.ve-timeline .ve-segment__content[data-v-4e3078d5]){--at-apply: flex flex-col gap-1 px-2.5 py-1.5}:where(.ve-timeline .ve-segment__title[data-v-4e3078d5]){--at-apply: text-[12px] font-bold capitalize}:where(.ve-timeline .ve-segment__time[data-v-4e3078d5]){--at-apply: text-[11px] text-[rgba(15,23,42,.8)] font-mono}:where(.ve-timeline .ve-segment--placeholder[data-v-4e3078d5]){--at-apply: absolute pointer-events-none rounded-[4px] z-24;background:#2222261f;border:2px solid rgba(34,34,38,.6)}:where(.ve-timeline .ve-segment--placeholder-inner[data-v-4e3078d5]){--at-apply: absolute inset-0 rounded-[2px];opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-4e3078d5]){--at-apply: absolute pointer-events-none z-20;width:1px;background:var(--ve-primary);opacity:.7}:where(.ve-timeline .ve-new-track-line[data-v-4e3078d5]){--at-apply: absolute pointer-events-none z-25;height:1px;background:var(--ve-primary);opacity:.8}.waveform-canvas-strip[data-v-7cbe9830]{position:relative;width:100%;height:100%;overflow:hidden}.waveform-canvas-strip__canvas[data-v-7cbe9830]{position:absolute;inset:0;width:100%;height:100%;display:block}:where(.audio-segment[data-v-47cbc534]){--at-apply: relative flex items-center w-full h-full overflow-hidden rounded-4px;background-color:#efefef}:where(.audio-segment .audio-segment__waveform[data-v-47cbc534]){--at-apply: absolute top-0 bottom-0 left-0 flex items-center justify-start gap-[1px];overflow:hidden}:where(.audio-segment .audio-segment__waveform-canvas[data-v-47cbc534]){--at-apply: w-full h-full}:where(.audio-segment .audio-segment__placeholder[data-v-47cbc534]){--at-apply: flex items-center justify-center w-full h-full text-xs;color:#2b2b2b;opacity:.6}:where(.audio-segment .waveform-pattern[data-v-47cbc534]){width:100%;height:100%;background-image:linear-gradient(90deg,transparent 45%,#2B2B2B 45%,#2B2B2B 55%,transparent 55%);background-size:4px 100%;background-position:0 center;-webkit-mask-image:linear-gradient(to bottom,transparent 10%,black 40%,black 60%,transparent 90%);mask-image:linear-gradient(to bottom,transparent 10%,black 40%,black 60%,transparent 90%);opacity:.4}:where(.audio-segment .audio-segment__badge[data-v-47cbc534]){--at-apply: absolute top-1.5 left-2 px-1.5 py-0.5 text-[11px] rounded-4px pointer-events-none;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.frames-segment[data-v-fed75c7c]){--at-apply: relative flex items-stretch w-full h-full overflow-hidden rounded-4px}:where(.frames-segment .frames-segment__image[data-v-fed75c7c]){--at-apply: flex w-full h-full overflow-hidden rounded-4px;background-color:color-mix(in srgb,var(--ve-segment-accent, #222226) 15%,transparent)}:where(.frames-segment .frames-segment__image-item[data-v-fed75c7c]){--at-apply: flex-shrink-0 w-14 h-full bg-cover bg-left-center bg-no-repeat}:where(.frames-segment .frames-segment__video[data-v-fed75c7c]){--at-apply: flex items-center w-full h-full overflow-hidden;background:#f1f5f9}:where(.frames-segment .frames-segment__video-wrap[data-v-fed75c7c]){--at-apply: relative w-full h-full}:where(.frames-segment .frames-segment__thumb[data-v-fed75c7c]){--at-apply: flex-1 min-w-14;aspect-ratio:1 / 1;background-size:cover;background-position:center}:where(.frames-segment .frames-segment__waveform-strip[data-v-fed75c7c]){--at-apply: absolute left-0 right-0 bottom-0 flex items-center w-full px-1 overflow-hidden;height:16px;background:#e5e5e8;z-index:2}:where(.frames-segment .frames-segment__waveform[data-v-fed75c7c]){--at-apply: absolute top-0 bottom-0 left-0 flex items-center gap-[1px];overflow:hidden}:where(.frames-segment .frames-segment__waveform-canvas[data-v-fed75c7c]){--at-apply: w-full h-full}:where(.frames-segment .frames-segment__waveform-pattern[data-v-fed75c7c]){width:100%;height:100%;background-image:linear-gradient(90deg,transparent 45%,#52525b 45%,#52525b 55%,transparent 55%);background-size:4px 100%;background-position:0 center;-webkit-mask-image:linear-gradient(to bottom,transparent 10%,black 35%,black 65%,transparent 90%);mask-image:linear-gradient(to bottom,transparent 10%,black 35%,black 65%,transparent 90%);opacity:.4}:where(.frames-segment .frames-segment__placeholder[data-v-fed75c7c]){--at-apply: flex items-center justify-center w-full h-full text-[12px] rounded-4px whitespace-nowrap;color:#0f172abf;background:#0000000d}:where(.frames-segment .frames-segment__placeholder--video[data-v-fed75c7c]){border-radius:0}:where(.frames-segment .frames-segment__badge[data-v-fed75c7c]){--at-apply: absolute top-1.5 left-2 px-1.5 py-0.5 text-[11px] rounded-4px pointer-events-none;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.segment-base[data-v-d386af72]){--at-apply: relative flex items-center w-full h-full p-1.5 rounded-4px;background:#ffffff52;box-shadow:inset 0 0 0 1px #fff3}:where(.segment-base .segment-base__content[data-v-d386af72]){--at-apply: flex items-center justify-start gap-1.5 w-full}:where(.segment-base .segment-base__pill[data-v-d386af72]){--at-apply: inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-[11px] font-semibold whitespace-nowrap;box-shadow:inset 0 0 0 1px #ffffff4d}:where(.segment-base .segment-base__pill--primary[data-v-d386af72]){color:var(--ve-segment-accent, #222226);background:#22222614}:where(.segment-base .segment-base__pill--muted[data-v-d386af72]){color:#0f172ab3;background:#2222260d}:where(.segment-base .segment-base__badge[data-v-d386af72]){--at-apply: absolute top-1.5 left-2 px-1.5 py-0.5 text-[11px] rounded-4px pointer-events-none;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.ve-editor-segment[data-v-14600e74]){--at-apply: relative flex flex-col gap-1.5 w-full h-full text-[#0f172a]}:where(.ve-editor-segment .ve-editor-segment__preview[data-v-14600e74]){--at-apply: flex items-stretch w-full min-h-14}
+:where(.ve-playhead[data-v-8e647d40]){--ve-playhead-nudge: 0px;--at-apply: absolute z-20 pointer-events-auto cursor-ew-resize h-full;transform:translate(calc(-50% - var(--ve-playhead-nudge)))}:where(.ve-playhead__icon[data-v-8e647d40]){--at-apply: text-[#222226] pointer-events-none relative z-2}:where(.ve-playhead__line[data-v-8e647d40]){--at-apply: bg-[#222226] bottom-0 w-px translate-x--50% left-50% top-2px absolute pointer-events-none}:where(.ve-ruler[data-v-30f91636]){--ve-ruler-major: 8px;--ve-ruler-minor: 4px;--at-apply: sticky top-0 left-0 right-0 bg-white z-3 border-b border-[#e5e7eb] overflow-hidden}:where(.ve-ruler .ve-ruler__ticks[data-v-30f91636]){--at-apply: relative h-full w-full box-border}:where(.ve-ruler .ve-ruler__tick[data-v-30f91636]){--at-apply: absolute top-0 h-full text-center text-[#6b7280] text-[11px]}:where(.ve-ruler .ve-ruler__line[data-v-30f91636]){--at-apply: h-[var(--ve-ruler-minor)] w-px mx-auto bg-[#cbd5e1]}:where(.ve-ruler .ve-ruler__tick--major .ve-ruler__line[data-v-30f91636]){--at-apply: relative h-[var(--ve-ruler-major)] bg-[#94a3b8]}:where(.ve-ruler .ve-ruler__label[data-v-30f91636]){--at-apply: absolute font-mono text-right whitespace-nowrap left-4px bottom-0;transform:translateY(-50%)}:where(.ve-toolbar[data-v-85ddeb0f]){--at-apply: flex items-center justify-between gap-2 px-3 py-2.5 border-b border-[#eceff3]}:where(.ve-toolbar .ve-toolbar__group[data-v-85ddeb0f]){--at-apply: inline-flex items-center gap-2}:where(.ve-toolbar .ve-zoom[data-v-85ddeb0f]){--at-apply: min-w-14 text-center text-xs text-[#222226] px-2 py-1 border border-[#e5e7eb] rounded-lg bg-white}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]){--at-apply: border border-[#d1d5db] bg-white text-[#222226] rounded-lg h-7 w-7 cursor-pointer transition-all duration-150}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]:disabled){--at-apply: cursor-not-allowed opacity-45}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]:not(:disabled):hover){--at-apply: border-[#222226] text-[#222226]}:where(.ve-toolbar .ve-toolbar__time[data-v-85ddeb0f]){--at-apply: inline-flex items-center gap-1.5 text-xs font-mono text-[#222226] ml-auto}:where(.ve-toolbar .ve-toolbar__time-divider[data-v-85ddeb0f]){--at-apply: text-[#9ca3af]}.ve-timeline__tracks[data-v-902b9363]{position:relative;z-index:1;padding-bottom:.75rem;display:flex;flex-direction:column;gap:2px;flex:1}.ve-track[data-v-902b9363]{position:relative;background-color:#f8fafc;overflow:hidden}.ve-track--main[data-v-902b9363]{background-color:#f4f4f6}.ve-track--has-selection[data-v-902b9363]{background-color:#f2f2fa!important;box-shadow:inset 0 1px #e4e4fc,inset 0 -1px #e4e4fc}.ve-track__body[data-v-902b9363]{position:relative;height:100%}.ve-segment[data-v-902b9363]{position:absolute;top:0;bottom:0;border-radius:4px;color:#0f172a;cursor:pointer;display:flex;align-items:center;overflow:hidden;transition-duration:.15s}.ve-segment__content[data-v-902b9363]{display:flex;flex-direction:column;gap:.25rem;padding:.375rem .625rem}.ve-segment__title[data-v-902b9363]{font-size:12px;font-weight:700;text-transform:capitalize}.ve-segment__time[data-v-902b9363]{font-size:11px;color:#0f172acc;font-family:monospace}.ve-segment__selection[data-v-902b9363]{position:absolute;inset:0;pointer-events:none;z-index:10}.ve-segment__handle[data-v-902b9363]{position:absolute;height:100%;width:4px;background-color:#222226;cursor:ew-resize;pointer-events:auto;border:2px solid #222226}.ve-segment__handle--left[data-v-902b9363]{left:0;top:0;border-radius:.25rem 0 0 .25rem}.ve-segment__handle--right[data-v-902b9363]{right:0;top:0;border-radius:0 .25rem .25rem 0}.ve-segment__handle-dots[data-v-902b9363]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.125rem;justify-content:center}.ve-segment__handle-dot[data-v-902b9363]{border-radius:9999px;background-color:#fff;width:1px;height:1px}.ve-track__add-button[data-v-902b9363]{position:absolute;top:50%;transform:translateY(-50%);margin-left:.5rem;width:2.5rem;height:2.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#222226;background-color:#f2f2fa;cursor:pointer;transition:background-color .2s;border:1px solid #222226}.ve-track__add-button[data-v-902b9363]:hover{background-color:#e5e5e5}.ve-track__gap-add[data-v-902b9363]{position:absolute;top:0;bottom:0;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.ve-track__gap-add[data-v-902b9363]:hover{background-color:#efefef}.ve-track__gap-add-icon[data-v-902b9363]{display:none;color:#fff;background-color:#222226;padding:4px;border-radius:4px}.ve-track__gap-add:hover .ve-track__gap-add-icon[data-v-902b9363]{display:block}:where(.ve-timeline[data-v-4e3078d5]){--ve-primary: #222226;--at-apply: flex flex-col w-full max-w-full min-w-0 rounded-10px h-full}:where(.ve-timeline .ve-timeline__viewport[data-v-4e3078d5]){--at-apply: relative overflow-auto w-full flex-1 bg-white}:where(.ve-timeline .ve-timeline__content[data-v-4e3078d5]){--at-apply: min-h-full min-w-full}:where(.ve-timeline .ve-segment--dragging[data-v-4e3078d5]){--at-apply: absolute z-50 rounded-[4px] text-[#0f172a] cursor-pointer flex items-center overflow-hidden pointer-events-none;box-shadow:0 4px 16px #0000004d,inset 0 0 0 2px #ffffff80}:where(.ve-timeline .ve-segment--preview[data-v-4e3078d5]){--at-apply: absolute z-45 rounded-[4px] pointer-events-none;opacity:.7;box-shadow:0 2px 8px #0003,inset 0 0 0 2px #fff6}:where(.ve-timeline .ve-segment__content[data-v-4e3078d5]){--at-apply: flex flex-col gap-1 px-2.5 py-1.5}:where(.ve-timeline .ve-segment__title[data-v-4e3078d5]){--at-apply: text-[12px] font-bold capitalize}:where(.ve-timeline .ve-segment__time[data-v-4e3078d5]){--at-apply: text-[11px] text-[rgba(15,23,42,.8)] font-mono}:where(.ve-timeline .ve-segment--placeholder[data-v-4e3078d5]){--at-apply: absolute pointer-events-none rounded-[4px] z-24;background:#2222261f;border:2px solid rgba(34,34,38,.6)}:where(.ve-timeline .ve-segment--placeholder-inner[data-v-4e3078d5]){--at-apply: absolute inset-0 rounded-[2px];opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-4e3078d5]){--at-apply: absolute pointer-events-none z-20;width:1px;background:var(--ve-primary);opacity:.7}:where(.ve-timeline .ve-new-track-line[data-v-4e3078d5]){--at-apply: absolute pointer-events-none z-25;height:1px;background:var(--ve-primary);opacity:.8}.waveform-canvas-strip[data-v-7cbe9830]{position:relative;width:100%;height:100%;overflow:hidden}.waveform-canvas-strip__canvas[data-v-7cbe9830]{position:absolute;inset:0;width:100%;height:100%;display:block}:where(.audio-segment[data-v-47cbc534]){--at-apply: relative flex items-center w-full h-full overflow-hidden rounded-4px;background-color:#efefef}:where(.audio-segment .audio-segment__waveform[data-v-47cbc534]){--at-apply: absolute top-0 bottom-0 left-0 flex items-center justify-start gap-[1px];overflow:hidden}:where(.audio-segment .audio-segment__waveform-canvas[data-v-47cbc534]){--at-apply: w-full h-full}:where(.audio-segment .audio-segment__placeholder[data-v-47cbc534]){--at-apply: flex items-center justify-center w-full h-full text-xs;color:#2b2b2b;opacity:.6}:where(.audio-segment .waveform-pattern[data-v-47cbc534]){width:100%;height:100%;background-image:linear-gradient(90deg,transparent 45%,#2B2B2B 45%,#2B2B2B 55%,transparent 55%);background-size:4px 100%;background-position:0 center;-webkit-mask-image:linear-gradient(to bottom,transparent 10%,black 40%,black 60%,transparent 90%);mask-image:linear-gradient(to bottom,transparent 10%,black 40%,black 60%,transparent 90%);opacity:.4}:where(.audio-segment .audio-segment__badge[data-v-47cbc534]){--at-apply: absolute top-1.5 left-2 px-1.5 py-0.5 text-[11px] rounded-4px pointer-events-none;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.frames-segment[data-v-f389074c]){--at-apply: relative flex items-stretch w-full h-full overflow-hidden rounded-4px}:where(.frames-segment .frames-segment__image[data-v-f389074c]){--at-apply: flex w-full h-full overflow-hidden rounded-4px;background-color:color-mix(in srgb,var(--ve-segment-accent, #222226) 15%,transparent)}:where(.frames-segment .frames-segment__image-item[data-v-f389074c]){--at-apply: flex-shrink-0 w-14 h-full bg-cover bg-left-center bg-no-repeat}:where(.frames-segment .frames-segment__video[data-v-f389074c]){--at-apply: flex items-center w-full h-full overflow-hidden;background:#f1f5f9}:where(.frames-segment .frames-segment__video-wrap[data-v-f389074c]){--at-apply: relative w-full h-full}:where(.frames-segment .frames-segment__thumb[data-v-f389074c]){--at-apply: flex-1 min-w-14;aspect-ratio:1 / 1;background-size:cover;background-position:center}:where(.frames-segment .frames-segment__waveform-strip[data-v-f389074c]){--at-apply: absolute left-0 right-0 bottom-0 flex items-center w-full px-1 overflow-hidden;height:16px;background:#e5e5e8;z-index:2}:where(.frames-segment .frames-segment__waveform[data-v-f389074c]){--at-apply: absolute top-0 bottom-0 left-0 flex items-center gap-[1px];overflow:hidden}:where(.frames-segment .frames-segment__waveform-canvas[data-v-f389074c]){--at-apply: w-full h-full}:where(.frames-segment .frames-segment__waveform-pattern[data-v-f389074c]){width:100%;height:100%;background-image:linear-gradient(90deg,transparent 45%,#52525b 45%,#52525b 55%,transparent 55%);background-size:4px 100%;background-position:0 center;-webkit-mask-image:linear-gradient(to bottom,transparent 10%,black 35%,black 65%,transparent 90%);mask-image:linear-gradient(to bottom,transparent 10%,black 35%,black 65%,transparent 90%)}:where(.frames-segment .frames-segment__waveform-strip--muted .frames-segment__waveform[data-v-f389074c]){opacity:.25}:where(.frames-segment .frames-segment__waveform-strip--muted .frames-segment__waveform-pattern[data-v-f389074c]){opacity:.25}:where(.frames-segment .frames-segment__placeholder[data-v-f389074c]){--at-apply: flex items-center justify-center w-full h-full text-[12px] rounded-4px whitespace-nowrap;color:#0f172abf;background:#0000000d}:where(.frames-segment .frames-segment__placeholder--video[data-v-f389074c]){border-radius:0}:where(.frames-segment .frames-segment__overlay[data-v-f389074c]){--at-apply: absolute top-1.5 left-2 flex items-center gap-2 z-3}:where(.frames-segment .frames-segment__badge[data-v-f389074c]){--at-apply: px-1.5 py-0.5 text-[11px] rounded-4px pointer-events-none;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.frames-segment) .frames-segment__mute-btn[data-v-f389074c]{--at-apply: flex items-center justify-center rounded-4px border-none p-0 cursor-pointer text-white w-5 h-5 bg-[rgba(0,0,0,.25)] hover:bg-[rgba(0,0,0,.35)] focus-visible:outline-[2px] focus-visible:outline-[rgba(255,255,255,.85)] focus-visible:outline-offset-[1px]}:where(.frames-segment) .frames-segment__mute-icon[data-v-f389074c]{--at-apply: block text-white w-3 h-3}:where(.segment-base[data-v-d386af72]){--at-apply: relative flex items-center w-full h-full p-1.5 rounded-4px;background:#ffffff52;box-shadow:inset 0 0 0 1px #fff3}:where(.segment-base .segment-base__content[data-v-d386af72]){--at-apply: flex items-center justify-start gap-1.5 w-full}:where(.segment-base .segment-base__pill[data-v-d386af72]){--at-apply: inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-full text-[11px] font-semibold whitespace-nowrap;box-shadow:inset 0 0 0 1px #ffffff4d}:where(.segment-base .segment-base__pill--primary[data-v-d386af72]){color:var(--ve-segment-accent, #222226);background:#22222614}:where(.segment-base .segment-base__pill--muted[data-v-d386af72]){color:#0f172ab3;background:#2222260d}:where(.segment-base .segment-base__badge[data-v-d386af72]){--at-apply: absolute top-1.5 left-2 px-1.5 py-0.5 text-[11px] rounded-4px pointer-events-none;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.ve-editor-segment[data-v-acab97b9]){--at-apply: relative flex flex-col gap-1.5 w-full h-full text-[#0f172a]}:where(.ve-editor-segment .ve-editor-segment__preview[data-v-acab97b9]){--at-apply: flex items-stretch w-full min-h-14}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@video-editor/ui",
   "type": "module",
-  "version": "0.0.1-beta.29",
+  "version": "0.0.1-beta.31",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -20,8 +20,8 @@
     "vue": "^3.5.26"
   },
   "dependencies": {
-    "@video-editor/shared": "0.0.1-beta.29",
-    "@video-editor/protocol": "0.0.1-beta.29"
+    "@video-editor/protocol": "0.0.1-beta.31",
+    "@video-editor/shared": "0.0.1-beta.31"
   },
   "scripts": {
     "build": "vite build",