@leavepulse/ui 0.82.0 → 0.83.1

package/src/components/LpVideoTrim.vue

@@ -24,24 +24,33 @@ export default { inheritAttrs: false }
  *   handle let go, a key, a typed time), for the save.
  * - `maxClip` and `minClip` bound the length: a dragged handle stops at the
  *   limit, while I, O and a typed time move the other end along.
+ * - `#actions` puts the app's buttons over the picture's top right corner (a
+ *   bin, a download), with `buttonClass` to look like the editor's own.
  */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
 import { startPointerDrag } from "../composables/pointerDrag"
-import { isHTMLElement } from "../composables/realm"
+import { isHTMLElement, nodeWindow } from "../composables/realm"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useResizeObserver } from "../composables/useResizeObserver"
 import { usePrefersReducedMotion } from "../composables/useReducedMotion"
+import { useVideoMedia } from "../composables/useVideoMedia"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
+import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpInput from "./LpInput.vue"
-import { formatClipTime } from "./videoBackdrop"
+import SteadyText from "./SteadyText.vue"
+import VideoFlash from "./VideoFlash.vue"
+import VideoVolume from "./VideoVolume.vue"
+import { FADE, FADE_SCALE, ICON_SWAP, OVERLAY_BUTTON } from "./videoMotion"
+import { useClipboard } from "../composables/useClipboard"
+import { useToast } from "../composables/useToast"
+import { formatClipTime, widestClipTime } from "./videoBackdrop"
 import { FrameSampler, stillSpan } from "./videoFrames"
 import {
   adjustRegion,
   containRect,
   dragEnd,
-  mediaErrorCause,
   normalizeRange,
   parseClipTime,
   regionBetween,
@@ -74,11 +83,15 @@ const props = withDefaults(
     region?: FrameRegion | null
     /** Frames per second, for the size of a frame step. */
     frameRate?: number
+    /** More items for the right-click menu, given the time it was opened at (under the pointer on the timeline, the playhead elsewhere). */
+    menuItems?: (at: number) => ContextMenuItemDef[]
     disabled?: boolean
     labels?: Partial<Record<
       | "play" | "pause" | "stepBack" | "stepForward" | "mute" | "unmute" | "zoomIn" | "zoomOut" | "zoomFit"
       | "start" | "end" | "position" | "length" | "left" | "overview" | "timeline"
-      | "region" | "regionHint" | "regionClear" | "failed" | "unsupported" | "invalidTime",
+      | "region" | "regionHint" | "regionClear" | "failed" | "unsupported" | "invalidTime"
+      | "menuAt" | "setStart" | "setEnd" | "goStart" | "goEnd" | "zoomHere" | "volume"
+      | "copyTime" | "copyFrame" | "copiedTime" | "copiedFrame" | "copyFailed",
       string
     >>
   }>(),
@@ -119,11 +132,24 @@ const text = useLabels(
     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 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<HTMLVideoElement | null>(null)
@@ -131,12 +157,14 @@ const samplerEl = ref<HTMLVideoElement | null>(null)
 const stageEl = ref<HTMLElement | null>(null)
 const trackEl = ref<HTMLElement | null>(null)
 
-const duration = ref(0)
-const failure = ref<VideoTrimErrorCause | null>(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
+/* Every pause the editor makes itself is for a seek, a step or a drag, where the frame must be exact: no easing. */
+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)
@@ -177,112 +205,26 @@ function put(next: TimeRange, commit: boolean) {
 
 const clipLength = computed(() => local.value[1] - local.value[0])
 
-/* ---------- media ---------- */
-
-let seekTarget: number | null = null
-let seekBusy = false
-/*
- * One seek at a time, the latest wins: a drag asks for a position each pointer
- * move, and WebKitGTK's pipeline stalls on a seek started inside another.
- */
-function seek(t: number) {
-  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
-  }
-  // A MediaRecorder WebM carries no duration until its end has been seen: seek far past it once to learn it.
-  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)
-  // Chromium answers a 404, or a login page served in place of an expired session's video, with "format not supported" too.
-  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 })
-}
-/* One byte of the address: whether it answers with media at all. Unknown (another origin without CORS) stays "unsupported". */
-async function probeSource(src: string): Promise<VideoTrimErrorCause> {
-  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"
-  }
-}
+/* ---------- playback ---------- */
 
 /** Playback that began inside the range ends at its end, so Play previews the clip. */
 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
 }
 
+/* A press that plays or pauses is answered in the middle of the picture too (VideoFlash). */
+const flash = ref<{ icon: string; n: number } | null>(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
@@ -290,10 +232,7 @@ function togglePlay() {
   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: number) {
   if (off.value) return
@@ -302,12 +241,29 @@ function step(seconds: number) {
   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))
 
+/* The window the component renders in: an LpFrame's own, inside one. */
+const frameWindow = () => nodeWindow(trackEl.value ?? videoEl.value!)
+
+/*
+ * Positions on the timeline glide to a value set from elsewhere and follow at
+ * once while something moves them continuously: the same split as the kit's
+ * sliders (SLIDER_GLIDE), over `left` and `width` here.
+ */
+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"
+/* The first placement, once the length is known, is not a change: it lands where it belongs instead of travelling there from zero. */
+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)
+
 /* ---------- timeline view ---------- */
 
 /* The narrowest view: a couple of seconds across still leaves frames a few pixels apart. */
@@ -329,7 +285,12 @@ function timeAt(clientX: number): number {
   return view.value.start + ((clientX - box.left) / box.width) * span.value
 }
 
-function zoomBy(factor: number, anchor = time.value) {
+/** Zoom around the playhead while it is in sight, else around the middle: a zoom must never carry the view off to somewhere else. */
+function zoomAnchor(): number {
+  const { start, end } = view.value
+  return time.value >= start && time.value <= end ? time.value : (start + end) / 2
+}
+function zoomBy(factor: number, anchor = zoomAnchor()) {
   if (!duration.value) return
   view.value = zoomView(view.value, anchor, factor, duration.value, MIN_SPAN)
 }
@@ -337,6 +298,15 @@ function fit() {
   view.value = { start: 0, end: duration.value }
 }
 
+/* A wheel or touchpad sends a stream of small steps: each follows at once, as a drag does, rather than easing after the last. */
+const wheeling = ref(false)
+let wheelTimer: ReturnType<typeof setTimeout> | undefined
+function markWheel() {
+  wheeling.value = true
+  clearTimeout(wheelTimer)
+  wheelTimer = setTimeout(() => (wheeling.value = false), 160)
+}
+
 function onWheel(event: WheelEvent) {
   if (!ready.value) return
   const dx = event.shiftKey ? event.deltaY : event.deltaX
@@ -344,12 +314,21 @@ function onWheel(event: WheelEvent) {
   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
+  /*
+   * A mouse wheel moves in notches (a line at a time, or a hundred pixels or
+   * so): each notch glides to its zoom like a button press. A touchpad or a
+   * pinch sends a stream of small steps that the view follows at once.
+   */
+  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)) : []))
@@ -359,9 +338,10 @@ const markDigits = computed(() => tickStep(span.value, trackWidth.value) < 1)
 
 const pointers = new Map<number, number>()
 let pinch: { distance: number; anchor: number } | null = null
+const pinching = ref(false)
 let edgeFrame = 0
 let lastX = 0
-let scrubbing = false
+const scrubbing = ref(false)
 
 function onHandleDown(end: 0 | 1, event: PointerEvent) {
   if (off.value || event.button !== 0) return
@@ -379,7 +359,7 @@ function onHandleDown(end: 0 | 1, event: PointerEvent) {
     },
     end: () => {
       dragging.value = null
-      if (edgeFrame) cancelAnimationFrame(edgeFrame)
+      if (edgeFrame) frameWindow().cancelAnimationFrame(edgeFrame)
       edgeFrame = 0
       emit("change", local.value)
     },
@@ -399,8 +379,8 @@ function edgeScroll() {
   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()
@@ -414,16 +394,17 @@ function onTrackDown(event: PointerEvent) {
   ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
   pointers.set(event.pointerId, event.clientX)
   if (pointers.size === 2) {
-    scrubbing = false
+    scrubbing.value = false
     const [a, b] = [...pointers.values()] as [number, number]
     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<HTMLElement>("[data-lp-playhead]")?.focus({ preventScroll: true })
   pause()
-  scrubbing = true
+  scrubbing.value = true
   lastX = event.clientX
   seek(timeAt(event.clientX))
 }
@@ -437,15 +418,18 @@ function onTrackMove(event: PointerEvent) {
     pinch.distance = distance
     return
   }
-  if (!scrubbing) return
+  if (!scrubbing.value) return
   lastX = event.clientX
   seek(timeAt(event.clientX))
   edgeScroll()
 }
 function onTrackUp(event: PointerEvent) {
   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
 }
 
 /* The overview: press or drag to centre the view there. */
@@ -493,10 +477,44 @@ watch(stills, (list) => {
   }, 120)
 })
 
-function mountFrame(key: string, el: Element | null) {
+/*
+ * A still in its tile. Until its own frame is taken, the tile shows a copy of
+ * the nearest one already taken (from any zoom), so zooming never empties the
+ * strip; the real frame then fades in over that stand-in.
+ */
+function mountFrame(still: { key: string; time: number }, el: Element | null) {
   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 copy = el.ownerDocument.createElement("canvas")
+  copy.width = near.width
+  copy.height = near.height
+  copy.getContext("2d")?.drawImage(near, 0, 0)
+  copy.dataset.lpStandIn = ""
+  el.append(copy)
+}
+const frameTimes = new Map<string, number>()
+function nearestFrame(t: number): HTMLCanvasElement | undefined {
+  let best: HTMLCanvasElement | undefined
+  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
 }
 
 /* ---------- region ---------- */
@@ -555,6 +573,14 @@ function onKeydown(event: KeyboardEvent) {
   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
+  // Another slider inside (the volume) owns its arrows.
+  if (target.getAttribute("role") === "slider" && end === null && target.dataset.lpPlayhead === undefined) 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: Record<string, number> = { ArrowLeft: -big, ArrowRight: big, ArrowDown: -big, ArrowUp: big, PageDown: -10, PageUp: 10 }
   if (event.key === " " && target.tagName !== "BUTTON") {
@@ -586,7 +612,7 @@ function onKeydown(event: KeyboardEvent) {
 
 const drafts = ref<[string | null, string | null]>([null, null])
 const invalid = ref<[boolean, boolean]>([false, false])
-const fieldText = (end: 0 | 1) => drafts.value[end] ?? formatClipTime(local.value[end], true)
+const fieldText = (end: 0 | 1) => drafts.value[end] ?? formatClipTime(local.value[end], "fixed")
 function onFieldInput(end: 0 | 1, value: string) {
   drafts.value[end] = value
   invalid.value[end] = false
@@ -618,6 +644,8 @@ 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 as string)
@@ -629,12 +657,7 @@ function startSampler() {
 watch(
   () => props.src,
   () => {
-    duration.value = 0
-    failure.value = null
-    time.value = 0
     frames.value = new Map()
-    seekBusy = false
-    seekTarget = null
     void nextTick(startSampler)
   },
 )
@@ -643,14 +666,12 @@ onMounted(startSampler)
 onBeforeUnmount(() => {
   sampler?.dispose()
   clearTimeout(stillTimer)
-  if (frame) cancelAnimationFrame(frame)
-  if (edgeFrame) cancelAnimationFrame(edgeFrame)
-  // Stop both streams from fetching on: an element that is merely detached keeps its connection.
-  for (const el of [videoEl.value, samplerEl.value]) {
-    if (!el) continue
-    el.pause()
-    el.removeAttribute("src")
-    el.load()
+  if (edgeFrame) frameWindow().cancelAnimationFrame(edgeFrame)
+  // The stills' element too: one merely detached keeps its connection open.
+  const stillsEl = samplerEl.value
+  if (stillsEl) {
+    stillsEl.removeAttribute("src")
+    stillsEl.load()
   }
 })
 
@@ -662,23 +683,99 @@ defineExpose({
   currentTime: () => time.value,
 })
 
-const handleText = (t: number) => formatClipTime(t, true)
+/* ---------- right-click ---------- */
+
+const { copy } = useClipboard()
+const { error: toastError } = useToast()
+
+/* The picture's own menu: what is done to the video and to the frame on screen. */
+const videoMenu = computed<ContextMenuItemDef[]>(() => {
+  if (!ready.value || props.disabled) return []
+  const items: ContextMenuItemDef[] = [
+    { 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)
+}
+
+/** Where the timeline's menu was opened: the moment under the pointer. */
+const menuAt = ref(0)
+function onTimeContextMenu(event: MouseEvent) {
+  const overview = (event.target as Element).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))
+}
+/* The timeline's menu: what is done at a moment. */
+const timeMenu = computed<ContextMenuItemDef[]>(() => {
+  if (!ready.value || props.disabled) return []
+  const at = menuAt.value
+  const items: ContextMenuItemDef[] = [
+    {
+      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: number) => formatClipTime(t, "fixed")
+const widest = computed(() => widestClipTime(duration.value))
+const leftOf = (left: string, max: string) => 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))
+    ? 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)))
 </script>
 
 <template>
   <div :class="rootClass" v-bind="rest" :data-disabled="disabled || undefined" @keydown="onKeydown">
-    <!-- The picture. Its own controls are off: the region is drawn on it, and the keys are the editor's. -->
-    <div
-      ref="stageEl"
-      class="relative aspect-video w-full overflow-hidden rounded-card bg-black"
-    >
+    <!--
+      The picture. Its own controls are off: the region is drawn on it, and the
+      keys are the editor's. A right-click here is about the picture (play, the
+      sound, the frame); one on the timeline below is about a moment.
+    -->
+    <!-- The menu's trigger is a wrapper of its own: reka's as-child puts its ref on the element it wraps, which would take the stage's. -->
+    <LpContextMenu :items="videoMenu" :title="clockTitle" always>
+    <div>
+    <div ref="stageEl" class="relative aspect-video w-full overflow-hidden rounded-card bg-black">
       <video
         ref="videoEl"
         class="absolute inset-0 size-full object-contain"
@@ -686,15 +783,10 @@ const leftText = computed(() =>
         :poster="poster"
         preload="metadata"
         playsinline
-        :muted="muted"
-        @loadedmetadata="onMetadata"
-        @durationchange="onDurationChange"
-        @seeked="onSeeked"
-        @play="onPlay"
-        @pause="onPause"
-        @error="onError"
+        v-on="media.listeners"
         @click="!regionSelect && togglePlay()"
       />
+      <VideoFlash :flash="flash" />
       <!-- Stills come from a second element: seeking this one would move the picture under the person. -->
       <video
         ref="samplerEl"
@@ -706,54 +798,76 @@ const leftText = computed(() =>
         aria-hidden="true"
         tabindex="-1"
       />
-      <div
-        v-if="regionSelect && ready"
-        class="absolute cursor-crosshair touch-none"
-        :style="{ left: `${picture.x}px`, top: `${picture.y}px`, width: `${picture.width}px`, height: `${picture.height}px` }"
-        data-lp-region-layer
-        @pointerdown="onRegionDown('draw', $event)"
-      >
+      <Transition v-bind="FADE">
         <div
-          v-if="shownRegion"
-          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="{ left: `${shownRegion.x * 100}%`, top: `${shownRegion.y * 100}%`, width: `${shownRegion.w * 100}%`, height: `${shownRegion.h * 100}%` }"
-          tabindex="0"
-          role="group"
-          :aria-label="text.region"
-          data-lp-region
-          @pointerdown="onRegionDown('move', $event)"
-          @keydown="onRegionKey"
+          v-if="regionSelect && ready"
+          class="absolute cursor-crosshair touch-none"
+          :style="{ left: `${picture.x}px`, top: `${picture.y}px`, width: `${picture.width}px`, height: `${picture.height}px` }"
+          data-lp-region-layer
+          @pointerdown="onRegionDown('draw', $event)"
         >
-          <span
-            v-for="corner in (['nw', 'ne', 'sw', 'se'] as const)"
-            :key="corner"
-            class="absolute grid size-6 place-items-center pointer-coarse:size-11"
-            :class="[
-              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"
-            @pointerdown="onRegionDown(corner, $event)"
-          >
-            <span class="size-3 rounded-pill border-2 border-white bg-brand shadow" />
-          </span>
+          <!-- Comes in under the pointer that draws it (no growing in: the drag already does that) and leaves with the dimming around it. -->
+          <Transition v-bind="FADE_SCALE" :enter-from-class="draft ? 'opacity-0' : FADE_SCALE.enterFromClass">
+            <div
+              v-if="shownRegion"
+              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 ? '' : undefined"
+              :style="{ left: `${shownRegion.x * 100}%`, top: `${shownRegion.y * 100}%`, width: `${shownRegion.w * 100}%`, height: `${shownRegion.h * 100}%` }"
+              tabindex="0"
+              role="group"
+              :aria-label="text.region"
+              data-lp-region
+              @pointerdown="onRegionDown('move', $event)"
+              @keydown="onRegionKey"
+            >
+              <span
+                v-for="corner in (['nw', 'ne', 'sw', 'se'] as const)"
+                :key="corner"
+                class="absolute grid size-6 place-items-center pointer-coarse:size-11"
+                :class="[
+                  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"
+                @pointerdown="onRegionDown(corner, $event)"
+              >
+                <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)]" />
+              </span>
+            </div>
+          </Transition>
         </div>
+      </Transition>
+      <Transition v-bind="FADE">
+        <span
+          v-if="regionSelect && ready && !shownRegion && !playing && !disabled"
+          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"
+        >{{ text.regionHint }}</span>
+      </Transition>
+      <!-- The app's own actions over the picture's top right corner: a bin that takes the video back out of a dropzone, say. -->
+      <div v-if="$slots.actions" class="absolute top-2 right-2 flex gap-0.5 rounded-control bg-black/45">
+        <slot name="actions" :button-class="OVERLAY_BUTTON" />
       </div>
-      <div
-        v-if="failure"
-        role="alert"
-        class="absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center text-sm text-white/80"
-      >
-        <LpIcon name="lucide:video-off" :size="32" />
-        <p>{{ failure === "unsupported" ? text.unsupported : text.failed }}</p>
-      </div>
+      <Transition v-bind="FADE">
+        <div
+          v-if="failure"
+          role="alert"
+          class="absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center text-sm text-white/80"
+        >
+          <LpIcon name="lucide:video-off" :size="32" />
+          <p>{{ failure === "unsupported" ? text.unsupported : text.failed }}</p>
+        </div>
+      </Transition>
     </div>
+    </div>
+    </LpContextMenu>
 
-    <!-- Transport and zoom. -->
-    <div class="flex flex-wrap items-center gap-1">
-      <LpButton size="sm" variant="ghost" square :disabled="off" :aria-label="playing ? text.pause : text.play" :title="playing ? text.pause : text.play" @click="togglePlay">
-        <LpIcon :name="playing ? 'lucide:pause' : 'lucide:play'" :size="16" />
+    <!-- Transport, sound and zoom. One line at every width: a row that wraps re-wraps as its numbers change. -->
+    <div class="flex items-center gap-0.5">
+      <LpButton size="sm" variant="ghost" square :disabled="off" :aria-label="wantsPlay ? text.pause : text.play" :title="wantsPlay ? text.pause : text.play" @click="togglePlay">
+        <Transition v-bind="ICON_SWAP">
+          <LpIcon :key="wantsPlay ? 'pause' : 'play'" :name="wantsPlay ? 'lucide:pause' : 'lucide:play'" :size="16" />
+        </Transition>
       </LpButton>
       <LpButton size="sm" variant="ghost" square :disabled="off" :aria-label="text.stepBack" :title="text.stepBack" @click="step(-frameStep)">
         <LpIcon name="lucide:step-back" :size="16" />
@@ -761,38 +875,45 @@ const leftText = computed(() =>
       <LpButton size="sm" variant="ghost" square :disabled="off" :aria-label="text.stepForward" :title="text.stepForward" @click="step(frameStep)">
         <LpIcon name="lucide:step-forward" :size="16" />
       </LpButton>
-      <span class="px-1.5 font-mono text-xs text-muted tabular-nums" data-lp-clock>
-        <span class="text-ink">{{ formatClipTime(time, true) }}</span> / {{ formatClipTime(duration, true) }}
+      <span class="min-w-0 truncate px-1.5 font-mono text-xs text-muted" data-lp-clock>
+        <SteadyText class="text-ink" :text="formatClipTime(time, 'fixed')" :widest="widest" /> / {{ formatClipTime(duration, "fixed") }}
       </span>
-      <LpButton size="sm" variant="ghost" square :disabled="!ready" :aria-label="muted ? text.unmute : text.mute" :title="muted ? text.unmute : text.mute" :aria-pressed="muted" @click="toggleMute">
-        <LpIcon :name="muted ? 'lucide:volume-x' : 'lucide:volume-2'" :size="16" />
-      </LpButton>
+      <VideoVolume :media="media" :labels="text" :disabled="!ready" />
       <span class="flex-1" />
+      <Transition v-bind="FADE_SCALE">
+        <LpButton v-if="zoomed" size="sm" variant="ghost" square :disabled="off" :aria-label="text.zoomFit" :title="text.zoomFit" @click="fit">
+          <LpIcon name="lucide:maximize-2" :size="16" />
+        </LpButton>
+      </Transition>
       <LpButton size="sm" variant="ghost" square :disabled="off || !zoomed" :aria-label="text.zoomOut" :title="text.zoomOut" @click="zoomBy(0.5)">
         <LpIcon name="lucide:zoom-out" :size="16" />
       </LpButton>
       <LpButton size="sm" variant="ghost" square :disabled="off || !canZoomIn" :aria-label="text.zoomIn" :title="text.zoomIn" @click="zoomBy(2)">
         <LpIcon name="lucide:zoom-in" :size="16" />
       </LpButton>
-      <LpButton size="sm" variant="ghost" square :disabled="off || !zoomed" :aria-label="text.zoomFit" :title="text.zoomFit" @click="fit">
-        <LpIcon name="lucide:maximize-2" :size="16" />
-      </LpButton>
     </div>
 
-    <!-- Ruler, stills, range and playhead. -->
-    <div class="relative" @wheel="onWheel">
-      <div class="relative h-4 overflow-hidden text-[10px] text-muted tabular-nums" aria-hidden="true">
+    <!--
+      Ruler, stills, range and playhead. Positions glide when they are set from
+      elsewhere (a key, a typed time, a zoom button) and follow the pointer with
+      no delay while it moves them, as the kit's sliders do. Marks and stills
+      that come into view or leave it fade rather than blink.
+    -->
+    <LpContextMenu :items="timeMenu" :title="menuTitle" always>
+    <div class="relative" :class="TRACK_GLIDE" :data-live="live || undefined" @wheel="onWheel" @contextmenu="onTimeContextMenu">
+      <TransitionGroup tag="div" class="relative h-4 overflow-hidden text-[10px] text-muted tabular-nums" aria-hidden="true" v-bind="FADE">
         <span
           v-for="m in marks"
           :key="m"
           class="absolute top-0 whitespace-nowrap"
           :class="xOf(m) < 16 ? '' : xOf(m) > trackWidth - 16 ? '-translate-x-full' : '-translate-x-1/2'"
           :style="{ left: pct(m) }"
+          data-glide
         >{{ formatClipTime(m, markDigits) }}</span>
-      </div>
+      </TransitionGroup>
       <div
         ref="trackEl"
-        class="relative h-14 touch-none rounded-control bg-surface-soft"
+        class="relative h-14 touch-none rounded-control bg-surface-soft transition-opacity duration-(--duration-fast) motion-reduce:transition-none"
         :class="off ? 'opacity-60' : 'cursor-text'"
         :aria-label="text.timeline"
         role="group"
@@ -802,53 +923,63 @@ const leftText = computed(() =>
         @pointercancel="onTrackUp"
       >
         <div class="absolute inset-0 overflow-hidden rounded-control">
-          <div
-            v-for="s in stills"
-            :key="s.key"
-            :ref="(el) => mountFrame(s.key, el as Element | null)"
-            class="lp-trim-still absolute inset-y-0 overflow-hidden border-r border-black/20 [&>canvas]:size-full [&>canvas]:object-cover"
-            :class="{ 'lp-trim-still-in': !reduced }"
-            :style="{ left: s.left, width: s.width }"
-            :data-lp-still="frames.has(s.key) ? 'ready' : 'pending'"
-          />
+          <TransitionGroup v-bind="FADE">
+            <div
+              v-for="s in stills"
+              :key="s.key"
+              :ref="(el) => mountFrame(s, el as Element | null)"
+              class="absolute inset-y-0 overflow-hidden [&>canvas]:absolute [&>canvas]:inset-0 [&>canvas]:size-full [&>canvas]:object-cover"
+              :class="{ 'lp-trim-still-in': !reduced }"
+              :style="{ left: s.left, width: s.width }"
+              :data-lp-still="frames.has(s.key) ? 'ready' : 'pending'"
+              data-glide
+            />
+          </TransitionGroup>
           <!-- What falls outside the clip is dimmed, not hidden: it is still where the clip could move. -->
-          <div class="absolute inset-y-0 left-0 bg-black/55" :style="{ width: `${Math.max(0, xOf(local[0]))}px` }" />
-          <div class="absolute inset-y-0 right-0 bg-black/55" :style="{ left: `${Math.min(trackWidth, Math.max(0, xOf(local[1])))}px` }" />
+          <div class="absolute inset-y-0 left-0 bg-black/55" :style="{ width: pct(local[0]) }" data-glide />
+          <div class="absolute inset-y-0 right-0 bg-black/55" :style="{ left: pct(local[1]) }" data-glide />
         </div>
+        <!-- The range and its grips arrive with the video's length, faded in rather than popped onto the strip. -->
         <div
-          v-if="ready"
-          class="pointer-events-none absolute inset-y-0 border-y-2 border-brand"
-          :style="{ left: pct(local[0]), width: `${(clipLength / span) * 100}%` }"
-          data-lp-range
-        />
-        <div
-          v-for="end in ([0, 1] as const)"
-          v-show="ready"
-          :key="end"
-          class="group/handle absolute inset-y-0 z-10 flex w-6 touch-none items-stretch outline-none pointer-coarse:w-11"
-          :class="[end === 0 ? 'justify-start' : '-translate-x-full justify-end', off ? '' : 'cursor-ew-resize']"
-          :style="{ left: pct(local[end]) }"
-          role="slider"
-          :tabindex="off ? -1 : 0"
-          :aria-label="end === 0 ? text.start : text.end"
-          :aria-valuemin="0"
-          :aria-valuemax="Math.round(duration * 1000) / 1000"
-          :aria-valuenow="local[end]"
-          :aria-valuetext="handleText(local[end])"
-          :aria-disabled="off || undefined"
-          :data-lp-handle="end"
-          @pointerdown="onHandleDown(end, $event)"
+          class="pointer-events-none absolute inset-0 transition-opacity duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none"
+          :class="ready ? '' : 'opacity-0'"
         >
-          <span
-            class="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"
-            :class="end === 0 ? 'rounded-l-control' : 'rounded-r-control'"
+          <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="{ left: pct(local[0]), width: `${(clipLength / span) * 100}%` }"
+            data-lp-range
+            data-glide
+          />
+          <!-- A grip as on LpChart's overview: narrow and neutral, lit only while it is held, hovered or focused. -->
+          <div
+            v-for="end in ([0, 1] as const)"
+            :key="end"
+            class="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"
+            :class="[off ? '' : 'cursor-ew-resize', ready ? 'pointer-events-auto' : '']"
+            :style="{ left: pct(local[end]) }"
+            role="slider"
+            :tabindex="off ? -1 : 0"
+            :aria-label="end === 0 ? text.start : text.end"
+            :aria-valuemin="0"
+            :aria-valuemax="Math.round(duration * 1000) / 1000"
+            :aria-valuenow="local[end]"
+            :aria-valuetext="handleText(local[end])"
+            :aria-disabled="off || undefined"
+            :aria-hidden="ready ? undefined : 'true'"
+            :data-lp-handle="end"
+            :data-active="dragging === end || undefined"
+            data-glide
+            @pointerdown="onHandleDown(end, $event)"
           >
-            <span class="h-5 w-0.5 rounded-pill bg-white/85" />
-          </span>
+            <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"
+            >
+              <span class="h-4 w-px rounded-pill bg-black/35" />
+            </span>
+          </div>
         </div>
         <div
-          v-show="ready && time >= view.start && time <= view.end"
-          class="absolute -top-4 bottom-0 z-20 w-0 outline-none"
+          class="group/playhead absolute -top-4 bottom-0 z-20 w-0 outline-none"
           :style="{ left: pct(time) }"
           role="slider"
           :tabindex="off ? -1 : 0"
@@ -858,64 +989,75 @@ const leftText = computed(() =>
           :aria-valuenow="Math.round(time * 1000) / 1000"
           :aria-valuetext="handleText(time)"
           data-lp-playhead
+          :data-glide="playing ? undefined : ''"
         >
-          <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)]" />
-          <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" />
+          <!-- Fades out past either edge of a zoomed view instead of vanishing there. -->
+          <span
+            class="pointer-events-none absolute inset-0 transition-opacity duration-(--duration-fast) motion-reduce:transition-none"
+            :class="ready && time >= view.start && time <= view.end ? '' : 'opacity-0'"
+          >
+            <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)]" />
+            <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" />
+          </span>
         </div>
       </div>
-      <!-- The whole video, for finding the way back while zoomed in. -->
-      <div
-        v-if="zoomed"
-        class="relative mt-1.5 h-2 cursor-pointer touch-none rounded-pill bg-surface-soft"
-        :aria-label="text.overview"
-        role="presentation"
-        data-lp-overview
-        @pointerdown="onOverviewDown"
-      >
-        <span class="absolute inset-y-0 rounded-pill bg-brand/45" :style="{ left: `${(local[0] / duration) * 100}%`, width: `${(clipLength / duration) * 100}%` }" />
-        <span class="absolute -inset-y-0.5 rounded-pill border-2 border-ink/70" :style="{ left: `${(view.start / duration) * 100}%`, width: `${(span / duration) * 100}%` }" />
-      </div>
+      <!-- The whole video while zoomed in, drawn like LpChart's overview: the window it shows, the clip within it. -->
+      <Transition v-bind="FADE">
+        <div
+          v-if="zoomed"
+          class="relative mt-1.5 h-2.5 cursor-pointer touch-none rounded-pill bg-surface-soft"
+          :aria-label="text.overview"
+          role="presentation"
+          data-lp-overview
+          @pointerdown="onOverviewDown"
+        >
+          <span class="absolute inset-y-0.5 rounded-pill bg-line-strong" :style="{ left: `${(local[0] / duration) * 100}%`, width: `${(clipLength / duration) * 100}%` }" data-glide />
+          <span class="absolute inset-y-0 rounded-pill border border-ink/60" :style="{ left: `${(view.start / duration) * 100}%`, width: `${(span / duration) * 100}%` }" data-glide />
+        </div>
+      </Transition>
     </div>
+    </LpContextMenu>
 
-    <!-- Exact times, typed. -->
-    <div class="flex flex-wrap items-end gap-x-3 gap-y-2 text-xs">
-      <label v-for="end in ([0, 1] as const)" :key="end" class="flex flex-col gap-1">
-        <span class="text-muted">{{ end === 0 ? text.start : text.end }}</span>
-        <LpInput
-          size="sm"
-          class="w-28 font-mono tabular-nums"
-          :model-value="fieldText(end)"
-          :disabled="off"
-          :invalid="invalid[end]"
-          :title="invalid[end] ? text.invalidTime : undefined"
-          inputmode="decimal"
-          spellcheck="false"
-          autocomplete="off"
-          :data-lp-time="end"
-          @update:model-value="onFieldInput(end, $event)"
-          @blur="commitField(end)"
-          @keydown.enter.prevent="commitField(end)"
-          @keydown.esc="revertField(end)"
-        />
-      </label>
-      <div class="flex flex-col gap-1 pb-1.5">
+    <!-- Exact times, typed, and the clip's length. Every value holds its width, so nothing on the line moves as they change. -->
+    <div class="flex flex-wrap items-end gap-x-3 gap-y-2">
+      <LpInput
+        v-for="end in ([0, 1] as const)"
+        :key="end"
+        size="sm"
+        class="w-28"
+        :label="end === 0 ? text.start : text.end"
+        :model-value="fieldText(end)"
+        :disabled="off"
+        :invalid="invalid[end]"
+        :title="invalid[end] ? text.invalidTime : undefined"
+        inputmode="decimal"
+        spellcheck="false"
+        autocomplete="off"
+        :data-lp-time="end"
+        @update:model-value="onFieldInput(end, $event)"
+        @blur="commitField(end)"
+        @keydown.enter.prevent="commitField(end)"
+        @keydown.esc="revertField(end)"
+      />
+      <div class="flex flex-col gap-0.5 pb-0.5 text-xs">
         <span class="text-muted">{{ text.length }}</span>
-        <span class="font-mono text-sm text-ink tabular-nums" data-lp-length>{{ formatClipTime(clipLength, true) }}</span>
+        <span class="font-mono text-sm text-ink" data-lp-length><SteadyText :text="formatClipTime(clipLength, 'fixed')" :widest="widest" /></span>
       </div>
-      <span v-if="leftText" class="pb-2 text-muted" data-lp-left>{{ leftText }}</span>
+      <Transition v-bind="FADE">
+        <span v-if="leftText" class="pb-1 font-mono text-xs text-muted" data-lp-left><SteadyText :text="leftText" :widest="widestLeft" /></span>
+      </Transition>
       <span class="flex-1" />
-      <template v-if="regionSelect">
-        <LpButton v-if="region" size="sm" variant="outline" :disabled="disabled" @click="emit('update:region', null)">
+      <Transition v-bind="FADE_SCALE">
+        <LpButton v-if="regionSelect" size="sm" variant="outline" :disabled="disabled || !region" @click="emit('update:region', null)">
           <LpIcon name="lucide:x" :size="14" />{{ text.regionClear }}
         </LpButton>
-        <span v-else class="pb-2 text-muted">{{ text.regionHint }}</span>
-      </template>
+      </Transition>
     </div>
   </div>
 </template>
 
 <style scoped>
-.lp-trim-still-in > :deep(canvas) {
+.lp-trim-still-in > :deep(canvas:not([data-lp-stand-in])) {
   animation: lp-trim-still var(--duration-medium) var(--ease-emphasized);
 }
 @keyframes lp-trim-still {