@video-editor/ui 0.0.1-beta.15 → 0.0.1-beta.17

package/dist/{index-D22E5BT6.js → index-CGpG5Nmn.js}

@@ -1,7 +1,7 @@
 import { defineComponent as A, reactive as O, watch as J, onBeforeUnmount as X, createElementBlock as f, openBlock as u, renderSlot as i, normalizeStyle as w, createElementVNode as g, Fragment as V, renderList as H, toDisplayString as M, createCommentVNode as D, computed as C, ref as Z, watchEffect as x, createBlock as ee, createSlots as te, withCtx as E, createVNode as S, unref as v, normalizeProps as F, guardReactiveProps as L } from "vue";
 import { generateThumbnails as ne, getMp4Meta as re } from "@video-editor/protocol";
 import { isVideoFramesSegment as j, isAudioSegment as se } from "@video-editor/shared";
-import { _ as N, V as oe } from "./index-Czb5PTVP.js";
+import { _ as N, V as oe } from "./index--01NyScE.js";
 const ae = { class: "frames-segment" }, le = { class: "frames-segment__video" }, ie = {
   key: 1,
   class: "frames-segment__placeholder"

package/dist/index.d.ts

@@ -41,9 +41,9 @@ onSegmentDragEnd?: ((payload: SegmentDragPayload) => any) | undefined;
 onSegmentResizeEnd?: ((payload: SegmentResizePayload) => any) | undefined;
 "onUpdate:selectedSegmentId"?: ((value: string | null) => any) | undefined;
 }>, {
+selectedSegmentId: string | null;
 disableInteraction: boolean;
 snapStep: number;
-selectedSegmentId: string | null;
 protocol: IVideoProtocol | null;
 trackTypes: ITrackType[];
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -73,13 +73,13 @@ onBackgroundClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
 minZoom: number;
 maxZoom: number;
-disableInteraction: boolean;
-snapStep: number;
 trackHeight: number;
 trackGap: number;
+selectedSegmentId: string | null;
+disableInteraction: boolean;
+snapStep: number;
 rulerHeight: number;
 minSegmentDuration: number;
-selectedSegmentId: string | null;
 fps: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 viewportRef: HTMLDivElement;
@@ -251,13 +251,6 @@ declare function __VLS_template_2(): {
             left: number;
             currentTime: number;
         }): any;
-        track?(_: {
-            track: TimelineTrack;
-            index: number;
-            segments: SegmentLayout[];
-            pixelsPerMs: number;
-            height: number;
-        }): any;
         segment?(_: {
             layout: SegmentLayout;
             segment: TimelineSegment_3;

package/dist/index.js

@@ -1,6 +1,6 @@
-import { V as i } from "./index-D22E5BT6.js";
-import { F as s, S as d } from "./index-D22E5BT6.js";
-import { V as o } from "./index-Czb5PTVP.js";
+import { V as i } from "./index-CGpG5Nmn.js";
+import { F as s, S as d } from "./index-CGpG5Nmn.js";
+import { V as o } from "./index--01NyScE.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-601eb0b9]){--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-601eb0b9]){--at-apply: text-[#222226] pointer-events-none relative z-2}:where(.ve-playhead__line[data-v-601eb0b9]){--at-apply: bg-[#222226] h-full 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]}:where(.ve-timeline[data-v-70b46d01]){--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-70b46d01]){--at-apply: relative overflow-auto w-full flex-1 bg-white}:where(.ve-timeline .ve-timeline__content[data-v-70b46d01]){--at-apply: min-h-full min-w-full}:where(.ve-timeline .ve-timeline__tracks[data-v-70b46d01]){--at-apply: relative z-1 pb-3 flex flex-col gap-2px flex-1}:where(.ve-timeline .ve-track[data-v-70b46d01]){--at-apply: relative bg-[#f8fafc] overflow-hidden}:where(.ve-timeline .ve-track--main[data-v-70b46d01]){background-color:#f4f4f6}:where(.ve-timeline .ve-track__body[data-v-70b46d01]){--at-apply: relative h-full}:where(.ve-timeline .ve-segment[data-v-70b46d01]){--at-apply: absolute top-0 bottom-0 rounded-[4px] text-[#0f172a] cursor-pointer flex items-center overflow-hidden duration-150}:where(.ve-timeline .ve-segment--dragging[data-v-70b46d01]){--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-70b46d01]){--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-70b46d01]){--at-apply: flex flex-col gap-1}:where(.ve-timeline .ve-segment__title[data-v-70b46d01]){--at-apply: text-[12px] font-bold capitalize}:where(.ve-timeline .ve-segment__time[data-v-70b46d01]){--at-apply: text-[11px] text-[rgba(15,23,42,.8)] font-mono}:where(.ve-timeline .ve-segment__selection[data-v-70b46d01]){--at-apply: absolute bottom-0 left-0 right-0 top-0 pointer-events-none z-10}:where(.ve-timeline .ve-segment__handle[data-v-70b46d01]){--at-apply: absolute h-full w-1 bg-[var(--ve-primary)] cursor-ew-resize pointer-events-auto;border:2px solid var(--ve-primary)}:where(.ve-timeline .ve-segment__handle--left[data-v-70b46d01]){--at-apply: left-0 top-0 rounded-l-1}:where(.ve-timeline .ve-segment__handle--right[data-v-70b46d01]){--at-apply: right-0 top-0 rounded-r-1}:where(.ve-timeline .ve-segment__handle-dots[data-v-70b46d01]){--at-apply: absolute left-0 top-50% translate-y--50% flex flex-col items-center gap-0.5;justify-content:center}:where(.ve-timeline .ve-segment__handle-dot[data-v-70b46d01]){--at-apply: rounded-full bg-white;width:1px;height:1px}:where(.ve-timeline .ve-segment--placeholder[data-v-70b46d01]){--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-70b46d01]){--at-apply: absolute inset-0 rounded-[2px];opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-70b46d01]){--at-apply: absolute pointer-events-none z-20;width:2px;background:var(--ve-primary);opacity:.7}:where(.ve-timeline .ve-new-track-line[data-v-70b46d01]){--at-apply: absolute pointer-events-none z-25;height:2px;background:var(--ve-primary);opacity:.8}:where(.frames-segment[data-v-4ab97cd2]){--at-apply: relative flex items-stretch w-full h-full overflow-hidden rounded-4px}:where(.frames-segment .frames-segment__image[data-v-4ab97cd2]){--at-apply: w-full h-full rounded-4px;background-color:color-mix(in srgb,var(--ve-segment-accent, #222226) 15%,transparent)}:where(.frames-segment .frames-segment__video[data-v-4ab97cd2]){--at-apply: flex items-center w-full h-full overflow-hidden;background:#f1f5f9}:where(.frames-segment .frames-segment__thumb[data-v-4ab97cd2]){--at-apply: flex-1 min-w-14;aspect-ratio:1 / 1;background-size:cover;background-position:center}:where(.frames-segment .frames-segment__placeholder[data-v-4ab97cd2]){--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__badge[data-v-4ab97cd2]){--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-faa94921]){--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-faa94921]){--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-52f6113c]{position:relative;z-index:1;padding-bottom:.75rem;display:flex;flex-direction:column;gap:2px;flex:1}.ve-track[data-v-52f6113c]{position:relative;background-color:#f8fafc;overflow:hidden}.ve-track--main[data-v-52f6113c]{background-color:#f4f4f6}.ve-track--has-selection[data-v-52f6113c]{background-color:#f2f2fa!important;box-shadow:inset 0 1px #e4e4fc,inset 0 -1px #e4e4fc}.ve-track__body[data-v-52f6113c]{position:relative;height:100%}.ve-segment[data-v-52f6113c]{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-52f6113c]{display:flex;flex-direction:column;gap:.25rem;padding:.375rem .625rem}.ve-segment__title[data-v-52f6113c]{font-size:12px;font-weight:700;text-transform:capitalize}.ve-segment__time[data-v-52f6113c]{font-size:11px;color:#0f172acc;font-family:monospace}.ve-segment__selection[data-v-52f6113c]{position:absolute;inset:0;pointer-events:none;z-index:10}.ve-segment__handle[data-v-52f6113c]{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-52f6113c]{left:0;top:0;border-radius:.25rem 0 0 .25rem}.ve-segment__handle--right[data-v-52f6113c]{right:0;top:0;border-radius:0 .25rem .25rem 0}.ve-segment__handle-dots[data-v-52f6113c]{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-52f6113c]{border-radius:9999px;background-color:#fff;width:1px;height:1px}:where(.ve-timeline[data-v-808b21f7]){--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-808b21f7]){--at-apply: relative overflow-auto w-full flex-1 bg-white}:where(.ve-timeline .ve-timeline__content[data-v-808b21f7]){--at-apply: min-h-full min-w-full}:where(.ve-timeline .ve-segment--dragging[data-v-808b21f7]){--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-808b21f7]){--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-808b21f7]){--at-apply: flex flex-col gap-1 px-2.5 py-1.5}:where(.ve-timeline .ve-segment__title[data-v-808b21f7]){--at-apply: text-[12px] font-bold capitalize}:where(.ve-timeline .ve-segment__time[data-v-808b21f7]){--at-apply: text-[11px] text-[rgba(15,23,42,.8)] font-mono}:where(.ve-timeline .ve-segment--placeholder[data-v-808b21f7]){--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-808b21f7]){--at-apply: absolute inset-0 rounded-[2px];opacity:.2}:where(.ve-timeline .ve-snap-guide[data-v-808b21f7]){--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-808b21f7]){--at-apply: absolute pointer-events-none z-25;height:1px;background:var(--ve-primary);opacity:.8}:where(.frames-segment[data-v-4ab97cd2]){--at-apply: relative flex items-stretch w-full h-full overflow-hidden rounded-4px}:where(.frames-segment .frames-segment__image[data-v-4ab97cd2]){--at-apply: w-full h-full rounded-4px;background-color:color-mix(in srgb,var(--ve-segment-accent, #222226) 15%,transparent)}:where(.frames-segment .frames-segment__video[data-v-4ab97cd2]){--at-apply: flex items-center w-full h-full overflow-hidden;background:#f1f5f9}:where(.frames-segment .frames-segment__thumb[data-v-4ab97cd2]){--at-apply: flex-1 min-w-14;aspect-ratio:1 / 1;background-size:cover;background-position:center}:where(.frames-segment .frames-segment__placeholder[data-v-4ab97cd2]){--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__badge[data-v-4ab97cd2]){--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-faa94921]){--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-faa94921]){--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.15",
+  "version": "0.0.1-beta.17",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,11 +17,11 @@
     "dist"
   ],
   "peerDependencies": {
-    "vue": "^3.5.25"
+    "vue": "^3.5.26"
   },
   "dependencies": {
-    "@video-editor/protocol": "0.0.1-beta.15",
-    "@video-editor/shared": "0.0.1-beta.15"
+    "@video-editor/protocol": "0.0.1-beta.17",
+    "@video-editor/shared": "0.0.1-beta.17"
   },
   "scripts": {
     "build": "vite build",