supervision 0.2.6 → 0.2.8

package/dist/index.js

@@ -1,4 +1,4 @@
-import { copySortedDetectionFrames, detectionFrameOverlapsRange, sortedDetectionFrames, projectDetectionFrameForTracking, createSortTracker, createOCSortTracker, createCBIoUTracker, createByteTrackTracker, MediaErrorKind, includeDefined, createDepthColormapLut, parseDepthManifest, validateDepthMap, resolveDepthFrameFile, PLAYHEAD_QUANTIZATION_TOLERANCE_SECONDS, decodeCompressedRleMask, createIdMaskFrame, encodeBinaryMask, rasterizePolygonToMask, resolveIdMaskPaletteId, decodeCompressedRleCounts, canReuseMaskStyleArtifacts, getBufferedDetectionTimelineFrameSnapshot, MediaSourceStatus, MediaRendererPlaybackState, MediaRendererFit, createDefaultAnnotationPresentation, createProjectedDetectionFrameSource, createArrayDetectionFrameSource, createBufferedDetectionTimeline, resolveAnnotationRendererPresentation, PlaybackGateReach, createIdleDetectionBufferState, MediaInteractionMode, MAX_ID_MASK_PALETTE_ENTRIES, StrokeAlignment, BaseBoxStyle, centerRectToTopLeftRect, BoxShape, depthPreviewTopCode, resolveDepthColorMapping, resolveDepthQuantity, computeDepthPercentileRange, BaseFocusStyle, extractDetectionMaskRectRuns, AnnotationGestureStateKind, AnnotationHandleKind, getDetectionRect, DetectionPickTarget, createDetectionPickKey, rebaseDetectionPickToFrame, pickDetectionAtPoint, followDetectionPickAcrossFrames, haveSameDetectionPickIdentities, pickAnnotationHandle, getAnnotationHandles, MAX_ID_MASK_STROKE_WIDTH, LabelPlacement, BasePolygonStyle, BasePolylineStyle, BaseKeypointStyle, ShapeInstructionKind, sampleEllipseArc, resolveEllipseSegmentCount, KeypointMarkerShape, MarkerSizeSpace, MarkerShape, resolveMarkerGeometry, BaseInteractionStyle, DetectionInteractionState, writeIdMaskPaletteEntry, resolveIdMaskStrokeTexels, DetectionBufferStatus, resolveMaskStyleOpacity, pickDetectionByMaskId, BoxStrokeAlignment, RegionRendererMediaEffectKind, RegionRendererSourceKind, RegionRendererCoverageKind, RegionRendererSizeSpace, resolveStyleValue, resolveAnnotationStyleState, lightenColor, resolveAnnotationRendererStyleFields, annotationRendererKinds, createViewportController, MediaSessionMode, DetectionFrameRetentionMode, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, createCompositeDetectionFrameSource, MediaSessionActivityStatus, MediaSessionActivityKind, MediaSessionStatus, createSourceAwarePresentation, projectDetectionFrames, DetectionFrameSelectionMode } from 'supervision-js-core';
+import { copySortedDetectionFrames, detectionFrameOverlapsRange, sortedDetectionFrames, projectDetectionFrameForTracking, createSortTracker, createOCSortTracker, createCBIoUTracker, createByteTrackTracker, MediaErrorKind, includeDefined, createDepthColormapLut, parseDepthManifest, validateDepthMap, resolveDepthFrameFile, PLAYHEAD_QUANTIZATION_TOLERANCE_SECONDS, decodeCompressedRleMask, decodeCompressedRleCounts, createIdMaskFrame, encodeBinaryMask, rasterizePolygonToMask, resolveIdMaskPaletteId, canReuseMaskStyleArtifacts, getBufferedDetectionTimelineFrameSnapshot, MediaSourceStatus, MediaRendererPlaybackState, MediaRendererFit, createDefaultAnnotationPresentation, createProjectedDetectionFrameSource, createArrayDetectionFrameSource, createBufferedDetectionTimeline, resolveAnnotationRendererPresentation, PlaybackGateReach, createIdleDetectionBufferState, MediaInteractionMode, MAX_ID_MASK_PALETTE_ENTRIES, StrokeAlignment, BaseBoxStyle, centerRectToTopLeftRect, BoxShape, depthPreviewTopCode, resolveDepthColorMapping, resolveDepthQuantity, computeDepthPercentileRange, BaseFocusStyle, extractDetectionMaskRectRuns, AnnotationGestureStateKind, AnnotationHandleKind, getDetectionRect, DetectionPickTarget, rebaseDetectionPickToFrame, pickDetectionAtPoint, createDetectionPickKey, followDetectionPickAcrossFrames, haveSameDetectionPickIdentities, pickAnnotationHandle, getAnnotationHandles, MAX_ID_MASK_STROKE_WIDTH, LabelPlacement, BasePolygonStyle, BasePolylineStyle, BaseKeypointStyle, ShapeInstructionKind, sampleEllipseArc, resolveEllipseSegmentCount, KeypointMarkerShape, MarkerSizeSpace, MarkerShape, resolveMarkerGeometry, BaseInteractionStyle, DetectionInteractionState, writeIdMaskPaletteEntry, resolveIdMaskStrokeTexels, DetectionBufferStatus, resolveMaskStyleOpacity, pickDetectionByMaskId, BoxStrokeAlignment, RegionRendererMediaEffectKind, RegionRendererSourceKind, RegionRendererCoverageKind, RegionRendererSizeSpace, resolveStyleValue, resolveAnnotationStyleState, lightenColor, resolveAnnotationRendererStyleFields, annotationRendererKinds, createViewportController, MediaSessionMode, DetectionFrameRetentionMode, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, createCompositeDetectionFrameSource, MediaSessionActivityStatus, MediaSessionActivityKind, MediaSessionStatus, createSourceAwarePresentation, projectDetectionFrames, DetectionFrameSelectionMode } from 'supervision-js-core';
 export { BaseBoxCornerStyle, BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMarkerStyle, BaseMaskStyle, BaseOrientedBoxStyle, BasePercentageBarStyle, BasePolygonStyle, BasePolylineStyle, BoxShape, BoxStrokeAlignment, DEFAULT_DETECTION_CLASS_STYLES, DEFAULT_DETECTION_COLOR_SEQUENCE, DepthColormap, DepthMapKind, DepthPreviewLevels, DepthQuantity, DepthSampling, DetectionBufferStatus, DetectionFrameRetentionMode, DetectionFrameSelectionMode, DetectionInteractionState, DetectionMaskEncoding, DetectionPickTarget, FocusTargetMode, KeypointMarkerShape, KeypointVisibility, LabelPlacement, LabelVisibilityMode, MarkerShape, MarkerSizeSpace, MaskRenderMode, MediaErrorKind, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, PercentageBarPlacement, PlaybackGateReach, RegionRendererComposeMode, RegionRendererCoverageKind, RegionRendererMediaEffectKind, RegionRendererRegionKind, RegionRendererSizeSpace, RegionRendererSourceKind, SUPERVISION_ROBOFLOW_COLOR, TrackingGeometry, annotationRendererKinds, annotationRenderers, computeDepthPercentileRange, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createByteTrackTracker, createCBIoUTracker, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createMemoryColdDetectionFrameStore, createOCSortTracker, createProjectedDetectionFrameSource, createSortTracker, createWritableDetectionFrameSource, depthColormapColors, detectionPostProcessors, normalizeDetectionClassName, parseDepthManifest, pickDetectionAtPoint, projectDetectionFrame, projectDetectionFrameForTracking, projectDetectionFrames, readDepthAt, resolveDetectionClassColorStyle } from 'supervision-js-core';
 import { c as createMediaFrameClock, M as MediaSourceError, t as toMediaSourceError, r as resolveDisplayPixelRatio } from './video-engine-media-source-DOFsuGS4.js';
 export { a as createWebVideoEngineMediaRendererSource, g as getMediaErrorKind, i as isMediaSourceError, o as openWebVideoEngineMediaSource } from './video-engine-media-source-DOFsuGS4.js';
@@ -3113,7 +3113,7 @@ function assertMediaAspect(map, media) {
     }
 }
 
-const EMBEDDED_MASK_PREPARATION_WORKER_SOURCE = "(function () {\n    'use strict';\n\n    /** COCO-compatible keypoint visibility values. */\n    var KeypointVisibility;\n    (function (KeypointVisibility) {\n        KeypointVisibility[KeypointVisibility[\"NotLabeled\"] = 0] = \"NotLabeled\";\n        KeypointVisibility[KeypointVisibility[\"Occluded\"] = 1] = \"Occluded\";\n        KeypointVisibility[KeypointVisibility[\"Visible\"] = 2] = \"Visible\";\n    })(KeypointVisibility || (KeypointVisibility = {}));\n    var DetectionMaskEncoding;\n    (function (DetectionMaskEncoding) {\n        DetectionMaskEncoding[\"CompressedRle\"] = \"compressedRle\";\n    })(DetectionMaskEncoding || (DetectionMaskEncoding = {}));\n\n    var DetectionBufferStatus;\n    (function (DetectionBufferStatus) {\n        DetectionBufferStatus[\"Idle\"] = \"idle\";\n        DetectionBufferStatus[\"Loading\"] = \"loading\";\n        /**\n         * The playback gate is holding playback until the source produces detections\n         * for the requested range. {@link DetectionBufferStatus.Loading} fetches\n         * detections the source already has; this one waits on a producer.\n         */\n        DetectionBufferStatus[\"AwaitingCoverage\"] = \"awaitingCoverage\";\n        DetectionBufferStatus[\"Ready\"] = \"ready\";\n        DetectionBufferStatus[\"Error\"] = \"error\";\n        DetectionBufferStatus[\"Destroyed\"] = \"destroyed\";\n    })(DetectionBufferStatus || (DetectionBufferStatus = {}));\n    /**\n     * How the renderer selects the active detection frame for a media timestamp.\n     */\n    var DetectionFrameSelectionMode;\n    (function (DetectionFrameSelectionMode) {\n        /**\n         * Select the frame whose `[mediaTime, endTime)` interval contains the media\n         * time. This is the default for interval annotations and timestamped sources.\n         *\n         * Frame times must come from the media itself. Times reconstructed from a\n         * nominal frame rate drift against a clip whose real rate differs, and once\n         * that drift passes the half-millisecond selection tolerance a playhead\n         * landing on a frame boundary selects the previous frame's detections.\n         *\n         * A frame that carries no `endTime` stays active until the next frame starts,\n         * which bridges an index the source never produced.\n         * {@link DetectionFrameSelectionMode.NearestFrameIndex} bounds each frame to\n         * one grid step instead, so a missing index reads as no detections.\n         */\n        DetectionFrameSelectionMode[\"Interval\"] = \"interval\";\n        /**\n         * Select from a known inference frame grid using `frameIndex` and\n         * `frameRate`. This is useful when inference was run on normalized frames and\n         * playback should snap detections to that grid.\n         *\n         * A frame speaks for one grid step starting at its own media time, and an\n         * index the source never produced selects nothing rather than a neighbour.\n         *\n         * A frame carrying no `frameIndex` speaks for its step on the same terms,\n         * reached by the time it starts at rather than by an index that names it. Its\n         * `endTime` does not widen it past that step, so a source that labels only\n         * part of what it writes cannot bridge the indexes it never produced.\n         */\n        DetectionFrameSelectionMode[\"NearestFrameIndex\"] = \"nearestFrameIndex\";\n    })(DetectionFrameSelectionMode || (DetectionFrameSelectionMode = {}));\n    var DetectionFrameRetentionMode;\n    (function (DetectionFrameRetentionMode) {\n        /**\n         * Keep writable detections only in an in-memory store. Useful for ephemeral\n         * live streams where old predictions should disappear when evicted.\n         */\n        DetectionFrameRetentionMode[\"MemoryOnly\"] = \"memoryOnly\";\n        /**\n         * Persist every written detection frame. Useful for finite media where seek\n         * and replay should not require recomputing detections.\n         */\n        DetectionFrameRetentionMode[\"PersistAll\"] = \"persistAll\";\n        /**\n         * Persist only the most recent retention window. Useful for long-running\n         * streams where replay is bounded to a recent time horizon.\n         */\n        DetectionFrameRetentionMode[\"PersistWindow\"] = \"persistWindow\";\n    })(DetectionFrameRetentionMode || (DetectionFrameRetentionMode = {}));\n    function decodeCompressedRleMask(mask) {\n        if (mask.encoding !== DetectionMaskEncoding.CompressedRle) {\n            throw new Error(`Unsupported detection mask encoding: ${mask.encoding}`);\n        }\n        const data = new Uint8Array(mask.width * mask.height);\n        const counts = decodeCompressedRleCounts(mask.counts);\n        let offset = 0;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            const isForeground = index % 2 === 1;\n            if (isForeground) {\n                for (let runOffset = 0; runOffset < runLength; runOffset += 1) {\n                    const maskOffset = offset + runOffset;\n                    const x = Math.floor(maskOffset / mask.height);\n                    const y = maskOffset % mask.height;\n                    const rowMajorOffset = y * mask.width + x;\n                    if (rowMajorOffset < data.length) {\n                        data[rowMajorOffset] = 1;\n                    }\n                }\n            }\n            offset += runLength;\n        }\n        return {\n            data,\n            height: mask.height,\n            width: mask.width,\n        };\n    }\n    function decodeCompressedRleCounts(counts) {\n        const decoded = [];\n        let index = 0;\n        while (index < counts.length) {\n            let value = 0;\n            let shift = 0;\n            let charCode;\n            do {\n                charCode = counts.charCodeAt(index) - 48;\n                index += 1;\n                value |= (charCode & 0x1f) << shift;\n                shift += 5;\n            } while (charCode & 0x20);\n            if (charCode & 0x10) {\n                value |= -1 << shift;\n            }\n            if (decoded.length > 2) {\n                value += decoded[decoded.length - 2] ?? 0;\n            }\n            decoded.push(value);\n        }\n        return decoded;\n    }\n    function encodeCompressedRleCounts(counts) {\n        return counts\n            .map((count, index) => {\n            let value = index > 2 ? count - counts[index - 2] : count;\n            let encoded = \"\";\n            let more = true;\n            while (more) {\n                let charCode = value & 0x1f;\n                value >>= 5;\n                more = !((value === 0 && (charCode & 0x10) === 0) ||\n                    (value === -1 && (charCode & 0x10) !== 0));\n                if (more) {\n                    charCode |= 0x20;\n                }\n                encoded += String.fromCharCode(charCode + 48);\n            }\n            return encoded;\n        })\n            .join(\"\");\n    }\n\n    var AnnotationFrameMutationKind;\n    (function (AnnotationFrameMutationKind) {\n        AnnotationFrameMutationKind[\"Add\"] = \"add\";\n        AnnotationFrameMutationKind[\"Remove\"] = \"remove\";\n        AnnotationFrameMutationKind[\"Replace\"] = \"replace\";\n        AnnotationFrameMutationKind[\"Transact\"] = \"transact\";\n        AnnotationFrameMutationKind[\"Update\"] = \"update\";\n    })(AnnotationFrameMutationKind || (AnnotationFrameMutationKind = {}));\n\n    /** Geometry projected into a tracker. The original detection payload is retained. */\n    var TrackingGeometry;\n    (function (TrackingGeometry) {\n        TrackingGeometry[\"Box\"] = \"box\";\n        TrackingGeometry[\"Mask\"] = \"mask\";\n        TrackingGeometry[\"Keypoints\"] = \"keypoints\";\n    })(TrackingGeometry || (TrackingGeometry = {}));\n\n    var DetectionMaskPayloadFormat;\n    (function (DetectionMaskPayloadFormat) {\n        DetectionMaskPayloadFormat[\"RawCocoRle\"] = \"rawCocoRle\";\n        DetectionMaskPayloadFormat[\"DeflatedBase64\"] = \"deflatedBase64\";\n    })(DetectionMaskPayloadFormat || (DetectionMaskPayloadFormat = {}));\n    function encodeBinaryMask(data, width, height) {\n        assertMaskDimensions(data, width, height);\n        const runs = [];\n        let currentValue = 0;\n        let runLength = 0;\n        for (let x = 0; x < width; x += 1) {\n            for (let y = 0; y < height; y += 1) {\n                const value = data[y * width + x] ? 1 : 0;\n                if (value === currentValue) {\n                    runLength += 1;\n                }\n                else {\n                    runs.push(runLength);\n                    currentValue = value;\n                    runLength = 1;\n                }\n            }\n        }\n        runs.push(runLength);\n        return {\n            counts: encodeCompressedRleCounts(runs),\n            encoding: DetectionMaskEncoding.CompressedRle,\n            height,\n            width,\n        };\n    }\n    function assertMaskSize(width, height) {\n        if (!Number.isInteger(width) || width <= 0) {\n            throw new Error(\"Mask width must be a positive integer.\");\n        }\n        if (!Number.isInteger(height) || height <= 0) {\n            throw new Error(\"Mask height must be a positive integer.\");\n        }\n    }\n    function assertMaskDimensions(data, width, height) {\n        assertMaskSize(width, height);\n        if (data.length !== width * height) {\n            throw new Error(\"Mask data length must equal width * height.\");\n        }\n    }\n\n    function centerRectToTopLeftRect(rect) {\n        return {\n            height: rect.height,\n            width: rect.width,\n            x: rect.x - rect.width / 2,\n            y: rect.y - rect.height / 2,\n        };\n    }\n    function getPointsRect(points) {\n        if (points.length === 0) {\n            return undefined;\n        }\n        let minX = Number.POSITIVE_INFINITY;\n        let minY = Number.POSITIVE_INFINITY;\n        let maxX = Number.NEGATIVE_INFINITY;\n        let maxY = Number.NEGATIVE_INFINITY;\n        for (const point of points) {\n            minX = Math.min(minX, point.x);\n            minY = Math.min(minY, point.y);\n            maxX = Math.max(maxX, point.x);\n            maxY = Math.max(maxY, point.y);\n        }\n        return {\n            height: maxY - minY,\n            width: maxX - minX,\n            x: (minX + maxX) / 2,\n            y: (minY + maxY) / 2,\n        };\n    }\n\n    var DetectionPickTarget;\n    (function (DetectionPickTarget) {\n        DetectionPickTarget[\"Box\"] = \"box\";\n        DetectionPickTarget[\"Edge\"] = \"edge\";\n        DetectionPickTarget[\"Keypoint\"] = \"keypoint\";\n        DetectionPickTarget[\"Label\"] = \"label\";\n        DetectionPickTarget[\"Mask\"] = \"mask\";\n        DetectionPickTarget[\"OrientedBox\"] = \"orientedBox\";\n        DetectionPickTarget[\"Polygon\"] = \"polygon\";\n        DetectionPickTarget[\"Polyline\"] = \"polyline\";\n    })(DetectionPickTarget || (DetectionPickTarget = {}));\n    var MediaInteractionMode;\n    (function (MediaInteractionMode) {\n        MediaInteractionMode[\"Always\"] = \"always\";\n        MediaInteractionMode[\"Disabled\"] = \"disabled\";\n        MediaInteractionMode[\"PausedOnly\"] = \"pausedOnly\";\n    })(MediaInteractionMode || (MediaInteractionMode = {}));\n\n    var AnnotationGeometryKind;\n    (function (AnnotationGeometryKind) {\n        AnnotationGeometryKind[\"Box\"] = \"box\";\n        AnnotationGeometryKind[\"Polygon\"] = \"polygon\";\n        AnnotationGeometryKind[\"Polyline\"] = \"polyline\";\n        AnnotationGeometryKind[\"Keypoints\"] = \"keypoints\";\n        AnnotationGeometryKind[\"Mask\"] = \"mask\";\n    })(AnnotationGeometryKind || (AnnotationGeometryKind = {}));\n    var AnnotationGestureStateKind;\n    (function (AnnotationGestureStateKind) {\n        AnnotationGestureStateKind[\"Idle\"] = \"idle\";\n        AnnotationGestureStateKind[\"Creating\"] = \"creating\";\n        AnnotationGestureStateKind[\"Moving\"] = \"moving\";\n        AnnotationGestureStateKind[\"Resizing\"] = \"resizing\";\n        AnnotationGestureStateKind[\"DragSelecting\"] = \"dragSelecting\";\n    })(AnnotationGestureStateKind || (AnnotationGestureStateKind = {}));\n    var AnnotationHandleKind;\n    (function (AnnotationHandleKind) {\n        AnnotationHandleKind[\"Resize\"] = \"resize\";\n        AnnotationHandleKind[\"Vertex\"] = \"vertex\";\n        AnnotationHandleKind[\"AddVertex\"] = \"addVertex\";\n        AnnotationHandleKind[\"Keypoint\"] = \"keypoint\";\n    })(AnnotationHandleKind || (AnnotationHandleKind = {}));\n\n    /** Alignment for strokes applied to closed rendered geometry. */\n    var StrokeAlignment;\n    (function (StrokeAlignment) {\n        StrokeAlignment[\"Inside\"] = \"inside\";\n        StrokeAlignment[\"Center\"] = \"center\";\n        StrokeAlignment[\"Outside\"] = \"outside\";\n    })(StrokeAlignment || (StrokeAlignment = {}));\n\n    var BoxShape;\n    (function (BoxShape) {\n        BoxShape[\"Rect\"] = \"rect\";\n        BoxShape[\"RoundedRect\"] = \"roundedRect\";\n    })(BoxShape || (BoxShape = {}));\n\n    var FocusTargetMode;\n    (function (FocusTargetMode) {\n        FocusTargetMode[\"Hovered\"] = \"hovered\";\n        FocusTargetMode[\"Selected\"] = \"selected\";\n        FocusTargetMode[\"HoveredAndSelected\"] = \"hoveredAndSelected\";\n        FocusTargetMode[\"Ambient\"] = \"ambient\";\n    })(FocusTargetMode || (FocusTargetMode = {}));\n\n    var DetectionInteractionState;\n    (function (DetectionInteractionState) {\n        DetectionInteractionState[\"Hovered\"] = \"hovered\";\n        DetectionInteractionState[\"Selected\"] = \"selected\";\n    })(DetectionInteractionState || (DetectionInteractionState = {}));\n\n    var LabelPlacement;\n    (function (LabelPlacement) {\n        LabelPlacement[\"Top\"] = \"top\";\n        LabelPlacement[\"Bottom\"] = \"bottom\";\n        LabelPlacement[\"InsideTop\"] = \"insideTop\";\n        LabelPlacement[\"InsideBottom\"] = \"insideBottom\";\n        LabelPlacement[\"Center\"] = \"center\";\n    })(LabelPlacement || (LabelPlacement = {}));\n    var LabelVisibilityMode;\n    (function (LabelVisibilityMode) {\n        LabelVisibilityMode[\"Always\"] = \"always\";\n        LabelVisibilityMode[\"HoveredOnly\"] = \"hoveredOnly\";\n    })(LabelVisibilityMode || (LabelVisibilityMode = {}));\n\n    var MaskRenderMode;\n    (function (MaskRenderMode) {\n        MaskRenderMode[\"FillAndStroke\"] = \"fillAndStroke\";\n        MaskRenderMode[\"FillOnly\"] = \"fillOnly\";\n        MaskRenderMode[\"StrokeOnly\"] = \"strokeOnly\";\n    })(MaskRenderMode || (MaskRenderMode = {}));\n\n    /**\n     * Discriminator for renderer-neutral shape draw instructions.\n     */\n    var ShapeInstructionKind;\n    (function (ShapeInstructionKind) {\n        ShapeInstructionKind[\"Ellipse\"] = \"ellipse\";\n        ShapeInstructionKind[\"Marker\"] = \"marker\";\n        ShapeInstructionKind[\"Path\"] = \"path\";\n    })(ShapeInstructionKind || (ShapeInstructionKind = {}));\n    var MarkerShape;\n    (function (MarkerShape) {\n        MarkerShape[\"Circle\"] = \"circle\";\n        MarkerShape[\"Cross\"] = \"cross\";\n        MarkerShape[\"Square\"] = \"square\";\n        MarkerShape[\"Triangle\"] = \"triangle\";\n    })(MarkerShape || (MarkerShape = {}));\n    /**\n     * Coordinate space for marker sizing. Media sizes scale with the viewport;\n     * screen sizes stay constant on screen, matching stroke-width semantics.\n     */\n    var MarkerSizeSpace;\n    (function (MarkerSizeSpace) {\n        MarkerSizeSpace[\"Media\"] = \"media\";\n        MarkerSizeSpace[\"Screen\"] = \"screen\";\n    })(MarkerSizeSpace || (MarkerSizeSpace = {}));\n\n    var PercentageBarPlacement;\n    (function (PercentageBarPlacement) {\n        PercentageBarPlacement[\"Top\"] = \"top\";\n        PercentageBarPlacement[\"Bottom\"] = \"bottom\";\n        PercentageBarPlacement[\"InsideTop\"] = \"insideTop\";\n        PercentageBarPlacement[\"InsideBottom\"] = \"insideBottom\";\n    })(PercentageBarPlacement || (PercentageBarPlacement = {}));\n\n    var KeypointMarkerShape;\n    (function (KeypointMarkerShape) {\n        KeypointMarkerShape[\"Circle\"] = \"circle\";\n        KeypointMarkerShape[\"Cross\"] = \"cross\";\n    })(KeypointMarkerShape || (KeypointMarkerShape = {}));\n\n    /**\n     * What the stored values of a depth map measure.\n     *\n     * Every kind stores 0 where there is no depth.\n     */\n    const DepthMapKind = {\n        /** Stereo disparity in pixels of the map. Larger is nearer. */\n        DisparityPx: \"disparity_px\",\n        /** Metric depth along the optical axis in metres. Smaller is nearer. */\n        DepthM: \"depth_m\",\n        /**\n         * Unitless inverse depth up to an unknown scale and shift, as monocular\n         * models produce it. Larger is nearer; it has no metric depth.\n         */\n        RelativeInverse: \"relative_inverse\",\n    };\n    /**\n     * The quantity a depth renderer colours.\n     *\n     * Disparity is inverse depth, so it spends colour on near detail the way\n     * stereo measures it. Either way the nearest end of the range is the warm or\n     * bright end of the colour table.\n     */\n    const DepthQuantity = {\n        Disparity: \"disparity\",\n        Depth: \"depth\",\n    };\n    const DepthColormap = {\n        Turbo: \"turbo\",\n        Viridis: \"viridis\",\n        Cividis: \"cividis\",\n        Inferno: \"inferno\",\n        Magma: \"magma\",\n        Grayscale: \"grayscale\",\n    };\n    /** How a depth map is sampled where one map pixel does not cover one media pixel. */\n    const DepthSampling = {\n        /** Nearest when the map is at least media size, edge-aware otherwise. */\n        Auto: \"auto\",\n        Nearest: \"nearest\",\n        /**\n         * Bilinear over valid neighbours only, falling back to the nearest one\n         * across a depth edge, so objects never bleed into the background.\n         */\n        EdgeAware: \"edge-aware\",\n    };\n    /**\n     * The luma range a depth preview video's codes are written in.\n     *\n     * TV range is what browsers' hardware decoders return as written; a decoder\n     * may squeeze full range into TV range or move codes converting it to RGB.\n     */\n    const DepthPreviewLevels = {\n        /** Every code from 0 to 255; the top code is 255. */\n        Full: \"full\",\n        /** Limited range: black is 16 and the top code is 235. */\n        Tv: \"tv\",\n    };\n    new Set(Object.values(DepthColormap));\n    new Set(Object.values(DepthQuantity));\n    new Set(Object.values(DepthSampling));\n    function rasterizePolygonToMask(points, dimensions) {\n        const data = createEmptyMask(dimensions);\n        if (points.length < 3) {\n            return data;\n        }\n        const bounds = centerRectToTopLeftRect(getPointsRect(points));\n        const startY = Math.max(0, Math.floor(bounds.y));\n        const endY = Math.min(dimensions.height - 1, Math.ceil(bounds.y + bounds.height));\n        for (let y = startY; y <= endY; y += 1) {\n            const scanY = y + 0.5;\n            const intersections = [];\n            for (let index = 0; index < points.length; index += 1) {\n                const current = points[index];\n                const next = points[(index + 1) % points.length];\n                if ((current.y <= scanY && next.y > scanY) ||\n                    (next.y <= scanY && current.y > scanY)) {\n                    const ratio = (scanY - current.y) / (next.y - current.y);\n                    intersections.push(current.x + ratio * (next.x - current.x));\n                }\n            }\n            intersections.sort((left, right) => left - right);\n            for (let index = 0; index < intersections.length - 1; index += 2) {\n                const left = Math.max(0, Math.round(intersections[index]));\n                const right = Math.min(dimensions.width, Math.round(intersections[index + 1]));\n                for (let x = left; x < right; x += 1) {\n                    data[y * dimensions.width + x] = 1;\n                }\n            }\n        }\n        return data;\n    }\n    function createEmptyMask(dimensions) {\n        if (!Number.isInteger(dimensions.width) ||\n            dimensions.width <= 0 ||\n            !Number.isInteger(dimensions.height) ||\n            dimensions.height <= 0) {\n            throw new Error(\"Media dimensions must be positive integers.\");\n        }\n        return new Uint8Array(dimensions.width * dimensions.height);\n    }\n\n    /**\n     * Palette slots an id raster can name, one of them the background. A GLSL\n     * fragment stage is guaranteed only 224 uniform vectors, and a palette entry\n     * costs 2.25 of them, so this stays a multiple of four and well inside that\n     * budget; past it a frame draws from the RGBA composite instead.\n     */\n    const MAX_ID_MASK_PALETTE_ENTRIES = 80;\n    const MAX_ID_MASK_STROKE_WIDTH = 16;\n    function createIdMaskFrame(instructions, options = {}) {\n        if (instructions.length === 0) {\n            return undefined;\n        }\n        /* Pixel-grid dimensions use integer parts throughout allocation and RLE\n           traversal. */\n        const maskWidth = Math.floor(Math.max(...instructions.map(({ mask }) => mask.width)));\n        const maskHeight = Math.floor(Math.max(...instructions.map(({ mask }) => mask.height)));\n        const width = resolveRasterWidth(maskWidth, options.maxWidth);\n        const height = width === maskWidth\n            ? maskHeight\n            : Math.max(1, Math.round((width * maskHeight) / maskWidth));\n        const scaledAxes = width === maskWidth\n            ? undefined\n            : createScaledMaskAxes({ height, maskHeight, maskWidth, width });\n        const data = new Uint8Array(new ArrayBuffer(width * height));\n        const fillPalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));\n        const strokePalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));\n        const strokeWidths = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4));\n        let hasStroke = false;\n        let maxStrokeWidth = 0;\n        for (const instruction of instructions) {\n            const detectionMaskId = resolveIdMaskPaletteId(instruction.detectionIndex);\n            if (detectionMaskId === undefined) {\n                return undefined;\n            }\n            writeIdMaskPaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);\n            if (instruction.stroke && instruction.stroke.width > 0) {\n                const strokeWidth = resolveIdMaskStrokeTexels(instruction.stroke.width, maskWidth, width);\n                hasStroke = true;\n                strokeWidths[detectionMaskId] = strokeWidth;\n                maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth);\n                writeIdMaskPaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);\n            }\n            if (scaledAxes) {\n                writeScaledMaskRuns(data, scaledAxes, instruction.mask, detectionMaskId);\n            }\n            else {\n                writeMaskRuns(data, width, instruction.mask, detectionMaskId);\n            }\n        }\n        return {\n            data,\n            fillPalette,\n            hasStroke,\n            height,\n            maxStrokeWidth,\n            sourceWidth: maskWidth,\n            strokePalette,\n            strokeWidths,\n            width,\n        };\n    }\n    /**\n     * Compressed RLE counts runs down each column in turn, so a foreground run is\n     * a contiguous walk down one column that wraps into the next.\n     */\n    function writeMaskRuns(data, frameWidth, mask, detectionMaskId) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = Math.floor(mask.width);\n        const maskHeight = Math.floor(mask.height);\n        let maskOffset = 0;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let x = Math.floor(maskOffset / maskHeight);\n            let y = maskOffset - x * maskHeight;\n            let frameOffset = y * frameWidth + x;\n            for (let step = 0; step < runLength; step += 1) {\n                if (x >= maskWidth) {\n                    break;\n                }\n                data[frameOffset] = detectionMaskId;\n                y += 1;\n                frameOffset += frameWidth;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                    frameOffset = x;\n                }\n            }\n            maskOffset += runLength;\n        }\n    }\n    /**\n     * The scaled twin of writeMaskRuns. Every source pixel marks the texel it lands\n     * in, so a mask keeps every part of itself the smaller raster can hold and\n     * gains up to a texel at its edges.\n     */\n    function writeScaledMaskRuns(data, axes, mask, detectionMaskId) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = Math.floor(mask.width);\n        const maskHeight = Math.floor(mask.height);\n        let maskOffset = 0;\n        const stride = axes.stride;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let x = Math.floor(maskOffset / maskHeight);\n            let y = maskOffset - x * maskHeight;\n            let remaining = runLength;\n            /* A run walks down one column and wraps into the next, so it splits into\n               column-sized segments. Within a segment the destination offset only ever\n               steps by the row pitch or stays put: createMaskAxisMap builds\n               `rows[i] = min(height - 1, floor(i * scale)) * width` with scale <= 1, so\n               consecutive entries differ by exactly 0 or exactly `width`. Walking the\n               destination directly therefore touches the same bytes the per-pixel loop\n               touched, and drops the bounds test, the wrap test and one typed-array\n               load from every source pixel. Where the scale collapses several source\n               rows onto one destination row, this writes that byte once instead of\n               once per source row. */\n            while (remaining > 0 && x < maskWidth) {\n                const span = Math.min(remaining, maskHeight - y);\n                const column = axes.columns[x];\n                const first = axes.rows[y];\n                const last = axes.rows[y + span - 1];\n                for (let offset = first; offset <= last; offset += stride) {\n                    data[offset + column] = detectionMaskId;\n                }\n                remaining -= span;\n                y += span;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                }\n            }\n            maskOffset += runLength;\n        }\n    }\n    function resolveRasterWidth(maskWidth, maxWidth) {\n        return maxWidth !== undefined && maxWidth > 0 && maxWidth < maskWidth\n            ? Math.max(1, Math.floor(maxWidth))\n            : maskWidth;\n    }\n    /**\n     * Converts a source-grid stroke width into raster texels. Fractional widths\n     * let coverage shaders draw a border within a texel. The ceiling bounds the\n     * neighbourhood the shaders scan.\n     */\n    function resolveIdMaskStrokeTexels(strokeWidth, maskWidth, rasterWidth) {\n        const scale = maskWidth > 0 ? rasterWidth / maskWidth : 1;\n        return Math.min(strokeWidth * scale, MAX_ID_MASK_STROKE_WIDTH);\n    }\n    function createScaledMaskAxes(frame) {\n        return {\n            columns: createMaskAxisMap(frame.maskWidth, frame.width, 1),\n            rows: createMaskAxisMap(frame.maskHeight, frame.height, frame.width),\n            stride: frame.width,\n        };\n    }\n    /** Rows hold their destination offset, so writing a run is two lookups. */\n    function createMaskAxisMap(sourceLength, targetLength, stride) {\n        const map = new Int32Array(sourceLength);\n        const scale = targetLength / sourceLength;\n        for (let index = 0; index < sourceLength; index += 1) {\n            map[index] = Math.min(targetLength - 1, Math.floor(index * scale)) * stride;\n        }\n        return map;\n    }\n    /**\n     * The palette slot a detection index names, or undefined when the palette has\n     * no slot for it. Slot zero is the background, so the ids start at one and the\n     * last detection the palette can name sits one index below the last slot.\n     */\n    function resolveIdMaskPaletteId(detectionIndex) {\n        const detectionMaskId = detectionIndex + 1;\n        return detectionMaskId > 0 && detectionMaskId < MAX_ID_MASK_PALETTE_ENTRIES\n            ? detectionMaskId\n            : undefined;\n    }\n    function writeIdMaskPaletteEntry(palette, detectionMaskId, color, alpha) {\n        const offset = detectionMaskId * 4;\n        palette[offset] = ((color >> 16) & 0xff) / 255;\n        palette[offset + 1] = ((color >> 8) & 0xff) / 255;\n        palette[offset + 2] = (color & 0xff) / 255;\n        palette[offset + 3] = Math.max(0, Math.min(alpha, 1));\n    }\n    new Set(Object.values(DepthPreviewLevels));\n    new Set(Object.values(DepthMapKind));\n\n    var MediaRendererFit;\n    (function (MediaRendererFit) {\n        /**\n         * Preserve media aspect ratio and fit the full frame inside the canvas.\n         */\n        MediaRendererFit[\"Contain\"] = \"contain\";\n        /**\n         * Preserve media aspect ratio and fill the canvas, cropping if necessary.\n         */\n        MediaRendererFit[\"Cover\"] = \"cover\";\n    })(MediaRendererFit || (MediaRendererFit = {}));\n    /**\n     * Playback lifecycle state reported by a platform renderer.\n     */\n    var MediaRendererPlaybackState;\n    (function (MediaRendererPlaybackState) {\n        MediaRendererPlaybackState[\"Loading\"] = \"loading\";\n        MediaRendererPlaybackState[\"Ready\"] = \"ready\";\n        MediaRendererPlaybackState[\"Playing\"] = \"playing\";\n        MediaRendererPlaybackState[\"Buffering\"] = \"buffering\";\n        MediaRendererPlaybackState[\"Paused\"] = \"paused\";\n        MediaRendererPlaybackState[\"Error\"] = \"error\";\n        MediaRendererPlaybackState[\"Destroyed\"] = \"destroyed\";\n    })(MediaRendererPlaybackState || (MediaRendererPlaybackState = {}));\n    /**\n     * Stable classification of a media failure.\n     *\n     * Applications branch on these kinds instead of parsing decoder, demuxer, or\n     * container error text, and still own their localized user-facing copy. New\n     * kinds may be added over time, so treat unrecognized values like `Unknown`.\n     */\n    var MediaErrorKind;\n    (function (MediaErrorKind) {\n        /** The media could not be opened or read, or was refused before any read. */\n        MediaErrorKind[\"Unreadable\"] = \"unreadable\";\n        /** The container or codec is not supported by this platform. */\n        MediaErrorKind[\"UnsupportedFormat\"] = \"unsupportedFormat\";\n        /** The media opened but carries no usable video track. */\n        MediaErrorKind[\"NoVideoTrack\"] = \"noVideoTrack\";\n        /** Decoding a sample failed after the source opened. */\n        MediaErrorKind[\"Decode\"] = \"decode\";\n        /** The media could not be fetched. */\n        MediaErrorKind[\"Network\"] = \"network\";\n        /** The host environment lacks the APIs this media source requires. */\n        MediaErrorKind[\"EnvironmentUnsupported\"] = \"environmentUnsupported\";\n        /** The failure could not be classified. */\n        MediaErrorKind[\"Unknown\"] = \"unknown\";\n    })(MediaErrorKind || (MediaErrorKind = {}));\n    /**\n     * Lower-level media source readiness.\n     */\n    var MediaSourceStatus;\n    (function (MediaSourceStatus) {\n        MediaSourceStatus[\"Loading\"] = \"loading\";\n        MediaSourceStatus[\"Ready\"] = \"ready\";\n        MediaSourceStatus[\"Error\"] = \"error\";\n        MediaSourceStatus[\"Destroyed\"] = \"destroyed\";\n    })(MediaSourceStatus || (MediaSourceStatus = {}));\n    /**\n     * Current renderer state.\n     */\n    /**\n     * What a playback gate holds back.\n     *\n     * A source the renderer pulls samples from can be held between any two frames,\n     * because the renderer decides when each one is drawn. A source that presents\n     * its own frames owns the playhead, so holding it means stopping the producer\n     * and starting it again, and a gate that stops one has to bound its own wait\n     * or a producer nothing answers for never runs again.\n     */\n    var PlaybackGateReach;\n    (function (PlaybackGateReach) {\n        /** No gate: the picture moves and unprepared layers are absent from it. */\n        PlaybackGateReach[\"Off\"] = \"off\";\n        /**\n         * Playback waits to begin, and stops again at any frame whose artifacts are\n         * missing, until they arrive or the gate's own wait bound gives up on them.\n         */\n        PlaybackGateReach[\"EveryFrame\"] = \"everyFrame\";\n    })(PlaybackGateReach || (PlaybackGateReach = {}));\n\n    /**\n     * Media-session operating mode.\n     *\n     * Core owns the names because file-like and stream-like lifecycle choices are\n     * platform-neutral. Platform packages decide how these modes tune media,\n     * storage, and renderer defaults.\n     */\n    var MediaSessionMode;\n    (function (MediaSessionMode) {\n        /**\n         * Finite media. Defaults usually favor seek/replay and persistent detection\n         * storage.\n         */\n        MediaSessionMode[\"File\"] = \"file\";\n        /**\n         * Live or append-only media. Defaults usually favor rolling windows and\n         * bounded retention.\n         */\n        MediaSessionMode[\"Stream\"] = \"stream\";\n    })(MediaSessionMode || (MediaSessionMode = {}));\n    /**\n     * Aggregate lifecycle state for a media session.\n     */\n    var MediaSessionStatus;\n    (function (MediaSessionStatus) {\n        MediaSessionStatus[\"Buffering\"] = \"buffering\";\n        MediaSessionStatus[\"Destroyed\"] = \"destroyed\";\n        MediaSessionStatus[\"Error\"] = \"error\";\n        MediaSessionStatus[\"Loading\"] = \"loading\";\n        MediaSessionStatus[\"Paused\"] = \"paused\";\n        MediaSessionStatus[\"Playing\"] = \"playing\";\n        MediaSessionStatus[\"Processing\"] = \"processing\";\n        MediaSessionStatus[\"Ready\"] = \"ready\";\n    })(MediaSessionStatus || (MediaSessionStatus = {}));\n    /**\n     * Subsystem currently affecting session readiness or presentation.\n     */\n    var MediaSessionActivityKind;\n    (function (MediaSessionActivityKind) {\n        /**\n         * Playback is held waiting for a producer to emit detections for the frame\n         * about to be shown, which is a wait on inference rather than on transfer or\n         * decode. `DetectionsBuffering` is the transfer of detections that already\n         * exist, and `PlaybackBuffering` is the wait for media bytes.\n         */\n        MediaSessionActivityKind[\"DetectionsAwaitingCoverage\"] = \"detectionsAwaitingCoverage\";\n        MediaSessionActivityKind[\"DetectionsBuffering\"] = \"detectionsBuffering\";\n        MediaSessionActivityKind[\"DetectionsLoading\"] = \"detectionsLoading\";\n        MediaSessionActivityKind[\"Error\"] = \"error\";\n        MediaSessionActivityKind[\"MediaNormalizing\"] = \"mediaNormalizing\";\n        MediaSessionActivityKind[\"MediaOpening\"] = \"mediaOpening\";\n        /**\n         * The picture is waiting on media the source has not handed over yet, which\n         * is the bytes and their decode rather than anything downstream of them.\n         * `PlaybackBuffering` is what a transport reports once it has already\n         * stopped; this is reported from the read itself, including the reads a seek\n         * makes while the transport still reads as paused.\n         */\n        MediaSessionActivityKind[\"MediaSourceReading\"] = \"mediaSourceReading\";\n        MediaSessionActivityKind[\"PlaybackBuffering\"] = \"playbackBuffering\";\n        /**\n         * The render-preparation gate held the picture for artifacts that never\n         * arrived and let it go. Nothing is blocked: the frames reaching the screen\n         * are the ones whose artifacts were given up on. What is waited on is\n         * preparation finishing another frame, which is what lets the gate hold the\n         * picture again; `RenderPreparing` covers the holds that are running.\n         */\n        MediaSessionActivityKind[\"RenderPreparationAbandoned\"] = \"renderPreparationAbandoned\";\n        MediaSessionActivityKind[\"RenderPreparing\"] = \"renderPreparing\";\n    })(MediaSessionActivityKind || (MediaSessionActivityKind = {}));\n    /**\n     * State of one session activity.\n     */\n    var MediaSessionActivityStatus;\n    (function (MediaSessionActivityStatus) {\n        MediaSessionActivityStatus[\"Error\"] = \"error\";\n        MediaSessionActivityStatus[\"Running\"] = \"running\";\n        MediaSessionActivityStatus[\"Waiting\"] = \"waiting\";\n    })(MediaSessionActivityStatus || (MediaSessionActivityStatus = {}));\n\n    /** Builds compact, independent alpha crops so overlapping masks stay exact. */\n    function createRegionMaskCoverageFrame(instructions) {\n        const entries = [];\n        for (const instruction of instructions) {\n            if (!instruction.regionCoverageMask) {\n                continue;\n            }\n            const entry = cropCoverageMask(instruction.detectionIndex, decodeCompressedRleMask(instruction.regionCoverageMask));\n            if (entry) {\n                entries.push(entry);\n            }\n        }\n        return entries.length > 0 ? { entries } : undefined;\n    }\n    function cropCoverageMask(detectionIndex, decodedMask) {\n        let minX = decodedMask.width;\n        let minY = decodedMask.height;\n        let maxX = -1;\n        let maxY = -1;\n        for (let y = 0; y < decodedMask.height; y += 1) {\n            for (let x = 0; x < decodedMask.width; x += 1) {\n                if (!decodedMask.data[y * decodedMask.width + x]) {\n                    continue;\n                }\n                minX = Math.min(minX, x);\n                minY = Math.min(minY, y);\n                maxX = Math.max(maxX, x);\n                maxY = Math.max(maxY, y);\n            }\n        }\n        if (maxX < minX || maxY < minY) {\n            return undefined;\n        }\n        const width = maxX - minX + 1;\n        const height = maxY - minY + 1;\n        const data = new Uint8Array(new ArrayBuffer(width * height));\n        for (let y = minY; y <= maxY; y += 1) {\n            for (let x = minX; x <= maxX; x += 1) {\n                if (!decodedMask.data[y * decodedMask.width + x]) {\n                    continue;\n                }\n                data[(y - minY) * width + (x - minX)] = 255;\n            }\n        }\n        return { data, detectionIndex, height, width, x: minX, y: minY };\n    }\n    function compositeMaskFrame(instructions) {\n        const maskInstructions = materializeMaskInstructions(instructions);\n        if (maskInstructions.length === 0) {\n            return undefined;\n        }\n        const width = Math.max(...maskInstructions.map(({ mask }) => mask.width));\n        const height = Math.max(...maskInstructions.map(({ mask }) => mask.height));\n        const data = new Uint8ClampedArray(new ArrayBuffer(width * height * 4));\n        for (const instruction of maskInstructions) {\n            compositeInstruction(data, width, instruction);\n        }\n        return { data, height, width };\n    }\n    function createIdMaskRasterFrame(instructions, maxRasterWidth) {\n        try {\n            return createIdMaskFrame(materializeMaskInstructions(instructions), {\n                maxWidth: maxRasterWidth,\n            });\n        }\n        catch {\n            // The id raster is the fast path, not the only one: answering with nothing\n            // puts the caller on the RGBA composite, which draws the same picture.\n            return undefined;\n        }\n    }\n    /**\n     * Whether the palette has a slot for every detection this frame masks. An id\n     * names a detection by its index in the frame, so one masked detection past the\n     * last slot leaves the whole frame without an id raster however few masks it\n     * carries.\n     */\n    function canIdMaskPaletteNameFrame(instructions) {\n        return instructions.every((instruction) => instruction.visible === false ||\n            resolveIdMaskPaletteId(instruction.detectionIndex) !== undefined);\n    }\n    function createIdMaskPlane(instructions, maxRasterWidth) {\n        // The plane carries the ids a failed cook could not. A frame the palette\n        // cannot name has none to carry, and cooking it again reaches the same\n        // refusal after rasterizing every mask a second time.\n        if (!canIdMaskPaletteNameFrame(instructions)) {\n            return undefined;\n        }\n        const frame = createIdMaskRasterFrame(instructions, maxRasterWidth);\n        return frame\n            ? { data: frame.data, height: frame.height, width: frame.width }\n            : undefined;\n    }\n    function compositeInstruction(rgba, canvasWidth, instruction) {\n        const fill = resolveRgbaColor(instruction.color, instruction.alpha);\n        const bounds = compositeMaskFill(rgba, canvasWidth, instruction.mask, fill);\n        if (instruction.stroke && bounds) {\n            compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, instruction.stroke);\n        }\n    }\n    function materializeMaskInstructions(instructions) {\n        return instructions\n            .filter((instruction) => instruction.visible !== false)\n            .map((instruction) => {\n            if (instruction.mask) {\n                return instruction;\n            }\n            const { height, points, width } = instruction.polygon;\n            return {\n                alpha: instruction.alpha,\n                color: instruction.color,\n                detectionIndex: instruction.detectionIndex,\n                mask: encodeBinaryMask(rasterizePolygonToMask(points, { height, width }), width, height),\n                stroke: instruction.stroke,\n            };\n        });\n    }\n    /**\n     * Compressed RLE counts runs down each column in turn, so a foreground run is\n     * a contiguous walk down one column that wraps into the next.\n     */\n    function compositeMaskFill(rgba, canvasWidth, mask, fill) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = mask.width;\n        const maskHeight = mask.height;\n        const maskArea = maskWidth * maskHeight;\n        let maskOffset = 0;\n        let minX = maskWidth;\n        let minY = maskHeight;\n        let maxX = -1;\n        let maxY = -1;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let columnX = Math.floor(maskOffset / maskHeight);\n            let columnY = maskOffset - columnX * maskHeight;\n            for (let step = 0; step < runLength; step += 1) {\n                // A run can outlast the columns the mask has; the pixel it then names\n                // is wherever that column-major offset lands when read back row-major.\n                const rowMajorOffset = columnY * maskWidth + columnX;\n                if (rowMajorOffset < maskArea) {\n                    const x = rowMajorOffset % maskWidth;\n                    const y = (rowMajorOffset - x) / maskWidth;\n                    writePixel(rgba, canvasWidth, x, y, fill);\n                    minX = Math.min(minX, x);\n                    minY = Math.min(minY, y);\n                    maxX = Math.max(maxX, x);\n                    maxY = Math.max(maxY, y);\n                }\n                columnY += 1;\n                if (columnY === maskHeight) {\n                    columnY = 0;\n                    columnX += 1;\n                }\n            }\n            maskOffset += runLength;\n        }\n        return maxX < minX || maxY < minY ? undefined : { maxX, maxY, minX, minY };\n    }\n    function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke) {\n        const width = Math.round(stroke.width);\n        if (width <= 0) {\n            return;\n        }\n        const strokeColor = resolveRgbaColor(stroke.color, stroke.alpha);\n        for (let y = bounds.minY; y <= bounds.maxY; y += 1) {\n            for (let x = bounds.minX; x <= bounds.maxX; x += 1) {\n                if (!isMaskPixel(decodedMask, x, y) ||\n                    !isBoundaryPixel(decodedMask, x, y)) {\n                    continue;\n                }\n                for (let offsetY = -width; offsetY <= width; offsetY += 1) {\n                    for (let offsetX = -width; offsetX <= width; offsetX += 1) {\n                        const strokeX = x + offsetX;\n                        const strokeY = y + offsetY;\n                        if (isOutsideMaskBounds(decodedMask, strokeX, strokeY) ||\n                            isMaskPixel(decodedMask, strokeX, strokeY)) {\n                            continue;\n                        }\n                        writePixel(rgba, canvasWidth, strokeX, strokeY, strokeColor);\n                    }\n                }\n            }\n        }\n    }\n    function isBoundaryPixel(mask, x, y) {\n        for (let offsetY = -1; offsetY <= 1; offsetY += 1) {\n            for (let offsetX = -1; offsetX <= 1; offsetX += 1) {\n                if (offsetX === 0 && offsetY === 0) {\n                    continue;\n                }\n                const neighborX = x + offsetX;\n                const neighborY = y + offsetY;\n                if (isOutsideMaskBounds(mask, neighborX, neighborY) ||\n                    !isMaskPixel(mask, neighborX, neighborY)) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n    function isMaskPixel(mask, x, y) {\n        return mask.data[y * mask.width + x] === 1;\n    }\n    function isOutsideMaskBounds(mask, x, y) {\n        return x < 0 || y < 0 || x >= mask.width || y >= mask.height;\n    }\n    function resolveRgbaColor(color, alpha) {\n        return {\n            alpha: Math.round(Math.max(0, Math.min(alpha, 1)) * 255),\n            blue: color & 0xff,\n            green: (color >> 8) & 0xff,\n            red: (color >> 16) & 0xff,\n        };\n    }\n    function writePixel(rgba, canvasWidth, x, y, color) {\n        const rgbaOffset = (y * canvasWidth + x) * 4;\n        rgba[rgbaOffset] = color.red;\n        rgba[rgbaOffset + 1] = color.green;\n        rgba[rgbaOffset + 2] = color.blue;\n        rgba[rgbaOffset + 3] = color.alpha;\n    }\n\n    var PreparedMaskFrameKind;\n    (function (PreparedMaskFrameKind) {\n        PreparedMaskFrameKind[\"IdMask\"] = \"idMask\";\n        PreparedMaskFrameKind[\"RgbaImage\"] = \"rgbaImage\";\n    })(PreparedMaskFrameKind || (PreparedMaskFrameKind = {}));\n    /**\n     * How an id raster is laid out for the texture it is uploaded into. WebGPU\n     * takes any bytesPerRow, so ids go up one byte per pixel. WebGL aligns every\n     * uploaded row to four bytes and rejects a single-channel upload whose width\n     * is not a multiple of four, which is what the four-channel layout is for.\n     */\n    var IdMaskTextureFormat;\n    (function (IdMaskTextureFormat) {\n        IdMaskTextureFormat[\"R8\"] = \"r8unorm\";\n        IdMaskTextureFormat[\"Rgba8\"] = \"rgba8unorm\";\n    })(IdMaskTextureFormat || (IdMaskTextureFormat = {}));\n\n    const DEFAULT_STOPS = [\n        { position: 0, color: 0xffd600 },\n        { position: 0.35, color: 0xffd600 },\n        { position: 0.7, color: 0xff7a00 },\n        { position: 1, color: 0xdc1e1e },\n    ];\n    const MAX_HEATMAP_PIXELS = 16_777_216;\n    const MAX_HEATMAP_SIDE = 8_192;\n    /** Turns semantic scores into an RGBA raster; no palette enters cold data. */\n    function colorizeHeatmap(map, renderer) {\n        const { bounds, width, height, values } = map;\n        if (!Number.isFinite(bounds?.x) ||\n            !Number.isFinite(bounds?.y) ||\n            !Number.isFinite(bounds?.width) ||\n            !Number.isFinite(bounds?.height) ||\n            bounds.width <= 0 ||\n            bounds.height <= 0 ||\n            !Number.isInteger(width) ||\n            !Number.isInteger(height) ||\n            width <= 0 ||\n            height <= 0 ||\n            width > MAX_HEATMAP_SIDE ||\n            height > MAX_HEATMAP_SIDE ||\n            width * height > MAX_HEATMAP_PIXELS ||\n            !(Array.isArray(values) ||\n                values instanceof Float32Array ||\n                values instanceof Float64Array ||\n                values instanceof Uint16Array) ||\n            values.length !== width * height) {\n            throw new RangeError(\"Heatmap bounds and dimensions must be valid, match row-major values, and fit the raster limit.\");\n        }\n        const scale = map.valueScale ?? 1;\n        const threshold = (map.threshold ?? 0) * (renderer.thresholdScale ?? 1);\n        const maximumScore = renderer.maximumScore ?? 1;\n        const opacity = clamp01(renderer.opacity ?? 1);\n        const minimumAlpha = clamp01(renderer.minimumAlpha ?? 0);\n        const stops = renderer.colorStops ?? DEFAULT_STOPS;\n        if (!Number.isFinite(scale) ||\n            scale <= 0 ||\n            !Number.isFinite(threshold) ||\n            !Number.isFinite(maximumScore) ||\n            maximumScore <= 0 ||\n            !Number.isFinite(renderer.thresholdScale ?? 1) ||\n            (renderer.thresholdScale ?? 1) < 0 ||\n            !Number.isFinite(renderer.opacity ?? 1) ||\n            !Number.isFinite(renderer.minimumAlpha ?? 0) ||\n            stops.length === 0 ||\n            stops.some((stop, index) => !Number.isFinite(stop.position) ||\n                stop.position < 0 ||\n                stop.position > 1 ||\n                !Number.isInteger(stop.color) ||\n                stop.color < 0 ||\n                stop.color > 0xffffff ||\n                (index > 0 && stop.position < stops[index - 1].position))) {\n            throw new RangeError(\"Invalid heatmap scale, threshold, or color stops.\");\n        }\n        const rgba = new Uint8ClampedArray(new ArrayBuffer(values.length * 4));\n        if (maximumScore <= threshold || opacity === 0)\n            return rgba;\n        for (let index = 0; index < values.length; index += 1) {\n            const score = values[index] * scale;\n            if (!Number.isFinite(score) || score <= threshold)\n                continue;\n            const color = interpolateColor(stops, clamp01(score / maximumScore));\n            const alphaIntensity = clamp01((score - threshold) / (maximumScore - threshold));\n            const offset = index * 4;\n            rgba[offset] = color >> 16;\n            rgba[offset + 1] = (color >> 8) & 0xff;\n            rgba[offset + 2] = color & 0xff;\n            rgba[offset + 3] = Math.round(255 * opacity * (minimumAlpha + (1 - minimumAlpha) * alphaIntensity));\n        }\n        return rgba;\n    }\n    function interpolateColor(stops, value) {\n        const upperIndex = stops.findIndex((stop) => stop.position >= value);\n        if (upperIndex === -1)\n            return stops[stops.length - 1].color;\n        if (upperIndex === 0)\n            return stops[0].color;\n        const left = stops[upperIndex - 1];\n        const right = stops[upperIndex];\n        const span = right.position - left.position;\n        const ratio = span === 0 ? 1 : (value - left.position) / span;\n        const channel = (shift) => Math.round(((left.color >> shift) & 0xff) * (1 - ratio) +\n            ((right.color >> shift) & 0xff) * ratio);\n        return (channel(16) << 16) | (channel(8) << 8) | channel(0);\n    }\n    function clamp01(value) {\n        return Math.max(0, Math.min(1, value));\n    }\n\n    var HeatmapPreparationWorkerMessageType;\n    (function (HeatmapPreparationWorkerMessageType) {\n        HeatmapPreparationWorkerMessageType[\"Prepare\"] = \"heatmap-prepare\";\n        HeatmapPreparationWorkerMessageType[\"Complete\"] = \"heatmap-complete\";\n        HeatmapPreparationWorkerMessageType[\"Error\"] = \"heatmap-error\";\n    })(HeatmapPreparationWorkerMessageType || (HeatmapPreparationWorkerMessageType = {}));\n\n    var MaskPreparationWorkerMessageType;\n    (function (MaskPreparationWorkerMessageType) {\n        MaskPreparationWorkerMessageType[\"Complete\"] = \"complete\";\n        MaskPreparationWorkerMessageType[\"Empty\"] = \"empty\";\n        MaskPreparationWorkerMessageType[\"Error\"] = \"error\";\n        MaskPreparationWorkerMessageType[\"Prepare\"] = \"prepare\";\n    })(MaskPreparationWorkerMessageType || (MaskPreparationWorkerMessageType = {}));\n\n    /**\n     * Messages between the depth source and the render-preparation worker, which\n     * decodes depth and confidence PNGs, and copies decoded preview frames' luma,\n     * off the main thread. Internal: the worker script is a deployment asset, and\n     * its protocol is not public.\n     */\n    var DepthPreparationWorkerMessageType;\n    (function (DepthPreparationWorkerMessageType) {\n        DepthPreparationWorkerMessageType[\"Decode\"] = \"depth-decode\";\n        DepthPreparationWorkerMessageType[\"Complete\"] = \"depth-decode-complete\";\n        DepthPreparationWorkerMessageType[\"Error\"] = \"depth-decode-error\";\n        DepthPreparationWorkerMessageType[\"PreviewLuma\"] = \"depth-preview-luma\";\n        DepthPreparationWorkerMessageType[\"PreviewLumaComplete\"] = \"depth-preview-luma-complete\";\n    })(DepthPreparationWorkerMessageType || (DepthPreparationWorkerMessageType = {}));\n\n    /*\n     * Grayscale PNG decoding for depth maps and their confidence planes.\n     *\n     * Every image path a browser offers (<img>, createImageBitmap, ImageDecoder,\n     * canvas) hands back 8 bits per channel, so a 16-bit depth PNG is decoded\n     * here: the browser's own zlib inflates the IDAT stream, and the row filters\n     * are undone in JavaScript.\n     *\n     * This module imports nothing, so the render-preparation worker, the main\n     * thread and the depth benchmark all run the same code.\n     */\n    const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];\n    const COLOR_TYPE_GRAY = 0;\n    /** 16384 x 16384, beyond any GPU texture; a header claiming more is refused. */\n    const MAX_PNG_PIXELS = 16_384 * 16_384;\n    async function decodePng16(bytes, options = {}) {\n        const header = readPngHeader(bytes, 16);\n        const rowBytes = header.width * 2 + 1;\n        const raw = await (options.inflate ?? inflateWithDecompressionStream)(header.idat, rowBytes * header.height);\n        const values = new Uint16Array(header.width * header.height);\n        checkInflatedLength(raw, rowBytes * header.height);\n        unfilterGray16(raw, header.width, header.height, values);\n        return {\n            height: header.height,\n            paddedUpload: options.padRowsForWebGl && header.width % 2 === 1\n                ? padRows(values, header.width, header.height)\n                : undefined,\n            values,\n            width: header.width,\n        };\n    }\n    async function decodePng8Gray(bytes, options = {}) {\n        const header = readPngHeader(bytes, 8);\n        const rowBytes = header.width + 1;\n        const raw = await (options.inflate ?? inflateWithDecompressionStream)(header.idat, rowBytes * header.height);\n        const values = new Uint8Array(header.width * header.height);\n        checkInflatedLength(raw, rowBytes * header.height);\n        unfilterGray8(raw, header.width, header.height, values);\n        return { height: header.height, values, width: header.width };\n    }\n    /**\n     * Inflates with the platform's `DecompressionStream(\"deflate\")` (zlib\n     * framing, which is what PNG uses) straight into one buffer of the expected\n     * size, so no second copy joins the output chunks.\n     */\n    async function inflateWithDecompressionStream(chunks, byteLength) {\n        const stream = new DecompressionStream(\"deflate\");\n        const writer = stream.writable.getWriter();\n        const reader = stream.readable.getReader();\n        // Writers split IDAT into many small chunks (libpng's default is 8 KiB).\n        // One write of the joined stream costs a copy of the compressed bytes and\n        // saves a stream round trip per chunk.\n        const zlib = chunks.length === 1 ? chunks[0] : joinChunks(chunks);\n        const writing = (async () => {\n            await writer.write(zlib);\n            await writer.close();\n        })();\n        const output = new Uint8Array(byteLength);\n        let offset = 0;\n        // A corrupt stream rejects both sides; the reader's error is the one thrown.\n        writing.catch(() => undefined);\n        try {\n            for (;;) {\n                const { done, value } = await reader.read();\n                if (done)\n                    break;\n                if (offset + value.byteLength > byteLength) {\n                    throw new RangeError(\"PNG image data is longer than its header says.\");\n                }\n                output.set(value, offset);\n                offset += value.byteLength;\n            }\n            await writing;\n        }\n        catch (error) {\n            await reader.cancel().catch(() => undefined);\n            throw error instanceof RangeError\n                ? error\n                : new RangeError(`PNG image data does not inflate: ${error instanceof Error ? error.message : String(error)}`);\n        }\n        return offset === byteLength ? output : output.subarray(0, offset);\n    }\n    function joinChunks(chunks) {\n        const joined = new Uint8Array(chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0));\n        let offset = 0;\n        for (const chunk of chunks) {\n            joined.set(chunk, offset);\n            offset += chunk.byteLength;\n        }\n        return joined;\n    }\n    function readPngHeader(input, bitDepth) {\n        const bytes = input instanceof Uint8Array ? input : new Uint8Array(input);\n        const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);\n        if (bytes.byteLength < 8 ||\n            PNG_SIGNATURE.some((value, index) => bytes[index] !== value)) {\n            throw new RangeError(\"Not a PNG file.\");\n        }\n        let offset = 8;\n        let width = 0;\n        let height = 0;\n        let sawHeader = false;\n        let sawEnd = false;\n        const idat = [];\n        while (offset + 12 <= bytes.byteLength) {\n            const length = view.getUint32(offset);\n            const type = view.getUint32(offset + 4);\n            const dataStart = offset + 8;\n            const dataEnd = dataStart + length;\n            if (dataEnd + 4 > bytes.byteLength) {\n                throw new RangeError(\"PNG file is truncated.\");\n            }\n            if (type === 0x49484452) {\n                // IHDR\n                if (length !== 13)\n                    throw new RangeError(\"PNG header is malformed.\");\n                width = view.getUint32(dataStart);\n                height = view.getUint32(dataStart + 4);\n                const depth = bytes[dataStart + 8];\n                const colorType = bytes[dataStart + 9];\n                if (bytes[dataStart + 10] !== 0 || bytes[dataStart + 11] !== 0) {\n                    throw new RangeError(\"PNG uses an unknown compression or filter.\");\n                }\n                if (bytes[dataStart + 12] !== 0) {\n                    throw new RangeError(\"Interlaced PNGs are not supported.\");\n                }\n                if (colorType !== COLOR_TYPE_GRAY || depth !== bitDepth) {\n                    throw new RangeError(`Expected a ${bitDepth}-bit grayscale PNG, got bit depth ${depth} with colour type ${colorType}.`);\n                }\n                sawHeader = true;\n            }\n            else if (type === 0x49444154) {\n                // IDAT\n                idat.push(bytes.subarray(dataStart, dataEnd));\n            }\n            else if (type === 0x49454e44) {\n                // IEND\n                sawEnd = true;\n                break;\n            }\n            offset = dataEnd + 4;\n        }\n        if (!sawHeader)\n            throw new RangeError(\"PNG has no header.\");\n        if (!sawEnd)\n            throw new RangeError(\"PNG file is truncated.\");\n        if (width === 0 || height === 0 || width * height > MAX_PNG_PIXELS) {\n            throw new RangeError(`PNG size ${width}x${height} is not supported.`);\n        }\n        if (idat.length === 0)\n            throw new RangeError(\"PNG has no image data.\");\n        return { height, idat, width };\n    }\n    function checkInflatedLength(raw, expected) {\n        if (raw.byteLength !== expected) {\n            throw new RangeError(\"PNG image data is shorter than its header says.\");\n        }\n    }\n    /*\n     * Undoes the row filters of a 16-bit grayscale image and writes host-order\n     * samples, in one pass. Each filter runs on bytes, and the two bytes of a\n     * sample never carry into each other, so the loops keep a sample's high and\n     * low bytes apart and join them only for the store. The previous row is read\n     * back from the output, which already holds it unfiltered; the first row reads\n     * a row of zeros, which is what PNG defines above the image.\n     *\n     * Each filter is its own small function with one loop, called once per row,\n     * so engines compile each loop on its own: SpiderMonkey slowed a Paeth loop\n     * that shared a function with the other filters.\n     */\n    function unfilterGray16(raw, width, height, out) {\n        const rowBytes = width * 2 + 1;\n        const zeroRow = new Uint16Array(width);\n        for (let y = 0; y < height; y += 1) {\n            const filter = raw[y * rowBytes];\n            const unfilterRow = ROW_FILTERS_16[filter];\n            if (!unfilterRow) {\n                throw new RangeError(`PNG row ${y} has unknown filter ${filter}.`);\n            }\n            const o = y * width;\n            unfilterRow(raw, y * rowBytes + 1, out, o, o + width, y === 0 ? zeroRow : out, y === 0 ? 0 : o - width);\n        }\n    }\n    function noneRow16(raw, s, out, o, end) {\n        for (let i = o; i < end; i += 1, s += 2) {\n            out[i] = (raw[s] << 8) | raw[s + 1];\n        }\n    }\n    function subRow16(raw, s, out, o, end) {\n        let hi = 0;\n        let lo = 0;\n        for (let i = o; i < end; i += 1, s += 2) {\n            hi = (raw[s] + hi) & 0xff;\n            lo = (raw[s + 1] + lo) & 0xff;\n            out[i] = (hi << 8) | lo;\n        }\n    }\n    function upRow16(raw, s, out, o, end, prev, p) {\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            out[i] = (((raw[s] + (up >> 8)) & 0xff) << 8) | ((raw[s + 1] + up) & 0xff);\n        }\n    }\n    function averageRow16(raw, s, out, o, end, prev, p) {\n        let hi = 0;\n        let lo = 0;\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            hi = (raw[s] + ((hi + (up >> 8)) >> 1)) & 0xff;\n            lo = (raw[s + 1] + ((lo + (up & 0xff)) >> 1)) & 0xff;\n            out[i] = (hi << 8) | lo;\n        }\n    }\n    /** Paeth: per byte, whichever of left, up and up-left is closest to left + up - up-left. */\n    function paethRow16(raw, s, out, o, end, prev, p) {\n        let hi = 0;\n        let lo = 0;\n        let upLeftHi = 0;\n        let upLeftLo = 0;\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            const upHi = up >> 8;\n            const upLo = up & 0xff;\n            let pa = Math.abs(upHi - upLeftHi);\n            let pb = Math.abs(hi - upLeftHi);\n            let pc = Math.abs(hi + upHi - upLeftHi - upLeftHi);\n            hi =\n                (raw[s] + (pa <= pb && pa <= pc ? hi : pb <= pc ? upHi : upLeftHi)) &\n                    0xff;\n            pa = Math.abs(upLo - upLeftLo);\n            pb = Math.abs(lo - upLeftLo);\n            pc = Math.abs(lo + upLo - upLeftLo - upLeftLo);\n            lo =\n                (raw[s + 1] + (pa <= pb && pa <= pc ? lo : pb <= pc ? upLo : upLeftLo)) &\n                    0xff;\n            out[i] = (hi << 8) | lo;\n            upLeftHi = upHi;\n            upLeftLo = upLo;\n        }\n    }\n    /** Indexed by the PNG filter type byte: None, Sub, Up, Average, Paeth. */\n    const ROW_FILTERS_16 = [\n        noneRow16,\n        subRow16,\n        upRow16,\n        averageRow16,\n        paethRow16,\n    ];\n    function unfilterGray8(raw, width, height, out) {\n        const rowBytes = width + 1;\n        const zeroRow = new Uint8Array(width);\n        for (let y = 0; y < height; y += 1) {\n            const filter = raw[y * rowBytes];\n            const unfilterRow = ROW_FILTERS_8[filter];\n            if (!unfilterRow) {\n                throw new RangeError(`PNG row ${y} has unknown filter ${filter}.`);\n            }\n            const o = y * width;\n            unfilterRow(raw, y * rowBytes + 1, out, o, o + width, y === 0 ? zeroRow : out, y === 0 ? 0 : o - width);\n        }\n    }\n    function noneRow8(raw, s, out, o, end) {\n        out.set(raw.subarray(s, s + end - o), o);\n    }\n    function subRow8(raw, s, out, o, end) {\n        let left = 0;\n        for (let i = o; i < end; i += 1, s += 1) {\n            left = (raw[s] + left) & 0xff;\n            out[i] = left;\n        }\n    }\n    function upRow8(raw, s, out, o, end, prev, p) {\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            out[i] = (raw[s] + prev[p]) & 0xff;\n        }\n    }\n    function averageRow8(raw, s, out, o, end, prev, p) {\n        let left = 0;\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            left = (raw[s] + ((left + prev[p]) >> 1)) & 0xff;\n            out[i] = left;\n        }\n    }\n    function paethRow8(raw, s, out, o, end, prev, p) {\n        let left = 0;\n        let upLeft = 0;\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            const up = prev[p];\n            const pa = Math.abs(up - upLeft);\n            const pb = Math.abs(left - upLeft);\n            const pc = Math.abs(left + up - upLeft - upLeft);\n            left =\n                (raw[s] + (pa <= pb && pa <= pc ? left : pb <= pc ? up : upLeft)) & 0xff;\n            out[i] = left;\n            upLeft = up;\n        }\n    }\n    const ROW_FILTERS_8 = [\n        noneRow8,\n        subRow8,\n        upRow8,\n        averageRow8,\n        paethRow8,\n    ];\n    /**\n     * WebGL unpacks rows on four-byte boundaries, so an odd width of two-byte\n     * texels needs one padding texel per row.\n     */\n    function padRows(values, width, height) {\n        const textureWidth = width + 1;\n        const padded = new Uint16Array(textureWidth * height);\n        for (let y = 0; y < height; y += 1) {\n            padded.set(values.subarray(y * width, (y + 1) * width), y * textureWidth);\n        }\n        return { bytes: new Uint8Array(padded.buffer), textureWidth };\n    }\n\n    /**\n     * Answers one decode request, in the worker or on the main thread: the reply\n     * and the buffers it can transfer. A file that does not decode is an error\n     * reply, never a thrown exception, so the caller can tell a bad file from a\n     * broken worker.\n     */\n    async function decodeDepthPreparationRequest(request) {\n        const requestId = request.requestId ?? 0;\n        try {\n            if (request.bitDepth === 8) {\n                const decoded = await decodePng8Gray(request.bytes);\n                return {\n                    response: {\n                        bitDepth: 8,\n                        height: decoded.height,\n                        requestId,\n                        type: DepthPreparationWorkerMessageType.Complete,\n                        values: decoded.values.buffer,\n                        width: decoded.width,\n                    },\n                    transfer: [decoded.values.buffer],\n                };\n            }\n            const decoded = await decodePng16(request.bytes, {\n                padRowsForWebGl: request.padRowsForWebGl,\n            });\n            const padded = decoded.paddedUpload;\n            const decimated = request.decimateBy !== undefined && request.decimateBy >= 2\n                ? decimateDepthUpload(decoded.values, decoded.width, decoded.height, Math.floor(request.decimateBy), request.padRowsForWebGl === true)\n                : null;\n            const transfer = [decoded.values.buffer];\n            if (padded)\n                transfer.push(padded.bytes.buffer);\n            if (decimated)\n                transfer.push(decimated.bytes.buffer);\n            return {\n                response: {\n                    bitDepth: 16,\n                    decimatedUpload: decimated\n                        ? { ...decimated, bytes: decimated.bytes.buffer }\n                        : undefined,\n                    height: decoded.height,\n                    paddedUpload: padded\n                        ? {\n                            bytes: padded.bytes.buffer,\n                            textureWidth: padded.textureWidth,\n                        }\n                        : undefined,\n                    requestId,\n                    type: DepthPreparationWorkerMessageType.Complete,\n                    values: decoded.values.buffer,\n                    width: decoded.width,\n                },\n                transfer,\n            };\n        }\n        catch (error) {\n            return {\n                response: {\n                    error: error instanceof Error ? error.message : \"Unable to decode depth.\",\n                    requestId,\n                    type: DepthPreparationWorkerMessageType.Error,\n                },\n                transfer: [],\n            };\n        }\n    }\n    /**\n     * Depth for a texture `factor` times smaller on each side, each texel the\n     * sample at its block's centre, as the renderer decimates a map larger than\n     * the GPU allows.\n     */\n    function decimateDepthUpload(values, width, height, factor, padRowsForWebGl) {\n        if (factor < 2)\n            return null;\n        const targetWidth = Math.ceil(width / factor);\n        const targetHeight = Math.ceil(height / factor);\n        // WebGL reads two-byte texels in rows of four bytes.\n        const textureWidth = padRowsForWebGl\n            ? targetWidth + (targetWidth % 2)\n            : targetWidth;\n        const texels = new Uint16Array(textureWidth * targetHeight);\n        const columns = new Uint32Array(targetWidth);\n        for (let x = 0; x < targetWidth; x += 1) {\n            columns[x] = Math.min(width - 1, Math.floor(((x + 0.5) * width) / targetWidth));\n        }\n        for (let y = 0; y < targetHeight; y += 1) {\n            const row = Math.min(height - 1, Math.floor(((y + 0.5) * height) / targetHeight)) *\n                width;\n            const target = y * textureWidth;\n            for (let x = 0; x < targetWidth; x += 1) {\n                texels[target + x] = values[row + columns[x]];\n            }\n        }\n        return {\n            bytes: new Uint8Array(texels.buffer),\n            height: targetHeight,\n            textureWidth,\n            width: targetWidth,\n        };\n    }\n\n    /** Formats whose first plane is 8-bit luma, which is the code as written. */\n    const PLANAR_8_BIT_FORMATS = new Set([\n        \"I420\",\n        \"I420A\",\n        \"I422\",\n        \"I422A\",\n        \"I444\",\n        \"I444A\",\n        \"NV12\",\n    ]);\n    const RGB_FORMATS = new Set([\"RGBA\", \"RGBX\", \"BGRA\", \"BGRX\"]);\n    /**\n     * Copies a decoded preview frame's luma codes out of it, mapped through\n     * `correction` when one is given. The frame stays open; its owner closes\n     * it.\n     */\n    async function readVideoFrameLuma(frame, scratch, correction = null) {\n        const rect = frame.visibleRect ?? {\n            height: frame.codedHeight,\n            width: frame.codedWidth,\n            x: 0,\n            y: 0,\n        };\n        const { width, height } = rect;\n        const format = frame.format;\n        const planar = format !== null && PLANAR_8_BIT_FORMATS.has(format);\n        let bytes;\n        let plane;\n        if (planar || (format !== null && RGB_FORMATS.has(format))) {\n            const size = frame.allocationSize({ rect });\n            if (scratch.buffer.byteLength < size)\n                scratch.buffer = new ArrayBuffer(size);\n            [plane] = await frame.copyTo(scratch.buffer, { rect });\n            bytes = new Uint8Array(scratch.buffer);\n        }\n        else {\n            // A frame in a layout no copy can read is drawn to a canvas, which\n            // converts it to RGB as the browser sees fit.\n            bytes = drawFrameRgba(frame, width, height);\n        }\n        const luma = new Uint8Array(width * height);\n        const stride = plane?.stride ?? (planar ? width : width * 4);\n        const offset = plane?.offset ?? 0;\n        if (!planar) {\n            // Every RGB layout keeps green second, and luma with neutral chroma\n            // converts to three equal channels.\n            for (let y = 0; y < height; y += 1) {\n                const row = offset + y * stride + 1;\n                const target = y * width;\n                for (let x = 0; x < width; x += 1) {\n                    luma[target + x] = bytes[row + x * 4];\n                }\n            }\n        }\n        else if (stride === width) {\n            luma.set(bytes.subarray(offset, offset + width * height));\n        }\n        else {\n            for (let y = 0; y < height; y += 1) {\n                luma.set(bytes.subarray(offset + y * stride, offset + y * stride + width), y * width);\n            }\n        }\n        if (correction) {\n            for (let index = 0; index < luma.length; index += 1) {\n                luma[index] = correction[luma[index]];\n            }\n        }\n        return { height, luma, path: planar ? \"plane\" : \"rgb\", width };\n    }\n    function drawFrameRgba(frame, width, height) {\n        const canvas = new OffscreenCanvas(width, height);\n        const context = canvas.getContext(\"2d\", { willReadFrequently: true });\n        if (!context) {\n            throw new Error(\"The depth preview needs a 2D canvas to read this frame.\");\n        }\n        context.drawImage(frame, 0, 0, width, height);\n        const { data } = context.getImageData(0, 0, width, height);\n        return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);\n    }\n\n    const workerScope = globalThis;\n    workerScope.addEventListener(\"message\", (event) => {\n        const message = event.data;\n        if (message.type === HeatmapPreparationWorkerMessageType.Prepare) {\n            prepareHeatmap(message);\n            return;\n        }\n        if (message.type === DepthPreparationWorkerMessageType.Decode) {\n            void decodeDepthFrame(message);\n            return;\n        }\n        if (message.type === DepthPreparationWorkerMessageType.PreviewLuma) {\n            void copyPreviewLuma(message);\n            return;\n        }\n        if (message.type !== MaskPreparationWorkerMessageType.Prepare) {\n            return;\n        }\n        prepareMaskFrame(message);\n    });\n    function prepareHeatmap(message) {\n        try {\n            const data = colorizeHeatmap(message.map, message.renderer);\n            const imageData = new ImageData(data, message.map.width, message.map.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    imageBitmap,\n                    requestId: message.requestId,\n                    type: HeatmapPreparationWorkerMessageType.Complete,\n                }, [imageBitmap]);\n                return;\n            }\n            workerScope.postMessage({\n                imageData,\n                requestId: message.requestId,\n                type: HeatmapPreparationWorkerMessageType.Complete,\n            }, [imageData.data.buffer]);\n        }\n        catch (error) {\n            workerScope.postMessage({\n                error: error instanceof Error ? error.message : \"Unable to prepare heatmap.\",\n                requestId: message.requestId,\n                type: HeatmapPreparationWorkerMessageType.Error,\n            });\n        }\n    }\n    /** Decoding waits on the platform's inflate, so replies arrive out of order. */\n    async function decodeDepthFrame(message) {\n        const { response, transfer } = await decodeDepthPreparationRequest(message);\n        workerScope.postMessage(response, transfer);\n    }\n    const previewLumaScratch = {\n        buffer: new ArrayBuffer(0),\n    };\n    /** Frames arrive in order and are copied in order, through one scratch. */\n    let previewLumaQueue = Promise.resolve();\n    function copyPreviewLuma(message) {\n        previewLumaQueue = previewLumaQueue.then(async () => {\n            try {\n                const copied = await readVideoFrameLuma(message.frame, previewLumaScratch, message.correction);\n                workerScope.postMessage({\n                    height: copied.height,\n                    luma: copied.luma.buffer,\n                    path: copied.path,\n                    requestId: message.requestId,\n                    type: DepthPreparationWorkerMessageType.PreviewLumaComplete,\n                    width: copied.width,\n                }, [copied.luma.buffer]);\n            }\n            catch (error) {\n                workerScope.postMessage({\n                    error: error instanceof Error\n                        ? error.message\n                        : \"Unable to copy the depth preview frame.\",\n                    requestId: message.requestId,\n                    type: DepthPreparationWorkerMessageType.Error,\n                });\n            }\n            finally {\n                message.frame.close();\n            }\n        });\n        return previewLumaQueue;\n    }\n    function prepareMaskFrame(message) {\n        try {\n            const regionMaskCoverage = createRegionMaskCoverageFrame(message.job.instructions);\n            const coverageTransfers = getRegionMaskCoverageTransfers(regionMaskCoverage);\n            const idMaskFrame = createIdMaskRasterFrame(message.job.instructions, message.job.maxRasterWidth);\n            if (idMaskFrame) {\n                workerScope.postMessage({\n                    artifactKind: PreparedMaskFrameKind.IdMask,\n                    fillPalette: idMaskFrame.fillPalette,\n                    hasStroke: idMaskFrame.hasStroke,\n                    height: idMaskFrame.height,\n                    key: message.job.key,\n                    maxStrokeWidth: idMaskFrame.maxStrokeWidth,\n                    raster: idMaskFrame.data,\n                    regionMaskCoverage,\n                    requestId: message.requestId,\n                    sourceWidth: idMaskFrame.sourceWidth,\n                    strokePalette: idMaskFrame.strokePalette,\n                    strokeWidths: idMaskFrame.strokeWidths,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                    width: idMaskFrame.width,\n                }, [\n                    idMaskFrame.data.buffer,\n                    idMaskFrame.fillPalette.buffer,\n                    idMaskFrame.strokePalette.buffer,\n                    idMaskFrame.strokeWidths.buffer,\n                    ...coverageTransfers,\n                ]);\n                return;\n            }\n            const compositedFrame = compositeMaskFrame(message.job.instructions);\n            if (!compositedFrame && !regionMaskCoverage) {\n                workerScope.postMessage({\n                    key: message.job.key,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Empty,\n                });\n                return;\n            }\n            const preparedPixels = compositedFrame ?? createTransparentCoverageCarrier();\n            const imageData = new ImageData(preparedPixels.data, preparedPixels.width, preparedPixels.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            const idMaskPlane = createIdMaskPlane(message.job.instructions, message.job.maxRasterWidth);\n            const idMaskTransfers = idMaskPlane ? [idMaskPlane.data.buffer] : [];\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    idMaskPlane,\n                    imageBitmap,\n                    key: message.job.key,\n                    regionMaskCoverage,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                }, [imageBitmap, ...idMaskTransfers, ...coverageTransfers]);\n                return;\n            }\n            workerScope.postMessage({\n                idMaskPlane,\n                imageData,\n                key: message.job.key,\n                regionMaskCoverage,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Complete,\n            }, [imageData.data.buffer, ...idMaskTransfers, ...coverageTransfers]);\n        }\n        catch (error) {\n            workerScope.postMessage({\n                error: error instanceof Error\n                    ? error.message\n                    : \"Unable to prepare mask frame.\",\n                key: message.job.key,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Error,\n            });\n        }\n    }\n    /**\n     * A frame that carries only region coverage has nothing to composite, and the\n     * RGBA branch still has to produce an artifact for the coverage to ride on.\n     */\n    function createTransparentCoverageCarrier() {\n        return {\n            data: new Uint8ClampedArray(new ArrayBuffer(4)),\n            height: 1,\n            width: 1,\n        };\n    }\n    function getRegionMaskCoverageTransfers(coverage) {\n        return coverage?.entries.map(({ data }) => data.buffer) ?? [];\n    }\n    function createImageBitmapFromImageData(imageData) {\n        if (typeof OffscreenCanvas === \"undefined\") {\n            return null;\n        }\n        const canvas = new OffscreenCanvas(imageData.width, imageData.height);\n        const context = canvas.getContext(\"2d\");\n        if (!context) {\n            return null;\n        }\n        context.putImageData(imageData, 0, 0);\n        return canvas.transferToImageBitmap();\n    }\n\n})();";
+const EMBEDDED_MASK_PREPARATION_WORKER_SOURCE = "(function () {\n    'use strict';\n\n    /** Trace closed pixel boundaries, retaining holes and disconnected components. */\n    function traceMaskOutlinePaths(raster, width, height, ids) {\n        const edgesById = new Map();\n        const stride = width + 1;\n        const steps = [1, stride, -1, -stride];\n        const add = (id, vertex, direction) => {\n            let edges = edgesById.get(id);\n            if (!edges)\n                edgesById.set(id, (edges = new Map()));\n            const outgoing = edges.get(vertex);\n            if (outgoing)\n                outgoing.push(direction);\n            else\n                edges.set(vertex, [direction]);\n        };\n        for (let y = 0; y < height; y += 1) {\n            for (let x = 0; x < width; x += 1) {\n                const offset = y * width + x;\n                const id = raster[offset];\n                if (!ids.has(id))\n                    continue;\n                const vertex = y * stride + x;\n                if (y === 0 || raster[offset - width] !== id)\n                    add(id, vertex, 0);\n                if (x === width - 1 || raster[offset + 1] !== id)\n                    add(id, vertex + 1, 1);\n                if (y === height - 1 || raster[offset + width] !== id)\n                    add(id, vertex + stride + 1, 2);\n                if (x === 0 || raster[offset - 1] !== id)\n                    add(id, vertex + stride, 3);\n            }\n        }\n        const result = new Map();\n        for (const [id, edges] of edgesById) {\n            const paths = [];\n            while (edges.size > 0) {\n                const start = edges.keys().next().value;\n                let vertex = start;\n                let previousDirection = -1;\n                let firstDirection = -1;\n                const points = [];\n                do {\n                    const outgoing = edges.get(vertex);\n                    // Turn right at diagonal contacts so separate islands stay separate.\n                    const direction = previousDirection < 0\n                        ? outgoing[0]\n                        : [1, 0, 3, 2]\n                            .map((turn) => (previousDirection + turn) % 4)\n                            .find((candidate) => outgoing.includes(candidate));\n                    if (firstDirection < 0)\n                        firstDirection = direction;\n                    if (direction !== previousDirection)\n                        points.push(vertex % stride, Math.floor(vertex / stride));\n                    outgoing.splice(outgoing.indexOf(direction), 1);\n                    if (outgoing.length === 0)\n                        edges.delete(vertex);\n                    vertex += steps[direction];\n                    previousDirection = direction;\n                } while (vertex !== start);\n                if (previousDirection === firstDirection)\n                    points.splice(0, 2);\n                paths.push(new Float32Array(points));\n            }\n            result.set(id, paths);\n        }\n        return result;\n    }\n\n    /** COCO-compatible keypoint visibility values. */\n    var KeypointVisibility;\n    (function (KeypointVisibility) {\n        KeypointVisibility[KeypointVisibility[\"NotLabeled\"] = 0] = \"NotLabeled\";\n        KeypointVisibility[KeypointVisibility[\"Occluded\"] = 1] = \"Occluded\";\n        KeypointVisibility[KeypointVisibility[\"Visible\"] = 2] = \"Visible\";\n    })(KeypointVisibility || (KeypointVisibility = {}));\n    var DetectionMaskEncoding;\n    (function (DetectionMaskEncoding) {\n        DetectionMaskEncoding[\"CompressedRle\"] = \"compressedRle\";\n    })(DetectionMaskEncoding || (DetectionMaskEncoding = {}));\n\n    var DetectionBufferStatus;\n    (function (DetectionBufferStatus) {\n        DetectionBufferStatus[\"Idle\"] = \"idle\";\n        DetectionBufferStatus[\"Loading\"] = \"loading\";\n        /**\n         * The playback gate is holding playback until the source produces detections\n         * for the requested range. {@link DetectionBufferStatus.Loading} fetches\n         * detections the source already has; this one waits on a producer.\n         */\n        DetectionBufferStatus[\"AwaitingCoverage\"] = \"awaitingCoverage\";\n        DetectionBufferStatus[\"Ready\"] = \"ready\";\n        DetectionBufferStatus[\"Error\"] = \"error\";\n        DetectionBufferStatus[\"Destroyed\"] = \"destroyed\";\n    })(DetectionBufferStatus || (DetectionBufferStatus = {}));\n    /**\n     * How the renderer selects the active detection frame for a media timestamp.\n     */\n    var DetectionFrameSelectionMode;\n    (function (DetectionFrameSelectionMode) {\n        /**\n         * Select the frame whose `[mediaTime, endTime)` interval contains the media\n         * time. This is the default for interval annotations and timestamped sources.\n         *\n         * Frame times must come from the media itself. Times reconstructed from a\n         * nominal frame rate drift against a clip whose real rate differs, and once\n         * that drift passes the half-millisecond selection tolerance a playhead\n         * landing on a frame boundary selects the previous frame's detections.\n         *\n         * A frame that carries no `endTime` stays active until the next frame starts,\n         * which bridges an index the source never produced.\n         * {@link DetectionFrameSelectionMode.NearestFrameIndex} bounds each frame to\n         * one grid step instead, so a missing index reads as no detections.\n         */\n        DetectionFrameSelectionMode[\"Interval\"] = \"interval\";\n        /**\n         * Select from a known inference frame grid using `frameIndex` and\n         * `frameRate`. This is useful when inference was run on normalized frames and\n         * playback should snap detections to that grid.\n         *\n         * A frame speaks for one grid step starting at its own media time, and an\n         * index the source never produced selects nothing rather than a neighbour.\n         *\n         * A frame carrying no `frameIndex` speaks for its step on the same terms,\n         * reached by the time it starts at rather than by an index that names it. Its\n         * `endTime` does not widen it past that step, so a source that labels only\n         * part of what it writes cannot bridge the indexes it never produced.\n         */\n        DetectionFrameSelectionMode[\"NearestFrameIndex\"] = \"nearestFrameIndex\";\n    })(DetectionFrameSelectionMode || (DetectionFrameSelectionMode = {}));\n    var DetectionFrameRetentionMode;\n    (function (DetectionFrameRetentionMode) {\n        /**\n         * Keep writable detections only in an in-memory store. Useful for ephemeral\n         * live streams where old predictions should disappear when evicted.\n         */\n        DetectionFrameRetentionMode[\"MemoryOnly\"] = \"memoryOnly\";\n        /**\n         * Persist every written detection frame. Useful for finite media where seek\n         * and replay should not require recomputing detections.\n         */\n        DetectionFrameRetentionMode[\"PersistAll\"] = \"persistAll\";\n        /**\n         * Persist only the most recent retention window. Useful for long-running\n         * streams where replay is bounded to a recent time horizon.\n         */\n        DetectionFrameRetentionMode[\"PersistWindow\"] = \"persistWindow\";\n    })(DetectionFrameRetentionMode || (DetectionFrameRetentionMode = {}));\n    function decodeCompressedRleMask(mask) {\n        if (mask.encoding !== DetectionMaskEncoding.CompressedRle) {\n            throw new Error(`Unsupported detection mask encoding: ${mask.encoding}`);\n        }\n        const data = new Uint8Array(mask.width * mask.height);\n        const counts = decodeCompressedRleCounts(mask.counts);\n        let offset = 0;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            const isForeground = index % 2 === 1;\n            if (isForeground) {\n                for (let runOffset = 0; runOffset < runLength; runOffset += 1) {\n                    const maskOffset = offset + runOffset;\n                    const x = Math.floor(maskOffset / mask.height);\n                    const y = maskOffset % mask.height;\n                    const rowMajorOffset = y * mask.width + x;\n                    if (rowMajorOffset < data.length) {\n                        data[rowMajorOffset] = 1;\n                    }\n                }\n            }\n            offset += runLength;\n        }\n        return {\n            data,\n            height: mask.height,\n            width: mask.width,\n        };\n    }\n    function decodeCompressedRleCounts(counts) {\n        const decoded = [];\n        let index = 0;\n        while (index < counts.length) {\n            let value = 0;\n            let shift = 0;\n            let charCode;\n            do {\n                charCode = counts.charCodeAt(index) - 48;\n                index += 1;\n                value |= (charCode & 0x1f) << shift;\n                shift += 5;\n            } while (charCode & 0x20);\n            if (charCode & 0x10) {\n                value |= -1 << shift;\n            }\n            if (decoded.length > 2) {\n                value += decoded[decoded.length - 2] ?? 0;\n            }\n            decoded.push(value);\n        }\n        return decoded;\n    }\n    function encodeCompressedRleCounts(counts) {\n        return counts\n            .map((count, index) => {\n            let value = index > 2 ? count - counts[index - 2] : count;\n            let encoded = \"\";\n            let more = true;\n            while (more) {\n                let charCode = value & 0x1f;\n                value >>= 5;\n                more = !((value === 0 && (charCode & 0x10) === 0) ||\n                    (value === -1 && (charCode & 0x10) !== 0));\n                if (more) {\n                    charCode |= 0x20;\n                }\n                encoded += String.fromCharCode(charCode + 48);\n            }\n            return encoded;\n        })\n            .join(\"\");\n    }\n\n    var AnnotationFrameMutationKind;\n    (function (AnnotationFrameMutationKind) {\n        AnnotationFrameMutationKind[\"Add\"] = \"add\";\n        AnnotationFrameMutationKind[\"Remove\"] = \"remove\";\n        AnnotationFrameMutationKind[\"Replace\"] = \"replace\";\n        AnnotationFrameMutationKind[\"Transact\"] = \"transact\";\n        AnnotationFrameMutationKind[\"Update\"] = \"update\";\n    })(AnnotationFrameMutationKind || (AnnotationFrameMutationKind = {}));\n\n    /** Geometry projected into a tracker. The original detection payload is retained. */\n    var TrackingGeometry;\n    (function (TrackingGeometry) {\n        TrackingGeometry[\"Box\"] = \"box\";\n        TrackingGeometry[\"Mask\"] = \"mask\";\n        TrackingGeometry[\"Keypoints\"] = \"keypoints\";\n    })(TrackingGeometry || (TrackingGeometry = {}));\n\n    var DetectionMaskPayloadFormat;\n    (function (DetectionMaskPayloadFormat) {\n        DetectionMaskPayloadFormat[\"RawCocoRle\"] = \"rawCocoRle\";\n        DetectionMaskPayloadFormat[\"DeflatedBase64\"] = \"deflatedBase64\";\n    })(DetectionMaskPayloadFormat || (DetectionMaskPayloadFormat = {}));\n    function encodeBinaryMask(data, width, height) {\n        assertMaskDimensions(data, width, height);\n        const runs = [];\n        let currentValue = 0;\n        let runLength = 0;\n        for (let x = 0; x < width; x += 1) {\n            for (let y = 0; y < height; y += 1) {\n                const value = data[y * width + x] ? 1 : 0;\n                if (value === currentValue) {\n                    runLength += 1;\n                }\n                else {\n                    runs.push(runLength);\n                    currentValue = value;\n                    runLength = 1;\n                }\n            }\n        }\n        runs.push(runLength);\n        return {\n            counts: encodeCompressedRleCounts(runs),\n            encoding: DetectionMaskEncoding.CompressedRle,\n            height,\n            width,\n        };\n    }\n    function assertMaskSize(width, height) {\n        if (!Number.isInteger(width) || width <= 0) {\n            throw new Error(\"Mask width must be a positive integer.\");\n        }\n        if (!Number.isInteger(height) || height <= 0) {\n            throw new Error(\"Mask height must be a positive integer.\");\n        }\n    }\n    function assertMaskDimensions(data, width, height) {\n        assertMaskSize(width, height);\n        if (data.length !== width * height) {\n            throw new Error(\"Mask data length must equal width * height.\");\n        }\n    }\n\n    function centerRectToTopLeftRect(rect) {\n        return {\n            height: rect.height,\n            width: rect.width,\n            x: rect.x - rect.width / 2,\n            y: rect.y - rect.height / 2,\n        };\n    }\n    function getPointsRect(points) {\n        if (points.length === 0) {\n            return undefined;\n        }\n        let minX = Number.POSITIVE_INFINITY;\n        let minY = Number.POSITIVE_INFINITY;\n        let maxX = Number.NEGATIVE_INFINITY;\n        let maxY = Number.NEGATIVE_INFINITY;\n        for (const point of points) {\n            minX = Math.min(minX, point.x);\n            minY = Math.min(minY, point.y);\n            maxX = Math.max(maxX, point.x);\n            maxY = Math.max(maxY, point.y);\n        }\n        return {\n            height: maxY - minY,\n            width: maxX - minX,\n            x: (minX + maxX) / 2,\n            y: (minY + maxY) / 2,\n        };\n    }\n\n    var DetectionPickTarget;\n    (function (DetectionPickTarget) {\n        DetectionPickTarget[\"Box\"] = \"box\";\n        DetectionPickTarget[\"Edge\"] = \"edge\";\n        DetectionPickTarget[\"Keypoint\"] = \"keypoint\";\n        DetectionPickTarget[\"Label\"] = \"label\";\n        DetectionPickTarget[\"Mask\"] = \"mask\";\n        DetectionPickTarget[\"OrientedBox\"] = \"orientedBox\";\n        DetectionPickTarget[\"Polygon\"] = \"polygon\";\n        DetectionPickTarget[\"Polyline\"] = \"polyline\";\n    })(DetectionPickTarget || (DetectionPickTarget = {}));\n    var MediaInteractionMode;\n    (function (MediaInteractionMode) {\n        MediaInteractionMode[\"Always\"] = \"always\";\n        MediaInteractionMode[\"Disabled\"] = \"disabled\";\n        MediaInteractionMode[\"PausedOnly\"] = \"pausedOnly\";\n    })(MediaInteractionMode || (MediaInteractionMode = {}));\n\n    var AnnotationGeometryKind;\n    (function (AnnotationGeometryKind) {\n        AnnotationGeometryKind[\"Box\"] = \"box\";\n        AnnotationGeometryKind[\"Polygon\"] = \"polygon\";\n        AnnotationGeometryKind[\"Polyline\"] = \"polyline\";\n        AnnotationGeometryKind[\"Keypoints\"] = \"keypoints\";\n        AnnotationGeometryKind[\"Mask\"] = \"mask\";\n    })(AnnotationGeometryKind || (AnnotationGeometryKind = {}));\n    var AnnotationGestureStateKind;\n    (function (AnnotationGestureStateKind) {\n        AnnotationGestureStateKind[\"Idle\"] = \"idle\";\n        AnnotationGestureStateKind[\"Creating\"] = \"creating\";\n        AnnotationGestureStateKind[\"Moving\"] = \"moving\";\n        AnnotationGestureStateKind[\"Resizing\"] = \"resizing\";\n        AnnotationGestureStateKind[\"DragSelecting\"] = \"dragSelecting\";\n    })(AnnotationGestureStateKind || (AnnotationGestureStateKind = {}));\n    var AnnotationHandleKind;\n    (function (AnnotationHandleKind) {\n        AnnotationHandleKind[\"Resize\"] = \"resize\";\n        AnnotationHandleKind[\"Vertex\"] = \"vertex\";\n        AnnotationHandleKind[\"AddVertex\"] = \"addVertex\";\n        AnnotationHandleKind[\"Keypoint\"] = \"keypoint\";\n    })(AnnotationHandleKind || (AnnotationHandleKind = {}));\n\n    /** Alignment for strokes applied to closed rendered geometry. */\n    var StrokeAlignment;\n    (function (StrokeAlignment) {\n        StrokeAlignment[\"Inside\"] = \"inside\";\n        StrokeAlignment[\"Center\"] = \"center\";\n        StrokeAlignment[\"Outside\"] = \"outside\";\n    })(StrokeAlignment || (StrokeAlignment = {}));\n\n    var BoxShape;\n    (function (BoxShape) {\n        BoxShape[\"Rect\"] = \"rect\";\n        BoxShape[\"RoundedRect\"] = \"roundedRect\";\n    })(BoxShape || (BoxShape = {}));\n\n    var FocusTargetMode;\n    (function (FocusTargetMode) {\n        FocusTargetMode[\"Hovered\"] = \"hovered\";\n        FocusTargetMode[\"Selected\"] = \"selected\";\n        FocusTargetMode[\"HoveredAndSelected\"] = \"hoveredAndSelected\";\n        FocusTargetMode[\"Ambient\"] = \"ambient\";\n    })(FocusTargetMode || (FocusTargetMode = {}));\n\n    var DetectionInteractionState;\n    (function (DetectionInteractionState) {\n        DetectionInteractionState[\"Hovered\"] = \"hovered\";\n        DetectionInteractionState[\"Selected\"] = \"selected\";\n    })(DetectionInteractionState || (DetectionInteractionState = {}));\n\n    var LabelPlacement;\n    (function (LabelPlacement) {\n        LabelPlacement[\"Top\"] = \"top\";\n        LabelPlacement[\"Bottom\"] = \"bottom\";\n        LabelPlacement[\"InsideTop\"] = \"insideTop\";\n        LabelPlacement[\"InsideBottom\"] = \"insideBottom\";\n        LabelPlacement[\"Center\"] = \"center\";\n    })(LabelPlacement || (LabelPlacement = {}));\n    var LabelVisibilityMode;\n    (function (LabelVisibilityMode) {\n        LabelVisibilityMode[\"Always\"] = \"always\";\n        LabelVisibilityMode[\"HoveredOnly\"] = \"hoveredOnly\";\n    })(LabelVisibilityMode || (LabelVisibilityMode = {}));\n\n    var MaskRenderMode;\n    (function (MaskRenderMode) {\n        MaskRenderMode[\"FillAndStroke\"] = \"fillAndStroke\";\n        MaskRenderMode[\"FillOnly\"] = \"fillOnly\";\n        MaskRenderMode[\"StrokeOnly\"] = \"strokeOnly\";\n    })(MaskRenderMode || (MaskRenderMode = {}));\n\n    /**\n     * Discriminator for renderer-neutral shape draw instructions.\n     */\n    var ShapeInstructionKind;\n    (function (ShapeInstructionKind) {\n        ShapeInstructionKind[\"Ellipse\"] = \"ellipse\";\n        ShapeInstructionKind[\"Marker\"] = \"marker\";\n        ShapeInstructionKind[\"Path\"] = \"path\";\n    })(ShapeInstructionKind || (ShapeInstructionKind = {}));\n    var MarkerShape;\n    (function (MarkerShape) {\n        MarkerShape[\"Circle\"] = \"circle\";\n        MarkerShape[\"Cross\"] = \"cross\";\n        MarkerShape[\"Square\"] = \"square\";\n        MarkerShape[\"Triangle\"] = \"triangle\";\n    })(MarkerShape || (MarkerShape = {}));\n    /**\n     * Coordinate space for marker sizing. Media sizes scale with the viewport;\n     * screen sizes stay constant on screen, matching stroke-width semantics.\n     */\n    var MarkerSizeSpace;\n    (function (MarkerSizeSpace) {\n        MarkerSizeSpace[\"Media\"] = \"media\";\n        MarkerSizeSpace[\"Screen\"] = \"screen\";\n    })(MarkerSizeSpace || (MarkerSizeSpace = {}));\n\n    var PercentageBarPlacement;\n    (function (PercentageBarPlacement) {\n        PercentageBarPlacement[\"Top\"] = \"top\";\n        PercentageBarPlacement[\"Bottom\"] = \"bottom\";\n        PercentageBarPlacement[\"InsideTop\"] = \"insideTop\";\n        PercentageBarPlacement[\"InsideBottom\"] = \"insideBottom\";\n    })(PercentageBarPlacement || (PercentageBarPlacement = {}));\n\n    var KeypointMarkerShape;\n    (function (KeypointMarkerShape) {\n        KeypointMarkerShape[\"Circle\"] = \"circle\";\n        KeypointMarkerShape[\"Cross\"] = \"cross\";\n    })(KeypointMarkerShape || (KeypointMarkerShape = {}));\n\n    /**\n     * What the stored values of a depth map measure.\n     *\n     * Every kind stores 0 where there is no depth.\n     */\n    const DepthMapKind = {\n        /** Stereo disparity in pixels of the map. Larger is nearer. */\n        DisparityPx: \"disparity_px\",\n        /** Metric depth along the optical axis in metres. Smaller is nearer. */\n        DepthM: \"depth_m\",\n        /**\n         * Unitless inverse depth up to an unknown scale and shift, as monocular\n         * models produce it. Larger is nearer; it has no metric depth.\n         */\n        RelativeInverse: \"relative_inverse\",\n    };\n    /**\n     * The quantity a depth renderer colours.\n     *\n     * Disparity is inverse depth, so it spends colour on near detail the way\n     * stereo measures it. Either way the nearest end of the range is the warm or\n     * bright end of the colour table.\n     */\n    const DepthQuantity = {\n        Disparity: \"disparity\",\n        Depth: \"depth\",\n    };\n    const DepthColormap = {\n        Turbo: \"turbo\",\n        Viridis: \"viridis\",\n        Cividis: \"cividis\",\n        Inferno: \"inferno\",\n        Magma: \"magma\",\n        Grayscale: \"grayscale\",\n    };\n    /** How a depth map is sampled where one map pixel does not cover one media pixel. */\n    const DepthSampling = {\n        /** Nearest when the map is at least media size, edge-aware otherwise. */\n        Auto: \"auto\",\n        Nearest: \"nearest\",\n        /**\n         * Bilinear over valid neighbours only, falling back to the nearest one\n         * across a depth edge, so objects never bleed into the background.\n         */\n        EdgeAware: \"edge-aware\",\n    };\n    /**\n     * The luma range a depth preview video's codes are written in.\n     *\n     * TV range is what browsers' hardware decoders return as written; a decoder\n     * may squeeze full range into TV range or move codes converting it to RGB.\n     */\n    const DepthPreviewLevels = {\n        /** Every code from 0 to 255; the top code is 255. */\n        Full: \"full\",\n        /** Limited range: black is 16 and the top code is 235. */\n        Tv: \"tv\",\n    };\n    new Set(Object.values(DepthColormap));\n    new Set(Object.values(DepthQuantity));\n    new Set(Object.values(DepthSampling));\n    function rasterizePolygonToMask(points, dimensions) {\n        const data = createEmptyMask(dimensions);\n        if (points.length < 3) {\n            return data;\n        }\n        const bounds = centerRectToTopLeftRect(getPointsRect(points));\n        const startY = Math.max(0, Math.floor(bounds.y));\n        const endY = Math.min(dimensions.height - 1, Math.ceil(bounds.y + bounds.height));\n        for (let y = startY; y <= endY; y += 1) {\n            const scanY = y + 0.5;\n            const intersections = [];\n            for (let index = 0; index < points.length; index += 1) {\n                const current = points[index];\n                const next = points[(index + 1) % points.length];\n                if ((current.y <= scanY && next.y > scanY) ||\n                    (next.y <= scanY && current.y > scanY)) {\n                    const ratio = (scanY - current.y) / (next.y - current.y);\n                    intersections.push(current.x + ratio * (next.x - current.x));\n                }\n            }\n            intersections.sort((left, right) => left - right);\n            for (let index = 0; index < intersections.length - 1; index += 2) {\n                const left = Math.max(0, Math.round(intersections[index]));\n                const right = Math.min(dimensions.width, Math.round(intersections[index + 1]));\n                for (let x = left; x < right; x += 1) {\n                    data[y * dimensions.width + x] = 1;\n                }\n            }\n        }\n        return data;\n    }\n    function createEmptyMask(dimensions) {\n        if (!Number.isInteger(dimensions.width) ||\n            dimensions.width <= 0 ||\n            !Number.isInteger(dimensions.height) ||\n            dimensions.height <= 0) {\n            throw new Error(\"Media dimensions must be positive integers.\");\n        }\n        return new Uint8Array(dimensions.width * dimensions.height);\n    }\n\n    /**\n     * Palette slots an id raster can name, one of them the background. A GLSL\n     * fragment stage is guaranteed only 224 uniform vectors, and a palette entry\n     * costs 2.25 of them, so this stays a multiple of four and well inside that\n     * budget; past it a frame draws from the RGBA composite instead.\n     */\n    const MAX_ID_MASK_PALETTE_ENTRIES = 80;\n    const MAX_ID_MASK_STROKE_WIDTH = 16;\n    function createIdMaskFrame(instructions, options = {}) {\n        if (instructions.length === 0) {\n            return undefined;\n        }\n        /* Pixel-grid dimensions use integer parts throughout allocation and RLE\n           traversal. */\n        const maskWidth = Math.floor(Math.max(...instructions.map(({ mask }) => mask.width)));\n        const maskHeight = Math.floor(Math.max(...instructions.map(({ mask }) => mask.height)));\n        const width = resolveRasterWidth(maskWidth, options.maxWidth);\n        const height = width === maskWidth\n            ? maskHeight\n            : Math.max(1, Math.round((width * maskHeight) / maskWidth));\n        const scaledAxes = width === maskWidth\n            ? undefined\n            : createScaledMaskAxes({ height, maskHeight, maskWidth, width });\n        const data = new Uint8Array(new ArrayBuffer(width * height));\n        const fillPalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));\n        const strokePalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));\n        const strokeWidths = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4));\n        let hasStroke = false;\n        let maxStrokeWidth = 0;\n        for (const instruction of instructions) {\n            const detectionMaskId = resolveIdMaskPaletteId(instruction.detectionIndex);\n            if (detectionMaskId === undefined) {\n                return undefined;\n            }\n            writeIdMaskPaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);\n            if (instruction.stroke && instruction.stroke.width > 0) {\n                const strokeWidth = resolveIdMaskStrokeTexels(instruction.stroke.width, maskWidth, width);\n                hasStroke = true;\n                strokeWidths[detectionMaskId] = strokeWidth;\n                maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth);\n                writeIdMaskPaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);\n            }\n            if (scaledAxes) {\n                writeScaledMaskRuns(data, scaledAxes, instruction.mask, detectionMaskId);\n            }\n            else {\n                writeMaskRuns(data, width, instruction.mask, detectionMaskId);\n            }\n        }\n        return {\n            data,\n            fillPalette,\n            hasStroke,\n            height,\n            maxStrokeWidth,\n            sourceWidth: maskWidth,\n            strokePalette,\n            strokeWidths,\n            width,\n        };\n    }\n    /**\n     * Compressed RLE counts runs down each column in turn, so a foreground run is\n     * a contiguous walk down one column that wraps into the next.\n     */\n    function writeMaskRuns(data, frameWidth, mask, detectionMaskId) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = Math.floor(mask.width);\n        const maskHeight = Math.floor(mask.height);\n        let maskOffset = 0;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let x = Math.floor(maskOffset / maskHeight);\n            let y = maskOffset - x * maskHeight;\n            let frameOffset = y * frameWidth + x;\n            for (let step = 0; step < runLength; step += 1) {\n                if (x >= maskWidth) {\n                    break;\n                }\n                data[frameOffset] = detectionMaskId;\n                y += 1;\n                frameOffset += frameWidth;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                    frameOffset = x;\n                }\n            }\n            maskOffset += runLength;\n        }\n    }\n    /**\n     * The scaled twin of writeMaskRuns. Every source pixel marks the texel it lands\n     * in, so a mask keeps every part of itself the smaller raster can hold and\n     * gains up to a texel at its edges.\n     */\n    function writeScaledMaskRuns(data, axes, mask, detectionMaskId) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = Math.floor(mask.width);\n        const maskHeight = Math.floor(mask.height);\n        let maskOffset = 0;\n        const stride = axes.stride;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let x = Math.floor(maskOffset / maskHeight);\n            let y = maskOffset - x * maskHeight;\n            let remaining = runLength;\n            /* A run walks down one column and wraps into the next, so it splits into\n               column-sized segments. Within a segment the destination offset only ever\n               steps by the row pitch or stays put: createMaskAxisMap builds\n               `rows[i] = min(height - 1, floor(i * scale)) * width` with scale <= 1, so\n               consecutive entries differ by exactly 0 or exactly `width`. Walking the\n               destination directly therefore touches the same bytes the per-pixel loop\n               touched, and drops the bounds test, the wrap test and one typed-array\n               load from every source pixel. Where the scale collapses several source\n               rows onto one destination row, this writes that byte once instead of\n               once per source row. */\n            while (remaining > 0 && x < maskWidth) {\n                const span = Math.min(remaining, maskHeight - y);\n                const column = axes.columns[x];\n                const first = axes.rows[y];\n                const last = axes.rows[y + span - 1];\n                for (let offset = first; offset <= last; offset += stride) {\n                    data[offset + column] = detectionMaskId;\n                }\n                remaining -= span;\n                y += span;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                }\n            }\n            maskOffset += runLength;\n        }\n    }\n    function resolveRasterWidth(maskWidth, maxWidth) {\n        return maxWidth !== undefined && maxWidth > 0 && maxWidth < maskWidth\n            ? Math.max(1, Math.floor(maxWidth))\n            : maskWidth;\n    }\n    /**\n     * Converts a source-grid stroke width into raster texels. Fractional widths\n     * let coverage shaders draw a border within a texel. The ceiling bounds the\n     * neighbourhood the shaders scan.\n     */\n    function resolveIdMaskStrokeTexels(strokeWidth, maskWidth, rasterWidth) {\n        const scale = maskWidth > 0 ? rasterWidth / maskWidth : 1;\n        return Math.min(strokeWidth * scale, MAX_ID_MASK_STROKE_WIDTH);\n    }\n    function createScaledMaskAxes(frame) {\n        return {\n            columns: createMaskAxisMap(frame.maskWidth, frame.width, 1),\n            rows: createMaskAxisMap(frame.maskHeight, frame.height, frame.width),\n            stride: frame.width,\n        };\n    }\n    /** Rows hold their destination offset, so writing a run is two lookups. */\n    function createMaskAxisMap(sourceLength, targetLength, stride) {\n        const map = new Int32Array(sourceLength);\n        const scale = targetLength / sourceLength;\n        for (let index = 0; index < sourceLength; index += 1) {\n            map[index] = Math.min(targetLength - 1, Math.floor(index * scale)) * stride;\n        }\n        return map;\n    }\n    /**\n     * The palette slot a detection index names, or undefined when the palette has\n     * no slot for it. Slot zero is the background, so the ids start at one and the\n     * last detection the palette can name sits one index below the last slot.\n     */\n    function resolveIdMaskPaletteId(detectionIndex) {\n        const detectionMaskId = detectionIndex + 1;\n        return detectionMaskId > 0 && detectionMaskId < MAX_ID_MASK_PALETTE_ENTRIES\n            ? detectionMaskId\n            : undefined;\n    }\n    function writeIdMaskPaletteEntry(palette, detectionMaskId, color, alpha) {\n        const offset = detectionMaskId * 4;\n        palette[offset] = ((color >> 16) & 0xff) / 255;\n        palette[offset + 1] = ((color >> 8) & 0xff) / 255;\n        palette[offset + 2] = (color & 0xff) / 255;\n        palette[offset + 3] = Math.max(0, Math.min(alpha, 1));\n    }\n    new Set(Object.values(DepthPreviewLevels));\n    new Set(Object.values(DepthMapKind));\n\n    var MediaRendererFit;\n    (function (MediaRendererFit) {\n        /**\n         * Preserve media aspect ratio and fit the full frame inside the canvas.\n         */\n        MediaRendererFit[\"Contain\"] = \"contain\";\n        /**\n         * Preserve media aspect ratio and fill the canvas, cropping if necessary.\n         */\n        MediaRendererFit[\"Cover\"] = \"cover\";\n    })(MediaRendererFit || (MediaRendererFit = {}));\n    /**\n     * Playback lifecycle state reported by a platform renderer.\n     */\n    var MediaRendererPlaybackState;\n    (function (MediaRendererPlaybackState) {\n        MediaRendererPlaybackState[\"Loading\"] = \"loading\";\n        MediaRendererPlaybackState[\"Ready\"] = \"ready\";\n        MediaRendererPlaybackState[\"Playing\"] = \"playing\";\n        MediaRendererPlaybackState[\"Buffering\"] = \"buffering\";\n        MediaRendererPlaybackState[\"Paused\"] = \"paused\";\n        MediaRendererPlaybackState[\"Error\"] = \"error\";\n        MediaRendererPlaybackState[\"Destroyed\"] = \"destroyed\";\n    })(MediaRendererPlaybackState || (MediaRendererPlaybackState = {}));\n    /**\n     * Stable classification of a media failure.\n     *\n     * Applications branch on these kinds instead of parsing decoder, demuxer, or\n     * container error text, and still own their localized user-facing copy. New\n     * kinds may be added over time, so treat unrecognized values like `Unknown`.\n     */\n    var MediaErrorKind;\n    (function (MediaErrorKind) {\n        /** The media could not be opened or read, or was refused before any read. */\n        MediaErrorKind[\"Unreadable\"] = \"unreadable\";\n        /** The container or codec is not supported by this platform. */\n        MediaErrorKind[\"UnsupportedFormat\"] = \"unsupportedFormat\";\n        /** The media opened but carries no usable video track. */\n        MediaErrorKind[\"NoVideoTrack\"] = \"noVideoTrack\";\n        /** Decoding a sample failed after the source opened. */\n        MediaErrorKind[\"Decode\"] = \"decode\";\n        /** The media could not be fetched. */\n        MediaErrorKind[\"Network\"] = \"network\";\n        /** The host environment lacks the APIs this media source requires. */\n        MediaErrorKind[\"EnvironmentUnsupported\"] = \"environmentUnsupported\";\n        /** The failure could not be classified. */\n        MediaErrorKind[\"Unknown\"] = \"unknown\";\n    })(MediaErrorKind || (MediaErrorKind = {}));\n    /**\n     * Lower-level media source readiness.\n     */\n    var MediaSourceStatus;\n    (function (MediaSourceStatus) {\n        MediaSourceStatus[\"Loading\"] = \"loading\";\n        MediaSourceStatus[\"Ready\"] = \"ready\";\n        MediaSourceStatus[\"Error\"] = \"error\";\n        MediaSourceStatus[\"Destroyed\"] = \"destroyed\";\n    })(MediaSourceStatus || (MediaSourceStatus = {}));\n    /**\n     * Current renderer state.\n     */\n    /**\n     * What a playback gate holds back.\n     *\n     * A source the renderer pulls samples from can be held between any two frames,\n     * because the renderer decides when each one is drawn. A source that presents\n     * its own frames owns the playhead, so holding it means stopping the producer\n     * and starting it again, and a gate that stops one has to bound its own wait\n     * or a producer nothing answers for never runs again.\n     */\n    var PlaybackGateReach;\n    (function (PlaybackGateReach) {\n        /** No gate: the picture moves and unprepared layers are absent from it. */\n        PlaybackGateReach[\"Off\"] = \"off\";\n        /**\n         * Playback waits to begin, and stops again at any frame whose artifacts are\n         * missing, until they arrive or the gate's own wait bound gives up on them.\n         */\n        PlaybackGateReach[\"EveryFrame\"] = \"everyFrame\";\n    })(PlaybackGateReach || (PlaybackGateReach = {}));\n\n    /**\n     * Media-session operating mode.\n     *\n     * Core owns the names because file-like and stream-like lifecycle choices are\n     * platform-neutral. Platform packages decide how these modes tune media,\n     * storage, and renderer defaults.\n     */\n    var MediaSessionMode;\n    (function (MediaSessionMode) {\n        /**\n         * Finite media. Defaults usually favor seek/replay and persistent detection\n         * storage.\n         */\n        MediaSessionMode[\"File\"] = \"file\";\n        /**\n         * Live or append-only media. Defaults usually favor rolling windows and\n         * bounded retention.\n         */\n        MediaSessionMode[\"Stream\"] = \"stream\";\n    })(MediaSessionMode || (MediaSessionMode = {}));\n    /**\n     * Aggregate lifecycle state for a media session.\n     */\n    var MediaSessionStatus;\n    (function (MediaSessionStatus) {\n        MediaSessionStatus[\"Buffering\"] = \"buffering\";\n        MediaSessionStatus[\"Destroyed\"] = \"destroyed\";\n        MediaSessionStatus[\"Error\"] = \"error\";\n        MediaSessionStatus[\"Loading\"] = \"loading\";\n        MediaSessionStatus[\"Paused\"] = \"paused\";\n        MediaSessionStatus[\"Playing\"] = \"playing\";\n        MediaSessionStatus[\"Processing\"] = \"processing\";\n        MediaSessionStatus[\"Ready\"] = \"ready\";\n    })(MediaSessionStatus || (MediaSessionStatus = {}));\n    /**\n     * Subsystem currently affecting session readiness or presentation.\n     */\n    var MediaSessionActivityKind;\n    (function (MediaSessionActivityKind) {\n        /**\n         * Playback is held waiting for a producer to emit detections for the frame\n         * about to be shown, which is a wait on inference rather than on transfer or\n         * decode. `DetectionsBuffering` is the transfer of detections that already\n         * exist, and `PlaybackBuffering` is the wait for media bytes.\n         */\n        MediaSessionActivityKind[\"DetectionsAwaitingCoverage\"] = \"detectionsAwaitingCoverage\";\n        MediaSessionActivityKind[\"DetectionsBuffering\"] = \"detectionsBuffering\";\n        MediaSessionActivityKind[\"DetectionsLoading\"] = \"detectionsLoading\";\n        MediaSessionActivityKind[\"Error\"] = \"error\";\n        MediaSessionActivityKind[\"MediaNormalizing\"] = \"mediaNormalizing\";\n        MediaSessionActivityKind[\"MediaOpening\"] = \"mediaOpening\";\n        /**\n         * The picture is waiting on media the source has not handed over yet, which\n         * is the bytes and their decode rather than anything downstream of them.\n         * `PlaybackBuffering` is what a transport reports once it has already\n         * stopped; this is reported from the read itself, including the reads a seek\n         * makes while the transport still reads as paused.\n         */\n        MediaSessionActivityKind[\"MediaSourceReading\"] = \"mediaSourceReading\";\n        MediaSessionActivityKind[\"PlaybackBuffering\"] = \"playbackBuffering\";\n        /**\n         * The render-preparation gate held the picture for artifacts that never\n         * arrived and let it go. Nothing is blocked: the frames reaching the screen\n         * are the ones whose artifacts were given up on. What is waited on is\n         * preparation finishing another frame, which is what lets the gate hold the\n         * picture again; `RenderPreparing` covers the holds that are running.\n         */\n        MediaSessionActivityKind[\"RenderPreparationAbandoned\"] = \"renderPreparationAbandoned\";\n        MediaSessionActivityKind[\"RenderPreparing\"] = \"renderPreparing\";\n    })(MediaSessionActivityKind || (MediaSessionActivityKind = {}));\n    /**\n     * State of one session activity.\n     */\n    var MediaSessionActivityStatus;\n    (function (MediaSessionActivityStatus) {\n        MediaSessionActivityStatus[\"Error\"] = \"error\";\n        MediaSessionActivityStatus[\"Running\"] = \"running\";\n        MediaSessionActivityStatus[\"Waiting\"] = \"waiting\";\n    })(MediaSessionActivityStatus || (MediaSessionActivityStatus = {}));\n\n    /** Builds compact, independent alpha crops so overlapping masks stay exact. */\n    function createRegionMaskCoverageFrame(instructions) {\n        const entries = [];\n        for (const instruction of instructions) {\n            if (!instruction.regionCoverageMask) {\n                continue;\n            }\n            const entry = cropCoverageMask(instruction.detectionIndex, decodeCompressedRleMask(instruction.regionCoverageMask));\n            if (entry) {\n                entries.push(entry);\n            }\n        }\n        return entries.length > 0 ? { entries } : undefined;\n    }\n    function cropCoverageMask(detectionIndex, decodedMask) {\n        let minX = decodedMask.width;\n        let minY = decodedMask.height;\n        let maxX = -1;\n        let maxY = -1;\n        for (let y = 0; y < decodedMask.height; y += 1) {\n            for (let x = 0; x < decodedMask.width; x += 1) {\n                if (!decodedMask.data[y * decodedMask.width + x]) {\n                    continue;\n                }\n                minX = Math.min(minX, x);\n                minY = Math.min(minY, y);\n                maxX = Math.max(maxX, x);\n                maxY = Math.max(maxY, y);\n            }\n        }\n        if (maxX < minX || maxY < minY) {\n            return undefined;\n        }\n        const width = maxX - minX + 1;\n        const height = maxY - minY + 1;\n        const data = new Uint8Array(new ArrayBuffer(width * height));\n        for (let y = minY; y <= maxY; y += 1) {\n            for (let x = minX; x <= maxX; x += 1) {\n                if (!decodedMask.data[y * decodedMask.width + x]) {\n                    continue;\n                }\n                data[(y - minY) * width + (x - minX)] = 255;\n            }\n        }\n        return { data, detectionIndex, height, width, x: minX, y: minY };\n    }\n    function compositeMaskFrame(instructions) {\n        const maskInstructions = materializeMaskInstructions(instructions);\n        if (maskInstructions.length === 0) {\n            return undefined;\n        }\n        const width = Math.max(...maskInstructions.map(({ mask }) => mask.width));\n        const height = Math.max(...maskInstructions.map(({ mask }) => mask.height));\n        const data = new Uint8ClampedArray(new ArrayBuffer(width * height * 4));\n        for (const instruction of maskInstructions) {\n            compositeInstruction(data, width, instruction);\n        }\n        return { data, height, width };\n    }\n    function createIdMaskRasterFrame(instructions, maxRasterWidth) {\n        try {\n            return createIdMaskFrame(materializeMaskInstructions(instructions).map((instruction) => instruction.stroke?.widthUnit === \"screen\"\n                ? { ...instruction, stroke: undefined }\n                : instruction), {\n                maxWidth: maxRasterWidth,\n            });\n        }\n        catch {\n            // The id raster is the fast path, not the only one: answering with nothing\n            // puts the caller on the RGBA composite, which draws the same picture.\n            return undefined;\n        }\n    }\n    /**\n     * Whether the palette has a slot for every detection this frame masks. An id\n     * names a detection by its index in the frame, so one masked detection past the\n     * last slot leaves the whole frame without an id raster however few masks it\n     * carries.\n     */\n    function canIdMaskPaletteNameFrame(instructions) {\n        return instructions.every((instruction) => instruction.visible === false ||\n            resolveIdMaskPaletteId(instruction.detectionIndex) !== undefined);\n    }\n    function createIdMaskPlane(instructions, maxRasterWidth) {\n        // The plane carries the ids a failed cook could not. A frame the palette\n        // cannot name has none to carry, and cooking it again reaches the same\n        // refusal after rasterizing every mask a second time.\n        if (!canIdMaskPaletteNameFrame(instructions)) {\n            return undefined;\n        }\n        const frame = createIdMaskRasterFrame(instructions, maxRasterWidth);\n        return frame\n            ? { data: frame.data, height: frame.height, width: frame.width }\n            : undefined;\n    }\n    function compositeInstruction(rgba, canvasWidth, instruction) {\n        const fill = resolveRgbaColor(instruction.color, instruction.alpha);\n        const bounds = compositeMaskFill(rgba, canvasWidth, instruction.mask, fill);\n        if (instruction.stroke &&\n            instruction.stroke.widthUnit !== \"screen\" &&\n            bounds) {\n            compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, instruction.stroke);\n        }\n    }\n    function createMaskScreenStrokes(instructions, width, height, preparedRaster) {\n        const outlined = instructions.filter(({ visible, stroke }) => visible !== false &&\n            stroke?.widthUnit === \"screen\" &&\n            stroke.width > 0 &&\n            stroke.alpha > 0);\n        if (outlined.length === 0)\n            return undefined;\n        const masks = materializeMaskInstructions(instructions);\n        const raster = preparedRaster ?? new Uint32Array(width * height);\n        if (!preparedRaster) {\n            for (const { detectionIndex, mask } of masks) {\n                const counts = decodeCompressedRleCounts(mask.counts);\n                let offset = 0;\n                for (let index = 0; index < counts.length; index += 1) {\n                    const length = counts[index];\n                    if (index % 2 === 1) {\n                        for (let pixel = offset; pixel < offset + length; pixel += 1) {\n                            const x = Math.floor(pixel / mask.height);\n                            const y = pixel % mask.height;\n                            raster[y * width + x] = detectionIndex + 1;\n                        }\n                    }\n                    offset += length;\n                }\n            }\n        }\n        const paths = traceMaskOutlinePaths(raster, width, height, new Set(outlined.map(({ detectionIndex }) => detectionIndex + 1)));\n        return outlined.map(({ detectionIndex, stroke }) => ({\n            detectionIndex,\n            alpha: stroke.alpha,\n            color: stroke.color,\n            width: stroke.width,\n            paths: paths.get(detectionIndex + 1) ?? [],\n        }));\n    }\n    function materializeMaskInstructions(instructions) {\n        return instructions\n            .filter((instruction) => instruction.visible !== false)\n            .map((instruction) => {\n            if (instruction.mask) {\n                return instruction;\n            }\n            const { height, points, width } = instruction.polygon;\n            return {\n                alpha: instruction.alpha,\n                color: instruction.color,\n                detectionIndex: instruction.detectionIndex,\n                mask: encodeBinaryMask(rasterizePolygonToMask(points, { height, width }), width, height),\n                stroke: instruction.stroke,\n            };\n        });\n    }\n    /**\n     * Compressed RLE counts runs down each column in turn, so a foreground run is\n     * a contiguous walk down one column that wraps into the next.\n     */\n    function compositeMaskFill(rgba, canvasWidth, mask, fill) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = mask.width;\n        const maskHeight = mask.height;\n        const maskArea = maskWidth * maskHeight;\n        let maskOffset = 0;\n        let minX = maskWidth;\n        let minY = maskHeight;\n        let maxX = -1;\n        let maxY = -1;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let columnX = Math.floor(maskOffset / maskHeight);\n            let columnY = maskOffset - columnX * maskHeight;\n            for (let step = 0; step < runLength; step += 1) {\n                // A run can outlast the columns the mask has; the pixel it then names\n                // is wherever that column-major offset lands when read back row-major.\n                const rowMajorOffset = columnY * maskWidth + columnX;\n                if (rowMajorOffset < maskArea) {\n                    const x = rowMajorOffset % maskWidth;\n                    const y = (rowMajorOffset - x) / maskWidth;\n                    writePixel(rgba, canvasWidth, x, y, fill);\n                    minX = Math.min(minX, x);\n                    minY = Math.min(minY, y);\n                    maxX = Math.max(maxX, x);\n                    maxY = Math.max(maxY, y);\n                }\n                columnY += 1;\n                if (columnY === maskHeight) {\n                    columnY = 0;\n                    columnX += 1;\n                }\n            }\n            maskOffset += runLength;\n        }\n        return maxX < minX || maxY < minY ? undefined : { maxX, maxY, minX, minY };\n    }\n    function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke) {\n        const width = Math.round(stroke.width);\n        if (width <= 0) {\n            return;\n        }\n        const strokeColor = resolveRgbaColor(stroke.color, stroke.alpha);\n        for (let y = bounds.minY; y <= bounds.maxY; y += 1) {\n            for (let x = bounds.minX; x <= bounds.maxX; x += 1) {\n                if (!isMaskPixel(decodedMask, x, y) ||\n                    !isBoundaryPixel(decodedMask, x, y)) {\n                    continue;\n                }\n                for (let offsetY = -width; offsetY <= width; offsetY += 1) {\n                    for (let offsetX = -width; offsetX <= width; offsetX += 1) {\n                        const strokeX = x + offsetX;\n                        const strokeY = y + offsetY;\n                        if (isOutsideMaskBounds(decodedMask, strokeX, strokeY) ||\n                            isMaskPixel(decodedMask, strokeX, strokeY)) {\n                            continue;\n                        }\n                        writePixel(rgba, canvasWidth, strokeX, strokeY, strokeColor);\n                    }\n                }\n            }\n        }\n    }\n    function isBoundaryPixel(mask, x, y) {\n        for (let offsetY = -1; offsetY <= 1; offsetY += 1) {\n            for (let offsetX = -1; offsetX <= 1; offsetX += 1) {\n                if (offsetX === 0 && offsetY === 0) {\n                    continue;\n                }\n                const neighborX = x + offsetX;\n                const neighborY = y + offsetY;\n                if (isOutsideMaskBounds(mask, neighborX, neighborY) ||\n                    !isMaskPixel(mask, neighborX, neighborY)) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n    function isMaskPixel(mask, x, y) {\n        return mask.data[y * mask.width + x] === 1;\n    }\n    function isOutsideMaskBounds(mask, x, y) {\n        return x < 0 || y < 0 || x >= mask.width || y >= mask.height;\n    }\n    function resolveRgbaColor(color, alpha) {\n        return {\n            alpha: Math.round(Math.max(0, Math.min(alpha, 1)) * 255),\n            blue: color & 0xff,\n            green: (color >> 8) & 0xff,\n            red: (color >> 16) & 0xff,\n        };\n    }\n    function writePixel(rgba, canvasWidth, x, y, color) {\n        const rgbaOffset = (y * canvasWidth + x) * 4;\n        rgba[rgbaOffset] = color.red;\n        rgba[rgbaOffset + 1] = color.green;\n        rgba[rgbaOffset + 2] = color.blue;\n        rgba[rgbaOffset + 3] = color.alpha;\n    }\n\n    var PreparedMaskFrameKind;\n    (function (PreparedMaskFrameKind) {\n        PreparedMaskFrameKind[\"IdMask\"] = \"idMask\";\n        PreparedMaskFrameKind[\"RgbaImage\"] = \"rgbaImage\";\n    })(PreparedMaskFrameKind || (PreparedMaskFrameKind = {}));\n    /**\n     * How an id raster is laid out for the texture it is uploaded into. WebGPU\n     * takes any bytesPerRow, so ids go up one byte per pixel. WebGL aligns every\n     * uploaded row to four bytes and rejects a single-channel upload whose width\n     * is not a multiple of four, which is what the four-channel layout is for.\n     */\n    var IdMaskTextureFormat;\n    (function (IdMaskTextureFormat) {\n        IdMaskTextureFormat[\"R8\"] = \"r8unorm\";\n        IdMaskTextureFormat[\"Rgba8\"] = \"rgba8unorm\";\n    })(IdMaskTextureFormat || (IdMaskTextureFormat = {}));\n\n    const DEFAULT_STOPS = [\n        { position: 0, color: 0xffd600 },\n        { position: 0.35, color: 0xffd600 },\n        { position: 0.7, color: 0xff7a00 },\n        { position: 1, color: 0xdc1e1e },\n    ];\n    const MAX_HEATMAP_PIXELS = 16_777_216;\n    const MAX_HEATMAP_SIDE = 8_192;\n    /** Turns semantic scores into an RGBA raster; no palette enters cold data. */\n    function colorizeHeatmap(map, renderer) {\n        const { bounds, width, height, values } = map;\n        if (!Number.isFinite(bounds?.x) ||\n            !Number.isFinite(bounds?.y) ||\n            !Number.isFinite(bounds?.width) ||\n            !Number.isFinite(bounds?.height) ||\n            bounds.width <= 0 ||\n            bounds.height <= 0 ||\n            !Number.isInteger(width) ||\n            !Number.isInteger(height) ||\n            width <= 0 ||\n            height <= 0 ||\n            width > MAX_HEATMAP_SIDE ||\n            height > MAX_HEATMAP_SIDE ||\n            width * height > MAX_HEATMAP_PIXELS ||\n            !(Array.isArray(values) ||\n                values instanceof Float32Array ||\n                values instanceof Float64Array ||\n                values instanceof Uint16Array) ||\n            values.length !== width * height) {\n            throw new RangeError(\"Heatmap bounds and dimensions must be valid, match row-major values, and fit the raster limit.\");\n        }\n        const scale = map.valueScale ?? 1;\n        const threshold = (map.threshold ?? 0) * (renderer.thresholdScale ?? 1);\n        const maximumScore = renderer.maximumScore ?? 1;\n        const opacity = clamp01(renderer.opacity ?? 1);\n        const minimumAlpha = clamp01(renderer.minimumAlpha ?? 0);\n        const stops = renderer.colorStops ?? DEFAULT_STOPS;\n        if (!Number.isFinite(scale) ||\n            scale <= 0 ||\n            !Number.isFinite(threshold) ||\n            !Number.isFinite(maximumScore) ||\n            maximumScore <= 0 ||\n            !Number.isFinite(renderer.thresholdScale ?? 1) ||\n            (renderer.thresholdScale ?? 1) < 0 ||\n            !Number.isFinite(renderer.opacity ?? 1) ||\n            !Number.isFinite(renderer.minimumAlpha ?? 0) ||\n            stops.length === 0 ||\n            stops.some((stop, index) => !Number.isFinite(stop.position) ||\n                stop.position < 0 ||\n                stop.position > 1 ||\n                !Number.isInteger(stop.color) ||\n                stop.color < 0 ||\n                stop.color > 0xffffff ||\n                (index > 0 && stop.position < stops[index - 1].position))) {\n            throw new RangeError(\"Invalid heatmap scale, threshold, or color stops.\");\n        }\n        const rgba = new Uint8ClampedArray(new ArrayBuffer(values.length * 4));\n        if (maximumScore <= threshold || opacity === 0)\n            return rgba;\n        for (let index = 0; index < values.length; index += 1) {\n            const score = values[index] * scale;\n            if (!Number.isFinite(score) || score <= threshold)\n                continue;\n            const color = interpolateColor(stops, clamp01(score / maximumScore));\n            const alphaIntensity = clamp01((score - threshold) / (maximumScore - threshold));\n            const offset = index * 4;\n            rgba[offset] = color >> 16;\n            rgba[offset + 1] = (color >> 8) & 0xff;\n            rgba[offset + 2] = color & 0xff;\n            rgba[offset + 3] = Math.round(255 * opacity * (minimumAlpha + (1 - minimumAlpha) * alphaIntensity));\n        }\n        return rgba;\n    }\n    function interpolateColor(stops, value) {\n        const upperIndex = stops.findIndex((stop) => stop.position >= value);\n        if (upperIndex === -1)\n            return stops[stops.length - 1].color;\n        if (upperIndex === 0)\n            return stops[0].color;\n        const left = stops[upperIndex - 1];\n        const right = stops[upperIndex];\n        const span = right.position - left.position;\n        const ratio = span === 0 ? 1 : (value - left.position) / span;\n        const channel = (shift) => Math.round(((left.color >> shift) & 0xff) * (1 - ratio) +\n            ((right.color >> shift) & 0xff) * ratio);\n        return (channel(16) << 16) | (channel(8) << 8) | channel(0);\n    }\n    function clamp01(value) {\n        return Math.max(0, Math.min(1, value));\n    }\n\n    var HeatmapPreparationWorkerMessageType;\n    (function (HeatmapPreparationWorkerMessageType) {\n        HeatmapPreparationWorkerMessageType[\"Prepare\"] = \"heatmap-prepare\";\n        HeatmapPreparationWorkerMessageType[\"Complete\"] = \"heatmap-complete\";\n        HeatmapPreparationWorkerMessageType[\"Error\"] = \"heatmap-error\";\n    })(HeatmapPreparationWorkerMessageType || (HeatmapPreparationWorkerMessageType = {}));\n\n    var MaskPreparationWorkerMessageType;\n    (function (MaskPreparationWorkerMessageType) {\n        MaskPreparationWorkerMessageType[\"Complete\"] = \"complete\";\n        MaskPreparationWorkerMessageType[\"Empty\"] = \"empty\";\n        MaskPreparationWorkerMessageType[\"Error\"] = \"error\";\n        MaskPreparationWorkerMessageType[\"Prepare\"] = \"prepare\";\n    })(MaskPreparationWorkerMessageType || (MaskPreparationWorkerMessageType = {}));\n\n    /**\n     * Messages between the depth source and the render-preparation worker, which\n     * decodes depth and confidence PNGs, and copies decoded preview frames' luma,\n     * off the main thread. Internal: the worker script is a deployment asset, and\n     * its protocol is not public.\n     */\n    var DepthPreparationWorkerMessageType;\n    (function (DepthPreparationWorkerMessageType) {\n        DepthPreparationWorkerMessageType[\"Decode\"] = \"depth-decode\";\n        DepthPreparationWorkerMessageType[\"Complete\"] = \"depth-decode-complete\";\n        DepthPreparationWorkerMessageType[\"Error\"] = \"depth-decode-error\";\n        DepthPreparationWorkerMessageType[\"PreviewLuma\"] = \"depth-preview-luma\";\n        DepthPreparationWorkerMessageType[\"PreviewLumaComplete\"] = \"depth-preview-luma-complete\";\n    })(DepthPreparationWorkerMessageType || (DepthPreparationWorkerMessageType = {}));\n\n    /*\n     * Grayscale PNG decoding for depth maps and their confidence planes.\n     *\n     * Every image path a browser offers (<img>, createImageBitmap, ImageDecoder,\n     * canvas) hands back 8 bits per channel, so a 16-bit depth PNG is decoded\n     * here: the browser's own zlib inflates the IDAT stream, and the row filters\n     * are undone in JavaScript.\n     *\n     * This module imports nothing, so the render-preparation worker, the main\n     * thread and the depth benchmark all run the same code.\n     */\n    const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];\n    const COLOR_TYPE_GRAY = 0;\n    /** 16384 x 16384, beyond any GPU texture; a header claiming more is refused. */\n    const MAX_PNG_PIXELS = 16_384 * 16_384;\n    async function decodePng16(bytes, options = {}) {\n        const header = readPngHeader(bytes, 16);\n        const rowBytes = header.width * 2 + 1;\n        const raw = await (options.inflate ?? inflateWithDecompressionStream)(header.idat, rowBytes * header.height);\n        const values = new Uint16Array(header.width * header.height);\n        checkInflatedLength(raw, rowBytes * header.height);\n        unfilterGray16(raw, header.width, header.height, values);\n        return {\n            height: header.height,\n            paddedUpload: options.padRowsForWebGl && header.width % 2 === 1\n                ? padRows(values, header.width, header.height)\n                : undefined,\n            values,\n            width: header.width,\n        };\n    }\n    async function decodePng8Gray(bytes, options = {}) {\n        const header = readPngHeader(bytes, 8);\n        const rowBytes = header.width + 1;\n        const raw = await (options.inflate ?? inflateWithDecompressionStream)(header.idat, rowBytes * header.height);\n        const values = new Uint8Array(header.width * header.height);\n        checkInflatedLength(raw, rowBytes * header.height);\n        unfilterGray8(raw, header.width, header.height, values);\n        return { height: header.height, values, width: header.width };\n    }\n    /**\n     * Inflates with the platform's `DecompressionStream(\"deflate\")` (zlib\n     * framing, which is what PNG uses) straight into one buffer of the expected\n     * size, so no second copy joins the output chunks.\n     */\n    async function inflateWithDecompressionStream(chunks, byteLength) {\n        const stream = new DecompressionStream(\"deflate\");\n        const writer = stream.writable.getWriter();\n        const reader = stream.readable.getReader();\n        // Writers split IDAT into many small chunks (libpng's default is 8 KiB).\n        // One write of the joined stream costs a copy of the compressed bytes and\n        // saves a stream round trip per chunk.\n        const zlib = chunks.length === 1 ? chunks[0] : joinChunks(chunks);\n        const writing = (async () => {\n            await writer.write(zlib);\n            await writer.close();\n        })();\n        const output = new Uint8Array(byteLength);\n        let offset = 0;\n        // A corrupt stream rejects both sides; the reader's error is the one thrown.\n        writing.catch(() => undefined);\n        try {\n            for (;;) {\n                const { done, value } = await reader.read();\n                if (done)\n                    break;\n                if (offset + value.byteLength > byteLength) {\n                    throw new RangeError(\"PNG image data is longer than its header says.\");\n                }\n                output.set(value, offset);\n                offset += value.byteLength;\n            }\n            await writing;\n        }\n        catch (error) {\n            await reader.cancel().catch(() => undefined);\n            throw error instanceof RangeError\n                ? error\n                : new RangeError(`PNG image data does not inflate: ${error instanceof Error ? error.message : String(error)}`);\n        }\n        return offset === byteLength ? output : output.subarray(0, offset);\n    }\n    function joinChunks(chunks) {\n        const joined = new Uint8Array(chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0));\n        let offset = 0;\n        for (const chunk of chunks) {\n            joined.set(chunk, offset);\n            offset += chunk.byteLength;\n        }\n        return joined;\n    }\n    function readPngHeader(input, bitDepth) {\n        const bytes = input instanceof Uint8Array ? input : new Uint8Array(input);\n        const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);\n        if (bytes.byteLength < 8 ||\n            PNG_SIGNATURE.some((value, index) => bytes[index] !== value)) {\n            throw new RangeError(\"Not a PNG file.\");\n        }\n        let offset = 8;\n        let width = 0;\n        let height = 0;\n        let sawHeader = false;\n        let sawEnd = false;\n        const idat = [];\n        while (offset + 12 <= bytes.byteLength) {\n            const length = view.getUint32(offset);\n            const type = view.getUint32(offset + 4);\n            const dataStart = offset + 8;\n            const dataEnd = dataStart + length;\n            if (dataEnd + 4 > bytes.byteLength) {\n                throw new RangeError(\"PNG file is truncated.\");\n            }\n            if (type === 0x49484452) {\n                // IHDR\n                if (length !== 13)\n                    throw new RangeError(\"PNG header is malformed.\");\n                width = view.getUint32(dataStart);\n                height = view.getUint32(dataStart + 4);\n                const depth = bytes[dataStart + 8];\n                const colorType = bytes[dataStart + 9];\n                if (bytes[dataStart + 10] !== 0 || bytes[dataStart + 11] !== 0) {\n                    throw new RangeError(\"PNG uses an unknown compression or filter.\");\n                }\n                if (bytes[dataStart + 12] !== 0) {\n                    throw new RangeError(\"Interlaced PNGs are not supported.\");\n                }\n                if (colorType !== COLOR_TYPE_GRAY || depth !== bitDepth) {\n                    throw new RangeError(`Expected a ${bitDepth}-bit grayscale PNG, got bit depth ${depth} with colour type ${colorType}.`);\n                }\n                sawHeader = true;\n            }\n            else if (type === 0x49444154) {\n                // IDAT\n                idat.push(bytes.subarray(dataStart, dataEnd));\n            }\n            else if (type === 0x49454e44) {\n                // IEND\n                sawEnd = true;\n                break;\n            }\n            offset = dataEnd + 4;\n        }\n        if (!sawHeader)\n            throw new RangeError(\"PNG has no header.\");\n        if (!sawEnd)\n            throw new RangeError(\"PNG file is truncated.\");\n        if (width === 0 || height === 0 || width * height > MAX_PNG_PIXELS) {\n            throw new RangeError(`PNG size ${width}x${height} is not supported.`);\n        }\n        if (idat.length === 0)\n            throw new RangeError(\"PNG has no image data.\");\n        return { height, idat, width };\n    }\n    function checkInflatedLength(raw, expected) {\n        if (raw.byteLength !== expected) {\n            throw new RangeError(\"PNG image data is shorter than its header says.\");\n        }\n    }\n    /*\n     * Undoes the row filters of a 16-bit grayscale image and writes host-order\n     * samples, in one pass. Each filter runs on bytes, and the two bytes of a\n     * sample never carry into each other, so the loops keep a sample's high and\n     * low bytes apart and join them only for the store. The previous row is read\n     * back from the output, which already holds it unfiltered; the first row reads\n     * a row of zeros, which is what PNG defines above the image.\n     *\n     * Each filter is its own small function with one loop, called once per row,\n     * so engines compile each loop on its own: SpiderMonkey slowed a Paeth loop\n     * that shared a function with the other filters.\n     */\n    function unfilterGray16(raw, width, height, out) {\n        const rowBytes = width * 2 + 1;\n        const zeroRow = new Uint16Array(width);\n        for (let y = 0; y < height; y += 1) {\n            const filter = raw[y * rowBytes];\n            const unfilterRow = ROW_FILTERS_16[filter];\n            if (!unfilterRow) {\n                throw new RangeError(`PNG row ${y} has unknown filter ${filter}.`);\n            }\n            const o = y * width;\n            unfilterRow(raw, y * rowBytes + 1, out, o, o + width, y === 0 ? zeroRow : out, y === 0 ? 0 : o - width);\n        }\n    }\n    function noneRow16(raw, s, out, o, end) {\n        for (let i = o; i < end; i += 1, s += 2) {\n            out[i] = (raw[s] << 8) | raw[s + 1];\n        }\n    }\n    function subRow16(raw, s, out, o, end) {\n        let hi = 0;\n        let lo = 0;\n        for (let i = o; i < end; i += 1, s += 2) {\n            hi = (raw[s] + hi) & 0xff;\n            lo = (raw[s + 1] + lo) & 0xff;\n            out[i] = (hi << 8) | lo;\n        }\n    }\n    function upRow16(raw, s, out, o, end, prev, p) {\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            out[i] = (((raw[s] + (up >> 8)) & 0xff) << 8) | ((raw[s + 1] + up) & 0xff);\n        }\n    }\n    function averageRow16(raw, s, out, o, end, prev, p) {\n        let hi = 0;\n        let lo = 0;\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            hi = (raw[s] + ((hi + (up >> 8)) >> 1)) & 0xff;\n            lo = (raw[s + 1] + ((lo + (up & 0xff)) >> 1)) & 0xff;\n            out[i] = (hi << 8) | lo;\n        }\n    }\n    /** Paeth: per byte, whichever of left, up and up-left is closest to left + up - up-left. */\n    function paethRow16(raw, s, out, o, end, prev, p) {\n        let hi = 0;\n        let lo = 0;\n        let upLeftHi = 0;\n        let upLeftLo = 0;\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            const upHi = up >> 8;\n            const upLo = up & 0xff;\n            let pa = Math.abs(upHi - upLeftHi);\n            let pb = Math.abs(hi - upLeftHi);\n            let pc = Math.abs(hi + upHi - upLeftHi - upLeftHi);\n            hi =\n                (raw[s] + (pa <= pb && pa <= pc ? hi : pb <= pc ? upHi : upLeftHi)) &\n                    0xff;\n            pa = Math.abs(upLo - upLeftLo);\n            pb = Math.abs(lo - upLeftLo);\n            pc = Math.abs(lo + upLo - upLeftLo - upLeftLo);\n            lo =\n                (raw[s + 1] + (pa <= pb && pa <= pc ? lo : pb <= pc ? upLo : upLeftLo)) &\n                    0xff;\n            out[i] = (hi << 8) | lo;\n            upLeftHi = upHi;\n            upLeftLo = upLo;\n        }\n    }\n    /** Indexed by the PNG filter type byte: None, Sub, Up, Average, Paeth. */\n    const ROW_FILTERS_16 = [\n        noneRow16,\n        subRow16,\n        upRow16,\n        averageRow16,\n        paethRow16,\n    ];\n    function unfilterGray8(raw, width, height, out) {\n        const rowBytes = width + 1;\n        const zeroRow = new Uint8Array(width);\n        for (let y = 0; y < height; y += 1) {\n            const filter = raw[y * rowBytes];\n            const unfilterRow = ROW_FILTERS_8[filter];\n            if (!unfilterRow) {\n                throw new RangeError(`PNG row ${y} has unknown filter ${filter}.`);\n            }\n            const o = y * width;\n            unfilterRow(raw, y * rowBytes + 1, out, o, o + width, y === 0 ? zeroRow : out, y === 0 ? 0 : o - width);\n        }\n    }\n    function noneRow8(raw, s, out, o, end) {\n        out.set(raw.subarray(s, s + end - o), o);\n    }\n    function subRow8(raw, s, out, o, end) {\n        let left = 0;\n        for (let i = o; i < end; i += 1, s += 1) {\n            left = (raw[s] + left) & 0xff;\n            out[i] = left;\n        }\n    }\n    function upRow8(raw, s, out, o, end, prev, p) {\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            out[i] = (raw[s] + prev[p]) & 0xff;\n        }\n    }\n    function averageRow8(raw, s, out, o, end, prev, p) {\n        let left = 0;\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            left = (raw[s] + ((left + prev[p]) >> 1)) & 0xff;\n            out[i] = left;\n        }\n    }\n    function paethRow8(raw, s, out, o, end, prev, p) {\n        let left = 0;\n        let upLeft = 0;\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            const up = prev[p];\n            const pa = Math.abs(up - upLeft);\n            const pb = Math.abs(left - upLeft);\n            const pc = Math.abs(left + up - upLeft - upLeft);\n            left =\n                (raw[s] + (pa <= pb && pa <= pc ? left : pb <= pc ? up : upLeft)) & 0xff;\n            out[i] = left;\n            upLeft = up;\n        }\n    }\n    const ROW_FILTERS_8 = [\n        noneRow8,\n        subRow8,\n        upRow8,\n        averageRow8,\n        paethRow8,\n    ];\n    /**\n     * WebGL unpacks rows on four-byte boundaries, so an odd width of two-byte\n     * texels needs one padding texel per row.\n     */\n    function padRows(values, width, height) {\n        const textureWidth = width + 1;\n        const padded = new Uint16Array(textureWidth * height);\n        for (let y = 0; y < height; y += 1) {\n            padded.set(values.subarray(y * width, (y + 1) * width), y * textureWidth);\n        }\n        return { bytes: new Uint8Array(padded.buffer), textureWidth };\n    }\n\n    /**\n     * Answers one decode request, in the worker or on the main thread: the reply\n     * and the buffers it can transfer. A file that does not decode is an error\n     * reply, never a thrown exception, so the caller can tell a bad file from a\n     * broken worker.\n     */\n    async function decodeDepthPreparationRequest(request) {\n        const requestId = request.requestId ?? 0;\n        try {\n            if (request.bitDepth === 8) {\n                const decoded = await decodePng8Gray(request.bytes);\n                return {\n                    response: {\n                        bitDepth: 8,\n                        height: decoded.height,\n                        requestId,\n                        type: DepthPreparationWorkerMessageType.Complete,\n                        values: decoded.values.buffer,\n                        width: decoded.width,\n                    },\n                    transfer: [decoded.values.buffer],\n                };\n            }\n            const decoded = await decodePng16(request.bytes, {\n                padRowsForWebGl: request.padRowsForWebGl,\n            });\n            const padded = decoded.paddedUpload;\n            const decimated = request.decimateBy !== undefined && request.decimateBy >= 2\n                ? decimateDepthUpload(decoded.values, decoded.width, decoded.height, Math.floor(request.decimateBy), request.padRowsForWebGl === true)\n                : null;\n            const transfer = [decoded.values.buffer];\n            if (padded)\n                transfer.push(padded.bytes.buffer);\n            if (decimated)\n                transfer.push(decimated.bytes.buffer);\n            return {\n                response: {\n                    bitDepth: 16,\n                    decimatedUpload: decimated\n                        ? { ...decimated, bytes: decimated.bytes.buffer }\n                        : undefined,\n                    height: decoded.height,\n                    paddedUpload: padded\n                        ? {\n                            bytes: padded.bytes.buffer,\n                            textureWidth: padded.textureWidth,\n                        }\n                        : undefined,\n                    requestId,\n                    type: DepthPreparationWorkerMessageType.Complete,\n                    values: decoded.values.buffer,\n                    width: decoded.width,\n                },\n                transfer,\n            };\n        }\n        catch (error) {\n            return {\n                response: {\n                    error: error instanceof Error ? error.message : \"Unable to decode depth.\",\n                    requestId,\n                    type: DepthPreparationWorkerMessageType.Error,\n                },\n                transfer: [],\n            };\n        }\n    }\n    /**\n     * Depth for a texture `factor` times smaller on each side, each texel the\n     * sample at its block's centre, as the renderer decimates a map larger than\n     * the GPU allows.\n     */\n    function decimateDepthUpload(values, width, height, factor, padRowsForWebGl) {\n        if (factor < 2)\n            return null;\n        const targetWidth = Math.ceil(width / factor);\n        const targetHeight = Math.ceil(height / factor);\n        // WebGL reads two-byte texels in rows of four bytes.\n        const textureWidth = padRowsForWebGl\n            ? targetWidth + (targetWidth % 2)\n            : targetWidth;\n        const texels = new Uint16Array(textureWidth * targetHeight);\n        const columns = new Uint32Array(targetWidth);\n        for (let x = 0; x < targetWidth; x += 1) {\n            columns[x] = Math.min(width - 1, Math.floor(((x + 0.5) * width) / targetWidth));\n        }\n        for (let y = 0; y < targetHeight; y += 1) {\n            const row = Math.min(height - 1, Math.floor(((y + 0.5) * height) / targetHeight)) *\n                width;\n            const target = y * textureWidth;\n            for (let x = 0; x < targetWidth; x += 1) {\n                texels[target + x] = values[row + columns[x]];\n            }\n        }\n        return {\n            bytes: new Uint8Array(texels.buffer),\n            height: targetHeight,\n            textureWidth,\n            width: targetWidth,\n        };\n    }\n\n    /** Formats whose first plane is 8-bit luma, which is the code as written. */\n    const PLANAR_8_BIT_FORMATS = new Set([\n        \"I420\",\n        \"I420A\",\n        \"I422\",\n        \"I422A\",\n        \"I444\",\n        \"I444A\",\n        \"NV12\",\n    ]);\n    const RGB_FORMATS = new Set([\"RGBA\", \"RGBX\", \"BGRA\", \"BGRX\"]);\n    /**\n     * Copies a decoded preview frame's luma codes out of it, mapped through\n     * `correction` when one is given. The frame stays open; its owner closes\n     * it.\n     */\n    async function readVideoFrameLuma(frame, scratch, correction = null) {\n        const rect = frame.visibleRect ?? {\n            height: frame.codedHeight,\n            width: frame.codedWidth,\n            x: 0,\n            y: 0,\n        };\n        const { width, height } = rect;\n        const format = frame.format;\n        const planar = format !== null && PLANAR_8_BIT_FORMATS.has(format);\n        let bytes;\n        let plane;\n        if (planar || (format !== null && RGB_FORMATS.has(format))) {\n            const size = frame.allocationSize({ rect });\n            if (scratch.buffer.byteLength < size)\n                scratch.buffer = new ArrayBuffer(size);\n            [plane] = await frame.copyTo(scratch.buffer, { rect });\n            bytes = new Uint8Array(scratch.buffer);\n        }\n        else {\n            // A frame in a layout no copy can read is drawn to a canvas, which\n            // converts it to RGB as the browser sees fit.\n            bytes = drawFrameRgba(frame, width, height);\n        }\n        const luma = new Uint8Array(width * height);\n        const stride = plane?.stride ?? (planar ? width : width * 4);\n        const offset = plane?.offset ?? 0;\n        if (!planar) {\n            // Every RGB layout keeps green second, and luma with neutral chroma\n            // converts to three equal channels.\n            for (let y = 0; y < height; y += 1) {\n                const row = offset + y * stride + 1;\n                const target = y * width;\n                for (let x = 0; x < width; x += 1) {\n                    luma[target + x] = bytes[row + x * 4];\n                }\n            }\n        }\n        else if (stride === width) {\n            luma.set(bytes.subarray(offset, offset + width * height));\n        }\n        else {\n            for (let y = 0; y < height; y += 1) {\n                luma.set(bytes.subarray(offset + y * stride, offset + y * stride + width), y * width);\n            }\n        }\n        if (correction) {\n            for (let index = 0; index < luma.length; index += 1) {\n                luma[index] = correction[luma[index]];\n            }\n        }\n        return { height, luma, path: planar ? \"plane\" : \"rgb\", width };\n    }\n    function drawFrameRgba(frame, width, height) {\n        const canvas = new OffscreenCanvas(width, height);\n        const context = canvas.getContext(\"2d\", { willReadFrequently: true });\n        if (!context) {\n            throw new Error(\"The depth preview needs a 2D canvas to read this frame.\");\n        }\n        context.drawImage(frame, 0, 0, width, height);\n        const { data } = context.getImageData(0, 0, width, height);\n        return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);\n    }\n\n    const workerScope = globalThis;\n    workerScope.addEventListener(\"message\", (event) => {\n        const message = event.data;\n        if (message.type === HeatmapPreparationWorkerMessageType.Prepare) {\n            prepareHeatmap(message);\n            return;\n        }\n        if (message.type === DepthPreparationWorkerMessageType.Decode) {\n            void decodeDepthFrame(message);\n            return;\n        }\n        if (message.type === DepthPreparationWorkerMessageType.PreviewLuma) {\n            void copyPreviewLuma(message);\n            return;\n        }\n        if (message.type !== MaskPreparationWorkerMessageType.Prepare) {\n            return;\n        }\n        prepareMaskFrame(message);\n    });\n    function prepareHeatmap(message) {\n        try {\n            const data = colorizeHeatmap(message.map, message.renderer);\n            const imageData = new ImageData(data, message.map.width, message.map.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    imageBitmap,\n                    requestId: message.requestId,\n                    type: HeatmapPreparationWorkerMessageType.Complete,\n                }, [imageBitmap]);\n                return;\n            }\n            workerScope.postMessage({\n                imageData,\n                requestId: message.requestId,\n                type: HeatmapPreparationWorkerMessageType.Complete,\n            }, [imageData.data.buffer]);\n        }\n        catch (error) {\n            workerScope.postMessage({\n                error: error instanceof Error ? error.message : \"Unable to prepare heatmap.\",\n                requestId: message.requestId,\n                type: HeatmapPreparationWorkerMessageType.Error,\n            });\n        }\n    }\n    /** Decoding waits on the platform's inflate, so replies arrive out of order. */\n    async function decodeDepthFrame(message) {\n        const { response, transfer } = await decodeDepthPreparationRequest(message);\n        workerScope.postMessage(response, transfer);\n    }\n    const previewLumaScratch = {\n        buffer: new ArrayBuffer(0),\n    };\n    /** Frames arrive in order and are copied in order, through one scratch. */\n    let previewLumaQueue = Promise.resolve();\n    function copyPreviewLuma(message) {\n        previewLumaQueue = previewLumaQueue.then(async () => {\n            try {\n                const copied = await readVideoFrameLuma(message.frame, previewLumaScratch, message.correction);\n                workerScope.postMessage({\n                    height: copied.height,\n                    luma: copied.luma.buffer,\n                    path: copied.path,\n                    requestId: message.requestId,\n                    type: DepthPreparationWorkerMessageType.PreviewLumaComplete,\n                    width: copied.width,\n                }, [copied.luma.buffer]);\n            }\n            catch (error) {\n                workerScope.postMessage({\n                    error: error instanceof Error\n                        ? error.message\n                        : \"Unable to copy the depth preview frame.\",\n                    requestId: message.requestId,\n                    type: DepthPreparationWorkerMessageType.Error,\n                });\n            }\n            finally {\n                message.frame.close();\n            }\n        });\n        return previewLumaQueue;\n    }\n    function prepareMaskFrame(message) {\n        try {\n            const regionMaskCoverage = createRegionMaskCoverageFrame(message.job.instructions);\n            const coverageTransfers = getRegionMaskCoverageTransfers(regionMaskCoverage);\n            const idMaskFrame = createIdMaskRasterFrame(message.job.instructions, message.job.maxRasterWidth);\n            if (idMaskFrame) {\n                const screenStrokes = createMaskScreenStrokes(message.job.instructions, idMaskFrame.width, idMaskFrame.height, idMaskFrame.data);\n                const strokeTransfers = screenStrokes?.flatMap(({ paths }) => paths.map((path) => path.buffer)) ?? [];\n                workerScope.postMessage({\n                    artifactKind: PreparedMaskFrameKind.IdMask,\n                    fillPalette: idMaskFrame.fillPalette,\n                    hasStroke: idMaskFrame.hasStroke,\n                    height: idMaskFrame.height,\n                    key: message.job.key,\n                    maxStrokeWidth: idMaskFrame.maxStrokeWidth,\n                    raster: idMaskFrame.data,\n                    screenStrokes,\n                    regionMaskCoverage,\n                    requestId: message.requestId,\n                    sourceWidth: idMaskFrame.sourceWidth,\n                    strokePalette: idMaskFrame.strokePalette,\n                    strokeWidths: idMaskFrame.strokeWidths,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                    width: idMaskFrame.width,\n                }, [\n                    idMaskFrame.data.buffer,\n                    idMaskFrame.fillPalette.buffer,\n                    idMaskFrame.strokePalette.buffer,\n                    idMaskFrame.strokeWidths.buffer,\n                    ...strokeTransfers,\n                    ...coverageTransfers,\n                ]);\n                return;\n            }\n            const compositedFrame = compositeMaskFrame(message.job.instructions);\n            if (!compositedFrame && !regionMaskCoverage) {\n                workerScope.postMessage({\n                    key: message.job.key,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Empty,\n                });\n                return;\n            }\n            const preparedPixels = compositedFrame ?? createTransparentCoverageCarrier();\n            const imageData = new ImageData(preparedPixels.data, preparedPixels.width, preparedPixels.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            const idMaskPlane = createIdMaskPlane(message.job.instructions, message.job.maxRasterWidth);\n            const idMaskTransfers = idMaskPlane ? [idMaskPlane.data.buffer] : [];\n            const screenStrokes = createMaskScreenStrokes(message.job.instructions, preparedPixels.width, preparedPixels.height);\n            const strokeTransfers = screenStrokes?.flatMap(({ paths }) => paths.map((path) => path.buffer)) ??\n                [];\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    idMaskPlane,\n                    imageBitmap,\n                    screenStrokes,\n                    key: message.job.key,\n                    regionMaskCoverage,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                }, [\n                    imageBitmap,\n                    ...idMaskTransfers,\n                    ...strokeTransfers,\n                    ...coverageTransfers,\n                ]);\n                return;\n            }\n            workerScope.postMessage({\n                idMaskPlane,\n                imageData,\n                screenStrokes,\n                key: message.job.key,\n                regionMaskCoverage,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Complete,\n            }, [\n                imageData.data.buffer,\n                ...idMaskTransfers,\n                ...strokeTransfers,\n                ...coverageTransfers,\n            ]);\n        }\n        catch (error) {\n            workerScope.postMessage({\n                error: error instanceof Error\n                    ? error.message\n                    : \"Unable to prepare mask frame.\",\n                key: message.job.key,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Error,\n            });\n        }\n    }\n    /**\n     * A frame that carries only region coverage has nothing to composite, and the\n     * RGBA branch still has to produce an artifact for the coverage to ride on.\n     */\n    function createTransparentCoverageCarrier() {\n        return {\n            data: new Uint8ClampedArray(new ArrayBuffer(4)),\n            height: 1,\n            width: 1,\n        };\n    }\n    function getRegionMaskCoverageTransfers(coverage) {\n        return coverage?.entries.map(({ data }) => data.buffer) ?? [];\n    }\n    function createImageBitmapFromImageData(imageData) {\n        if (typeof OffscreenCanvas === \"undefined\") {\n            return null;\n        }\n        const canvas = new OffscreenCanvas(imageData.width, imageData.height);\n        const context = canvas.getContext(\"2d\");\n        if (!context) {\n            return null;\n        }\n        context.putImageData(imageData, 0, 0);\n        return canvas.transferToImageBitmap();\n    }\n\n})();";
 
 const DEFAULT_WORKER_NAME = "supervision-js-render-preparation";
 let defaultWorkerUrl;
@@ -5138,6 +5138,74 @@ function createExactFrameSource(options) {
     };
 }
 
+/** Trace closed pixel boundaries, retaining holes and disconnected components. */
+function traceMaskOutlinePaths(raster, width, height, ids) {
+    const edgesById = new Map();
+    const stride = width + 1;
+    const steps = [1, stride, -1, -stride];
+    const add = (id, vertex, direction) => {
+        let edges = edgesById.get(id);
+        if (!edges)
+            edgesById.set(id, (edges = new Map()));
+        const outgoing = edges.get(vertex);
+        if (outgoing)
+            outgoing.push(direction);
+        else
+            edges.set(vertex, [direction]);
+    };
+    for (let y = 0; y < height; y += 1) {
+        for (let x = 0; x < width; x += 1) {
+            const offset = y * width + x;
+            const id = raster[offset];
+            if (!ids.has(id))
+                continue;
+            const vertex = y * stride + x;
+            if (y === 0 || raster[offset - width] !== id)
+                add(id, vertex, 0);
+            if (x === width - 1 || raster[offset + 1] !== id)
+                add(id, vertex + 1, 1);
+            if (y === height - 1 || raster[offset + width] !== id)
+                add(id, vertex + stride + 1, 2);
+            if (x === 0 || raster[offset - 1] !== id)
+                add(id, vertex + stride, 3);
+        }
+    }
+    const result = new Map();
+    for (const [id, edges] of edgesById) {
+        const paths = [];
+        while (edges.size > 0) {
+            const start = edges.keys().next().value;
+            let vertex = start;
+            let previousDirection = -1;
+            let firstDirection = -1;
+            const points = [];
+            do {
+                const outgoing = edges.get(vertex);
+                // Turn right at diagonal contacts so separate islands stay separate.
+                const direction = previousDirection < 0
+                    ? outgoing[0]
+                    : [1, 0, 3, 2]
+                        .map((turn) => (previousDirection + turn) % 4)
+                        .find((candidate) => outgoing.includes(candidate));
+                if (firstDirection < 0)
+                    firstDirection = direction;
+                if (direction !== previousDirection)
+                    points.push(vertex % stride, Math.floor(vertex / stride));
+                outgoing.splice(outgoing.indexOf(direction), 1);
+                if (outgoing.length === 0)
+                    edges.delete(vertex);
+                vertex += steps[direction];
+                previousDirection = direction;
+            } while (vertex !== start);
+            if (previousDirection === firstDirection)
+                points.splice(0, 2);
+            paths.push(new Float32Array(points));
+        }
+        result.set(id, paths);
+    }
+    return result;
+}
+
 /** Builds compact, independent alpha crops so overlapping masks stay exact. */
 function createRegionMaskCoverageFrame(instructions) {
     const entries = [];
@@ -5199,7 +5267,9 @@ function compositeMaskFrame(instructions) {
 }
 function createIdMaskRasterFrame(instructions, maxRasterWidth) {
     try {
-        return createIdMaskFrame(materializeMaskInstructions(instructions), {
+        return createIdMaskFrame(materializeMaskInstructions(instructions).map((instruction) => instruction.stroke?.widthUnit === "screen"
+            ? { ...instruction, stroke: undefined }
+            : instruction), {
             maxWidth: maxRasterWidth,
         });
     }
@@ -5234,10 +5304,47 @@ function createIdMaskPlane(instructions, maxRasterWidth) {
 function compositeInstruction(rgba, canvasWidth, instruction) {
     const fill = resolveRgbaColor(instruction.color, instruction.alpha);
     const bounds = compositeMaskFill(rgba, canvasWidth, instruction.mask, fill);
-    if (instruction.stroke && bounds) {
+    if (instruction.stroke &&
+        instruction.stroke.widthUnit !== "screen" &&
+        bounds) {
         compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, instruction.stroke);
     }
 }
+function createMaskScreenStrokes(instructions, width, height, preparedRaster) {
+    const outlined = instructions.filter(({ visible, stroke }) => visible !== false &&
+        stroke?.widthUnit === "screen" &&
+        stroke.width > 0 &&
+        stroke.alpha > 0);
+    if (outlined.length === 0)
+        return undefined;
+    const masks = materializeMaskInstructions(instructions);
+    const raster = preparedRaster ?? new Uint32Array(width * height);
+    if (!preparedRaster) {
+        for (const { detectionIndex, mask } of masks) {
+            const counts = decodeCompressedRleCounts(mask.counts);
+            let offset = 0;
+            for (let index = 0; index < counts.length; index += 1) {
+                const length = counts[index];
+                if (index % 2 === 1) {
+                    for (let pixel = offset; pixel < offset + length; pixel += 1) {
+                        const x = Math.floor(pixel / mask.height);
+                        const y = pixel % mask.height;
+                        raster[y * width + x] = detectionIndex + 1;
+                    }
+                }
+                offset += length;
+            }
+        }
+    }
+    const paths = traceMaskOutlinePaths(raster, width, height, new Set(outlined.map(({ detectionIndex }) => detectionIndex + 1)));
+    return outlined.map(({ detectionIndex, stroke }) => ({
+        detectionIndex,
+        alpha: stroke.alpha,
+        color: stroke.color,
+        width: stroke.width,
+        paths: paths.get(detectionIndex + 1) ?? [],
+    }));
+}
 function materializeMaskInstructions(instructions) {
     return instructions
         .filter((instruction) => instruction.visible !== false)
@@ -5531,6 +5638,7 @@ function createMainThreadMaskFramePreparer(workerStatus, message = null) {
                 key: job.key,
                 kind: PreparedMaskFrameKind.RgbaImage,
                 regionMaskCoverage,
+                screenStrokes: createMaskScreenStrokes(job.instructions, preparedPixels.width, preparedPixels.height),
                 source: canvas,
                 width: preparedPixels.width,
             };
@@ -5566,6 +5674,7 @@ function createPreparedIdMaskFrame(job, regionMaskCoverage) {
         kind: PreparedMaskFrameKind.IdMask,
         maxStrokeWidth: frame.maxStrokeWidth,
         raster: frame.data,
+        screenStrokes: createMaskScreenStrokes(job.instructions, frame.width, frame.height, frame.data),
         regionMaskCoverage,
         sourceWidth: frame.sourceWidth,
         strokePalette: frame.strokePalette,
@@ -5691,6 +5800,7 @@ function createPreparedFrameFromWorkerResponse(message) {
             maxStrokeWidth: message.maxStrokeWidth ?? 0,
             raster: message.raster,
             regionMaskCoverage: message.regionMaskCoverage,
+            screenStrokes: message.screenStrokes,
             sourceWidth: message.sourceWidth,
             strokePalette: message.strokePalette,
             strokeWidths: message.strokeWidths,
@@ -5707,6 +5817,7 @@ function createPreparedFrameFromWorkerResponse(message) {
             key: message.key,
             kind: PreparedMaskFrameKind.RgbaImage,
             regionMaskCoverage: message.regionMaskCoverage,
+            screenStrokes: message.screenStrokes,
             source: message.imageBitmap,
             width: message.imageBitmap.width,
         };
@@ -5732,6 +5843,7 @@ function createPreparedFrameFromWorkerResponse(message) {
         key: message.key,
         kind: PreparedMaskFrameKind.RgbaImage,
         regionMaskCoverage: message.regionMaskCoverage,
+        screenStrokes: message.screenStrokes,
         source: canvas,
         width: message.imageData.width,
     };
@@ -5907,7 +6019,8 @@ function createPreparedRenderWindow(options) {
         const backingBytes = options.resolveMaskFrameBackingBytes
             ? options.resolveMaskFrameBackingBytes(maskFrame)
             : pixels * (maskFrame.kind === PreparedMaskFrameKind.IdMask ? 1 : 4);
-        const bytes = Math.max(1, payloadBytes + coverageBytes + backingBytes);
+        const strokeBytes = maskFrame.screenStrokes?.reduce((total, stroke) => total + stroke.paths.reduce((sum, path) => sum + path.byteLength, 0), 0) ?? 0;
+        const bytes = Math.max(1, payloadBytes + coverageBytes + strokeBytes + backingBytes);
         preparedMaskBytesByKey.set(key, bytes);
         preparedMaskBytes += bytes;
         largestMaskFrameBytesByTier.set(tier, Math.max(largestMaskFrameBytesByTier.get(tier) ?? 0, bytes));
@@ -9083,6 +9196,11 @@ function resolveRenderPreparationMaxWaitSeconds(value) {
  */
 const RENDER_PREPARATION_GATE_MAX_STOP_SHARE_OF_RESUME = 0.5;
 async function createMediaRendererCore(options, providers) {
+    const pixelInspectionScale = options.pixelInspection?.minScale;
+    if (pixelInspectionScale !== undefined &&
+        (!Number.isFinite(pixelInspectionScale) || pixelInspectionScale <= 0)) {
+        throw new RangeError("pixelInspection.minScale must be a finite number greater than zero.");
+    }
     const fit = options.fit ?? MediaRendererFit.Contain;
     const initialPlaybackRate = options.playbackRate ?? 1;
     if (!Number.isFinite(initialPlaybackRate) || initialPlaybackRate <= 0) {
@@ -9993,6 +10111,7 @@ async function createMediaRendererCore(options, providers) {
             markerStyle: currentPresentation.markerStyle,
             percentageBarStyle: currentPresentation.percentageBarStyle,
             maxDevicePixelRatio: options.maxDevicePixelRatio,
+            pixelInspection: options.pixelInspection,
             orientedBoxStyle: currentPresentation.orientedBoxStyle,
             onPresentationUpdate(presentedSample) {
                 if (!runtimeState.isDestroyed()) {
@@ -10013,6 +10132,9 @@ async function createMediaRendererCore(options, providers) {
             polygonStyle: currentPresentation.polygonStyle,
             polylineStyle: currentPresentation.polylineStyle,
             presentedFrames: protectedPresentedFrames?.source,
+            // A source with no duration, such as a still image, has one frame to
+            // show and nothing to play.
+            stillFrame: metadata.duration === 0,
             regionRenderers: resolveRegionRenderers(currentPresentation),
             heatmapRenderers: resolveHeatmapRenderers(currentPresentation),
             depthRenderers: resolveDepthRenderers(currentPresentation),
@@ -11031,6 +11153,23 @@ function appendDashedPath(graphics, points, closed, dashPattern, viewportScale)
     return true;
 }
 
+const cachedOrders = new WeakMap();
+/** Dense ranks preserve zIndex and frame-order ties across retained shape layers. */
+function detectionRenderOrder(frame) {
+    const cached = cachedOrders.get(frame);
+    if (cached)
+        return cached;
+    const indexes = frame.detections.map((_, index) => index);
+    indexes.sort((left, right) => (frame.detections[left].zIndex ?? left) -
+        (frame.detections[right].zIndex ?? right) || left - right);
+    const order = [];
+    indexes.forEach((index, rank) => {
+        order[index] = rank;
+    });
+    cachedOrders.set(frame, order);
+    return order;
+}
+
 function createPixiBoxLayer(options) {
     let boxStyle = options.boxStyle === undefined ? new BaseBoxStyle() : options.boxStyle;
     let boxGraphics;
@@ -11042,7 +11181,7 @@ function createPixiBoxLayer(options) {
     let hasDrawnDetectionFrame = false;
     let isDirty = true;
     let lastViewportScale = 0;
-    let retainedContainer;
+    let retainedContainer = options.container;
     const retainedEntries = new Map();
     const invalidatedDetections = new Set();
     const usingRetainedEntries = Boolean(options.Container && options.Graphics);
@@ -11098,7 +11237,9 @@ function createPixiBoxLayer(options) {
                         activeKeys.add(key);
                         const display = ensureRetainedEntry(key);
                         display.visible = true;
-                        display.zIndex = detection.zIndex ?? detectionIndex;
+                        display.zIndex = options.container
+                            ? detectionRenderOrder(detectionFrame)[detectionIndex] * 2
+                            : (detection.zIndex ?? detectionIndex);
                         display.position?.set?.(0, 0);
                         display.clear();
                         drawBoxInstruction(display, instruction, viewportScale);
@@ -13424,7 +13565,6 @@ function createPixiInteractionLayer(options) {
     let hoveredPick = null;
     let hoveredPickKey = null;
     let selectedPick = null;
-    let selectedPickKey = null;
     let selectedPicks = [];
     let marqueeStart = null;
     let marqueeRect = null;
@@ -13477,9 +13617,19 @@ function createPixiInteractionLayer(options) {
                 setSelectedPick(null);
                 return null;
             }
-            const nextPick = createPickFromSelection(selection);
-            setSelectedPick(nextPick);
-            return nextPick;
+            const nextPicks = selection.detectionIds
+                ? [...new Set(selection.detectionIds)].flatMap((detectionId) => {
+                    const pick = createPickFromSelection({
+                        detectionId,
+                        mediaTime: selection.mediaTime,
+                        point: selection.point,
+                        target: selection.target,
+                    });
+                    return pick ? [pick] : [];
+                })
+                : [createPickFromSelection(selection)].filter((pick) => pick !== null);
+            setSelectedPicks(nextPicks);
+            return nextPicks.at(-1) ?? null;
         },
         getState() {
             return createState();
@@ -13606,6 +13756,18 @@ function createPixiInteractionLayer(options) {
             if (event.button !== undefined && event.button !== 0) {
                 return;
             }
+            if (options.interaction.multiSelect &&
+                event.shiftKey &&
+                pick &&
+                !options.editingEngine.hasCreationTool() &&
+                options.editingEngine.getState().kind ===
+                    AnnotationGestureStateKind.Idle) {
+                // Selection modifiers must run before the editing engine captures a
+                // move. The following pointertap belongs to this same toggle.
+                toggleSelectedPick(pick);
+                suppressNextTap = true;
+                return;
+            }
             // Keep selection owned by this layer. The editing engine deliberately
             // treats a click as a cancelled move, so it cannot establish selection
             // itself; selecting here also makes resize handles available on the next
@@ -13645,7 +13807,7 @@ function createPixiInteractionLayer(options) {
         if (!marqueeStart)
             return;
         if (didDragMarquee && marqueeRect && activeFrame) {
-            selectedPicks = activeFrame.detections.flatMap((detection, detectionIndex) => {
+            const nextPicks = activeFrame.detections.flatMap((detection, detectionIndex) => {
                 if (!canPickDetection(detection))
                     return [];
                 const rect = getDetectionRect(detection);
@@ -13666,10 +13828,7 @@ function createPixiInteractionLayer(options) {
                     },
                 ];
             });
-            selectedPick = selectedPicks.at(-1) ?? null;
-            selectedPickKey = createDetectionPickKey(selectedPick);
-            options.interaction.onSelect?.(selectedPick);
-            options.interaction.onSelectionChange?.(selectedPicks);
+            setSelectedPicks(nextPicks);
         }
         marqueeStart = null;
         marqueeRect = null;
@@ -13696,7 +13855,9 @@ function createPixiInteractionLayer(options) {
             padding: pickPadding,
             viewportScale: options.getViewportScale?.() ?? 1,
         });
-        if (geometryPick && POINT_PRECISE_PICK_TARGETS.has(geometryPick.target)) {
+        if (geometryPick &&
+            (options.interaction.preferTopmost ||
+                POINT_PRECISE_PICK_TARGETS.has(geometryPick.target))) {
             return geometryPick;
         }
         const maskPick = options.pickMaskDetectionAtPoint?.(pickPoint, currentMediaTime);
@@ -13763,7 +13924,6 @@ function createPixiInteractionLayer(options) {
         if (nextKeys === currentKeys) {
             return;
         }
-        selectedPickKey = createDetectionPickKey(selectedPick);
         // A followed pick re-bases onto every new frame, so its full pick key
         // changes at playback rate. The scene's normal frame path consumes this
         // refreshed state immediately; emitting onStateChange here would redraw
@@ -13795,15 +13955,17 @@ function createPixiInteractionLayer(options) {
         return true;
     }
     function setSelectedPick(nextPick) {
-        const nextKey = createDetectionPickKey(nextPick);
-        if (nextKey === selectedPickKey) {
-            selectedPick = nextPick;
+        setSelectedPicks(nextPick ? [nextPick] : []);
+    }
+    function setSelectedPicks(nextPicks) {
+        const unchanged = selectedPicks.length === nextPicks.length &&
+            selectedPicks.every((pick, index) => createDetectionPickKey(pick) ===
+                createDetectionPickKey(nextPicks[index]));
+        selectedPicks = nextPicks;
+        selectedPick = nextPicks.at(-1) ?? null;
+        if (unchanged)
             return;
-        }
-        selectedPick = nextPick;
-        selectedPicks = nextPick ? [nextPick] : [];
-        selectedPickKey = nextKey;
-        options.interaction.onSelect?.(nextPick);
+        options.interaction.onSelect?.(selectedPick);
         options.interaction.onSelectionChange?.(selectedPicks);
         notifyStateChange();
     }
@@ -13822,17 +13984,20 @@ function createPixiInteractionLayer(options) {
     function toggleSelectedPick(pick) {
         if (!pick)
             return;
-        const key = createDetectionPickKey(pick);
-        const index = selectedPicks.findIndex((candidate) => createDetectionPickKey(candidate) === key);
-        selectedPicks =
-            index >= 0
-                ? selectedPicks.filter((_, candidateIndex) => candidateIndex !== index)
-                : [...selectedPicks, pick];
-        selectedPick = selectedPicks.at(-1) ?? null;
-        selectedPickKey = createDetectionPickKey(selectedPick);
-        options.interaction.onSelect?.(selectedPick);
-        options.interaction.onSelectionChange?.(selectedPicks);
-        notifyStateChange();
+        const key = createSelectionKey(pick);
+        const index = selectedPicks.findIndex((candidate) => createSelectionKey(candidate) === key);
+        setSelectedPicks(index >= 0
+            ? selectedPicks.filter((_, candidateIndex) => candidateIndex !== index)
+            : [...selectedPicks, pick]);
+    }
+    function createSelectionKey(pick) {
+        // Selection toggles the detection, regardless of whether its body, label,
+        // or keypoint was hit. Keep the picker's frame/index fallback for duplicate ids.
+        return createDetectionPickKey({
+            ...pick,
+            geometryIndex: undefined,
+            target: DetectionPickTarget.Box,
+        });
     }
     function getPoint(event) {
         if (!container)
@@ -13931,6 +14096,75 @@ function intersects(rect, marquee) {
         top + rect.height >= marquee.y);
 }
 
+function createPixiMaskScreenStrokeRenderer(options) {
+    const display = new options.Graphics();
+    display.visible = false;
+    let lastFrame;
+    let lastSignature = "";
+    const interactionPaths = new WeakMap();
+    function hide() {
+        display.visible = false;
+        if (lastFrame)
+            display.clear();
+        lastFrame = undefined;
+        lastSignature = "";
+    }
+    return {
+        display,
+        hide,
+        destroy() {
+            display.destroy();
+        },
+        render(frame, viewportScale, overrides) {
+            let strokes = frame.screenStrokes ?? [];
+            if (overrides) {
+                strokes = overrides.flatMap(({ detectionIndex, stroke }) => {
+                    if (stroke?.widthUnit !== "screen" ||
+                        stroke.width <= 0 ||
+                        stroke.alpha <= 0)
+                        return [];
+                    let paths = frame.screenStrokes?.find((entry) => entry.detectionIndex === detectionIndex)?.paths;
+                    if (!paths && frame.kind === PreparedMaskFrameKind.IdMask) {
+                        let cached = interactionPaths.get(frame);
+                        if (!cached) {
+                            const ids = new Set(frame.raster);
+                            ids.delete(0);
+                            cached = traceMaskOutlinePaths(frame.raster, frame.width, frame.height, ids);
+                            interactionPaths.set(frame, cached);
+                        }
+                        paths = cached.get(detectionIndex + 1);
+                    }
+                    return paths ? [{ ...stroke, detectionIndex, paths }] : [];
+                });
+            }
+            if (strokes.length === 0) {
+                hide();
+                return;
+            }
+            const signature = `${viewportScale}:${strokes.map(({ detectionIndex, width, color, alpha }) => `${detectionIndex}:${width}:${color}:${alpha}`).join(";")}`;
+            if (lastFrame !== frame || lastSignature !== signature) {
+                display.clear();
+                const scaleX = options.mediaWidth / frame.width;
+                const scaleY = options.mediaHeight / frame.height;
+                for (const stroke of strokes) {
+                    for (const path of stroke.paths) {
+                        if (path.length < 6)
+                            continue;
+                        display.moveTo(path[0] * scaleX, path[1] * scaleY);
+                        for (let index = 2; index < path.length; index += 2)
+                            display.lineTo(path[index] * scaleX, path[index + 1] * scaleY);
+                        display.closePath();
+                    }
+                    display.stroke(resolvePixiStroke({ ...stroke, join: "round" }, viewportScale));
+                }
+                lastFrame = frame;
+                lastSignature = signature;
+            }
+            display.visible = true;
+        },
+    };
+}
+
 const coverageBody = `
   return clamp(0.5 + (width - distance) / pixelWidth, 0.0, 1.0)
     - clamp(0.5 - (width + distance) / pixelWidth, 0.0, 1.0);
@@ -14504,7 +14738,7 @@ function detectionKey$1(detection, detectionIndex) {
 }
 
 function createPixiVectorLayer(options) {
-    let container;
+    let container = options.container;
     let polygonStyle = options.polygonStyle === undefined
         ? new BasePolygonStyle()
         : options.polygonStyle;
@@ -14530,8 +14764,8 @@ function createPixiVectorLayer(options) {
         createContainer() {
             if (!container) {
                 container = new options.Container();
-                container.sortableChildren = true;
             }
+            container.sortableChildren = true;
             return container;
         },
         drawFrame(mediaTime, viewportScale = 1) {
@@ -14645,7 +14879,10 @@ function createPixiVectorLayer(options) {
             polygon,
             polyline,
             shapes,
-            zIndex: detection.zIndex ?? detectionIndex,
+            // Vector details stay above their own box even if the box is retained later.
+            zIndex: options.container
+                ? detectionRenderOrder(frame)[detectionIndex] * 2 + 1
+                : (detection.zIndex ?? detectionIndex),
         };
     }
     function drawDetection(entry, detection, viewportScale) {
@@ -14787,6 +15024,7 @@ function createPixiInteractionPresentationLayer(options) {
     let interactionStyle = options.interactionStyle === undefined
         ? new BaseInteractionStyle()
         : options.interactionStyle;
+    let displayContainer;
     let mediaHeight = 0;
     let mediaWidth = 0;
     let syntheticFrame;
@@ -14794,6 +15032,7 @@ function createPixiInteractionPresentationLayer(options) {
     let currentMediaTime = 0;
     let viewportScale = 1;
     let maskRenderer;
+    let screenStrokeRenderer;
     let isDestroyed = false;
     const syntheticTimeline = createSyntheticTimeline(() => syntheticFrame);
     const boxStyle = createInteractionBoxStyle(() => activePicks);
@@ -14834,6 +15073,7 @@ function createPixiInteractionPresentationLayer(options) {
                 container.addChild(maskRenderer.mesh);
             }
             container.addChild(boxGraphics, vectors, labels);
+            displayContainer = container;
             return container;
         },
         destroy() {
@@ -14844,6 +15084,7 @@ function createPixiInteractionPresentationLayer(options) {
             syntheticFrame = undefined;
             activePicks = [];
             maskRenderer?.destroy();
+            screenStrokeRenderer?.destroy();
             labelLayer.destroy();
             vectorLayer.destroy();
         },
@@ -14952,6 +15193,7 @@ function createPixiInteractionPresentationLayer(options) {
         syntheticFrame = undefined;
         activePicks = [];
         maskRenderer?.hide();
+        screenStrokeRenderer?.hide();
         boxLayer.setBoxStyle(null);
         boxLayer.drawFrame(currentMediaTime, viewportScale);
         labelLayer.setLabelStyle(null);
@@ -14966,6 +15208,7 @@ function createPixiInteractionPresentationLayer(options) {
     function drawMasks(artifact) {
         if (!maskRenderer || !artifact) {
             maskRenderer?.hide();
+            screenStrokeRenderer?.hide();
             return;
         }
         const instructions = activePicks
@@ -14993,9 +15236,23 @@ function createPixiInteractionPresentationLayer(options) {
             .filter((instruction) => Boolean(instruction));
         if (instructions.length === 0) {
             maskRenderer.hide();
+            screenStrokeRenderer?.hide();
             return;
         }
         maskRenderer.render(artifact.frame, artifact.texture, instructions);
+        if (!screenStrokeRenderer &&
+            instructions.some(({ instruction }) => instruction.stroke?.widthUnit === "screen")) {
+            screenStrokeRenderer = createPixiMaskScreenStrokeRenderer({
+                Graphics: options.Graphics,
+                mediaWidth,
+                mediaHeight,
+            });
+            displayContainer?.addChildAt(screenStrokeRenderer.display, maskRenderer ? 1 : 0);
+        }
+        screenStrokeRenderer?.render(artifact.frame, viewportScale, instructions.map(({ detectionIndex, instruction }) => ({
+            detectionIndex,
+            stroke: instruction.stroke,
+        })));
     }
     function createMaskRenderer() {
         if (!options.ImageSource ||
@@ -15237,7 +15494,9 @@ function createInteractionMaskRenderer(options) {
                     continue;
                 }
                 writeIdMaskPaletteEntry(fillPalette, maskId, instruction.color, instruction.alpha);
-                if (instruction.stroke && instruction.stroke.width > 0) {
+                if (instruction.stroke &&
+                    instruction.stroke.widthUnit !== "screen" &&
+                    instruction.stroke.width > 0) {
                     writeIdMaskPaletteEntry(strokePalette, maskId, instruction.stroke.color, instruction.stroke.alpha);
                     strokeWidths[maskId] = resolveIdMaskStrokeTexels(instruction.stroke.width, frame.sourceWidth, frame.width);
                     maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidths[maskId] ?? 0);
@@ -15747,6 +16006,8 @@ function createPixiMaskLayer(options) {
     let haloRenderer;
     let currentMaskHaloStyle = options.maskHaloStyle ?? null;
     let maskSprite;
+    let maskContainer;
+    let screenStrokeRenderer;
     let visibleMaskFrameKey = null;
     let activeIdMaskFrame = null;
     let activeRgbaMaskFrame = null;
@@ -15802,7 +16063,7 @@ function createPixiMaskLayer(options) {
             if (!idMaskRenderer || !options.Container) {
                 return maskSprite;
             }
-            const maskContainer = new options.Container();
+            maskContainer = new options.Container();
             // The halo draws beneath the mask so the glow bleeds outward from the
             // silhouette while fills and borders stay crisp on top.
             if (haloRenderer) {
@@ -15811,14 +16072,21 @@ function createPixiMaskLayer(options) {
             maskContainer.addChild(maskSprite, idMaskRenderer.mesh);
             return maskContainer;
         },
-        drawFrame(mediaTime, presentedFrameId = null) {
+        drawFrame(mediaTime, presentedFrameId = null, viewportScale = 1) {
             const preparedFrame = preparedRenderWindow.getFrame(mediaTime);
             if (preparedFrame?.maskFrame) {
-                showMaskFrame(preparedFrame.maskFrame, preparedFrame.detectionFrame.mediaTime, presentedFrameId);
+                showMaskFrame(preparedFrame.maskFrame, preparedFrame.detectionFrame.mediaTime, presentedFrameId, viewportScale);
                 return;
             }
             hideSprite();
         },
+        redrawViewportStyles(viewportScale) {
+            if (!isFillVisible)
+                return;
+            const frame = activeIdMaskFrame ?? activeRgbaMaskFrame;
+            if (frame)
+                screenStrokeRenderer?.render(frame, viewportScale);
+        },
         getDrawnState() {
             return {
                 drawnFrameTime: visibleMaskMediaTime,
@@ -15936,10 +16204,11 @@ function createPixiMaskLayer(options) {
             preparedRenderWindow.destroy();
             destroyTextures();
             idMaskRenderer?.destroy();
+            screenStrokeRenderer?.destroy();
             haloRenderer?.destroy();
         },
     };
-    function showMaskFrame(maskFrame, mediaTime, presentedFrameId) {
+    function showMaskFrame(maskFrame, mediaTime, presentedFrameId, viewportScale) {
         visibleMaskMediaTime = mediaTime;
         visibleMaskFrameKey = maskFrame.key;
         visibleMaskFrameId = presentedFrameId;
@@ -15953,6 +16222,18 @@ function createPixiMaskLayer(options) {
             hideFill();
             return;
         }
+        if (!screenStrokeRenderer &&
+            maskFrame.screenStrokes?.length &&
+            options.Graphics) {
+            screenStrokeRenderer = createPixiMaskScreenStrokeRenderer({
+                Graphics: options.Graphics,
+                mediaWidth,
+                mediaHeight,
+            });
+            screenStrokeRenderer.display.alpha = maskOpacity;
+            maskContainer?.addChild(screenStrokeRenderer.display);
+        }
+        screenStrokeRenderer?.render(maskFrame, viewportScale);
         if (maskFrame.kind === PreparedMaskFrameKind.IdMask && idMaskRenderer) {
             showIdMaskFrame(maskFrame);
             return;
@@ -16084,6 +16365,7 @@ function createPixiMaskLayer(options) {
             maskSprite.visible = false;
         }
         idMaskRenderer?.hide();
+        screenStrokeRenderer?.hide();
     }
     /**
      * Everything the layer hands other layers is a view of the raster on screen,
@@ -16103,6 +16385,8 @@ function createPixiMaskLayer(options) {
             maskSprite.alpha = maskOpacity;
         }
         idMaskRenderer?.setOpacity(maskOpacity);
+        if (screenStrokeRenderer)
+            screenStrokeRenderer.display.alpha = maskOpacity;
     }
     function destroyTexture(key) {
         destroyHaloTexture(key);
@@ -16399,9 +16683,9 @@ function createPixiMaskBrushPreview(options) {
     sprite.width = editor.canvas.width;
     sprite.height = editor.canvas.height;
     sprite.alpha = options.preview.alpha ?? 0.4;
-    sprite.tint = options.preview.color ?? 0x22c55e;
     display.addChild(sprite, cursor);
     const updateTexture = () => {
+        sprite.tint = options.preview.color ?? 0x22c55e;
         source.update();
         scheduleInvalidation();
     };
@@ -16437,6 +16721,7 @@ function createPixiMaskBrushPreview(options) {
         });
     }
     function drawCursor() {
+        sprite.tint = options.preview.color ?? 0x22c55e;
         cursor.clear();
         const state = editor.getCursor();
         if (!state.point)
@@ -17178,6 +17463,13 @@ function createPixiRegionLayer(options) {
             }
             return { activeDetectionIndexes: [...activeDetectionIndexes] };
         },
+        hasAnimatedDisplay() {
+            for (const entry of entries.values()) {
+                if (isAnimatedDisplay(entry.display))
+                    return true;
+            }
+            return false;
+        },
         releaseMaskTexture(texture) {
             if (destroyed)
                 return;
@@ -17500,12 +17792,15 @@ function destroyEntry(entry) {
     // lightweight crop texture; the scene destroys the shared source.
     entry.ownedTexture?.destroy(false);
 }
+function isAnimatedDisplay(display) {
+    return "play" in display && typeof display.play === "function";
+}
 function pauseAnimatedDisplay(display) {
     if ("stop" in display && typeof display.stop === "function")
         display.stop();
 }
 function resumeAnimatedDisplay(display) {
-    if ("play" in display && typeof display.play === "function")
+    if (isAnimatedDisplay(display))
         display.play();
 }
 function matchesTarget(renderer, detection, context) {
@@ -17973,6 +18268,7 @@ function drawLoading(graphics, context, style) {
         const rect = getDetectionRect(detection);
         if (!rect)
             continue;
+        graphics.beginPath();
         graphics.arc(rect.x, rect.y, resolveScreenLength(10, context.viewportScale), angle, angle + Math.PI * 1.5);
         const stroke = resolvePixiStroke(style.loading.stroke, context.viewportScale);
         graphics.stroke({
@@ -18205,6 +18501,11 @@ function observePixiContainerResize(container, resize) {
  * sample it wants, hands it to `presentSample`, and Pixi's ticker paints the
  * scene every frame.
  *
+ * A still frame is pulled once and then renders on change the way push
+ * presentation does, with the sample it presents as one more change. The
+ * ticker runs only while a looping GIF region or a loading spinner is on the
+ * frame.
+ *
  * Push presentation engages when the opened source carries a presented-frame
  * channel. The producer then decides which frame is on screen and announces it,
  * so the ticker paints nothing and every render is an explicit answer to a
@@ -18235,6 +18536,18 @@ async function createPixiMediaScene(options) {
     let maxTextureSide;
     const maxTextureSize = () => (maxTextureSide ??= queryMaxTextureSize(app.renderer));
     const frameChannel = options.presentedFrames;
+    /**
+     * A still frame has nothing to play, so it renders on change exactly as push
+     * presentation does. The ticker runs only while something on the frame
+     * animates by the clock.
+     */
+    const stillFrame = frameChannel === undefined && options.stillFrame === true;
+    const rendersOnChange = frameChannel !== undefined || stillFrame;
+    let stillFrameTickerRunning = false;
+    /** The content of the `previewOverlay` answer the overlay on screen drew. */
+    let drawnPreviewOverlayContent = null;
+    /** The editing state the overlay on screen was drawn from. */
+    let drawnEditingState;
     let currentFocusStyle = options.focusStyle ?? null;
     let currentLabelStyle = options.labelStyle ?? null;
     let currentMaskStyle = options.maskStyle ?? null;
@@ -18307,7 +18620,11 @@ async function createPixiMediaScene(options) {
             hidden: currentVisibility?.labelsHidden === true || state.hidden,
         };
     };
+    // Editable geometry uses retained displays, so boxes and vectors can share
+    // one ordered parent without changing the dense, non-editing raster paths.
+    const retainedGeometry = options.editingEngine ? new Container() : undefined;
     const boxLayer = createPixiBoxLayer({
+        container: retainedGeometry,
         boxStyle: options.boxStyle,
         Container: options.editingEngine ? Container : undefined,
         detectionTimeline: annotationDetectionTimeline,
@@ -18387,6 +18704,7 @@ async function createPixiMediaScene(options) {
         })
         : undefined;
     const vectorLayer = createPixiVectorLayer({
+        container: retainedGeometry,
         Container,
         Graphics,
         detectionTimeline: annotationDetectionTimeline,
@@ -18438,6 +18756,7 @@ async function createPixiMediaScene(options) {
             BlurFilter,
             BufferImageSource,
             Container,
+            Graphics,
             ImageSource,
             Mesh,
             MeshGeometry,
@@ -18469,7 +18788,7 @@ async function createPixiMediaScene(options) {
         : undefined;
     await app.init({
         autoDensity: true,
-        autoStart: frameChannel === undefined,
+        autoStart: !rendersOnChange,
         backgroundColor: options.backgroundColor ?? 0x111111,
         /* Only the video-engine media path supplies a presented-frame channel, so
          * which reader opens the clip is also what decides which backend draws. */
@@ -18488,7 +18807,10 @@ async function createPixiMediaScene(options) {
     if (!stagingContext) {
         throw new Error("Unable to create staging canvas context.");
     }
-    const renderScheduler = createSceneRenderScheduler(() => app.render());
+    const renderScheduler = createSceneRenderScheduler(() => {
+        app.render();
+        syncStillFrameTicker();
+    });
     const maskBrushPreview = options.maskBrush
         ? createPixiMaskBrushPreview({
             CanvasSource,
@@ -18497,7 +18819,7 @@ async function createPixiMediaScene(options) {
             Sprite,
             Texture,
             preview: options.maskBrush,
-            onInvalidate: frameChannel ? renderNow : undefined,
+            onInvalidate: rendersOnChange ? renderNow : undefined,
         })
         : undefined;
     let appliedPresentation;
@@ -18666,6 +18988,17 @@ async function createPixiMediaScene(options) {
             labelLayer?.drawFrame(currentMediaTime, viewportScale);
             renderNow();
         }
+        // With no ticker to pick it up, an edit the host drives itself, such as a
+        // cancel or a commit, reaches the screen through this notification. A
+        // pointer gesture draws and renders its own state before the microtask
+        // runs, which then finds nothing left to draw or render.
+        if (rendersOnChange) {
+            queueMicrotask(() => {
+                if (isDestroyed || isPresenting)
+                    return;
+                renderOnChange();
+            });
+        }
     });
     const handleKeyDown = (event) => {
         if (event.key === "Tab" && interactionLayer) {
@@ -18796,11 +19129,25 @@ async function createPixiMediaScene(options) {
         maskLayer?.setRasterDisplay(display);
         options.onDisplayChange?.(display);
     };
+    const updateMediaSampling = () => {
+        if (!mediaSprite)
+            return;
+        const threshold = options.pixelInspection?.minScale;
+        if (threshold === undefined)
+            return;
+        const source = mediaSprite.texture.source;
+        const mode = viewportScale >= threshold ? "nearest" : "linear";
+        if (source.scaleMode === mode)
+            return;
+        source.scaleMode = mode;
+        source.style.update();
+    };
     const applyViewportTransform = () => {
         if (!mediaScene || !baseFit)
             return;
         const transform = viewport.getTransform();
         viewportScale = baseFit.scale * transform.scale;
+        updateMediaSampling();
         mediaScene.scale.set(viewportScale);
         const box = syncPresentationBox();
         mediaScene.position.set(baseFit.x + transform.x - box.left, baseFit.y + transform.y - box.top);
@@ -18841,15 +19188,17 @@ async function createPixiMediaScene(options) {
             renderScene();
     };
     let unsubscribeDetectionTimeline;
-    if (frameChannel) {
-        frameChannel.onPresentedFrame(handlePresentedFrame);
+    if (rendersOnChange) {
         document.addEventListener?.("visibilitychange", handleVisibilityChange);
         // A detection load landing moves what the window covers exactly as a cook
         // landing does. Nothing else brings that to a resting playhead: the layers
         // read the timeline only while drawing, and this is what makes the draw.
         unsubscribeDetectionTimeline = options.detectionTimeline.subscribe?.(handlePreparedWindowChange);
     }
-    else {
+    if (frameChannel) {
+        frameChannel.onPresentedFrame(handlePresentedFrame);
+    }
+    else if (!stillFrame) {
         app.ticker.add(updateMediaSceneFit);
         app.ticker.add(drawAnnotationOverlayNow);
         app.ticker.add(tickFocusLayer);
@@ -18919,11 +19268,14 @@ async function createPixiMediaScene(options) {
         advanceFocus: () => undefined,
         drawAnnotationOverlay: frameChannel
             ? presentLayers.drawAnnotationOverlay
-            : () => undefined,
+            : stillFrame
+                ? (mediaTime) => drawAnnotationOverlay(mediaTime, overlayNow())
+                : () => undefined,
     };
     // A viewport-style redraw covers the layers whose geometry is a function of
-    // the viewport scale. Neither the mask raster nor the interaction hit map
-    // takes one, and the hit map is what decides the hover a pan must not move.
+    // the viewport scale. Mask outlines reuse the artifact already on screen;
+    // the mask raster and the interaction hit map stay untouched, so a pan
+    // does not change which detection is hovered.
     const viewportStyleRedrawLayers = {
         ...annotationDrawLayers,
         drawBox: (mediaTime) => {
@@ -18932,7 +19284,7 @@ async function createPixiMediaScene(options) {
         },
         drawDepth: undefined,
         drawInteraction: undefined,
-        drawMask: undefined,
+        drawMask: () => maskLayer?.redrawViewportStyles(viewportScale),
     };
     let frameDrawTimings = createFrameDrawTimings();
     let presentStartMs = 0;
@@ -18968,7 +19320,7 @@ async function createPixiMediaScene(options) {
     };
     return {
         getRenderCount() {
-            return frameChannel ? renderScheduler.getRenderCount() : null;
+            return rendersOnChange ? renderScheduler.getRenderCount() : null;
         },
         getPreparedAnnotationWindow() {
             return frameChannel ? annotationWindow.getSnapshot() : null;
@@ -19009,7 +19361,7 @@ async function createPixiMediaScene(options) {
             if (currentHeatmapRenderers.length > 0) {
                 heatmapSlot.setDisplay(ensureHeatmapLayer().createContainer());
             }
-            boxSlot.setDisplay(retainedBoxes ?? boxes);
+            boxSlot.setDisplay(retainedGeometry ? undefined : (retainedBoxes ?? boxes));
             vectorDisplay = new Container();
             attachPolygonLayerDisplay();
             vectorDisplay.addChild(vectorLayer.createContainer());
@@ -19081,6 +19433,7 @@ async function createPixiMediaScene(options) {
                     stagingTexture?.update();
                     const { boxState, regionState } = drawFramePresentLayers(annotationDrawLayers, sample.timestamp);
                     updateMediaSceneFit();
+                    renderOnChange();
                     return {
                         ...createPresentedSampleState(sample.timestamp, boxState, regionState),
                         duration: sample.duration,
@@ -19096,6 +19449,7 @@ async function createPixiMediaScene(options) {
                 });
                 const { boxState, regionState } = drawFramePresentLayers(measuredAnnotationDrawLayers, sample.timestamp);
                 const fitMs = measure(updateMediaSceneFit);
+                renderOnChange();
                 return {
                     ...createPresentedSampleState(sample.timestamp, boxState, regionState),
                     duration: sample.duration,
@@ -19156,6 +19510,8 @@ async function createPixiMediaScene(options) {
                 const brightness = adjustments.brightness ?? 1;
                 const contrast = adjustments.contrast ?? 1;
                 const filter = new ColorMatrixFilter();
+                // Preserve the renderer's pixel grid through the adjustment pass.
+                filter.resolution = "inherit";
                 filter.brightness(brightness, false);
                 filter.contrast(contrast - 1, true);
                 if (mediaSprite)
@@ -19224,6 +19580,8 @@ async function createPixiMediaScene(options) {
             };
         },
         panViewportBy(dx, dy) {
+            if (viewport.getTransform().locked)
+                return;
             const before = viewport.getTransform();
             viewport.panBy(dx, dy);
             const after = viewport.getTransform();
@@ -19234,7 +19592,7 @@ async function createPixiMediaScene(options) {
             renderOnChange();
         },
         zoomViewportAt(point, factor) {
-            if (!baseFit)
+            if (!baseFit || viewport.getTransform().locked)
                 return;
             viewport.zoomAt({ x: point.x - baseFit.x, y: point.y - baseFit.y }, factor);
             const transform = viewport.getTransform();
@@ -19247,7 +19605,7 @@ async function createPixiMediaScene(options) {
             renderOnChange();
         },
         zoomViewportFromWheel(point, deltaY) {
-            if (!baseFit)
+            if (!baseFit || viewport.getTransform().locked)
                 return;
             viewport.zoomFromWheel({ x: point.x - baseFit.x, y: point.y - baseFit.y }, deltaY);
             const transform = viewport.getTransform();
@@ -19553,6 +19911,7 @@ async function createPixiMediaScene(options) {
                 BlurFilter,
                 BufferImageSource,
                 Container,
+                Graphics,
                 ImageSource,
                 Mesh,
                 MeshGeometry,
@@ -19969,7 +20328,7 @@ async function createPixiMediaScene(options) {
             return;
         }
         const { boxState, regionState } = drawAnnotationFrame(currentMediaTime);
-        if (frameChannel) {
+        if (rendersOnChange) {
             const signature = describeSceneRender();
             if (forceRender)
                 renderScheduler.render(signature);
@@ -19991,7 +20350,7 @@ async function createPixiMediaScene(options) {
             return;
         }
         if (isFramePrepared(mediaTime)) {
-            maskLayer.drawFrame(mediaTime, presentedFrameId);
+            maskLayer.drawFrame(mediaTime, presentedFrameId, viewportScale);
             return;
         }
         maskLayer.clearFrame();
@@ -20026,6 +20385,13 @@ async function createPixiMediaScene(options) {
         labelLayer?.drawCreationPreview(editingState?.kind === AnnotationGestureStateKind.Creating
             ? editingState.preview
             : null, mediaTime, viewportScale);
+        const previewOverlay = options.previewOverlay?.() ?? null;
+        drawnEditingState = editingState;
+        // Only a scene that renders on change compares signatures.
+        if (rendersOnChange) {
+            drawnPreviewOverlayContent =
+                describePreviewOverlayContent(previewOverlay);
+        }
         annotationOverlayLayer.draw({
             frame,
             marquee: interactionState?.marqueeRect ?? null,
@@ -20033,7 +20399,7 @@ async function createPixiMediaScene(options) {
             mediaWidth,
             now: overlayNowMs,
             pointer: interactionState?.pointerPoint ?? null,
-            previewOverlay: options.previewOverlay?.() ?? null,
+            previewOverlay,
             selectedDetectionIds: (interactionState?.selectedPicks ?? []).flatMap(({ detection }) => (detection.id === undefined ? [] : [detection.id])),
             viewportScale,
             visibility: currentVisibility,
@@ -20041,8 +20407,9 @@ async function createPixiMediaScene(options) {
     }
     /**
      * Milliseconds for animations that are not annotation geometry. A pull scene
-     * has a ticker and reads the wall clock; a push scene has the presented media
-     * time and nothing else, so its animations move only when the media does.
+     * has a ticker and reads the wall clock, as does a still frame while its
+     * ticker runs; a push scene has the presented media time and nothing else,
+     * so its animations move only when the media does.
      */
     function overlayNow() {
         return frameChannel ? currentMediaTime * MILLISECONDS_PER_SECOND : now();
@@ -20091,8 +20458,21 @@ async function createPixiMediaScene(options) {
         focusLayer.tick(focusAnimationTimeMs);
     }
     function renderScene() {
+        drawOverlayForEditingState();
         renderScheduler.render(describeSceneRender());
     }
+    /**
+     * The render signature names the editing state, so a render must not record
+     * a state the overlay has not drawn: the redraw that follows would match the
+     * recorded signature and be skipped, leaving the old preview on screen.
+     */
+    function drawOverlayForEditingState() {
+        const editingState = options.editingEngine?.getState();
+        if (editingState === undefined || editingState === drawnEditingState) {
+            return;
+        }
+        drawAnnotationOverlay(currentMediaTime, overlayNow());
+    }
     /**
      * Renders a present at most once per display refresh. Frames arrive as
      * messages from the producer's own thread, so a main thread that falls
@@ -20118,15 +20498,46 @@ async function createPixiMediaScene(options) {
         presentFrameNow(deferred);
     }
     function renderNow() {
-        if (frameChannel)
+        if (rendersOnChange)
             renderScene();
     }
     function renderOnChange() {
-        if (!frameChannel)
+        if (!rendersOnChange)
             return;
         settleFocusAnimation();
+        drawOverlayForEditingState();
         renderScheduler.renderOnChange(describeSceneRender());
     }
+    /**
+     * Runs the ticker on a still frame for as long as something on it moves by
+     * the clock: a looping GIF region or a loading spinner. Pixi renders on
+     * every tick it runs, and the overlay redraws so the spinner turns. Each
+     * render checks again, so the ticker stops with the render that removes the
+     * last of them.
+     */
+    function syncStillFrameTicker() {
+        if (!stillFrame || isDestroyed)
+            return;
+        const animating = hasPresentedSample &&
+            (regionLayer.hasAnimatedDisplay() || hasLoadingDetections());
+        if (animating === stillFrameTickerRunning)
+            return;
+        stillFrameTickerRunning = animating;
+        if (animating) {
+            app.ticker.add(drawAnnotationOverlayNow);
+            app.ticker.start();
+        }
+        else {
+            app.ticker.stop();
+            app.ticker.remove(drawAnnotationOverlayNow);
+        }
+    }
+    function hasLoadingDetections() {
+        const loading = currentVisibility?.loadingDetectionIds;
+        if (!loading)
+            return false;
+        return "size" in loading ? loading.size > 0 : loading.length > 0;
+    }
     /**
      * Everything a render would put on screen, as values that can be compared.
      * Styles are opaque resolvers, so they are compared by identity: handing the
@@ -20164,6 +20575,9 @@ async function createPixiMediaScene(options) {
             interactionState?.marqueeRect,
             options.editingEngine?.getState(),
             options.editingEngine ? interactionState?.pointerPoint : null,
+            // The host's preview is read when the overlay draws, and a host may edit
+            // its arrays in place, so its content is what tells a redraw it changed.
+            drawnPreviewOverlayContent,
         ];
     }
     /**
@@ -20189,10 +20603,23 @@ async function createPixiMediaScene(options) {
             });
             detached.width = mediaWidth;
             detached.height = mediaHeight;
+            const source = sprite.texture.source;
+            const displayScaleMode = source.scaleMode;
             try {
+                // Capture retains its baseline sampling even when pixel inspection
+                // changes display sampling. Extraction is synchronous, so the shared
+                // source can be restored before another frame draws.
+                if (displayScaleMode !== "linear") {
+                    source.scaleMode = "linear";
+                    source.style.update();
+                }
                 return app.renderer.extract.canvas(detached);
             }
             finally {
+                if (displayScaleMode !== "linear") {
+                    source.scaleMode = displayScaleMode;
+                    source.style.update();
+                }
                 detached.destroy();
             }
         };
@@ -20207,6 +20634,7 @@ async function createPixiMediaScene(options) {
                 // takes the new size's scale while still drawing the previous size's
                 // quad, so a preview-sized frame paints the media oversized.
                 sprite.texture = new Texture({ dynamic: true, source: externalSource });
+                updateMediaSampling();
                 sizeMediaSprite();
                 return externalSource;
             },
@@ -20488,6 +20916,37 @@ function elapsedSince(start) {
 function now() {
     return globalThis.performance?.now?.() ?? Date.now();
 }
+/**
+ * A key for what a preview overlay draws, hashed from its coordinates rather
+ * than its arrays, so a preview the host edits in place still changes it.
+ * Coordinates count to a 256th of a media pixel, finer than anything drawn.
+ */
+function describePreviewOverlayContent(overlay) {
+    if (!overlay)
+        return null;
+    let hash = 0x811c9dc5;
+    const mix = (value) => {
+        hash = Math.imul(hash ^ value, 0x01000193);
+    };
+    const mixPoint = (point) => {
+        mix(Math.round(point.x * 256));
+        mix(Math.round(point.y * 256));
+    };
+    for (const polygons of [overlay.hoverPolygons, overlay.draftPolygons]) {
+        mix(polygons?.length ?? -1);
+        for (const polygon of polygons ?? []) {
+            mix(polygon.length);
+            for (const point of polygon)
+                mixPoint(point);
+        }
+    }
+    mix(overlay.points?.length ?? -1);
+    for (const point of overlay.points ?? []) {
+        mixPoint(point);
+        mix(point.positive ? 1 : 0);
+    }
+    return hash;
+}
 /**
  * Fills the container and paints the margin around the canvas in the colour the
  * renderer clears to. The scene owns this element so the canvas is positioned