@leavepulse/ui 0.81.0 → 0.83.0

package/dist/components/LpVideoTrim.vue.js

@@ -0,0 +1,1106 @@
+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 { 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 { 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, 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-BcGs3Sh0.css';const _hoisted_1 = ["data-disabled"];
+const _hoisted_2 = ["src", "poster"];
+const _hoisted_3 = ["src"];
+const _hoisted_4 = ["data-live", "aria-label"];
+const _hoisted_5 = ["data-lp-corner", "onPointerdown"];
+const _hoisted_6 = {
+  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_8 = {
+  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: "flex items-center gap-0.5" };
+const _hoisted_10 = {
+  class: "min-w-0 truncate px-1.5 font-mono text-xs text-muted",
+  "data-lp-clock": ""
+};
+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",
+  "data-lp-length": ""
+};
+const _hoisted_22 = {
+  key: 0,
+  class: "pb-1 font-mono text-xs text-muted",
+  "data-lp-left": ""
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpVideoTrim",
+  props: {
+    src: {},
+    poster: { default: void 0 },
+    range: { default: void 0 },
+    maxClip: { default: void 0 },
+    minClip: { default: 0.1 },
+    regionSelect: { type: Boolean },
+    region: { default: null },
+    frameRate: { default: 30 },
+    menuItems: {},
+    disabled: { type: Boolean },
+    labels: { default: () => ({}) }
+  },
+  emits: ["update:range", "change", "update:region", "error"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels(
+      "videoTrim",
+      {
+        play: "Play",
+        pause: "Pause",
+        stepBack: "Previous frame",
+        stepForward: "Next frame",
+        mute: "Mute",
+        unmute: "Unmute",
+        zoomIn: "Zoom in",
+        zoomOut: "Zoom out",
+        zoomFit: "Show whole video",
+        start: "Start",
+        end: "End",
+        position: "Position",
+        length: "Length",
+        /** `{left}` and `{max}` are replaced by times. */
+        left: "{left} left of {max}",
+        overview: "Visible part of the timeline",
+        timeline: "Timeline — Space plays, arrows step, I and O set start and end",
+        region: "Marked area — arrows move it, Shift+arrows resize, Delete removes",
+        regionHint: "Drag on the picture to mark an area",
+        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",
+        /** `{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 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 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);
+    const off = computed(() => props.disabled || !ready.value);
+    const limits = computed(() => ({
+      duration: duration.value,
+      minClip: Math.max(0, props.minClip ?? 0),
+      maxClip: props.maxClip && props.maxClip > 0 ? props.maxClip : Infinity
+    }));
+    const local = ref([0, 0]);
+    const dragging = ref(null);
+    const same = (a, b) => !!a && a[0] === b[0] && a[1] === b[1];
+    watch(
+      [() => props.range, limits],
+      () => {
+        if (dragging.value !== null || !duration.value) return;
+        const next = normalizeRange(props.range, limits.value);
+        local.value = next;
+        if (!same(props.range, next)) emit("update:range", next);
+      },
+      { deep: true }
+    );
+    function put(next, commit) {
+      const changed = !same(local.value, next);
+      local.value = next;
+      if (changed) emit("update:range", next);
+      if (commit) emit("change", next);
+    }
+    const clipLength = computed(() => local.value[1] - local.value[0]);
+    let stopAtEnd = false;
+    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);
+    }
+    const flash = ref(null);
+    function togglePlay() {
+      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;
+      let from = time.value;
+      if (from >= b - 1e-3 && from <= b + 1e-3) from = a;
+      stopAtEnd = from >= a - 1e-3 && from < b;
+      if (from !== time.value) seek(from);
+      media.play();
+    }
+    function step(seconds) {
+      if (off.value) return;
+      pause();
+      seek(time.value + seconds);
+      if (zoomed.value) view.value = revealTime(view.value, time.value, duration.value);
+    }
+    function toggleMute() {
+      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));
+    const zoomed = computed(() => duration.value > 0 && span.value < duration.value - 1e-6);
+    const canZoomIn = computed(() => span.value > Math.min(MIN_SPAN, duration.value) + 1e-6);
+    watch(duration, (d) => {
+      view.value = { start: 0, end: d };
+    });
+    const xOf = (t) => (t - view.value.start) / span.value * trackWidth.value;
+    const pct = (t) => `${(t - view.value.start) / span.value * 100}%`;
+    function timeAt(clientX) {
+      const box = trackEl.value?.getBoundingClientRect();
+      if (!box || !box.width) return 0;
+      return view.value.start + (clientX - box.left) / box.width * span.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;
+      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;
+    const scrubbing = ref(false);
+    function onHandleDown(end, event) {
+      if (off.value || event.button !== 0) return;
+      event.stopPropagation();
+      event.currentTarget.focus({ preventScroll: true });
+      pause();
+      dragging.value = end;
+      lastX = event.clientX;
+      startPointerDrag(event, {
+        cursor: "ew-resize",
+        move: (e) => {
+          lastX = e.clientX;
+          moveHandle();
+          edgeScroll();
+        },
+        end: () => {
+          dragging.value = null;
+          if (edgeFrame) frameWindow().cancelAnimationFrame(edgeFrame);
+          edgeFrame = 0;
+          emit("change", local.value);
+        }
+      });
+    }
+    function moveHandle() {
+      const end = dragging.value;
+      if (end === null) return;
+      const next = dragEnd(local.value, end, timeAt(lastX), limits.value);
+      put(next, false);
+      seek(next[end]);
+    }
+    function edgeScroll() {
+      if (edgeFrame || !zoomed.value) return;
+      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.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();
+        else seek(timeAt(lastX));
+        edgeScroll();
+      });
+    }
+    function onTrackDown(event) {
+      if (off.value || event.pointerType === "mouse" && event.button !== 0) return;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      pointers.set(event.pointerId, event.clientX);
+      if (pointers.size === 2) {
+        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.value = true;
+      lastX = event.clientX;
+      seek(timeAt(event.clientX));
+    }
+    function onTrackMove(event) {
+      if (!pointers.has(event.pointerId)) return;
+      pointers.set(event.pointerId, event.clientX);
+      if (pinch && pointers.size === 2) {
+        const [a, b] = [...pointers.values()];
+        const distance = Math.max(8, Math.abs(a - b));
+        zoomBy(distance / pinch.distance, pinch.anchor);
+        pinch.distance = distance;
+        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;
+        pinching.value = false;
+      }
+      if (!pointers.size) scrubbing.value = false;
+    }
+    function onOverviewDown(event) {
+      if (off.value || event.button !== 0) return;
+      const box = event.currentTarget.getBoundingClientRect();
+      const centreAt = (clientX) => {
+        const centre = (clientX - box.left) / Math.max(1, box.width) * duration.value;
+        view.value = shiftView(view.value, centre - (view.value.start + view.value.end) / 2, duration.value);
+      };
+      centreAt(event.clientX);
+      startPointerDrag(event, { move: (e) => centreAt(e.clientX), end: () => {
+      } });
+    }
+    const STILL_HEIGHT = 56;
+    const stillWidth = computed(() => {
+      const { width, height } = videoSize.value;
+      return Math.round(Math.min(160, Math.max(40, width && height ? STILL_HEIGHT * width / height : STILL_HEIGHT * (16 / 9))));
+    });
+    const stillSeconds = computed(() => stillSpan(span.value / Math.max(1, trackWidth.value), stillWidth.value));
+    const stills = computed(() => {
+      if (!ready.value || !trackWidth.value) return [];
+      const step2 = stillSeconds.value;
+      const first = Math.floor(view.value.start / step2);
+      const last = Math.min(Math.ceil(view.value.end / step2), Math.ceil(duration.value / step2));
+      const out = [];
+      for (let k = first; k < last && out.length < 200; k++) {
+        out.push({ key: `${step2}:${k}`, time: Math.min(duration.value, k * step2 + step2 / 2), left: pct(k * step2), width: `${step2 / span.value * 100}%` });
+      }
+      return out;
+    });
+    const frames = shallowRef(/* @__PURE__ */ new Map());
+    let sampler = null;
+    let stillTimer;
+    watch(stills, (list) => {
+      clearTimeout(stillTimer);
+      stillTimer = setTimeout(() => {
+        if (!sampler) return;
+        const centre = (view.value.start + view.value.end) / 2;
+        sampler.want([...list].sort((a, b) => Math.abs(a.time - centre) - Math.abs(b.time - centre)));
+      }, 120);
+    });
+    function mountFrame(still, el) {
+      if (!isHTMLElement(el)) return;
+      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);
+    const shownRegion = computed(() => draft.value ?? props.region ?? null);
+    function fractionAt(event) {
+      const box = stageEl.value?.getBoundingClientRect();
+      const p = picture.value;
+      if (!box || !p.width || !p.height) return { x: 0, y: 0 };
+      return { x: (event.clientX - box.left - p.x) / p.width, y: (event.clientY - box.top - p.y) / p.height };
+    }
+    function onRegionDown(handle, event) {
+      if (props.disabled || !props.regionSelect || event.pointerType === "mouse" && event.button !== 0) return;
+      event.stopPropagation();
+      pause();
+      const start = fractionAt(event);
+      const from = props.region ?? null;
+      startPointerDrag(event, {
+        move: (e) => {
+          const at = fractionAt(e);
+          draft.value = handle === "draw" || !from ? regionBetween(start.x, start.y, at.x, at.y) : adjustRegion(from, handle, at.x - start.x, at.y - start.y);
+        },
+        end: (completed) => {
+          const next = draft.value;
+          draft.value = null;
+          if (!completed || !next || handle === "draw" && (next.w < 0.01 || next.h < 0.01)) return;
+          emit("update:region", next);
+        }
+      });
+    }
+    function onRegionKey(event) {
+      const r = props.region;
+      if (!r || props.disabled) return;
+      if (event.key === "Delete" || event.key === "Backspace") {
+        event.preventDefault();
+        emit("update:region", null);
+        return;
+      }
+      const d = event.altKey ? 2e-3 : 0.01;
+      const moves = { ArrowLeft: [-d, 0], ArrowRight: [d, 0], ArrowUp: [0, -d], ArrowDown: [0, d] };
+      const move = moves[event.key];
+      if (!move) return;
+      event.preventDefault();
+      event.stopPropagation();
+      emit("update:region", adjustRegion(r, event.shiftKey ? "se" : "move", move[0], move[1]));
+    }
+    function onKeydown(event) {
+      const target = event.target;
+      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") {
+        event.preventDefault();
+        togglePlay();
+      } else if (event.key in delta || event.key === "Home" || event.key === "End") {
+        if (off.value) return;
+        event.preventDefault();
+        if (end !== null) {
+          const from = local.value[end];
+          const to = event.key === "Home" ? 0 : event.key === "End" ? duration.value : from + delta[event.key];
+          const next = dragEnd(local.value, end, to, limits.value);
+          put(next, true);
+          pause();
+          seek(next[end]);
+        } else if (event.key === "Home" || event.key === "End") {
+          pause();
+          seek(event.key === "Home" ? 0 : duration.value);
+        } else step(delta[event.key]);
+        if (zoomed.value) view.value = revealTime(view.value, time.value, duration.value);
+      } else if ((event.key === "i" || event.key === "I" || event.key === "o" || event.key === "O") && !event.altKey) {
+        if (off.value) return;
+        event.preventDefault();
+        put(setEnd(local.value, event.key.toLowerCase() === "i" ? 0 : 1, time.value, limits.value), true);
+      }
+    }
+    const drafts = ref([null, null]);
+    const invalid = ref([false, false]);
+    const fieldText = (end) => drafts.value[end] ?? formatClipTime(local.value[end], "fixed");
+    function onFieldInput(end, value) {
+      drafts.value[end] = value;
+      invalid.value[end] = false;
+    }
+    function commitField(end) {
+      const typed = drafts.value[end];
+      if (typed === null) return;
+      const t = parseClipTime(typed);
+      if (t === null) {
+        invalid.value[end] = true;
+        return;
+      }
+      drafts.value[end] = null;
+      put(setEnd(local.value, end, t, limits.value), true);
+      seek(local.value[end]);
+      if (zoomed.value) view.value = revealTime(view.value, local.value[end], duration.value);
+    }
+    function revertField(end) {
+      drafts.value[end] = null;
+      invalid.value[end] = false;
+    }
+    useResizeObserver(trackEl, (_, el) => trackWidth.value = el.clientWidth, { immediate: true });
+    useResizeObserver(stageEl, (_, el) => stageSize.value = { width: el.clientWidth, height: el.clientHeight }, { immediate: true });
+    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);
+        frames.value = next;
+      }) : null;
+    }
+    watch(
+      () => props.src,
+      () => {
+        frames.value = /* @__PURE__ */ new Map();
+        void nextTick(startSampler);
+      }
+    );
+    onMounted(startSampler);
+    onBeforeUnmount(() => {
+      sampler?.dispose();
+      clearTimeout(stillTimer);
+      if (edgeFrame) frameWindow().cancelAnimationFrame(edgeFrame);
+      const stillsEl = samplerEl.value;
+      if (stillsEl) {
+        stillsEl.removeAttribute("src");
+        stillsEl.load();
+      }
+    });
+    __expose({
+      play: () => videoEl.value?.paused ? togglePlay() : void 0,
+      pause,
+      seek,
+      /** The playhead, in seconds. */
+      currentTime: () => time.value
+    });
+    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) ? 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
+      }), [
+        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": unref(wantsPlay) ? unref(text).pause : unref(text).play,
+            title: unref(wantsPlay) ? unref(text).pause : unref(text).play,
+            onClick: togglePlay
+          }, {
+            default: withCtx(() => [
+              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$3, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value,
+            "aria-label": unref(text).stepBack,
+            title: unref(text).stepBack,
+            onClick: _cache[3] || (_cache[3] = ($event) => step(-frameStep.value))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:step-back",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"]),
+          createVNode(_sfc_main$3, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value,
+            "aria-label": unref(text).stepForward,
+            title: unref(text).stepForward,
+            onClick: _cache[4] || (_cache[4] = ($event) => step(frameStep.value))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:step-forward",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"]),
+          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$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(() => [
+              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
+          }, 16),
+          createVNode(_sfc_main$3, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value || !zoomed.value,
+            "aria-label": unref(text).zoomOut,
+            title: unref(text).zoomOut,
+            onClick: _cache[5] || (_cache[5] = ($event) => zoomBy(0.5))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:zoom-out",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"]),
+          createVNode(_sfc_main$3, {
+            size: "sm",
+            variant: "ghost",
+            square: "",
+            disabled: off.value || !canZoomIn.value,
+            "aria-label": unref(text).zoomIn,
+            title: unref(text).zoomIn,
+            onClick: _cache[6] || (_cache[6] = ($event) => zoomBy(2))
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                name: "lucide:zoom-in",
+                size: 16
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label", "title"])
+        ]),
+        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", {
+                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("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 createVNode(_sfc_main$6, {
+              key: end,
+              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, [
+              createVNode(_sfc_main$4, {
+                text: unref(formatClipTime)(clipLength.value, "fixed"),
+                widest: widest.value
+              }, null, 8, ["text", "widest"])
+            ])
+          ]),
+          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)),
+          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-713835cc"]]);
+export {
+  LpVideoTrim as default
+};