cursedbelt 0.0.0 → 2.3.0

package/dist/react/media/FocusViewer.js

@@ -0,0 +1,632 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./focusViewer.css";
+/**
+ * The focus viewer — look closely at PART of a video, and keep what you find.
+ *
+ * 🔴 Lifted out of `apps/collections` on 2026-08-20 (unit 15). The owner, 2026-08-14:
+ * *"the binary-server UI media player isn't allowing the features like the collections app
+ * has but I want it to — showing a clip when I hover on the timeline and letting me take
+ * screenshots with selections and zoom … Potentially it could apply to all apps with
+ * videos."* It does now: this file, `videoRegion.ts` and `videoEnhance.ts` are cursedbelt's,
+ * and the two apps that show a video mount the same one.
+ *
+ * ── What is NOT here, and why the prop surface looks like it does ──────────────────────
+ * Nothing in this file knows what a collection, an album or a folder is. The host supplies
+ * three things and keeps every one of its own concepts:
+ *   · `snapshots` — the stills already kept beside this video, as {@link FocusSnapshot}
+ *   · `onSaveSnapshot` — where a new one goes. Omit it and Save is not offered at all,
+ *     which is the correct surface for a host with nowhere to put one.
+ *   · `destination` — an arbitrary node in the action row, for a host that wants to choose
+ *     WHERE (collections offers its folder picker there; binary-server offers nothing).
+ * Everything else — geometry, gestures, keyboard, the canvas capture — is the same code for
+ * every consumer, which is the entire point of the lift.
+ *
+ * Owner's asks, 2026-08-13, in their words:
+ *   · *"allow pausing a video and taking a snapshot of the full video or a subsection"*
+ *   · *"turning on a selector dragging a square out (this is like how mac screenshot taker
+ *     lets you capture a part of the screen), then the video size goes to that shape and only
+ *     shows what's in it but enlarged to fit the viewer full size"*
+ *   · *"plus and minus icons to zoom in and out of the center in normal view or a selected
+ *     view and while paused or playing"*
+ *   · *"keep the photo associated in the UI with the video it's from … see them under the
+ *     video with times where I click them and it jumps to that spot … If the video was
+ *     playing when I click one it keeps playing after jumping"*
+ *   · *"if a video is playing and I hold down on the timeline and drag it around, have the
+ *     video skip around with my drag timeline position"*
+ *
+ * ── 🔴 Why this is its own surface and not a patch on the gallery player ────────────────
+ * The gallery stage uses Vidstack, which owns its own control bar, its own gesture layer and
+ * its own fullscreen. Every feature above wants to CHANGE what the video element shows
+ * (crop, scale, offset) and to intercept the timeline, so building it inside Vidstack means
+ * fighting a component for control of the thing it exists to control. A plain `<video>` with
+ * this app's own chrome is smaller, does exactly what was asked, and leaves the ordinary
+ * watch experience — where Vidstack's polish is worth having — completely untouched.
+ *
+ * ── The idea that keeps it small ───────────────────────────────────────────────────────
+ * A drawn selection and a zoom level are ONE thing: the region being looked at. `+`/`−`
+ * narrow or widen it, a marquee replaces it, a drag pans it, and a snapshot crops to it.
+ * Every requested behavior falls out of that single piece of state — see `lib/videoRegion.ts`,
+ * where the geometry lives as pure functions with tests.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Alert } from "../components/Alert";
+import { Button } from "../components/Button";
+import { NativeSelect } from "../components/NativeSelect";
+import { Tooltip } from "../components/Tooltip";
+import { MediaResizeBar, MediaResizeCorner, useMediaResize } from "./MediaResize";
+import { FOCUS_HEIGHT_KEY } from "./stageResize";
+import { PictureControls } from "./PictureControls";
+import { isPlayPauseSpace } from "./playerSpaceKey";
+import { PLAYBACK_RATES } from "./VideoPlayer";
+import { FULL_REGION, MAX_ZOOM, composeSelection, fitBox, isFullRegion, normalizeRect, panRegion, regionAtZoom, regionLayout, regionPixels, regionZoom, stageAspectFor, zoomRegion, } from "./videoRegion";
+import { NO_ENHANCE, UPSCALE_FACTORS, filterString, isEnhanced, readEnhance, snapshotSize, writeEnhance, } from "./videoEnhance";
+/** `m:ss`, or `h:mm:ss` past the hour. Local so this module has no app dependency. */
+function formatDuration(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return "";
+    const whole = Math.floor(seconds);
+    const h = Math.floor(whole / 3600);
+    const m = Math.floor((whole % 3600) / 60);
+    const s = whole % 60;
+    const mm = h > 0 ? String(m).padStart(2, "0") : String(m);
+    return `${h > 0 ? `${h}:` : ""}${mm}:${String(s).padStart(2, "0")}`;
+}
+/** How much one press of `+` closes in. Small enough to creep up on a detail. */
+const ZOOM_STEP = 1.25;
+/** One frame at 30 fps — see `stepFrame` for why this is a constant and not measured. */
+const FRAME_STEP_SECONDS = 1 / 30;
+export function FocusViewer({ videoUrl, title, startAt = 0, durationSeconds, snapshots = [], onSaveSnapshot, destination, onClose, }) {
+    const videoRef = useRef(null);
+    const viewportRef = useRef(null);
+    /*
+     * ── Dragging the picture bigger ───────────────────────────────────────────────────
+     * Owner, 2026-08-25: *"cb media players should allow dragging to resize in apps like
+     * collections but it is not there."* It was on the gallery stage and nowhere else, and
+     * this — the viewer you actually take screenshots in — was a fixed `62vh`.
+     *
+     * The two elements are held as STATE, not only as refs, because the shared hook measures
+     * them with a `ResizeObserver` and a ref's mutation does not re-run an effect.
+     */
+    const [rootEl, setRootEl] = useState(null);
+    const [viewportEl, setViewportEl] = useState(null);
+    /**
+     * 🔴 The FRAME is what every pointer coordinate is measured against, not the viewport.
+     *
+     * The frame is sized to exactly the picture (see `fitBox`), so a fraction of the frame IS
+     * a fraction of the region — with no letterbox bars in between to make the two disagree.
+     * Measuring against the outer box instead is precisely the class of bug that made a
+     * marquee over the middle land off to one side.
+     */
+    const frameRef = useRef(null);
+    const [region, setRegion] = useState(FULL_REGION);
+    const [selecting, setSelecting] = useState(false);
+    /** The marquee being dragged, in 0–1 of the stage. Null when not drawing one. */
+    const [marquee, setMarquee] = useState(null);
+    const [playing, setPlaying] = useState(false);
+    const [position, setPosition] = useState(0);
+    const [duration, setDuration] = useState(durationSeconds ?? 0);
+    /** Decoded frame size — the picture's shape is derived from it, so it must be state. */
+    const [source, setSource] = useState({ width: 0, height: 0 });
+    /** The space available for the picture, measured. See `fitBox` for why it is not CSS. */
+    const [viewport, setViewport] = useState({
+        width: 0,
+        height: 0,
+    });
+    const [rate, setRate] = useState(1);
+    /** Brightness/contrast/saturation, remembered across visits. */
+    const [enhance, setEnhance] = useState(readEnhance);
+    /** How much bigger a saved snapshot is than the crop it came from. */
+    const [upscale, setUpscale] = useState(1);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [note, setNote] = useState(null);
+    /**
+     * Keep the measured viewport current.
+     *
+     * A `ResizeObserver` rather than a window `resize` listener: this box changes size for
+     * reasons that never fire a window resize — the controls below it wrapping onto a second
+     * line, the snapshot strip appearing after the first capture, a phone's address bar
+     * sliding away. Each of those would leave the picture the wrong size until something else
+     * happened to trigger a re-measure.
+     */
+    useEffect(() => {
+        const node = viewportRef.current;
+        if (!node)
+            return;
+        const measure = () => {
+            const box = node.getBoundingClientRect();
+            setViewport((current) => 
+            // Compared before setting: an observer that fires on every sub-pixel reflow would
+            // otherwise re-render the whole viewer continuously.
+            Math.abs(current.width - box.width) < 0.5 && Math.abs(current.height - box.height) < 0.5
+                ? current
+                : { width: box.width, height: box.height });
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    /**
+     * How tall the picture is allowed to get, measured rather than guessed.
+     *
+     * 🔴 The clamp is the feature, exactly as it is on the gallery stage: the stylesheet's
+     * `62vh` default is bounded *"so the transport, the tools and the snapshot strip stay on
+     * screen with it rather than below the fold"*, and an unbounded drag reintroduces that by
+     * hand. So the ceiling is the window MINUS this viewer's own chrome, and the chrome is a
+     * DIFFERENCE — the whole viewer's content height less the picture's — which stays correct
+     * when the controls wrap onto a second line or the snapshot strip appears, and cannot feed
+     * back into itself the way a share of the viewer's own height would.
+     */
+    const [chromePx, setChromePx] = useState(0);
+    useEffect(() => {
+        if (!rootEl || !viewportEl)
+            return;
+        const measure = () => {
+            const chrome = Math.max(0, rootEl.scrollHeight - viewportEl.getBoundingClientRect().height);
+            setChromePx((current) => (Math.abs(current - chrome) < 1 ? current : Math.round(chrome)));
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(rootEl);
+        observer.observe(viewportEl);
+        return () => observer.disconnect();
+    }, [rootEl, viewportEl]);
+    const { height: pictureHeight, handle: resizeHandle } = useMediaResize({
+        storageKey: FOCUS_HEIGHT_KEY,
+        containerPx: Math.max(0, (globalThis.innerHeight ?? 0) - chromePx),
+        frameEl: viewportEl,
+    });
+    // Keep the transport readout honest whatever moved the video — our own buttons, the
+    // keyboard, or the browser's own media keys.
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const sync = () => {
+            /*
+             * 🔴 While a drag is in progress the SLIDER owns the position, not the element.
+             *
+             * Seeking is asynchronous: setting `currentTime` returns immediately and the element
+             * reaches that time later, firing `timeupdate` along the way with values that are
+             * still behind the thumb. Feeding those back into `position` yanks the thumb
+             * backwards under the finger, which is why scrubbing appeared not to work at all —
+             * both while playing AND while paused, because the fight is with the seek, not with
+             * playback.
+             */
+            if (scrubbing.current)
+                return;
+            setPosition(video.currentTime);
+            setPlaying(!video.paused);
+            if (Number.isFinite(video.duration) && video.duration > 0)
+                setDuration(video.duration);
+            if (video.videoWidth && video.videoHeight)
+                setSource((current) => current.width === video.videoWidth && current.height === video.videoHeight
+                    ? current
+                    : { width: video.videoWidth, height: video.videoHeight });
+        };
+        for (const event of ["timeupdate", "play", "pause", "seeked", "loadedmetadata"])
+            video.addEventListener(event, sync);
+        return () => {
+            for (const event of ["timeupdate", "play", "pause", "seeked", "loadedmetadata"])
+                video.removeEventListener(event, sync);
+        };
+    }, []);
+    /**
+     * Land on the moment the gallery was showing.
+     *
+     * 🔴 On `loadedmetadata`, not on mount: `currentTime` is silently ignored before the
+     * element knows its duration, so setting it in an effect that runs at mount does nothing
+     * at all and the viewer opens at zero anyway — which looks exactly like the feature not
+     * being implemented.
+     */
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || startAt <= 0)
+            return;
+        const land = () => {
+            video.currentTime = startAt;
+            setPosition(startAt);
+        };
+        if (video.readyState >= 1)
+            land();
+        else
+            video.addEventListener("loadedmetadata", land, { once: true });
+        return () => video.removeEventListener("loadedmetadata", land);
+    }, [startAt]);
+    const seekTo = useCallback((seconds, keepPlaying) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const wasPlaying = keepPlaying ?? !video.paused;
+        video.currentTime = Math.max(0, seconds);
+        // 🔴 The owner's rule for the snapshot strip: *"If the video was playing when I click
+        // one it keeps playing after jumping to the spot."* Setting `currentTime` on a playing
+        // element does not pause it, but seeking a not-yet-buffered position can stall it, so
+        // the intent is re-asserted rather than assumed.
+        if (wasPlaying)
+            void video.play().catch(() => undefined);
+    }, []);
+    /**
+     * Drag the timeline to skip around LIVE.
+     *
+     * Owner's ask: *"if a video is playing and I hold down on the timeline and drag it around,
+     * have the video skip around with my drag timeline position instead of the way it keeps
+     * playing like normal."* A native range input already fires `input` continuously during a
+     * drag; what it does NOT do is stop the element from advancing underneath, so playback and
+     * the drag fight over `currentTime` and the thumb jumps back between moves. Pausing for the
+     * duration of the drag is what makes the picture follow the finger, and playback resumes on
+     * release only if it was running when the drag began.
+     */
+    const scrubbing = useRef(null);
+    const beginScrub = () => {
+        const video = videoRef.current;
+        if (!video || scrubbing.current)
+            return;
+        scrubbing.current = { wasPlaying: !video.paused };
+        // Paused, so the element stops advancing under the drag and the frame the seek lands
+        // on is the frame that stays on screen.
+        video.pause();
+        /*
+         * 🔴 The release is caught on the WINDOW, not on the slider.
+         *
+         * A range input's thumb is grabbed and then dragged well outside the control — that is
+         * the normal gesture, not an edge case — and `onPointerUp` on the element does not fire
+         * when the pointer is released elsewhere. The scrub state was then never cleared, so
+         * playback never resumed and every later `timeupdate` was still being suppressed: the
+         * player looked frozen after one drag.
+         */
+        window.addEventListener("pointerup", endScrub, { once: true });
+        window.addEventListener("pointercancel", endScrub, { once: true });
+    };
+    const endScrub = () => {
+        const state = scrubbing.current;
+        if (!state)
+            return;
+        scrubbing.current = null;
+        window.removeEventListener("pointerup", endScrub);
+        window.removeEventListener("pointercancel", endScrub);
+        const video = videoRef.current;
+        if (video)
+            setPosition(video.currentTime);
+        if (state.wasPlaying)
+            void video?.play().catch(() => undefined);
+    };
+    /**
+     * Step one frame.
+     *
+     * Owner's ask (2026-08-13): *"for screenshots allow a way to move frame by frame more
+     * easily to get the perfect spot."*
+     *
+     * 🔴 It PAUSES first, always. A frame step against a playing element is meaningless — the
+     * element is already moving, so the seek lands and playback immediately walks away from it,
+     * and the frame captured is not the frame that was nudged to.
+     *
+     * The step is 1/30 s rather than the clip's real frame interval, because nothing in the
+     * browser reports frame rate: `HTMLVideoElement` exposes duration and dimensions and no
+     * cadence at all. 30 fps is the common case and a step slightly finer than the true
+     * interval lands on the same frame twice rather than skipping one — which is the right way
+     * to be wrong when the goal is "get the perfect spot".
+     */
+    const stepFrame = (direction) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.pause();
+        const next = Math.min(Math.max(0, video.currentTime + direction * FRAME_STEP_SECONDS), duration || video.duration || Number.POSITIVE_INFINITY);
+        video.currentTime = next;
+        setPosition(next);
+    };
+    /** Seek as cheaply as the browser allows — `fastSeek` skips to the nearest keyframe, which
+     *  is what makes a drag feel like the picture is following the finger rather than
+     *  decoding every exact frame on the way past. */
+    const seekPreview = (video, seconds) => {
+        if (typeof video.fastSeek === "function" && scrubbing.current)
+            video.fastSeek(seconds);
+        else
+            video.currentTime = seconds;
+    };
+    /** Marquee: draw a box over the picture; on release it becomes the view. */
+    const onStagePointerDown = (event) => {
+        const frame = frameRef.current;
+        if (!frame)
+            return;
+        // 🔴 The FRAME's box, which is exactly the picture. See `frameRef`.
+        const box = frame.getBoundingClientRect();
+        if (box.width <= 0 || box.height <= 0)
+            return;
+        const at = (e) => ({
+            x: (e.clientX - box.left) / box.width,
+            y: (e.clientY - box.top) / box.height,
+        });
+        const start = at(event);
+        event.currentTarget.setPointerCapture(event.pointerId);
+        if (!selecting) {
+            // Not selecting ⇒ the drag PANS, which is the only sensible other meaning for a
+            // drag on a zoomed picture. At full frame there is no overflow and it is inert.
+            const from = region;
+            const onMove = (move) => {
+                const now = at(move);
+                setRegion(panRegion(from, -(now.x - start.x), -(now.y - start.y)));
+            };
+            const onUp = () => {
+                window.removeEventListener("pointermove", onMove);
+                window.removeEventListener("pointerup", onUp);
+            };
+            window.addEventListener("pointermove", onMove);
+            window.addEventListener("pointerup", onUp);
+            return;
+        }
+        const onMove = (move) => {
+            const now = at(move);
+            setMarquee({ x: start.x, y: start.y, w: now.x - start.x, h: now.y - start.y });
+        };
+        const onUp = (up) => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            const now = at(up);
+            const drawn = { x: start.x, y: start.y, w: now.x - start.x, h: now.y - start.y };
+            setMarquee(null);
+            // 🔴 Composed against the CURRENT view, never the whole frame — selecting inside an
+            // already-zoomed view must drill further in. `composeSelection` explains why, and
+            // its tests pin it.
+            const next = composeSelection(region, drawn);
+            if (next) {
+                setRegion(next);
+                setSelecting(false);
+            }
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+    };
+    const takeSnapshot = async (whole) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        setBusy(true);
+        setError(null);
+        setNote(null);
+        try {
+            const crop = regionPixels(whole ? FULL_REGION : region, {
+                width: video.videoWidth,
+                height: video.videoHeight,
+            });
+            if (!crop)
+                throw new Error("The video has not decoded a frame yet.");
+            // Native resolution of the CROP, so looking closer produces a bigger picture rather
+            // than an upscaled one — the point of the feature is detail, and re-encoding at the
+            // element's on-screen size would throw away exactly the pixels being sought.
+            const out = snapshotSize(crop, upscale);
+            const canvas = document.createElement("canvas");
+            canvas.width = out.width;
+            canvas.height = out.height;
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+                throw new Error("This browser cannot capture a frame.");
+            // 🔴 `ctx.filter` before `drawImage`, and the enhancement is baked into the stored
+            // bytes rather than recorded as metadata — a saved picture must look like what was
+            // on screen wherever it is opened next, including outside this app.
+            if (isEnhanced(enhance)) {
+                /*
+                 * 🔴 Feature-detected, and it SAYS SO when absent. `ctx.filter` is unsupported in
+                 * a few engines, and there it is a silent no-op — the snapshot would come out
+                 * unenhanced while the screen showed the adjustment, which is the exact
+                 * preview-lies-to-you failure this whole design avoids elsewhere. Better to save
+                 * the honest picture and name the gap than to quietly hand back the wrong one.
+                 */
+                if ("filter" in ctx)
+                    ctx.filter = filterString(enhance);
+                else
+                    setNote("This browser cannot bake picture adjustments into a saved image, so the snapshot is the unadjusted frame.");
+            }
+            // Resampling once, here, beats every later viewer scaling it up with its own
+            // defaults. It cannot invent detail — see the note in `lib/videoEnhance`.
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = "high";
+            try {
+                ctx.drawImage(video, crop.sx, crop.sy, crop.sw, crop.sh, 0, 0, out.width, out.height);
+            }
+            catch {
+                // `crossOrigin='anonymous'` on the element is what prevents this; if it is ever
+                // dropped, every capture fails here, at the very last step.
+                throw new Error("This frame could not be read — the video may be cross-origin.");
+            }
+            const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.92));
+            if (!blob)
+                throw new Error("The snapshot could not be encoded.");
+            // 🔴 The HOST decides where this goes and what to say about it. Everything above
+            // this line is the same for every consumer; everything below it is the app's, which
+            // is exactly where the seam belongs.
+            const saved = (await onSaveSnapshot?.(blob, { atSeconds: video.currentTime })) ?? {};
+            setNote(saved.message ??
+                (saved.duplicate
+                    ? "That exact frame was already saved — nothing added."
+                    : "Saved."));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "The snapshot could not be saved.");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    /**
+     * ← / → step one frame while the focus viewer is open.
+     *
+     * Bound to the window because the whole surface is the thing being used and nothing here
+     * holds focus in the ordinary case. Guarded against fields and against the timeline slider,
+     * whose own arrow-key behavior is a coarse seek the owner may still want — a step there
+     * would fight it, and `beginScrub`/`endScrub` already make that gesture work.
+     */
+    useEffect(() => {
+        const onKey = (event) => {
+            /*
+             * 🔴 Space is decided FIRST, by the fleet's one rule — `media/playerSpaceKey.ts`.
+             *
+             * It used to sit in the `else` chain below, behind a guard that stood down for any
+             * focused button. This viewer's transport is made of buttons, so the shortcut was off
+             * exactly where the hand had just been: press a control, then press Space, and the
+             * control fires again instead of playback toggling. Cancelling the KEYDOWN is what
+             * stops that, because a button activates on the keyup.
+             */
+            if (isPlayPauseSpace(event)) {
+                event.preventDefault();
+                event.stopPropagation();
+                const video = videoRef.current;
+                if (video) {
+                    if (video.paused)
+                        void video.play().catch(() => undefined);
+                    else
+                        video.pause();
+                }
+                return;
+            }
+            const target = event.target;
+            if (target?.isContentEditable === true ||
+                ["INPUT", "TEXTAREA", "SELECT"].includes(target?.tagName ?? "") ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.altKey ||
+                event.shiftKey)
+                return;
+            if (event.key === "ArrowRight") {
+                event.preventDefault();
+                stepFrame(1);
+            }
+            else if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                stepFrame(-1);
+            }
+        };
+        // Capture, so a focused control never sees the press first.
+        window.addEventListener("keydown", onKey, true);
+        return () => window.removeEventListener("keydown", onKey, true);
+    });
+    const layout = regionLayout(region);
+    /*
+     * 🔴 The PICTURE takes the region's shape, which is what makes a fraction of what you see
+     * and a fraction of the region the same number — see `stageAspectFor`. Without it a
+     * marquee over the centre of a letterboxed picture resolves to a region off to one side.
+     *
+     * 16/9 until the video reports its decoded size: a shape has to be chosen for the first
+     * paint, and this one is corrected on `loadedmetadata` a moment later.
+     */
+    const pictureAspect = stageAspectFor(source, region) ?? 16 / 9;
+    // Computed, not left to CSS. `fitBox` explains at length why that had to change.
+    const frame = fitBox(viewport, pictureAspect);
+    const zoom = regionZoom(region);
+    /*
+     * 🔴 Rendered IN PLACE, replacing the gallery — not floated over it.
+     *
+     * Owner, 2026-08-13: *"Make focus and snapshot use the same video player already going
+     * instead of popping up a little one in an overlay. The current one isn't functioning with
+     * the overlay."* They are describing two players existing at once: this viewer's controls
+     * sat over the gallery's Vidstack stage, which went on playing and ignored them. Even
+     * portalled to `<body>` that is a confusing surface — two transports, two timelines, one
+     * picture that responds to the wrong one.
+     *
+     * So the gallery does not render its stage at all while this is open (see `GalleryView`).
+     * There is exactly ONE video element on the page, it is this one, it sits where the
+     * gallery's player was, and it opens at the moment the player had reached. No overlay, no
+     * `position: fixed`, and therefore no way for an ancestor's `contain`/`filter`/`transform`
+     * to trap it — which is what broke the previous attempt.
+     */
+    return (_jsxs("div", { className: "inspector", ref: setRootEl, children: [_jsxs("div", { className: "inspector__head", children: [_jsx("h3", { children: title }), _jsx(Button, { onClick: onClose, tooltip: "Back to the gallery", variant: "ghost", children: "\u2039 Back" })] }), _jsxs("div", { className: "inspector__viewport", 
+                /* A dragged height overrides the stylesheet's `62vh` default — the same
+                   precedence the gallery stage gives a person's hand over a computed size.
+                   Double-click either grip to hand it back. */
+                style: pictureHeight === null ? undefined : { blockSize: `${pictureHeight}px` }, ref: (node) => {
+                    viewportRef.current = node;
+                    setViewportEl(node);
+                }, children: [_jsxs("div", { className: `inspector__frame${selecting ? " is-selecting" : ""}${isFullRegion(region) ? "" : " is-zoomed"}`, onPointerDown: onStagePointerDown, ref: frameRef, 
+                        // The measured box, in pixels. Exactly the picture — nothing else is inside it,
+                        // so there are no bars for a coordinate to be wrong by.
+                        style: { width: `${frame.width}px`, height: `${frame.height}px` }, children: [_jsx("video", { className: "inspector__video", crossOrigin: "anonymous", playsInline: true, preload: "metadata", ref: videoRef, src: videoUrl, style: {
+                                    // 🔴 The SAME string the snapshot uses on `ctx.filter` — see
+                                    // `lib/videoEnhance`. Previewing an adjustment with different code than
+                                    // the export is how the two come to disagree.
+                                    filter: filterString(enhance),
+                                    width: `${layout.widthPct}%`,
+                                    height: `${layout.heightPct}%`,
+                                    left: `${layout.leftPct}%`,
+                                    top: `${layout.topPct}%`,
+                                } }), marquee ? _jsx("span", { className: "inspector__marquee", style: marqueeStyle(marquee) }) : null] }), _jsx(MediaResizeCorner, { ...resizeHandle, label: "Picture height" })] }), _jsx(MediaResizeBar, { ...resizeHandle, label: "Picture height" }), _jsxs("div", { className: "inspector__transport", children: [_jsx(Button, { onClick: () => stepFrame(-1), tooltip: "Back one frame (\u2190)", variant: "ghost", children: "\u23F4|" }), _jsx(Button, { onClick: () => {
+                            const video = videoRef.current;
+                            if (!video)
+                                return;
+                            if (video.paused)
+                                void video.play().catch(() => undefined);
+                            else
+                                video.pause();
+                        }, tooltip: playing ? "Pause" : "Play", variant: "secondary", children: playing ? "❚❚" : "▶" }), _jsx(Button, { onClick: () => stepFrame(1), tooltip: "Forward one frame (\u2192)", variant: "ghost", children: "|\u23F5" }), _jsx("input", { "aria-label": "Position in the video", className: "inspector__timeline", max: Math.max(duration, 0.1), min: 0, 
+                        // `input` fires continuously through a drag, so the picture tracks the thumb.
+                        onChange: (event) => {
+                            const next = Number(event.target.value);
+                            setPosition(next);
+                            if (videoRef.current)
+                                seekPreview(videoRef.current, next);
+                        }, onKeyDown: beginScrub, onKeyUp: endScrub, 
+                        // Pause for the duration of a drag — see `beginScrub` for why playback and a
+                        // drag otherwise fight over `currentTime`.
+                        onPointerDown: beginScrub, step: 0.02, type: "range", value: position }), _jsxs("span", { className: "inspector__time", children: [formatDuration(position) || "0:00", " / ", formatDuration(duration) || "0:00"] }), _jsxs("label", { className: "inspector__speed", htmlFor: "inspector-speed", children: [_jsx("span", { className: "sr-only", children: "Playback speed" }), _jsx(NativeSelect, { id: "inspector-speed", className: "w-auto", onChange: (event) => {
+                                    const next = Number(event.target.value);
+                                    setRate(next);
+                                    if (videoRef.current)
+                                        videoRef.current.playbackRate = next;
+                                }, size: "sm", value: rate, children: PLAYBACK_RATES.map((option) => (_jsxs("option", { value: option, children: [option, "\u00D7"] }, option))) })] })] }), _jsxs("div", { className: "inspector__tools", children: [_jsx(Button, { onClick: () => setRegion((current) => zoomRegion(current, 1 / ZOOM_STEP)), tooltip: "Wider", variant: "secondary", children: "\uFF0D" }), _jsxs("label", { className: "inspector__zoom", children: [_jsx("span", { className: "sr-only", children: "Zoom" }), _jsx(Tooltip, { content: "How close in you are looking", children: _jsx("input", { 
+                                    // guardrails-ignore no-raw-inputs: sibling of the transport — see above
+                                    max: MAX_ZOOM, min: 1, onChange: (event) => setRegion((current) => regionAtZoom(current, Number(event.target.value))), step: 0.1, type: "range", value: Math.min(zoom, MAX_ZOOM), "aria-label": "How close in you are looking" }) }), _jsxs("span", { className: "inspector__time", children: [zoom.toFixed(1), "\u00D7"] })] }), _jsx(Button, { onClick: () => setRegion((current) => zoomRegion(current, ZOOM_STEP)), tooltip: "Closer, on the middle of what you are looking at", variant: "secondary", children: "\uFF0B" }), _jsx(Button, { onClick: () => setSelecting((on) => !on), tooltip: selecting
+                            ? "Stop selecting — a drag pans instead"
+                            : "Drag a box over the part you want to look at", variant: selecting ? "primary" : "secondary", children: selecting ? "Drawing a box…" : "Select an area" }), _jsx(Button, { disabled: isFullRegion(region), onClick: () => {
+                            setRegion(FULL_REGION);
+                            setSelecting(false);
+                        }, tooltip: "Back to the whole picture", variant: "ghost", children: "Whole frame" })] }), _jsx(PictureControls, { onChange: setEnhance, onReset: () => {
+                    setEnhance(NO_ENHANCE);
+                    writeEnhance(NO_ENHANCE);
+                    // Upscale is this surface's own concern, which is why Reset is overridden
+                    // here rather than the control being taught about it.
+                    setUpscale(1);
+                }, resettable: isEnhanced(enhance) || upscale !== 1, value: enhance, children: onSaveSnapshot ? (_jsxs("label", { className: "picture__slider", htmlFor: "inspector-upscale", children: [_jsx("span", { children: "Save at" }), _jsx(NativeSelect, { id: "inspector-upscale", className: "w-auto", onChange: (event) => setUpscale(Number(event.target.value)), size: "sm", value: upscale, children: UPSCALE_FACTORS.map((factor) => (_jsxs("option", { value: factor, children: [factor, "\u00D7 ", factor === 1 ? "(as-is)" : "upscaled"] }, factor))) })] })) : null }), onSaveSnapshot ? (_jsxs("div", { className: "inspector__save", children: [_jsx(Button, { disabled: busy, onClick: () => void takeSnapshot(false), tooltip: isFullRegion(region)
+                            ? "Save this frame as a picture"
+                            : "Save just the part you are looking at", variant: "primary", children: isFullRegion(region) ? "Snapshot this frame" : "Snapshot this area" }), isFullRegion(region) ? null : (_jsx(Button, { disabled: busy, onClick: () => void takeSnapshot(true), tooltip: "Save the whole frame, ignoring the area you selected", variant: "secondary", children: "Snapshot whole frame" })), destination] })) : null, error ? _jsx(Alert, { tone: "error", children: error }) : null, note && !error ? _jsx(Alert, { tone: "success", children: note }) : null, snapshots.length > 0 ? (_jsxs("div", { className: "inspector__strip", children: [_jsx("p", { className: "inspector__striphead", children: "Stills from this video \u2014 click one to jump to that moment" }), _jsx("ul", { className: "inspector__stills", children: snapshots.map((still) => (_jsx("li", { children: _jsx(SnapshotChip, { onJump: () => seekTo(still.atSeconds ?? 0), still: still }) }, still.id))) })] })) : null] }));
+}
+/**
+ * One still in the strip. Its thumbnail is fetched lazily and per item, exactly like a
+ * gallery tile — a strip of twenty stills must not mint twenty signed grants until it is on
+ * screen, and a private one's URL would be dead by then anyway (see `storage.ts`).
+ */
+/**
+ * One still in the strip.
+ *
+ * 🔴 It resolves its own picture the way the HOST already gave it — `thumbnailUrl` first,
+ * `fullUrl` as the recovery. A computed thumbnail (binary-server's `<key>.thumb.jpg`) is
+ * offered without checking that it exists, so it 404s while the store is still building
+ * one, and this `<img>` is not cursedbelt's `ThumbImg` and gets no fallback for free.
+ * Without the swap the strip shows a torn page for a still that is perfectly fine, which
+ * would be a smaller copy of the bug this whole component exists to fix.
+ */
+function SnapshotChip({ still, onJump, }) {
+    const [broken, setBroken] = useState(false);
+    const src = (!broken && still.thumbnailUrl) || still.fullUrl || still.thumbnailUrl || null;
+    return (_jsxs("button", { 
+        // guardrails-ignore no-raw-action-button: a THUMBNAIL is the target, not a label —
+        // the whole 7rem picture is the affordance, and cursedbelt's Button would paint its
+        // own chrome over it. The accessible name rides the <img alt>.
+        className: "inspector__still", onClick: onJump, type: "button", children: [src ? (_jsx("img", { alt: still.name ?? "A still from this video", draggable: false, loading: "lazy", 
+                // Once, and only once — two dead URLs swapping forever is invisible on a fast
+                // connection and saturates a slow one (cursedbelt's ThumbImg note).
+                onError: () => setBroken(true), src: src })) : null, _jsx("span", { className: "inspector__stilltime", children: formatDuration(still.atSeconds ?? 0) || "0:00" })] }));
+}
+/** The marquee's CSS box, from a rectangle that may have been dragged in any direction. */
+function marqueeStyle(rect) {
+    const box = normalizeRect(rect);
+    return {
+        left: `${box.x * 100}%`,
+        top: `${box.y * 100}%`,
+        width: `${box.w * 100}%`,
+        height: `${box.h * 100}%`,
+    };
+}
+//# sourceMappingURL=FocusViewer.js.map