supervision 0.2.3 → 0.2.4

package/dist/index.js

@@ -556,7 +556,7 @@ function createWorkerRpcClient(options) {
         getFailureMessage() {
             return failureMessage;
         },
-        request(message) {
+        request(message, transfer) {
             if (isDestroyed) {
                 return Promise.reject(new Error("Worker RPC client has been destroyed."));
             }
@@ -571,7 +571,7 @@ function createWorkerRpcClient(options) {
             return new Promise((resolve, reject) => {
                 pendingRequests.set(request.requestId, { reject, resolve });
                 try {
-                    options.worker.postMessage(request);
+                    options.worker.postMessage(request, transfer ?? []);
                 }
                 catch (error) {
                     pendingRequests.delete(request.requestId);
@@ -4747,6 +4747,7 @@ async function createMediaRendererCore(options, providers) {
             polylineStyle: currentPresentation.polylineStyle,
             presentedFrames: protectedPresentedFrames?.source,
             regionRenderers: resolveRegionRenderers(currentPresentation),
+            heatmapRenderers: resolveHeatmapRenderers(currentPresentation),
             previewOverlay: options.previewOverlay,
             renderPreparation: options.renderPreparation
                 ? {
@@ -4997,6 +4998,10 @@ function resolveRegionRenderers(presentation) {
     return (presentation.renderers?.filter((renderer) => renderer.kind === "region") ??
         []);
 }
+function resolveHeatmapRenderers(presentation) {
+    return (presentation.renderers?.filter((renderer) => renderer.kind === "heatmap") ??
+        []);
+}
 async function openRendererMediaSource(options, providers) {
     if (options.src !== undefined && options.source !== undefined) {
         throw new Error("Provide either src or source, not both.");
@@ -5125,6 +5130,7 @@ function presentVideoFrame(presented, targets) {
  * to check its steps against.
  */
 function drawFramePresentLayers(layers, mediaTime, presented) {
+    maybeAt(layers.drawHeatmap, mediaTime, presented);
     maskAt(layers.drawMask, mediaTime, presented);
     const boxState = at(layers.drawBox, mediaTime, presented);
     maybeAt(layers.drawPolygon, mediaTime, presented);
@@ -5153,6 +5159,7 @@ function measureFramePresentLayers(layers, measureStep) {
         drawAnnotationOverlay: timed("drawAnnotationOverlay", layers.drawAnnotationOverlay),
         drawBox: timed("drawBox", layers.drawBox),
         drawFocus: timed("drawFocus", layers.drawFocus),
+        drawHeatmap: maybeTimed("drawHeatmap", layers.drawHeatmap),
         drawInteraction: maybeTimed("drawInteraction", layers.drawInteraction),
         drawInteractionPresentation: timed("drawInteractionPresentation", layers.drawInteractionPresentation),
         drawLabel: maybeTimed("drawLabel", layers.drawLabel),
@@ -5452,7 +5459,7 @@ function writePixel(rgba, canvasWidth, x, y, color) {
     rgba[rgbaOffset + 3] = color.alpha;
 }
 
-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    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        const maskWidth = Math.max(...instructions.map(({ mask }) => mask.width));\n        const maskHeight = 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 = mask.width;\n        const maskHeight = 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 = mask.width;\n        const maskHeight = 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 column = axes.columns[x];\n            for (let step = 0; step < runLength; step += 1) {\n                if (x >= maskWidth) {\n                    break;\n                }\n                data[axes.rows[y] + column] = detectionMaskId;\n                y += 1;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                    column = axes.columns[x];\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     * A stroke is measured in texels of the raster it is drawn on, so a coarser\n     * raster measures it in coarser texels. A stroke of a texel or more keeps at\n     * least one, the thinnest line the shader can draw; a narrower one keeps its\n     * own width, which the shader draws as an inner boundary at any scale. The\n     * ceiling is the widest neighbourhood the shaders scan, so a wider stroke would\n     * be drawn at the ceiling anyway and every layer drawing the same annotation\n     * has to arrive at the same width.\n     */\n    function resolveIdMaskStrokeTexels(strokeWidth, maskWidth, rasterWidth) {\n        const scale = maskWidth > 0 ? rasterWidth / maskWidth : 1;\n        return Math.min(Math.max(strokeWidth * scale, Math.min(strokeWidth, 1)), 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        };\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\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    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    const workerScope = globalThis;\n    workerScope.addEventListener(\"message\", (event) => {\n        const message = event.data;\n        if (message.type !== MaskPreparationWorkerMessageType.Prepare) {\n            return;\n        }\n        prepareMaskFrame(message);\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    /** 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    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        const maskWidth = Math.max(...instructions.map(({ mask }) => mask.width));\n        const maskHeight = 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 = mask.width;\n        const maskHeight = 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 = mask.width;\n        const maskHeight = 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 column = axes.columns[x];\n            for (let step = 0; step < runLength; step += 1) {\n                if (x >= maskWidth) {\n                    break;\n                }\n                data[axes.rows[y] + column] = detectionMaskId;\n                y += 1;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                    column = axes.columns[x];\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     * A stroke is measured in texels of the raster it is drawn on, so a coarser\n     * raster measures it in coarser texels. A stroke of a texel or more keeps at\n     * least one, the thinnest line the shader can draw; a narrower one keeps its\n     * own width, which the shader draws as an inner boundary at any scale. The\n     * ceiling is the widest neighbourhood the shaders scan, so a wider stroke would\n     * be drawn at the ceiling anyway and every layer drawing the same annotation\n     * has to arrive at the same width.\n     */\n    function resolveIdMaskStrokeTexels(strokeWidth, maskWidth, rasterWidth) {\n        const scale = maskWidth > 0 ? rasterWidth / maskWidth : 1;\n        return Math.min(Math.max(strokeWidth * scale, Math.min(strokeWidth, 1)), 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        };\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\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    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 !== 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    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 DEFAULT_WORKER_NAME = "supervision-js-render-preparation";
 let defaultWorkerUrl;
@@ -7663,6 +7670,616 @@ function getBoxLayerState(detectionFrame, activeDetectionIndexes) {
     };
 }
 
+const DEFAULT_STOPS = [
+    { position: 0, color: 0xffd600 },
+    { position: 0.35, color: 0xffd600 },
+    { position: 0.7, color: 0xff7a00 },
+    { position: 1, color: 0xdc1e1e },
+];
+const MAX_HEATMAP_PIXELS = 16_777_216;
+const MAX_HEATMAP_SIDE = 8_192;
+/** Turns semantic scores into an RGBA raster; no palette enters cold data. */
+function colorizeHeatmap(map, renderer) {
+    const { bounds, width, height, values } = map;
+    if (!Number.isFinite(bounds?.x) ||
+        !Number.isFinite(bounds?.y) ||
+        !Number.isFinite(bounds?.width) ||
+        !Number.isFinite(bounds?.height) ||
+        bounds.width <= 0 ||
+        bounds.height <= 0 ||
+        !Number.isInteger(width) ||
+        !Number.isInteger(height) ||
+        width <= 0 ||
+        height <= 0 ||
+        width > MAX_HEATMAP_SIDE ||
+        height > MAX_HEATMAP_SIDE ||
+        width * height > MAX_HEATMAP_PIXELS ||
+        !(Array.isArray(values) ||
+            values instanceof Float32Array ||
+            values instanceof Float64Array ||
+            values instanceof Uint16Array) ||
+        values.length !== width * height) {
+        throw new RangeError("Heatmap bounds and dimensions must be valid, match row-major values, and fit the raster limit.");
+    }
+    const scale = map.valueScale ?? 1;
+    const threshold = (map.threshold ?? 0) * (renderer.thresholdScale ?? 1);
+    const maximumScore = renderer.maximumScore ?? 1;
+    const opacity = clamp01(renderer.opacity ?? 1);
+    const minimumAlpha = clamp01(renderer.minimumAlpha ?? 0);
+    const stops = renderer.colorStops ?? DEFAULT_STOPS;
+    if (!Number.isFinite(scale) ||
+        scale <= 0 ||
+        !Number.isFinite(threshold) ||
+        !Number.isFinite(maximumScore) ||
+        maximumScore <= 0 ||
+        !Number.isFinite(renderer.thresholdScale ?? 1) ||
+        (renderer.thresholdScale ?? 1) < 0 ||
+        !Number.isFinite(renderer.opacity ?? 1) ||
+        !Number.isFinite(renderer.minimumAlpha ?? 0) ||
+        stops.length === 0 ||
+        stops.some((stop, index) => !Number.isFinite(stop.position) ||
+            stop.position < 0 ||
+            stop.position > 1 ||
+            !Number.isInteger(stop.color) ||
+            stop.color < 0 ||
+            stop.color > 0xffffff ||
+            (index > 0 && stop.position < stops[index - 1].position))) {
+        throw new RangeError("Invalid heatmap scale, threshold, or color stops.");
+    }
+    const rgba = new Uint8ClampedArray(new ArrayBuffer(values.length * 4));
+    if (maximumScore <= threshold || opacity === 0)
+        return rgba;
+    for (let index = 0; index < values.length; index += 1) {
+        const score = values[index] * scale;
+        if (!Number.isFinite(score) || score <= threshold)
+            continue;
+        const color = interpolateColor(stops, clamp01(score / maximumScore));
+        const alphaIntensity = clamp01((score - threshold) / (maximumScore - threshold));
+        const offset = index * 4;
+        rgba[offset] = color >> 16;
+        rgba[offset + 1] = (color >> 8) & 0xff;
+        rgba[offset + 2] = color & 0xff;
+        rgba[offset + 3] = Math.round(255 * opacity * (minimumAlpha + (1 - minimumAlpha) * alphaIntensity));
+    }
+    return rgba;
+}
+function interpolateColor(stops, value) {
+    const upperIndex = stops.findIndex((stop) => stop.position >= value);
+    if (upperIndex === -1)
+        return stops[stops.length - 1].color;
+    if (upperIndex === 0)
+        return stops[0].color;
+    const left = stops[upperIndex - 1];
+    const right = stops[upperIndex];
+    const span = right.position - left.position;
+    const ratio = span === 0 ? 1 : (value - left.position) / span;
+    const channel = (shift) => Math.round(((left.color >> shift) & 0xff) * (1 - ratio) +
+        ((right.color >> shift) & 0xff) * ratio);
+    return (channel(16) << 16) | (channel(8) << 8) | channel(0);
+}
+function clamp01(value) {
+    return Math.max(0, Math.min(1, value));
+}
+
+var HeatmapPreparationWorkerMessageType;
+(function (HeatmapPreparationWorkerMessageType) {
+    HeatmapPreparationWorkerMessageType["Prepare"] = "heatmap-prepare";
+    HeatmapPreparationWorkerMessageType["Complete"] = "heatmap-complete";
+    HeatmapPreparationWorkerMessageType["Error"] = "heatmap-error";
+})(HeatmapPreparationWorkerMessageType || (HeatmapPreparationWorkerMessageType = {}));
+
+/** The same bundled worker also cooks masks, but heatmaps use their own queue. */
+function createHeatmapFramePreparer(options) {
+    const mode = options?.mode ?? RenderPreparationMode.Auto;
+    let isDestroyed = false;
+    let rpc = null;
+    if (mode !== RenderPreparationMode.MainThread) {
+        try {
+            if (!options?.workerFactory && typeof Worker === "undefined") {
+                throw new Error("Heatmap preparation worker is unavailable.");
+            }
+            const factory = options?.workerFactory ?? createDefaultRenderPreparationWorkerFactory();
+            rpc = createWorkerRpcClient({
+                defaultErrorMessage: "Heatmap preparation worker failed.",
+                isResponse: isHeatmapResponse,
+                onOrphanedResponse: closeHeatmapResponse,
+                worker: factory.createWorker(),
+            });
+        }
+        catch (error) {
+            if (mode === RenderPreparationMode.Worker)
+                throw error;
+        }
+    }
+    return {
+        destroy() {
+            isDestroyed = true;
+            rpc?.destroy();
+            rpc = null;
+        },
+        async prepare(map, renderer) {
+            if (isDestroyed) {
+                throw new Error("Heatmap frame preparer has been destroyed.");
+            }
+            if (rpc) {
+                const copiedMap = await copyHeatmapForTransfer(map, () => isDestroyed);
+                if (isDestroyed) {
+                    throw new Error("Heatmap frame preparer has been destroyed.");
+                }
+                let response;
+                try {
+                    response = await rpc.request({
+                        map: copiedMap,
+                        renderer,
+                        type: HeatmapPreparationWorkerMessageType.Prepare,
+                    }, [copiedMap.values.buffer]);
+                }
+                catch (error) {
+                    if (mode === RenderPreparationMode.Worker || isDestroyed)
+                        throw error;
+                    rpc?.destroy();
+                    rpc = null;
+                    console.warn("Heatmap preparation worker failed; falling back to the main thread.", error);
+                }
+                if (response?.type === HeatmapPreparationWorkerMessageType.Error) {
+                    throw new RangeError(response.error);
+                }
+                if (response?.type === HeatmapPreparationWorkerMessageType.Complete) {
+                    const resource = response.imageBitmap ?? response.imageData;
+                    if (!resource)
+                        throw new Error("Heatmap worker returned no raster.");
+                    return {
+                        resource,
+                        close() {
+                            if ("close" in resource)
+                                resource.close();
+                        },
+                    };
+                }
+            }
+            // Deferred from the present, even in environments without workers.
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            if (isDestroyed) {
+                throw new Error("Heatmap frame preparer has been destroyed.");
+            }
+            const resource = new ImageData(colorizeHeatmap(map, renderer), map.width, map.height);
+            return { resource, close() { } };
+        },
+    };
+}
+/** Copy in bounded tasks so posting a large map never serializes caller-owned scores. */
+async function copyHeatmapForTransfer(map, isDestroyed) {
+    const values = map.values;
+    if (values.length > 16_777_216) {
+        throw new RangeError("Heatmap exceeds the raster pixel limit.");
+    }
+    const copied = values instanceof Float32Array
+        ? new Float32Array(values.length)
+        : values instanceof Uint16Array
+            ? new Uint16Array(values.length)
+            : new Float64Array(values.length);
+    const chunkSize = 131_072;
+    for (let start = 0; start < values.length; start += chunkSize) {
+        if (isDestroyed()) {
+            throw new Error("Heatmap frame preparer has been destroyed.");
+        }
+        const end = Math.min(start + chunkSize, values.length);
+        if (values instanceof Float32Array || values instanceof Uint16Array) {
+            copied.set(values.subarray(start, end), start);
+        }
+        else {
+            for (let index = start; index < end; index += 1)
+                copied[index] = values[index];
+        }
+        if (end < values.length) {
+            await new Promise((resolve) => setTimeout(resolve, 0));
+        }
+    }
+    return { ...map, values: copied };
+}
+function isHeatmapResponse(value) {
+    if (typeof value !== "object" || value === null)
+        return false;
+    const type = value.type;
+    return (type === HeatmapPreparationWorkerMessageType.Complete ||
+        type === HeatmapPreparationWorkerMessageType.Error);
+}
+function closeHeatmapResponse(response) {
+    if (response.type === HeatmapPreparationWorkerMessageType.Complete) {
+        response.imageBitmap?.close();
+    }
+}
+
+const ASYNC_HEATMAP_PIXELS = 65_536;
+const MAX_VISIBLE_HEATMAP_PIXELS = 16_777_216;
+const MAX_CACHED_HEATMAP_BYTES = 128 * 1024 * 1024;
+function createPixiHeatmapLayer(options) {
+    const container = new options.Container();
+    let renderers = options.renderers;
+    let lastFrame;
+    let dirty = true;
+    let warnedInvalidHeatmap = false;
+    let warnedFrameBudget = false;
+    let generation = 0;
+    let nextIdentity = 0;
+    let cachedBytes = 0;
+    let destroyed = false;
+    let activeJob;
+    let preparer = options.preparer;
+    const identities = new WeakMap();
+    const cache = new Map();
+    const pending = new Map();
+    const failed = new Set();
+    const activeKeys = new Set();
+    const wantedKeys = new Set();
+    const currentKeys = new Set();
+    const positionedSprites = [];
+    const clear = () => {
+        for (const { sprite, temporaryTexture } of positionedSprites) {
+            const texture = sprite.texture;
+            sprite.removeFromParent();
+            sprite.destroy();
+            if (temporaryTexture)
+                texture.destroy(true);
+        }
+        positionedSprites.length = 0;
+        activeKeys.clear();
+    };
+    const clearCache = () => {
+        if (activeJob && (!options.preparer || options.preparerFactory)) {
+            activeJob.cancelled = true;
+            preparer?.destroy();
+            preparer = undefined;
+            activeJob = undefined;
+        }
+        clear();
+        for (const entry of cache.values()) {
+            entry.texture.destroy(true);
+            entry.image.close();
+        }
+        cache.clear();
+        pending.clear();
+        failed.clear();
+        wantedKeys.clear();
+        currentKeys.clear();
+        cachedBytes = 0;
+        generation += 1;
+    };
+    const keyFor = (map, renderer) => {
+        const identity = (value) => {
+            let id = identities.get(value);
+            if (id === undefined) {
+                id = ++nextIdentity;
+                identities.set(value, id);
+            }
+            return id;
+        };
+        return `${identity(map)}:${identity(renderer)}`;
+    };
+    const touch = (key) => {
+        const entry = cache.get(key);
+        if (entry) {
+            cache.delete(key);
+            cache.set(key, entry);
+        }
+        return entry;
+    };
+    const evict = () => {
+        for (const [key, entry] of cache) {
+            if (cachedBytes <= MAX_CACHED_HEATMAP_BYTES)
+                break;
+            if (activeKeys.has(key))
+                continue;
+            cache.delete(key);
+            cachedBytes -= entry.bytes;
+            entry.texture.destroy(true);
+            entry.image.close();
+        }
+    };
+    const makeCanvasTexture = (map, rgba) => {
+        const canvas = document.createElement("canvas");
+        canvas.width = map.width;
+        canvas.height = map.height;
+        const context = canvas.getContext("2d");
+        if (!context)
+            return undefined;
+        const pixels = context.createImageData(map.width, map.height);
+        pixels.data.set(rgba);
+        context.putImageData(pixels, 0, 0);
+        return new options.Texture({
+            source: new options.CanvasSource({
+                resource: canvas,
+                width: map.width,
+                height: map.height,
+            }),
+        });
+    };
+    const makePreparedTexture = (map, image) => {
+        if (typeof ImageBitmap !== "undefined" &&
+            image.resource instanceof ImageBitmap &&
+            options.ImageSource) {
+            return new options.Texture({
+                source: new options.ImageSource({
+                    dynamic: false,
+                    resource: image.resource,
+                    width: map.width,
+                    height: map.height,
+                }),
+            });
+        }
+        const imageData = image.resource;
+        const texture = makeCanvasTexture(map, imageData.data);
+        if (!texture)
+            throw new Error("Unable to create heatmap texture.");
+        return texture;
+    };
+    const visibleMaps = (frame) => {
+        const orderedDetections = frame.detections
+            .map((detection, index) => ({ detection, index }))
+            .sort((left, right) => (left.detection.zIndex ?? left.index) -
+            (right.detection.zIndex ?? right.index) || left.index - right.index);
+        const result = [];
+        let pixels = 0;
+        for (const { detection } of orderedDetections) {
+            const map = detection.heatmap;
+            if (!map || !options.isVisible(detection))
+                continue;
+            for (const renderer of renderers) {
+                if (pixels + map.width * map.height > MAX_VISIBLE_HEATMAP_PIXELS) {
+                    if (!warnedFrameBudget) {
+                        console.warn("Skipping heatmaps beyond the 16M-pixel frame budget.");
+                        warnedFrameBudget = true;
+                    }
+                    continue;
+                }
+                pixels += map.width * map.height;
+                result.push({ detection, map, renderer });
+            }
+        }
+        return result;
+    };
+    const shouldPrepareAsync = (map, visiblePixelCount) => map.width * map.height >= ASYNC_HEATMAP_PIXELS ||
+        visiblePixelCount >= ASYNC_HEATMAP_PIXELS;
+    const pump = () => {
+        if (destroyed || activeJob || pending.size === 0)
+            return;
+        const job = pending.values().next().value;
+        if (!job)
+            return;
+        pending.delete(job.key);
+        activeJob = job;
+        preparer ??=
+            options.preparerFactory?.() ??
+                options.preparer ??
+                createHeatmapFramePreparer(options.renderPreparation);
+        void preparer
+            .prepare(job.map, job.renderer)
+            .then(async (image) => {
+            if (destroyed ||
+                job.cancelled ||
+                job.generation !== generation ||
+                !wantedKeys.has(job.key)) {
+                image.close();
+                return;
+            }
+            let texture;
+            try {
+                texture = makePreparedTexture(job.map, image);
+                await options.prepareTexture?.(texture);
+            }
+            catch (error) {
+                texture?.destroy(true);
+                image.close();
+                if (destroyed || job.cancelled || job.generation !== generation) {
+                    return;
+                }
+                failed.add(job.key);
+                if (!warnedInvalidHeatmap) {
+                    console.warn("Skipping an invalid detection heatmap.", error);
+                    warnedInvalidHeatmap = true;
+                }
+                if (currentKeys.has(job.key))
+                    options.onPreparedWindowChange?.();
+                return;
+            }
+            if (destroyed ||
+                job.cancelled ||
+                job.generation !== generation ||
+                !wantedKeys.has(job.key)) {
+                texture.destroy(true);
+                image.close();
+                return;
+            }
+            cache.set(job.key, {
+                texture,
+                image,
+                bytes: job.map.width * job.map.height * 4,
+            });
+            cachedBytes += job.map.width * job.map.height * 4;
+            evict();
+            dirty = true;
+            if (currentKeys.has(job.key))
+                options.onPreparedWindowChange?.();
+        })
+            .catch((error) => {
+            if (destroyed || job.cancelled || job.generation !== generation)
+                return;
+            failed.add(job.key);
+            if (!warnedInvalidHeatmap) {
+                console.warn("Skipping an invalid detection heatmap.", error);
+                warnedInvalidHeatmap = true;
+            }
+            if (currentKeys.has(job.key))
+                options.onPreparedWindowChange?.();
+        })
+            .finally(() => {
+            if (activeJob === job)
+                activeJob = undefined;
+            pump();
+        });
+    };
+    const enqueue = (map, renderer) => {
+        const key = keyFor(map, renderer);
+        if (cache.has(key) ||
+            failed.has(key) ||
+            pending.has(key) ||
+            activeJob?.key === key)
+            return;
+        pending.set(key, { key, map, renderer, generation });
+        pump();
+    };
+    const cancelUnwantedJob = () => {
+        if (!activeJob ||
+            wantedKeys.has(activeJob.key) ||
+            (options.preparer && !options.preparerFactory)) {
+            return;
+        }
+        activeJob.cancelled = true;
+        preparer?.destroy();
+        preparer = undefined;
+        activeJob = undefined;
+        pump();
+    };
+    return {
+        createContainer: () => container,
+        setRenderers(next) {
+            if (next.length === renderers.length &&
+                next.every((renderer, index) => renderer === renderers[index])) {
+                return;
+            }
+            renderers = next;
+            clearCache();
+            dirty = true;
+        },
+        invalidate() {
+            dirty = true;
+        },
+        isArtifactPrepared(mediaTime) {
+            const frame = options.detectionTimeline.selectFrame(mediaTime);
+            if (!frame || renderers.length === 0)
+                return true;
+            const maps = visibleMaps(frame);
+            const visiblePixelCount = maps.reduce((total, { map }) => total + map.width * map.height, 0);
+            return maps.every(({ map, renderer }) => {
+                if (!shouldPrepareAsync(map, visiblePixelCount))
+                    return true;
+                const key = keyFor(map, renderer);
+                return cache.has(key) || failed.has(key);
+            });
+        },
+        prepareFrame(mediaTime) {
+            const frame = options.detectionTimeline.selectFrame(mediaTime);
+            if (!frame || renderers.length === 0)
+                return;
+            const maps = visibleMaps(frame);
+            const visiblePixelCount = maps.reduce((total, { map }) => total + map.width * map.height, 0);
+            for (const { map, renderer } of maps) {
+                if (shouldPrepareAsync(map, visiblePixelCount)) {
+                    wantedKeys.add(keyFor(map, renderer));
+                    enqueue(map, renderer);
+                }
+            }
+        },
+        translateDetection(id, dx, dy) {
+            let translated = false;
+            for (const entry of positionedSprites) {
+                if (entry.detectionId !== id)
+                    continue;
+                entry.sprite.x = entry.x + dx;
+                entry.sprite.y = entry.y + dy;
+                translated = true;
+            }
+            return translated;
+        },
+        drawFrame(mediaTime) {
+            const frame = options.detectionTimeline.selectFrame(mediaTime);
+            if (!dirty && frame === lastFrame)
+                return;
+            clear();
+            pending.clear();
+            wantedKeys.clear();
+            currentKeys.clear();
+            if (!frame || renderers.length === 0) {
+                lastFrame = frame;
+                dirty = false;
+                cancelUnwantedJob();
+                return;
+            }
+            const maps = visibleMaps(frame);
+            const visiblePixelCount = maps.reduce((total, { map }) => total + map.width * map.height, 0);
+            for (const { detection, map, renderer } of maps) {
+                const key = keyFor(map, renderer);
+                if (shouldPrepareAsync(map, visiblePixelCount)) {
+                    wantedKeys.add(key);
+                    currentKeys.add(key);
+                }
+                let texture = touch(key)?.texture;
+                let temporaryTexture = false;
+                if (!texture && !failed.has(key)) {
+                    if (shouldPrepareAsync(map, visiblePixelCount)) {
+                        enqueue(map, renderer);
+                        continue;
+                    }
+                    try {
+                        texture = makeCanvasTexture(map, colorizeHeatmap(map, renderer));
+                        temporaryTexture = true;
+                    }
+                    catch (error) {
+                        if (!(error instanceof RangeError))
+                            throw error;
+                        failed.add(key);
+                        if (!warnedInvalidHeatmap) {
+                            console.warn("Skipping an invalid detection heatmap.", error);
+                            warnedInvalidHeatmap = true;
+                        }
+                        continue;
+                    }
+                }
+                if (!texture)
+                    continue;
+                const sprite = new options.Sprite({ texture });
+                sprite.x = map.bounds.x - map.bounds.width / 2;
+                sprite.y = map.bounds.y - map.bounds.height / 2;
+                sprite.width = map.bounds.width;
+                sprite.height = map.bounds.height;
+                container.addChild(sprite);
+                if (!temporaryTexture)
+                    activeKeys.add(key);
+                positionedSprites.push({
+                    sprite,
+                    detectionId: detection.id,
+                    x: sprite.x,
+                    y: sprite.y,
+                    temporaryTexture,
+                });
+            }
+            evict();
+            lastFrame = frame;
+            dirty = false;
+            const frames = getBufferedDetectionTimelineFrameSnapshot(options.detectionTimeline);
+            const frameIndex = frames.indexOf(frame);
+            const nextFrame = frames[frameIndex + 1];
+            if (frameIndex >= 0 && nextFrame) {
+                const nextMaps = visibleMaps(nextFrame);
+                const nextPixelCount = nextMaps.reduce((total, { map }) => total + map.width * map.height, 0);
+                for (const { map, renderer } of nextMaps) {
+                    if (shouldPrepareAsync(map, nextPixelCount)) {
+                        wantedKeys.add(keyFor(map, renderer));
+                        enqueue(map, renderer);
+                    }
+                }
+            }
+            cancelUnwantedJob();
+        },
+        destroy() {
+            destroyed = true;
+            clearCache();
+            preparer?.destroy();
+            container.destroy();
+        },
+    };
+}
+
 const MAX_FOCUS_MASK_IDS = 16;
 /**
  * How far the media may travel before a cutout drawn for an earlier frame stops
@@ -12850,6 +13467,7 @@ function resolveAnnotationOverlayStyle(style) {
 var PixiSceneLayerKind;
 (function (PixiSceneLayerKind) {
     PixiSceneLayerKind["Media"] = "media";
+    PixiSceneLayerKind["Heatmap"] = "heatmap";
     PixiSceneLayerKind["Mask"] = "mask";
     PixiSceneLayerKind["Box"] = "box";
     PixiSceneLayerKind["Vector"] = "vector";
@@ -12892,6 +13510,8 @@ function defaultLayerOrder(kind) {
     switch (kind) {
         case PixiSceneLayerKind.Media:
             return 0;
+        case PixiSceneLayerKind.Heatmap:
+            return 50;
         case PixiSceneLayerKind.Mask:
             return 100;
         case PixiSceneLayerKind.Box:
@@ -12981,6 +13601,7 @@ const RENDERED_PRESENTATION_FIELDS = [
 const FRAME_DRAW_TIMING_BUCKETS = {
     drawBox: "boxMs",
     drawFocus: "focusMs",
+    drawHeatmap: "maskMs",
     drawInteraction: "interactionMs",
     drawInteractionPresentation: "interactionMs",
     drawLabel: "labelMs",
@@ -13020,7 +13641,9 @@ function observePixiContainerResize(container, resize) {
  */
 async function createPixiMediaScene(options) {
     const pixi = await import('pixi.js');
-    const { AlphaMask, Application, Assets, BlurFilter, BufferImageSource, CanvasSource, Container, defaultFilterVert, Filter, Graphics, ImageSource, Mesh, MeshGeometry, Rectangle, Sprite, Shader, Text, Texture, UniformGroup, } = pixi;
+    const { AlphaMask, Application, Assets, BlurFilter, BufferImageSource, CanvasSource, Container, defaultFilterVert, Filter, Graphics, ImageSource, Mesh, MeshGeometry, PrepareSystem, Rectangle, Sprite, Shader, Text, Texture, UniformGroup, extensions, } = pixi;
+    // The package build drops side-effect-only imports, so register explicitly.
+    extensions.add(PrepareSystem);
     const { GifSprite } = await import('pixi.js/gif');
     const app = new Application();
     /**
@@ -13041,6 +13664,7 @@ async function createPixiMediaScene(options) {
     let currentOrientedBoxStyle = options.orientedBoxStyle ?? null;
     let currentPercentageBarStyle = options.percentageBarStyle ?? null;
     let currentRegionRenderers = options.regionRenderers;
+    let currentHeatmapRenderers = options.heatmapRenderers ?? [];
     let regionMaskCoverageKey = resolveRegionMaskCoverageKey(currentRegionRenderers);
     let currentPolygonStyle = options.polygonStyle === undefined
         ? new BasePolygonStyle()
@@ -13061,7 +13685,7 @@ async function createPixiMediaScene(options) {
     let regionCoverageStyleCache = null;
     const annotationWindow = createPreparedAnnotationWindow({
         detectionTimeline: options.detectionTimeline,
-        getLayers: () => [maskLayer, polygonLayer].filter((layer) => layer !== undefined),
+        getLayers: () => [maskLayer, polygonLayer, heatmapLayer].filter((layer) => layer !== undefined),
         getPlayheadMediaTime: () => currentMediaTime,
         renderPreparation: options.renderPreparation,
     });
@@ -13105,6 +13729,21 @@ async function createPixiMediaScene(options) {
         Graphics: options.editingEngine ? Graphics : undefined,
         resolveContextState,
     });
+    let heatmapLayer;
+    const ensureHeatmapLayer = () => (heatmapLayer ??= createPixiHeatmapLayer({
+        CanvasSource,
+        Container,
+        ImageSource,
+        Sprite,
+        Texture,
+        detectionTimeline: annotationDetectionTimeline,
+        isVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
+        // A partial heatmap changes pixels before the all-ready token changes.
+        onPreparedWindowChange: () => redrawAnnotationsNow(true),
+        prepareTexture: (texture) => app.renderer.prepare.upload(texture),
+        renderPreparation: options.renderPreparation,
+        renderers: currentHeatmapRenderers,
+    }));
     let polygonLayer = options.polygonStyle !== undefined &&
         currentPolygonStyle &&
         !options.editingEngine
@@ -13248,6 +13887,7 @@ async function createPixiMediaScene(options) {
     let polygonDisplay;
     let timelineContext;
     const mediaSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Media);
+    const heatmapSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Heatmap);
     const maskSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Mask);
     const boxSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Box);
     const vectorSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Vector);
@@ -13259,6 +13899,7 @@ async function createPixiMediaScene(options) {
     const labelSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Label);
     const layerSlots = [
         mediaSlot,
+        heatmapSlot,
         maskSlot,
         boxSlot,
         vectorSlot,
@@ -13354,6 +13995,7 @@ async function createPixiMediaScene(options) {
         fastTranslatedDetectionId = id;
         regionLayer.translateDetection(id, dx, dy);
         labelLayer?.translateDetection(id, dx, dy);
+        heatmapLayer?.translateDetection(id, dx, dy);
         renderNow();
     });
     const redrawDetectionLayers = (id) => {
@@ -13390,6 +14032,7 @@ async function createPixiMediaScene(options) {
             fastTranslatedDetectionId = null;
             regionLayer.translateDetection(id, 0, 0);
             labelLayer?.translateDetection(id, 0, 0);
+            heatmapLayer?.translateDetection(id, 0, 0);
             regionLayer.drawFrame(currentMediaTime, viewportScale);
             labelLayer?.drawFrame(currentMediaTime, viewportScale);
             renderNow();
@@ -13567,6 +14210,7 @@ async function createPixiMediaScene(options) {
         stagingTexture?.update();
     };
     const presentLayers = {
+        drawHeatmap: (mediaTime) => heatmapLayer?.drawFrame(mediaTime),
         advanceFocus: advanceFocusAnimation,
         drawAnnotationOverlay: (mediaTime) => drawAnnotationOverlay(mediaTime, mediaTime * MILLISECONDS_PER_SECOND),
         drawBox: (mediaTime) => boxLayer.drawFrame(mediaTime, viewportScale),
@@ -13707,6 +14351,9 @@ async function createPixiMediaScene(options) {
             if (!retainedBoxes)
                 boxLayer.attachGraphics(boxes);
             mediaSlot.setDisplay(mediaSprite);
+            if (currentHeatmapRenderers.length > 0) {
+                heatmapSlot.setDisplay(ensureHeatmapLayer().createContainer());
+            }
             boxSlot.setDisplay(retainedBoxes ?? boxes);
             vectorDisplay = new Container();
             attachPolygonLayerDisplay();
@@ -13953,6 +14600,7 @@ async function createPixiMediaScene(options) {
             if (presentation.visibility !== undefined) {
                 const maskVisibilityChanged = !canReuseMaskVisibilityArtifacts(currentVisibility, presentation.visibility);
                 currentVisibility = presentation.visibility;
+                heatmapLayer?.invalidate();
                 boxLayer.invalidate();
                 vectorLayer.setStyles({});
                 labelLayer?.setLabelStyle(currentLabelStyle);
@@ -14006,6 +14654,17 @@ async function createPixiMediaScene(options) {
             }
             currentRegionRenderers =
                 presentation.renderers?.filter((renderer) => renderer.kind === "region") ?? [];
+            currentHeatmapRenderers =
+                presentation.renderers?.filter((renderer) => renderer.kind === "heatmap") ?? [];
+            if (currentHeatmapRenderers.length > 0) {
+                const layer = ensureHeatmapLayer();
+                layer.setRenderers(currentHeatmapRenderers);
+                heatmapSlot.setDisplay(layer.createContainer());
+                syncSceneChildren();
+            }
+            else {
+                heatmapLayer?.setRenderers([]);
+            }
             const nextRegionMaskCoverageKey = resolveRegionMaskCoverageKey(currentRegionRenderers);
             const regionMaskCoverageChanged = nextRegionMaskCoverageKey !== regionMaskCoverageKey;
             regionMaskCoverageKey = nextRegionMaskCoverageKey;
@@ -14105,6 +14764,7 @@ async function createPixiMediaScene(options) {
             labelLayer?.destroy();
             vectorLayer.destroy();
             regionLayer.destroy();
+            heatmapLayer?.destroy();
             maskBrushPreview?.destroy();
             unsubscribeFastTranslate?.();
             unsubscribeEditingState?.();
@@ -14584,15 +15244,18 @@ async function createPixiMediaScene(options) {
         redrawAnnotationsNow();
     }
     /** Redraws the frame on screen whether or not its readiness moved. */
-    function redrawAnnotationsNow() {
+    function redrawAnnotationsNow(forceRender = false) {
         if (isPresenting || isDestroyed) {
             return;
         }
         const { boxState, regionState } = drawAnnotationFrame(currentMediaTime);
-        if (!frameChannel ||
-            !renderScheduler.renderOnChange(describeSceneRender())) {
+        if (!frameChannel)
+            return;
+        const signature = describeSceneRender();
+        if (forceRender)
+            renderScheduler.render(signature);
+        else if (!renderScheduler.renderOnChange(signature))
             return;
-        }
         options.onPresentationUpdate?.(createPresentedSampleState(currentMediaTime, boxState, regionState));
     }
     function drawAnnotationFrame(mediaTime) {