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

package/dist/VideoEditorTimeline.js

@@ -1,5 +1,5 @@
-import { V as a } from "./index-txPw7MRQ.js";
-import "./index-C0eQjJkj.js";
+import { V as a } from "./index-Cag82jZx.js";
+import "./index-DHei3gxX.js";
 export {
   a as default
 };

package/dist/VideoTimeline.js

@@ -1,4 +1,4 @@
-import { V as f } from "./index-C0eQjJkj.js";
+import { V as f } from "./index-DHei3gxX.js";
 export {
   f as default
 };

package/dist/{index-txPw7MRQ.js → index-Cag82jZx.js}

@@ -1,7 +1,7 @@
 import { defineComponent as X, ref as V, onMounted as ce, onBeforeUnmount as de, watch as N, nextTick as we, createElementBlock as p, openBlock as h, createElementVNode as R, reactive as Z, computed as D, renderSlot as b, normalizeStyle as J, createVNode as H, createCommentVNode as j, toDisplayString as G, Fragment as ee, renderList as le, normalizeClass as _e, withModifiers as se, watchEffect as Re, createBlock as $e, createSlots as Be, withCtx as K, unref as L, normalizeProps as re, guardReactiveProps as oe } from "vue";
 import { extractWaveform as pe, generateThumbnails as Ae, getMp4Meta as ke } from "@video-editor/protocol";
 import { isVideoFramesSegment as F, isAudioSegment as Ie } from "@video-editor/shared";
-import { _ as Y, V as We } from "./index-C0eQjJkj.js";
+import { _ as Y, V as We } from "./index-DHei3gxX.js";
 const xe = /* @__PURE__ */ X({
   name: "WaveformCanvasStrip",
   __name: "WaveformCanvasStrip",

package/dist/{index-C0eQjJkj.js → index-DHei3gxX.js}

@@ -908,7 +908,7 @@ const It = { class: "ve-timeline" }, $t = { class: "ve-segment__content" }, St =
       ], 512)
     ]));
   }
-}), Zt = /* @__PURE__ */ ce(Ft, [["__scopeId", "data-v-4e3078d5"]]);
+}), Zt = /* @__PURE__ */ ce(Ft, [["__scopeId", "data-v-1d7ba95f"]]);
 export {
   Zt as V,
   ce as _

package/dist/index.js

@@ -1,6 +1,6 @@
-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";
+import { V as i } from "./index-Cag82jZx.js";
+import { A as s, F as d, S as V } from "./index-Cag82jZx.js";
+import { V as o } from "./index-DHei3gxX.js";
 const t = {
   install(e) {
     e.component(o.name || "VeVideoTimeline", o), e.component(i.name || "VeVideoEditorTimeline", i);

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-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}
+:where(.ve-playhead[data-v-8e647d40]){--ve-playhead-nudge: 0px;height:100%;cursor:ew-resize;pointer-events:auto;position:absolute;z-index:20;transform:translate(calc(-50% - var(--ve-playhead-nudge)))}:where(.ve-playhead__icon[data-v-8e647d40]){color:color-mix(in oklab,#222226 var(--un-text-opacity),transparent);pointer-events:none;position:relative;z-index:2}:where(.ve-playhead__line[data-v-8e647d40]){background-color:color-mix(in oklab,#222226 var(--un-bg-opacity),transparent);width:1px;pointer-events:none;--un-translate-x:-50%;translate:var(--un-translate-x) var(--un-translate-y);bottom:calc(var(--spacing) * 0);left:50%;top:2px;position:absolute}@property --un-translate-x{syntax:"*";inherits:false;initial-value:0;}@property --un-translate-y{syntax:"*";inherits:false;initial-value:0;}@property --un-translate-z{syntax:"*";inherits:false;initial-value:0;}:where(.ve-ruler[data-v-30f91636]){--ve-ruler-major: 8px;--ve-ruler-minor: 4px;border-bottom-width:1px;border-color:color-mix(in oklab,#e5e7eb var(--un-border-opacity),transparent);background-color:color-mix(in srgb,var(--colors-white) var(--un-bg-opacity),transparent);top:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0);right:calc(var(--spacing) * 0);position:sticky;z-index:3;overflow:hidden}@supports (color: color-mix(in lab,red,red)){:where(.ve-ruler[data-v-30f91636]){background-color:color-mix(in oklab,var(--colors-white) var(--un-bg-opacity),transparent)}}:where(.ve-ruler .ve-ruler__ticks[data-v-30f91636]){height:100%;width:100%;box-sizing:border-box;position:relative}:where(.ve-ruler .ve-ruler__tick[data-v-30f91636]){font-size:11px;color:color-mix(in oklab,#6b7280 var(--un-text-opacity),transparent);text-align:center;height:100%;top:calc(var(--spacing) * 0);position:absolute}:where(.ve-ruler .ve-ruler__line[data-v-30f91636]){margin-inline:auto;background-color:color-mix(in oklab,#cbd5e1 var(--un-bg-opacity),transparent);height:var(--ve-ruler-minor);width:1px}:where(.ve-ruler .ve-ruler__tick--major .ve-ruler__line[data-v-30f91636]){background-color:color-mix(in oklab,#94a3b8 var(--un-bg-opacity),transparent);height:var(--ve-ruler-major);position:relative}:where(.ve-ruler .ve-ruler__label[data-v-30f91636]){font-family:var(--font-mono);text-align:right;white-space:nowrap;left:4px;bottom:calc(var(--spacing) * 0);position:absolute;transform:translateY(-50%)}:where(.ve-toolbar[data-v-85ddeb0f]){padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2.5);border-bottom-width:1px;border-color:color-mix(in oklab,#eceff3 var(--un-border-opacity),transparent);display:flex;gap:calc(var(--spacing) * 2);align-items:center;justify-content:space-between}:where(.ve-toolbar .ve-toolbar__group[data-v-85ddeb0f]){display:inline-flex;gap:calc(var(--spacing) * 2);align-items:center}:where(.ve-toolbar .ve-zoom[data-v-85ddeb0f]){font-size:var(--text-xs-fontSize);line-height:var(--un-leading, var(--text-xs-lineHeight));color:color-mix(in oklab,#222226 var(--un-text-opacity),transparent);padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 1);text-align:center;border-width:1px;border-color:color-mix(in oklab,#e5e7eb var(--un-border-opacity),transparent);border-radius:var(--radius-lg);background-color:color-mix(in srgb,var(--colors-white) var(--un-bg-opacity),transparent);min-width:calc(var(--spacing) * 14)}@supports (color: color-mix(in lab,red,red)){:where(.ve-toolbar .ve-zoom[data-v-85ddeb0f]){background-color:color-mix(in oklab,var(--colors-white) var(--un-bg-opacity),transparent)}}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]){color:color-mix(in oklab,#222226 var(--un-text-opacity),transparent);border-width:1px;border-color:color-mix(in oklab,#d1d5db var(--un-border-opacity),transparent);border-radius:var(--radius-lg);background-color:color-mix(in srgb,var(--colors-white) var(--un-bg-opacity),transparent);height:calc(var(--spacing) * 7);width:calc(var(--spacing) * 7);cursor:pointer;transition-property:all;transition-timing-function:var(--un-ease, var(--default-transition-timingFunction));transition-duration:var(--un-duration, var(--default-transition-duration));--un-duration:.15s;transition-duration:.15s}@supports (color: color-mix(in lab,red,red)){:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]){background-color:color-mix(in oklab,var(--colors-white) var(--un-bg-opacity),transparent)}}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]:disabled){opacity:45%;cursor:not-allowed}:where(.ve-toolbar .ve-btn[data-v-85ddeb0f]:not(:disabled):hover){color:color-mix(in oklab,#222226 var(--un-text-opacity),transparent);border-color:color-mix(in oklab,#222226 var(--un-border-opacity),transparent)}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}:where(.ve-toolbar .ve-toolbar__time[data-v-85ddeb0f]){font-size:var(--text-xs-fontSize);line-height:var(--un-leading, var(--text-xs-lineHeight));color:color-mix(in oklab,#222226 var(--un-text-opacity),transparent);font-family:var(--font-mono);margin-left:auto;display:inline-flex;gap:calc(var(--spacing) * 1.5);align-items:center}:where(.ve-toolbar .ve-toolbar__time-divider[data-v-85ddeb0f]){color:color-mix(in oklab,#9ca3af var(--un-text-opacity),transparent)}.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-1d7ba95f]){--ve-primary: #222226;border-radius:10px;display:flex;flex-direction:column;width:100%;max-width:100%;min-width:calc(var(--spacing) * 0);height:100%}:where(.ve-timeline .ve-timeline__viewport[data-v-1d7ba95f]){background-color:color-mix(in srgb,var(--colors-white) var(--un-bg-opacity),transparent);flex:1 1 0%;width:100%;position:relative;overflow:auto}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab,red,red)){:where(.ve-timeline .ve-timeline__viewport[data-v-1d7ba95f]){background-color:color-mix(in oklab,var(--colors-white) var(--un-bg-opacity),transparent)}}:where(.ve-timeline .ve-timeline__content[data-v-1d7ba95f]){min-height:100%;min-width:100%;position:relative}:where(.ve-timeline .ve-segment--dragging[data-v-1d7ba95f]){color:color-mix(in oklab,#0f172a var(--un-text-opacity),transparent);border-radius:4px;display:flex;cursor:pointer;pointer-events:none;align-items:center;position:absolute;z-index:50;overflow:hidden;box-shadow:0 4px 16px #0000004d,inset 0 0 0 2px #ffffff80}:where(.ve-timeline .ve-segment--preview[data-v-1d7ba95f]){border-radius:4px;pointer-events:none;position:absolute;z-index:45;opacity:.7;box-shadow:0 2px 8px #0003,inset 0 0 0 2px #fff6}:where(.ve-timeline .ve-segment__content[data-v-1d7ba95f]){padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1.5);display:flex;flex-direction:column;gap:calc(var(--spacing) * 1)}:where(.ve-timeline .ve-segment__title[data-v-1d7ba95f]){font-size:12px;--un-font-weight:var(--fontWeight-bold);font-weight:var(--fontWeight-bold);text-transform:capitalize}:where(.ve-timeline .ve-segment__time[data-v-1d7ba95f]){font-size:11px;color:color-mix(in oklab,rgba(15,23,42,.8) var(--un-text-opacity),transparent);font-family:var(--font-mono)}:where(.ve-timeline .ve-segment--placeholder[data-v-1d7ba95f]){border-radius:4px;pointer-events:none;position:absolute;z-index:24;background:#2222261f;border:2px solid rgba(34,34,38,.6)}:where(.ve-timeline .ve-segment--placeholder-inner[data-v-1d7ba95f]){border-radius:2px;inset:calc(var(--spacing) * 0);position:absolute;opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-1d7ba95f]){pointer-events:none;position:absolute;z-index:20;width:1px;background:var(--ve-primary);opacity:.7}:where(.ve-timeline .ve-new-track-line[data-v-1d7ba95f]){pointer-events:none;position:absolute;z-index: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]){border-radius:4px;display:flex;width:100%;height:100%;align-items:center;position:relative;overflow:hidden;background-color:#efefef}:where(.audio-segment .audio-segment__waveform[data-v-47cbc534]){display:flex;gap:1px;align-items:center;top:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0);justify-content:flex-start;position:absolute;overflow:hidden}:where(.audio-segment .audio-segment__waveform-canvas[data-v-47cbc534]){width:100%;height:100%}:where(.audio-segment .audio-segment__placeholder[data-v-47cbc534]){font-size:var(--text-xs-fontSize);line-height:var(--un-leading, var(--text-xs-lineHeight));display:flex;width:100%;height:100%;align-items:center;justify-content:center;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]){font-size:11px;padding-inline:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * .5);border-radius:4px;pointer-events:none;top:calc(var(--spacing) * 1.5);left:calc(var(--spacing) * 2);position:absolute;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.frames-segment[data-v-f389074c]){border-radius:4px;display:flex;width:100%;height:100%;align-items:stretch;position:relative;overflow:hidden}:where(.frames-segment .frames-segment__image[data-v-f389074c]){border-radius:4px;display:flex;width:100%;height:100%;overflow:hidden;background-color:color-mix(in srgb,var(--ve-segment-accent, #222226) 15%,transparent)}:where(.frames-segment .frames-segment__image-item[data-v-f389074c]){flex-shrink:0;width:calc(var(--spacing) * 14);height:100%;background-size:cover;background-position:left center;background-repeat:no-repeat}:where(.frames-segment .frames-segment__video[data-v-f389074c]){display:flex;width:100%;height:100%;align-items:center;overflow:hidden;background:#f1f5f9}:where(.frames-segment .frames-segment__video-wrap[data-v-f389074c]){width:100%;height:100%;position:relative}:where(.frames-segment .frames-segment__thumb[data-v-f389074c]){flex:1 1 0%;min-width:calc(var(--spacing) * 14);aspect-ratio:1 / 1;background-size:cover;background-position:center}:where(.frames-segment .frames-segment__waveform-strip[data-v-f389074c]){padding-inline:calc(var(--spacing) * 1);display:flex;width:100%;align-items:center;left:calc(var(--spacing) * 0);right:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * 0);position:absolute;overflow:hidden;height:16px;background:#e5e5e8;z-index:2}:where(.frames-segment .frames-segment__waveform[data-v-f389074c]){display:flex;gap:1px;align-items:center;top:calc(var(--spacing) * 0);bottom:calc(var(--spacing) * 0);left:calc(var(--spacing) * 0);position:absolute;overflow:hidden}:where(.frames-segment .frames-segment__waveform-canvas[data-v-f389074c]){width:100%;height:100%}: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]){font-size:12px;border-radius:4px;display:flex;width:100%;height:100%;white-space:nowrap;align-items:center;justify-content:center;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]){display:flex;gap:calc(var(--spacing) * 2);align-items:center;top:calc(var(--spacing) * 1.5);left:calc(var(--spacing) * 2);position:absolute;z-index:3}:where(.frames-segment .frames-segment__badge[data-v-f389074c]){font-size:11px;padding-inline:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * .5);border-radius: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]{color:color-mix(in srgb,var(--colors-white) var(--un-text-opacity),transparent);padding:calc(var(--spacing) * 0);border-radius:4px;--un-border-style:none;border-style:none;background-color:color-mix(in oklab,rgba(0,0,0,.25) var(--un-bg-opacity),transparent);display:flex;width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5);cursor:pointer;align-items:center;justify-content:center}@supports (color: color-mix(in lab,red,red)){:where(.frames-segment) .frames-segment__mute-btn[data-v-f389074c]{color:color-mix(in oklab,var(--colors-white) var(--un-text-opacity),transparent)}}:where(.frames-segment) .frames-segment__mute-btn[data-v-f389074c]:focus-visible{outline-style:var(--un-outline-style);outline-width:2px;outline-color:color-mix(in oklab,rgba(255,255,255,.85) var(--un-outline-opacity),transparent);outline-offset:1px}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;}@property --un-outline-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;syntax:"<percentage>";inherits:false;initial-value:100%;}:where(.frames-segment) .frames-segment__mute-btn[data-v-f389074c]:hover{background-color:color-mix(in oklab,rgba(0,0,0,.35) var(--un-bg-opacity),transparent)}:where(.frames-segment) .frames-segment__mute-icon[data-v-f389074c]{color:color-mix(in srgb,var(--colors-white) var(--un-text-opacity),transparent);width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);display:block}@supports (color: color-mix(in lab,red,red)){:where(.frames-segment) .frames-segment__mute-icon[data-v-f389074c]{color:color-mix(in oklab,var(--colors-white) var(--un-text-opacity),transparent)}}:where(.segment-base[data-v-d386af72]){padding:calc(var(--spacing) * 1.5);border-radius:4px;display:flex;width:100%;height:100%;align-items:center;position:relative;background:#ffffff52;box-shadow:inset 0 0 0 1px #fff3}:where(.segment-base .segment-base__content[data-v-d386af72]){display:flex;gap:calc(var(--spacing) * 1.5);width:100%;align-items:center;justify-content:flex-start}:where(.segment-base .segment-base__pill[data-v-d386af72]){font-size:11px;--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold);padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1.5);border-radius:calc(infinity * 1px);display:inline-flex;gap:calc(var(--spacing) * 1.5);white-space:nowrap;align-items:center;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]){font-size:11px;padding-inline:calc(var(--spacing) * 1.5);padding-block:calc(var(--spacing) * .5);border-radius:4px;pointer-events:none;top:calc(var(--spacing) * 1.5);left:calc(var(--spacing) * 2);position:absolute;background:#00000040;color:#fff;transform-origin:left top;transform:scale(.9)}:where(.ve-editor-segment[data-v-acab97b9]){color:color-mix(in oklab,#0f172a var(--un-text-opacity),transparent);display:flex;flex-direction:column;gap:calc(var(--spacing) * 1.5);width:100%;height:100%;position:relative}@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}:where(.ve-editor-segment .ve-editor-segment__preview[data-v-acab97b9]){display:flex;width:100%;min-height:calc(var(--spacing) * 14);align-items:stretch}

package/package.json

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