@leavepulse/ui 0.82.0 → 0.83.1

package/dist/components/LpVideoTrim.vue.js

@@ -1,60 +1,67 @@
-import { defineComponent, ref, computed, watch, shallowRef, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, createCommentVNode, createVNode, toDisplayString, withCtx, createTextVNode, withDirectives, vShow, withKeys, withModifiers, createBlock } from "vue";
+import { defineComponent, ref, computed, watch, shallowRef, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, toHandlers, Transition, normalizeProps, guardReactiveProps, normalizeStyle, Fragment, renderList, normalizeClass, createCommentVNode, toDisplayString, renderSlot, createBlock, createTextVNode, TransitionGroup, withKeys, withModifiers } from "vue";
 import { startPointerDrag } from "../composables/pointerDrag.js";
-import { isHTMLElement } from "../composables/realm.js";
+import { nodeWindow, isHTMLElement } from "../composables/realm.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useResizeObserver } from "../composables/useResizeObserver.js";
 import { usePrefersReducedMotion } from "../composables/useReducedMotion.js";
-import { _ as _sfc_main$2 } from "../chunks/LpButton-DSHioIfD.js";
-import { _ as _sfc_main$1 } from "../chunks/LpIcon-CytpcLmS.js";
-import { _ as _sfc_main$3 } from "../chunks/LpInput-P2C12X7s.js";
-import { formatClipTime } from "./videoBackdrop.js";
+import { useVideoMedia } from "../composables/useVideoMedia.js";
+import { _ as _sfc_main$3 } from "../chunks/LpButton-DSHioIfD.js";
+import { _ as _sfc_main$2 } from "../chunks/LpIcon-CoOLz1oJ.js";
+import { _ as _sfc_main$1 } from "../chunks/LpContextMenu-DIYhlap8.js";
+import { _ as _sfc_main$6 } from "../chunks/LpInput-BVWhkPuN.js";
+import { _ as _sfc_main$4 } from "../chunks/SteadyText-CwH-kduj.js";
+import VideoFlash from "./VideoFlash.vue.js";
+import { _ as _sfc_main$5 } from "../chunks/VideoVolume-B4_DNmNi.js";
+import { FADE, FADE_SCALE, OVERLAY_BUTTON, ICON_SWAP } from "./videoMotion.js";
+import { useClipboard } from "../composables/useClipboard.js";
+import { useToast } from "../composables/useToast.js";
+import { formatClipTime, widestClipTime } from "./videoBackdrop.js";
 import { stillSpan, FrameSampler } from "./videoFrames.js";
-import { normalizeRange, ticks, tickStep, containRect, mediaErrorCause, revealTime, zoomView, shiftView, adjustRegion, dragEnd, setEnd, parseClipTime, regionBetween } from "./videoTrim.js";
+import { normalizeRange, ticks, tickStep, containRect, setEnd, revealTime, zoomView, shiftView, adjustRegion, dragEnd, parseClipTime, regionBetween } from "./videoTrim.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpVideoTrim-Ci6IIHW0.css';const _hoisted_1 = ["data-disabled"];
-const _hoisted_2 = ["src", "poster", "muted"];
+import '../assets/LpVideoTrim-BcGs3Sh0.css';const _hoisted_1 = ["data-disabled"];
+const _hoisted_2 = ["src", "poster"];
 const _hoisted_3 = ["src"];
-const _hoisted_4 = ["aria-label"];
+const _hoisted_4 = ["data-live", "aria-label"];
 const _hoisted_5 = ["data-lp-corner", "onPointerdown"];
 const _hoisted_6 = {
-  key: 1,
-  role: "alert",
-  class: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center text-sm text-white/80"
+  key: 0,
+  class: "pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-pill bg-black/55 px-3 py-1 text-xs whitespace-nowrap text-white/85"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "absolute top-2 right-2 flex gap-0.5 rounded-control bg-black/45"
 };
-const _hoisted_7 = { class: "flex flex-wrap items-center gap-1" };
 const _hoisted_8 = {
-  class: "px-1.5 font-mono text-xs text-muted tabular-nums",
-  "data-lp-clock": ""
+  key: 0,
+  role: "alert",
+  class: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center text-sm text-white/80"
 };
-const _hoisted_9 = { class: "text-ink" };
+const _hoisted_9 = { class: "flex items-center gap-0.5" };
 const _hoisted_10 = {
-  class: "relative h-4 overflow-hidden text-[10px] text-muted tabular-nums",
-  "aria-hidden": "true"
+  class: "min-w-0 truncate px-1.5 font-mono text-xs text-muted",
+  "data-lp-clock": ""
 };
-const _hoisted_11 = ["aria-label"];
-const _hoisted_12 = { class: "absolute inset-0 overflow-hidden rounded-control" };
-const _hoisted_13 = ["data-lp-still"];
-const _hoisted_14 = ["tabindex", "aria-label", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-disabled", "data-lp-handle", "onPointerdown"];
-const _hoisted_15 = ["tabindex", "aria-label", "aria-valuemax", "aria-valuenow", "aria-valuetext"];
-const _hoisted_16 = ["aria-label"];
-const _hoisted_17 = { class: "flex flex-wrap items-end gap-x-3 gap-y-2 text-xs" };
-const _hoisted_18 = { class: "text-muted" };
-const _hoisted_19 = { class: "flex flex-col gap-1 pb-1.5" };
+const _hoisted_11 = ["data-live"];
+const _hoisted_12 = ["aria-label"];
+const _hoisted_13 = { class: "absolute inset-0 overflow-hidden rounded-control" };
+const _hoisted_14 = ["data-lp-still"];
+const _hoisted_15 = ["tabindex", "aria-label", "aria-valuemax", "aria-valuenow", "aria-valuetext", "aria-disabled", "aria-hidden", "data-lp-handle", "data-active", "onPointerdown"];
+const _hoisted_16 = ["tabindex", "aria-label", "aria-valuemax", "aria-valuenow", "aria-valuetext", "data-glide"];
+const _hoisted_17 = ["aria-label"];
+const _hoisted_18 = { class: "flex flex-wrap items-end gap-x-3 gap-y-2" };
+const _hoisted_19 = { class: "flex flex-col gap-0.5 pb-0.5 text-xs" };
 const _hoisted_20 = { class: "text-muted" };
 const _hoisted_21 = {
-  class: "font-mono text-sm text-ink tabular-nums",
+  class: "font-mono text-sm text-ink",
   "data-lp-length": ""
 };
 const _hoisted_22 = {
   key: 0,
-  class: "pb-2 text-muted",
+  class: "pb-1 font-mono text-xs text-muted",
   "data-lp-left": ""
 };
-const _hoisted_23 = {
-  key: 1,
-  class: "pb-2 text-muted"
-};
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -68,6 +75,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     regionSelect: { type: Boolean },
     region: { default: null },
     frameRate: { default: 30 },
+    menuItems: {},
     disabled: { type: Boolean },
     labels: { default: () => ({}) }
   },
@@ -100,22 +108,36 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         regionClear: "Remove area",
         failed: "This video couldn't be loaded.",
         unsupported: "This browser can't play this video's format.",
-        invalidTime: "Type a time like 1:05.5"
+        invalidTime: "Type a time like 1:05.5",
+        /** `{time}` is replaced by the time the menu was opened at. */
+        menuAt: "At {time}",
+        setStart: "Start here",
+        setEnd: "End here",
+        goStart: "Go to the clip's start",
+        goEnd: "Go to the clip's end",
+        zoomHere: "Zoom in here",
+        volume: "Volume",
+        copyTime: "Copy time",
+        copyFrame: "Copy frame",
+        copiedTime: "Time copied",
+        copiedFrame: "Frame copied",
+        copyFailed: "Couldn't copy"
       },
       () => props.labels
     );
-    const { class: rootClass, attrs: rest } = useMergedAttrs("flex flex-col gap-3 select-none");
+    const { class: rootClass, attrs: rest } = useMergedAttrs("flex w-full min-w-0 flex-col gap-3 select-none");
     const reduced = usePrefersReducedMotion();
     const videoEl = ref(null);
     const samplerEl = ref(null);
     const stageEl = ref(null);
     const trackEl = ref(null);
-    const duration = ref(0);
-    const failure = ref(null);
-    const time = ref(0);
-    const playing = ref(false);
-    const muted = ref(false);
-    const videoSize = ref({ width: 0, height: 0 });
+    const media = useVideoMedia(videoEl, {
+      src: () => props.src,
+      onFrame: followPlayback,
+      onError: (cause) => emit("error", { cause, message: cause === "unsupported" ? text.value.unsupported : text.value.failed })
+    });
+    const { duration, failure, time, playing, wantsPlay, muted, size: videoSize, seek } = media;
+    const pause = () => media.pause({ instant: true });
     const stageSize = ref({ width: 0, height: 0 });
     const trackWidth = ref(0);
     const ready = computed(() => duration.value > 0 && !failure.value);
@@ -145,99 +167,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (commit) emit("change", next);
     }
     const clipLength = computed(() => local.value[1] - local.value[0]);
-    let seekTarget = null;
-    let seekBusy = false;
-    function seek(t) {
-      const video = videoEl.value;
-      const target = Math.min(Math.max(0, t), duration.value || t);
-      time.value = target;
-      if (!video) return;
-      if (seekBusy) {
-        seekTarget = target;
-        return;
-      }
-      seekBusy = true;
-      video.currentTime = target;
-    }
-    function onSeeked() {
-      seekBusy = false;
-      if (seekTarget !== null) {
-        const next = seekTarget;
-        seekTarget = null;
-        seek(next);
-      } else if (videoEl.value && !playing.value) time.value = videoEl.value.currentTime;
-    }
-    let probingDuration = false;
-    function onMetadata() {
-      const video = videoEl.value;
-      if (!video) return;
-      videoSize.value = { width: video.videoWidth, height: video.videoHeight };
-      if (Number.isFinite(video.duration)) {
-        duration.value = video.duration;
-        return;
-      }
-      probingDuration = true;
-      video.currentTime = 1e101;
-    }
-    function onDurationChange() {
-      const video = videoEl.value;
-      if (!video || !Number.isFinite(video.duration) || !video.duration) return;
-      duration.value = video.duration;
-      if (probingDuration) {
-        probingDuration = false;
-        video.currentTime = 0;
-      }
-    }
-    async function onError() {
-      const video = videoEl.value;
-      if (!video?.error) return;
-      const src = props.src;
-      let cause = mediaErrorCause(video.error);
-      if (cause === "unsupported") cause = await probeSource(src);
-      if (src !== props.src) return;
-      failure.value = cause;
-      emit("error", { cause, message: cause === "unsupported" ? text.value.unsupported : text.value.failed });
-    }
-    async function probeSource(src) {
-      try {
-        const res = await fetch(src, { headers: { Range: "bytes=0-0" }, credentials: "same-origin" });
-        void res.body?.cancel();
-        const type = res.headers.get("content-type") ?? "";
-        return res.ok && !/^text\/|json|xml/.test(type) ? "unsupported" : "load";
-      } catch {
-        return "unsupported";
-      }
-    }
     let stopAtEnd = false;
-    let frame = 0;
-    function tick() {
-      frame = 0;
-      const video = videoEl.value;
-      if (!video || !playing.value) return;
-      time.value = video.currentTime;
-      if (stopAtEnd && video.currentTime >= local.value[1]) {
-        video.pause();
+    function followPlayback() {
+      if (stopAtEnd && time.value >= local.value[1]) {
+        pause();
         seek(local.value[1]);
         return;
       }
       if (zoomed.value) view.value = revealTime(view.value, time.value, duration.value, 0.05);
-      frame = requestAnimationFrame(tick);
-    }
-    function onPlay() {
-      playing.value = true;
-      if (!frame) frame = requestAnimationFrame(tick);
-    }
-    function onPause() {
-      playing.value = false;
-      if (frame) cancelAnimationFrame(frame);
-      frame = 0;
-      if (videoEl.value && !seekBusy) time.value = videoEl.value.currentTime;
     }
+    const flash = ref(null);
     function togglePlay() {
-      const video = videoEl.value;
-      if (!video || off.value) return;
-      if (!video.paused) {
-        video.pause();
+      if (!videoEl.value || off.value) return;
+      flash.value = { icon: wantsPlay.value ? "lucide:pause" : "lucide:play", n: (flash.value?.n ?? 0) + 1 };
+      if (wantsPlay.value) {
+        media.pause();
         return;
       }
       const [a, b] = local.value;
@@ -245,11 +189,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (from >= b - 1e-3 && from <= b + 1e-3) from = a;
       stopAtEnd = from >= a - 1e-3 && from < b;
       if (from !== time.value) seek(from);
-      void video.play().catch(() => {
-      });
-    }
-    function pause() {
-      videoEl.value?.pause();
+      media.play();
     }
     function step(seconds) {
       if (off.value) return;
@@ -258,10 +198,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (zoomed.value) view.value = revealTime(view.value, time.value, duration.value);
     }
     function toggleMute() {
-      muted.value = !muted.value;
-      if (videoEl.value) videoEl.value.muted = muted.value;
+      media.setMuted(!muted.value);
     }
     const frameStep = computed(() => 1 / Math.max(1, props.frameRate));
+    const frameWindow = () => nodeWindow(trackEl.value ?? videoEl.value);
+    const TRACK_GLIDE = "[&_[data-glide]]:transition-[left,width] [&_[data-glide]]:duration-(--duration-medium) [&_[data-glide]]:ease-(--ease-emphasized) data-[live]:[&_[data-glide]]:transition-none motion-reduce:[&_[data-glide]]:transition-none";
+    const placed = ref(false);
+    watch(ready, (ok) => {
+      placed.value = false;
+      if (ok) frameWindow().requestAnimationFrame(() => frameWindow().requestAnimationFrame(() => placed.value = true));
+    });
+    const live = computed(() => !placed.value || dragging.value !== null || scrubbing.value || pinching.value || wheeling.value || playing.value);
     const MIN_SPAN = 2;
     const view = ref({ start: 0, end: 0 });
     const span = computed(() => Math.max(1e-6, view.value.end - view.value.start));
@@ -277,33 +224,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!box || !box.width) return 0;
       return view.value.start + (clientX - box.left) / box.width * span.value;
     }
-    function zoomBy(factor, anchor = time.value) {
+    function zoomAnchor() {
+      const { start, end } = view.value;
+      return time.value >= start && time.value <= end ? time.value : (start + end) / 2;
+    }
+    function zoomBy(factor, anchor = zoomAnchor()) {
       if (!duration.value) return;
       view.value = zoomView(view.value, anchor, factor, duration.value, MIN_SPAN);
     }
     function fit() {
       view.value = { start: 0, end: duration.value };
     }
+    const wheeling = ref(false);
+    let wheelTimer;
+    function markWheel() {
+      wheeling.value = true;
+      clearTimeout(wheelTimer);
+      wheelTimer = setTimeout(() => wheeling.value = false, 160);
+    }
     function onWheel(event) {
       if (!ready.value) return;
       const dx = event.shiftKey ? event.deltaY : event.deltaX;
       if (Math.abs(dx) > Math.abs(event.deltaY) || event.shiftKey) {
         if (!zoomed.value) return;
         event.preventDefault();
+        markWheel();
         view.value = shiftView(view.value, dx / Math.max(1, trackWidth.value) * span.value, duration.value);
         return;
       }
       event.preventDefault();
       const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;
-      zoomBy(Math.exp(-event.deltaY * unit / (event.ctrlKey ? 100 : 300)), timeAt(event.clientX));
+      const delta = event.deltaY * unit;
+      const notch = event.deltaMode !== 0 || !event.ctrlKey && Math.abs(delta) >= 50;
+      if (!notch) markWheel();
+      zoomBy(Math.exp(-delta / (event.ctrlKey ? 100 : 300)), timeAt(event.clientX));
     }
     const marks = computed(() => ready.value ? ticks(view.value, tickStep(span.value, trackWidth.value)) : []);
     const markDigits = computed(() => tickStep(span.value, trackWidth.value) < 1);
     const pointers = /* @__PURE__ */ new Map();
     let pinch = null;
+    const pinching = ref(false);
     let edgeFrame = 0;
     let lastX = 0;
-    let scrubbing = false;
+    const scrubbing = ref(false);
     function onHandleDown(end, event) {
       if (off.value || event.button !== 0) return;
       event.stopPropagation();
@@ -320,7 +283,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         },
         end: () => {
           dragging.value = null;
-          if (edgeFrame) cancelAnimationFrame(edgeFrame);
+          if (edgeFrame) frameWindow().cancelAnimationFrame(edgeFrame);
           edgeFrame = 0;
           emit("change", local.value);
         }
@@ -338,8 +301,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const box = trackEl.value?.getBoundingClientRect();
       if (!box) return;
       const over = lastX < box.left ? lastX - box.left : lastX > box.right ? lastX - box.right : 0;
-      if (!over || dragging.value === null && !scrubbing) return;
-      edgeFrame = requestAnimationFrame(() => {
+      if (!over || dragging.value === null && !scrubbing.value) return;
+      edgeFrame = frameWindow().requestAnimationFrame(() => {
         edgeFrame = 0;
         view.value = shiftView(view.value, Math.max(-60, Math.min(60, over)) / 6 / Math.max(1, box.width) * span.value, duration.value);
         if (dragging.value !== null) moveHandle();
@@ -352,16 +315,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       event.currentTarget.setPointerCapture(event.pointerId);
       pointers.set(event.pointerId, event.clientX);
       if (pointers.size === 2) {
-        scrubbing = false;
+        scrubbing.value = false;
         const [a, b] = [...pointers.values()];
         pinch = { distance: Math.max(8, Math.abs(a - b)), anchor: timeAt((a + b) / 2) };
+        pinching.value = true;
         return;
       }
       if (pointers.size > 2) return;
       event.preventDefault();
       trackEl.value?.querySelector("[data-lp-playhead]")?.focus({ preventScroll: true });
       pause();
-      scrubbing = true;
+      scrubbing.value = true;
       lastX = event.clientX;
       seek(timeAt(event.clientX));
     }
@@ -375,15 +339,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         pinch.distance = distance;
         return;
       }
-      if (!scrubbing) return;
+      if (!scrubbing.value) return;
       lastX = event.clientX;
       seek(timeAt(event.clientX));
       edgeScroll();
     }
     function onTrackUp(event) {
       pointers.delete(event.pointerId);
-      if (pointers.size < 2) pinch = null;
-      if (!pointers.size) scrubbing = false;
+      if (pointers.size < 2) {
+        pinch = null;
+        pinching.value = false;
+      }
+      if (!pointers.size) scrubbing.value = false;
     }
     function onOverviewDown(event) {
       if (off.value || event.button !== 0) return;
@@ -424,10 +391,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         sampler.want([...list].sort((a, b) => Math.abs(a.time - centre) - Math.abs(b.time - centre)));
       }, 120);
     });
-    function mountFrame(key, el) {
+    function mountFrame(still, el) {
       if (!isHTMLElement(el)) return;
-      const canvas = frames.value.get(key) ?? sampler?.cached(key);
-      if (canvas && canvas.parentElement !== el) el.replaceChildren(canvas);
+      const canvas = frames.value.get(still.key) ?? sampler?.cached(still.key);
+      if (canvas) {
+        if (canvas.parentElement === el) return;
+        const standIns = [...el.children];
+        el.append(canvas);
+        if (!standIns.length || reduced.value) standIns.forEach((c) => c.remove());
+        else canvas.addEventListener("animationend", () => standIns.forEach((c) => c.remove()), { once: true });
+        return;
+      }
+      if (el.children.length) return;
+      const near = nearestFrame(still.time);
+      if (!near) return;
+      const copy2 = el.ownerDocument.createElement("canvas");
+      copy2.width = near.width;
+      copy2.height = near.height;
+      copy2.getContext("2d")?.drawImage(near, 0, 0);
+      copy2.dataset.lpStandIn = "";
+      el.append(copy2);
+    }
+    const frameTimes = /* @__PURE__ */ new Map();
+    function nearestFrame(t) {
+      let best;
+      let gap = Infinity;
+      for (const [key, canvas] of frames.value) {
+        const d = Math.abs((frameTimes.get(key) ?? Infinity) - t);
+        if (d < gap) {
+          gap = d;
+          best = canvas;
+        }
+      }
+      return best;
     }
     const picture = computed(() => containRect(stageSize.value.width, stageSize.value.height, videoSize.value.width, videoSize.value.height));
     const draft = ref(null);
@@ -478,6 +474,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (event.defaultPrevented || event.ctrlKey || event.metaKey || target.closest("input, textarea, select, [contenteditable='true']")) return;
       const handle = target.dataset.lpHandle;
       const end = handle === "0" ? 0 : handle === "1" ? 1 : null;
+      if (target.getAttribute("role") === "slider" && end === null && target.dataset.lpPlayhead === void 0) return;
+      if ((event.key === "m" || event.key === "M") && !event.altKey) {
+        if (!ready.value) return;
+        event.preventDefault();
+        toggleMute();
+        return;
+      }
       const big = event.shiftKey ? 1 : frameStep.value;
       const delta = { ArrowLeft: -big, ArrowRight: big, ArrowDown: -big, ArrowUp: big, PageDown: -10, PageUp: 10 };
       if (event.key === " " && target.tagName !== "BUTTON") {
@@ -506,7 +509,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const drafts = ref([null, null]);
     const invalid = ref([false, false]);
-    const fieldText = (end) => drafts.value[end] ?? formatClipTime(local.value[end], true);
+    const fieldText = (end) => drafts.value[end] ?? formatClipTime(local.value[end], "fixed");
     function onFieldInput(end, value) {
       drafts.value[end] = value;
       invalid.value[end] = false;
@@ -533,6 +536,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function startSampler() {
       sampler?.dispose();
       sampler = samplerEl.value ? new FrameSampler(samplerEl.value, () => ({ width: stillWidth.value, height: STILL_HEIGHT }), (key, canvas) => {
+        const still = stills.value.find((s) => s.key === key);
+        if (still) frameTimes.set(key, still.time);
         const next = new Map(frames.value);
         next.set(key, canvas);
         if (next.size > 240) next.delete(next.keys().next().value);
@@ -542,12 +547,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.src,
       () => {
-        duration.value = 0;
-        failure.value = null;
-        time.value = 0;
         frames.value = /* @__PURE__ */ new Map();
-        seekBusy = false;
-        seekTarget = null;
         void nextTick(startSampler);
       }
     );
@@ -555,13 +555,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       sampler?.dispose();
       clearTimeout(stillTimer);
-      if (frame) cancelAnimationFrame(frame);
-      if (edgeFrame) cancelAnimationFrame(edgeFrame);
-      for (const el of [videoEl.value, samplerEl.value]) {
-        if (!el) continue;
-        el.pause();
-        el.removeAttribute("src");
-        el.load();
+      if (edgeFrame) frameWindow().cancelAnimationFrame(edgeFrame);
+      const stillsEl = samplerEl.value;
+      if (stillsEl) {
+        stillsEl.removeAttribute("src");
+        stillsEl.load();
       }
     });
     __expose({
@@ -571,109 +569,211 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       /** The playhead, in seconds. */
       currentTime: () => time.value
     });
-    const handleText = (t) => formatClipTime(t, true);
+    const { copy } = useClipboard();
+    const { error: toastError } = useToast();
+    const videoMenu = computed(() => {
+      if (!ready.value || props.disabled) return [];
+      const items = [
+        { label: wantsPlay.value ? text.value.pause : text.value.play, icon: wantsPlay.value ? "lucide:pause" : "lucide:play", shortcut: "Space", onSelect: togglePlay },
+        { label: muted.value ? text.value.unmute : text.value.mute, icon: muted.value ? "lucide:volume-2" : "lucide:volume-x", shortcut: "M", onSelect: toggleMute },
+        { label: text.value.stepBack, icon: "lucide:step-back", shortcut: "ArrowLeft", separatorBefore: true, onSelect: () => step(-frameStep.value) },
+        { label: text.value.stepForward, icon: "lucide:step-forward", shortcut: "ArrowRight", onSelect: () => step(frameStep.value) },
+        { label: text.value.copyTime, icon: "lucide:clock", separatorBefore: true, onSelect: () => void copy(formatClipTime(time.value, "fixed"), { toast: text.value.copiedTime, errorToast: text.value.copyFailed }) },
+        { label: text.value.copyFrame, icon: "lucide:image", onSelect: copyFrame }
+      ];
+      if (props.regionSelect && props.region) items.push({ label: text.value.regionClear, icon: "lucide:x", separatorBefore: true, onSelect: () => emit("update:region", null) });
+      return items;
+    });
+    const clockTitle = computed(() => text.value.menuAt.replace("{time}", formatClipTime(time.value, "fixed")));
+    async function copyFrame() {
+      const blob = await media.captureFrame();
+      if (blob) void copy(blob, { toast: text.value.copiedFrame, errorToast: text.value.copyFailed });
+      else toastError(text.value.copyFailed);
+    }
+    const menuAt = ref(0);
+    function onTimeContextMenu(event) {
+      const overview = event.target.closest?.("[data-lp-overview]");
+      if (overview) {
+        const box = overview.getBoundingClientRect();
+        menuAt.value = (event.clientX - box.left) / Math.max(1, box.width) * duration.value;
+      } else menuAt.value = timeAt(event.clientX);
+      menuAt.value = Math.min(duration.value, Math.max(0, menuAt.value));
+    }
+    const timeMenu = computed(() => {
+      if (!ready.value || props.disabled) return [];
+      const at = menuAt.value;
+      const items = [
+        {
+          label: text.value.setStart,
+          icon: "lucide:arrow-left-to-line",
+          shortcut: "I",
+          onSelect: () => {
+            put(setEnd(local.value, 0, at, limits.value), true);
+            seek(at);
+          }
+        },
+        {
+          label: text.value.setEnd,
+          icon: "lucide:arrow-right-to-line",
+          shortcut: "O",
+          onSelect: () => {
+            put(setEnd(local.value, 1, at, limits.value), true);
+            seek(at);
+          }
+        },
+        { label: text.value.goStart, separatorBefore: true, onSelect: () => seek(local.value[0]) },
+        { label: text.value.goEnd, onSelect: () => seek(local.value[1]) },
+        zoomed.value ? { label: text.value.zoomFit, icon: "lucide:maximize-2", separatorBefore: true, onSelect: fit } : { label: text.value.zoomHere, icon: "lucide:zoom-in", separatorBefore: true, disabled: !canZoomIn.value, onSelect: () => zoomBy(4, at) }
+      ];
+      const extra = props.menuItems?.(at) ?? [];
+      return [...items, ...extra.map((item, i) => i === 0 ? { ...item, separatorBefore: true } : item)];
+    });
+    const menuTitle = computed(() => text.value.menuAt.replace("{time}", formatClipTime(menuAt.value, "fixed")));
+    const handleText = (t) => formatClipTime(t, "fixed");
+    const widest = computed(() => widestClipTime(duration.value));
+    const leftOf = (left, max) => text.value.left.replace("{left}", left).replace("{max}", max);
     const leftText = computed(
-      () => Number.isFinite(limits.value.maxClip) ? text.value.left.replace("{left}", formatClipTime(Math.max(0, limits.value.maxClip - clipLength.value), true)).replace("{max}", formatClipTime(limits.value.maxClip, true)) : ""
+      () => Number.isFinite(limits.value.maxClip) ? leftOf(formatClipTime(Math.max(0, limits.value.maxClip - clipLength.value), "fixed"), formatClipTime(limits.value.maxClip, "fixed")) : ""
     );
+    const widestLeft = computed(() => leftOf(widestClipTime(limits.value.maxClip), widestClipTime(limits.value.maxClip)));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({ class: unref(rootClass) }, unref(rest), {
         "data-disabled": __props.disabled || void 0,
         onKeydown
       }), [
-        createElementVNode("div", {
-          ref_key: "stageEl",
-          ref: stageEl,
-          class: "relative aspect-video w-full overflow-hidden rounded-card bg-black"
-        }, [
-          createElementVNode("video", {
-            ref_key: "videoEl",
-            ref: videoEl,
-            class: "absolute inset-0 size-full object-contain",
-            src: __props.src,
-            poster: __props.poster,
-            preload: "metadata",
-            playsinline: "",
-            muted: muted.value,
-            onLoadedmetadata: onMetadata,
-            onDurationchange: onDurationChange,
-            onSeeked,
-            onPlay,
-            onPause,
-            onError,
-            onClick: _cache[0] || (_cache[0] = ($event) => !__props.regionSelect && togglePlay())
-          }, null, 40, _hoisted_2),
-          createElementVNode("video", {
-            ref_key: "samplerEl",
-            ref: samplerEl,
-            class: "pointer-events-none absolute size-px opacity-0",
-            src: __props.src,
-            preload: "metadata",
-            muted: "",
-            playsinline: "",
-            "aria-hidden": "true",
-            tabindex: "-1"
-          }, null, 8, _hoisted_3),
-          __props.regionSelect && ready.value ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "absolute cursor-crosshair touch-none",
-            style: normalizeStyle({ left: `${picture.value.x}px`, top: `${picture.value.y}px`, width: `${picture.value.width}px`, height: `${picture.value.height}px` }),
-            "data-lp-region-layer": "",
-            onPointerdown: _cache[2] || (_cache[2] = ($event) => onRegionDown("draw", $event))
-          }, [
-            shownRegion.value ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: "absolute cursor-move rounded-inner border-2 border-dashed border-white bg-brand/25 shadow-[0_0_0_9999px_rgb(0_0_0/0.35)] outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              style: normalizeStyle({ left: `${shownRegion.value.x * 100}%`, top: `${shownRegion.value.y * 100}%`, width: `${shownRegion.value.w * 100}%`, height: `${shownRegion.value.h * 100}%` }),
-              tabindex: "0",
-              role: "group",
-              "aria-label": unref(text).region,
-              "data-lp-region": "",
-              onPointerdown: _cache[1] || (_cache[1] = ($event) => onRegionDown("move", $event)),
-              onKeydown: onRegionKey
-            }, [
-              (openBlock(), createElementBlock(Fragment, null, renderList(["nw", "ne", "sw", "se"], (corner) => {
-                return createElementVNode("span", {
-                  key: corner,
-                  class: normalizeClass(["absolute grid size-6 place-items-center pointer-coarse:size-11", [
-                    corner[0] === "n" ? "top-0 -translate-y-1/2" : "bottom-0 translate-y-1/2",
-                    corner[1] === "w" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2",
-                    corner === "nw" || corner === "se" ? "cursor-nwse-resize" : "cursor-nesw-resize"
-                  ]]),
-                  "data-lp-corner": corner,
-                  onPointerdown: ($event) => onRegionDown(corner, $event)
-                }, [..._cache[8] || (_cache[8] = [
-                  createElementVNode("span", { class: "size-3 rounded-pill border-2 border-white bg-brand shadow" }, null, -1)
-                ])], 42, _hoisted_5);
-              }), 64))
-            ], 44, _hoisted_4)) : createCommentVNode("", true)
-          ], 36)) : createCommentVNode("", true),
-          failure.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            createVNode(_sfc_main$1, {
-              name: "lucide:video-off",
-              size: 32
-            }),
-            createElementVNode("p", null, toDisplayString(failure.value === "unsupported" ? unref(text).unsupported : unref(text).failed), 1)
-          ])) : createCommentVNode("", true)
-        ], 512),
-        createElementVNode("div", _hoisted_7, [
-          createVNode(_sfc_main$2, {
+        createVNode(_sfc_main$1, {
+          items: videoMenu.value,
+          title: clockTitle.value,
+          always: ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", null, [
+              createElementVNode("div", {
+                ref_key: "stageEl",
+                ref: stageEl,
+                class: "relative aspect-video w-full overflow-hidden rounded-card bg-black"
+              }, [
+                createElementVNode("video", mergeProps({
+                  ref_key: "videoEl",
+                  ref: videoEl,
+                  class: "absolute inset-0 size-full object-contain",
+                  src: __props.src,
+                  poster: __props.poster,
+                  preload: "metadata",
+                  playsinline: ""
+                }, toHandlers(unref(media).listeners, true), {
+                  onClick: _cache[0] || (_cache[0] = ($event) => !__props.regionSelect && togglePlay())
+                }), null, 16, _hoisted_2),
+                createVNode(VideoFlash, { flash: flash.value }, null, 8, ["flash"]),
+                createElementVNode("video", {
+                  ref_key: "samplerEl",
+                  ref: samplerEl,
+                  class: "pointer-events-none absolute size-px opacity-0",
+                  src: __props.src,
+                  preload: "metadata",
+                  muted: "",
+                  playsinline: "",
+                  "aria-hidden": "true",
+                  tabindex: "-1"
+                }, null, 8, _hoisted_3),
+                createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+                  default: withCtx(() => [
+                    __props.regionSelect && ready.value ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "absolute cursor-crosshair touch-none",
+                      style: normalizeStyle({ left: `${picture.value.x}px`, top: `${picture.value.y}px`, width: `${picture.value.width}px`, height: `${picture.value.height}px` }),
+                      "data-lp-region-layer": "",
+                      onPointerdown: _cache[2] || (_cache[2] = ($event) => onRegionDown("draw", $event))
+                    }, [
+                      createVNode(Transition, mergeProps(unref(FADE_SCALE), {
+                        "enter-from-class": draft.value ? "opacity-0" : unref(FADE_SCALE).enterFromClass
+                      }), {
+                        default: withCtx(() => [
+                          shownRegion.value ? (openBlock(), createElementBlock("div", {
+                            key: 0,
+                            class: "absolute cursor-move rounded-inner border-2 border-dashed border-white/90 bg-white/10 shadow-[0_0_0_9999px_rgb(0_0_0/0.35)] outline-none transition-[left,top,width,height] duration-(--duration-medium) ease-(--ease-emphasized) focus-visible:ring-2 focus-visible:ring-ring data-[live]:transition-none motion-reduce:transition-none",
+                            "data-live": draft.value ? "" : void 0,
+                            style: normalizeStyle({ left: `${shownRegion.value.x * 100}%`, top: `${shownRegion.value.y * 100}%`, width: `${shownRegion.value.w * 100}%`, height: `${shownRegion.value.h * 100}%` }),
+                            tabindex: "0",
+                            role: "group",
+                            "aria-label": unref(text).region,
+                            "data-lp-region": "",
+                            onPointerdown: _cache[1] || (_cache[1] = ($event) => onRegionDown("move", $event)),
+                            onKeydown: onRegionKey
+                          }, [
+                            (openBlock(), createElementBlock(Fragment, null, renderList(["nw", "ne", "sw", "se"], (corner) => {
+                              return createElementVNode("span", {
+                                key: corner,
+                                class: normalizeClass(["absolute grid size-6 place-items-center pointer-coarse:size-11", [
+                                  corner[0] === "n" ? "top-0 -translate-y-1/2" : "bottom-0 translate-y-1/2",
+                                  corner[1] === "w" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2",
+                                  corner === "nw" || corner === "se" ? "cursor-nwse-resize" : "cursor-nesw-resize"
+                                ]]),
+                                "data-lp-corner": corner,
+                                onPointerdown: ($event) => onRegionDown(corner, $event)
+                              }, [..._cache[8] || (_cache[8] = [
+                                createElementVNode("span", { class: "size-3 rounded-full bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.3),0_1px_3px_rgb(0_0_0/0.35)]" }, null, -1)
+                              ])], 42, _hoisted_5);
+                            }), 64))
+                          ], 44, _hoisted_4)) : createCommentVNode("", true)
+                        ]),
+                        _: 1
+                      }, 16, ["enter-from-class"])
+                    ], 36)) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 16),
+                createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+                  default: withCtx(() => [
+                    __props.regionSelect && ready.value && !shownRegion.value && !unref(playing) && !__props.disabled ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(text).regionHint), 1)) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 16),
+                _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                  renderSlot(_ctx.$slots, "actions", { buttonClass: unref(OVERLAY_BUTTON) }, void 0, true)
+                ])) : createCommentVNode("", true),
+                createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+                  default: withCtx(() => [
+                    unref(failure) ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                      createVNode(_sfc_main$2, {
+                        name: "lucide:video-off",
+                        size: 32
+                      }),
+                      createElementVNode("p", null, toDisplayString(unref(failure) === "unsupported" ? unref(text).unsupported : unref(text).failed), 1)
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 16)
+              ], 512)
+            ])
+          ]),
+          _: 3
+        }, 8, ["items", "title"]),
+        createElementVNode("div", _hoisted_9, [
+          createVNode(_sfc_main$3, {
             size: "sm",
             variant: "ghost",
             square: "",
             disabled: off.value,
-            "aria-label": playing.value ? unref(text).pause : unref(text).play,
-            title: playing.value ? unref(text).pause : unref(text).play,
+            "aria-label": unref(wantsPlay) ? unref(text).pause : unref(text).play,
+            title: unref(wantsPlay) ? unref(text).pause : unref(text).play,
             onClick: togglePlay
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$1, {
-                name: playing.value ? "lucide:pause" : "lucide:play",
-                size: 16
-              }, null, 8, ["name"])
+              createVNode(Transition, normalizeProps(guardReactiveProps(unref(ICON_SWAP))), {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(_sfc_main$2, {
+                    key: unref(wantsPlay) ? "pause" : "play",
+                    name: unref(wantsPlay) ? "lucide:pause" : "lucide:play",
+                    size: 16
+                  }, null, 8, ["name"]))
+                ]),
+                _: 1
+              }, 16)
             ]),
             _: 1
           }, 8, ["disabled", "aria-label", "title"]),
-          createVNode(_sfc_main$2, {
+          createVNode(_sfc_main$3, {
             size: "sm",
             variant: "ghost",
             square: "",
@@ -683,14 +783,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: _cache[3] || (_cache[3] = ($event) => step(-frameStep.value))
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$1, {
+              createVNode(_sfc_main$2, {
                 name: "lucide:step-back",
                 size: 16
               })
             ]),
             _: 1
           }, 8, ["disabled", "aria-label", "title"]),
-          createVNode(_sfc_main$2, {
+          createVNode(_sfc_main$3, {
             size: "sm",
             variant: "ghost",
             square: "",
@@ -700,37 +800,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: _cache[4] || (_cache[4] = ($event) => step(frameStep.value))
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$1, {
+              createVNode(_sfc_main$2, {
                 name: "lucide:step-forward",
                 size: 16
               })
             ]),
             _: 1
           }, 8, ["disabled", "aria-label", "title"]),
-          createElementVNode("span", _hoisted_8, [
-            createElementVNode("span", _hoisted_9, toDisplayString(unref(formatClipTime)(time.value, true)), 1),
-            createTextVNode(" / " + toDisplayString(unref(formatClipTime)(duration.value, true)), 1)
+          createElementVNode("span", _hoisted_10, [
+            createVNode(_sfc_main$4, {
+              class: "text-ink",
+              text: unref(formatClipTime)(unref(time), "fixed"),
+              widest: widest.value
+            }, null, 8, ["text", "widest"]),
+            createTextVNode(" / " + toDisplayString(unref(formatClipTime)(unref(duration), "fixed")), 1)
           ]),
-          createVNode(_sfc_main$2, {
-            size: "sm",
-            variant: "ghost",
-            square: "",
-            disabled: !ready.value,
-            "aria-label": muted.value ? unref(text).unmute : unref(text).mute,
-            title: muted.value ? unref(text).unmute : unref(text).mute,
-            "aria-pressed": muted.value,
-            onClick: toggleMute
-          }, {
+          createVNode(_sfc_main$5, {
+            media: unref(media),
+            labels: unref(text),
+            disabled: !ready.value
+          }, null, 8, ["media", "labels", "disabled"]),
+          _cache[9] || (_cache[9] = createElementVNode("span", { class: "flex-1" }, null, -1)),
+          createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE_SCALE))), {
             default: withCtx(() => [
-              createVNode(_sfc_main$1, {
-                name: muted.value ? "lucide:volume-x" : "lucide:volume-2",
-                size: 16
-              }, null, 8, ["name"])
+              zoomed.value ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 0,
+                size: "sm",
+                variant: "ghost",
+                square: "",
+                disabled: off.value,
+                "aria-label": unref(text).zoomFit,
+                title: unref(text).zoomFit,
+                onClick: fit
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$2, {
+                    name: "lucide:maximize-2",
+                    size: 16
+                  })
+                ]),
+                _: 1
+              }, 8, ["disabled", "aria-label", "title"])) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["disabled", "aria-label", "title", "aria-pressed"]),
-          _cache[9] || (_cache[9] = createElementVNode("span", { class: "flex-1" }, null, -1)),
-          createVNode(_sfc_main$2, {
+          }, 16),
+          createVNode(_sfc_main$3, {
             size: "sm",
             variant: "ghost",
             square: "",
@@ -740,14 +854,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: _cache[5] || (_cache[5] = ($event) => zoomBy(0.5))
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$1, {
+              createVNode(_sfc_main$2, {
                 name: "lucide:zoom-out",
                 size: 16
               })
             ]),
             _: 1
           }, 8, ["disabled", "aria-label", "title"]),
-          createVNode(_sfc_main$2, {
+          createVNode(_sfc_main$3, {
             size: "sm",
             variant: "ghost",
             square: "",
@@ -757,199 +871,236 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onClick: _cache[6] || (_cache[6] = ($event) => zoomBy(2))
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$1, {
+              createVNode(_sfc_main$2, {
                 name: "lucide:zoom-in",
                 size: 16
               })
             ]),
             _: 1
-          }, 8, ["disabled", "aria-label", "title"]),
-          createVNode(_sfc_main$2, {
-            size: "sm",
-            variant: "ghost",
-            square: "",
-            disabled: off.value || !zoomed.value,
-            "aria-label": unref(text).zoomFit,
-            title: unref(text).zoomFit,
-            onClick: fit
-          }, {
-            default: withCtx(() => [
-              createVNode(_sfc_main$1, {
-                name: "lucide:maximize-2",
-                size: 16
-              })
-            ]),
-            _: 1
           }, 8, ["disabled", "aria-label", "title"])
         ]),
-        createElementVNode("div", {
-          class: "relative",
-          onWheel
-        }, [
-          createElementVNode("div", _hoisted_10, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(marks.value, (m) => {
-              return openBlock(), createElementBlock("span", {
-                key: m,
-                class: normalizeClass(["absolute top-0 whitespace-nowrap", xOf(m) < 16 ? "" : xOf(m) > trackWidth.value - 16 ? "-translate-x-full" : "-translate-x-1/2"]),
-                style: normalizeStyle({ left: pct(m) })
-              }, toDisplayString(unref(formatClipTime)(m, markDigits.value)), 7);
-            }), 128))
-          ]),
-          createElementVNode("div", {
-            ref_key: "trackEl",
-            ref: trackEl,
-            class: normalizeClass(["relative h-14 touch-none rounded-control bg-surface-soft", off.value ? "opacity-60" : "cursor-text"]),
-            "aria-label": unref(text).timeline,
-            role: "group",
-            onPointerdown: onTrackDown,
-            onPointermove: onTrackMove,
-            onPointerup: onTrackUp,
-            onPointercancel: onTrackUp
-          }, [
-            createElementVNode("div", _hoisted_12, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(stills.value, (s) => {
-                return openBlock(), createElementBlock("div", {
-                  key: s.key,
-                  ref_for: true,
-                  ref: (el) => mountFrame(s.key, el),
-                  class: normalizeClass(["lp-trim-still absolute inset-y-0 overflow-hidden border-r border-black/20 [&>canvas]:size-full [&>canvas]:object-cover", { "lp-trim-still-in": !unref(reduced) }]),
-                  style: normalizeStyle({ left: s.left, width: s.width }),
-                  "data-lp-still": frames.value.has(s.key) ? "ready" : "pending"
-                }, null, 14, _hoisted_13);
-              }), 128)),
-              createElementVNode("div", {
-                class: "absolute inset-y-0 left-0 bg-black/55",
-                style: normalizeStyle({ width: `${Math.max(0, xOf(local.value[0]))}px` })
-              }, null, 4),
+        createVNode(_sfc_main$1, {
+          items: timeMenu.value,
+          title: menuTitle.value,
+          always: ""
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(["relative", TRACK_GLIDE]),
+              "data-live": live.value || void 0,
+              onWheel,
+              onContextmenu: onTimeContextMenu
+            }, [
+              createVNode(TransitionGroup, mergeProps({
+                tag: "div",
+                class: "relative h-4 overflow-hidden text-[10px] text-muted tabular-nums",
+                "aria-hidden": "true"
+              }, unref(FADE)), {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(marks.value, (m) => {
+                    return openBlock(), createElementBlock("span", {
+                      key: m,
+                      class: normalizeClass(["absolute top-0 whitespace-nowrap", xOf(m) < 16 ? "" : xOf(m) > trackWidth.value - 16 ? "-translate-x-full" : "-translate-x-1/2"]),
+                      style: normalizeStyle({ left: pct(m) }),
+                      "data-glide": ""
+                    }, toDisplayString(unref(formatClipTime)(m, markDigits.value)), 7);
+                  }), 128))
+                ]),
+                _: 1
+              }, 16),
               createElementVNode("div", {
-                class: "absolute inset-y-0 right-0 bg-black/55",
-                style: normalizeStyle({ left: `${Math.min(trackWidth.value, Math.max(0, xOf(local.value[1])))}px` })
-              }, null, 4)
-            ]),
-            ready.value ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: "pointer-events-none absolute inset-y-0 border-y-2 border-brand",
-              style: normalizeStyle({ left: pct(local.value[0]), width: `${clipLength.value / span.value * 100}%` }),
-              "data-lp-range": ""
-            }, null, 4)) : createCommentVNode("", true),
-            (openBlock(), createElementBlock(Fragment, null, renderList([0, 1], (end) => {
-              return withDirectives(createElementVNode("div", {
-                key: end,
-                class: normalizeClass(["group/handle absolute inset-y-0 z-10 flex w-6 touch-none items-stretch outline-none pointer-coarse:w-11", [end === 0 ? "justify-start" : "-translate-x-full justify-end", off.value ? "" : "cursor-ew-resize"]]),
-                style: normalizeStyle({ left: pct(local.value[end]) }),
-                role: "slider",
-                tabindex: off.value ? -1 : 0,
-                "aria-label": end === 0 ? unref(text).start : unref(text).end,
-                "aria-valuemin": 0,
-                "aria-valuemax": Math.round(duration.value * 1e3) / 1e3,
-                "aria-valuenow": local.value[end],
-                "aria-valuetext": handleText(local.value[end]),
-                "aria-disabled": off.value || void 0,
-                "data-lp-handle": end,
-                onPointerdown: ($event) => onHandleDown(end, $event)
+                ref_key: "trackEl",
+                ref: trackEl,
+                class: normalizeClass(["relative h-14 touch-none rounded-control bg-surface-soft transition-opacity duration-(--duration-fast) motion-reduce:transition-none", off.value ? "opacity-60" : "cursor-text"]),
+                "aria-label": unref(text).timeline,
+                role: "group",
+                onPointerdown: onTrackDown,
+                onPointermove: onTrackMove,
+                onPointerup: onTrackUp,
+                onPointercancel: onTrackUp
               }, [
-                createElementVNode("span", {
-                  class: normalizeClass(["flex w-3 items-center justify-center bg-brand transition-[width] duration-(--duration-fast) group-focus-visible/handle:ring-2 group-focus-visible/handle:ring-ring motion-reduce:transition-none", end === 0 ? "rounded-l-control" : "rounded-r-control"])
-                }, [..._cache[10] || (_cache[10] = [
-                  createElementVNode("span", { class: "h-5 w-0.5 rounded-pill bg-white/85" }, null, -1)
-                ])], 2)
-              ], 46, _hoisted_14), [
-                [vShow, ready.value]
-              ]);
-            }), 64)),
-            withDirectives(createElementVNode("div", {
-              class: "absolute -top-4 bottom-0 z-20 w-0 outline-none",
-              style: normalizeStyle({ left: pct(time.value) }),
-              role: "slider",
-              tabindex: off.value ? -1 : 0,
-              "aria-label": unref(text).position,
-              "aria-valuemin": 0,
-              "aria-valuemax": Math.round(duration.value * 1e3) / 1e3,
-              "aria-valuenow": Math.round(time.value * 1e3) / 1e3,
-              "aria-valuetext": handleText(time.value),
-              "data-lp-playhead": ""
-            }, [..._cache[11] || (_cache[11] = [
-              createElementVNode("span", { class: "pointer-events-none absolute inset-y-0 -left-px w-0.5 bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.45)]" }, null, -1),
-              createElementVNode("span", { class: "pointer-events-none absolute -top-0.5 -left-1.5 size-3 rounded-pill border-2 border-white bg-ink shadow [[data-lp-playhead]:focus-visible_&]:ring-2 [[data-lp-playhead]:focus-visible_&]:ring-ring" }, null, -1)
-            ])], 12, _hoisted_15), [
-              [vShow, ready.value && time.value >= view.value.start && time.value <= view.value.end]
-            ])
-          ], 42, _hoisted_11),
-          zoomed.value ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "relative mt-1.5 h-2 cursor-pointer touch-none rounded-pill bg-surface-soft",
-            "aria-label": unref(text).overview,
-            role: "presentation",
-            "data-lp-overview": "",
-            onPointerdown: onOverviewDown
-          }, [
-            createElementVNode("span", {
-              class: "absolute inset-y-0 rounded-pill bg-brand/45",
-              style: normalizeStyle({ left: `${local.value[0] / duration.value * 100}%`, width: `${clipLength.value / duration.value * 100}%` })
-            }, null, 4),
-            createElementVNode("span", {
-              class: "absolute -inset-y-0.5 rounded-pill border-2 border-ink/70",
-              style: normalizeStyle({ left: `${view.value.start / duration.value * 100}%`, width: `${span.value / duration.value * 100}%` })
-            }, null, 4)
-          ], 40, _hoisted_16)) : createCommentVNode("", true)
-        ], 32),
-        createElementVNode("div", _hoisted_17, [
+                createElementVNode("div", _hoisted_13, [
+                  createVNode(TransitionGroup, normalizeProps(guardReactiveProps(unref(FADE))), {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(stills.value, (s) => {
+                        return openBlock(), createElementBlock("div", {
+                          key: s.key,
+                          ref_for: true,
+                          ref: (el) => mountFrame(s, el),
+                          class: normalizeClass(["absolute inset-y-0 overflow-hidden [&>canvas]:absolute [&>canvas]:inset-0 [&>canvas]:size-full [&>canvas]:object-cover", { "lp-trim-still-in": !unref(reduced) }]),
+                          style: normalizeStyle({ left: s.left, width: s.width }),
+                          "data-lp-still": frames.value.has(s.key) ? "ready" : "pending",
+                          "data-glide": ""
+                        }, null, 14, _hoisted_14);
+                      }), 128))
+                    ]),
+                    _: 1
+                  }, 16),
+                  createElementVNode("div", {
+                    class: "absolute inset-y-0 left-0 bg-black/55",
+                    style: normalizeStyle({ width: pct(local.value[0]) }),
+                    "data-glide": ""
+                  }, null, 4),
+                  createElementVNode("div", {
+                    class: "absolute inset-y-0 right-0 bg-black/55",
+                    style: normalizeStyle({ left: pct(local.value[1]) }),
+                    "data-glide": ""
+                  }, null, 4)
+                ]),
+                createElementVNode("div", {
+                  class: normalizeClass(["pointer-events-none absolute inset-0 transition-opacity duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none", ready.value ? "" : "opacity-0"])
+                }, [
+                  createElementVNode("div", {
+                    class: "absolute inset-y-0 rounded-control border-y-2 border-white/85 shadow-[0_0_0_1px_rgb(0_0_0/0.25)]",
+                    style: normalizeStyle({ left: pct(local.value[0]), width: `${clipLength.value / span.value * 100}%` }),
+                    "data-lp-range": "",
+                    "data-glide": ""
+                  }, null, 4),
+                  (openBlock(), createElementBlock(Fragment, null, renderList([0, 1], (end) => {
+                    return createElementVNode("div", {
+                      key: end,
+                      class: normalizeClass(["group/handle absolute inset-y-0 z-10 flex w-6 -translate-x-1/2 touch-none justify-center outline-none pointer-coarse:w-11", [off.value ? "" : "cursor-ew-resize", ready.value ? "pointer-events-auto" : ""]]),
+                      style: normalizeStyle({ left: pct(local.value[end]) }),
+                      role: "slider",
+                      tabindex: off.value ? -1 : 0,
+                      "aria-label": end === 0 ? unref(text).start : unref(text).end,
+                      "aria-valuemin": 0,
+                      "aria-valuemax": Math.round(unref(duration) * 1e3) / 1e3,
+                      "aria-valuenow": local.value[end],
+                      "aria-valuetext": handleText(local.value[end]),
+                      "aria-disabled": off.value || void 0,
+                      "aria-hidden": ready.value ? void 0 : "true",
+                      "data-lp-handle": end,
+                      "data-active": dragging.value === end || void 0,
+                      "data-glide": "",
+                      onPointerdown: ($event) => onHandleDown(end, $event)
+                    }, [..._cache[10] || (_cache[10] = [
+                      createElementVNode("span", { class: "my-1 flex w-2 items-center justify-center rounded-inner bg-white/90 shadow-[0_0_0_1px_rgb(0_0_0/0.3),0_1px_3px_rgb(0_0_0/0.35)] transition-[background-color,scale] duration-(--duration-fast) ease-(--ease-emphasized) group-hover/handle:bg-white group-data-active/handle:scale-x-125 group-data-active/handle:bg-white group-focus-visible/handle:ring-2 group-focus-visible/handle:ring-ring motion-reduce:transition-none motion-reduce:group-data-active/handle:scale-x-100" }, [
+                        createElementVNode("span", { class: "h-4 w-px rounded-pill bg-black/35" })
+                      ], -1)
+                    ])], 46, _hoisted_15);
+                  }), 64))
+                ], 2),
+                createElementVNode("div", {
+                  class: "group/playhead absolute -top-4 bottom-0 z-20 w-0 outline-none",
+                  style: normalizeStyle({ left: pct(unref(time)) }),
+                  role: "slider",
+                  tabindex: off.value ? -1 : 0,
+                  "aria-label": unref(text).position,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": Math.round(unref(duration) * 1e3) / 1e3,
+                  "aria-valuenow": Math.round(unref(time) * 1e3) / 1e3,
+                  "aria-valuetext": handleText(unref(time)),
+                  "data-lp-playhead": "",
+                  "data-glide": unref(playing) ? void 0 : ""
+                }, [
+                  createElementVNode("span", {
+                    class: normalizeClass(["pointer-events-none absolute inset-0 transition-opacity duration-(--duration-fast) motion-reduce:transition-none", ready.value && unref(time) >= view.value.start && unref(time) <= view.value.end ? "" : "opacity-0"])
+                  }, [..._cache[11] || (_cache[11] = [
+                    createElementVNode("span", { class: "absolute inset-y-0 -left-px w-0.5 rounded-pill bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.35)]" }, null, -1),
+                    createElementVNode("span", { class: "absolute -top-0.5 -left-1.5 size-3 rounded-full bg-white shadow-[0_0_0_1px_rgb(0_0_0/0.3),0_1px_3px_rgb(0_0_0/0.35)] group-focus-visible/playhead:ring-2 group-focus-visible/playhead:ring-ring" }, null, -1)
+                  ])], 2)
+                ], 12, _hoisted_16)
+              ], 42, _hoisted_12),
+              createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+                default: withCtx(() => [
+                  zoomed.value ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: "relative mt-1.5 h-2.5 cursor-pointer touch-none rounded-pill bg-surface-soft",
+                    "aria-label": unref(text).overview,
+                    role: "presentation",
+                    "data-lp-overview": "",
+                    onPointerdown: onOverviewDown
+                  }, [
+                    createElementVNode("span", {
+                      class: "absolute inset-y-0.5 rounded-pill bg-line-strong",
+                      style: normalizeStyle({ left: `${local.value[0] / unref(duration) * 100}%`, width: `${clipLength.value / unref(duration) * 100}%` }),
+                      "data-glide": ""
+                    }, null, 4),
+                    createElementVNode("span", {
+                      class: "absolute inset-y-0 rounded-pill border border-ink/60",
+                      style: normalizeStyle({ left: `${view.value.start / unref(duration) * 100}%`, width: `${span.value / unref(duration) * 100}%` }),
+                      "data-glide": ""
+                    }, null, 4)
+                  ], 40, _hoisted_17)) : createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 16)
+            ], 40, _hoisted_11)
+          ]),
+          _: 1
+        }, 8, ["items", "title"]),
+        createElementVNode("div", _hoisted_18, [
           (openBlock(), createElementBlock(Fragment, null, renderList([0, 1], (end) => {
-            return createElementVNode("label", {
+            return createVNode(_sfc_main$6, {
               key: end,
-              class: "flex flex-col gap-1"
-            }, [
-              createElementVNode("span", _hoisted_18, toDisplayString(end === 0 ? unref(text).start : unref(text).end), 1),
-              createVNode(_sfc_main$3, {
-                size: "sm",
-                class: "w-28 font-mono tabular-nums",
-                "model-value": fieldText(end),
-                disabled: off.value,
-                invalid: invalid.value[end],
-                title: invalid.value[end] ? unref(text).invalidTime : void 0,
-                inputmode: "decimal",
-                spellcheck: "false",
-                autocomplete: "off",
-                "data-lp-time": end,
-                "onUpdate:modelValue": ($event) => onFieldInput(end, $event),
-                onBlur: ($event) => commitField(end),
-                onKeydown: [
-                  withKeys(withModifiers(($event) => commitField(end), ["prevent"]), ["enter"]),
-                  withKeys(($event) => revertField(end), ["esc"])
-                ]
-              }, null, 8, ["model-value", "disabled", "invalid", "title", "data-lp-time", "onUpdate:modelValue", "onBlur", "onKeydown"])
-            ]);
+              size: "sm",
+              class: "w-28",
+              label: end === 0 ? unref(text).start : unref(text).end,
+              "model-value": fieldText(end),
+              disabled: off.value,
+              invalid: invalid.value[end],
+              title: invalid.value[end] ? unref(text).invalidTime : void 0,
+              inputmode: "decimal",
+              spellcheck: "false",
+              autocomplete: "off",
+              "data-lp-time": end,
+              "onUpdate:modelValue": ($event) => onFieldInput(end, $event),
+              onBlur: ($event) => commitField(end),
+              onKeydown: [
+                withKeys(withModifiers(($event) => commitField(end), ["prevent"]), ["enter"]),
+                withKeys(($event) => revertField(end), ["esc"])
+              ]
+            }, null, 8, ["label", "model-value", "disabled", "invalid", "title", "data-lp-time", "onUpdate:modelValue", "onBlur", "onKeydown"]);
           }), 64)),
           createElementVNode("div", _hoisted_19, [
             createElementVNode("span", _hoisted_20, toDisplayString(unref(text).length), 1),
-            createElementVNode("span", _hoisted_21, toDisplayString(unref(formatClipTime)(clipLength.value, true)), 1)
+            createElementVNode("span", _hoisted_21, [
+              createVNode(_sfc_main$4, {
+                text: unref(formatClipTime)(clipLength.value, "fixed"),
+                widest: widest.value
+              }, null, 8, ["text", "widest"])
+            ])
           ]),
-          leftText.value ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(leftText.value), 1)) : createCommentVNode("", true),
+          createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE))), {
+            default: withCtx(() => [
+              leftText.value ? (openBlock(), createElementBlock("span", _hoisted_22, [
+                createVNode(_sfc_main$4, {
+                  text: leftText.value,
+                  widest: widestLeft.value
+                }, null, 8, ["text", "widest"])
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 16),
           _cache[12] || (_cache[12] = createElementVNode("span", { class: "flex-1" }, null, -1)),
-          __props.regionSelect ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            __props.region ? (openBlock(), createBlock(_sfc_main$2, {
-              key: 0,
-              size: "sm",
-              variant: "outline",
-              disabled: __props.disabled,
-              onClick: _cache[7] || (_cache[7] = ($event) => emit("update:region", null))
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$1, {
-                  name: "lucide:x",
-                  size: 14
-                }),
-                createTextVNode(toDisplayString(unref(text).regionClear), 1)
-              ]),
-              _: 1
-            }, 8, ["disabled"])) : (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(unref(text).regionHint), 1))
-          ], 64)) : createCommentVNode("", true)
+          createVNode(Transition, normalizeProps(guardReactiveProps(unref(FADE_SCALE))), {
+            default: withCtx(() => [
+              __props.regionSelect ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 0,
+                size: "sm",
+                variant: "outline",
+                disabled: __props.disabled || !__props.region,
+                onClick: _cache[7] || (_cache[7] = ($event) => emit("update:region", null))
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$2, {
+                    name: "lucide:x",
+                    size: 14
+                  }),
+                  createTextVNode(toDisplayString(unref(text).regionClear), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 16)
         ])
       ], 16, _hoisted_1);
     };
   }
 });
-const LpVideoTrim = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-04a3a07a"]]);
+const LpVideoTrim = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-713835cc"]]);
 export {
   LpVideoTrim as default
 };