supervision 0.2.9 → 0.2.10

package/dist/index.js

@@ -1,7 +1,7 @@
-import { copySortedDetectionFrames, detectionFrameOverlapsRange, sortedDetectionFrames, projectDetectionFrameForTracking, createSortTracker, createOCSortTracker, createCBIoUTracker, createByteTrackTracker, MediaErrorKind, includeDefined, createDepthColormapLut, parseDepthManifest, validateDepthMap, resolveDepthFrameFile, PLAYHEAD_QUANTIZATION_TOLERANCE_SECONDS, decodeCompressedRleMask, decodeCompressedRleCounts, createIdMaskFrame, encodeBinaryMask, rasterizePolygonToMask, resolveIdMaskPaletteId, canReuseMaskStyleArtifacts, getBufferedDetectionTimelineFrameSnapshot, MediaSourceStatus, MediaRendererPlaybackState, MediaRendererFit, createDefaultAnnotationPresentation, createProjectedDetectionFrameSource, createArrayDetectionFrameSource, createBufferedDetectionTimeline, resolveAnnotationRendererPresentation, PlaybackGateReach, createIdleDetectionBufferState, MediaInteractionMode, MAX_ID_MASK_PALETTE_ENTRIES, StrokeAlignment, BaseBoxStyle, centerRectToTopLeftRect, BoxShape, depthPreviewTopCode, resolveDepthColorMapping, resolveDepthQuantity, computeDepthPercentileRange, BaseFocusStyle, extractDetectionMaskRectRuns, AnnotationGestureStateKind, AnnotationHandleKind, getDetectionRect, DetectionPickTarget, rebaseDetectionPickToFrame, pickDetectionAtPoint, createDetectionPickKey, followDetectionPickAcrossFrames, haveSameDetectionPickIdentities, pickAnnotationHandle, getAnnotationHandles, MAX_ID_MASK_STROKE_WIDTH, LabelPlacement, BasePolygonStyle, BasePolylineStyle, BaseKeypointStyle, ShapeInstructionKind, sampleEllipseArc, resolveEllipseSegmentCount, KeypointMarkerShape, MarkerSizeSpace, MarkerShape, resolveMarkerGeometry, BaseInteractionStyle, DetectionInteractionState, writeIdMaskPaletteEntry, resolveIdMaskStrokeTexels, DetectionBufferStatus, resolveMaskStyleOpacity, pickDetectionByMaskId, BoxStrokeAlignment, RegionRendererMediaEffectKind, RegionRendererSourceKind, RegionRendererCoverageKind, RegionRendererSizeSpace, resolveStyleValue, resolveAnnotationStyleState, lightenColor, resolveAnnotationRendererStyleFields, annotationRendererKinds, createViewportController, MediaSessionMode, DetectionFrameRetentionMode, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, createCompositeDetectionFrameSource, MediaSessionActivityStatus, MediaSessionActivityKind, MediaSessionStatus, createSourceAwarePresentation, projectDetectionFrames, DetectionFrameSelectionMode } from 'supervision-js-core';
-export { BaseBoxCornerStyle, BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMarkerStyle, BaseMaskStyle, BaseOrientedBoxStyle, BasePercentageBarStyle, BasePolygonStyle, BasePolylineStyle, BoxShape, BoxStrokeAlignment, DEFAULT_DETECTION_CLASS_STYLES, DEFAULT_DETECTION_COLOR_SEQUENCE, DepthColormap, DepthMapKind, DepthPreviewLevels, DepthQuantity, DepthSampling, DetectionBufferStatus, DetectionFrameRetentionMode, DetectionFrameSelectionMode, DetectionInteractionState, DetectionMaskEncoding, DetectionPickTarget, FocusTargetMode, KeypointMarkerShape, KeypointVisibility, LabelPlacement, LabelVisibilityMode, MarkerShape, MarkerSizeSpace, MaskRenderMode, MediaErrorKind, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, PercentageBarPlacement, PlaybackGateReach, RegionRendererComposeMode, RegionRendererCoverageKind, RegionRendererMediaEffectKind, RegionRendererRegionKind, RegionRendererSizeSpace, RegionRendererSourceKind, SUPERVISION_ROBOFLOW_COLOR, TrackingGeometry, annotationRendererKinds, annotationRenderers, computeDepthPercentileRange, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createByteTrackTracker, createCBIoUTracker, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createMemoryColdDetectionFrameStore, createOCSortTracker, createProjectedDetectionFrameSource, createSortTracker, createWritableDetectionFrameSource, depthColormapColors, detectionPostProcessors, normalizeDetectionClassName, parseDepthManifest, pickDetectionAtPoint, projectDetectionFrame, projectDetectionFrameForTracking, projectDetectionFrames, readDepthAt, resolveDetectionClassColorStyle } from 'supervision-js-core';
-import { c as createMediaFrameClock, M as MediaSourceError, t as toMediaSourceError, r as resolveDisplayPixelRatio } from './video-engine-media-source-DOFsuGS4.js';
-export { a as createWebVideoEngineMediaRendererSource, g as getMediaErrorKind, i as isMediaSourceError, o as openWebVideoEngineMediaSource } from './video-engine-media-source-DOFsuGS4.js';
+import { copySortedDetectionFrames, detectionFrameOverlapsRange, sortedDetectionFrames, projectDetectionFrameForTracking, createSortTracker, createOCSortTracker, createCBIoUTracker, createByteTrackTracker, MediaErrorKind, includeDefined, createDepthColormapLut, parseDepthManifest, validateDepthMap, resolveDepthFrameFile, PLAYHEAD_QUANTIZATION_TOLERANCE_SECONDS, decodeCompressedRleMask, decodeCompressedRleCounts, createIdMaskFrame, encodeBinaryMask, rasterizePolygonToMask, resolveIdMaskStrokeTexels, resolveIdMaskPaletteId, StrokeAlignment, MAX_ID_MASK_STROKE_WIDTH, canReuseMaskStyleArtifacts, getBufferedDetectionTimelineFrameSnapshot, MediaSourceStatus, MediaRendererPlaybackState, MediaRendererFit, createDefaultAnnotationPresentation, createProjectedDetectionFrameSource, createArrayDetectionFrameSource, createBufferedDetectionTimeline, resolveAnnotationRendererPresentation, PlaybackGateReach, createIdleDetectionBufferState, MediaInteractionMode, MAX_ID_MASK_PALETTE_ENTRIES, BaseBoxStyle, centerRectToTopLeftRect, BoxShape, depthPreviewTopCode, resolveDepthColorMapping, resolveDepthQuantity, computeDepthPercentileRange, BaseFocusStyle, extractDetectionMaskRectRuns, AnnotationGestureStateKind, AnnotationHandleKind, getDetectionRect, DetectionPickTarget, rebaseDetectionPickToFrame, pickDetectionAtPoint, createDetectionPickKey, followDetectionPickAcrossFrames, haveSameDetectionPickIdentities, pickAnnotationHandle, getAnnotationHandles, LabelPlacement, BasePolygonStyle, BasePolylineStyle, BaseKeypointStyle, ShapeInstructionKind, sampleEllipseArc, resolveEllipseSegmentCount, KeypointMarkerShape, MarkerSizeSpace, MarkerShape, resolveMarkerGeometry, BaseInteractionStyle, DetectionInteractionState, writeIdMaskPaletteEntry, DetectionBufferStatus, resolveMaskStyleOpacity, pickDetectionByMaskId, BoxStrokeAlignment, RegionRendererMediaEffectKind, RegionRendererSourceKind, RegionRendererCoverageKind, RegionRendererSizeSpace, resolveStyleValue, resolveAnnotationStyleState, lightenColor, resolveAnnotationRendererStyleFields, annotationRendererKinds, createViewportController, MediaSessionMode, DetectionFrameRetentionMode, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, createCompositeDetectionFrameSource, MediaSessionActivityStatus, MediaSessionActivityKind, MediaSessionStatus, createSourceAwarePresentation, projectDetectionFrames, DetectionFrameSelectionMode } from 'supervision-js-core';
+export { BaseBoxCornerStyle, BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMarkerStyle, BaseMaskStyle, BaseOrientedBoxStyle, BasePercentageBarStyle, BasePolygonStyle, BasePolylineStyle, BoxShape, BoxStrokeAlignment, DEFAULT_DETECTION_CLASS_STYLES, DEFAULT_DETECTION_COLOR_SEQUENCE, DepthColormap, DepthMapKind, DepthPreviewLevels, DepthQuantity, DepthSampling, DetectionBufferStatus, DetectionFrameRetentionMode, DetectionFrameSelectionMode, DetectionInteractionState, DetectionMaskEncoding, DetectionPickTarget, FocusTargetMode, KeypointMarkerShape, KeypointVisibility, LabelPlacement, LabelVisibilityMode, MarkerShape, MarkerSizeSpace, MaskRenderMode, MediaErrorKind, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, PercentageBarPlacement, PlaybackGateReach, RegionRendererComposeMode, RegionRendererCoverageKind, RegionRendererMediaEffectKind, RegionRendererRegionKind, RegionRendererSizeSpace, RegionRendererSourceKind, SUPERVISION_ROBOFLOW_COLOR, StrokeAlignment, TrackingGeometry, annotationRendererKinds, annotationRenderers, computeDepthPercentileRange, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createByteTrackTracker, createCBIoUTracker, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createMemoryColdDetectionFrameStore, createOCSortTracker, createProjectedDetectionFrameSource, createSortTracker, createWritableDetectionFrameSource, depthColormapColors, detectionPostProcessors, normalizeDetectionClassName, parseDepthManifest, pickDetectionAtPoint, projectDetectionFrame, projectDetectionFrameForTracking, projectDetectionFrames, readDepthAt, resolveDetectionClassColorStyle } from 'supervision-js-core';
+import { c as createMediaFrameClock, M as MediaSourceError, t as toMediaSourceError, r as resolveDisplayPixelRatio } from './video-engine-media-source-MFthAkbe.js';
+export { a as createWebVideoEngineMediaRendererSource, g as getMediaErrorKind, i as isMediaSourceError, o as openWebVideoEngineMediaSource } from './video-engine-media-source-MFthAkbe.js';
 
 const DEFAULT_DATABASE_NAME = "supervision-js-detection-frames";
 const DEFAULT_CHUNK_DURATION_SECONDS = 1;
@@ -3113,7 +3113,7 @@ function assertMediaAspect(map, media) {
     }
 }
 
-const EMBEDDED_MASK_PREPARATION_WORKER_SOURCE = "(function () {\n    'use strict';\n\n    /** Trace closed pixel boundaries, retaining holes and disconnected components. */\n    function traceMaskOutlinePaths(raster, width, height, ids) {\n        const edgesById = new Map();\n        const stride = width + 1;\n        const steps = [1, stride, -1, -stride];\n        const add = (id, vertex, direction) => {\n            let edges = edgesById.get(id);\n            if (!edges)\n                edgesById.set(id, (edges = new Map()));\n            const outgoing = edges.get(vertex);\n            if (outgoing)\n                outgoing.push(direction);\n            else\n                edges.set(vertex, [direction]);\n        };\n        for (let y = 0; y < height; y += 1) {\n            for (let x = 0; x < width; x += 1) {\n                const offset = y * width + x;\n                const id = raster[offset];\n                if (!ids.has(id))\n                    continue;\n                const vertex = y * stride + x;\n                if (y === 0 || raster[offset - width] !== id)\n                    add(id, vertex, 0);\n                if (x === width - 1 || raster[offset + 1] !== id)\n                    add(id, vertex + 1, 1);\n                if (y === height - 1 || raster[offset + width] !== id)\n                    add(id, vertex + stride + 1, 2);\n                if (x === 0 || raster[offset - 1] !== id)\n                    add(id, vertex + stride, 3);\n            }\n        }\n        const result = new Map();\n        for (const [id, edges] of edgesById) {\n            const paths = [];\n            while (edges.size > 0) {\n                const start = edges.keys().next().value;\n                let vertex = start;\n                let previousDirection = -1;\n                let firstDirection = -1;\n                const points = [];\n                do {\n                    const outgoing = edges.get(vertex);\n                    // Turn right at diagonal contacts so separate islands stay separate.\n                    const direction = previousDirection < 0\n                        ? outgoing[0]\n                        : [1, 0, 3, 2]\n                            .map((turn) => (previousDirection + turn) % 4)\n                            .find((candidate) => outgoing.includes(candidate));\n                    if (firstDirection < 0)\n                        firstDirection = direction;\n                    if (direction !== previousDirection)\n                        points.push(vertex % stride, Math.floor(vertex / stride));\n                    outgoing.splice(outgoing.indexOf(direction), 1);\n                    if (outgoing.length === 0)\n                        edges.delete(vertex);\n                    vertex += steps[direction];\n                    previousDirection = direction;\n                } while (vertex !== start);\n                if (previousDirection === firstDirection)\n                    points.splice(0, 2);\n                paths.push(new Float32Array(points));\n            }\n            result.set(id, paths);\n        }\n        return result;\n    }\n\n    /** COCO-compatible keypoint visibility values. */\n    var KeypointVisibility;\n    (function (KeypointVisibility) {\n        KeypointVisibility[KeypointVisibility[\"NotLabeled\"] = 0] = \"NotLabeled\";\n        KeypointVisibility[KeypointVisibility[\"Occluded\"] = 1] = \"Occluded\";\n        KeypointVisibility[KeypointVisibility[\"Visible\"] = 2] = \"Visible\";\n    })(KeypointVisibility || (KeypointVisibility = {}));\n    var DetectionMaskEncoding;\n    (function (DetectionMaskEncoding) {\n        DetectionMaskEncoding[\"CompressedRle\"] = \"compressedRle\";\n    })(DetectionMaskEncoding || (DetectionMaskEncoding = {}));\n\n    var DetectionBufferStatus;\n    (function (DetectionBufferStatus) {\n        DetectionBufferStatus[\"Idle\"] = \"idle\";\n        DetectionBufferStatus[\"Loading\"] = \"loading\";\n        /**\n         * The playback gate is holding playback until the source produces detections\n         * for the requested range. {@link DetectionBufferStatus.Loading} fetches\n         * detections the source already has; this one waits on a producer.\n         */\n        DetectionBufferStatus[\"AwaitingCoverage\"] = \"awaitingCoverage\";\n        DetectionBufferStatus[\"Ready\"] = \"ready\";\n        DetectionBufferStatus[\"Error\"] = \"error\";\n        DetectionBufferStatus[\"Destroyed\"] = \"destroyed\";\n    })(DetectionBufferStatus || (DetectionBufferStatus = {}));\n    /**\n     * How the renderer selects the active detection frame for a media timestamp.\n     */\n    var DetectionFrameSelectionMode;\n    (function (DetectionFrameSelectionMode) {\n        /**\n         * Select the frame whose `[mediaTime, endTime)` interval contains the media\n         * time. This is the default for interval annotations and timestamped sources.\n         *\n         * Frame times must come from the media itself. Times reconstructed from a\n         * nominal frame rate drift against a clip whose real rate differs, and once\n         * that drift passes the half-millisecond selection tolerance a playhead\n         * landing on a frame boundary selects the previous frame's detections.\n         *\n         * A frame that carries no `endTime` stays active until the next frame starts,\n         * which bridges an index the source never produced.\n         * {@link DetectionFrameSelectionMode.NearestFrameIndex} bounds each frame to\n         * one grid step instead, so a missing index reads as no detections.\n         */\n        DetectionFrameSelectionMode[\"Interval\"] = \"interval\";\n        /**\n         * Select from a known inference frame grid using `frameIndex` and\n         * `frameRate`. This is useful when inference was run on normalized frames and\n         * playback should snap detections to that grid.\n         *\n         * A frame speaks for one grid step starting at its own media time, and an\n         * index the source never produced selects nothing rather than a neighbour.\n         *\n         * A frame carrying no `frameIndex` speaks for its step on the same terms,\n         * reached by the time it starts at rather than by an index that names it. Its\n         * `endTime` does not widen it past that step, so a source that labels only\n         * part of what it writes cannot bridge the indexes it never produced.\n         */\n        DetectionFrameSelectionMode[\"NearestFrameIndex\"] = \"nearestFrameIndex\";\n    })(DetectionFrameSelectionMode || (DetectionFrameSelectionMode = {}));\n    var DetectionFrameRetentionMode;\n    (function (DetectionFrameRetentionMode) {\n        /**\n         * Keep writable detections only in an in-memory store. Useful for ephemeral\n         * live streams where old predictions should disappear when evicted.\n         */\n        DetectionFrameRetentionMode[\"MemoryOnly\"] = \"memoryOnly\";\n        /**\n         * Persist every written detection frame. Useful for finite media where seek\n         * and replay should not require recomputing detections.\n         */\n        DetectionFrameRetentionMode[\"PersistAll\"] = \"persistAll\";\n        /**\n         * Persist only the most recent retention window. Useful for long-running\n         * streams where replay is bounded to a recent time horizon.\n         */\n        DetectionFrameRetentionMode[\"PersistWindow\"] = \"persistWindow\";\n    })(DetectionFrameRetentionMode || (DetectionFrameRetentionMode = {}));\n    function decodeCompressedRleMask(mask) {\n        if (mask.encoding !== DetectionMaskEncoding.CompressedRle) {\n            throw new Error(`Unsupported detection mask encoding: ${mask.encoding}`);\n        }\n        const data = new Uint8Array(mask.width * mask.height);\n        const counts = decodeCompressedRleCounts(mask.counts);\n        let offset = 0;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            const isForeground = index % 2 === 1;\n            if (isForeground) {\n                for (let runOffset = 0; runOffset < runLength; runOffset += 1) {\n                    const maskOffset = offset + runOffset;\n                    const x = Math.floor(maskOffset / mask.height);\n                    const y = maskOffset % mask.height;\n                    const rowMajorOffset = y * mask.width + x;\n                    if (rowMajorOffset < data.length) {\n                        data[rowMajorOffset] = 1;\n                    }\n                }\n            }\n            offset += runLength;\n        }\n        return {\n            data,\n            height: mask.height,\n            width: mask.width,\n        };\n    }\n    function decodeCompressedRleCounts(counts) {\n        const decoded = [];\n        let index = 0;\n        while (index < counts.length) {\n            let value = 0;\n            let shift = 0;\n            let charCode;\n            do {\n                charCode = counts.charCodeAt(index) - 48;\n                index += 1;\n                value |= (charCode & 0x1f) << shift;\n                shift += 5;\n            } while (charCode & 0x20);\n            if (charCode & 0x10) {\n                value |= -1 << shift;\n            }\n            if (decoded.length > 2) {\n                value += decoded[decoded.length - 2] ?? 0;\n            }\n            decoded.push(value);\n        }\n        return decoded;\n    }\n    function encodeCompressedRleCounts(counts) {\n        return counts\n            .map((count, index) => {\n            let value = index > 2 ? count - counts[index - 2] : count;\n            let encoded = \"\";\n            let more = true;\n            while (more) {\n                let charCode = value & 0x1f;\n                value >>= 5;\n                more = !((value === 0 && (charCode & 0x10) === 0) ||\n                    (value === -1 && (charCode & 0x10) !== 0));\n                if (more) {\n                    charCode |= 0x20;\n                }\n                encoded += String.fromCharCode(charCode + 48);\n            }\n            return encoded;\n        })\n            .join(\"\");\n    }\n\n    var AnnotationFrameMutationKind;\n    (function (AnnotationFrameMutationKind) {\n        AnnotationFrameMutationKind[\"Add\"] = \"add\";\n        AnnotationFrameMutationKind[\"Remove\"] = \"remove\";\n        AnnotationFrameMutationKind[\"Replace\"] = \"replace\";\n        AnnotationFrameMutationKind[\"Transact\"] = \"transact\";\n        AnnotationFrameMutationKind[\"Update\"] = \"update\";\n    })(AnnotationFrameMutationKind || (AnnotationFrameMutationKind = {}));\n\n    /** Geometry projected into a tracker. The original detection payload is retained. */\n    var TrackingGeometry;\n    (function (TrackingGeometry) {\n        TrackingGeometry[\"Box\"] = \"box\";\n        TrackingGeometry[\"Mask\"] = \"mask\";\n        TrackingGeometry[\"Keypoints\"] = \"keypoints\";\n    })(TrackingGeometry || (TrackingGeometry = {}));\n\n    var DetectionMaskPayloadFormat;\n    (function (DetectionMaskPayloadFormat) {\n        DetectionMaskPayloadFormat[\"RawCocoRle\"] = \"rawCocoRle\";\n        DetectionMaskPayloadFormat[\"DeflatedBase64\"] = \"deflatedBase64\";\n    })(DetectionMaskPayloadFormat || (DetectionMaskPayloadFormat = {}));\n    function encodeBinaryMask(data, width, height) {\n        assertMaskDimensions(data, width, height);\n        const runs = [];\n        let currentValue = 0;\n        let runLength = 0;\n        for (let x = 0; x < width; x += 1) {\n            for (let y = 0; y < height; y += 1) {\n                const value = data[y * width + x] ? 1 : 0;\n                if (value === currentValue) {\n                    runLength += 1;\n                }\n                else {\n                    runs.push(runLength);\n                    currentValue = value;\n                    runLength = 1;\n                }\n            }\n        }\n        runs.push(runLength);\n        return {\n            counts: encodeCompressedRleCounts(runs),\n            encoding: DetectionMaskEncoding.CompressedRle,\n            height,\n            width,\n        };\n    }\n    function assertMaskSize(width, height) {\n        if (!Number.isInteger(width) || width <= 0) {\n            throw new Error(\"Mask width must be a positive integer.\");\n        }\n        if (!Number.isInteger(height) || height <= 0) {\n            throw new Error(\"Mask height must be a positive integer.\");\n        }\n    }\n    function assertMaskDimensions(data, width, height) {\n        assertMaskSize(width, height);\n        if (data.length !== width * height) {\n            throw new Error(\"Mask data length must equal width * height.\");\n        }\n    }\n\n    function centerRectToTopLeftRect(rect) {\n        return {\n            height: rect.height,\n            width: rect.width,\n            x: rect.x - rect.width / 2,\n            y: rect.y - rect.height / 2,\n        };\n    }\n    function getPointsRect(points) {\n        if (points.length === 0) {\n            return undefined;\n        }\n        let minX = Number.POSITIVE_INFINITY;\n        let minY = Number.POSITIVE_INFINITY;\n        let maxX = Number.NEGATIVE_INFINITY;\n        let maxY = Number.NEGATIVE_INFINITY;\n        for (const point of points) {\n            minX = Math.min(minX, point.x);\n            minY = Math.min(minY, point.y);\n            maxX = Math.max(maxX, point.x);\n            maxY = Math.max(maxY, point.y);\n        }\n        return {\n            height: maxY - minY,\n            width: maxX - minX,\n            x: (minX + maxX) / 2,\n            y: (minY + maxY) / 2,\n        };\n    }\n\n    var DetectionPickTarget;\n    (function (DetectionPickTarget) {\n        DetectionPickTarget[\"Box\"] = \"box\";\n        DetectionPickTarget[\"Edge\"] = \"edge\";\n        DetectionPickTarget[\"Keypoint\"] = \"keypoint\";\n        DetectionPickTarget[\"Label\"] = \"label\";\n        DetectionPickTarget[\"Mask\"] = \"mask\";\n        DetectionPickTarget[\"OrientedBox\"] = \"orientedBox\";\n        DetectionPickTarget[\"Polygon\"] = \"polygon\";\n        DetectionPickTarget[\"Polyline\"] = \"polyline\";\n    })(DetectionPickTarget || (DetectionPickTarget = {}));\n    var MediaInteractionMode;\n    (function (MediaInteractionMode) {\n        MediaInteractionMode[\"Always\"] = \"always\";\n        MediaInteractionMode[\"Disabled\"] = \"disabled\";\n        MediaInteractionMode[\"PausedOnly\"] = \"pausedOnly\";\n    })(MediaInteractionMode || (MediaInteractionMode = {}));\n\n    var AnnotationGeometryKind;\n    (function (AnnotationGeometryKind) {\n        AnnotationGeometryKind[\"Box\"] = \"box\";\n        AnnotationGeometryKind[\"Polygon\"] = \"polygon\";\n        AnnotationGeometryKind[\"Polyline\"] = \"polyline\";\n        AnnotationGeometryKind[\"Keypoints\"] = \"keypoints\";\n        AnnotationGeometryKind[\"Mask\"] = \"mask\";\n    })(AnnotationGeometryKind || (AnnotationGeometryKind = {}));\n    var AnnotationGestureStateKind;\n    (function (AnnotationGestureStateKind) {\n        AnnotationGestureStateKind[\"Idle\"] = \"idle\";\n        AnnotationGestureStateKind[\"Creating\"] = \"creating\";\n        AnnotationGestureStateKind[\"Moving\"] = \"moving\";\n        AnnotationGestureStateKind[\"Resizing\"] = \"resizing\";\n        AnnotationGestureStateKind[\"DragSelecting\"] = \"dragSelecting\";\n    })(AnnotationGestureStateKind || (AnnotationGestureStateKind = {}));\n    var AnnotationHandleKind;\n    (function (AnnotationHandleKind) {\n        AnnotationHandleKind[\"Resize\"] = \"resize\";\n        AnnotationHandleKind[\"Vertex\"] = \"vertex\";\n        AnnotationHandleKind[\"AddVertex\"] = \"addVertex\";\n        AnnotationHandleKind[\"Keypoint\"] = \"keypoint\";\n    })(AnnotationHandleKind || (AnnotationHandleKind = {}));\n\n    /** Alignment for strokes applied to closed rendered geometry. */\n    var StrokeAlignment;\n    (function (StrokeAlignment) {\n        StrokeAlignment[\"Inside\"] = \"inside\";\n        StrokeAlignment[\"Center\"] = \"center\";\n        StrokeAlignment[\"Outside\"] = \"outside\";\n    })(StrokeAlignment || (StrokeAlignment = {}));\n\n    var BoxShape;\n    (function (BoxShape) {\n        BoxShape[\"Rect\"] = \"rect\";\n        BoxShape[\"RoundedRect\"] = \"roundedRect\";\n    })(BoxShape || (BoxShape = {}));\n\n    var FocusTargetMode;\n    (function (FocusTargetMode) {\n        FocusTargetMode[\"Hovered\"] = \"hovered\";\n        FocusTargetMode[\"Selected\"] = \"selected\";\n        FocusTargetMode[\"HoveredAndSelected\"] = \"hoveredAndSelected\";\n        FocusTargetMode[\"Ambient\"] = \"ambient\";\n    })(FocusTargetMode || (FocusTargetMode = {}));\n\n    var DetectionInteractionState;\n    (function (DetectionInteractionState) {\n        DetectionInteractionState[\"Hovered\"] = \"hovered\";\n        DetectionInteractionState[\"Selected\"] = \"selected\";\n    })(DetectionInteractionState || (DetectionInteractionState = {}));\n\n    var LabelPlacement;\n    (function (LabelPlacement) {\n        LabelPlacement[\"Top\"] = \"top\";\n        LabelPlacement[\"Bottom\"] = \"bottom\";\n        LabelPlacement[\"InsideTop\"] = \"insideTop\";\n        LabelPlacement[\"InsideBottom\"] = \"insideBottom\";\n        LabelPlacement[\"Center\"] = \"center\";\n    })(LabelPlacement || (LabelPlacement = {}));\n    var LabelVisibilityMode;\n    (function (LabelVisibilityMode) {\n        LabelVisibilityMode[\"Always\"] = \"always\";\n        LabelVisibilityMode[\"HoveredOnly\"] = \"hoveredOnly\";\n    })(LabelVisibilityMode || (LabelVisibilityMode = {}));\n\n    var MaskRenderMode;\n    (function (MaskRenderMode) {\n        MaskRenderMode[\"FillAndStroke\"] = \"fillAndStroke\";\n        MaskRenderMode[\"FillOnly\"] = \"fillOnly\";\n        MaskRenderMode[\"StrokeOnly\"] = \"strokeOnly\";\n    })(MaskRenderMode || (MaskRenderMode = {}));\n\n    /**\n     * Discriminator for renderer-neutral shape draw instructions.\n     */\n    var ShapeInstructionKind;\n    (function (ShapeInstructionKind) {\n        ShapeInstructionKind[\"Ellipse\"] = \"ellipse\";\n        ShapeInstructionKind[\"Marker\"] = \"marker\";\n        ShapeInstructionKind[\"Path\"] = \"path\";\n    })(ShapeInstructionKind || (ShapeInstructionKind = {}));\n    var MarkerShape;\n    (function (MarkerShape) {\n        MarkerShape[\"Circle\"] = \"circle\";\n        MarkerShape[\"Cross\"] = \"cross\";\n        MarkerShape[\"Square\"] = \"square\";\n        MarkerShape[\"Triangle\"] = \"triangle\";\n    })(MarkerShape || (MarkerShape = {}));\n    /**\n     * Coordinate space for marker sizing. Media sizes scale with the viewport;\n     * screen sizes stay constant on screen, matching stroke-width semantics.\n     */\n    var MarkerSizeSpace;\n    (function (MarkerSizeSpace) {\n        MarkerSizeSpace[\"Media\"] = \"media\";\n        MarkerSizeSpace[\"Screen\"] = \"screen\";\n    })(MarkerSizeSpace || (MarkerSizeSpace = {}));\n\n    var PercentageBarPlacement;\n    (function (PercentageBarPlacement) {\n        PercentageBarPlacement[\"Top\"] = \"top\";\n        PercentageBarPlacement[\"Bottom\"] = \"bottom\";\n        PercentageBarPlacement[\"InsideTop\"] = \"insideTop\";\n        PercentageBarPlacement[\"InsideBottom\"] = \"insideBottom\";\n    })(PercentageBarPlacement || (PercentageBarPlacement = {}));\n\n    var KeypointMarkerShape;\n    (function (KeypointMarkerShape) {\n        KeypointMarkerShape[\"Circle\"] = \"circle\";\n        KeypointMarkerShape[\"Cross\"] = \"cross\";\n    })(KeypointMarkerShape || (KeypointMarkerShape = {}));\n\n    /**\n     * What the stored values of a depth map measure.\n     *\n     * Every kind stores 0 where there is no depth.\n     */\n    const DepthMapKind = {\n        /** Stereo disparity in pixels of the map. Larger is nearer. */\n        DisparityPx: \"disparity_px\",\n        /** Metric depth along the optical axis in metres. Smaller is nearer. */\n        DepthM: \"depth_m\",\n        /**\n         * Unitless inverse depth up to an unknown scale and shift, as monocular\n         * models produce it. Larger is nearer; it has no metric depth.\n         */\n        RelativeInverse: \"relative_inverse\",\n    };\n    /**\n     * The quantity a depth renderer colours.\n     *\n     * Disparity is inverse depth, so it spends colour on near detail the way\n     * stereo measures it. Either way the nearest end of the range is the warm or\n     * bright end of the colour table.\n     */\n    const DepthQuantity = {\n        Disparity: \"disparity\",\n        Depth: \"depth\",\n    };\n    const DepthColormap = {\n        Turbo: \"turbo\",\n        Viridis: \"viridis\",\n        Cividis: \"cividis\",\n        Inferno: \"inferno\",\n        Magma: \"magma\",\n        Grayscale: \"grayscale\",\n    };\n    /** How a depth map is sampled where one map pixel does not cover one media pixel. */\n    const DepthSampling = {\n        /** Nearest when the map is at least media size, edge-aware otherwise. */\n        Auto: \"auto\",\n        Nearest: \"nearest\",\n        /**\n         * Bilinear over valid neighbours only, falling back to the nearest one\n         * across a depth edge, so objects never bleed into the background.\n         */\n        EdgeAware: \"edge-aware\",\n    };\n    /**\n     * The luma range a depth preview video's codes are written in.\n     *\n     * TV range is what browsers' hardware decoders return as written; a decoder\n     * may squeeze full range into TV range or move codes converting it to RGB.\n     */\n    const DepthPreviewLevels = {\n        /** Every code from 0 to 255; the top code is 255. */\n        Full: \"full\",\n        /** Limited range: black is 16 and the top code is 235. */\n        Tv: \"tv\",\n    };\n    new Set(Object.values(DepthColormap));\n    new Set(Object.values(DepthQuantity));\n    new Set(Object.values(DepthSampling));\n    function rasterizePolygonToMask(points, dimensions) {\n        const data = createEmptyMask(dimensions);\n        if (points.length < 3) {\n            return data;\n        }\n        const bounds = centerRectToTopLeftRect(getPointsRect(points));\n        const startY = Math.max(0, Math.floor(bounds.y));\n        const endY = Math.min(dimensions.height - 1, Math.ceil(bounds.y + bounds.height));\n        for (let y = startY; y <= endY; y += 1) {\n            const scanY = y + 0.5;\n            const intersections = [];\n            for (let index = 0; index < points.length; index += 1) {\n                const current = points[index];\n                const next = points[(index + 1) % points.length];\n                if ((current.y <= scanY && next.y > scanY) ||\n                    (next.y <= scanY && current.y > scanY)) {\n                    const ratio = (scanY - current.y) / (next.y - current.y);\n                    intersections.push(current.x + ratio * (next.x - current.x));\n                }\n            }\n            intersections.sort((left, right) => left - right);\n            for (let index = 0; index < intersections.length - 1; index += 2) {\n                const left = Math.max(0, Math.round(intersections[index]));\n                const right = Math.min(dimensions.width, Math.round(intersections[index + 1]));\n                for (let x = left; x < right; x += 1) {\n                    data[y * dimensions.width + x] = 1;\n                }\n            }\n        }\n        return data;\n    }\n    function createEmptyMask(dimensions) {\n        if (!Number.isInteger(dimensions.width) ||\n            dimensions.width <= 0 ||\n            !Number.isInteger(dimensions.height) ||\n            dimensions.height <= 0) {\n            throw new Error(\"Media dimensions must be positive integers.\");\n        }\n        return new Uint8Array(dimensions.width * dimensions.height);\n    }\n\n    /**\n     * Palette slots an id raster can name, one of them the background. A GLSL\n     * fragment stage is guaranteed only 224 uniform vectors, and a palette entry\n     * costs 2.25 of them, so this stays a multiple of four and well inside that\n     * budget; past it a frame draws from the RGBA composite instead.\n     */\n    const MAX_ID_MASK_PALETTE_ENTRIES = 80;\n    const MAX_ID_MASK_STROKE_WIDTH = 16;\n    function createIdMaskFrame(instructions, options = {}) {\n        if (instructions.length === 0) {\n            return undefined;\n        }\n        /* Pixel-grid dimensions use integer parts throughout allocation and RLE\n           traversal. */\n        const maskWidth = Math.floor(Math.max(...instructions.map(({ mask }) => mask.width)));\n        const maskHeight = Math.floor(Math.max(...instructions.map(({ mask }) => mask.height)));\n        const width = resolveRasterWidth(maskWidth, options.maxWidth);\n        const height = width === maskWidth\n            ? maskHeight\n            : Math.max(1, Math.round((width * maskHeight) / maskWidth));\n        const scaledAxes = width === maskWidth\n            ? undefined\n            : createScaledMaskAxes({ height, maskHeight, maskWidth, width });\n        const data = new Uint8Array(new ArrayBuffer(width * height));\n        const fillPalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));\n        const strokePalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));\n        const strokeWidths = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4));\n        let hasStroke = false;\n        let maxStrokeWidth = 0;\n        for (const instruction of instructions) {\n            const detectionMaskId = resolveIdMaskPaletteId(instruction.detectionIndex);\n            if (detectionMaskId === undefined) {\n                return undefined;\n            }\n            writeIdMaskPaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);\n            if (instruction.stroke && instruction.stroke.width > 0) {\n                const strokeWidth = resolveIdMaskStrokeTexels(instruction.stroke.width, maskWidth, width);\n                hasStroke = true;\n                strokeWidths[detectionMaskId] = strokeWidth;\n                maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth);\n                writeIdMaskPaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);\n            }\n            if (scaledAxes) {\n                writeScaledMaskRuns(data, scaledAxes, instruction.mask, detectionMaskId);\n            }\n            else {\n                writeMaskRuns(data, width, instruction.mask, detectionMaskId);\n            }\n        }\n        return {\n            data,\n            fillPalette,\n            hasStroke,\n            height,\n            maxStrokeWidth,\n            sourceWidth: maskWidth,\n            strokePalette,\n            strokeWidths,\n            width,\n        };\n    }\n    /**\n     * Compressed RLE counts runs down each column in turn, so a foreground run is\n     * a contiguous walk down one column that wraps into the next.\n     */\n    function writeMaskRuns(data, frameWidth, mask, detectionMaskId) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = Math.floor(mask.width);\n        const maskHeight = Math.floor(mask.height);\n        let maskOffset = 0;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let x = Math.floor(maskOffset / maskHeight);\n            let y = maskOffset - x * maskHeight;\n            let frameOffset = y * frameWidth + x;\n            for (let step = 0; step < runLength; step += 1) {\n                if (x >= maskWidth) {\n                    break;\n                }\n                data[frameOffset] = detectionMaskId;\n                y += 1;\n                frameOffset += frameWidth;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                    frameOffset = x;\n                }\n            }\n            maskOffset += runLength;\n        }\n    }\n    /**\n     * The scaled twin of writeMaskRuns. Every source pixel marks the texel it lands\n     * in, so a mask keeps every part of itself the smaller raster can hold and\n     * gains up to a texel at its edges.\n     */\n    function writeScaledMaskRuns(data, axes, mask, detectionMaskId) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = Math.floor(mask.width);\n        const maskHeight = Math.floor(mask.height);\n        let maskOffset = 0;\n        const stride = axes.stride;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let x = Math.floor(maskOffset / maskHeight);\n            let y = maskOffset - x * maskHeight;\n            let remaining = runLength;\n            /* A run walks down one column and wraps into the next, so it splits into\n               column-sized segments. Within a segment the destination offset only ever\n               steps by the row pitch or stays put: createMaskAxisMap builds\n               `rows[i] = min(height - 1, floor(i * scale)) * width` with scale <= 1, so\n               consecutive entries differ by exactly 0 or exactly `width`. Walking the\n               destination directly therefore touches the same bytes the per-pixel loop\n               touched, and drops the bounds test, the wrap test and one typed-array\n               load from every source pixel. Where the scale collapses several source\n               rows onto one destination row, this writes that byte once instead of\n               once per source row. */\n            while (remaining > 0 && x < maskWidth) {\n                const span = Math.min(remaining, maskHeight - y);\n                const column = axes.columns[x];\n                const first = axes.rows[y];\n                const last = axes.rows[y + span - 1];\n                for (let offset = first; offset <= last; offset += stride) {\n                    data[offset + column] = detectionMaskId;\n                }\n                remaining -= span;\n                y += span;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                }\n            }\n            maskOffset += runLength;\n        }\n    }\n    function resolveRasterWidth(maskWidth, maxWidth) {\n        return maxWidth !== undefined && maxWidth > 0 && maxWidth < maskWidth\n            ? Math.max(1, Math.floor(maxWidth))\n            : maskWidth;\n    }\n    /**\n     * Converts a source-grid stroke width into raster texels. Fractional widths\n     * let coverage shaders draw a border within a texel. The ceiling bounds the\n     * neighbourhood the shaders scan.\n     */\n    function resolveIdMaskStrokeTexels(strokeWidth, maskWidth, rasterWidth) {\n        const scale = maskWidth > 0 ? rasterWidth / maskWidth : 1;\n        return Math.min(strokeWidth * scale, MAX_ID_MASK_STROKE_WIDTH);\n    }\n    function createScaledMaskAxes(frame) {\n        return {\n            columns: createMaskAxisMap(frame.maskWidth, frame.width, 1),\n            rows: createMaskAxisMap(frame.maskHeight, frame.height, frame.width),\n            stride: frame.width,\n        };\n    }\n    /** Rows hold their destination offset, so writing a run is two lookups. */\n    function createMaskAxisMap(sourceLength, targetLength, stride) {\n        const map = new Int32Array(sourceLength);\n        const scale = targetLength / sourceLength;\n        for (let index = 0; index < sourceLength; index += 1) {\n            map[index] = Math.min(targetLength - 1, Math.floor(index * scale)) * stride;\n        }\n        return map;\n    }\n    /**\n     * The palette slot a detection index names, or undefined when the palette has\n     * no slot for it. Slot zero is the background, so the ids start at one and the\n     * last detection the palette can name sits one index below the last slot.\n     */\n    function resolveIdMaskPaletteId(detectionIndex) {\n        const detectionMaskId = detectionIndex + 1;\n        return detectionMaskId > 0 && detectionMaskId < MAX_ID_MASK_PALETTE_ENTRIES\n            ? detectionMaskId\n            : undefined;\n    }\n    function writeIdMaskPaletteEntry(palette, detectionMaskId, color, alpha) {\n        const offset = detectionMaskId * 4;\n        palette[offset] = ((color >> 16) & 0xff) / 255;\n        palette[offset + 1] = ((color >> 8) & 0xff) / 255;\n        palette[offset + 2] = (color & 0xff) / 255;\n        palette[offset + 3] = Math.max(0, Math.min(alpha, 1));\n    }\n    new Set(Object.values(DepthPreviewLevels));\n    new Set(Object.values(DepthMapKind));\n\n    var MediaRendererFit;\n    (function (MediaRendererFit) {\n        /**\n         * Preserve media aspect ratio and fit the full frame inside the canvas.\n         */\n        MediaRendererFit[\"Contain\"] = \"contain\";\n        /**\n         * Preserve media aspect ratio and fill the canvas, cropping if necessary.\n         */\n        MediaRendererFit[\"Cover\"] = \"cover\";\n    })(MediaRendererFit || (MediaRendererFit = {}));\n    /**\n     * Playback lifecycle state reported by a platform renderer.\n     */\n    var MediaRendererPlaybackState;\n    (function (MediaRendererPlaybackState) {\n        MediaRendererPlaybackState[\"Loading\"] = \"loading\";\n        MediaRendererPlaybackState[\"Ready\"] = \"ready\";\n        MediaRendererPlaybackState[\"Playing\"] = \"playing\";\n        MediaRendererPlaybackState[\"Buffering\"] = \"buffering\";\n        MediaRendererPlaybackState[\"Paused\"] = \"paused\";\n        MediaRendererPlaybackState[\"Error\"] = \"error\";\n        MediaRendererPlaybackState[\"Destroyed\"] = \"destroyed\";\n    })(MediaRendererPlaybackState || (MediaRendererPlaybackState = {}));\n    /**\n     * Stable classification of a media failure.\n     *\n     * Applications branch on these kinds instead of parsing decoder, demuxer, or\n     * container error text, and still own their localized user-facing copy. New\n     * kinds may be added over time, so treat unrecognized values like `Unknown`.\n     */\n    var MediaErrorKind;\n    (function (MediaErrorKind) {\n        /** The media could not be opened or read, or was refused before any read. */\n        MediaErrorKind[\"Unreadable\"] = \"unreadable\";\n        /** The container or codec is not supported by this platform. */\n        MediaErrorKind[\"UnsupportedFormat\"] = \"unsupportedFormat\";\n        /** The media opened but carries no usable video track. */\n        MediaErrorKind[\"NoVideoTrack\"] = \"noVideoTrack\";\n        /** Decoding a sample failed after the source opened. */\n        MediaErrorKind[\"Decode\"] = \"decode\";\n        /** The media could not be fetched. */\n        MediaErrorKind[\"Network\"] = \"network\";\n        /** The host environment lacks the APIs this media source requires. */\n        MediaErrorKind[\"EnvironmentUnsupported\"] = \"environmentUnsupported\";\n        /** The failure could not be classified. */\n        MediaErrorKind[\"Unknown\"] = \"unknown\";\n    })(MediaErrorKind || (MediaErrorKind = {}));\n    /**\n     * Lower-level media source readiness.\n     */\n    var MediaSourceStatus;\n    (function (MediaSourceStatus) {\n        MediaSourceStatus[\"Loading\"] = \"loading\";\n        MediaSourceStatus[\"Ready\"] = \"ready\";\n        MediaSourceStatus[\"Error\"] = \"error\";\n        MediaSourceStatus[\"Destroyed\"] = \"destroyed\";\n    })(MediaSourceStatus || (MediaSourceStatus = {}));\n    /**\n     * Current renderer state.\n     */\n    /**\n     * What a playback gate holds back.\n     *\n     * A source the renderer pulls samples from can be held between any two frames,\n     * because the renderer decides when each one is drawn. A source that presents\n     * its own frames owns the playhead, so holding it means stopping the producer\n     * and starting it again, and a gate that stops one has to bound its own wait\n     * or a producer nothing answers for never runs again.\n     */\n    var PlaybackGateReach;\n    (function (PlaybackGateReach) {\n        /** No gate: the picture moves and unprepared layers are absent from it. */\n        PlaybackGateReach[\"Off\"] = \"off\";\n        /**\n         * Playback waits to begin, and stops again at any frame whose artifacts are\n         * missing, until they arrive or the gate's own wait bound gives up on them.\n         */\n        PlaybackGateReach[\"EveryFrame\"] = \"everyFrame\";\n    })(PlaybackGateReach || (PlaybackGateReach = {}));\n\n    /**\n     * Media-session operating mode.\n     *\n     * Core owns the names because file-like and stream-like lifecycle choices are\n     * platform-neutral. Platform packages decide how these modes tune media,\n     * storage, and renderer defaults.\n     */\n    var MediaSessionMode;\n    (function (MediaSessionMode) {\n        /**\n         * Finite media. Defaults usually favor seek/replay and persistent detection\n         * storage.\n         */\n        MediaSessionMode[\"File\"] = \"file\";\n        /**\n         * Live or append-only media. Defaults usually favor rolling windows and\n         * bounded retention.\n         */\n        MediaSessionMode[\"Stream\"] = \"stream\";\n    })(MediaSessionMode || (MediaSessionMode = {}));\n    /**\n     * Aggregate lifecycle state for a media session.\n     */\n    var MediaSessionStatus;\n    (function (MediaSessionStatus) {\n        MediaSessionStatus[\"Buffering\"] = \"buffering\";\n        MediaSessionStatus[\"Destroyed\"] = \"destroyed\";\n        MediaSessionStatus[\"Error\"] = \"error\";\n        MediaSessionStatus[\"Loading\"] = \"loading\";\n        MediaSessionStatus[\"Paused\"] = \"paused\";\n        MediaSessionStatus[\"Playing\"] = \"playing\";\n        MediaSessionStatus[\"Processing\"] = \"processing\";\n        MediaSessionStatus[\"Ready\"] = \"ready\";\n    })(MediaSessionStatus || (MediaSessionStatus = {}));\n    /**\n     * Subsystem currently affecting session readiness or presentation.\n     */\n    var MediaSessionActivityKind;\n    (function (MediaSessionActivityKind) {\n        /**\n         * Playback is held waiting for a producer to emit detections for the frame\n         * about to be shown, which is a wait on inference rather than on transfer or\n         * decode. `DetectionsBuffering` is the transfer of detections that already\n         * exist, and `PlaybackBuffering` is the wait for media bytes.\n         */\n        MediaSessionActivityKind[\"DetectionsAwaitingCoverage\"] = \"detectionsAwaitingCoverage\";\n        MediaSessionActivityKind[\"DetectionsBuffering\"] = \"detectionsBuffering\";\n        MediaSessionActivityKind[\"DetectionsLoading\"] = \"detectionsLoading\";\n        MediaSessionActivityKind[\"Error\"] = \"error\";\n        MediaSessionActivityKind[\"MediaNormalizing\"] = \"mediaNormalizing\";\n        MediaSessionActivityKind[\"MediaOpening\"] = \"mediaOpening\";\n        /**\n         * The picture is waiting on media the source has not handed over yet, which\n         * is the bytes and their decode rather than anything downstream of them.\n         * `PlaybackBuffering` is what a transport reports once it has already\n         * stopped; this is reported from the read itself, including the reads a seek\n         * makes while the transport still reads as paused.\n         */\n        MediaSessionActivityKind[\"MediaSourceReading\"] = \"mediaSourceReading\";\n        MediaSessionActivityKind[\"PlaybackBuffering\"] = \"playbackBuffering\";\n        /**\n         * The render-preparation gate held the picture for artifacts that never\n         * arrived and let it go. Nothing is blocked: the frames reaching the screen\n         * are the ones whose artifacts were given up on. What is waited on is\n         * preparation finishing another frame, which is what lets the gate hold the\n         * picture again; `RenderPreparing` covers the holds that are running.\n         */\n        MediaSessionActivityKind[\"RenderPreparationAbandoned\"] = \"renderPreparationAbandoned\";\n        MediaSessionActivityKind[\"RenderPreparing\"] = \"renderPreparing\";\n    })(MediaSessionActivityKind || (MediaSessionActivityKind = {}));\n    /**\n     * State of one session activity.\n     */\n    var MediaSessionActivityStatus;\n    (function (MediaSessionActivityStatus) {\n        MediaSessionActivityStatus[\"Error\"] = \"error\";\n        MediaSessionActivityStatus[\"Running\"] = \"running\";\n        MediaSessionActivityStatus[\"Waiting\"] = \"waiting\";\n    })(MediaSessionActivityStatus || (MediaSessionActivityStatus = {}));\n\n    /** Builds compact, independent alpha crops so overlapping masks stay exact. */\n    function createRegionMaskCoverageFrame(instructions) {\n        const entries = [];\n        for (const instruction of instructions) {\n            if (!instruction.regionCoverageMask) {\n                continue;\n            }\n            const entry = cropCoverageMask(instruction.detectionIndex, decodeCompressedRleMask(instruction.regionCoverageMask));\n            if (entry) {\n                entries.push(entry);\n            }\n        }\n        return entries.length > 0 ? { entries } : undefined;\n    }\n    function cropCoverageMask(detectionIndex, decodedMask) {\n        let minX = decodedMask.width;\n        let minY = decodedMask.height;\n        let maxX = -1;\n        let maxY = -1;\n        for (let y = 0; y < decodedMask.height; y += 1) {\n            for (let x = 0; x < decodedMask.width; x += 1) {\n                if (!decodedMask.data[y * decodedMask.width + x]) {\n                    continue;\n                }\n                minX = Math.min(minX, x);\n                minY = Math.min(minY, y);\n                maxX = Math.max(maxX, x);\n                maxY = Math.max(maxY, y);\n            }\n        }\n        if (maxX < minX || maxY < minY) {\n            return undefined;\n        }\n        const width = maxX - minX + 1;\n        const height = maxY - minY + 1;\n        const data = new Uint8Array(new ArrayBuffer(width * height));\n        for (let y = minY; y <= maxY; y += 1) {\n            for (let x = minX; x <= maxX; x += 1) {\n                if (!decodedMask.data[y * decodedMask.width + x]) {\n                    continue;\n                }\n                data[(y - minY) * width + (x - minX)] = 255;\n            }\n        }\n        return { data, detectionIndex, height, width, x: minX, y: minY };\n    }\n    function compositeMaskFrame(instructions) {\n        const maskInstructions = materializeMaskInstructions(instructions);\n        if (maskInstructions.length === 0) {\n            return undefined;\n        }\n        const width = Math.max(...maskInstructions.map(({ mask }) => mask.width));\n        const height = Math.max(...maskInstructions.map(({ mask }) => mask.height));\n        const data = new Uint8ClampedArray(new ArrayBuffer(width * height * 4));\n        for (const instruction of maskInstructions) {\n            compositeInstruction(data, width, instruction);\n        }\n        return { data, height, width };\n    }\n    function createIdMaskRasterFrame(instructions, maxRasterWidth) {\n        try {\n            return createIdMaskFrame(materializeMaskInstructions(instructions).map((instruction) => instruction.stroke?.widthUnit === \"screen\"\n                ? { ...instruction, stroke: undefined }\n                : instruction), {\n                maxWidth: maxRasterWidth,\n            });\n        }\n        catch {\n            // The id raster is the fast path, not the only one: answering with nothing\n            // puts the caller on the RGBA composite, which draws the same picture.\n            return undefined;\n        }\n    }\n    /**\n     * Whether the palette has a slot for every detection this frame masks. An id\n     * names a detection by its index in the frame, so one masked detection past the\n     * last slot leaves the whole frame without an id raster however few masks it\n     * carries.\n     */\n    function canIdMaskPaletteNameFrame(instructions) {\n        return instructions.every((instruction) => instruction.visible === false ||\n            resolveIdMaskPaletteId(instruction.detectionIndex) !== undefined);\n    }\n    function createIdMaskPlane(instructions, maxRasterWidth) {\n        // The plane carries the ids a failed cook could not. A frame the palette\n        // cannot name has none to carry, and cooking it again reaches the same\n        // refusal after rasterizing every mask a second time.\n        if (!canIdMaskPaletteNameFrame(instructions)) {\n            return undefined;\n        }\n        const frame = createIdMaskRasterFrame(instructions, maxRasterWidth);\n        return frame\n            ? { data: frame.data, height: frame.height, width: frame.width }\n            : undefined;\n    }\n    function compositeInstruction(rgba, canvasWidth, instruction) {\n        const fill = resolveRgbaColor(instruction.color, instruction.alpha);\n        const bounds = compositeMaskFill(rgba, canvasWidth, instruction.mask, fill);\n        if (instruction.stroke &&\n            instruction.stroke.widthUnit !== \"screen\" &&\n            bounds) {\n            compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, instruction.stroke);\n        }\n    }\n    function createMaskScreenStrokes(instructions, width, height, preparedRaster) {\n        const outlined = instructions.filter(({ visible, stroke }) => visible !== false &&\n            stroke?.widthUnit === \"screen\" &&\n            stroke.width > 0 &&\n            stroke.alpha > 0);\n        if (outlined.length === 0)\n            return undefined;\n        const masks = materializeMaskInstructions(instructions);\n        const raster = preparedRaster ?? new Uint32Array(width * height);\n        if (!preparedRaster) {\n            for (const { detectionIndex, mask } of masks) {\n                const counts = decodeCompressedRleCounts(mask.counts);\n                let offset = 0;\n                for (let index = 0; index < counts.length; index += 1) {\n                    const length = counts[index];\n                    if (index % 2 === 1) {\n                        for (let pixel = offset; pixel < offset + length; pixel += 1) {\n                            const x = Math.floor(pixel / mask.height);\n                            const y = pixel % mask.height;\n                            raster[y * width + x] = detectionIndex + 1;\n                        }\n                    }\n                    offset += length;\n                }\n            }\n        }\n        const paths = traceMaskOutlinePaths(raster, width, height, new Set(outlined.map(({ detectionIndex }) => detectionIndex + 1)));\n        return outlined.map(({ detectionIndex, stroke }) => ({\n            detectionIndex,\n            alpha: stroke.alpha,\n            color: stroke.color,\n            width: stroke.width,\n            paths: paths.get(detectionIndex + 1) ?? [],\n        }));\n    }\n    function materializeMaskInstructions(instructions) {\n        return instructions\n            .filter((instruction) => instruction.visible !== false)\n            .map((instruction) => {\n            if (instruction.mask) {\n                return instruction;\n            }\n            const { height, points, width } = instruction.polygon;\n            return {\n                alpha: instruction.alpha,\n                color: instruction.color,\n                detectionIndex: instruction.detectionIndex,\n                mask: encodeBinaryMask(rasterizePolygonToMask(points, { height, width }), width, height),\n                stroke: instruction.stroke,\n            };\n        });\n    }\n    /**\n     * Compressed RLE counts runs down each column in turn, so a foreground run is\n     * a contiguous walk down one column that wraps into the next.\n     */\n    function compositeMaskFill(rgba, canvasWidth, mask, fill) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = mask.width;\n        const maskHeight = mask.height;\n        const maskArea = maskWidth * maskHeight;\n        let maskOffset = 0;\n        let minX = maskWidth;\n        let minY = maskHeight;\n        let maxX = -1;\n        let maxY = -1;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let columnX = Math.floor(maskOffset / maskHeight);\n            let columnY = maskOffset - columnX * maskHeight;\n            for (let step = 0; step < runLength; step += 1) {\n                // A run can outlast the columns the mask has; the pixel it then names\n                // is wherever that column-major offset lands when read back row-major.\n                const rowMajorOffset = columnY * maskWidth + columnX;\n                if (rowMajorOffset < maskArea) {\n                    const x = rowMajorOffset % maskWidth;\n                    const y = (rowMajorOffset - x) / maskWidth;\n                    writePixel(rgba, canvasWidth, x, y, fill);\n                    minX = Math.min(minX, x);\n                    minY = Math.min(minY, y);\n                    maxX = Math.max(maxX, x);\n                    maxY = Math.max(maxY, y);\n                }\n                columnY += 1;\n                if (columnY === maskHeight) {\n                    columnY = 0;\n                    columnX += 1;\n                }\n            }\n            maskOffset += runLength;\n        }\n        return maxX < minX || maxY < minY ? undefined : { maxX, maxY, minX, minY };\n    }\n    function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke) {\n        const width = Math.round(stroke.width);\n        if (width <= 0) {\n            return;\n        }\n        const strokeColor = resolveRgbaColor(stroke.color, stroke.alpha);\n        for (let y = bounds.minY; y <= bounds.maxY; y += 1) {\n            for (let x = bounds.minX; x <= bounds.maxX; x += 1) {\n                if (!isMaskPixel(decodedMask, x, y) ||\n                    !isBoundaryPixel(decodedMask, x, y)) {\n                    continue;\n                }\n                for (let offsetY = -width; offsetY <= width; offsetY += 1) {\n                    for (let offsetX = -width; offsetX <= width; offsetX += 1) {\n                        const strokeX = x + offsetX;\n                        const strokeY = y + offsetY;\n                        if (isOutsideMaskBounds(decodedMask, strokeX, strokeY) ||\n                            isMaskPixel(decodedMask, strokeX, strokeY)) {\n                            continue;\n                        }\n                        writePixel(rgba, canvasWidth, strokeX, strokeY, strokeColor);\n                    }\n                }\n            }\n        }\n    }\n    function isBoundaryPixel(mask, x, y) {\n        for (let offsetY = -1; offsetY <= 1; offsetY += 1) {\n            for (let offsetX = -1; offsetX <= 1; offsetX += 1) {\n                if (offsetX === 0 && offsetY === 0) {\n                    continue;\n                }\n                const neighborX = x + offsetX;\n                const neighborY = y + offsetY;\n                if (isOutsideMaskBounds(mask, neighborX, neighborY) ||\n                    !isMaskPixel(mask, neighborX, neighborY)) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n    function isMaskPixel(mask, x, y) {\n        return mask.data[y * mask.width + x] === 1;\n    }\n    function isOutsideMaskBounds(mask, x, y) {\n        return x < 0 || y < 0 || x >= mask.width || y >= mask.height;\n    }\n    function resolveRgbaColor(color, alpha) {\n        return {\n            alpha: Math.round(Math.max(0, Math.min(alpha, 1)) * 255),\n            blue: color & 0xff,\n            green: (color >> 8) & 0xff,\n            red: (color >> 16) & 0xff,\n        };\n    }\n    function writePixel(rgba, canvasWidth, x, y, color) {\n        const rgbaOffset = (y * canvasWidth + x) * 4;\n        rgba[rgbaOffset] = color.red;\n        rgba[rgbaOffset + 1] = color.green;\n        rgba[rgbaOffset + 2] = color.blue;\n        rgba[rgbaOffset + 3] = color.alpha;\n    }\n\n    var PreparedMaskFrameKind;\n    (function (PreparedMaskFrameKind) {\n        PreparedMaskFrameKind[\"IdMask\"] = \"idMask\";\n        PreparedMaskFrameKind[\"RgbaImage\"] = \"rgbaImage\";\n    })(PreparedMaskFrameKind || (PreparedMaskFrameKind = {}));\n    /**\n     * How an id raster is laid out for the texture it is uploaded into. WebGPU\n     * takes any bytesPerRow, so ids go up one byte per pixel. WebGL aligns every\n     * uploaded row to four bytes and rejects a single-channel upload whose width\n     * is not a multiple of four, which is what the four-channel layout is for.\n     */\n    var IdMaskTextureFormat;\n    (function (IdMaskTextureFormat) {\n        IdMaskTextureFormat[\"R8\"] = \"r8unorm\";\n        IdMaskTextureFormat[\"Rgba8\"] = \"rgba8unorm\";\n    })(IdMaskTextureFormat || (IdMaskTextureFormat = {}));\n\n    const DEFAULT_STOPS = [\n        { position: 0, color: 0xffd600 },\n        { position: 0.35, color: 0xffd600 },\n        { position: 0.7, color: 0xff7a00 },\n        { position: 1, color: 0xdc1e1e },\n    ];\n    const MAX_HEATMAP_PIXELS = 16_777_216;\n    const MAX_HEATMAP_SIDE = 8_192;\n    /** Turns semantic scores into an RGBA raster; no palette enters cold data. */\n    function colorizeHeatmap(map, renderer) {\n        const { bounds, width, height, values } = map;\n        if (!Number.isFinite(bounds?.x) ||\n            !Number.isFinite(bounds?.y) ||\n            !Number.isFinite(bounds?.width) ||\n            !Number.isFinite(bounds?.height) ||\n            bounds.width <= 0 ||\n            bounds.height <= 0 ||\n            !Number.isInteger(width) ||\n            !Number.isInteger(height) ||\n            width <= 0 ||\n            height <= 0 ||\n            width > MAX_HEATMAP_SIDE ||\n            height > MAX_HEATMAP_SIDE ||\n            width * height > MAX_HEATMAP_PIXELS ||\n            !(Array.isArray(values) ||\n                values instanceof Float32Array ||\n                values instanceof Float64Array ||\n                values instanceof Uint16Array) ||\n            values.length !== width * height) {\n            throw new RangeError(\"Heatmap bounds and dimensions must be valid, match row-major values, and fit the raster limit.\");\n        }\n        const scale = map.valueScale ?? 1;\n        const threshold = (map.threshold ?? 0) * (renderer.thresholdScale ?? 1);\n        const maximumScore = renderer.maximumScore ?? 1;\n        const opacity = clamp01(renderer.opacity ?? 1);\n        const minimumAlpha = clamp01(renderer.minimumAlpha ?? 0);\n        const stops = renderer.colorStops ?? DEFAULT_STOPS;\n        if (!Number.isFinite(scale) ||\n            scale <= 0 ||\n            !Number.isFinite(threshold) ||\n            !Number.isFinite(maximumScore) ||\n            maximumScore <= 0 ||\n            !Number.isFinite(renderer.thresholdScale ?? 1) ||\n            (renderer.thresholdScale ?? 1) < 0 ||\n            !Number.isFinite(renderer.opacity ?? 1) ||\n            !Number.isFinite(renderer.minimumAlpha ?? 0) ||\n            stops.length === 0 ||\n            stops.some((stop, index) => !Number.isFinite(stop.position) ||\n                stop.position < 0 ||\n                stop.position > 1 ||\n                !Number.isInteger(stop.color) ||\n                stop.color < 0 ||\n                stop.color > 0xffffff ||\n                (index > 0 && stop.position < stops[index - 1].position))) {\n            throw new RangeError(\"Invalid heatmap scale, threshold, or color stops.\");\n        }\n        const rgba = new Uint8ClampedArray(new ArrayBuffer(values.length * 4));\n        if (maximumScore <= threshold || opacity === 0)\n            return rgba;\n        for (let index = 0; index < values.length; index += 1) {\n            const score = values[index] * scale;\n            if (!Number.isFinite(score) || score <= threshold)\n                continue;\n            const color = interpolateColor(stops, clamp01(score / maximumScore));\n            const alphaIntensity = clamp01((score - threshold) / (maximumScore - threshold));\n            const offset = index * 4;\n            rgba[offset] = color >> 16;\n            rgba[offset + 1] = (color >> 8) & 0xff;\n            rgba[offset + 2] = color & 0xff;\n            rgba[offset + 3] = Math.round(255 * opacity * (minimumAlpha + (1 - minimumAlpha) * alphaIntensity));\n        }\n        return rgba;\n    }\n    function interpolateColor(stops, value) {\n        const upperIndex = stops.findIndex((stop) => stop.position >= value);\n        if (upperIndex === -1)\n            return stops[stops.length - 1].color;\n        if (upperIndex === 0)\n            return stops[0].color;\n        const left = stops[upperIndex - 1];\n        const right = stops[upperIndex];\n        const span = right.position - left.position;\n        const ratio = span === 0 ? 1 : (value - left.position) / span;\n        const channel = (shift) => Math.round(((left.color >> shift) & 0xff) * (1 - ratio) +\n            ((right.color >> shift) & 0xff) * ratio);\n        return (channel(16) << 16) | (channel(8) << 8) | channel(0);\n    }\n    function clamp01(value) {\n        return Math.max(0, Math.min(1, value));\n    }\n\n    var HeatmapPreparationWorkerMessageType;\n    (function (HeatmapPreparationWorkerMessageType) {\n        HeatmapPreparationWorkerMessageType[\"Prepare\"] = \"heatmap-prepare\";\n        HeatmapPreparationWorkerMessageType[\"Complete\"] = \"heatmap-complete\";\n        HeatmapPreparationWorkerMessageType[\"Error\"] = \"heatmap-error\";\n    })(HeatmapPreparationWorkerMessageType || (HeatmapPreparationWorkerMessageType = {}));\n\n    var MaskPreparationWorkerMessageType;\n    (function (MaskPreparationWorkerMessageType) {\n        MaskPreparationWorkerMessageType[\"Complete\"] = \"complete\";\n        MaskPreparationWorkerMessageType[\"Empty\"] = \"empty\";\n        MaskPreparationWorkerMessageType[\"Error\"] = \"error\";\n        MaskPreparationWorkerMessageType[\"Prepare\"] = \"prepare\";\n    })(MaskPreparationWorkerMessageType || (MaskPreparationWorkerMessageType = {}));\n\n    /**\n     * Messages between the depth source and the render-preparation worker, which\n     * decodes depth and confidence PNGs, and copies decoded preview frames' luma,\n     * off the main thread. Internal: the worker script is a deployment asset, and\n     * its protocol is not public.\n     */\n    var DepthPreparationWorkerMessageType;\n    (function (DepthPreparationWorkerMessageType) {\n        DepthPreparationWorkerMessageType[\"Decode\"] = \"depth-decode\";\n        DepthPreparationWorkerMessageType[\"Complete\"] = \"depth-decode-complete\";\n        DepthPreparationWorkerMessageType[\"Error\"] = \"depth-decode-error\";\n        DepthPreparationWorkerMessageType[\"PreviewLuma\"] = \"depth-preview-luma\";\n        DepthPreparationWorkerMessageType[\"PreviewLumaComplete\"] = \"depth-preview-luma-complete\";\n    })(DepthPreparationWorkerMessageType || (DepthPreparationWorkerMessageType = {}));\n\n    /*\n     * Grayscale PNG decoding for depth maps and their confidence planes.\n     *\n     * Every image path a browser offers (<img>, createImageBitmap, ImageDecoder,\n     * canvas) hands back 8 bits per channel, so a 16-bit depth PNG is decoded\n     * here: the browser's own zlib inflates the IDAT stream, and the row filters\n     * are undone in JavaScript.\n     *\n     * This module imports nothing, so the render-preparation worker, the main\n     * thread and the depth benchmark all run the same code.\n     */\n    const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];\n    const COLOR_TYPE_GRAY = 0;\n    /** 16384 x 16384, beyond any GPU texture; a header claiming more is refused. */\n    const MAX_PNG_PIXELS = 16_384 * 16_384;\n    async function decodePng16(bytes, options = {}) {\n        const header = readPngHeader(bytes, 16);\n        const rowBytes = header.width * 2 + 1;\n        const raw = await (options.inflate ?? inflateWithDecompressionStream)(header.idat, rowBytes * header.height);\n        const values = new Uint16Array(header.width * header.height);\n        checkInflatedLength(raw, rowBytes * header.height);\n        unfilterGray16(raw, header.width, header.height, values);\n        return {\n            height: header.height,\n            paddedUpload: options.padRowsForWebGl && header.width % 2 === 1\n                ? padRows(values, header.width, header.height)\n                : undefined,\n            values,\n            width: header.width,\n        };\n    }\n    async function decodePng8Gray(bytes, options = {}) {\n        const header = readPngHeader(bytes, 8);\n        const rowBytes = header.width + 1;\n        const raw = await (options.inflate ?? inflateWithDecompressionStream)(header.idat, rowBytes * header.height);\n        const values = new Uint8Array(header.width * header.height);\n        checkInflatedLength(raw, rowBytes * header.height);\n        unfilterGray8(raw, header.width, header.height, values);\n        return { height: header.height, values, width: header.width };\n    }\n    /**\n     * Inflates with the platform's `DecompressionStream(\"deflate\")` (zlib\n     * framing, which is what PNG uses) straight into one buffer of the expected\n     * size, so no second copy joins the output chunks.\n     */\n    async function inflateWithDecompressionStream(chunks, byteLength) {\n        const stream = new DecompressionStream(\"deflate\");\n        const writer = stream.writable.getWriter();\n        const reader = stream.readable.getReader();\n        // Writers split IDAT into many small chunks (libpng's default is 8 KiB).\n        // One write of the joined stream costs a copy of the compressed bytes and\n        // saves a stream round trip per chunk.\n        const zlib = chunks.length === 1 ? chunks[0] : joinChunks(chunks);\n        const writing = (async () => {\n            await writer.write(zlib);\n            await writer.close();\n        })();\n        const output = new Uint8Array(byteLength);\n        let offset = 0;\n        // A corrupt stream rejects both sides; the reader's error is the one thrown.\n        writing.catch(() => undefined);\n        try {\n            for (;;) {\n                const { done, value } = await reader.read();\n                if (done)\n                    break;\n                if (offset + value.byteLength > byteLength) {\n                    throw new RangeError(\"PNG image data is longer than its header says.\");\n                }\n                output.set(value, offset);\n                offset += value.byteLength;\n            }\n            await writing;\n        }\n        catch (error) {\n            await reader.cancel().catch(() => undefined);\n            throw error instanceof RangeError\n                ? error\n                : new RangeError(`PNG image data does not inflate: ${error instanceof Error ? error.message : String(error)}`);\n        }\n        return offset === byteLength ? output : output.subarray(0, offset);\n    }\n    function joinChunks(chunks) {\n        const joined = new Uint8Array(chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0));\n        let offset = 0;\n        for (const chunk of chunks) {\n            joined.set(chunk, offset);\n            offset += chunk.byteLength;\n        }\n        return joined;\n    }\n    function readPngHeader(input, bitDepth) {\n        const bytes = input instanceof Uint8Array ? input : new Uint8Array(input);\n        const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);\n        if (bytes.byteLength < 8 ||\n            PNG_SIGNATURE.some((value, index) => bytes[index] !== value)) {\n            throw new RangeError(\"Not a PNG file.\");\n        }\n        let offset = 8;\n        let width = 0;\n        let height = 0;\n        let sawHeader = false;\n        let sawEnd = false;\n        const idat = [];\n        while (offset + 12 <= bytes.byteLength) {\n            const length = view.getUint32(offset);\n            const type = view.getUint32(offset + 4);\n            const dataStart = offset + 8;\n            const dataEnd = dataStart + length;\n            if (dataEnd + 4 > bytes.byteLength) {\n                throw new RangeError(\"PNG file is truncated.\");\n            }\n            if (type === 0x49484452) {\n                // IHDR\n                if (length !== 13)\n                    throw new RangeError(\"PNG header is malformed.\");\n                width = view.getUint32(dataStart);\n                height = view.getUint32(dataStart + 4);\n                const depth = bytes[dataStart + 8];\n                const colorType = bytes[dataStart + 9];\n                if (bytes[dataStart + 10] !== 0 || bytes[dataStart + 11] !== 0) {\n                    throw new RangeError(\"PNG uses an unknown compression or filter.\");\n                }\n                if (bytes[dataStart + 12] !== 0) {\n                    throw new RangeError(\"Interlaced PNGs are not supported.\");\n                }\n                if (colorType !== COLOR_TYPE_GRAY || depth !== bitDepth) {\n                    throw new RangeError(`Expected a ${bitDepth}-bit grayscale PNG, got bit depth ${depth} with colour type ${colorType}.`);\n                }\n                sawHeader = true;\n            }\n            else if (type === 0x49444154) {\n                // IDAT\n                idat.push(bytes.subarray(dataStart, dataEnd));\n            }\n            else if (type === 0x49454e44) {\n                // IEND\n                sawEnd = true;\n                break;\n            }\n            offset = dataEnd + 4;\n        }\n        if (!sawHeader)\n            throw new RangeError(\"PNG has no header.\");\n        if (!sawEnd)\n            throw new RangeError(\"PNG file is truncated.\");\n        if (width === 0 || height === 0 || width * height > MAX_PNG_PIXELS) {\n            throw new RangeError(`PNG size ${width}x${height} is not supported.`);\n        }\n        if (idat.length === 0)\n            throw new RangeError(\"PNG has no image data.\");\n        return { height, idat, width };\n    }\n    function checkInflatedLength(raw, expected) {\n        if (raw.byteLength !== expected) {\n            throw new RangeError(\"PNG image data is shorter than its header says.\");\n        }\n    }\n    /*\n     * Undoes the row filters of a 16-bit grayscale image and writes host-order\n     * samples, in one pass. Each filter runs on bytes, and the two bytes of a\n     * sample never carry into each other, so the loops keep a sample's high and\n     * low bytes apart and join them only for the store. The previous row is read\n     * back from the output, which already holds it unfiltered; the first row reads\n     * a row of zeros, which is what PNG defines above the image.\n     *\n     * Each filter is its own small function with one loop, called once per row,\n     * so engines compile each loop on its own: SpiderMonkey slowed a Paeth loop\n     * that shared a function with the other filters.\n     */\n    function unfilterGray16(raw, width, height, out) {\n        const rowBytes = width * 2 + 1;\n        const zeroRow = new Uint16Array(width);\n        for (let y = 0; y < height; y += 1) {\n            const filter = raw[y * rowBytes];\n            const unfilterRow = ROW_FILTERS_16[filter];\n            if (!unfilterRow) {\n                throw new RangeError(`PNG row ${y} has unknown filter ${filter}.`);\n            }\n            const o = y * width;\n            unfilterRow(raw, y * rowBytes + 1, out, o, o + width, y === 0 ? zeroRow : out, y === 0 ? 0 : o - width);\n        }\n    }\n    function noneRow16(raw, s, out, o, end) {\n        for (let i = o; i < end; i += 1, s += 2) {\n            out[i] = (raw[s] << 8) | raw[s + 1];\n        }\n    }\n    function subRow16(raw, s, out, o, end) {\n        let hi = 0;\n        let lo = 0;\n        for (let i = o; i < end; i += 1, s += 2) {\n            hi = (raw[s] + hi) & 0xff;\n            lo = (raw[s + 1] + lo) & 0xff;\n            out[i] = (hi << 8) | lo;\n        }\n    }\n    function upRow16(raw, s, out, o, end, prev, p) {\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            out[i] = (((raw[s] + (up >> 8)) & 0xff) << 8) | ((raw[s + 1] + up) & 0xff);\n        }\n    }\n    function averageRow16(raw, s, out, o, end, prev, p) {\n        let hi = 0;\n        let lo = 0;\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            hi = (raw[s] + ((hi + (up >> 8)) >> 1)) & 0xff;\n            lo = (raw[s + 1] + ((lo + (up & 0xff)) >> 1)) & 0xff;\n            out[i] = (hi << 8) | lo;\n        }\n    }\n    /** Paeth: per byte, whichever of left, up and up-left is closest to left + up - up-left. */\n    function paethRow16(raw, s, out, o, end, prev, p) {\n        let hi = 0;\n        let lo = 0;\n        let upLeftHi = 0;\n        let upLeftLo = 0;\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            const upHi = up >> 8;\n            const upLo = up & 0xff;\n            let pa = Math.abs(upHi - upLeftHi);\n            let pb = Math.abs(hi - upLeftHi);\n            let pc = Math.abs(hi + upHi - upLeftHi - upLeftHi);\n            hi =\n                (raw[s] + (pa <= pb && pa <= pc ? hi : pb <= pc ? upHi : upLeftHi)) &\n                    0xff;\n            pa = Math.abs(upLo - upLeftLo);\n            pb = Math.abs(lo - upLeftLo);\n            pc = Math.abs(lo + upLo - upLeftLo - upLeftLo);\n            lo =\n                (raw[s + 1] + (pa <= pb && pa <= pc ? lo : pb <= pc ? upLo : upLeftLo)) &\n                    0xff;\n            out[i] = (hi << 8) | lo;\n            upLeftHi = upHi;\n            upLeftLo = upLo;\n        }\n    }\n    /** Indexed by the PNG filter type byte: None, Sub, Up, Average, Paeth. */\n    const ROW_FILTERS_16 = [\n        noneRow16,\n        subRow16,\n        upRow16,\n        averageRow16,\n        paethRow16,\n    ];\n    function unfilterGray8(raw, width, height, out) {\n        const rowBytes = width + 1;\n        const zeroRow = new Uint8Array(width);\n        for (let y = 0; y < height; y += 1) {\n            const filter = raw[y * rowBytes];\n            const unfilterRow = ROW_FILTERS_8[filter];\n            if (!unfilterRow) {\n                throw new RangeError(`PNG row ${y} has unknown filter ${filter}.`);\n            }\n            const o = y * width;\n            unfilterRow(raw, y * rowBytes + 1, out, o, o + width, y === 0 ? zeroRow : out, y === 0 ? 0 : o - width);\n        }\n    }\n    function noneRow8(raw, s, out, o, end) {\n        out.set(raw.subarray(s, s + end - o), o);\n    }\n    function subRow8(raw, s, out, o, end) {\n        let left = 0;\n        for (let i = o; i < end; i += 1, s += 1) {\n            left = (raw[s] + left) & 0xff;\n            out[i] = left;\n        }\n    }\n    function upRow8(raw, s, out, o, end, prev, p) {\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            out[i] = (raw[s] + prev[p]) & 0xff;\n        }\n    }\n    function averageRow8(raw, s, out, o, end, prev, p) {\n        let left = 0;\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            left = (raw[s] + ((left + prev[p]) >> 1)) & 0xff;\n            out[i] = left;\n        }\n    }\n    function paethRow8(raw, s, out, o, end, prev, p) {\n        let left = 0;\n        let upLeft = 0;\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            const up = prev[p];\n            const pa = Math.abs(up - upLeft);\n            const pb = Math.abs(left - upLeft);\n            const pc = Math.abs(left + up - upLeft - upLeft);\n            left =\n                (raw[s] + (pa <= pb && pa <= pc ? left : pb <= pc ? up : upLeft)) & 0xff;\n            out[i] = left;\n            upLeft = up;\n        }\n    }\n    const ROW_FILTERS_8 = [\n        noneRow8,\n        subRow8,\n        upRow8,\n        averageRow8,\n        paethRow8,\n    ];\n    /**\n     * WebGL unpacks rows on four-byte boundaries, so an odd width of two-byte\n     * texels needs one padding texel per row.\n     */\n    function padRows(values, width, height) {\n        const textureWidth = width + 1;\n        const padded = new Uint16Array(textureWidth * height);\n        for (let y = 0; y < height; y += 1) {\n            padded.set(values.subarray(y * width, (y + 1) * width), y * textureWidth);\n        }\n        return { bytes: new Uint8Array(padded.buffer), textureWidth };\n    }\n\n    /**\n     * Answers one decode request, in the worker or on the main thread: the reply\n     * and the buffers it can transfer. A file that does not decode is an error\n     * reply, never a thrown exception, so the caller can tell a bad file from a\n     * broken worker.\n     */\n    async function decodeDepthPreparationRequest(request) {\n        const requestId = request.requestId ?? 0;\n        try {\n            if (request.bitDepth === 8) {\n                const decoded = await decodePng8Gray(request.bytes);\n                return {\n                    response: {\n                        bitDepth: 8,\n                        height: decoded.height,\n                        requestId,\n                        type: DepthPreparationWorkerMessageType.Complete,\n                        values: decoded.values.buffer,\n                        width: decoded.width,\n                    },\n                    transfer: [decoded.values.buffer],\n                };\n            }\n            const decoded = await decodePng16(request.bytes, {\n                padRowsForWebGl: request.padRowsForWebGl,\n            });\n            const padded = decoded.paddedUpload;\n            const decimated = request.decimateBy !== undefined && request.decimateBy >= 2\n                ? decimateDepthUpload(decoded.values, decoded.width, decoded.height, Math.floor(request.decimateBy), request.padRowsForWebGl === true)\n                : null;\n            const transfer = [decoded.values.buffer];\n            if (padded)\n                transfer.push(padded.bytes.buffer);\n            if (decimated)\n                transfer.push(decimated.bytes.buffer);\n            return {\n                response: {\n                    bitDepth: 16,\n                    decimatedUpload: decimated\n                        ? { ...decimated, bytes: decimated.bytes.buffer }\n                        : undefined,\n                    height: decoded.height,\n                    paddedUpload: padded\n                        ? {\n                            bytes: padded.bytes.buffer,\n                            textureWidth: padded.textureWidth,\n                        }\n                        : undefined,\n                    requestId,\n                    type: DepthPreparationWorkerMessageType.Complete,\n                    values: decoded.values.buffer,\n                    width: decoded.width,\n                },\n                transfer,\n            };\n        }\n        catch (error) {\n            return {\n                response: {\n                    error: error instanceof Error ? error.message : \"Unable to decode depth.\",\n                    requestId,\n                    type: DepthPreparationWorkerMessageType.Error,\n                },\n                transfer: [],\n            };\n        }\n    }\n    /**\n     * Depth for a texture `factor` times smaller on each side, each texel the\n     * sample at its block's centre, as the renderer decimates a map larger than\n     * the GPU allows.\n     */\n    function decimateDepthUpload(values, width, height, factor, padRowsForWebGl) {\n        if (factor < 2)\n            return null;\n        const targetWidth = Math.ceil(width / factor);\n        const targetHeight = Math.ceil(height / factor);\n        // WebGL reads two-byte texels in rows of four bytes.\n        const textureWidth = padRowsForWebGl\n            ? targetWidth + (targetWidth % 2)\n            : targetWidth;\n        const texels = new Uint16Array(textureWidth * targetHeight);\n        const columns = new Uint32Array(targetWidth);\n        for (let x = 0; x < targetWidth; x += 1) {\n            columns[x] = Math.min(width - 1, Math.floor(((x + 0.5) * width) / targetWidth));\n        }\n        for (let y = 0; y < targetHeight; y += 1) {\n            const row = Math.min(height - 1, Math.floor(((y + 0.5) * height) / targetHeight)) *\n                width;\n            const target = y * textureWidth;\n            for (let x = 0; x < targetWidth; x += 1) {\n                texels[target + x] = values[row + columns[x]];\n            }\n        }\n        return {\n            bytes: new Uint8Array(texels.buffer),\n            height: targetHeight,\n            textureWidth,\n            width: targetWidth,\n        };\n    }\n\n    /** Formats whose first plane is 8-bit luma, which is the code as written. */\n    const PLANAR_8_BIT_FORMATS = new Set([\n        \"I420\",\n        \"I420A\",\n        \"I422\",\n        \"I422A\",\n        \"I444\",\n        \"I444A\",\n        \"NV12\",\n    ]);\n    const RGB_FORMATS = new Set([\"RGBA\", \"RGBX\", \"BGRA\", \"BGRX\"]);\n    /**\n     * Copies a decoded preview frame's luma codes out of it, mapped through\n     * `correction` when one is given. The frame stays open; its owner closes\n     * it.\n     */\n    async function readVideoFrameLuma(frame, scratch, correction = null) {\n        const rect = frame.visibleRect ?? {\n            height: frame.codedHeight,\n            width: frame.codedWidth,\n            x: 0,\n            y: 0,\n        };\n        const { width, height } = rect;\n        const format = frame.format;\n        const planar = format !== null && PLANAR_8_BIT_FORMATS.has(format);\n        let bytes;\n        let plane;\n        if (planar || (format !== null && RGB_FORMATS.has(format))) {\n            const size = frame.allocationSize({ rect });\n            if (scratch.buffer.byteLength < size)\n                scratch.buffer = new ArrayBuffer(size);\n            [plane] = await frame.copyTo(scratch.buffer, { rect });\n            bytes = new Uint8Array(scratch.buffer);\n        }\n        else {\n            // A frame in a layout no copy can read is drawn to a canvas, which\n            // converts it to RGB as the browser sees fit.\n            bytes = drawFrameRgba(frame, width, height);\n        }\n        const luma = new Uint8Array(width * height);\n        const stride = plane?.stride ?? (planar ? width : width * 4);\n        const offset = plane?.offset ?? 0;\n        if (!planar) {\n            // Every RGB layout keeps green second, and luma with neutral chroma\n            // converts to three equal channels.\n            for (let y = 0; y < height; y += 1) {\n                const row = offset + y * stride + 1;\n                const target = y * width;\n                for (let x = 0; x < width; x += 1) {\n                    luma[target + x] = bytes[row + x * 4];\n                }\n            }\n        }\n        else if (stride === width) {\n            luma.set(bytes.subarray(offset, offset + width * height));\n        }\n        else {\n            for (let y = 0; y < height; y += 1) {\n                luma.set(bytes.subarray(offset + y * stride, offset + y * stride + width), y * width);\n            }\n        }\n        if (correction) {\n            for (let index = 0; index < luma.length; index += 1) {\n                luma[index] = correction[luma[index]];\n            }\n        }\n        return { height, luma, path: planar ? \"plane\" : \"rgb\", width };\n    }\n    function drawFrameRgba(frame, width, height) {\n        const canvas = new OffscreenCanvas(width, height);\n        const context = canvas.getContext(\"2d\", { willReadFrequently: true });\n        if (!context) {\n            throw new Error(\"The depth preview needs a 2D canvas to read this frame.\");\n        }\n        context.drawImage(frame, 0, 0, width, height);\n        const { data } = context.getImageData(0, 0, width, height);\n        return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);\n    }\n\n    const workerScope = globalThis;\n    workerScope.addEventListener(\"message\", (event) => {\n        const message = event.data;\n        if (message.type === HeatmapPreparationWorkerMessageType.Prepare) {\n            prepareHeatmap(message);\n            return;\n        }\n        if (message.type === DepthPreparationWorkerMessageType.Decode) {\n            void decodeDepthFrame(message);\n            return;\n        }\n        if (message.type === DepthPreparationWorkerMessageType.PreviewLuma) {\n            void copyPreviewLuma(message);\n            return;\n        }\n        if (message.type !== MaskPreparationWorkerMessageType.Prepare) {\n            return;\n        }\n        prepareMaskFrame(message);\n    });\n    function prepareHeatmap(message) {\n        try {\n            const data = colorizeHeatmap(message.map, message.renderer);\n            const imageData = new ImageData(data, message.map.width, message.map.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    imageBitmap,\n                    requestId: message.requestId,\n                    type: HeatmapPreparationWorkerMessageType.Complete,\n                }, [imageBitmap]);\n                return;\n            }\n            workerScope.postMessage({\n                imageData,\n                requestId: message.requestId,\n                type: HeatmapPreparationWorkerMessageType.Complete,\n            }, [imageData.data.buffer]);\n        }\n        catch (error) {\n            workerScope.postMessage({\n                error: error instanceof Error ? error.message : \"Unable to prepare heatmap.\",\n                requestId: message.requestId,\n                type: HeatmapPreparationWorkerMessageType.Error,\n            });\n        }\n    }\n    /** Decoding waits on the platform's inflate, so replies arrive out of order. */\n    async function decodeDepthFrame(message) {\n        const { response, transfer } = await decodeDepthPreparationRequest(message);\n        workerScope.postMessage(response, transfer);\n    }\n    const previewLumaScratch = {\n        buffer: new ArrayBuffer(0),\n    };\n    /** Frames arrive in order and are copied in order, through one scratch. */\n    let previewLumaQueue = Promise.resolve();\n    function copyPreviewLuma(message) {\n        previewLumaQueue = previewLumaQueue.then(async () => {\n            try {\n                const copied = await readVideoFrameLuma(message.frame, previewLumaScratch, message.correction);\n                workerScope.postMessage({\n                    height: copied.height,\n                    luma: copied.luma.buffer,\n                    path: copied.path,\n                    requestId: message.requestId,\n                    type: DepthPreparationWorkerMessageType.PreviewLumaComplete,\n                    width: copied.width,\n                }, [copied.luma.buffer]);\n            }\n            catch (error) {\n                workerScope.postMessage({\n                    error: error instanceof Error\n                        ? error.message\n                        : \"Unable to copy the depth preview frame.\",\n                    requestId: message.requestId,\n                    type: DepthPreparationWorkerMessageType.Error,\n                });\n            }\n            finally {\n                message.frame.close();\n            }\n        });\n        return previewLumaQueue;\n    }\n    function prepareMaskFrame(message) {\n        try {\n            const regionMaskCoverage = createRegionMaskCoverageFrame(message.job.instructions);\n            const coverageTransfers = getRegionMaskCoverageTransfers(regionMaskCoverage);\n            const idMaskFrame = createIdMaskRasterFrame(message.job.instructions, message.job.maxRasterWidth);\n            if (idMaskFrame) {\n                const screenStrokes = createMaskScreenStrokes(message.job.instructions, idMaskFrame.width, idMaskFrame.height, idMaskFrame.data);\n                const strokeTransfers = screenStrokes?.flatMap(({ paths }) => paths.map((path) => path.buffer)) ?? [];\n                workerScope.postMessage({\n                    artifactKind: PreparedMaskFrameKind.IdMask,\n                    fillPalette: idMaskFrame.fillPalette,\n                    hasStroke: idMaskFrame.hasStroke,\n                    height: idMaskFrame.height,\n                    key: message.job.key,\n                    maxStrokeWidth: idMaskFrame.maxStrokeWidth,\n                    raster: idMaskFrame.data,\n                    screenStrokes,\n                    regionMaskCoverage,\n                    requestId: message.requestId,\n                    sourceWidth: idMaskFrame.sourceWidth,\n                    strokePalette: idMaskFrame.strokePalette,\n                    strokeWidths: idMaskFrame.strokeWidths,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                    width: idMaskFrame.width,\n                }, [\n                    idMaskFrame.data.buffer,\n                    idMaskFrame.fillPalette.buffer,\n                    idMaskFrame.strokePalette.buffer,\n                    idMaskFrame.strokeWidths.buffer,\n                    ...strokeTransfers,\n                    ...coverageTransfers,\n                ]);\n                return;\n            }\n            const compositedFrame = compositeMaskFrame(message.job.instructions);\n            if (!compositedFrame && !regionMaskCoverage) {\n                workerScope.postMessage({\n                    key: message.job.key,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Empty,\n                });\n                return;\n            }\n            const preparedPixels = compositedFrame ?? createTransparentCoverageCarrier();\n            const imageData = new ImageData(preparedPixels.data, preparedPixels.width, preparedPixels.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            const idMaskPlane = createIdMaskPlane(message.job.instructions, message.job.maxRasterWidth);\n            const idMaskTransfers = idMaskPlane ? [idMaskPlane.data.buffer] : [];\n            const screenStrokes = createMaskScreenStrokes(message.job.instructions, preparedPixels.width, preparedPixels.height);\n            const strokeTransfers = screenStrokes?.flatMap(({ paths }) => paths.map((path) => path.buffer)) ??\n                [];\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    idMaskPlane,\n                    imageBitmap,\n                    screenStrokes,\n                    key: message.job.key,\n                    regionMaskCoverage,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                }, [\n                    imageBitmap,\n                    ...idMaskTransfers,\n                    ...strokeTransfers,\n                    ...coverageTransfers,\n                ]);\n                return;\n            }\n            workerScope.postMessage({\n                idMaskPlane,\n                imageData,\n                screenStrokes,\n                key: message.job.key,\n                regionMaskCoverage,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Complete,\n            }, [\n                imageData.data.buffer,\n                ...idMaskTransfers,\n                ...strokeTransfers,\n                ...coverageTransfers,\n            ]);\n        }\n        catch (error) {\n            workerScope.postMessage({\n                error: error instanceof Error\n                    ? error.message\n                    : \"Unable to prepare mask frame.\",\n                key: message.job.key,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Error,\n            });\n        }\n    }\n    /**\n     * A frame that carries only region coverage has nothing to composite, and the\n     * RGBA branch still has to produce an artifact for the coverage to ride on.\n     */\n    function createTransparentCoverageCarrier() {\n        return {\n            data: new Uint8ClampedArray(new ArrayBuffer(4)),\n            height: 1,\n            width: 1,\n        };\n    }\n    function getRegionMaskCoverageTransfers(coverage) {\n        return coverage?.entries.map(({ data }) => data.buffer) ?? [];\n    }\n    function createImageBitmapFromImageData(imageData) {\n        if (typeof OffscreenCanvas === \"undefined\") {\n            return null;\n        }\n        const canvas = new OffscreenCanvas(imageData.width, imageData.height);\n        const context = canvas.getContext(\"2d\");\n        if (!context) {\n            return null;\n        }\n        context.putImageData(imageData, 0, 0);\n        return canvas.transferToImageBitmap();\n    }\n\n})();";
+const EMBEDDED_MASK_PREPARATION_WORKER_SOURCE = "(function () {\n    'use strict';\n\n    /** Trace closed pixel boundaries, retaining holes and disconnected components. */\n    function traceMaskOutlinePaths(raster, width, height, ids) {\n        const edgesById = new Map();\n        const stride = width + 1;\n        const steps = [1, stride, -1, -stride];\n        const add = (id, vertex, direction) => {\n            let edges = edgesById.get(id);\n            if (!edges)\n                edgesById.set(id, (edges = new Map()));\n            const outgoing = edges.get(vertex);\n            if (outgoing)\n                outgoing.push(direction);\n            else\n                edges.set(vertex, [direction]);\n        };\n        for (let y = 0; y < height; y += 1) {\n            for (let x = 0; x < width; x += 1) {\n                const offset = y * width + x;\n                const id = raster[offset];\n                if (!ids.has(id))\n                    continue;\n                const vertex = y * stride + x;\n                if (y === 0 || raster[offset - width] !== id)\n                    add(id, vertex, 0);\n                if (x === width - 1 || raster[offset + 1] !== id)\n                    add(id, vertex + 1, 1);\n                if (y === height - 1 || raster[offset + width] !== id)\n                    add(id, vertex + stride + 1, 2);\n                if (x === 0 || raster[offset - 1] !== id)\n                    add(id, vertex + stride, 3);\n            }\n        }\n        const result = new Map();\n        for (const [id, edges] of edgesById) {\n            const paths = [];\n            while (edges.size > 0) {\n                const start = edges.keys().next().value;\n                let vertex = start;\n                let previousDirection = -1;\n                let firstDirection = -1;\n                const points = [];\n                do {\n                    const outgoing = edges.get(vertex);\n                    // Turn right at diagonal contacts so separate islands stay separate.\n                    const direction = previousDirection < 0\n                        ? outgoing[0]\n                        : [1, 0, 3, 2]\n                            .map((turn) => (previousDirection + turn) % 4)\n                            .find((candidate) => outgoing.includes(candidate));\n                    if (firstDirection < 0)\n                        firstDirection = direction;\n                    if (direction !== previousDirection)\n                        points.push(vertex % stride, Math.floor(vertex / stride));\n                    outgoing.splice(outgoing.indexOf(direction), 1);\n                    if (outgoing.length === 0)\n                        edges.delete(vertex);\n                    vertex += steps[direction];\n                    previousDirection = direction;\n                } while (vertex !== start);\n                if (previousDirection === firstDirection)\n                    points.splice(0, 2);\n                paths.push(new Float32Array(points));\n            }\n            result.set(id, paths);\n        }\n        return result;\n    }\n\n    /** COCO-compatible keypoint visibility values. */\n    var KeypointVisibility;\n    (function (KeypointVisibility) {\n        KeypointVisibility[KeypointVisibility[\"NotLabeled\"] = 0] = \"NotLabeled\";\n        KeypointVisibility[KeypointVisibility[\"Occluded\"] = 1] = \"Occluded\";\n        KeypointVisibility[KeypointVisibility[\"Visible\"] = 2] = \"Visible\";\n    })(KeypointVisibility || (KeypointVisibility = {}));\n    var DetectionMaskEncoding;\n    (function (DetectionMaskEncoding) {\n        DetectionMaskEncoding[\"CompressedRle\"] = \"compressedRle\";\n    })(DetectionMaskEncoding || (DetectionMaskEncoding = {}));\n\n    var DetectionBufferStatus;\n    (function (DetectionBufferStatus) {\n        DetectionBufferStatus[\"Idle\"] = \"idle\";\n        DetectionBufferStatus[\"Loading\"] = \"loading\";\n        /**\n         * The playback gate is holding playback until the source produces detections\n         * for the requested range. {@link DetectionBufferStatus.Loading} fetches\n         * detections the source already has; this one waits on a producer.\n         */\n        DetectionBufferStatus[\"AwaitingCoverage\"] = \"awaitingCoverage\";\n        DetectionBufferStatus[\"Ready\"] = \"ready\";\n        DetectionBufferStatus[\"Error\"] = \"error\";\n        DetectionBufferStatus[\"Destroyed\"] = \"destroyed\";\n    })(DetectionBufferStatus || (DetectionBufferStatus = {}));\n    /**\n     * How the renderer selects the active detection frame for a media timestamp.\n     */\n    var DetectionFrameSelectionMode;\n    (function (DetectionFrameSelectionMode) {\n        /**\n         * Select the frame whose `[mediaTime, endTime)` interval contains the media\n         * time. This is the default for interval annotations and timestamped sources.\n         *\n         * Frame times must come from the media itself. Times reconstructed from a\n         * nominal frame rate drift against a clip whose real rate differs, and once\n         * that drift passes the half-millisecond selection tolerance a playhead\n         * landing on a frame boundary selects the previous frame's detections.\n         *\n         * A frame that carries no `endTime` stays active until the next frame starts,\n         * which bridges an index the source never produced.\n         * {@link DetectionFrameSelectionMode.NearestFrameIndex} bounds each frame to\n         * one grid step instead, so a missing index reads as no detections.\n         */\n        DetectionFrameSelectionMode[\"Interval\"] = \"interval\";\n        /**\n         * Select from a known inference frame grid using `frameIndex` and\n         * `frameRate`. This is useful when inference was run on normalized frames and\n         * playback should snap detections to that grid.\n         *\n         * A frame speaks for one grid step starting at its own media time, and an\n         * index the source never produced selects nothing rather than a neighbour.\n         *\n         * A frame carrying no `frameIndex` speaks for its step on the same terms,\n         * reached by the time it starts at rather than by an index that names it. Its\n         * `endTime` does not widen it past that step, so a source that labels only\n         * part of what it writes cannot bridge the indexes it never produced.\n         */\n        DetectionFrameSelectionMode[\"NearestFrameIndex\"] = \"nearestFrameIndex\";\n    })(DetectionFrameSelectionMode || (DetectionFrameSelectionMode = {}));\n    var DetectionFrameRetentionMode;\n    (function (DetectionFrameRetentionMode) {\n        /**\n         * Keep writable detections only in an in-memory store. Useful for ephemeral\n         * live streams where old predictions should disappear when evicted.\n         */\n        DetectionFrameRetentionMode[\"MemoryOnly\"] = \"memoryOnly\";\n        /**\n         * Persist every written detection frame. Useful for finite media where seek\n         * and replay should not require recomputing detections.\n         */\n        DetectionFrameRetentionMode[\"PersistAll\"] = \"persistAll\";\n        /**\n         * Persist only the most recent retention window. Useful for long-running\n         * streams where replay is bounded to a recent time horizon.\n         */\n        DetectionFrameRetentionMode[\"PersistWindow\"] = \"persistWindow\";\n    })(DetectionFrameRetentionMode || (DetectionFrameRetentionMode = {}));\n    function decodeCompressedRleMask(mask) {\n        if (mask.encoding !== DetectionMaskEncoding.CompressedRle) {\n            throw new Error(`Unsupported detection mask encoding: ${mask.encoding}`);\n        }\n        const data = new Uint8Array(mask.width * mask.height);\n        const counts = decodeCompressedRleCounts(mask.counts);\n        let offset = 0;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            const isForeground = index % 2 === 1;\n            if (isForeground) {\n                for (let runOffset = 0; runOffset < runLength; runOffset += 1) {\n                    const maskOffset = offset + runOffset;\n                    const x = Math.floor(maskOffset / mask.height);\n                    const y = maskOffset % mask.height;\n                    const rowMajorOffset = y * mask.width + x;\n                    if (rowMajorOffset < data.length) {\n                        data[rowMajorOffset] = 1;\n                    }\n                }\n            }\n            offset += runLength;\n        }\n        return {\n            data,\n            height: mask.height,\n            width: mask.width,\n        };\n    }\n    function decodeCompressedRleCounts(counts) {\n        const decoded = [];\n        let index = 0;\n        while (index < counts.length) {\n            let value = 0;\n            let shift = 0;\n            let charCode;\n            do {\n                charCode = counts.charCodeAt(index) - 48;\n                index += 1;\n                value |= (charCode & 0x1f) << shift;\n                shift += 5;\n            } while (charCode & 0x20);\n            if (charCode & 0x10) {\n                value |= -1 << shift;\n            }\n            if (decoded.length > 2) {\n                value += decoded[decoded.length - 2] ?? 0;\n            }\n            decoded.push(value);\n        }\n        return decoded;\n    }\n    function encodeCompressedRleCounts(counts) {\n        return counts\n            .map((count, index) => {\n            let value = index > 2 ? count - counts[index - 2] : count;\n            let encoded = \"\";\n            let more = true;\n            while (more) {\n                let charCode = value & 0x1f;\n                value >>= 5;\n                more = !((value === 0 && (charCode & 0x10) === 0) ||\n                    (value === -1 && (charCode & 0x10) !== 0));\n                if (more) {\n                    charCode |= 0x20;\n                }\n                encoded += String.fromCharCode(charCode + 48);\n            }\n            return encoded;\n        })\n            .join(\"\");\n    }\n\n    var AnnotationFrameMutationKind;\n    (function (AnnotationFrameMutationKind) {\n        AnnotationFrameMutationKind[\"Add\"] = \"add\";\n        AnnotationFrameMutationKind[\"Remove\"] = \"remove\";\n        AnnotationFrameMutationKind[\"Replace\"] = \"replace\";\n        AnnotationFrameMutationKind[\"Transact\"] = \"transact\";\n        AnnotationFrameMutationKind[\"Update\"] = \"update\";\n    })(AnnotationFrameMutationKind || (AnnotationFrameMutationKind = {}));\n\n    /** Geometry projected into a tracker. The original detection payload is retained. */\n    var TrackingGeometry;\n    (function (TrackingGeometry) {\n        TrackingGeometry[\"Box\"] = \"box\";\n        TrackingGeometry[\"Mask\"] = \"mask\";\n        TrackingGeometry[\"Keypoints\"] = \"keypoints\";\n    })(TrackingGeometry || (TrackingGeometry = {}));\n\n    var DetectionMaskPayloadFormat;\n    (function (DetectionMaskPayloadFormat) {\n        DetectionMaskPayloadFormat[\"RawCocoRle\"] = \"rawCocoRle\";\n        DetectionMaskPayloadFormat[\"DeflatedBase64\"] = \"deflatedBase64\";\n    })(DetectionMaskPayloadFormat || (DetectionMaskPayloadFormat = {}));\n    function encodeBinaryMask(data, width, height) {\n        assertMaskDimensions(data, width, height);\n        const runs = [];\n        let currentValue = 0;\n        let runLength = 0;\n        for (let x = 0; x < width; x += 1) {\n            for (let y = 0; y < height; y += 1) {\n                const value = data[y * width + x] ? 1 : 0;\n                if (value === currentValue) {\n                    runLength += 1;\n                }\n                else {\n                    runs.push(runLength);\n                    currentValue = value;\n                    runLength = 1;\n                }\n            }\n        }\n        runs.push(runLength);\n        return {\n            counts: encodeCompressedRleCounts(runs),\n            encoding: DetectionMaskEncoding.CompressedRle,\n            height,\n            width,\n        };\n    }\n    function assertMaskSize(width, height) {\n        if (!Number.isInteger(width) || width <= 0) {\n            throw new Error(\"Mask width must be a positive integer.\");\n        }\n        if (!Number.isInteger(height) || height <= 0) {\n            throw new Error(\"Mask height must be a positive integer.\");\n        }\n    }\n    function assertMaskDimensions(data, width, height) {\n        assertMaskSize(width, height);\n        if (data.length !== width * height) {\n            throw new Error(\"Mask data length must equal width * height.\");\n        }\n    }\n\n    function centerRectToTopLeftRect(rect) {\n        return {\n            height: rect.height,\n            width: rect.width,\n            x: rect.x - rect.width / 2,\n            y: rect.y - rect.height / 2,\n        };\n    }\n    function getPointsRect(points) {\n        if (points.length === 0) {\n            return undefined;\n        }\n        let minX = Number.POSITIVE_INFINITY;\n        let minY = Number.POSITIVE_INFINITY;\n        let maxX = Number.NEGATIVE_INFINITY;\n        let maxY = Number.NEGATIVE_INFINITY;\n        for (const point of points) {\n            minX = Math.min(minX, point.x);\n            minY = Math.min(minY, point.y);\n            maxX = Math.max(maxX, point.x);\n            maxY = Math.max(maxY, point.y);\n        }\n        return {\n            height: maxY - minY,\n            width: maxX - minX,\n            x: (minX + maxX) / 2,\n            y: (minY + maxY) / 2,\n        };\n    }\n\n    var DetectionPickTarget;\n    (function (DetectionPickTarget) {\n        DetectionPickTarget[\"Box\"] = \"box\";\n        DetectionPickTarget[\"Edge\"] = \"edge\";\n        DetectionPickTarget[\"Keypoint\"] = \"keypoint\";\n        DetectionPickTarget[\"Label\"] = \"label\";\n        DetectionPickTarget[\"Mask\"] = \"mask\";\n        DetectionPickTarget[\"OrientedBox\"] = \"orientedBox\";\n        DetectionPickTarget[\"Polygon\"] = \"polygon\";\n        DetectionPickTarget[\"Polyline\"] = \"polyline\";\n    })(DetectionPickTarget || (DetectionPickTarget = {}));\n    var MediaInteractionMode;\n    (function (MediaInteractionMode) {\n        MediaInteractionMode[\"Always\"] = \"always\";\n        MediaInteractionMode[\"Disabled\"] = \"disabled\";\n        MediaInteractionMode[\"PausedOnly\"] = \"pausedOnly\";\n    })(MediaInteractionMode || (MediaInteractionMode = {}));\n\n    var AnnotationGeometryKind;\n    (function (AnnotationGeometryKind) {\n        AnnotationGeometryKind[\"Box\"] = \"box\";\n        AnnotationGeometryKind[\"Polygon\"] = \"polygon\";\n        AnnotationGeometryKind[\"Polyline\"] = \"polyline\";\n        AnnotationGeometryKind[\"Keypoints\"] = \"keypoints\";\n        AnnotationGeometryKind[\"Mask\"] = \"mask\";\n    })(AnnotationGeometryKind || (AnnotationGeometryKind = {}));\n    var AnnotationGestureStateKind;\n    (function (AnnotationGestureStateKind) {\n        AnnotationGestureStateKind[\"Idle\"] = \"idle\";\n        AnnotationGestureStateKind[\"Creating\"] = \"creating\";\n        AnnotationGestureStateKind[\"Moving\"] = \"moving\";\n        AnnotationGestureStateKind[\"Resizing\"] = \"resizing\";\n        AnnotationGestureStateKind[\"DragSelecting\"] = \"dragSelecting\";\n    })(AnnotationGestureStateKind || (AnnotationGestureStateKind = {}));\n    var AnnotationHandleKind;\n    (function (AnnotationHandleKind) {\n        AnnotationHandleKind[\"Resize\"] = \"resize\";\n        AnnotationHandleKind[\"Vertex\"] = \"vertex\";\n        AnnotationHandleKind[\"AddVertex\"] = \"addVertex\";\n        AnnotationHandleKind[\"Keypoint\"] = \"keypoint\";\n    })(AnnotationHandleKind || (AnnotationHandleKind = {}));\n\n    /** Alignment for strokes applied to closed rendered geometry. */\n    var StrokeAlignment;\n    (function (StrokeAlignment) {\n        StrokeAlignment[\"Inside\"] = \"inside\";\n        StrokeAlignment[\"Center\"] = \"center\";\n        StrokeAlignment[\"Outside\"] = \"outside\";\n    })(StrokeAlignment || (StrokeAlignment = {}));\n\n    var BoxShape;\n    (function (BoxShape) {\n        BoxShape[\"Rect\"] = \"rect\";\n        BoxShape[\"RoundedRect\"] = \"roundedRect\";\n    })(BoxShape || (BoxShape = {}));\n\n    var FocusTargetMode;\n    (function (FocusTargetMode) {\n        FocusTargetMode[\"Hovered\"] = \"hovered\";\n        FocusTargetMode[\"Selected\"] = \"selected\";\n        FocusTargetMode[\"HoveredAndSelected\"] = \"hoveredAndSelected\";\n        FocusTargetMode[\"Ambient\"] = \"ambient\";\n    })(FocusTargetMode || (FocusTargetMode = {}));\n\n    var DetectionInteractionState;\n    (function (DetectionInteractionState) {\n        DetectionInteractionState[\"Hovered\"] = \"hovered\";\n        DetectionInteractionState[\"Selected\"] = \"selected\";\n    })(DetectionInteractionState || (DetectionInteractionState = {}));\n\n    var LabelPlacement;\n    (function (LabelPlacement) {\n        LabelPlacement[\"Top\"] = \"top\";\n        LabelPlacement[\"Bottom\"] = \"bottom\";\n        LabelPlacement[\"InsideTop\"] = \"insideTop\";\n        LabelPlacement[\"InsideBottom\"] = \"insideBottom\";\n        LabelPlacement[\"Center\"] = \"center\";\n    })(LabelPlacement || (LabelPlacement = {}));\n    var LabelVisibilityMode;\n    (function (LabelVisibilityMode) {\n        LabelVisibilityMode[\"Always\"] = \"always\";\n        LabelVisibilityMode[\"HoveredOnly\"] = \"hoveredOnly\";\n    })(LabelVisibilityMode || (LabelVisibilityMode = {}));\n\n    var MaskRenderMode;\n    (function (MaskRenderMode) {\n        MaskRenderMode[\"FillAndStroke\"] = \"fillAndStroke\";\n        MaskRenderMode[\"FillOnly\"] = \"fillOnly\";\n        MaskRenderMode[\"StrokeOnly\"] = \"strokeOnly\";\n    })(MaskRenderMode || (MaskRenderMode = {}));\n\n    /**\n     * Discriminator for renderer-neutral shape draw instructions.\n     */\n    var ShapeInstructionKind;\n    (function (ShapeInstructionKind) {\n        ShapeInstructionKind[\"Ellipse\"] = \"ellipse\";\n        ShapeInstructionKind[\"Marker\"] = \"marker\";\n        ShapeInstructionKind[\"Path\"] = \"path\";\n    })(ShapeInstructionKind || (ShapeInstructionKind = {}));\n    var MarkerShape;\n    (function (MarkerShape) {\n        MarkerShape[\"Circle\"] = \"circle\";\n        MarkerShape[\"Cross\"] = \"cross\";\n        MarkerShape[\"Square\"] = \"square\";\n        MarkerShape[\"Triangle\"] = \"triangle\";\n    })(MarkerShape || (MarkerShape = {}));\n    /**\n     * Coordinate space for marker sizing. Media sizes scale with the viewport;\n     * screen sizes stay constant on screen, matching stroke-width semantics.\n     */\n    var MarkerSizeSpace;\n    (function (MarkerSizeSpace) {\n        MarkerSizeSpace[\"Media\"] = \"media\";\n        MarkerSizeSpace[\"Screen\"] = \"screen\";\n    })(MarkerSizeSpace || (MarkerSizeSpace = {}));\n\n    var PercentageBarPlacement;\n    (function (PercentageBarPlacement) {\n        PercentageBarPlacement[\"Top\"] = \"top\";\n        PercentageBarPlacement[\"Bottom\"] = \"bottom\";\n        PercentageBarPlacement[\"InsideTop\"] = \"insideTop\";\n        PercentageBarPlacement[\"InsideBottom\"] = \"insideBottom\";\n    })(PercentageBarPlacement || (PercentageBarPlacement = {}));\n\n    var KeypointMarkerShape;\n    (function (KeypointMarkerShape) {\n        KeypointMarkerShape[\"Circle\"] = \"circle\";\n        KeypointMarkerShape[\"Cross\"] = \"cross\";\n    })(KeypointMarkerShape || (KeypointMarkerShape = {}));\n\n    /**\n     * What the stored values of a depth map measure.\n     *\n     * Every kind stores 0 where there is no depth.\n     */\n    const DepthMapKind = {\n        /** Stereo disparity in pixels of the map. Larger is nearer. */\n        DisparityPx: \"disparity_px\",\n        /** Metric depth along the optical axis in metres. Smaller is nearer. */\n        DepthM: \"depth_m\",\n        /**\n         * Unitless inverse depth up to an unknown scale and shift, as monocular\n         * models produce it. Larger is nearer; it has no metric depth.\n         */\n        RelativeInverse: \"relative_inverse\",\n    };\n    /**\n     * The quantity a depth renderer colours.\n     *\n     * Disparity is inverse depth, so it spends colour on near detail the way\n     * stereo measures it. Either way the nearest end of the range is the warm or\n     * bright end of the colour table.\n     */\n    const DepthQuantity = {\n        Disparity: \"disparity\",\n        Depth: \"depth\",\n    };\n    const DepthColormap = {\n        Turbo: \"turbo\",\n        Viridis: \"viridis\",\n        Cividis: \"cividis\",\n        Inferno: \"inferno\",\n        Magma: \"magma\",\n        Grayscale: \"grayscale\",\n    };\n    /** How a depth map is sampled where one map pixel does not cover one media pixel. */\n    const DepthSampling = {\n        /** Nearest when the map is at least media size, edge-aware otherwise. */\n        Auto: \"auto\",\n        Nearest: \"nearest\",\n        /**\n         * Bilinear over valid neighbours only, falling back to the nearest one\n         * across a depth edge, so objects never bleed into the background.\n         */\n        EdgeAware: \"edge-aware\",\n    };\n    /**\n     * The luma range a depth preview video's codes are written in.\n     *\n     * TV range is what browsers' hardware decoders return as written; a decoder\n     * may squeeze full range into TV range or move codes converting it to RGB.\n     */\n    const DepthPreviewLevels = {\n        /** Every code from 0 to 255; the top code is 255. */\n        Full: \"full\",\n        /** Limited range: black is 16 and the top code is 235. */\n        Tv: \"tv\",\n    };\n    new Set(Object.values(DepthColormap));\n    new Set(Object.values(DepthQuantity));\n    new Set(Object.values(DepthSampling));\n    function rasterizePolygonToMask(points, dimensions) {\n        const data = createEmptyMask(dimensions);\n        forEachRasterPolygonSpan(points, dimensions, (y, left, right) => {\n            data.fill(1, y * dimensions.width + left, y * dimensions.width + right);\n        });\n        return data;\n    }\n    function forEachRasterPolygonSpan(points, dimensions, writeSpan) {\n        assertMediaDimensions(dimensions);\n        if (points.length < 3) {\n            return;\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                if (left < right) {\n                    writeSpan(y, left, right);\n                }\n            }\n        }\n    }\n    function createEmptyMask(dimensions) {\n        assertMediaDimensions(dimensions);\n        return new Uint8Array(dimensions.width * dimensions.height);\n    }\n    function assertMediaDimensions(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    }\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.5 of them, so this stays a multiple of four and well inside that\n     * budget; past it a frame draws from the RGBA composite instead.\n     */\n    const MAX_ID_MASK_PALETTE_ENTRIES = 80;\n    const MAX_ID_MASK_STROKE_WIDTH = 16;\n    function createIdMaskFrame(instructions, options = {}) {\n        if (instructions.length === 0) {\n            return undefined;\n        }\n        /* Pixel-grid dimensions use integer parts throughout allocation and RLE\n           traversal. */\n        const maskWidth = Math.floor(Math.max(...instructions.map((instruction) => (instruction.mask ?? instruction.polygon).width)));\n        const maskHeight = Math.floor(Math.max(...instructions.map((instruction) => (instruction.mask ?? instruction.polygon).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        const strokeAlignments = 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 = instruction.stroke.width;\n                const alignment = instruction.stroke.alignment === StrokeAlignment.Inside\n                    ? 1\n                    : instruction.stroke.alignment === StrokeAlignment.Center\n                        ? 0.5\n                        : 0;\n                hasStroke = true;\n                strokeWidths[detectionMaskId] = strokeWidth;\n                strokeAlignments[detectionMaskId] = alignment;\n                maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth * (1 - alignment));\n                writeIdMaskPaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);\n            }\n            if (instruction.polygon) {\n                writePolygonSpans(data, width, instruction.polygon, detectionMaskId, scaledAxes);\n            }\n            else 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            strokeAlignments,\n            strokeWidths,\n            width,\n        };\n    }\n    function writePolygonSpans(data, frameWidth, polygon, detectionMaskId, axes) {\n        forEachRasterPolygonSpan(polygon.points, polygon, (y, left, right) => {\n            const row = axes ? axes.rows[y] : y * frameWidth;\n            const first = axes ? axes.columns[left] : left;\n            const last = axes ? axes.columns[right - 1] + 1 : right;\n            data.fill(detectionMaskId, row + first, row + last);\n        });\n    }\n    /**\n     * Compressed RLE counts runs down each column in turn, so a foreground run is\n     * a contiguous walk down one column that wraps into the next.\n     */\n    function writeMaskRuns(data, frameWidth, mask, detectionMaskId) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = Math.floor(mask.width);\n        const maskHeight = Math.floor(mask.height);\n        let maskOffset = 0;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let x = Math.floor(maskOffset / maskHeight);\n            let y = maskOffset - x * maskHeight;\n            let frameOffset = y * frameWidth + x;\n            for (let step = 0; step < runLength; step += 1) {\n                if (x >= maskWidth) {\n                    break;\n                }\n                data[frameOffset] = detectionMaskId;\n                y += 1;\n                frameOffset += frameWidth;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                    frameOffset = x;\n                }\n            }\n            maskOffset += runLength;\n        }\n    }\n    /**\n     * The scaled twin of writeMaskRuns. Every source pixel marks the texel it lands\n     * in, so a mask keeps every part of itself the smaller raster can hold and\n     * gains up to a texel at its edges.\n     */\n    function writeScaledMaskRuns(data, axes, mask, detectionMaskId) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = Math.floor(mask.width);\n        const maskHeight = Math.floor(mask.height);\n        let maskOffset = 0;\n        const stride = axes.stride;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let x = Math.floor(maskOffset / maskHeight);\n            let y = maskOffset - x * maskHeight;\n            let remaining = runLength;\n            /* A run walks down one column and wraps into the next, so it splits into\n               column-sized segments. Within a segment the destination offset only ever\n               steps by the row pitch or stays put: createMaskAxisMap builds\n               `rows[i] = min(height - 1, floor(i * scale)) * width` with scale <= 1, so\n               consecutive entries differ by exactly 0 or exactly `width`. Walking the\n               destination directly therefore touches the same bytes the per-pixel loop\n               touched, and drops the bounds test, the wrap test and one typed-array\n               load from every source pixel. Where the scale collapses several source\n               rows onto one destination row, this writes that byte once instead of\n               once per source row. */\n            while (remaining > 0 && x < maskWidth) {\n                const span = Math.min(remaining, maskHeight - y);\n                const column = axes.columns[x];\n                const first = axes.rows[y];\n                const last = axes.rows[y + span - 1];\n                for (let offset = first; offset <= last; offset += stride) {\n                    data[offset + column] = detectionMaskId;\n                }\n                remaining -= span;\n                y += span;\n                if (y === maskHeight) {\n                    y = 0;\n                    x += 1;\n                }\n            }\n            maskOffset += runLength;\n        }\n    }\n    function resolveRasterWidth(maskWidth, maxWidth) {\n        return maxWidth !== undefined && maxWidth > 0 && maxWidth < maskWidth\n            ? Math.max(1, Math.floor(maxWidth))\n            : maskWidth;\n    }\n    /**\n     * Converts total CSS outline width into raster texels. Each side is bounded\n     * independently so centered outlines can use the full supported radius.\n     */\n    function resolveIdMaskStrokeTexels(strokeWidth, displayWidth, rasterWidth, alignment = StrokeAlignment.Outside) {\n        const scale = displayWidth > 0 ? rasterWidth / displayWidth : 1;\n        const sideFraction = alignment === StrokeAlignment.Center ? 0.5 : 1;\n        return Math.min(strokeWidth * scale, MAX_ID_MASK_STROKE_WIDTH / sideFraction);\n    }\n    function createScaledMaskAxes(frame) {\n        return {\n            columns: createMaskAxisMap(frame.maskWidth, frame.width, 1),\n            rows: createMaskAxisMap(frame.maskHeight, frame.height, frame.width),\n            stride: frame.width,\n        };\n    }\n    /** Rows hold their destination offset, so writing a run is two lookups. */\n    function createMaskAxisMap(sourceLength, targetLength, stride) {\n        const map = new Int32Array(sourceLength);\n        const scale = targetLength / sourceLength;\n        for (let index = 0; index < sourceLength; index += 1) {\n            map[index] = Math.min(targetLength - 1, Math.floor(index * scale)) * stride;\n        }\n        return map;\n    }\n    /**\n     * The palette slot a detection index names, or undefined when the palette has\n     * no slot for it. Slot zero is the background, so the ids start at one and the\n     * last detection the palette can name sits one index below the last slot.\n     */\n    function resolveIdMaskPaletteId(detectionIndex) {\n        const detectionMaskId = detectionIndex + 1;\n        return detectionMaskId > 0 && detectionMaskId < MAX_ID_MASK_PALETTE_ENTRIES\n            ? detectionMaskId\n            : undefined;\n    }\n    function writeIdMaskPaletteEntry(palette, detectionMaskId, color, alpha) {\n        const offset = detectionMaskId * 4;\n        palette[offset] = ((color >> 16) & 0xff) / 255;\n        palette[offset + 1] = ((color >> 8) & 0xff) / 255;\n        palette[offset + 2] = (color & 0xff) / 255;\n        palette[offset + 3] = Math.max(0, Math.min(alpha, 1));\n    }\n    new Set(Object.values(DepthPreviewLevels));\n    new Set(Object.values(DepthMapKind));\n\n    var MediaRendererFit;\n    (function (MediaRendererFit) {\n        /**\n         * Preserve media aspect ratio and fit the full frame inside the canvas.\n         */\n        MediaRendererFit[\"Contain\"] = \"contain\";\n        /**\n         * Preserve media aspect ratio and fill the canvas, cropping if necessary.\n         */\n        MediaRendererFit[\"Cover\"] = \"cover\";\n    })(MediaRendererFit || (MediaRendererFit = {}));\n    /**\n     * Playback lifecycle state reported by a platform renderer.\n     */\n    var MediaRendererPlaybackState;\n    (function (MediaRendererPlaybackState) {\n        MediaRendererPlaybackState[\"Loading\"] = \"loading\";\n        MediaRendererPlaybackState[\"Ready\"] = \"ready\";\n        MediaRendererPlaybackState[\"Playing\"] = \"playing\";\n        MediaRendererPlaybackState[\"Buffering\"] = \"buffering\";\n        MediaRendererPlaybackState[\"Paused\"] = \"paused\";\n        MediaRendererPlaybackState[\"Error\"] = \"error\";\n        MediaRendererPlaybackState[\"Destroyed\"] = \"destroyed\";\n    })(MediaRendererPlaybackState || (MediaRendererPlaybackState = {}));\n    /**\n     * Stable classification of a media failure.\n     *\n     * Applications branch on these kinds instead of parsing decoder, demuxer, or\n     * container error text, and still own their localized user-facing copy. New\n     * kinds may be added over time, so treat unrecognized values like `Unknown`.\n     */\n    var MediaErrorKind;\n    (function (MediaErrorKind) {\n        /** The media could not be opened or read, or was refused before any read. */\n        MediaErrorKind[\"Unreadable\"] = \"unreadable\";\n        /** The container or codec is not supported by this platform. */\n        MediaErrorKind[\"UnsupportedFormat\"] = \"unsupportedFormat\";\n        /** The media opened but carries no usable video track. */\n        MediaErrorKind[\"NoVideoTrack\"] = \"noVideoTrack\";\n        /** Decoding a sample failed after the source opened. */\n        MediaErrorKind[\"Decode\"] = \"decode\";\n        /** The media could not be fetched. */\n        MediaErrorKind[\"Network\"] = \"network\";\n        /** The host environment lacks the APIs this media source requires. */\n        MediaErrorKind[\"EnvironmentUnsupported\"] = \"environmentUnsupported\";\n        /** The failure could not be classified. */\n        MediaErrorKind[\"Unknown\"] = \"unknown\";\n    })(MediaErrorKind || (MediaErrorKind = {}));\n    /**\n     * Lower-level media source readiness.\n     */\n    var MediaSourceStatus;\n    (function (MediaSourceStatus) {\n        MediaSourceStatus[\"Loading\"] = \"loading\";\n        MediaSourceStatus[\"Ready\"] = \"ready\";\n        MediaSourceStatus[\"Error\"] = \"error\";\n        MediaSourceStatus[\"Destroyed\"] = \"destroyed\";\n    })(MediaSourceStatus || (MediaSourceStatus = {}));\n    /**\n     * Current renderer state.\n     */\n    /**\n     * What a playback gate holds back.\n     *\n     * A source the renderer pulls samples from can be held between any two frames,\n     * because the renderer decides when each one is drawn. A source that presents\n     * its own frames owns the playhead, so holding it means stopping the producer\n     * and starting it again, and a gate that stops one has to bound its own wait\n     * or a producer nothing answers for never runs again.\n     */\n    var PlaybackGateReach;\n    (function (PlaybackGateReach) {\n        /** No gate: the picture moves and unprepared layers are absent from it. */\n        PlaybackGateReach[\"Off\"] = \"off\";\n        /**\n         * Playback waits to begin, and stops again at any frame whose artifacts are\n         * missing, until they arrive or the gate's own wait bound gives up on them.\n         */\n        PlaybackGateReach[\"EveryFrame\"] = \"everyFrame\";\n    })(PlaybackGateReach || (PlaybackGateReach = {}));\n\n    /**\n     * Media-session operating mode.\n     *\n     * Core owns the names because file-like and stream-like lifecycle choices are\n     * platform-neutral. Platform packages decide how these modes tune media,\n     * storage, and renderer defaults.\n     */\n    var MediaSessionMode;\n    (function (MediaSessionMode) {\n        /**\n         * Finite media. Defaults usually favor seek/replay and persistent detection\n         * storage.\n         */\n        MediaSessionMode[\"File\"] = \"file\";\n        /**\n         * Live or append-only media. Defaults usually favor rolling windows and\n         * bounded retention.\n         */\n        MediaSessionMode[\"Stream\"] = \"stream\";\n    })(MediaSessionMode || (MediaSessionMode = {}));\n    /**\n     * Aggregate lifecycle state for a media session.\n     */\n    var MediaSessionStatus;\n    (function (MediaSessionStatus) {\n        MediaSessionStatus[\"Buffering\"] = \"buffering\";\n        MediaSessionStatus[\"Destroyed\"] = \"destroyed\";\n        MediaSessionStatus[\"Error\"] = \"error\";\n        MediaSessionStatus[\"Loading\"] = \"loading\";\n        MediaSessionStatus[\"Paused\"] = \"paused\";\n        MediaSessionStatus[\"Playing\"] = \"playing\";\n        MediaSessionStatus[\"Processing\"] = \"processing\";\n        MediaSessionStatus[\"Ready\"] = \"ready\";\n    })(MediaSessionStatus || (MediaSessionStatus = {}));\n    /**\n     * Subsystem currently affecting session readiness or presentation.\n     */\n    var MediaSessionActivityKind;\n    (function (MediaSessionActivityKind) {\n        /**\n         * Playback is held waiting for a producer to emit detections for the frame\n         * about to be shown, which is a wait on inference rather than on transfer or\n         * decode. `DetectionsBuffering` is the transfer of detections that already\n         * exist, and `PlaybackBuffering` is the wait for media bytes.\n         */\n        MediaSessionActivityKind[\"DetectionsAwaitingCoverage\"] = \"detectionsAwaitingCoverage\";\n        MediaSessionActivityKind[\"DetectionsBuffering\"] = \"detectionsBuffering\";\n        MediaSessionActivityKind[\"DetectionsLoading\"] = \"detectionsLoading\";\n        MediaSessionActivityKind[\"Error\"] = \"error\";\n        MediaSessionActivityKind[\"MediaNormalizing\"] = \"mediaNormalizing\";\n        MediaSessionActivityKind[\"MediaOpening\"] = \"mediaOpening\";\n        /**\n         * The picture is waiting on media the source has not handed over yet, which\n         * is the bytes and their decode rather than anything downstream of them.\n         * `PlaybackBuffering` is what a transport reports once it has already\n         * stopped; this is reported from the read itself, including the reads a seek\n         * makes while the transport still reads as paused.\n         */\n        MediaSessionActivityKind[\"MediaSourceReading\"] = \"mediaSourceReading\";\n        MediaSessionActivityKind[\"PlaybackBuffering\"] = \"playbackBuffering\";\n        /**\n         * The render-preparation gate held the picture for artifacts that never\n         * arrived and let it go. Nothing is blocked: the frames reaching the screen\n         * are the ones whose artifacts were given up on. What is waited on is\n         * preparation finishing another frame, which is what lets the gate hold the\n         * picture again; `RenderPreparing` covers the holds that are running.\n         */\n        MediaSessionActivityKind[\"RenderPreparationAbandoned\"] = \"renderPreparationAbandoned\";\n        MediaSessionActivityKind[\"RenderPreparing\"] = \"renderPreparing\";\n    })(MediaSessionActivityKind || (MediaSessionActivityKind = {}));\n    /**\n     * State of one session activity.\n     */\n    var MediaSessionActivityStatus;\n    (function (MediaSessionActivityStatus) {\n        MediaSessionActivityStatus[\"Error\"] = \"error\";\n        MediaSessionActivityStatus[\"Running\"] = \"running\";\n        MediaSessionActivityStatus[\"Waiting\"] = \"waiting\";\n    })(MediaSessionActivityStatus || (MediaSessionActivityStatus = {}));\n\n    /** Builds compact, independent alpha crops so overlapping masks stay exact. */\n    function createRegionMaskCoverageFrame(instructions) {\n        const entries = [];\n        for (const instruction of instructions) {\n            if (!instruction.regionCoverageMask) {\n                continue;\n            }\n            const entry = cropCoverageMask(instruction.detectionIndex, decodeCompressedRleMask(instruction.regionCoverageMask));\n            if (entry) {\n                entries.push(entry);\n            }\n        }\n        return entries.length > 0 ? { entries } : undefined;\n    }\n    function cropCoverageMask(detectionIndex, decodedMask) {\n        let minX = decodedMask.width;\n        let minY = decodedMask.height;\n        let maxX = -1;\n        let maxY = -1;\n        for (let y = 0; y < decodedMask.height; y += 1) {\n            for (let x = 0; x < decodedMask.width; x += 1) {\n                if (!decodedMask.data[y * decodedMask.width + x]) {\n                    continue;\n                }\n                minX = Math.min(minX, x);\n                minY = Math.min(minY, y);\n                maxX = Math.max(maxX, x);\n                maxY = Math.max(maxY, y);\n            }\n        }\n        if (maxX < minX || maxY < minY) {\n            return undefined;\n        }\n        const width = maxX - minX + 1;\n        const height = maxY - minY + 1;\n        const data = new Uint8Array(new ArrayBuffer(width * height));\n        for (let y = minY; y <= maxY; y += 1) {\n            for (let x = minX; x <= maxX; x += 1) {\n                if (!decodedMask.data[y * decodedMask.width + x]) {\n                    continue;\n                }\n                data[(y - minY) * width + (x - minX)] = 255;\n            }\n        }\n        return { data, detectionIndex, height, width, x: minX, y: minY };\n    }\n    function compositeMaskFrame(instructions, displayWidth) {\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        const strokeCoverage = maskInstructions.some(({ stroke }) => stroke && stroke.width > 0 && stroke.alpha > 0)\n            ? new Uint8Array(width * height)\n            : undefined;\n        const strokeKernels = new Map();\n        for (const instruction of maskInstructions) {\n            compositeInstruction(data, width, instruction, strokeCoverage, strokeKernels, displayWidth);\n        }\n        return { data, height, width };\n    }\n    function createIdMaskRasterFrame(instructions, maxRasterWidth) {\n        try {\n            return createIdMaskFrame(instructions\n                .filter((instruction) => instruction.visible !== false)\n                .map((instruction) => instruction.stroke?.widthUnit\n                ? { ...instruction, stroke: undefined }\n                : instruction), { maxWidth: maxRasterWidth });\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, strokeCoverage, strokeKernels, displayWidth) {\n        const fill = resolveRgbaColor(instruction.color, instruction.alpha);\n        const bounds = compositeMaskFill(rgba, canvasWidth, instruction.mask, fill);\n        if (instruction.stroke &&\n            instruction.stroke.widthUnit === undefined &&\n            bounds &&\n            strokeCoverage) {\n            compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, {\n                ...instruction.stroke,\n                width: resolveIdMaskStrokeTexels(instruction.stroke.width, displayWidth ?? canvasWidth, canvasWidth, instruction.stroke.alignment),\n            }, strokeCoverage, strokeKernels);\n        }\n    }\n    function createMaskScreenStrokes(instructions, width, height, preparedRaster) {\n        const outlined = instructions.filter(({ visible, stroke }) => visible !== false &&\n            stroke?.widthUnit !== undefined &&\n            stroke.width > 0 &&\n            stroke.alpha > 0);\n        if (outlined.length === 0)\n            return undefined;\n        const raster = preparedRaster ?? new Uint32Array(width * height);\n        if (!preparedRaster) {\n            const masks = materializeMaskInstructions(instructions);\n            for (const { detectionIndex, mask } of masks) {\n                const counts = decodeCompressedRleCounts(mask.counts);\n                let offset = 0;\n                for (let index = 0; index < counts.length; index += 1) {\n                    const length = counts[index];\n                    if (index % 2 === 1) {\n                        for (let pixel = offset; pixel < offset + length; pixel += 1) {\n                            const x = Math.floor(pixel / mask.height);\n                            const y = pixel % mask.height;\n                            raster[y * width + x] = detectionIndex + 1;\n                        }\n                    }\n                    offset += length;\n                }\n            }\n        }\n        const paths = traceMaskOutlinePaths(raster, width, height, new Set(outlined.map(({ detectionIndex }) => detectionIndex + 1)));\n        return outlined.map(({ detectionIndex, stroke }) => ({\n            detectionIndex,\n            alpha: stroke.alpha,\n            color: stroke.color,\n            width: stroke.width,\n            widthUnit: stroke.widthUnit,\n            alignment: stroke.alignment,\n            paths: paths.get(detectionIndex + 1) ?? [],\n        }));\n    }\n    function materializeMaskInstructions(instructions) {\n        return instructions\n            .filter((instruction) => instruction.visible !== false)\n            .map((instruction) => {\n            if (instruction.mask) {\n                return instruction;\n            }\n            const { height, points, width } = instruction.polygon;\n            return {\n                alpha: instruction.alpha,\n                color: instruction.color,\n                detectionIndex: instruction.detectionIndex,\n                mask: encodeBinaryMask(rasterizePolygonToMask(points, { height, width }), width, height),\n                stroke: instruction.stroke,\n            };\n        });\n    }\n    /**\n     * Compressed RLE counts runs down each column in turn, so a foreground run is\n     * a contiguous walk down one column that wraps into the next.\n     */\n    function compositeMaskFill(rgba, canvasWidth, mask, fill) {\n        const counts = decodeCompressedRleCounts(mask.counts);\n        const maskWidth = mask.width;\n        const maskHeight = mask.height;\n        const maskArea = maskWidth * maskHeight;\n        let maskOffset = 0;\n        let minX = maskWidth;\n        let minY = maskHeight;\n        let maxX = -1;\n        let maxY = -1;\n        for (let index = 0; index < counts.length; index += 1) {\n            const runLength = counts[index] ?? 0;\n            if (index % 2 === 0 || runLength <= 0) {\n                maskOffset += runLength;\n                continue;\n            }\n            let columnX = Math.floor(maskOffset / maskHeight);\n            let columnY = maskOffset - columnX * maskHeight;\n            for (let step = 0; step < runLength; step += 1) {\n                // A run can outlast the columns the mask has; the pixel it then names\n                // is wherever that column-major offset lands when read back row-major.\n                const rowMajorOffset = columnY * maskWidth + columnX;\n                if (rowMajorOffset < maskArea) {\n                    const x = rowMajorOffset % maskWidth;\n                    const y = (rowMajorOffset - x) / maskWidth;\n                    writePixel(rgba, canvasWidth, x, y, fill);\n                    minX = Math.min(minX, x);\n                    minY = Math.min(minY, y);\n                    maxX = Math.max(maxX, x);\n                    maxY = Math.max(maxY, y);\n                }\n                columnY += 1;\n                if (columnY === maskHeight) {\n                    columnY = 0;\n                    columnX += 1;\n                }\n            }\n            maskOffset += runLength;\n        }\n        return maxX < minX || maxY < minY ? undefined : { maxX, maxY, minX, minY };\n    }\n    function createStrokeKernel(width, alignment) {\n        const innerFraction = alignment === StrokeAlignment.Inside\n            ? 1\n            : alignment === StrokeAlignment.Center\n                ? 0.5\n                : 0;\n        const inside = [];\n        const outside = [];\n        const radius = Math.min(MAX_ID_MASK_STROKE_WIDTH + 1, Math.ceil(width * Math.max(innerFraction, 1 - innerFraction) + 0.5));\n        const clamp = (value) => Math.max(0, Math.min(1, value));\n        const coverage = (signed) => Math.round(255 *\n            (clamp(0.5 + width * (1 - innerFraction) - signed) -\n                clamp(0.5 - width * innerFraction - signed)));\n        for (let y = -radius; y <= radius; y += 1) {\n            for (let x = -radius; x <= radius; x += 1) {\n                if (x === 0 && y === 0)\n                    continue;\n                const distance = Math.max(Math.abs(x) - 0.5, Math.abs(y) - 0.5, 0);\n                const innerCoverage = coverage(-distance);\n                const outerCoverage = coverage(distance);\n                if (innerCoverage > 0)\n                    inside.push([x, y, innerCoverage]);\n                if (outerCoverage > 0)\n                    outside.push([x, y, outerCoverage]);\n            }\n        }\n        return { inside, outside, radius };\n    }\n    function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke, coverage, kernels) {\n        if (stroke.width <= 0 || stroke.alpha <= 0)\n            return;\n        const key = `${stroke.width}:${stroke.alignment}`;\n        let kernel = kernels.get(key);\n        if (!kernel) {\n            kernel = createStrokeKernel(stroke.width, stroke.alignment);\n            kernels.set(key, kernel);\n        }\n        const visitedAir = kernel.inside.length > 0 ? new Set() : undefined;\n        const mark = (sourceX, sourceY, offsets, foreground) => {\n            for (const [dx, dy, value] of offsets) {\n                const x = sourceX + dx;\n                const y = sourceY + dy;\n                if (isOutsideMaskBounds(decodedMask, x, y) ||\n                    isMaskPixel(decodedMask, x, y) !== foreground)\n                    continue;\n                const index = y * canvasWidth + x;\n                coverage[index] = Math.max(coverage[index], value);\n            }\n        };\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                mark(x, y, kernel.outside, false);\n                if (!visitedAir)\n                    continue;\n                for (let dy = -1; dy <= 1; dy += 1) {\n                    for (let dx = -1; dx <= 1; dx += 1) {\n                        const airX = x + dx;\n                        const airY = y + dy;\n                        if (isOutsideMaskBounds(decodedMask, airX, airY) ||\n                            isMaskPixel(decodedMask, airX, airY))\n                            continue;\n                        const airIndex = airY * decodedMask.width + airX;\n                        if (visitedAir.has(airIndex))\n                            continue;\n                        visitedAir.add(airIndex);\n                        mark(airX, airY, kernel.inside, true);\n                    }\n                }\n            }\n        }\n        const color = resolveRgbaColor(stroke.color, stroke.alpha);\n        for (let y = Math.max(0, bounds.minY - kernel.radius); y <= Math.min(decodedMask.height - 1, bounds.maxY + kernel.radius); y += 1) {\n            for (let x = Math.max(0, bounds.minX - kernel.radius); x <= Math.min(decodedMask.width - 1, bounds.maxX + kernel.radius); x += 1) {\n                const index = y * canvasWidth + x;\n                const amount = coverage[index] / 255;\n                if (amount <= 0)\n                    continue;\n                coverage[index] = 0;\n                const offset = index * 4;\n                const alpha = rgba[offset + 3] * (1 - amount) + color.alpha * amount;\n                rgba[offset] =\n                    alpha > 0\n                        ? (rgba[offset] * rgba[offset + 3] * (1 - amount) +\n                            color.red * color.alpha * amount) /\n                            alpha\n                        : 0;\n                rgba[offset + 1] =\n                    alpha > 0\n                        ? (rgba[offset + 1] * rgba[offset + 3] * (1 - amount) +\n                            color.green * color.alpha * amount) /\n                            alpha\n                        : 0;\n                rgba[offset + 2] =\n                    alpha > 0\n                        ? (rgba[offset + 2] * rgba[offset + 3] * (1 - amount) +\n                            color.blue * color.alpha * amount) /\n                            alpha\n                        : 0;\n                rgba[offset + 3] = alpha;\n            }\n        }\n    }\n    function isBoundaryPixel(mask, x, y) {\n        for (let offsetY = -1; offsetY <= 1; offsetY += 1) {\n            for (let offsetX = -1; offsetX <= 1; offsetX += 1) {\n                if (offsetX === 0 && offsetY === 0) {\n                    continue;\n                }\n                const neighborX = x + offsetX;\n                const neighborY = y + offsetY;\n                if (isOutsideMaskBounds(mask, neighborX, neighborY) ||\n                    !isMaskPixel(mask, neighborX, neighborY)) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n    function isMaskPixel(mask, x, y) {\n        return mask.data[y * mask.width + x] === 1;\n    }\n    function isOutsideMaskBounds(mask, x, y) {\n        return x < 0 || y < 0 || x >= mask.width || y >= mask.height;\n    }\n    function resolveRgbaColor(color, alpha) {\n        return {\n            alpha: Math.round(Math.max(0, Math.min(alpha, 1)) * 255),\n            blue: color & 0xff,\n            green: (color >> 8) & 0xff,\n            red: (color >> 16) & 0xff,\n        };\n    }\n    function writePixel(rgba, canvasWidth, x, y, color) {\n        const rgbaOffset = (y * canvasWidth + x) * 4;\n        rgba[rgbaOffset] = color.red;\n        rgba[rgbaOffset + 1] = color.green;\n        rgba[rgbaOffset + 2] = color.blue;\n        rgba[rgbaOffset + 3] = color.alpha;\n    }\n\n    var PreparedMaskFrameKind;\n    (function (PreparedMaskFrameKind) {\n        PreparedMaskFrameKind[\"IdMask\"] = \"idMask\";\n        PreparedMaskFrameKind[\"RgbaImage\"] = \"rgbaImage\";\n    })(PreparedMaskFrameKind || (PreparedMaskFrameKind = {}));\n    /**\n     * How an id raster is laid out for the texture it is uploaded into. WebGPU\n     * takes any bytesPerRow, so ids go up one byte per pixel. WebGL aligns every\n     * uploaded row to four bytes and rejects a single-channel upload whose width\n     * is not a multiple of four, which is what the four-channel layout is for.\n     */\n    var IdMaskTextureFormat;\n    (function (IdMaskTextureFormat) {\n        IdMaskTextureFormat[\"R8\"] = \"r8unorm\";\n        IdMaskTextureFormat[\"Rgba8\"] = \"rgba8unorm\";\n    })(IdMaskTextureFormat || (IdMaskTextureFormat = {}));\n\n    const DEFAULT_STOPS = [\n        { position: 0, color: 0xffd600 },\n        { position: 0.35, color: 0xffd600 },\n        { position: 0.7, color: 0xff7a00 },\n        { position: 1, color: 0xdc1e1e },\n    ];\n    const MAX_HEATMAP_PIXELS = 16_777_216;\n    const MAX_HEATMAP_SIDE = 8_192;\n    /** Turns semantic scores into an RGBA raster; no palette enters cold data. */\n    function colorizeHeatmap(map, renderer) {\n        const { bounds, width, height, values } = map;\n        if (!Number.isFinite(bounds?.x) ||\n            !Number.isFinite(bounds?.y) ||\n            !Number.isFinite(bounds?.width) ||\n            !Number.isFinite(bounds?.height) ||\n            bounds.width <= 0 ||\n            bounds.height <= 0 ||\n            !Number.isInteger(width) ||\n            !Number.isInteger(height) ||\n            width <= 0 ||\n            height <= 0 ||\n            width > MAX_HEATMAP_SIDE ||\n            height > MAX_HEATMAP_SIDE ||\n            width * height > MAX_HEATMAP_PIXELS ||\n            !(Array.isArray(values) ||\n                values instanceof Float32Array ||\n                values instanceof Float64Array ||\n                values instanceof Uint16Array) ||\n            values.length !== width * height) {\n            throw new RangeError(\"Heatmap bounds and dimensions must be valid, match row-major values, and fit the raster limit.\");\n        }\n        const scale = map.valueScale ?? 1;\n        const threshold = (map.threshold ?? 0) * (renderer.thresholdScale ?? 1);\n        const maximumScore = renderer.maximumScore ?? 1;\n        const opacity = clamp01(renderer.opacity ?? 1);\n        const minimumAlpha = clamp01(renderer.minimumAlpha ?? 0);\n        const stops = renderer.colorStops ?? DEFAULT_STOPS;\n        if (!Number.isFinite(scale) ||\n            scale <= 0 ||\n            !Number.isFinite(threshold) ||\n            !Number.isFinite(maximumScore) ||\n            maximumScore <= 0 ||\n            !Number.isFinite(renderer.thresholdScale ?? 1) ||\n            (renderer.thresholdScale ?? 1) < 0 ||\n            !Number.isFinite(renderer.opacity ?? 1) ||\n            !Number.isFinite(renderer.minimumAlpha ?? 0) ||\n            stops.length === 0 ||\n            stops.some((stop, index) => !Number.isFinite(stop.position) ||\n                stop.position < 0 ||\n                stop.position > 1 ||\n                !Number.isInteger(stop.color) ||\n                stop.color < 0 ||\n                stop.color > 0xffffff ||\n                (index > 0 && stop.position < stops[index - 1].position))) {\n            throw new RangeError(\"Invalid heatmap scale, threshold, or color stops.\");\n        }\n        const rgba = new Uint8ClampedArray(new ArrayBuffer(values.length * 4));\n        if (maximumScore <= threshold || opacity === 0)\n            return rgba;\n        for (let index = 0; index < values.length; index += 1) {\n            const score = values[index] * scale;\n            if (!Number.isFinite(score) || score <= threshold)\n                continue;\n            const color = interpolateColor(stops, clamp01(score / maximumScore));\n            const alphaIntensity = clamp01((score - threshold) / (maximumScore - threshold));\n            const offset = index * 4;\n            rgba[offset] = color >> 16;\n            rgba[offset + 1] = (color >> 8) & 0xff;\n            rgba[offset + 2] = color & 0xff;\n            rgba[offset + 3] = Math.round(255 * opacity * (minimumAlpha + (1 - minimumAlpha) * alphaIntensity));\n        }\n        return rgba;\n    }\n    function interpolateColor(stops, value) {\n        const upperIndex = stops.findIndex((stop) => stop.position >= value);\n        if (upperIndex === -1)\n            return stops[stops.length - 1].color;\n        if (upperIndex === 0)\n            return stops[0].color;\n        const left = stops[upperIndex - 1];\n        const right = stops[upperIndex];\n        const span = right.position - left.position;\n        const ratio = span === 0 ? 1 : (value - left.position) / span;\n        const channel = (shift) => Math.round(((left.color >> shift) & 0xff) * (1 - ratio) +\n            ((right.color >> shift) & 0xff) * ratio);\n        return (channel(16) << 16) | (channel(8) << 8) | channel(0);\n    }\n    function clamp01(value) {\n        return Math.max(0, Math.min(1, value));\n    }\n\n    var HeatmapPreparationWorkerMessageType;\n    (function (HeatmapPreparationWorkerMessageType) {\n        HeatmapPreparationWorkerMessageType[\"Prepare\"] = \"heatmap-prepare\";\n        HeatmapPreparationWorkerMessageType[\"Complete\"] = \"heatmap-complete\";\n        HeatmapPreparationWorkerMessageType[\"Error\"] = \"heatmap-error\";\n    })(HeatmapPreparationWorkerMessageType || (HeatmapPreparationWorkerMessageType = {}));\n\n    var MaskPreparationWorkerMessageType;\n    (function (MaskPreparationWorkerMessageType) {\n        MaskPreparationWorkerMessageType[\"Complete\"] = \"complete\";\n        MaskPreparationWorkerMessageType[\"Empty\"] = \"empty\";\n        MaskPreparationWorkerMessageType[\"Error\"] = \"error\";\n        MaskPreparationWorkerMessageType[\"Prepare\"] = \"prepare\";\n    })(MaskPreparationWorkerMessageType || (MaskPreparationWorkerMessageType = {}));\n\n    /**\n     * Messages between the depth source and the render-preparation worker, which\n     * decodes depth and confidence PNGs, and copies decoded preview frames' luma,\n     * off the main thread. Internal: the worker script is a deployment asset, and\n     * its protocol is not public.\n     */\n    var DepthPreparationWorkerMessageType;\n    (function (DepthPreparationWorkerMessageType) {\n        DepthPreparationWorkerMessageType[\"Decode\"] = \"depth-decode\";\n        DepthPreparationWorkerMessageType[\"Complete\"] = \"depth-decode-complete\";\n        DepthPreparationWorkerMessageType[\"Error\"] = \"depth-decode-error\";\n        DepthPreparationWorkerMessageType[\"PreviewLuma\"] = \"depth-preview-luma\";\n        DepthPreparationWorkerMessageType[\"PreviewLumaComplete\"] = \"depth-preview-luma-complete\";\n    })(DepthPreparationWorkerMessageType || (DepthPreparationWorkerMessageType = {}));\n\n    /*\n     * Grayscale PNG decoding for depth maps and their confidence planes.\n     *\n     * Every image path a browser offers (<img>, createImageBitmap, ImageDecoder,\n     * canvas) hands back 8 bits per channel, so a 16-bit depth PNG is decoded\n     * here: the browser's own zlib inflates the IDAT stream, and the row filters\n     * are undone in JavaScript.\n     *\n     * This module imports nothing, so the render-preparation worker, the main\n     * thread and the depth benchmark all run the same code.\n     */\n    const PNG_SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10];\n    const COLOR_TYPE_GRAY = 0;\n    /** 16384 x 16384, beyond any GPU texture; a header claiming more is refused. */\n    const MAX_PNG_PIXELS = 16_384 * 16_384;\n    async function decodePng16(bytes, options = {}) {\n        const header = readPngHeader(bytes, 16);\n        const rowBytes = header.width * 2 + 1;\n        const raw = await (options.inflate ?? inflateWithDecompressionStream)(header.idat, rowBytes * header.height);\n        const values = new Uint16Array(header.width * header.height);\n        checkInflatedLength(raw, rowBytes * header.height);\n        unfilterGray16(raw, header.width, header.height, values);\n        return {\n            height: header.height,\n            paddedUpload: options.padRowsForWebGl && header.width % 2 === 1\n                ? padRows(values, header.width, header.height)\n                : undefined,\n            values,\n            width: header.width,\n        };\n    }\n    async function decodePng8Gray(bytes, options = {}) {\n        const header = readPngHeader(bytes, 8);\n        const rowBytes = header.width + 1;\n        const raw = await (options.inflate ?? inflateWithDecompressionStream)(header.idat, rowBytes * header.height);\n        const values = new Uint8Array(header.width * header.height);\n        checkInflatedLength(raw, rowBytes * header.height);\n        unfilterGray8(raw, header.width, header.height, values);\n        return { height: header.height, values, width: header.width };\n    }\n    /**\n     * Inflates with the platform's `DecompressionStream(\"deflate\")` (zlib\n     * framing, which is what PNG uses) straight into one buffer of the expected\n     * size, so no second copy joins the output chunks.\n     */\n    async function inflateWithDecompressionStream(chunks, byteLength) {\n        const stream = new DecompressionStream(\"deflate\");\n        const writer = stream.writable.getWriter();\n        const reader = stream.readable.getReader();\n        // Writers split IDAT into many small chunks (libpng's default is 8 KiB).\n        // One write of the joined stream costs a copy of the compressed bytes and\n        // saves a stream round trip per chunk.\n        const zlib = chunks.length === 1 ? chunks[0] : joinChunks(chunks);\n        const writing = (async () => {\n            await writer.write(zlib);\n            await writer.close();\n        })();\n        const output = new Uint8Array(byteLength);\n        let offset = 0;\n        // A corrupt stream rejects both sides; the reader's error is the one thrown.\n        writing.catch(() => undefined);\n        try {\n            for (;;) {\n                const { done, value } = await reader.read();\n                if (done)\n                    break;\n                if (offset + value.byteLength > byteLength) {\n                    throw new RangeError(\"PNG image data is longer than its header says.\");\n                }\n                output.set(value, offset);\n                offset += value.byteLength;\n            }\n            await writing;\n        }\n        catch (error) {\n            await reader.cancel().catch(() => undefined);\n            throw error instanceof RangeError\n                ? error\n                : new RangeError(`PNG image data does not inflate: ${error instanceof Error ? error.message : String(error)}`);\n        }\n        return offset === byteLength ? output : output.subarray(0, offset);\n    }\n    function joinChunks(chunks) {\n        const joined = new Uint8Array(chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0));\n        let offset = 0;\n        for (const chunk of chunks) {\n            joined.set(chunk, offset);\n            offset += chunk.byteLength;\n        }\n        return joined;\n    }\n    function readPngHeader(input, bitDepth) {\n        const bytes = input instanceof Uint8Array ? input : new Uint8Array(input);\n        const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);\n        if (bytes.byteLength < 8 ||\n            PNG_SIGNATURE.some((value, index) => bytes[index] !== value)) {\n            throw new RangeError(\"Not a PNG file.\");\n        }\n        let offset = 8;\n        let width = 0;\n        let height = 0;\n        let sawHeader = false;\n        let sawEnd = false;\n        const idat = [];\n        while (offset + 12 <= bytes.byteLength) {\n            const length = view.getUint32(offset);\n            const type = view.getUint32(offset + 4);\n            const dataStart = offset + 8;\n            const dataEnd = dataStart + length;\n            if (dataEnd + 4 > bytes.byteLength) {\n                throw new RangeError(\"PNG file is truncated.\");\n            }\n            if (type === 0x49484452) {\n                // IHDR\n                if (length !== 13)\n                    throw new RangeError(\"PNG header is malformed.\");\n                width = view.getUint32(dataStart);\n                height = view.getUint32(dataStart + 4);\n                const depth = bytes[dataStart + 8];\n                const colorType = bytes[dataStart + 9];\n                if (bytes[dataStart + 10] !== 0 || bytes[dataStart + 11] !== 0) {\n                    throw new RangeError(\"PNG uses an unknown compression or filter.\");\n                }\n                if (bytes[dataStart + 12] !== 0) {\n                    throw new RangeError(\"Interlaced PNGs are not supported.\");\n                }\n                if (colorType !== COLOR_TYPE_GRAY || depth !== bitDepth) {\n                    throw new RangeError(`Expected a ${bitDepth}-bit grayscale PNG, got bit depth ${depth} with colour type ${colorType}.`);\n                }\n                sawHeader = true;\n            }\n            else if (type === 0x49444154) {\n                // IDAT\n                idat.push(bytes.subarray(dataStart, dataEnd));\n            }\n            else if (type === 0x49454e44) {\n                // IEND\n                sawEnd = true;\n                break;\n            }\n            offset = dataEnd + 4;\n        }\n        if (!sawHeader)\n            throw new RangeError(\"PNG has no header.\");\n        if (!sawEnd)\n            throw new RangeError(\"PNG file is truncated.\");\n        if (width === 0 || height === 0 || width * height > MAX_PNG_PIXELS) {\n            throw new RangeError(`PNG size ${width}x${height} is not supported.`);\n        }\n        if (idat.length === 0)\n            throw new RangeError(\"PNG has no image data.\");\n        return { height, idat, width };\n    }\n    function checkInflatedLength(raw, expected) {\n        if (raw.byteLength !== expected) {\n            throw new RangeError(\"PNG image data is shorter than its header says.\");\n        }\n    }\n    /*\n     * Undoes the row filters of a 16-bit grayscale image and writes host-order\n     * samples, in one pass. Each filter runs on bytes, and the two bytes of a\n     * sample never carry into each other, so the loops keep a sample's high and\n     * low bytes apart and join them only for the store. The previous row is read\n     * back from the output, which already holds it unfiltered; the first row reads\n     * a row of zeros, which is what PNG defines above the image.\n     *\n     * Each filter is its own small function with one loop, called once per row,\n     * so engines compile each loop on its own: SpiderMonkey slowed a Paeth loop\n     * that shared a function with the other filters.\n     */\n    function unfilterGray16(raw, width, height, out) {\n        const rowBytes = width * 2 + 1;\n        const zeroRow = new Uint16Array(width);\n        for (let y = 0; y < height; y += 1) {\n            const filter = raw[y * rowBytes];\n            const unfilterRow = ROW_FILTERS_16[filter];\n            if (!unfilterRow) {\n                throw new RangeError(`PNG row ${y} has unknown filter ${filter}.`);\n            }\n            const o = y * width;\n            unfilterRow(raw, y * rowBytes + 1, out, o, o + width, y === 0 ? zeroRow : out, y === 0 ? 0 : o - width);\n        }\n    }\n    function noneRow16(raw, s, out, o, end) {\n        for (let i = o; i < end; i += 1, s += 2) {\n            out[i] = (raw[s] << 8) | raw[s + 1];\n        }\n    }\n    function subRow16(raw, s, out, o, end) {\n        let hi = 0;\n        let lo = 0;\n        for (let i = o; i < end; i += 1, s += 2) {\n            hi = (raw[s] + hi) & 0xff;\n            lo = (raw[s + 1] + lo) & 0xff;\n            out[i] = (hi << 8) | lo;\n        }\n    }\n    function upRow16(raw, s, out, o, end, prev, p) {\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            out[i] = (((raw[s] + (up >> 8)) & 0xff) << 8) | ((raw[s + 1] + up) & 0xff);\n        }\n    }\n    function averageRow16(raw, s, out, o, end, prev, p) {\n        let hi = 0;\n        let lo = 0;\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            hi = (raw[s] + ((hi + (up >> 8)) >> 1)) & 0xff;\n            lo = (raw[s + 1] + ((lo + (up & 0xff)) >> 1)) & 0xff;\n            out[i] = (hi << 8) | lo;\n        }\n    }\n    /** Paeth: per byte, whichever of left, up and up-left is closest to left + up - up-left. */\n    function paethRow16(raw, s, out, o, end, prev, p) {\n        let hi = 0;\n        let lo = 0;\n        let upLeftHi = 0;\n        let upLeftLo = 0;\n        for (let i = o; i < end; i += 1, s += 2, p += 1) {\n            const up = prev[p];\n            const upHi = up >> 8;\n            const upLo = up & 0xff;\n            let pa = Math.abs(upHi - upLeftHi);\n            let pb = Math.abs(hi - upLeftHi);\n            let pc = Math.abs(hi + upHi - upLeftHi - upLeftHi);\n            hi =\n                (raw[s] + (pa <= pb && pa <= pc ? hi : pb <= pc ? upHi : upLeftHi)) &\n                    0xff;\n            pa = Math.abs(upLo - upLeftLo);\n            pb = Math.abs(lo - upLeftLo);\n            pc = Math.abs(lo + upLo - upLeftLo - upLeftLo);\n            lo =\n                (raw[s + 1] + (pa <= pb && pa <= pc ? lo : pb <= pc ? upLo : upLeftLo)) &\n                    0xff;\n            out[i] = (hi << 8) | lo;\n            upLeftHi = upHi;\n            upLeftLo = upLo;\n        }\n    }\n    /** Indexed by the PNG filter type byte: None, Sub, Up, Average, Paeth. */\n    const ROW_FILTERS_16 = [\n        noneRow16,\n        subRow16,\n        upRow16,\n        averageRow16,\n        paethRow16,\n    ];\n    function unfilterGray8(raw, width, height, out) {\n        const rowBytes = width + 1;\n        const zeroRow = new Uint8Array(width);\n        for (let y = 0; y < height; y += 1) {\n            const filter = raw[y * rowBytes];\n            const unfilterRow = ROW_FILTERS_8[filter];\n            if (!unfilterRow) {\n                throw new RangeError(`PNG row ${y} has unknown filter ${filter}.`);\n            }\n            const o = y * width;\n            unfilterRow(raw, y * rowBytes + 1, out, o, o + width, y === 0 ? zeroRow : out, y === 0 ? 0 : o - width);\n        }\n    }\n    function noneRow8(raw, s, out, o, end) {\n        out.set(raw.subarray(s, s + end - o), o);\n    }\n    function subRow8(raw, s, out, o, end) {\n        let left = 0;\n        for (let i = o; i < end; i += 1, s += 1) {\n            left = (raw[s] + left) & 0xff;\n            out[i] = left;\n        }\n    }\n    function upRow8(raw, s, out, o, end, prev, p) {\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            out[i] = (raw[s] + prev[p]) & 0xff;\n        }\n    }\n    function averageRow8(raw, s, out, o, end, prev, p) {\n        let left = 0;\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            left = (raw[s] + ((left + prev[p]) >> 1)) & 0xff;\n            out[i] = left;\n        }\n    }\n    function paethRow8(raw, s, out, o, end, prev, p) {\n        let left = 0;\n        let upLeft = 0;\n        for (let i = o; i < end; i += 1, s += 1, p += 1) {\n            const up = prev[p];\n            const pa = Math.abs(up - upLeft);\n            const pb = Math.abs(left - upLeft);\n            const pc = Math.abs(left + up - upLeft - upLeft);\n            left =\n                (raw[s] + (pa <= pb && pa <= pc ? left : pb <= pc ? up : upLeft)) & 0xff;\n            out[i] = left;\n            upLeft = up;\n        }\n    }\n    const ROW_FILTERS_8 = [\n        noneRow8,\n        subRow8,\n        upRow8,\n        averageRow8,\n        paethRow8,\n    ];\n    /**\n     * WebGL unpacks rows on four-byte boundaries, so an odd width of two-byte\n     * texels needs one padding texel per row.\n     */\n    function padRows(values, width, height) {\n        const textureWidth = width + 1;\n        const padded = new Uint16Array(textureWidth * height);\n        for (let y = 0; y < height; y += 1) {\n            padded.set(values.subarray(y * width, (y + 1) * width), y * textureWidth);\n        }\n        return { bytes: new Uint8Array(padded.buffer), textureWidth };\n    }\n\n    /**\n     * Answers one decode request, in the worker or on the main thread: the reply\n     * and the buffers it can transfer. A file that does not decode is an error\n     * reply, never a thrown exception, so the caller can tell a bad file from a\n     * broken worker.\n     */\n    async function decodeDepthPreparationRequest(request) {\n        const requestId = request.requestId ?? 0;\n        try {\n            if (request.bitDepth === 8) {\n                const decoded = await decodePng8Gray(request.bytes);\n                return {\n                    response: {\n                        bitDepth: 8,\n                        height: decoded.height,\n                        requestId,\n                        type: DepthPreparationWorkerMessageType.Complete,\n                        values: decoded.values.buffer,\n                        width: decoded.width,\n                    },\n                    transfer: [decoded.values.buffer],\n                };\n            }\n            const decoded = await decodePng16(request.bytes, {\n                padRowsForWebGl: request.padRowsForWebGl,\n            });\n            const padded = decoded.paddedUpload;\n            const decimated = request.decimateBy !== undefined && request.decimateBy >= 2\n                ? decimateDepthUpload(decoded.values, decoded.width, decoded.height, Math.floor(request.decimateBy), request.padRowsForWebGl === true)\n                : null;\n            const transfer = [decoded.values.buffer];\n            if (padded)\n                transfer.push(padded.bytes.buffer);\n            if (decimated)\n                transfer.push(decimated.bytes.buffer);\n            return {\n                response: {\n                    bitDepth: 16,\n                    decimatedUpload: decimated\n                        ? { ...decimated, bytes: decimated.bytes.buffer }\n                        : undefined,\n                    height: decoded.height,\n                    paddedUpload: padded\n                        ? {\n                            bytes: padded.bytes.buffer,\n                            textureWidth: padded.textureWidth,\n                        }\n                        : undefined,\n                    requestId,\n                    type: DepthPreparationWorkerMessageType.Complete,\n                    values: decoded.values.buffer,\n                    width: decoded.width,\n                },\n                transfer,\n            };\n        }\n        catch (error) {\n            return {\n                response: {\n                    error: error instanceof Error ? error.message : \"Unable to decode depth.\",\n                    requestId,\n                    type: DepthPreparationWorkerMessageType.Error,\n                },\n                transfer: [],\n            };\n        }\n    }\n    /**\n     * Depth for a texture `factor` times smaller on each side, each texel the\n     * sample at its block's centre, as the renderer decimates a map larger than\n     * the GPU allows.\n     */\n    function decimateDepthUpload(values, width, height, factor, padRowsForWebGl) {\n        if (factor < 2)\n            return null;\n        const targetWidth = Math.ceil(width / factor);\n        const targetHeight = Math.ceil(height / factor);\n        // WebGL reads two-byte texels in rows of four bytes.\n        const textureWidth = padRowsForWebGl\n            ? targetWidth + (targetWidth % 2)\n            : targetWidth;\n        const texels = new Uint16Array(textureWidth * targetHeight);\n        const columns = new Uint32Array(targetWidth);\n        for (let x = 0; x < targetWidth; x += 1) {\n            columns[x] = Math.min(width - 1, Math.floor(((x + 0.5) * width) / targetWidth));\n        }\n        for (let y = 0; y < targetHeight; y += 1) {\n            const row = Math.min(height - 1, Math.floor(((y + 0.5) * height) / targetHeight)) *\n                width;\n            const target = y * textureWidth;\n            for (let x = 0; x < targetWidth; x += 1) {\n                texels[target + x] = values[row + columns[x]];\n            }\n        }\n        return {\n            bytes: new Uint8Array(texels.buffer),\n            height: targetHeight,\n            textureWidth,\n            width: targetWidth,\n        };\n    }\n\n    /** Formats whose first plane is 8-bit luma, which is the code as written. */\n    const PLANAR_8_BIT_FORMATS = new Set([\n        \"I420\",\n        \"I420A\",\n        \"I422\",\n        \"I422A\",\n        \"I444\",\n        \"I444A\",\n        \"NV12\",\n    ]);\n    const RGB_FORMATS = new Set([\"RGBA\", \"RGBX\", \"BGRA\", \"BGRX\"]);\n    /**\n     * Copies a decoded preview frame's luma codes out of it, mapped through\n     * `correction` when one is given. The frame stays open; its owner closes\n     * it.\n     */\n    async function readVideoFrameLuma(frame, scratch, correction = null) {\n        const rect = frame.visibleRect ?? {\n            height: frame.codedHeight,\n            width: frame.codedWidth,\n            x: 0,\n            y: 0,\n        };\n        const { width, height } = rect;\n        const format = frame.format;\n        const planar = format !== null && PLANAR_8_BIT_FORMATS.has(format);\n        let bytes;\n        let plane;\n        if (planar || (format !== null && RGB_FORMATS.has(format))) {\n            const size = frame.allocationSize({ rect });\n            if (scratch.buffer.byteLength < size)\n                scratch.buffer = new ArrayBuffer(size);\n            [plane] = await frame.copyTo(scratch.buffer, { rect });\n            bytes = new Uint8Array(scratch.buffer);\n        }\n        else {\n            // A frame in a layout no copy can read is drawn to a canvas, which\n            // converts it to RGB as the browser sees fit.\n            bytes = drawFrameRgba(frame, width, height);\n        }\n        const luma = new Uint8Array(width * height);\n        const stride = plane?.stride ?? (planar ? width : width * 4);\n        const offset = plane?.offset ?? 0;\n        if (!planar) {\n            // Every RGB layout keeps green second, and luma with neutral chroma\n            // converts to three equal channels.\n            for (let y = 0; y < height; y += 1) {\n                const row = offset + y * stride + 1;\n                const target = y * width;\n                for (let x = 0; x < width; x += 1) {\n                    luma[target + x] = bytes[row + x * 4];\n                }\n            }\n        }\n        else if (stride === width) {\n            luma.set(bytes.subarray(offset, offset + width * height));\n        }\n        else {\n            for (let y = 0; y < height; y += 1) {\n                luma.set(bytes.subarray(offset + y * stride, offset + y * stride + width), y * width);\n            }\n        }\n        if (correction) {\n            for (let index = 0; index < luma.length; index += 1) {\n                luma[index] = correction[luma[index]];\n            }\n        }\n        return { height, luma, path: planar ? \"plane\" : \"rgb\", width };\n    }\n    function drawFrameRgba(frame, width, height) {\n        const canvas = new OffscreenCanvas(width, height);\n        const context = canvas.getContext(\"2d\", { willReadFrequently: true });\n        if (!context) {\n            throw new Error(\"The depth preview needs a 2D canvas to read this frame.\");\n        }\n        context.drawImage(frame, 0, 0, width, height);\n        const { data } = context.getImageData(0, 0, width, height);\n        return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);\n    }\n\n    const workerScope = globalThis;\n    workerScope.addEventListener(\"message\", (event) => {\n        const message = event.data;\n        if (message.type === HeatmapPreparationWorkerMessageType.Prepare) {\n            prepareHeatmap(message);\n            return;\n        }\n        if (message.type === DepthPreparationWorkerMessageType.Decode) {\n            void decodeDepthFrame(message);\n            return;\n        }\n        if (message.type === DepthPreparationWorkerMessageType.PreviewLuma) {\n            void copyPreviewLuma(message);\n            return;\n        }\n        if (message.type !== MaskPreparationWorkerMessageType.Prepare) {\n            return;\n        }\n        prepareMaskFrame(message);\n    });\n    function prepareHeatmap(message) {\n        try {\n            const data = colorizeHeatmap(message.map, message.renderer);\n            const imageData = new ImageData(data, message.map.width, message.map.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    imageBitmap,\n                    requestId: message.requestId,\n                    type: HeatmapPreparationWorkerMessageType.Complete,\n                }, [imageBitmap]);\n                return;\n            }\n            workerScope.postMessage({\n                imageData,\n                requestId: message.requestId,\n                type: HeatmapPreparationWorkerMessageType.Complete,\n            }, [imageData.data.buffer]);\n        }\n        catch (error) {\n            workerScope.postMessage({\n                error: error instanceof Error ? error.message : \"Unable to prepare heatmap.\",\n                requestId: message.requestId,\n                type: HeatmapPreparationWorkerMessageType.Error,\n            });\n        }\n    }\n    /** Decoding waits on the platform's inflate, so replies arrive out of order. */\n    async function decodeDepthFrame(message) {\n        const { response, transfer } = await decodeDepthPreparationRequest(message);\n        workerScope.postMessage(response, transfer);\n    }\n    const previewLumaScratch = {\n        buffer: new ArrayBuffer(0),\n    };\n    /** Frames arrive in order and are copied in order, through one scratch. */\n    let previewLumaQueue = Promise.resolve();\n    function copyPreviewLuma(message) {\n        previewLumaQueue = previewLumaQueue.then(async () => {\n            try {\n                const copied = await readVideoFrameLuma(message.frame, previewLumaScratch, message.correction);\n                workerScope.postMessage({\n                    height: copied.height,\n                    luma: copied.luma.buffer,\n                    path: copied.path,\n                    requestId: message.requestId,\n                    type: DepthPreparationWorkerMessageType.PreviewLumaComplete,\n                    width: copied.width,\n                }, [copied.luma.buffer]);\n            }\n            catch (error) {\n                workerScope.postMessage({\n                    error: error instanceof Error\n                        ? error.message\n                        : \"Unable to copy the depth preview frame.\",\n                    requestId: message.requestId,\n                    type: DepthPreparationWorkerMessageType.Error,\n                });\n            }\n            finally {\n                message.frame.close();\n            }\n        });\n        return previewLumaQueue;\n    }\n    function prepareMaskFrame(message) {\n        try {\n            const regionMaskCoverage = createRegionMaskCoverageFrame(message.job.instructions);\n            const coverageTransfers = getRegionMaskCoverageTransfers(regionMaskCoverage);\n            const idMaskFrame = createIdMaskRasterFrame(message.job.instructions, message.job.maxRasterWidth);\n            if (idMaskFrame) {\n                const screenStrokes = createMaskScreenStrokes(message.job.instructions, idMaskFrame.width, idMaskFrame.height, idMaskFrame.data);\n                const strokeTransfers = screenStrokes?.flatMap(({ paths }) => paths.map((path) => path.buffer)) ?? [];\n                workerScope.postMessage({\n                    artifactKind: PreparedMaskFrameKind.IdMask,\n                    fillPalette: idMaskFrame.fillPalette,\n                    hasStroke: idMaskFrame.hasStroke,\n                    height: idMaskFrame.height,\n                    key: message.job.key,\n                    maxStrokeWidth: idMaskFrame.maxStrokeWidth,\n                    raster: idMaskFrame.data,\n                    screenStrokes,\n                    regionMaskCoverage,\n                    requestId: message.requestId,\n                    sourceWidth: idMaskFrame.sourceWidth,\n                    strokePalette: idMaskFrame.strokePalette,\n                    strokeAlignments: idMaskFrame.strokeAlignments,\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.strokeAlignments\n                        ? [idMaskFrame.strokeAlignments.buffer]\n                        : []),\n                    idMaskFrame.strokeWidths.buffer,\n                    ...strokeTransfers,\n                    ...coverageTransfers,\n                ]);\n                return;\n            }\n            const compositedFrame = compositeMaskFrame(message.job.instructions, message.job.displayWidth);\n            if (!compositedFrame && !regionMaskCoverage) {\n                workerScope.postMessage({\n                    key: message.job.key,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Empty,\n                });\n                return;\n            }\n            const preparedPixels = compositedFrame ?? createTransparentCoverageCarrier();\n            const imageData = new ImageData(preparedPixels.data, preparedPixels.width, preparedPixels.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            const idMaskPlane = createIdMaskPlane(message.job.instructions, message.job.maxRasterWidth);\n            const idMaskTransfers = idMaskPlane ? [idMaskPlane.data.buffer] : [];\n            const screenStrokes = createMaskScreenStrokes(message.job.instructions, preparedPixels.width, preparedPixels.height);\n            const strokeTransfers = screenStrokes?.flatMap(({ paths }) => paths.map((path) => path.buffer)) ??\n                [];\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    idMaskPlane,\n                    imageBitmap,\n                    screenStrokes,\n                    key: message.job.key,\n                    regionMaskCoverage,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                }, [\n                    imageBitmap,\n                    ...idMaskTransfers,\n                    ...strokeTransfers,\n                    ...coverageTransfers,\n                ]);\n                return;\n            }\n            workerScope.postMessage({\n                idMaskPlane,\n                imageData,\n                screenStrokes,\n                key: message.job.key,\n                regionMaskCoverage,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Complete,\n            }, [\n                imageData.data.buffer,\n                ...idMaskTransfers,\n                ...strokeTransfers,\n                ...coverageTransfers,\n            ]);\n        }\n        catch (error) {\n            workerScope.postMessage({\n                error: error instanceof Error\n                    ? error.message\n                    : \"Unable to prepare mask frame.\",\n                key: message.job.key,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Error,\n            });\n        }\n    }\n    /**\n     * A frame that carries only region coverage has nothing to composite, and the\n     * RGBA branch still has to produce an artifact for the coverage to ride on.\n     */\n    function createTransparentCoverageCarrier() {\n        return {\n            data: new Uint8ClampedArray(new ArrayBuffer(4)),\n            height: 1,\n            width: 1,\n        };\n    }\n    function getRegionMaskCoverageTransfers(coverage) {\n        return coverage?.entries.map(({ data }) => data.buffer) ?? [];\n    }\n    function createImageBitmapFromImageData(imageData) {\n        if (typeof OffscreenCanvas === \"undefined\") {\n            return null;\n        }\n        const canvas = new OffscreenCanvas(imageData.width, imageData.height);\n        const context = canvas.getContext(\"2d\");\n        if (!context) {\n            return null;\n        }\n        context.putImageData(imageData, 0, 0);\n        return canvas.transferToImageBitmap();\n    }\n\n})();";
 
 const DEFAULT_WORKER_NAME = "supervision-js-render-preparation";
 let defaultWorkerUrl;
@@ -3890,11 +3890,11 @@ function describePreviewDecoding(decoding) {
     return `This browser's ${decoding.hardwareAcceleration} decoder changes depth preview codes: ${probe.mismatchedCodes} of ${probe.judgedCodes} come back different, by up to ${probe.maxError} (${probe.lumaPath ?? "unknown"} path)${corrected}. Preview depth during playback is off by up to ${decoding.correction ? decoding.residualError : probe.maxError} preview steps; exact depth at rest is not affected.`;
 }
 async function openDefaultPreviewTrack(url, options) {
-    const { openDepthPreviewTrack } = await import('./depth-preview-track-BvgwNEE9.js').then(function (n) { return n.d; });
+    const { openDepthPreviewTrack } = await import('./depth-preview-track-BEag1ZWF.js').then(function (n) { return n.d; });
     return openDepthPreviewTrack(url, options);
 }
 async function chooseDefaultPreviewDecoding(levels) {
-    const { chooseDepthPreviewDecoding } = await import('./depth-preview-probe-DG7McQEN.js');
+    const { chooseDepthPreviewDecoding } = await import('./depth-preview-probe-BG0k-33U.js');
     return chooseDepthPreviewDecoding(levels);
 }
 /**
@@ -5252,7 +5252,7 @@ function cropCoverageMask(detectionIndex, decodedMask) {
     }
     return { data, detectionIndex, height, width, x: minX, y: minY };
 }
-function compositeMaskFrame(instructions) {
+function compositeMaskFrame(instructions, displayWidth) {
     const maskInstructions = materializeMaskInstructions(instructions);
     if (maskInstructions.length === 0) {
         return undefined;
@@ -5260,18 +5260,22 @@ function compositeMaskFrame(instructions) {
     const width = Math.max(...maskInstructions.map(({ mask }) => mask.width));
     const height = Math.max(...maskInstructions.map(({ mask }) => mask.height));
     const data = new Uint8ClampedArray(new ArrayBuffer(width * height * 4));
+    const strokeCoverage = maskInstructions.some(({ stroke }) => stroke && stroke.width > 0 && stroke.alpha > 0)
+        ? new Uint8Array(width * height)
+        : undefined;
+    const strokeKernels = new Map();
     for (const instruction of maskInstructions) {
-        compositeInstruction(data, width, instruction);
+        compositeInstruction(data, width, instruction, strokeCoverage, strokeKernels, displayWidth);
     }
     return { data, height, width };
 }
 function createIdMaskRasterFrame(instructions, maxRasterWidth) {
     try {
-        return createIdMaskFrame(materializeMaskInstructions(instructions).map((instruction) => instruction.stroke?.widthUnit === "screen"
+        return createIdMaskFrame(instructions
+            .filter((instruction) => instruction.visible !== false)
+            .map((instruction) => instruction.stroke?.widthUnit
             ? { ...instruction, stroke: undefined }
-            : instruction), {
-            maxWidth: maxRasterWidth,
-        });
+            : instruction), { maxWidth: maxRasterWidth });
     }
     catch {
         // The id raster is the fast path, not the only one: answering with nothing
@@ -5301,25 +5305,29 @@ function createIdMaskPlane(instructions, maxRasterWidth) {
         ? { data: frame.data, height: frame.height, width: frame.width }
         : undefined;
 }
-function compositeInstruction(rgba, canvasWidth, instruction) {
+function compositeInstruction(rgba, canvasWidth, instruction, strokeCoverage, strokeKernels, displayWidth) {
     const fill = resolveRgbaColor(instruction.color, instruction.alpha);
     const bounds = compositeMaskFill(rgba, canvasWidth, instruction.mask, fill);
     if (instruction.stroke &&
-        instruction.stroke.widthUnit !== "screen" &&
-        bounds) {
-        compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, instruction.stroke);
+        instruction.stroke.widthUnit === undefined &&
+        bounds &&
+        strokeCoverage) {
+        compositeMaskStroke(rgba, canvasWidth, decodeCompressedRleMask(instruction.mask), bounds, {
+            ...instruction.stroke,
+            width: resolveIdMaskStrokeTexels(instruction.stroke.width, displayWidth ?? canvasWidth, canvasWidth, instruction.stroke.alignment),
+        }, strokeCoverage, strokeKernels);
     }
 }
 function createMaskScreenStrokes(instructions, width, height, preparedRaster) {
     const outlined = instructions.filter(({ visible, stroke }) => visible !== false &&
-        stroke?.widthUnit === "screen" &&
+        stroke?.widthUnit !== undefined &&
         stroke.width > 0 &&
         stroke.alpha > 0);
     if (outlined.length === 0)
         return undefined;
-    const masks = materializeMaskInstructions(instructions);
     const raster = preparedRaster ?? new Uint32Array(width * height);
     if (!preparedRaster) {
+        const masks = materializeMaskInstructions(instructions);
         for (const { detectionIndex, mask } of masks) {
             const counts = decodeCompressedRleCounts(mask.counts);
             let offset = 0;
@@ -5342,6 +5350,8 @@ function createMaskScreenStrokes(instructions, width, height, preparedRaster) {
         alpha: stroke.alpha,
         color: stroke.color,
         width: stroke.width,
+        widthUnit: stroke.widthUnit,
+        alignment: stroke.alignment,
         paths: paths.get(detectionIndex + 1) ?? [],
     }));
 }
@@ -5407,31 +5417,110 @@ function compositeMaskFill(rgba, canvasWidth, mask, fill) {
     }
     return maxX < minX || maxY < minY ? undefined : { maxX, maxY, minX, minY };
 }
-function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke) {
-    const width = Math.round(stroke.width);
-    if (width <= 0) {
-        return;
+function createStrokeKernel(width, alignment) {
+    const innerFraction = alignment === StrokeAlignment.Inside
+        ? 1
+        : alignment === StrokeAlignment.Center
+            ? 0.5
+            : 0;
+    const inside = [];
+    const outside = [];
+    const radius = Math.min(MAX_ID_MASK_STROKE_WIDTH + 1, Math.ceil(width * Math.max(innerFraction, 1 - innerFraction) + 0.5));
+    const clamp = (value) => Math.max(0, Math.min(1, value));
+    const coverage = (signed) => Math.round(255 *
+        (clamp(0.5 + width * (1 - innerFraction) - signed) -
+            clamp(0.5 - width * innerFraction - signed)));
+    for (let y = -radius; y <= radius; y += 1) {
+        for (let x = -radius; x <= radius; x += 1) {
+            if (x === 0 && y === 0)
+                continue;
+            const distance = Math.max(Math.abs(x) - 0.5, Math.abs(y) - 0.5, 0);
+            const innerCoverage = coverage(-distance);
+            const outerCoverage = coverage(distance);
+            if (innerCoverage > 0)
+                inside.push([x, y, innerCoverage]);
+            if (outerCoverage > 0)
+                outside.push([x, y, outerCoverage]);
+        }
     }
-    const strokeColor = resolveRgbaColor(stroke.color, stroke.alpha);
+    return { inside, outside, radius };
+}
+function compositeMaskStroke(rgba, canvasWidth, decodedMask, bounds, stroke, coverage, kernels) {
+    if (stroke.width <= 0 || stroke.alpha <= 0)
+        return;
+    const key = `${stroke.width}:${stroke.alignment}`;
+    let kernel = kernels.get(key);
+    if (!kernel) {
+        kernel = createStrokeKernel(stroke.width, stroke.alignment);
+        kernels.set(key, kernel);
+    }
+    const visitedAir = kernel.inside.length > 0 ? new Set() : undefined;
+    const mark = (sourceX, sourceY, offsets, foreground) => {
+        for (const [dx, dy, value] of offsets) {
+            const x = sourceX + dx;
+            const y = sourceY + dy;
+            if (isOutsideMaskBounds(decodedMask, x, y) ||
+                isMaskPixel(decodedMask, x, y) !== foreground)
+                continue;
+            const index = y * canvasWidth + x;
+            coverage[index] = Math.max(coverage[index], value);
+        }
+    };
     for (let y = bounds.minY; y <= bounds.maxY; y += 1) {
         for (let x = bounds.minX; x <= bounds.maxX; x += 1) {
             if (!isMaskPixel(decodedMask, x, y) ||
-                !isBoundaryPixel(decodedMask, x, y)) {
+                !isBoundaryPixel(decodedMask, x, y))
                 continue;
-            }
-            for (let offsetY = -width; offsetY <= width; offsetY += 1) {
-                for (let offsetX = -width; offsetX <= width; offsetX += 1) {
-                    const strokeX = x + offsetX;
-                    const strokeY = y + offsetY;
-                    if (isOutsideMaskBounds(decodedMask, strokeX, strokeY) ||
-                        isMaskPixel(decodedMask, strokeX, strokeY)) {
+            mark(x, y, kernel.outside, false);
+            if (!visitedAir)
+                continue;
+            for (let dy = -1; dy <= 1; dy += 1) {
+                for (let dx = -1; dx <= 1; dx += 1) {
+                    const airX = x + dx;
+                    const airY = y + dy;
+                    if (isOutsideMaskBounds(decodedMask, airX, airY) ||
+                        isMaskPixel(decodedMask, airX, airY))
                         continue;
-                    }
-                    writePixel(rgba, canvasWidth, strokeX, strokeY, strokeColor);
+                    const airIndex = airY * decodedMask.width + airX;
+                    if (visitedAir.has(airIndex))
+                        continue;
+                    visitedAir.add(airIndex);
+                    mark(airX, airY, kernel.inside, true);
                 }
             }
         }
     }
+    const color = resolveRgbaColor(stroke.color, stroke.alpha);
+    for (let y = Math.max(0, bounds.minY - kernel.radius); y <= Math.min(decodedMask.height - 1, bounds.maxY + kernel.radius); y += 1) {
+        for (let x = Math.max(0, bounds.minX - kernel.radius); x <= Math.min(decodedMask.width - 1, bounds.maxX + kernel.radius); x += 1) {
+            const index = y * canvasWidth + x;
+            const amount = coverage[index] / 255;
+            if (amount <= 0)
+                continue;
+            coverage[index] = 0;
+            const offset = index * 4;
+            const alpha = rgba[offset + 3] * (1 - amount) + color.alpha * amount;
+            rgba[offset] =
+                alpha > 0
+                    ? (rgba[offset] * rgba[offset + 3] * (1 - amount) +
+                        color.red * color.alpha * amount) /
+                        alpha
+                    : 0;
+            rgba[offset + 1] =
+                alpha > 0
+                    ? (rgba[offset + 1] * rgba[offset + 3] * (1 - amount) +
+                        color.green * color.alpha * amount) /
+                        alpha
+                    : 0;
+            rgba[offset + 2] =
+                alpha > 0
+                    ? (rgba[offset + 2] * rgba[offset + 3] * (1 - amount) +
+                        color.blue * color.alpha * amount) /
+                        alpha
+                    : 0;
+            rgba[offset + 3] = alpha;
+        }
+    }
 }
 function isBoundaryPixel(mask, x, y) {
     for (let offsetY = -1; offsetY <= 1; offsetY += 1) {
@@ -5615,7 +5704,7 @@ function createMainThreadMaskFramePreparer(workerStatus, message = null) {
             if (idMaskFrame) {
                 return idMaskFrame;
             }
-            const compositedFrame = compositeMaskFrame(job.instructions);
+            const compositedFrame = compositeMaskFrame(job.instructions, job.displayWidth);
             if (!compositedFrame && !regionMaskCoverage) {
                 return undefined;
             }
@@ -5678,6 +5767,7 @@ function createPreparedIdMaskFrame(job, regionMaskCoverage) {
         regionMaskCoverage,
         sourceWidth: frame.sourceWidth,
         strokePalette: frame.strokePalette,
+        strokeAlignments: frame.strokeAlignments,
         strokeWidths: frame.strokeWidths,
         width: frame.width,
     };
@@ -5803,6 +5893,7 @@ function createPreparedFrameFromWorkerResponse(message) {
             screenStrokes: message.screenStrokes,
             sourceWidth: message.sourceWidth,
             strokePalette: message.strokePalette,
+            strokeAlignments: message.strokeAlignments,
             strokeWidths: message.strokeWidths,
             width: message.width,
         };
@@ -6013,7 +6104,8 @@ function createPreparedRenderWindow(options) {
             ? maskFrame.raster.byteLength +
                 maskFrame.fillPalette.byteLength +
                 maskFrame.strokePalette.byteLength +
-                maskFrame.strokeWidths.byteLength
+                maskFrame.strokeWidths.byteLength +
+                (maskFrame.strokeAlignments?.byteLength ?? 0)
             : pixels * 4 + (maskFrame.idMaskPlane?.data.byteLength ?? 0);
         const coverageBytes = maskFrame.regionMaskCoverage?.entries.reduce((total, entry) => total + entry.data.byteLength, 0) ?? 0;
         const backingBytes = options.resolveMaskFrameBackingBytes
@@ -6071,7 +6163,7 @@ function createPreparedRenderWindow(options) {
     let generation = 0;
     let preparationProgress = 0;
     let nextArtifactRevision = 0;
-    const artifactRevisions = new WeakMap();
+    const artifactMetadata = new WeakMap();
     const largestMaskFrameBytesByTier = new Map();
     const preparedMaskFrames = new Map();
     /** Keys whose prepared raster is the coarse tier and owed a fine cook once settled. */
@@ -6095,15 +6187,23 @@ function createPreparedRenderWindow(options) {
             return false;
         }
         observeMaskFrame(frame, key);
-        const tier = scheduleOptions.tier ?? getRequestedRasterTier();
+        let tier = scheduleOptions.tier ?? getRequestedRasterTier();
         if (emptyMaskFrameKeys.has(key)) {
             return false;
         }
-        if (preparedMaskFrames.has(key)) {
+        const prepared = preparedMaskFrames.get(key);
+        if (prepared) {
+            const metadata = artifactMetadata.get(prepared);
+            const owedDisplayWidth = prepared.kind === PreparedMaskFrameKind.RgbaImage &&
+                metadata?.hasStroke === true &&
+                metadata.displayWidth !== options.resolveMaskDisplayWidth?.();
             const owedFine = coarseMaskFrameKeys.has(key) && tier === PreparedRasterTier.Fine;
-            if (!owedFine) {
+            if (!owedFine && !owedDisplayWidth) {
                 return false;
             }
+            if (!coarseMaskFrameKeys.has(key)) {
+                tier = PreparedRasterTier.Fine;
+            }
         }
         const pending = pendingMaskFrames.get(key);
         if (pending) {
@@ -6200,11 +6300,22 @@ function createPreparedRenderWindow(options) {
                 emitDiagnostics();
                 continue;
             }
+            const hasStroke = instructions.some((instruction) => instruction.visible !== false &&
+                instruction.stroke !== undefined &&
+                instruction.stroke.widthUnit === undefined &&
+                instruction.stroke.width > 0 &&
+                instruction.stroke.alpha > 0);
+            const displayWidth = options.resolveMaskDisplayWidth?.();
             void maskFramePreparer
                 .prepare({
+                displayWidth,
                 instructions,
                 key,
-                maxRasterWidth: resolveRasterWidthFor(job.tier),
+                maxRasterWidth: resolveRasterWidthFor(job.tier, instructions.reduce((width, instruction) => instruction.visible === false
+                    ? width
+                    : Math.max(width, instruction.mask !== undefined
+                        ? instruction.mask.width
+                        : instruction.polygon.width), 0)),
             })
                 .then((maskFrame) => {
                 inFlightMaskFrames.delete(job);
@@ -6213,10 +6324,25 @@ function createPreparedRenderWindow(options) {
                 if (pendingJob === job) {
                     pendingMaskFrames.delete(key);
                 }
+                const staleDisplayWidth = maskFrame?.kind === PreparedMaskFrameKind.RgbaImage &&
+                    hasStroke &&
+                    displayWidth !== options.resolveMaskDisplayWidth?.();
                 if (isDestroyed ||
                     job.generation !== generation ||
-                    pendingJob !== job) {
+                    pendingJob !== job ||
+                    staleDisplayWidth) {
                     maskFrame?.close();
+                    if (staleDisplayWidth &&
+                        !isDestroyed &&
+                        job.generation === generation &&
+                        pendingJob === job) {
+                        scheduleMaskFrame(job.frame, job.mediaTime, {
+                            tier: upgradeToFine ? PreparedRasterTier.Fine : job.tier,
+                            priority: key === activeMaskFrame?.key
+                                ? PreparedRenderSchedulePriority.Active
+                                : PreparedRenderSchedulePriority.Background,
+                        });
+                    }
                     schedulePreparedTargetBatch();
                     emitDiagnostics();
                     pumpMaskFrameQueue();
@@ -6232,13 +6358,16 @@ function createPreparedRenderWindow(options) {
                 }
                 const previous = preparedMaskFrames.get(key);
                 if (previous) {
-                    // an upgrade: the coarse raster gives way to the fine one
                     releaseMaskFrame(key);
                     options.onMaskFrameEvicted?.(key);
                     previous.close();
                 }
                 preparedMaskFrames.set(key, maskFrame);
-                artifactRevisions.set(maskFrame, ++nextArtifactRevision);
+                artifactMetadata.set(maskFrame, {
+                    revision: ++nextArtifactRevision,
+                    displayWidth,
+                    hasStroke,
+                });
                 const bytes = chargeMaskFrame(key, maskFrame, job.tier);
                 if (job.tier === PreparedRasterTier.Coarse &&
                     maskFrameNeedsRasterSizeChange(key, maskFrame, PreparedRasterTier.Fine)) {
@@ -6523,7 +6652,7 @@ function createPreparedRenderWindow(options) {
         getArtifactRevision(mediaTime) {
             const frame = options.detectionTimeline.selectFrame(mediaTime);
             const artifact = frame && preparedMaskFrames.get(getFrameKey(frame));
-            return artifact ? (artifactRevisions.get(artifact) ?? 0) : 0;
+            return artifact ? (artifactMetadata.get(artifact)?.revision ?? 0) : 0;
         },
         invalidateRasterSize() {
             if (isDestroyed)
@@ -6557,6 +6686,13 @@ function createPreparedRenderWindow(options) {
                 }
             }
         },
+        invalidateMaskDisplayWidth() {
+            if (isDestroyed)
+                return;
+            if (activeMaskFrame) {
+                getFrame(activeMaskFrame.mediaTime, { forcePreparedWindow: true });
+            }
+        },
         getPreparationProgress() {
             return preparationProgress;
         },
@@ -6663,6 +6799,13 @@ function createPreparedRenderWindow(options) {
                 return;
             }
             clearPreparedMaskFrames();
+            if (!isDestroyed &&
+                maskStyle &&
+                activeMaskFrame &&
+                isPlayheadFast &&
+                settleTimer === undefined) {
+                armSettleTimer();
+            }
         },
         destroy() {
             if (isDestroyed) {
@@ -6751,8 +6894,11 @@ function createPreparedRenderWindow(options) {
         notifyReadinessWaiters();
         options.onPreparedWindowChange?.();
     }
-    function resolveRasterWidthFor(tier) {
-        const fine = options.resolveMaxRasterWidth?.();
+    function resolveRasterWidthFor(tier, sourceWidth) {
+        const cap = options.resolveMaxRasterWidth?.();
+        const fine = cap !== undefined && sourceWidth !== undefined && sourceWidth > 0
+            ? Math.min(cap, sourceWidth)
+            : cap;
         if (tier === PreparedRasterTier.Fine || fine === undefined) {
             return fine;
         }
@@ -6772,10 +6918,10 @@ function createPreparedRenderWindow(options) {
     function maskFrameNeedsRasterSizeChange(key, frame, tier = coarseMaskFrameKeys.has(key)
         ? PreparedRasterTier.Coarse
         : PreparedRasterTier.Fine) {
-        const maxWidth = resolveRasterWidthFor(tier);
         const sourceWidth = frame.kind === PreparedMaskFrameKind.IdMask
             ? frame.sourceWidth
             : frame.width;
+        const maxWidth = resolveRasterWidthFor(tier, sourceWidth);
         const width = maxWidth !== undefined && maxWidth > 0
             ? Math.min(sourceWidth, Math.max(1, Math.floor(maxWidth)))
             : sourceWidth;
@@ -9215,6 +9361,7 @@ async function createMediaRendererCore(options, providers) {
         ...presentation,
     });
     let currentPresentation = resolvePresentation({
+        annotationAntialiasing: options.annotationAntialiasing,
         annotationOverlayStyle: options.annotationOverlayStyle,
         backgroundColor: options.backgroundColor,
         boxStyle: options.boxStyle,
@@ -10089,6 +10236,7 @@ async function createMediaRendererCore(options, providers) {
         const mediaDimensions = runtimeState.recordMediaMetadata(metadata);
         mediaSize = mediaDimensions;
         mediaScene = await providers.createScene({
+            annotationAntialiasing: currentPresentation.annotationAntialiasing,
             annotationOverlayStyle: currentPresentation.annotationOverlayStyle,
             backgroundColor: currentPresentation.backgroundColor,
             boxStyle: currentPresentation.boxStyle,
@@ -11409,6 +11557,8 @@ function createPixiBoxLayer(options) {
     let retainedContainer = options.container;
     const retainedEntries = new Map();
     const invalidatedDetections = new Set();
+    const renderedRects = new Map();
+    let renderedBoxFrame;
     const usingRetainedEntries = Boolean(options.Container && options.Graphics);
     return {
         createContainer() {
@@ -11437,6 +11587,10 @@ function createPixiBoxLayer(options) {
                 boxGraphics?.clear();
             const activeDetectionIndexes = [];
             const activeKeys = new Set();
+            renderedRects.clear();
+            renderedBoxFrame = detectionFrame
+                ? { frame: detectionFrame, rects: renderedRects }
+                : undefined;
             if (boxStyle && detectionFrame) {
                 const orderedDetections = detectionFrame.detections
                     .map((detection, detectionIndex) => ({ detection, detectionIndex }))
@@ -11468,10 +11622,13 @@ function createPixiBoxLayer(options) {
                         display.position?.set?.(0, 0);
                         display.clear();
                         drawBoxInstruction(display, instruction, viewportScale);
+                        retainRenderedBox(detectionIndex, instruction);
                         invalidatedDetections.delete(key);
                     }
                     else {
                         drawBoxInstruction(boxGraphics, instruction, viewportScale);
+                        if (boxGraphics)
+                            retainRenderedBox(detectionIndex, instruction);
                     }
                 }
             }
@@ -11484,6 +11641,9 @@ function createPixiBoxLayer(options) {
             lastDrawnState = getBoxLayerState(detectionFrame, activeDetectionIndexes);
             return lastDrawnState;
         },
+        getRenderedBoxes() {
+            return renderedBoxFrame;
+        },
         setBoxStyle(nextBoxStyle) {
             if (nextBoxStyle === undefined) {
                 return;
@@ -11506,6 +11666,16 @@ function createPixiBoxLayer(options) {
             return true;
         },
     };
+    function retainRenderedBox(detectionIndex, instruction) {
+        if (instruction.rect.width > 0 &&
+            instruction.rect.height > 0 &&
+            ((instruction.fill && (instruction.fill.alpha ?? 1) > 0) ||
+                (instruction.stroke &&
+                    instruction.stroke.width > 0 &&
+                    (instruction.stroke.alpha ?? 1) > 0))) {
+            renderedRects.set(detectionIndex, instruction.rect);
+        }
+    }
     function ensureRetainedEntry(key) {
         let display = retainedEntries.get(key);
         if (!display) {
@@ -12599,7 +12769,7 @@ function createPixiHeatmapLayer(options) {
             sprite.removeFromParent();
             sprite.destroy();
             if (temporaryTexture)
-                texture.destroy(true);
+                releaseTexture(texture);
         }
         positionedSprites.length = 0;
         activeKeys.clear();
@@ -12613,7 +12783,7 @@ function createPixiHeatmapLayer(options) {
         }
         clear();
         for (const entry of cache.values()) {
-            entry.texture.destroy(true);
+            releaseTexture(entry.texture);
             entry.image.close();
         }
         cache.clear();
@@ -12651,7 +12821,7 @@ function createPixiHeatmapLayer(options) {
                 continue;
             cache.delete(key);
             cachedBytes -= entry.bytes;
-            entry.texture.destroy(true);
+            releaseTexture(entry.texture);
             entry.image.close();
         }
     };
@@ -12699,7 +12869,7 @@ function createPixiHeatmapLayer(options) {
             (right.detection.zIndex ?? right.index) || left.index - right.index);
         const result = [];
         let pixels = 0;
-        for (const { detection } of orderedDetections) {
+        for (const { detection, index } of orderedDetections) {
             const map = detection.heatmap;
             if (!map || !options.isVisible(detection))
                 continue;
@@ -12712,7 +12882,7 @@ function createPixiHeatmapLayer(options) {
                     continue;
                 }
                 pixels += map.width * map.height;
-                result.push({ detection, map, renderer });
+                result.push({ detection, detectionIndex: index, map, renderer });
             }
         }
         return result;
@@ -12747,7 +12917,8 @@ function createPixiHeatmapLayer(options) {
                 await options.prepareTexture?.(texture);
             }
             catch (error) {
-                texture?.destroy(true);
+                if (texture)
+                    releaseTexture(texture);
                 image.close();
                 if (destroyed || job.cancelled || job.generation !== generation) {
                     return;
@@ -12765,7 +12936,7 @@ function createPixiHeatmapLayer(options) {
                 job.cancelled ||
                 job.generation !== generation ||
                 !wantedKeys.has(job.key)) {
-                texture.destroy(true);
+                releaseTexture(texture);
                 image.close();
                 return;
             }
@@ -12821,6 +12992,20 @@ function createPixiHeatmapLayer(options) {
     };
     return {
         createContainer: () => container,
+        getActiveFocusArtifacts(frame) {
+            if (!frame || lastFrame !== frame)
+                return [];
+            return positionedSprites.map(({ sprite, detectionIndex }) => ({
+                detectionIndex,
+                texture: sprite.texture,
+                bounds: {
+                    x: sprite.x + sprite.width / 2,
+                    y: sprite.y + sprite.height / 2,
+                    width: sprite.width,
+                    height: sprite.height,
+                },
+            }));
+        },
         setRenderers(next) {
             if (next.length === renderers.length &&
                 next.every((renderer, index) => renderer === renderers[index])) {
@@ -12886,7 +13071,7 @@ function createPixiHeatmapLayer(options) {
             }
             const maps = visibleMaps(frame);
             const visiblePixelCount = maps.reduce((total, { map }) => total + map.width * map.height, 0);
-            for (const { detection, map, renderer } of maps) {
+            for (const { detection, detectionIndex, map, renderer } of maps) {
                 const key = keyFor(map, renderer);
                 if (shouldPrepareAsync(map, visiblePixelCount)) {
                     wantedKeys.add(key);
@@ -12927,6 +13112,7 @@ function createPixiHeatmapLayer(options) {
                 positionedSprites.push({
                     sprite,
                     detectionId: detection.id,
+                    detectionIndex,
                     x: sprite.x,
                     y: sprite.y,
                     temporaryTexture,
@@ -12957,6 +13143,10 @@ function createPixiHeatmapLayer(options) {
             container.destroy();
         },
     };
+    function releaseTexture(texture) {
+        options.onTextureRelease?.(texture);
+        texture.destroy(true);
+    }
 }
 
 /**
@@ -13042,6 +13232,268 @@ function installPixiBatchTextureBindings(pixi, renderer) {
     };
 }
 
+const maskUniformOrigins = new WeakMap();
+/** Keeps nested mask cutouts aligned and filter disposal scene-owned. */
+function installPixiFilterBindings(pixi, renderer) {
+    const releaseMaskTarget = installMaskTargetBindings(renderer);
+    if (renderer.name !== "webgpu")
+        return releaseMaskTarget;
+    const system = renderer.filter;
+    const originalApplyFilter = system.applyFilter;
+    let globalGroup;
+    const maskGroups = new Map();
+    const applyFilter = (filter, input, output, clear) => {
+        if (filter.enabled && filter instanceof pixi.MaskFilter) {
+            const source = filter.resources.filterUniforms;
+            let entry = maskGroups.get(filter);
+            if (!entry) {
+                const original = maskUniformOrigins.get(source) ?? source;
+                const owned = new pixi.UniformGroup(original.uniformStructures, {
+                    isStatic: original.isStatic,
+                    ubo: original.ubo,
+                });
+                maskUniformOrigins.set(owned, original);
+                entry = { original, owned };
+                maskGroups.set(filter, entry);
+            }
+            // Pixi pools MaskFilters across renderers. Their uniform buffers need
+            // one GPU upload owner, even when a second scene borrows the same filter.
+            if (source !== entry.owned) {
+                Object.assign(entry.owned.uniforms, source.uniforms);
+                filter.resources.filterUniforms = entry.owned;
+                if (entry.owned.isStatic)
+                    entry.owned.update();
+            }
+        }
+        originalApplyFilter.call(system, filter, input, output, clear);
+        // Pixi replaces group 0 with its renderer-owned group when applying an
+        // enabled filter. Disabled filters use a separate passthrough shader.
+        if (filter.enabled)
+            globalGroup = filter.groups[0];
+    };
+    system.applyFilter = applyFilter;
+    return () => {
+        releaseMaskTarget();
+        if (system.applyFilter === applyFilter) {
+            system.applyFilter = originalApplyFilter;
+        }
+        globalGroup?.destroy();
+        globalGroup = undefined;
+        for (const [filter, { original, owned }] of maskGroups) {
+            if (filter.resources?.filterUniforms === owned) {
+                Object.assign(original.uniforms, owned.uniforms);
+                filter.resources.filterUniforms = original;
+            }
+            const buffer = owned.buffer;
+            owned.buffer = undefined;
+            buffer?.destroy();
+        }
+        maskGroups.clear();
+    };
+}
+function installMaskTargetBindings(renderer) {
+    const pipe = renderer.renderPipes?.alphaMask;
+    if (!pipe)
+        return () => undefined;
+    const targets = renderer.renderTarget;
+    const originalExecute = pipe.execute;
+    const captures = [];
+    const execute = (instruction) => {
+        if (!instruction.mask.renderMaskToTexture) {
+            originalExecute.call(pipe, instruction);
+            return;
+        }
+        if (instruction.action === "pushMaskBegin") {
+            captures.push(targets.getBindState());
+        }
+        if (instruction.action !== "pushMaskEnd") {
+            originalExecute.call(pipe, instruction);
+            return;
+        }
+        const binding = captures.pop();
+        const originalPop = targets.pop;
+        // Filters bind their captures without pushing them onto the target stack.
+        // Returning from an alpha-mask capture must restore that bound surface.
+        targets.pop = () => {
+            const target = originalPop.call(targets);
+            return binding ? targets.bind(binding) : target;
+        };
+        try {
+            originalExecute.call(pipe, instruction);
+        }
+        finally {
+            targets.pop = originalPop;
+        }
+    };
+    pipe.execute = execute;
+    return () => {
+        if (pipe.execute === execute)
+            pipe.execute = originalExecute;
+        captures.length = 0;
+    };
+}
+
+/** Follows visible heatmap samples while preserving faint anomaly interiors. */
+function createPixiFocusHeatmapCutout(options) {
+    const geometry = new options.MeshGeometry({
+        indices: new Uint32Array([0, 1, 2, 0, 2, 3]),
+        positions: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
+        shrinkBuffersToFit: true,
+        topology: "triangle-list",
+        uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
+    });
+    const shader = options.Shader.from({
+        gl: { vertex: tintedMaskVertexGlsl, fragment: heatmapCutoutGlsl },
+        gpu: {
+            vertex: { source: untintedMaskVertexWgsl, entryPoint: "mainVertex" },
+            fragment: { source: heatmapCutoutWgsl, entryPoint: "mainFragment" },
+        },
+        resources: {
+            uTexture: options.artifact.texture.source,
+            uSampler: options.artifact.texture.source.style,
+            heatmapCoverageUniforms: {
+                uAntialiasing: { value: 0, type: "f32" },
+            },
+        },
+    });
+    const display = new options.Mesh({ geometry, shader });
+    const uniforms = shader.resources.heatmapCoverageUniforms;
+    return {
+        display,
+        render(artifact, antialiasing = false) {
+            uniforms.uniforms.uAntialiasing = antialiasing ? 1 : 0;
+            const { bounds } = artifact;
+            display.position.set(bounds.x - bounds.width / 2, bounds.y - bounds.height / 2);
+            display.scale.set(bounds.width, bounds.height);
+            display.visible = true;
+        },
+        destroy() {
+            display.removeFromParent();
+            display.destroy();
+            destroyShaderKeepingProgram(shader);
+            const buffer = uniforms.buffer;
+            uniforms.buffer = undefined;
+            buffer?.destroy();
+            geometry.destroy();
+        },
+    };
+}
+const heatmapCutoutGlsl = `#version 300 es
+precision highp float;
+
+in vec2 vUV;
+uniform sampler2D uTexture;
+uniform float uAntialiasing;
+out vec4 finalColor;
+
+float visibleSample(ivec2 position, ivec2 dimensions) {
+  return texelFetch(uTexture, clamp(position, ivec2(0), dimensions - ivec2(1)), 0).a > 0.0 ? 1.0 : 0.0;
+}
+
+void main(void) {
+  float coverage;
+  if (uAntialiasing > 0.0) {
+    ivec2 dimensions = textureSize(uTexture, 0);
+    vec2 position = vUV * vec2(dimensions) - 0.5;
+    ivec2 base = ivec2(floor(position));
+    vec2 weight = fract(position);
+    coverage = mix(
+      mix(visibleSample(base, dimensions), visibleSample(base + ivec2(1, 0), dimensions), weight.x),
+      mix(visibleSample(base + ivec2(0, 1), dimensions), visibleSample(base + ivec2(1, 1), dimensions), weight.x),
+      weight.y
+    );
+  } else {
+    coverage = texture(uTexture, vUV).a > 0.0 ? 1.0 : 0.0;
+  }
+  finalColor = vec4(coverage);
+}
+`;
+const heatmapCutoutWgsl = `
+@group(2) @binding(0) var uTexture: texture_2d<f32>;
+@group(2) @binding(1) var uSampler: sampler;
+struct HeatmapCoverageUniforms {
+  uAntialiasing: f32,
+};
+@group(2) @binding(2) var<uniform> heatmapCoverageUniforms: HeatmapCoverageUniforms;
+
+fn visibleSample(position: vec2<i32>, dimensions: vec2<i32>) -> f32 {
+  let alpha = textureLoad(uTexture, clamp(position, vec2<i32>(0), dimensions - vec2<i32>(1)), 0).a;
+  return select(0.0, 1.0, alpha > 0.0);
+}
+
+@fragment
+fn mainFragment(@location(0) vUV: vec2<f32>) -> @location(0) vec4<f32> {
+  var coverage: f32;
+  if (heatmapCoverageUniforms.uAntialiasing > 0.0) {
+    let dimensions = vec2<i32>(textureDimensions(uTexture));
+    let position = vUV * vec2<f32>(dimensions) - 0.5;
+    let base = vec2<i32>(floor(position));
+    let weight = fract(position);
+    coverage = mix(
+      mix(visibleSample(base, dimensions), visibleSample(base + vec2<i32>(1, 0), dimensions), weight.x),
+      mix(visibleSample(base + vec2<i32>(0, 1), dimensions), visibleSample(base + vec2<i32>(1, 1), dimensions), weight.x),
+      weight.y
+    );
+  } else {
+    let alpha = textureSampleLevel(uTexture, uSampler, vUV, 0.0).a;
+    coverage = select(0.0, 1.0, alpha > 0.0);
+  }
+  return vec4<f32>(coverage);
+}
+`;
+
+function setPixiViewportBounds(display, bounds, viewport, Rectangle) {
+    if (!viewport) {
+        display.boundsArea = undefined;
+        return;
+    }
+    const left = Math.max(bounds.x, viewport.x);
+    const top = Math.max(bounds.y, viewport.y);
+    const right = Math.min(bounds.x + bounds.width, viewport.x + viewport.width);
+    const bottom = Math.min(bounds.y + bounds.height, viewport.y + viewport.height);
+    const clipped = (display.boundsArea ??= new Rectangle());
+    clipped.x = left;
+    clipped.y = top;
+    clipped.width = Math.max(0, right - left);
+    clipped.height = Math.max(0, bottom - top);
+}
+/**
+ * AlphaMask allocates from its mask's full bounds, including geometry outside
+ * the canvas. A neutral parent clips that allocation without changing a
+ * rotated or mirrored child's geometry or texture coordinates.
+ */
+function syncPixiMaskViewportBounds(container, viewport, Rectangle) {
+    if (!viewport) {
+        container.boundsArea = undefined;
+        return;
+    }
+    let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;
+    for (const child of container.children) {
+        if (!child.visible)
+            continue;
+        const bounds = child.getLocalBounds();
+        if (bounds.width <= 0 || bounds.height <= 0)
+            continue;
+        child.updateLocalTransform();
+        const { a, b, c, d, tx, ty } = child.localTransform;
+        left = Math.min(left, tx +
+            Math.min(a * bounds.minX, a * bounds.maxX) +
+            Math.min(c * bounds.minY, c * bounds.maxY));
+        top = Math.min(top, ty +
+            Math.min(b * bounds.minX, b * bounds.maxX) +
+            Math.min(d * bounds.minY, d * bounds.maxY));
+        right = Math.max(right, tx +
+            Math.max(a * bounds.minX, a * bounds.maxX) +
+            Math.max(c * bounds.minY, c * bounds.maxY));
+        bottom = Math.max(bottom, ty +
+            Math.max(b * bounds.minX, b * bounds.maxX) +
+            Math.max(d * bounds.minY, d * bounds.maxY));
+    }
+    setPixiViewportBounds(container, left === Infinity
+        ? { x: viewport.x, y: viewport.y, width: 0, height: 0 }
+        : { x: left, y: top, width: right - left, height: bottom - top }, viewport, Rectangle);
+}
+
 const MAX_FOCUS_MASK_IDS = 16;
 /**
  * How far the media may travel before a cutout drawn for an earlier frame stops
@@ -13064,6 +13516,11 @@ function createPixiFocusLayer(options) {
         : (options.focusStyle ?? new BaseFocusStyle());
     let focusGraphics;
     let focusMaskGraphics;
+    let heatmapMaskContainer;
+    let heatmapVectorGraphics;
+    let usesHeatmapAlphaMask = false;
+    let viewportBounds;
+    const heatmapCutouts = new Map();
     let idMaskRenderer;
     let focusDisplay;
     let currentAlpha = 0;
@@ -13090,6 +13547,7 @@ function createPixiFocusLayer(options) {
             resetHeldFocus();
             focusGraphics = new options.Graphics();
             focusGraphics.visible = false;
+            syncViewportBounds(true);
             idMaskRenderer = createIdMaskRenderer();
             if (!options.Container || !focusGraphics.setMask) {
                 focusDisplay = focusGraphics;
@@ -13118,12 +13576,27 @@ function createPixiFocusLayer(options) {
             hide();
             idMaskRenderer?.destroy();
             idMaskRenderer = undefined;
+            activateVectorMask();
+            heatmapMaskContainer?.destroy({ children: true });
+            heatmapMaskContainer = undefined;
         },
         releaseMaskTexture(texture) {
-            if (!isDestroyed)
+            if (!isDestroyed) {
                 idMaskRenderer?.releaseTexture(texture.source);
+                const cutouts = heatmapCutouts.get(texture);
+                if (cutouts) {
+                    for (const cutout of cutouts.values())
+                        cutout.destroy();
+                    heatmapCutouts.delete(texture);
+                    vectorFocusSignature = null;
+                    if (heatmapCutouts.size === 0 && usesHeatmapAlphaMask) {
+                        activateVectorMask()?.clear();
+                    }
+                }
+            }
         },
         drawFrame(context) {
+            syncViewportBounds();
             if (isDestroyed || !focusStyle || mediaWidth <= 0 || mediaHeight <= 0) {
                 hide();
                 return;
@@ -13144,11 +13617,15 @@ function createPixiFocusLayer(options) {
             const instruction = resolvedInstruction
                 ? {
                     ...resolvedInstruction,
-                    targets: resolvedInstruction.targets.filter(({ detection }) => options.isDetectionVisible?.(detection) ?? true),
+                    targets: resolvedInstruction.targets.filter(({ detection, frame }) => frame === context.frame &&
+                        (options.isDetectionVisible?.(detection) ?? true)),
                 }
                 : undefined;
             endHold();
             if (!instruction || instruction.targets.length === 0) {
+                if (usesHeatmapAlphaMask && heldFill) {
+                    drawOverlayWithoutCutout(heldFill);
+                }
                 resetHeldFocus();
                 transitionToHidden();
                 return;
@@ -13158,12 +13635,13 @@ function createPixiFocusLayer(options) {
             if (focusDisplay)
                 focusDisplay.visible = true;
             if (drawIdMaskFocus(context.idMaskArtifact, instruction)) {
+                activateVectorMask();
                 hideVectorFocus();
                 markCutoutDrawn(context.mediaTime, context.frame.mediaTime);
                 return;
             }
             idMaskRenderer?.hide();
-            if (drawVectorFocus(instruction, context.frame)) {
+            if (drawVectorFocus(instruction, context)) {
                 markCutoutDrawn(context.mediaTime, context.frame.mediaTime);
             }
         },
@@ -13191,7 +13669,29 @@ function createPixiFocusLayer(options) {
             }
             focusStyle = nextFocusStyle;
         },
+        syncViewportBounds,
     };
+    function syncViewportBounds(force = false) {
+        if (!options.Rectangle)
+            return;
+        const next = options.getViewportBounds?.();
+        if (!force &&
+            next?.x === viewportBounds?.x &&
+            next?.y === viewportBounds?.y &&
+            next?.width === viewportBounds?.width &&
+            next?.height === viewportBounds?.height)
+            return;
+        viewportBounds = next ? { ...next } : undefined;
+        if (focusGraphics) {
+            setPixiViewportBounds(focusGraphics, { x: 0, y: 0, width: mediaWidth, height: mediaHeight }, viewportBounds, options.Rectangle);
+        }
+        syncHeatmapViewportBounds();
+    }
+    function syncHeatmapViewportBounds() {
+        if (heatmapMaskContainer && options.Rectangle) {
+            syncPixiMaskViewportBounds(heatmapMaskContainer, viewportBounds, options.Rectangle);
+        }
+    }
     function drawIdMaskFocus(artifact, instruction) {
         if (!idMaskRenderer ||
             !artifact ||
@@ -13200,17 +13700,19 @@ function createPixiFocusLayer(options) {
         }
         const maskIds = getTargetMaskIds(instruction.targets);
         if (maskIds.length === 0 ||
+            instruction.targets.some((target) => !target.detection.mask) ||
             (!instruction.ambient && maskIds.length !== instruction.targets.length)) {
             return false;
         }
         idMaskRenderer.render(artifact.frame, artifact.texture, maskIds, instruction.fill, instruction.ambient === true);
         return true;
     }
-    function drawVectorFocus(instruction, frame) {
+    function drawVectorFocus(instruction, context) {
         if (!focusGraphics) {
             return false;
         }
         const targetsWithGeometry = instruction.targets.filter((target) => target.detection.mask ||
+            target.detection.heatmap ||
             target.detection.rect ||
             target.detection.polygon);
         if (targetsWithGeometry.length === 0) {
@@ -13218,37 +13720,55 @@ function createPixiFocusLayer(options) {
             return false;
         }
         const signature = {
+            annotationAntialiasing: options.getAnnotationAntialiasing?.() ?? false,
             cornerRadius: instruction.fallback?.cornerRadius,
             detections: targetsWithGeometry.map((target) => target.detection),
             fillAlpha: instruction.fill.alpha,
             fillColor: instruction.fill.color,
-            frame,
+            frame: context.frame,
+            heatmapsEnabled: (options.getHeatmapRenderers?.().length ?? 0) > 0,
+            heatmapArtifacts: context.heatmapArtifacts ?? [],
             mediaHeight,
             mediaWidth,
-            shape: instruction.fallback?.shape,
+            shape: instruction.fallback === null ? null : instruction.fallback?.shape,
         };
         focusGraphics.visible = true;
         if (focusMaskGraphics)
-            focusMaskGraphics.visible = true;
+            focusMaskGraphics.visible = !usesHeatmapAlphaMask;
         // Tessellating thousands of mask runs on every draw is what makes this path
         // expensive, and nothing it draws moves while its inputs hold still.
         if (isSameVectorFocus(vectorFocusSignature, signature)) {
             return true;
         }
         vectorFocusSignature = signature;
+        const gpuHeatmapTargets = context.heatmapArtifacts !== undefined &&
+            signature.heatmapsEnabled &&
+            options.AlphaMask &&
+            options.Container &&
+            options.Mesh &&
+            options.MeshGeometry &&
+            options.Shader &&
+            focusMaskGraphics &&
+            focusGraphics.setMask &&
+            targetsWithGeometry.some(({ detection }) => detection.heatmap && !detection.mask);
+        const cutoutGraphics = gpuHeatmapTargets
+            ? activateHeatmapMask(instruction.targets, signature.annotationAntialiasing, signature.heatmapArtifacts)
+            : activateVectorMask();
         focusGraphics.clear();
         focusGraphics.rect(0, 0, mediaWidth, mediaHeight);
         focusGraphics.fill(instruction.fill);
-        if (focusMaskGraphics) {
-            focusMaskGraphics.clear();
-            for (const target of targetsWithGeometry) {
-                if (drawCutoutShape(focusMaskGraphics, target, instruction) === "drawn") {
-                    focusMaskGraphics.fill({ alpha: 1, color: 0xffffff });
+        const vectorTargets = targetsWithGeometry.filter(({ detection }) => !signature.heatmapsEnabled || !detection.heatmap || detection.mask);
+        if (cutoutGraphics) {
+            cutoutGraphics.clear();
+            for (const target of vectorTargets) {
+                if (drawCutoutShape(cutoutGraphics, target, instruction) === "drawn") {
+                    cutoutGraphics.fill({ alpha: 1, color: 0xffffff });
                 }
             }
+            syncHeatmapViewportBounds();
             return true;
         }
-        for (const target of targetsWithGeometry) {
+        for (const target of vectorTargets) {
             if (drawCutoutShape(focusGraphics, target, instruction) === "drawn") {
                 focusGraphics.cut();
             }
@@ -13264,7 +13784,7 @@ function createPixiFocusLayer(options) {
             graphics.poly(target.detection.polygon.points.flatMap(({ x, y }) => [x, y]), true);
             return "drawn";
         }
-        if (!target.detection.rect) {
+        if (!target.detection.rect || instruction.fallback === null) {
             return "empty";
         }
         const { rect } = target.detection;
@@ -13278,6 +13798,93 @@ function createPixiFocusLayer(options) {
         }
         return "drawn";
     }
+    function activateVectorMask() {
+        clearHeatmapCutouts();
+        if (heatmapMaskContainer)
+            heatmapMaskContainer.visible = false;
+        if (usesHeatmapAlphaMask && focusMaskGraphics) {
+            focusGraphics?.setMask?.({
+                inverse: true,
+                mask: focusMaskGraphics,
+            });
+            usesHeatmapAlphaMask = false;
+        }
+        if (focusMaskGraphics)
+            focusMaskGraphics.visible = true;
+        return focusMaskGraphics;
+    }
+    function activateHeatmapMask(targets, annotationAntialiasing, heatmapArtifacts) {
+        const indexes = new Set(targets
+            .filter(({ detection }) => !detection.mask)
+            .map(({ detectionIndex }) => detectionIndex));
+        const artifacts = heatmapArtifacts.filter((artifact) => indexes.has(artifact.detectionIndex));
+        if (artifacts.length === 0)
+            return activateVectorMask();
+        if (!heatmapMaskContainer) {
+            heatmapMaskContainer = new options.Container();
+            heatmapVectorGraphics = new options.Graphics();
+            heatmapMaskContainer.addChild(heatmapVectorGraphics);
+            focusDisplay.addChild(heatmapMaskContainer);
+        }
+        heatmapMaskContainer.visible = true;
+        if (!usesHeatmapAlphaMask) {
+            focusGraphics?.setMask?.({
+                inverse: true,
+                channel: "alpha",
+                mask: new options.AlphaMask({
+                    mask: heatmapMaskContainer,
+                }),
+            });
+            usesHeatmapAlphaMask = true;
+        }
+        if (focusMaskGraphics)
+            focusMaskGraphics.visible = false;
+        const activeTextures = new Map();
+        for (const artifact of artifacts) {
+            let indexes = activeTextures.get(artifact.texture);
+            if (!indexes) {
+                indexes = new Set();
+                activeTextures.set(artifact.texture, indexes);
+            }
+            indexes.add(artifact.detectionIndex);
+            let textureCutouts = heatmapCutouts.get(artifact.texture);
+            if (!textureCutouts) {
+                textureCutouts = new Map();
+                heatmapCutouts.set(artifact.texture, textureCutouts);
+            }
+            let cutout = textureCutouts.get(artifact.detectionIndex);
+            if (!cutout) {
+                cutout = createPixiFocusHeatmapCutout({
+                    artifact,
+                    Mesh: options.Mesh,
+                    MeshGeometry: options.MeshGeometry,
+                    Shader: options.Shader,
+                });
+                textureCutouts.set(artifact.detectionIndex, cutout);
+                heatmapMaskContainer.addChild(cutout.display);
+            }
+            cutout.render(artifact, annotationAntialiasing);
+        }
+        for (const [texture, cutouts] of heatmapCutouts) {
+            const activeIndexes = activeTextures.get(texture);
+            for (const [index, cutout] of cutouts) {
+                if (activeIndexes?.has(index))
+                    continue;
+                cutout.destroy();
+                cutouts.delete(index);
+            }
+            if (cutouts.size === 0)
+                heatmapCutouts.delete(texture);
+        }
+        return heatmapVectorGraphics;
+    }
+    function clearHeatmapCutouts() {
+        for (const cutouts of heatmapCutouts.values()) {
+            for (const cutout of cutouts.values())
+                cutout.destroy();
+        }
+        heatmapCutouts.clear();
+    }
     function drawMaskCutout(graphics, target) {
         const mask = target.detection.mask;
         if (!mask) {
@@ -13339,7 +13946,8 @@ function createPixiFocusLayer(options) {
         targetAlpha = 1;
         if (focusDisplay)
             focusDisplay.visible = true;
-        if (isDrawnCutoutStillCurrent(mediaTime, heldMaskFrameTime)) {
+        if (!usesHeatmapAlphaMask &&
+            isDrawnCutoutStillCurrent(mediaTime, heldMaskFrameTime)) {
             return;
         }
         if (isMaskArtifactOwed) {
@@ -13422,6 +14030,7 @@ function createPixiFocusLayer(options) {
         cutoutMediaTime = null;
         cutoutFrameTime = null;
         drawnOverlayWithoutCutout = fill;
+        activateVectorMask();
         if (idMaskRenderer) {
             hideVectorFocus();
             idMaskRenderer.renderWithoutCutout(fill);
@@ -13481,7 +14090,10 @@ function createPixiFocusLayer(options) {
 }
 function isSameVectorFocus(previous, next) {
     return (previous !== null &&
+        previous.annotationAntialiasing === next.annotationAntialiasing &&
         previous.frame === next.frame &&
+        previous.heatmapsEnabled === next.heatmapsEnabled &&
+        sameHeatmapArtifacts(previous.heatmapArtifacts, next.heatmapArtifacts) &&
         previous.fillAlpha === next.fillAlpha &&
         previous.fillColor === next.fillColor &&
         previous.cornerRadius === next.cornerRadius &&
@@ -13491,6 +14103,18 @@ function isSameVectorFocus(previous, next) {
         previous.detections.length === next.detections.length &&
         previous.detections.every((detection, index) => detection === next.detections[index]));
 }
+function sameHeatmapArtifacts(left, right) {
+    return (left.length === right.length &&
+        left.every((artifact, index) => {
+            const next = right[index];
+            return (artifact.texture === next.texture &&
+                artifact.detectionIndex === next.detectionIndex &&
+                artifact.bounds.x === next.bounds.x &&
+                artifact.bounds.y === next.bounds.y &&
+                artifact.bounds.width === next.bounds.width &&
+                artifact.bounds.height === next.bounds.height);
+        }));
+}
 function getTargetMaskIds(targets) {
     return targets
         .filter((target) => target.detection.mask)
@@ -13775,68 +14399,478 @@ fn mainFragment(
 }
 `;
 
-const DEFAULT_PICK_PADDING = 4;
-const POINT_PRECISE_PICK_TARGETS = new Set([
-    DetectionPickTarget.Keypoint,
-    DetectionPickTarget.Edge,
-    DetectionPickTarget.Polyline,
-]);
-function createPixiInteractionLayer(options) {
-    const mode = options.interaction.mode ?? MediaInteractionMode.PausedOnly;
-    const pickPadding = options.interaction.padding ?? DEFAULT_PICK_PADDING;
-    let container;
-    let displayDimensions;
-    let currentMediaTime = 0;
-    let hoveredPick = null;
-    let hoveredPickKey = null;
-    let selectedPick = null;
-    let selectedPicks = [];
-    let marqueeStart = null;
-    let marqueeRect = null;
-    let didDragMarquee = false;
-    let pointerPoint = null;
-    let suppressNextTap = false;
-    let activeFrame;
-    let isDestroyed = false;
-    return {
-        createDisplay({ width, height }) {
-            displayDimensions = { width, height };
-            container = new options.Container();
-            container.eventMode = "static";
-            container.cursor = "default";
-            container.hitArea = new options.Rectangle(0, 0, width, height);
-            container.on("pointermove", handlePointerMove);
-            container.on("globalpointermove", handleGlobalPointerMove);
-            container.on("pointerout", handlePointerOut);
-            container.on("pointertap", handlePointerTap);
-            container.on("pointerdown", handlePointerDown);
-            container.on("pointerup", handlePointerUp);
-            container.on("pointerupoutside", handlePointerUp);
-            return container;
-        },
-        drawFrame(mediaTime) {
-            currentMediaTime = mediaTime;
-            activeFrame = options.detectionTimeline.selectFrame(mediaTime);
-            if (canHandleInteraction()) {
-                clearStalePicks(activeFrame);
-                return;
-            }
-            pointerPoint = null;
-            marqueeRect = null;
-            setHoveredPick(null);
-            if (isDestroyed || mode === MediaInteractionMode.Disabled) {
-                setSelectedPick(null);
-                return;
+/*!
+ * The FXAA algorithm is adapted from PixiJS v7.4.3's official shader:
+ * https://github.com/pixijs/pixijs/blob/v7.4.3/packages/filter-fxaa/src/fxaa.frag
+ * It includes alpha in contrast, filters premultiplied RGBA, clamps samples,
+ * limits the span to four pixels and mixes the center back for thin strokes.
+ *
+ * From: https://github.com/mitsuhiko/webgl-meincraft
+ * Copyright (c) 2011 by Armin Ronacher. Some rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ *
+ * Redistributions in binary form must reproduce the above copyright notice,
+ * this list of conditions and the following disclaimer in the documentation
+ * and/or other materials provided with the distribution.
+ *
+ * The names of the contributors may not be used to endorse or promote
+ * products derived from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ */
+const annotationFxaaGl = `
+vec4 applyAnnotationFxaa(vec2 uv) {
+  vec2 pixel = uInputPixel.zw;
+  vec4 center = readColor(uv);
+  float nw = contrastValue(readColor(uv + vec2(-1.0, -1.0) * pixel));
+  float ne = contrastValue(readColor(uv + vec2( 1.0, -1.0) * pixel));
+  float sw = contrastValue(readColor(uv + vec2(-1.0,  1.0) * pixel));
+  float se = contrastValue(readColor(uv + vec2( 1.0,  1.0) * pixel));
+  float middle = contrastValue(center);
+  float low = min(middle, min(min(nw, ne), min(sw, se)));
+  float high = max(middle, max(max(nw, ne), max(sw, se)));
+  if (high - low < max(0.03125, high * 0.0625)) {
+    return center;
+  }
+  vec2 direction = vec2(-((nw + ne) - (sw + se)), (nw + sw) - (ne + se));
+  float reduction = max((nw + ne + sw + se) * 0.03125, 0.0078125);
+  direction *= 1.0 / (min(abs(direction.x), abs(direction.y)) + reduction);
+  direction = clamp(direction, vec2(-4.0), vec2(4.0)) * pixel;
+  vec4 narrow = 0.5 * (
+    readColor(uv - direction / 6.0) +
+    readColor(uv + direction / 6.0)
+  );
+  vec4 wide = 0.5 * narrow + 0.25 * (
+    readColor(uv - direction * 0.5) +
+    readColor(uv + direction * 0.5)
+  );
+  float value = contrastValue(wide);
+  vec4 filtered = value < low || value > high ? narrow : wide;
+  return mix(center, filtered, 0.75);
+}
+`;
+const annotationFxaaWgsl = `
+fn applyAnnotationFxaa(uv: vec2<f32>) -> vec4<f32> {
+  let pixel = gfu.uInputPixel.zw;
+  let center = readColor(uv);
+  let nw = contrastValue(readColor(uv + vec2<f32>(-1.0, -1.0) * pixel));
+  let ne = contrastValue(readColor(uv + vec2<f32>( 1.0, -1.0) * pixel));
+  let sw = contrastValue(readColor(uv + vec2<f32>(-1.0,  1.0) * pixel));
+  let se = contrastValue(readColor(uv + vec2<f32>( 1.0,  1.0) * pixel));
+  let middle = contrastValue(center);
+  let low = min(middle, min(min(nw, ne), min(sw, se)));
+  let high = max(middle, max(max(nw, ne), max(sw, se)));
+  if (high - low < max(0.03125, high * 0.0625)) { return center; }
+  var direction = vec2<f32>(-((nw + ne) - (sw + se)), (nw + sw) - (ne + se));
+  let reduction = max((nw + ne + sw + se) * 0.03125, 0.0078125);
+  direction *= 1.0 / (min(abs(direction.x), abs(direction.y)) + reduction);
+  direction = clamp(direction, vec2<f32>(-4.0), vec2<f32>(4.0)) * pixel;
+  let narrow = 0.5 * (readColor(uv - direction / 6.0) + readColor(uv + direction / 6.0));
+  let wide = 0.5 * narrow + 0.25 * (readColor(uv - direction * 0.5) + readColor(uv + direction * 0.5));
+  let value = contrastValue(wide);
+  let filtered = select(wide, narrow, value < low || value > high);
+  return mix(center, filtered, 0.75);
+}
+`;
+
+/** Smooths a captured annotation group without reading the media texture. */
+function createPixiAnnotationAntialiasFilter(options) {
+    const source = createGpuSource(options.maskCoverage ?? false);
+    const filter = options.Filter.from({
+        antialias: false,
+        resolution: options.resolution ?? 1,
+        padding: 2,
+        resources: options.maskCoverage
+            ? {
+                coverageAaUniforms: {
+                    uOutputOffset: {
+                        type: "vec4<f32>",
+                        value: new Float32Array([0, 0, 1, 0]),
+                    },
+                },
             }
-            // Paused-only interaction gates new picks during playback, but an
-            // existing selection keeps following its detection so selection-driven
-            // presentation such as focus survives frame advances.
-            followSelectedPicks(activeFrame);
-        },
-        setSelectedDetection(selection) {
-            if (selection === null) {
-                setSelectedPick(null);
-                return null;
+            : {},
+        gl: {
+            vertex: options.maskCoverage
+                ? coverageFilterVert
+                : options.defaultFilterVert,
+            fragment: `#version 300 es
+precision highp float;
+in vec2 vTextureCoord;
+uniform sampler2D uTexture;
+uniform vec4 uInputClamp;
+uniform vec4 uInputPixel;
+uniform vec4 uInputSize;
+uniform vec4 uOutputFrame;
+uniform vec4 uOutputTexture;
+out vec4 finalColor;
+
+vec4 readColor(vec2 uv) {
+  ${options.maskCoverage
+                ? "return texture(uTexture, clamp(uv, uInputClamp.xy, uInputClamp.zw));"
+                : `vec2 lower = max(uInputClamp.xy, -uOutputFrame.xy * uInputSize.zw + 0.5 * uInputPixel.zw);
+  vec2 upper = min(uInputClamp.zw, (uOutputTexture.xy - uOutputFrame.xy) * uInputSize.zw - 0.5 * uInputPixel.zw);
+  return texture(uTexture, clamp(uv, lower, max(lower, upper)));`}
+}
+
+float contrastValue(vec4 color) {
+  return dot(color.rgb, vec3(0.299, 0.587, 0.114)) + color.a;
+}
+${annotationFxaaGl}
+
+void main(void) {
+  finalColor = applyAnnotationFxaa(vTextureCoord);
+}
+
+`,
+        },
+        gpu: {
+            vertex: { entryPoint: "mainVertex", source },
+            fragment: { entryPoint: "mainFragment", source },
+        },
+    });
+    if (options.maskCoverage) {
+        filter.apply = (manager, input, output, clear) => {
+            const uniforms = filter.resources.coverageAaUniforms;
+            const offset = uniforms.uniforms.uOutputOffset;
+            const renderer = manager.renderer;
+            const target = renderer.renderTarget.getRenderTarget(output);
+            const global = renderer.globalUniforms.globalUniformData;
+            // A mask target has its own origin outside Pixi's filter stack. The
+            // global uniforms identify that target after the capture offset pops.
+            offset[0] = global.offset.x;
+            offset[1] = global.offset.y;
+            offset[2] = target.resolution;
+            offset[3] = global.resolution === target.size ? 1 : 0;
+            uniforms.update();
+            manager.applyFilter(filter, input, output, clear);
+        };
+    }
+    return filter;
+}
+/** Keeps Pixi's power-of-two capture textures within the backend's limit. */
+function resolvePixiAnnotationAntialiasResolution(outputResolution, viewport, maxTextureSize, captureScale = 1) {
+    const pooledLimit = 2 ** Math.floor(Math.log2(maxTextureSize));
+    // Nested masks round logical bounds; FXAA adds two padding pixels per edge.
+    const roundedSide = Math.max(1, Math.ceil(viewport.width) + 6, Math.ceil(viewport.height) + 6);
+    return Math.min(outputResolution * captureScale, Math.max(1, pooledLimit - 2) / roundedSide);
+}
+const coverageFilterVert = `#version 300 es
+precision highp float;
+in vec2 aPosition;
+out vec2 vTextureCoord;
+uniform vec4 uOutputFrame;
+uniform vec4 uOutputTexture;
+uniform vec4 uInputSize;
+uniform vec4 uGlobalFrame;
+uniform vec4 uOutputOffset;
+
+void main(void) {
+  vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+  if (uOutputOffset.w > 0.0) {
+    position -= uOutputOffset.xy - uGlobalFrame.xy / uOutputOffset.z;
+  }
+  gl_Position = vec4(
+    position.x * (2.0 / uOutputTexture.x) - 1.0,
+    position.y * (2.0 * uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z,
+    0.0, 1.0
+  );
+  vTextureCoord = aPosition * (uOutputFrame.zw * uInputSize.zw);
+}
+`;
+function createGpuSource(maskCoverage) {
+    return `
+struct GlobalFilterUniforms {
+  uInputSize: vec4<f32>,
+  uInputPixel: vec4<f32>,
+  uInputClamp: vec4<f32>,
+  uOutputFrame: vec4<f32>,
+  uGlobalFrame: vec4<f32>,
+  uOutputTexture: vec4<f32>,
+}
+@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;
+@group(0) @binding(1) var uTexture: texture_2d<f32>;
+@group(0) @binding(2) var uSampler: sampler;
+${maskCoverage
+        ? `struct CoverageAaUniforms { uOutputOffset: vec4<f32>, }
+@group(1) @binding(0) var<uniform> coverageAaUniforms: CoverageAaUniforms;`
+        : ""}
+
+struct FilterOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+}
+
+@vertex
+fn mainVertex(@location(0) aPosition: vec2<f32>) -> FilterOutput {
+  var out: FilterOutput;
+  var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
+  ${maskCoverage
+        ? `let offset = coverageAaUniforms.uOutputOffset;
+  if (offset.w > 0.0) {
+    position -= offset.xy - gfu.uGlobalFrame.xy / offset.z;
+  }`
+        : ""}
+  out.position = vec4<f32>(
+    position.x * (2.0 / gfu.uOutputTexture.x) - 1.0,
+    position.y * (2.0 * gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z,
+    0.0, 1.0
+  );
+  out.uv = aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);
+  return out;
+}
+
+fn readColor(uv: vec2<f32>) -> vec4<f32> {
+  ${maskCoverage
+        ? "return textureSampleLevel(uTexture, uSampler, clamp(uv, gfu.uInputClamp.xy, gfu.uInputClamp.zw), 0.0);"
+        : `let lower = max(gfu.uInputClamp.xy, -gfu.uOutputFrame.xy * gfu.uInputSize.zw + 0.5 * gfu.uInputPixel.zw);
+  let upper = min(gfu.uInputClamp.zw, (gfu.uOutputTexture.xy - gfu.uOutputFrame.xy) * gfu.uInputSize.zw - 0.5 * gfu.uInputPixel.zw);
+  return textureSampleLevel(uTexture, uSampler, clamp(uv, lower, max(lower, upper)), 0.0);`}
+}
+
+fn contrastValue(color: vec4<f32>) -> f32 {
+  return dot(color.rgb, vec3<f32>(0.299, 0.587, 0.114)) + color.a;
+}
+${annotationFxaaWgsl}
+
+@fragment
+fn mainFragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  return applyAnnotationFxaa(uv);
+}
+`;
+}
+
+var PixiSceneLayerKind;
+(function (PixiSceneLayerKind) {
+    PixiSceneLayerKind["Media"] = "media";
+    PixiSceneLayerKind["Depth"] = "depth";
+    PixiSceneLayerKind["Heatmap"] = "heatmap";
+    PixiSceneLayerKind["Mask"] = "mask";
+    PixiSceneLayerKind["Box"] = "box";
+    PixiSceneLayerKind["Vector"] = "vector";
+    PixiSceneLayerKind["Region"] = "region";
+    PixiSceneLayerKind["Focus"] = "focus";
+    PixiSceneLayerKind["Preview"] = "preview";
+    PixiSceneLayerKind["Guide"] = "guide";
+    PixiSceneLayerKind["Handle"] = "handle";
+    PixiSceneLayerKind["Interaction"] = "interaction";
+    PixiSceneLayerKind["Label"] = "label";
+})(PixiSceneLayerKind || (PixiSceneLayerKind = {}));
+function createPixiSceneLayerSlot(kind, order = defaultLayerOrder(kind)) {
+    let display;
+    return {
+        getDisplay() {
+            return display;
+        },
+        kind,
+        order,
+        setDisplay(nextDisplay) {
+            display = nextDisplay;
+        },
+    };
+}
+function syncPixiSceneLayerChildren(scene, slots) {
+    if (!scene) {
+        return;
+    }
+    const displays = [...slots]
+        .sort((left, right) => left.order - right.order)
+        .map((slot) => slot.getDisplay())
+        .filter((display) => display !== undefined);
+    clearSceneChildren(scene);
+    if (displays.length === 0) {
+        return;
+    }
+    scene.addChild(...displays);
+}
+function defaultLayerOrder(kind) {
+    switch (kind) {
+        case PixiSceneLayerKind.Media:
+            return 0;
+        case PixiSceneLayerKind.Focus:
+            return 10;
+        case PixiSceneLayerKind.Depth:
+            return 25;
+        case PixiSceneLayerKind.Heatmap:
+            return 50;
+        case PixiSceneLayerKind.Mask:
+            return 100;
+        case PixiSceneLayerKind.Box:
+            return 200;
+        case PixiSceneLayerKind.Vector:
+            return 250;
+        case PixiSceneLayerKind.Region:
+            return 275;
+        case PixiSceneLayerKind.Preview:
+            return 400;
+        case PixiSceneLayerKind.Guide:
+            return 500;
+        case PixiSceneLayerKind.Handle:
+            return 750;
+        case PixiSceneLayerKind.Interaction:
+            return 700;
+        case PixiSceneLayerKind.Label:
+            return 800;
+        default:
+            return 350;
+    }
+}
+function clearSceneChildren(scene) {
+    if (typeof scene.removeChildren === "function") {
+        scene.removeChildren();
+        return;
+    }
+    const fakeScene = scene;
+    if (Array.isArray(fakeScene.children)) {
+        fakeScene.children.splice(0);
+    }
+}
+
+/** Keeps media pixels outside AA while retaining the scene's layer order. */
+function createPixiAnnotationAntialiasLayer(options) {
+    const groups = [];
+    let filter;
+    let captureResolution = 1;
+    return {
+        getFxaaFilter() {
+            return options.getEnabled() ? ensureFilter() : null;
+        },
+        setResolution(resolution) {
+            captureResolution = resolution;
+            if (filter)
+                filter.resolution = resolution;
+        },
+        sync(scene, slots) {
+            if (!scene)
+                return;
+            for (const group of groups) {
+                group.removeChildren();
+                group.filters = null;
+            }
+            if (!options.getEnabled()) {
+                syncPixiSceneLayerChildren(scene, slots);
+                return;
+            }
+            scene.removeChildren();
+            let index = 0;
+            let group;
+            for (const slot of [...slots].sort((left, right) => left.order - right.order)) {
+                const display = slot.getDisplay();
+                if (!display)
+                    continue;
+                if (slot.kind === PixiSceneLayerKind.Media ||
+                    slot.kind === PixiSceneLayerKind.Region ||
+                    slot.kind === PixiSceneLayerKind.Label) {
+                    // Regions smooth coverage separately from their copied video.
+                    // Labels capture backgrounds separately so text stays sharp.
+                    group = undefined;
+                    scene.addChild(display);
+                    continue;
+                }
+                if (!group) {
+                    const sharedFilter = ensureFilter();
+                    group = groups[index] ??= new options.Container();
+                    index += 1;
+                    group.filters = [sharedFilter];
+                    scene.addChild(group);
+                }
+                group.addChild(display);
+            }
+        },
+        destroy() {
+            for (const group of groups) {
+                group.filters = null;
+                if (!group.parent)
+                    group.destroy({ children: false });
+            }
+            filter?.destroy();
+        },
+    };
+    function ensureFilter() {
+        return (filter ??= createPixiAnnotationAntialiasFilter({
+            ...options,
+            resolution: captureResolution,
+        }));
+    }
+}
+
+const DEFAULT_PICK_PADDING = 4;
+const POINT_PRECISE_PICK_TARGETS = new Set([
+    DetectionPickTarget.Keypoint,
+    DetectionPickTarget.Edge,
+    DetectionPickTarget.Polyline,
+]);
+function createPixiInteractionLayer(options) {
+    const mode = options.interaction.mode ?? MediaInteractionMode.PausedOnly;
+    const pickPadding = options.interaction.padding ?? DEFAULT_PICK_PADDING;
+    let container;
+    let displayDimensions;
+    let currentMediaTime = 0;
+    let hoveredPick = null;
+    let hoveredPickKey = null;
+    let selectedPick = null;
+    let selectedPicks = [];
+    let marqueeStart = null;
+    let marqueeRect = null;
+    let didDragMarquee = false;
+    let pointerPoint = null;
+    let suppressNextTap = false;
+    let activeFrame;
+    let isDestroyed = false;
+    return {
+        createDisplay({ width, height }) {
+            displayDimensions = { width, height };
+            container = new options.Container();
+            container.eventMode = "static";
+            container.cursor = "default";
+            container.hitArea = new options.Rectangle(0, 0, width, height);
+            container.on("pointermove", handlePointerMove);
+            container.on("globalpointermove", handleGlobalPointerMove);
+            container.on("pointerout", handlePointerOut);
+            container.on("pointertap", handlePointerTap);
+            container.on("pointerdown", handlePointerDown);
+            container.on("pointerup", handlePointerUp);
+            container.on("pointerupoutside", handlePointerUp);
+            return container;
+        },
+        drawFrame(mediaTime) {
+            currentMediaTime = mediaTime;
+            activeFrame = options.detectionTimeline.selectFrame(mediaTime);
+            if (canHandleInteraction()) {
+                clearStalePicks(activeFrame);
+                return;
+            }
+            pointerPoint = null;
+            marqueeRect = null;
+            setHoveredPick(null);
+            if (isDestroyed || mode === MediaInteractionMode.Disabled) {
+                setSelectedPick(null);
+                return;
+            }
+            // Paused-only interaction gates new picks during playback, but an
+            // existing selection keeps following its detection so selection-driven
+            // presentation such as focus survives frame advances.
+            followSelectedPicks(activeFrame);
+        },
+        setSelectedDetection(selection) {
+            if (selection === null) {
+                setSelectedPick(null);
+                return null;
             }
             if (!canHandleInteraction()) {
                 setSelectedPick(null);
@@ -14344,7 +15378,7 @@ function createPixiMaskScreenStrokeRenderer(options) {
             let strokes = frame.screenStrokes ?? [];
             if (overrides) {
                 strokes = overrides.flatMap(({ detectionIndex, stroke }) => {
-                    if (stroke?.widthUnit !== "screen" ||
+                    if (stroke?.widthUnit === undefined ||
                         stroke.width <= 0 ||
                         stroke.alpha <= 0)
                         return [];
@@ -14366,21 +15400,36 @@ function createPixiMaskScreenStrokeRenderer(options) {
                 hide();
                 return;
             }
-            const signature = `${viewportScale}:${strokes.map(({ detectionIndex, width, color, alpha }) => `${detectionIndex}:${width}:${color}:${alpha}`).join(";")}`;
+            const signature = `${viewportScale}:${strokes.map(({ detectionIndex, width, widthUnit, alignment, color, alpha }) => `${detectionIndex}:${width}:${widthUnit}:${alignment}:${color}:${alpha}`).join(";")}`;
             if (lastFrame !== frame || lastSignature !== signature) {
                 display.clear();
                 const scaleX = options.mediaWidth / frame.width;
                 const scaleY = options.mediaHeight / frame.height;
                 for (const stroke of strokes) {
-                    for (const path of stroke.paths) {
-                        if (path.length < 6)
-                            continue;
-                        display.moveTo(path[0] * scaleX, path[1] * scaleY);
-                        for (let index = 2; index < path.length; index += 2)
-                            display.lineTo(path[index] * scaleX, path[index + 1] * scaleY);
-                        display.closePath();
+                    for (const { paths, alignment } of resolveContourGroups(stroke)) {
+                        for (const path of paths) {
+                            if (path.length < 6)
+                                continue;
+                            display.moveTo(path[0] * scaleX, path[1] * scaleY);
+                            for (let index = 2; index < path.length; index += 2)
+                                display.lineTo(path[index] * scaleX, path[index + 1] * scaleY);
+                            display.closePath();
+                        }
+                        display.stroke(resolvePixiStroke({
+                            ...stroke,
+                            alignment,
+                            width: stroke.widthUnit === "mask"
+                                ? (2 *
+                                    stroke.width *
+                                    options.mediaWidth *
+                                    viewportScale) /
+                                    (frame.kind === PreparedMaskFrameKind.IdMask
+                                        ? frame.sourceWidth
+                                        : frame.width)
+                                : stroke.width,
+                            join: "round",
+                        }, viewportScale));
                     }
-                    display.stroke(resolvePixiStroke({ ...stroke, join: "round" }, viewportScale));
                 }
                 lastFrame = frame;
                 lastSignature = signature;
@@ -14389,22 +15438,56 @@ function createPixiMaskScreenStrokeRenderer(options) {
         },
     };
 }
+function resolveContourGroups(stroke) {
+    if (stroke.alignment === undefined ||
+        stroke.alignment === StrokeAlignment.Center) {
+        return [{ paths: stroke.paths, alignment: stroke.alignment }];
+    }
+    const outer = [];
+    const holes = [];
+    // Pixi aligns each contour to its enclosed area. Hole alignment must reverse
+    // so Inside and Outside remain relative to the mask's foreground pixels.
+    for (const path of stroke.paths) {
+        let area = 0;
+        for (let index = 0, previous = path.length - 2; index < path.length; index += 2) {
+            area +=
+                path[previous] * path[index + 1] - path[index] * path[previous + 1];
+            previous = index;
+        }
+        (area < 0 ? holes : outer).push(path);
+    }
+    return [
+        { paths: outer, alignment: stroke.alignment },
+        {
+            paths: holes,
+            alignment: stroke.alignment === StrokeAlignment.Outside
+                ? StrokeAlignment.Inside
+                : StrokeAlignment.Outside,
+        },
+    ].filter(({ paths }) => paths.length > 0);
+}
 
 const coverageBody = `
-  return clamp(0.5 + (width - distance) / pixelWidth, 0.0, 1.0)
-    - clamp(0.5 - (width + distance) / pixelWidth, 0.0, 1.0);
+  return clamp(0.5 + (width * (1.0 - alignment) - distance) / pixelWidth, 0.0, 1.0)
+    - clamp(0.5 - (width * alignment + distance) / pixelWidth, 0.0, 1.0);
 `;
 const distanceBody = `
   return max(max(offset - position, position - offset - 1.0), 0.0);
 `;
 const radiusBody = `
-  if (fractionalWidth > 0.0) {
-    return min(max(floor(maxWidth), ceil(fractionalWidth + pixelWidth * 0.5)), ${MAX_ID_MASK_STROKE_WIDTH}.0);
+  if (maxWidth < 0.0) {
+    return 0.0;
   }
-  return min(floor(maxWidth), ${MAX_ID_MASK_STROKE_WIDTH}.0);
+  return min(ceil(maxWidth + pixelWidth * 0.5), ${MAX_ID_MASK_STROKE_WIDTH + 1}.0);
 `;
 const idMaskStrokeCoverageGlsl = `
-float subtexelStrokeCoverage(float distance, float width, float pixelWidth) {
+float sampleMaskIdCell(ivec2 cell) {
+  int x = clamp(cell.x, 0, int(uTextureSize.x) - 1);
+  int y = clamp(cell.y, 0, int(uTextureSize.y) - 1);
+  return floor(texelFetch(uTexture, ivec2(x, y), 0).r * 255.0 + 0.5);
+}
+
+float subtexelStrokeCoverage(float distance, float width, float alignment, float pixelWidth) {
   ${coverageBody}
 }
 
@@ -14412,42 +15495,55 @@ float neighborCellDistance(float offset, float position) {
   ${distanceBody}
 }
 
-float strokeScanRadius(float maxWidth, float fractionalWidth, float pixelWidth) {
+float strokeScanRadius(float maxWidth, float pixelWidth) {
   ${radiusBody}
 }
 
-bool isBoundary(float centerId, vec2 texel) {
-  return
-    differs(sampleMaskId(vUV + vec2(texel.x, 0.0)), centerId) ||
-    differs(sampleMaskId(vUV + vec2(-texel.x, 0.0)), centerId) ||
-    differs(sampleMaskId(vUV + vec2(0.0, texel.y)), centerId) ||
-    differs(sampleMaskId(vUV + vec2(0.0, -texel.y)), centerId);
+float strokeWidthInTexels(float maskId, float pixelWidth) {
+  float alignment = readStrokeAlignment(maskId);
+  float sideFraction = max(alignment, 1.0 - alignment);
+  return min(readStrokeWidth(maskId) * pixelWidth * uStrokePixelRatio, ${MAX_ID_MASK_STROKE_WIDTH}.0 / sideFraction);
 }
 
-float innerStrokeCoverage(float centerId, vec2 texel, vec2 cell, float width, float pixelWidth) {
-  if (width >= 1.0) {
-    return isBoundary(centerId, texel) ? 1.0 : 0.0;
-  }
+float innerStrokeCoverage(float centerId, ivec2 sourceCell, vec2 cell, float width, float pixelWidth) {
+  if (width <= 0.0) return 0.0;
+  float alignment = readStrokeAlignment(centerId);
+  int radius = int(strokeScanRadius(width * alignment, pixelWidth));
+  float nearestDistance = width * alignment + pixelWidth * 0.5;
+  float minimumDistance = min(min(cell.x, 1.0 - cell.x), min(cell.y, 1.0 - cell.y));
 
-  float coverage = 0.0;
-  if (differs(sampleMaskId(vUV + vec2(texel.x, 0.0)), centerId)) {
-    coverage = max(coverage, subtexelStrokeCoverage(1.0 - cell.x, width, pixelWidth));
-  }
-  if (differs(sampleMaskId(vUV + vec2(-texel.x, 0.0)), centerId)) {
-    coverage = max(coverage, subtexelStrokeCoverage(cell.x, width, pixelWidth));
-  }
-  if (differs(sampleMaskId(vUV + vec2(0.0, texel.y)), centerId)) {
-    coverage = max(coverage, subtexelStrokeCoverage(1.0 - cell.y, width, pixelWidth));
-  }
-  if (differs(sampleMaskId(vUV + vec2(0.0, -texel.y)), centerId)) {
-    coverage = max(coverage, subtexelStrokeCoverage(cell.y, width, pixelWidth));
+  for (int offsetY = radius; offsetY >= -radius; offsetY -= 1) {
+    for (int offsetX = radius; offsetX >= -radius; offsetX -= 1) {
+      if (offsetX == 0 && offsetY == 0) {
+        continue;
+      }
+      float distance = max(
+        neighborCellDistance(float(offsetX), cell.x),
+        neighborCellDistance(float(offsetY), cell.y)
+      );
+      if (distance >= nearestDistance) {
+        continue;
+      }
+      float maskId = sampleMaskIdCell(sourceCell + ivec2(offsetX, offsetY));
+      if (differs(maskId, centerId)) {
+        nearestDistance = distance;
+        if (distance <= minimumDistance) {
+          return subtexelStrokeCoverage(-distance, width, alignment, pixelWidth);
+        }
+      }
+    }
   }
-  return coverage;
+  return subtexelStrokeCoverage(-nearestDistance, width, alignment, pixelWidth);
 }
 
 // Descending offsets give the outer border its palette priority.
-vec2 findNeighborStroke(float centerId, vec2 texel, vec2 cell, float pixelWidth) {
-  int radius = int(strokeScanRadius(uMaxStrokeWidth, uMaxFractionalStrokeWidth, pixelWidth));
+vec2 findNeighborStroke(float centerId, ivec2 sourceCell, vec2 cell, float pixelWidth) {
+  float maxWidth = min(uMaxStrokeWidth * pixelWidth * uStrokePixelRatio, ${MAX_ID_MASK_STROKE_WIDTH}.0);
+  int radius = int(strokeScanRadius(maxWidth, pixelWidth));
+  vec2 stroke = vec2(0.0);
+  float nearestDistance = maxWidth + pixelWidth * 0.5;
+  float minimumDistance = min(min(cell.x, 1.0 - cell.x), min(cell.y, 1.0 - cell.y));
+  if (uBorderEnabled <= 0.5) return stroke;
 
   for (int offsetY = radius; offsetY >= -radius; offsetY -= 1) {
     for (int offsetX = radius; offsetX >= -radius; offsetX -= 1) {
@@ -14455,35 +15551,44 @@ vec2 findNeighborStroke(float centerId, vec2 texel, vec2 cell, float pixelWidth)
         continue;
       }
 
-      float maskId = sampleMaskId(vUV + vec2(float(offsetX), float(offsetY)) * texel);
-      if (maskId < 0.5 || !differs(maskId, centerId)) {
+      float distance = max(
+        neighborCellDistance(float(offsetX), cell.x),
+        neighborCellDistance(float(offsetY), cell.y)
+      );
+      if (distance >= nearestDistance) {
+        continue;
+      }
+      float maskId = sampleMaskIdCell(sourceCell + ivec2(offsetX, offsetY));
+      if (maskId < 0.5 || !differs(maskId, centerId) ||
+          (stroke.x > 0.5 && differs(maskId, stroke.x))) {
         continue;
       }
 
-      float width = readStrokeWidth(maskId);
-      if (width >= 1.0) {
-        float distance = max(abs(float(offsetX)), abs(float(offsetY)));
-        if (width >= distance && readStroke(maskId).a > 0.0) {
-          return vec2(maskId, 1.0);
-        }
-      } else if (width > 0.0 && readStroke(maskId).a > 0.0) {
-        float distance = max(
-          neighborCellDistance(float(offsetX), cell.x),
-          neighborCellDistance(float(offsetY), cell.y)
-        );
-        float coverage = subtexelStrokeCoverage(distance, width, pixelWidth);
+      float width = strokeWidthInTexels(maskId, pixelWidth);
+      if (width > 0.0 && readStroke(maskId).a > 0.0) {
+        float coverage = subtexelStrokeCoverage(distance, width, readStrokeAlignment(maskId), pixelWidth);
         if (coverage > 0.0) {
-          return vec2(maskId, coverage);
+          stroke = vec2(maskId, coverage);
+          nearestDistance = distance;
+          if (distance <= minimumDistance) {
+            return stroke;
+          }
         }
       }
     }
   }
 
-  return vec2(0.0);
+  return stroke;
 }
 `;
 const idMaskStrokeCoverageWgsl = `
-fn subtexelStrokeCoverage(distance: f32, width: f32, pixelWidth: f32) -> f32 {
+fn sampleMaskIdCell(cell: vec2<i32>) -> f32 {
+  let x = clamp(cell.x, 0, i32(maskUniforms.uTextureSize.x) - 1);
+  let y = clamp(cell.y, 0, i32(maskUniforms.uTextureSize.y) - 1);
+  return floor(textureLoad(uTexture, vec2<i32>(x, y), 0).r * 255.0 + 0.5);
+}
+
+fn subtexelStrokeCoverage(distance: f32, width: f32, alignment: f32, pixelWidth: f32) -> f32 {
   ${coverageBody}
 }
 
@@ -14491,45 +15596,55 @@ fn neighborCellDistance(offset: f32, position: f32) -> f32 {
   ${distanceBody}
 }
 
-fn strokeScanRadius(maxWidth: f32, fractionalWidth: f32, pixelWidth: f32) -> f32 {
+fn strokeScanRadius(maxWidth: f32, pixelWidth: f32) -> f32 {
   ${radiusBody}
 }
 
-fn isBoundary(uv: vec2<f32>, centerId: f32, texel: vec2<f32>) -> bool {
-  return
-    differs(sampleMaskId(uv + vec2<f32>(texel.x, 0.0)), centerId) ||
-    differs(sampleMaskId(uv + vec2<f32>(-texel.x, 0.0)), centerId) ||
-    differs(sampleMaskId(uv + vec2<f32>(0.0, texel.y)), centerId) ||
-    differs(sampleMaskId(uv + vec2<f32>(0.0, -texel.y)), centerId);
+fn strokeWidthInTexels(maskId: f32, pixelWidth: f32) -> f32 {
+  let alignment = readStrokeAlignment(maskId);
+  let sideFraction = max(alignment, 1.0 - alignment);
+  return min(readStrokeWidth(maskId) * pixelWidth * maskUniforms.uStrokePixelRatio, ${MAX_ID_MASK_STROKE_WIDTH}.0 / sideFraction);
 }
 
-fn innerStrokeCoverage(uv: vec2<f32>, centerId: f32, texel: vec2<f32>, cell: vec2<f32>, width: f32, pixelWidth: f32) -> f32 {
-  if (width >= 1.0) {
-    if (isBoundary(uv, centerId, texel)) {
-      return 1.0;
-    }
-    return 0.0;
-  }
+fn innerStrokeCoverage(centerId: f32, sourceCell: vec2<i32>, cell: vec2<f32>, width: f32, pixelWidth: f32) -> f32 {
+  if (width <= 0.0) { return 0.0; }
+  let alignment = readStrokeAlignment(centerId);
+  let radius = i32(strokeScanRadius(width * alignment, pixelWidth));
+  var nearestDistance = width * alignment + pixelWidth * 0.5;
+  let minimumDistance = min(min(cell.x, 1.0 - cell.x), min(cell.y, 1.0 - cell.y));
 
-  var coverage = 0.0;
-  if (differs(sampleMaskId(uv + vec2<f32>(texel.x, 0.0)), centerId)) {
-    coverage = max(coverage, subtexelStrokeCoverage(1.0 - cell.x, width, pixelWidth));
-  }
-  if (differs(sampleMaskId(uv + vec2<f32>(-texel.x, 0.0)), centerId)) {
-    coverage = max(coverage, subtexelStrokeCoverage(cell.x, width, pixelWidth));
-  }
-  if (differs(sampleMaskId(uv + vec2<f32>(0.0, texel.y)), centerId)) {
-    coverage = max(coverage, subtexelStrokeCoverage(1.0 - cell.y, width, pixelWidth));
-  }
-  if (differs(sampleMaskId(uv + vec2<f32>(0.0, -texel.y)), centerId)) {
-    coverage = max(coverage, subtexelStrokeCoverage(cell.y, width, pixelWidth));
+  for (var offsetY = radius; offsetY >= -radius; offsetY -= 1) {
+    for (var offsetX = radius; offsetX >= -radius; offsetX -= 1) {
+      if (offsetX == 0 && offsetY == 0) {
+        continue;
+      }
+      let distance = max(
+        neighborCellDistance(f32(offsetX), cell.x),
+        neighborCellDistance(f32(offsetY), cell.y)
+      );
+      if (distance >= nearestDistance) {
+        continue;
+      }
+      let maskId = sampleMaskIdCell(sourceCell + vec2<i32>(offsetX, offsetY));
+      if (differs(maskId, centerId)) {
+        nearestDistance = distance;
+        if (distance <= minimumDistance) {
+          return subtexelStrokeCoverage(-distance, width, alignment, pixelWidth);
+        }
+      }
+    }
   }
-  return coverage;
+  return subtexelStrokeCoverage(-nearestDistance, width, alignment, pixelWidth);
 }
 
 // Descending offsets give the outer border its palette priority.
-fn findNeighborStroke(uv: vec2<f32>, centerId: f32, texel: vec2<f32>, cell: vec2<f32>, pixelWidth: f32) -> vec2<f32> {
-  let radius = i32(strokeScanRadius(maskUniforms.uMaxStrokeWidth, maskUniforms.uMaxFractionalStrokeWidth, pixelWidth));
+fn findNeighborStroke(centerId: f32, sourceCell: vec2<i32>, cell: vec2<f32>, pixelWidth: f32) -> vec2<f32> {
+  let maxWidth = min(maskUniforms.uMaxStrokeWidth * pixelWidth * maskUniforms.uStrokePixelRatio, ${MAX_ID_MASK_STROKE_WIDTH}.0);
+  let radius = i32(strokeScanRadius(maxWidth, pixelWidth));
+  var stroke = vec2<f32>(0.0);
+  var nearestDistance = maxWidth + pixelWidth * 0.5;
+  let minimumDistance = min(min(cell.x, 1.0 - cell.x), min(cell.y, 1.0 - cell.y));
+  if (maskUniforms.uBorderEnabled <= 0.5) { return stroke; }
 
   for (var offsetY = radius; offsetY >= -radius; offsetY -= 1) {
     for (var offsetX = radius; offsetX >= -radius; offsetX -= 1) {
@@ -14537,45 +15652,44 @@ fn findNeighborStroke(uv: vec2<f32>, centerId: f32, texel: vec2<f32>, cell: vec2
         continue;
       }
 
-      let maskId = sampleMaskId(uv + vec2<f32>(f32(offsetX), f32(offsetY)) * texel);
-      if (maskId < 0.5 || !differs(maskId, centerId)) {
+      let distance = max(
+        neighborCellDistance(f32(offsetX), cell.x),
+        neighborCellDistance(f32(offsetY), cell.y)
+      );
+      if (distance >= nearestDistance) {
+        continue;
+      }
+      let maskId = sampleMaskIdCell(sourceCell + vec2<i32>(offsetX, offsetY));
+      if (maskId < 0.5 || !differs(maskId, centerId) ||
+          (stroke.x > 0.5 && differs(maskId, stroke.x))) {
         continue;
       }
 
-      let width = readStrokeWidth(maskId);
-      if (width >= 1.0) {
-        let distance = max(abs(f32(offsetX)), abs(f32(offsetY)));
-        if (width >= distance && readStroke(maskId).a > 0.0) {
-          return vec2<f32>(maskId, 1.0);
-        }
-      } else if (width > 0.0 && readStroke(maskId).a > 0.0) {
-        let distance = max(
-          neighborCellDistance(f32(offsetX), cell.x),
-          neighborCellDistance(f32(offsetY), cell.y)
-        );
-        let coverage = subtexelStrokeCoverage(distance, width, pixelWidth);
+      let width = strokeWidthInTexels(maskId, pixelWidth);
+      if (width > 0.0 && readStroke(maskId).a > 0.0) {
+        let coverage = subtexelStrokeCoverage(distance, width, readStrokeAlignment(maskId), pixelWidth);
         if (coverage > 0.0) {
-          return vec2<f32>(maskId, coverage);
+          stroke = vec2<f32>(maskId, coverage);
+          nearestDistance = distance;
+          if (distance <= minimumDistance) {
+            return stroke;
+          }
         }
       }
     }
   }
 
-  return vec2<f32>(0.0);
+  return stroke;
 }
 `;
 
-/**
- * GLSL charges a uniform array of scalars one uniform vector per element, the
- * same as an array of vec4, so the stroke widths ride four to a vector and an
- * entry costs 2.25 vectors instead of 3. The lanes only line up while the entry
- * count stays a multiple of four.
- */
+/** Packs width and alignment scalars within the fragment uniform budget. */
 const ID_MASK_STROKE_WIDTH_LANES = MAX_ID_MASK_PALETTE_ENTRIES / 4;
 const idMaskPaletteGlsl = `
 uniform vec4 uFillPalette[${MAX_ID_MASK_PALETTE_ENTRIES}];
 uniform vec4 uStrokePalette[${MAX_ID_MASK_PALETTE_ENTRIES}];
 uniform vec4 uStrokeWidths[${ID_MASK_STROKE_WIDTH_LANES}];
+uniform vec4 uStrokeAlignments[${ID_MASK_STROKE_WIDTH_LANES}];
 
 int paletteIndex(float maskId) {
   return int(clamp(maskId, 0.0, float(${MAX_ID_MASK_PALETTE_ENTRIES - 1})));
@@ -14594,10 +15708,16 @@ float readStrokeWidth(float maskId) {
 
   return uStrokeWidths[index / 4][index % 4];
 }
+
+float readStrokeAlignment(float maskId) {
+  int index = paletteIndex(maskId);
+  return uStrokeAlignments[index / 4][index % 4];
+}
 `;
 const idMaskFillPaletteWgslField = `uFillPalette: array<vec4<f32>, ${MAX_ID_MASK_PALETTE_ENTRIES}>,`;
 const idMaskStrokePaletteWgslField = `uStrokePalette: array<vec4<f32>, ${MAX_ID_MASK_PALETTE_ENTRIES}>,`;
 const idMaskStrokeWidthsWgslField = `uStrokeWidths: array<vec4<f32>, ${ID_MASK_STROKE_WIDTH_LANES}>,`;
+const idMaskStrokeAlignmentsWgslField = `uStrokeAlignments: array<vec4<f32>, ${ID_MASK_STROKE_WIDTH_LANES}>,`;
 /** Reads the uniform group a fragment stage must bind under the name maskUniforms. */
 const idMaskPaletteWgsl = `
 fn paletteIndex(maskId: f32) -> i32 {
@@ -14617,20 +15737,31 @@ fn readStrokeWidth(maskId: f32) -> f32 {
 
   return maskUniforms.uStrokeWidths[index / 4][index % 4];
 }
+
+fn readStrokeAlignment(maskId: f32) -> f32 {
+  let index = paletteIndex(maskId);
+  return maskUniforms.uStrokeAlignments[index / 4][index % 4];
+}
 `;
 
-function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, labelStyle, resolveContextState, }) {
+function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, labelStyle, getRenderedBoxes, resolveContextState, }) {
     const entries = [];
     let container;
     let currentLabelStyle = labelStyle;
     // A versioned source can replace a frame without changing its media time or
     // frame index. Buffered frames are immutable snapshots, so retain by object.
     let lastFrame;
+    let lastBoxFrame;
     let styleVersion = 0;
     let drawnStyleVersion = -1;
     let lastViewportScale = 0;
     let hitRects = [];
     let previewEntry;
+    let previewIndex = 0;
+    let backgroundFilter = null;
+    let backgroundFilters = null;
+    let backgroundsGrouped = false;
+    const backgroundGroups = [];
     const entriesByDetectionKey = new Map();
     const boundsByDetectionKey = new Map();
     const clearLayout = () => {
@@ -14642,6 +15773,7 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
         for (let index = startIndex; index < entries.length; index += 1) {
             entries[index].background.visible = false;
             entries[index].label.visible = false;
+            entries[index].instruction = undefined;
         }
     };
     const createEntry = () => {
@@ -14658,6 +15790,9 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
             labelBaseY: 0,
             text: null,
             textStyleKey: null,
+            textHeight: 0,
+            textWidth: 0,
+            instruction: undefined,
         };
         container?.addChild(entry.background, entry.label);
         return entry;
@@ -14673,10 +15808,71 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
     const hideCreationPreview = () => {
         if (!previewEntry)
             return;
-        previewEntry.background.visible = false;
-        previewEntry.label.visible = false;
+        previewEntry.background.visible = false;
+        previewEntry.label.visible = false;
+        previewEntry.instruction = undefined;
+    };
+    const syncBackgroundCaptures = () => {
+        if (!container || (!backgroundFilter && !backgroundsGrouped))
+            return;
+        for (const group of backgroundGroups) {
+            group.removeChildren();
+            group.filters = null;
+        }
+        container.removeChildren();
+        backgroundsGrouped = backgroundFilter !== null;
+        const orderedEntries = previewEntry
+            ? [
+                ...entries.slice(0, previewIndex),
+                previewEntry,
+                ...entries.slice(previewIndex),
+            ]
+            : entries;
+        if (!backgroundFilter) {
+            for (const entry of orderedEntries) {
+                container.addChild(entry.background, entry.label);
+            }
+            return;
+        }
+        let groupIndex = 0;
+        const run = [];
+        let runBounds;
+        const padding = backgroundFilter.padding / Math.max(lastViewportScale, 1e-6);
+        const flushRun = () => {
+            if (run.length === 0)
+                return;
+            if (run.some((entry) => entry.background.visible)) {
+                const group = (backgroundGroups[groupIndex] ??= new Container());
+                groupIndex += 1;
+                group.label = "label-background-aa";
+                group.filters = backgroundFilters;
+                container.addChild(group);
+                for (const entry of run)
+                    group.addChild(entry.background);
+            }
+            else {
+                for (const entry of run)
+                    container.addChild(entry.background);
+            }
+            for (const entry of run)
+                container.addChild(entry.label);
+            run.length = 0;
+            runBounds = undefined;
+        };
+        for (const entry of orderedEntries) {
+            if (entry.background.visible || entry.label.visible) {
+                const padded = resolveCaptureBounds(entry, padding);
+                // Reordering a disjoint run leaves translucent overlapping chips and
+                // their text in the same paint order as the original label pairs.
+                if (runBounds && rectanglesOverlap(runBounds, padded))
+                    flushRun();
+                runBounds = runBounds ? unionCaptureBounds(runBounds, padded) : padded;
+            }
+            run.push(entry);
+        }
+        flushRun();
     };
-    const redrawFrame = (frame, mediaTime, viewportScale) => {
+    const redrawFrame = (frame, mediaTime, viewportScale, renderedBoxes) => {
         let drawnCount = 0;
         clearLayout();
         if (!currentLabelStyle) {
@@ -14699,7 +15895,7 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
                 continue;
             }
             const entry = ensureEntry(drawnCount);
-            const hitRect = drawInstruction(entry, instruction, viewportScale);
+            const hitRect = drawInstruction(entry, instruction, viewportScale, renderedBoxes?.get(detectionIndex));
             const key = detectionKey$1(detection, detectionIndex);
             entriesByDetectionKey.set(key, entry);
             boundsByDetectionKey.set(key, {
@@ -14722,24 +15918,31 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
         drawFrame(mediaTime, viewportScale) {
             const resolvedViewportScale = viewportScale ?? 1;
             const frame = detectionTimeline.selectFrame(mediaTime);
+            const boxFrame = getRenderedBoxes?.();
+            const matchingBoxFrame = boxFrame?.frame === frame ? boxFrame : undefined;
             if (frame === lastFrame &&
+                matchingBoxFrame === lastBoxFrame &&
                 drawnStyleVersion === styleVersion &&
                 resolvedViewportScale === lastViewportScale) {
                 return;
             }
             lastFrame = frame;
+            lastBoxFrame = matchingBoxFrame;
             drawnStyleVersion = styleVersion;
             lastViewportScale = resolvedViewportScale;
             if (!frame) {
                 clearLayout();
                 hideEntriesFrom(0);
+                syncBackgroundCaptures();
                 return;
             }
-            redrawFrame(frame, mediaTime, resolvedViewportScale);
+            redrawFrame(frame, mediaTime, resolvedViewportScale, matchingBoxFrame?.rects);
+            syncBackgroundCaptures();
         },
-        drawCreationPreview(detection, mediaTime, viewportScale) {
+        drawCreationPreview(detection, mediaTime, viewportScale, renderedBox) {
             if (!detection || !currentLabelStyle) {
                 hideCreationPreview();
+                syncBackgroundCaptures();
                 return;
             }
             const resolvedViewportScale = viewportScale ?? 1;
@@ -14755,15 +15958,39 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
             });
             if (!instruction) {
                 hideCreationPreview();
+                syncBackgroundCaptures();
                 return;
             }
-            previewEntry ??= createEntry();
-            drawInstruction(previewEntry, instruction, resolvedViewportScale);
+            if (!previewEntry) {
+                previewIndex = entries.length;
+                previewEntry = createEntry();
+            }
+            drawInstruction(previewEntry, instruction, resolvedViewportScale, renderedBox);
+            syncBackgroundCaptures();
+        },
+        updateEditingBox(id, renderedBox) {
+            const key = `id:${String(id)}`;
+            const entry = entriesByDetectionKey.get(key);
+            const bounds = boundsByDetectionKey.get(key);
+            const instruction = entry?.instruction;
+            if (!entry || !bounds || !instruction?.background)
+                return;
+            const corners = resolveRoundedCorners(instruction.background, instruction.placement ?? LabelPlacement.Top, bounds, renderedBox, lastViewportScale);
+            drawBackground(entry, instruction.background, bounds.baseX, bounds.baseY, bounds.width, bounds.height, lastViewportScale, corners);
+            entry.background.x = bounds.x;
+            entry.background.y = bounds.y;
         },
         setLabelStyle(nextLabelStyle) {
             currentLabelStyle = nextLabelStyle ?? undefined;
             styleVersion += 1;
         },
+        setBackgroundAntialiasFilter(filter) {
+            if (filter === backgroundFilter)
+                return;
+            backgroundFilter = filter;
+            backgroundFilters = filter ? [filter] : null;
+            syncBackgroundCaptures();
+        },
         translateDetection(id, x, y) {
             const key = `id:${String(id)}`;
             const entry = entriesByDetectionKey.get(key);
@@ -14781,6 +16008,7 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
                     y: bounds.baseY + y,
                 });
             }
+            syncBackgroundCaptures();
             return true;
         },
         getDetectionLabelBounds(id) {
@@ -14817,6 +16045,13 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
                 : null;
         },
         destroy() {
+            for (const group of backgroundGroups) {
+                group.filters = null;
+                if (!group.parent)
+                    group.destroy({ children: false });
+            }
+            backgroundFilter = null;
+            backgroundFilters = null;
             hideEntriesFrom(0);
             hideCreationPreview();
             entries.length = 0;
@@ -14826,7 +16061,8 @@ function createPixiLabelLayer({ Container, Graphics, Text, detectionTimeline, la
         },
     };
 }
-function drawInstruction(entry, instruction, viewportScale) {
+function drawInstruction(entry, instruction, viewportScale, renderedBox) {
+    entry.instruction = instruction;
     const textStyle = resolveTextStyle(instruction.textStyle, viewportScale);
     const textStyleKey = createTextStyleKey(textStyle);
     const textAlpha = instruction.textStyle?.alpha ?? 1;
@@ -14846,8 +16082,10 @@ function drawInstruction(entry, instruction, viewportScale) {
     const background = instruction.background;
     const paddingX = (background?.paddingX ?? 0) / viewportScale;
     const paddingY = (background?.paddingY ?? 0) / viewportScale;
-    const width = entry.label.width + paddingX * 2;
-    const height = entry.label.height + paddingY * 2;
+    entry.textWidth = entry.label.width;
+    entry.textHeight = entry.label.height;
+    const width = entry.textWidth + paddingX * 2;
+    const height = entry.textHeight + paddingY * 2;
     const { x, y } = resolveLabelPosition(instruction, width, height);
     entry.label.x = x + paddingX;
     entry.label.y = y + paddingY;
@@ -14858,9 +16096,41 @@ function drawInstruction(entry, instruction, viewportScale) {
         entry.backgroundKey = null;
         return { height, width, x, y };
     }
-    drawBackground(entry, background, x, y, width, height, viewportScale);
+    const corners = resolveRoundedCorners(background, instruction.placement ?? LabelPlacement.Top, { x, y, width, height }, renderedBox, viewportScale);
+    drawBackground(entry, background, x, y, width, height, viewportScale, corners);
     return { height, width, x, y };
 }
+function resolveCaptureBounds(entry, padding) {
+    const { background, label } = entry;
+    const x = Math.min(background.visible ? background.x : Infinity, label.visible ? label.x : Infinity);
+    const y = Math.min(background.visible ? background.y : Infinity, label.visible ? label.y : Infinity);
+    return {
+        height: Math.max(background.visible ? background.y + entry.backgroundHeight : -Infinity, label.visible ? label.y + entry.textHeight : -Infinity) -
+            y +
+            padding * 2,
+        width: Math.max(background.visible ? background.x + entry.backgroundWidth : -Infinity, label.visible ? label.x + entry.textWidth : -Infinity) -
+            x +
+            padding * 2,
+        x: x - padding,
+        y: y - padding,
+    };
+}
+function rectanglesOverlap(left, right) {
+    return (left.x < right.x + right.width &&
+        right.x < left.x + left.width &&
+        left.y < right.y + right.height &&
+        right.y < left.y + left.height);
+}
+function unionCaptureBounds(left, right) {
+    const x = Math.min(left.x, right.x);
+    const y = Math.min(left.y, right.y);
+    return {
+        height: Math.max(left.y + left.height, right.y + right.height) - y,
+        width: Math.max(left.x + left.width, right.x + right.width) - x,
+        x,
+        y,
+    };
+}
 function resolveLabelPosition(instruction, width, height) {
     const { rect } = instruction;
     const offsetX = instruction.offsetX ?? 0;
@@ -14894,9 +16164,9 @@ function resolveLabelPosition(instruction, width, height) {
             };
     }
 }
-function drawBackground(entry, background, x, y, width, height, viewportScale) {
+function drawBackground(entry, background, x, y, width, height, viewportScale, corners) {
     const graphics = entry.background;
-    const backgroundKey = createBackgroundKey(background);
+    const backgroundKey = createBackgroundKey(background, corners);
     graphics.visible = true;
     graphics.x = x;
     graphics.y = y;
@@ -14911,8 +16181,8 @@ function drawBackground(entry, background, x, y, width, height, viewportScale) {
     entry.backgroundWidth = width;
     entry.backgroundHeight = height;
     graphics.clear();
-    const radius = (background.cornerRadius ?? 0) / viewportScale;
-    if (background.topCornersOnly && radius > 0) {
+    const radius = Math.min((background.cornerRadius ?? 0) / viewportScale, width / 2, height / 2);
+    if (corners === "top" && radius > 0) {
         graphics
             .moveTo(0, height)
             .lineTo(0, radius)
@@ -14922,6 +16192,16 @@ function drawBackground(entry, background, x, y, width, height, viewportScale) {
             .lineTo(width, height)
             .closePath();
     }
+    else if (corners === "bottom" && radius > 0) {
+        graphics
+            .moveTo(0, 0)
+            .lineTo(width, 0)
+            .lineTo(width, height - radius)
+            .quadraticCurveTo(width, height, width - radius, height)
+            .lineTo(radius, height)
+            .quadraticCurveTo(0, height, 0, height - radius)
+            .closePath();
+    }
     else {
         graphics.roundRect(0, 0, width, height, radius);
     }
@@ -14946,14 +16226,46 @@ function createTextStyleKey(textStyle) {
         textStyle.fontWeight,
     ].join(":");
 }
-function createBackgroundKey(background) {
+function resolveRoundedCorners(background, placement, label, renderedBox, viewportScale) {
+    if (background.topCornersOnly !== undefined) {
+        return background.topCornersOnly ? "top" : "all";
+    }
+    if (!renderedBox)
+        return "all";
+    const box = centerRectToTopLeftRect(renderedBox);
+    const epsilon = 1e-6 / viewportScale;
+    if (Math.min(label.x + label.width, box.x + box.width) -
+        Math.max(label.x, box.x) <=
+        epsilon) {
+        return "all";
+    }
+    switch (placement) {
+        case LabelPlacement.Top:
+            return Math.abs(label.y + label.height - box.y) <= epsilon
+                ? "top"
+                : "all";
+        case LabelPlacement.Bottom:
+            return Math.abs(label.y - box.y - box.height) <= epsilon
+                ? "bottom"
+                : "all";
+        case LabelPlacement.InsideTop:
+            return Math.abs(label.y - box.y) <= epsilon ? "bottom" : "all";
+        case LabelPlacement.InsideBottom:
+            return Math.abs(label.y + label.height - box.y - box.height) <= epsilon
+                ? "top"
+                : "all";
+        case LabelPlacement.Center:
+            return "all";
+    }
+}
+function createBackgroundKey(background, corners) {
     return [
         background.alpha,
         background.color,
         background.cornerRadius ?? 0,
         background.paddingX ?? 0,
         background.paddingY ?? 0,
-        background.topCornersOnly ? 1 : 0,
+        corners,
     ].join(":");
 }
 function detectionKey$1(detection, detectionIndex) {
@@ -15256,7 +16568,9 @@ function createPixiInteractionPresentationLayer(options) {
     let activePicks = [];
     let currentMediaTime = 0;
     let viewportScale = 1;
+    let strokePixelRatio = 1;
     let maskRenderer;
+    let labelDisplay = null;
     let screenStrokeRenderer;
     let isDestroyed = false;
     const syntheticTimeline = createSyntheticTimeline(() => syntheticFrame);
@@ -15290,17 +16604,20 @@ function createPixiInteractionPresentationLayer(options) {
             mediaHeight = height;
             const container = new options.Container();
             const boxGraphics = new options.Graphics();
-            const labels = labelLayer.createContainer();
+            labelDisplay = labelLayer.createContainer();
             const vectors = vectorLayer.createContainer();
             boxLayer.attachGraphics(boxGraphics);
             maskRenderer = createMaskRenderer();
             if (maskRenderer) {
                 container.addChild(maskRenderer.mesh);
             }
-            container.addChild(boxGraphics, vectors, labels);
+            container.addChild(boxGraphics, vectors);
             displayContainer = container;
             return container;
         },
+        getLabelDisplay() {
+            return labelDisplay;
+        },
         destroy() {
             if (isDestroyed) {
                 return;
@@ -15311,6 +16628,7 @@ function createPixiInteractionPresentationLayer(options) {
             maskRenderer?.destroy();
             screenStrokeRenderer?.destroy();
             labelLayer.destroy();
+            labelDisplay = null;
             vectorLayer.destroy();
         },
         releaseMaskTexture(texture) {
@@ -15320,6 +16638,7 @@ function createPixiInteractionPresentationLayer(options) {
         drawFrame(context) {
             currentMediaTime = context.mediaTime;
             viewportScale = context.viewportScale ?? 1;
+            strokePixelRatio = context.strokePixelRatio ?? 1;
             if (isDestroyed || !interactionStyle || !context.frame) {
                 clear();
                 return;
@@ -15353,6 +16672,9 @@ function createPixiInteractionPresentationLayer(options) {
             labelLayer.setLabelStyle(labelStyle);
             vectorLayer.setStyles({ polygonStyle, polylineStyle, keypointStyle });
         },
+        setBackgroundAntialiasFilter(filter) {
+            labelLayer.setBackgroundAntialiasFilter(filter);
+        },
     };
     function getActivePicks({ frame, hoveredPick, mediaTime, selectedPick, selectedPicks, }) {
         if (!frame || !interactionStyle) {
@@ -15464,9 +16786,9 @@ function createPixiInteractionPresentationLayer(options) {
             screenStrokeRenderer?.hide();
             return;
         }
-        maskRenderer.render(artifact.frame, artifact.texture, instructions);
+        maskRenderer.render(artifact.frame, artifact.texture, instructions, strokePixelRatio);
         if (!screenStrokeRenderer &&
-            instructions.some(({ instruction }) => instruction.stroke?.widthUnit === "screen")) {
+            instructions.some(({ instruction }) => instruction.stroke?.widthUnit !== undefined)) {
             screenStrokeRenderer = createPixiMaskScreenStrokeRenderer({
                 Graphics: options.Graphics,
                 mediaWidth,
@@ -15633,6 +16955,7 @@ function createInteractionMaskRenderer(options) {
     const fillPalette = new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES * 4);
     const strokePalette = new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES * 4);
     const strokeWidths = new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES);
+    const strokeAlignments = new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES);
     const uniforms = new options.UniformGroup({
         uFillPalette: {
             size: MAX_ID_MASK_PALETTE_ENTRIES,
@@ -15640,7 +16963,8 @@ function createInteractionMaskRenderer(options) {
             value: fillPalette,
         },
         uMaxStrokeWidth: { type: "f32", value: 0 },
-        uMaxFractionalStrokeWidth: { type: "f32", value: 0 },
+        uBorderEnabled: { type: "f32", value: 0 },
+        uStrokePixelRatio: { type: "f32", value: 1 },
         uStrokePalette: {
             size: MAX_ID_MASK_PALETTE_ENTRIES,
             type: "vec4<f32>",
@@ -15651,6 +16975,11 @@ function createInteractionMaskRenderer(options) {
             type: "vec4<f32>",
             value: strokeWidths,
         },
+        uStrokeAlignments: {
+            size: ID_MASK_STROKE_WIDTH_LANES,
+            type: "vec4<f32>",
+            value: strokeAlignments,
+        },
         uTextureSize: {
             type: "vec2<f32>",
             value: new Float32Array([options.mediaWidth, options.mediaHeight]),
@@ -15700,7 +17029,7 @@ function createInteractionMaskRenderer(options) {
             mesh.visible = false;
         },
         mesh,
-        render(frame, texture, instructions) {
+        render(frame, texture, instructions, strokePixelRatio) {
             if (frame.kind !== PreparedMaskFrameKind.IdMask) {
                 mesh.visible = false;
                 return;
@@ -15709,8 +17038,9 @@ function createInteractionMaskRenderer(options) {
             fillPalette.fill(0);
             strokePalette.fill(0);
             strokeWidths.fill(0);
+            strokeAlignments.fill(0);
             let maxStrokeWidth = 0;
-            let maxFractionalStrokeWidth = 0;
+            let hasStroke = false;
             for (const { detectionIndex, instruction } of instructions) {
                 const maskId = resolveIdMaskPaletteId(detectionIndex);
                 // A raster naming this detection is one the palette accepted, so an id
@@ -15720,26 +17050,31 @@ function createInteractionMaskRenderer(options) {
                 }
                 writeIdMaskPaletteEntry(fillPalette, maskId, instruction.color, instruction.alpha);
                 if (instruction.stroke &&
-                    instruction.stroke.widthUnit !== "screen" &&
+                    instruction.stroke.widthUnit === undefined &&
                     instruction.stroke.width > 0) {
                     writeIdMaskPaletteEntry(strokePalette, maskId, instruction.stroke.color, instruction.stroke.alpha);
-                    strokeWidths[maskId] = resolveIdMaskStrokeTexels(instruction.stroke.width, frame.sourceWidth, frame.width);
-                    maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidths[maskId] ?? 0);
-                    const width = strokeWidths[maskId] ?? 0;
-                    if (width > 0 && width < 1) {
-                        maxFractionalStrokeWidth = Math.max(maxFractionalStrokeWidth, width);
-                    }
+                    const alignment = instruction.stroke.alignment === StrokeAlignment.Inside
+                        ? 1
+                        : instruction.stroke.alignment === StrokeAlignment.Center
+                            ? 0.5
+                            : 0;
+                    strokeWidths[maskId] = instruction.stroke.width;
+                    strokeAlignments[maskId] = alignment;
+                    hasStroke = true;
+                    maxStrokeWidth = Math.max(maxStrokeWidth, instruction.stroke.width * (1 - alignment));
                 }
             }
             uniforms.uniforms.uFillPalette = fillPalette;
             uniforms.uniforms.uStrokePalette = strokePalette;
             uniforms.uniforms.uStrokeWidths = strokeWidths;
+            uniforms.uniforms.uStrokeAlignments = strokeAlignments;
+            uniforms.uniforms.uBorderEnabled = hasStroke ? 1 : 0;
+            uniforms.uniforms.uStrokePixelRatio = strokePixelRatio;
             uniforms.uniforms.uTextureSize = new Float32Array([
                 frame.width,
                 frame.height,
             ]);
             uniforms.uniforms.uMaxStrokeWidth = maxStrokeWidth;
-            uniforms.uniforms.uMaxFractionalStrokeWidth = maxFractionalStrokeWidth;
             uniforms.update();
             mesh.visible = true;
         },
@@ -15794,14 +17129,11 @@ in vec4 vColor;
 uniform sampler2D uTexture;
 uniform vec2 uTextureSize;
 uniform float uMaxStrokeWidth;
-uniform float uMaxFractionalStrokeWidth;
+uniform float uBorderEnabled;
+uniform float uStrokePixelRatio;
 ${idMaskPaletteGlsl}
 out vec4 finalColor;
 
-float sampleMaskId(vec2 uv) {
-  return floor(texture(uTexture, uv).r * 255.0 + 0.5);
-}
-
 vec4 premultiplyAlpha(vec4 color) {
   return vec4(color.rgb * color.a, color.a);
 }
@@ -15813,19 +17145,20 @@ bool differs(float left, float right) {
 ${idMaskStrokeCoverageGlsl}
 
 void main(void) {
-  float centerId = sampleMaskId(vUV);
-  vec2 texel = 1.0 / uTextureSize;
-  vec2 cell = fract(vUV * uTextureSize);
-  vec2 footprint = fwidth(vUV * uTextureSize);
+  vec2 position = vUV * uTextureSize;
+  ivec2 sourceCell = ivec2(floor(position));
+  float centerId = sampleMaskIdCell(sourceCell);
+  vec2 cell = fract(position);
+  vec2 footprint = fwidth(position);
   float pixelWidth = max(max(footprint.x, footprint.y), 0.00001);
 
   if (centerId > 0.5) {
     vec4 fill = readFill(centerId);
     vec4 stroke = readStroke(centerId);
 
-    float width = readStrokeWidth(centerId);
-    if (uMaxStrokeWidth > 0.0 && width > 0.0 && stroke.a > 0.0) {
-      float coverage = innerStrokeCoverage(centerId, texel, cell, width, pixelWidth);
+    float width = strokeWidthInTexels(centerId, pixelWidth);
+    if (uBorderEnabled > 0.5 && width > 0.0 && stroke.a > 0.0) {
+      float coverage = innerStrokeCoverage(centerId, sourceCell, cell, width, pixelWidth);
       if (coverage >= 1.0) {
         finalColor = premultiplyAlpha(stroke * vColor);
         return;
@@ -15840,8 +17173,8 @@ void main(void) {
     return;
   }
 
-  if (uMaxStrokeWidth > 0.0) {
-    vec2 border = findNeighborStroke(centerId, texel, cell, pixelWidth);
+  if (uBorderEnabled > 0.5) {
+    vec2 border = findNeighborStroke(centerId, sourceCell, cell, pixelWidth);
 
     if (border.x > 0.5) {
       finalColor = premultiplyAlpha(readStroke(border.x) * vColor) * border.y;
@@ -15856,9 +17189,11 @@ const interactionMaskFragmentWgsl = `
 struct InteractionMaskUniforms {
   ${idMaskFillPaletteWgslField}
   uMaxStrokeWidth: f32,
-  uMaxFractionalStrokeWidth: f32,
+  uBorderEnabled: f32,
+  uStrokePixelRatio: f32,
   ${idMaskStrokePaletteWgslField}
   ${idMaskStrokeWidthsWgslField}
+  ${idMaskStrokeAlignmentsWgslField}
   uTextureSize: vec2<f32>,
 }
 
@@ -15866,9 +17201,6 @@ struct InteractionMaskUniforms {
 @group(2) @binding(1) var uTexture: texture_2d<f32>;
 @group(2) @binding(2) var uSampler: sampler;
 
-fn sampleMaskId(uv: vec2<f32>) -> f32 {
-  return floor(textureSampleLevel(uTexture, uSampler, uv, 0.0).r * 255.0 + 0.5);
-}
 ${idMaskPaletteWgsl}
 fn premultiplyAlpha(color: vec4<f32>) -> vec4<f32> {
   return vec4<f32>(color.rgb * color.a, color.a);
@@ -15885,19 +17217,20 @@ fn mainFragment(
   @location(0) vUV: vec2<f32>,
   @location(1) vColor: vec4<f32>,
 ) -> @location(0) vec4<f32> {
-  let centerId = sampleMaskId(vUV);
-  let texel = 1.0 / maskUniforms.uTextureSize;
-  let cell = fract(vUV * maskUniforms.uTextureSize);
-  let footprint = fwidth(vUV * maskUniforms.uTextureSize);
+  let position = vUV * maskUniforms.uTextureSize;
+  let sourceCell = vec2<i32>(floor(position));
+  let centerId = sampleMaskIdCell(sourceCell);
+  let cell = fract(position);
+  let footprint = fwidth(position);
   let pixelWidth = max(max(footprint.x, footprint.y), 0.00001);
 
   if (centerId > 0.5) {
     let fill = readFill(centerId);
     let stroke = readStroke(centerId);
 
-    let width = readStrokeWidth(centerId);
-    if (maskUniforms.uMaxStrokeWidth > 0.0 && width > 0.0 && stroke.a > 0.0) {
-      let coverage = innerStrokeCoverage(vUV, centerId, texel, cell, width, pixelWidth);
+    let width = strokeWidthInTexels(centerId, pixelWidth);
+    if (maskUniforms.uBorderEnabled > 0.5 && width > 0.0 && stroke.a > 0.0) {
+      let coverage = innerStrokeCoverage(centerId, sourceCell, cell, width, pixelWidth);
       if (coverage >= 1.0) {
         return premultiplyAlpha(stroke * vColor);
       }
@@ -15909,8 +17242,8 @@ fn mainFragment(
     return premultiplyAlpha(fill * vColor);
   }
 
-  if (maskUniforms.uMaxStrokeWidth > 0.0) {
-    let border = findNeighborStroke(vUV, centerId, texel, cell, pixelWidth);
+  if (maskUniforms.uBorderEnabled > 0.5) {
+    let border = findNeighborStroke(centerId, sourceCell, cell, pixelWidth);
 
     if (border.x > 0.5) {
       return premultiplyAlpha(readStroke(border.x) * vColor) * border.y;
@@ -15922,6 +17255,7 @@ fn mainFragment(
 `;
 
 function createPixiIdMaskShaderRenderer(options) {
+    const defaultStrokeAlignments = new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES);
     const uniforms = new options.UniformGroup({
         uBorderEnabled: { type: "f32", value: 0 },
         uFillPalette: {
@@ -15930,7 +17264,7 @@ function createPixiIdMaskShaderRenderer(options) {
             value: new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES * 4),
         },
         uMaxStrokeWidth: { type: "f32", value: 0 },
-        uMaxFractionalStrokeWidth: { type: "f32", value: 0 },
+        uStrokePixelRatio: { type: "f32", value: 1 },
         uStrokePalette: {
             size: MAX_ID_MASK_PALETTE_ENTRIES,
             type: "vec4<f32>",
@@ -15941,6 +17275,11 @@ function createPixiIdMaskShaderRenderer(options) {
             type: "vec4<f32>",
             value: new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES),
         },
+        uStrokeAlignments: {
+            size: ID_MASK_STROKE_WIDTH_LANES,
+            type: "vec4<f32>",
+            value: defaultStrokeAlignments,
+        },
         uTextureSize: {
             type: "vec2<f32>",
             value: new Float32Array([options.mediaWidth, options.mediaHeight]),
@@ -15993,24 +17332,30 @@ function createPixiIdMaskShaderRenderer(options) {
             mesh.visible = false;
         },
         mesh,
-        render(frame, texture) {
+        render(frame, texture, strokePixelRatio = 1) {
             bindTexture(texture.source);
             uniforms.uniforms.uFillPalette = frame.fillPalette;
             uniforms.uniforms.uStrokePalette = frame.strokePalette;
             uniforms.uniforms.uStrokeWidths = frame.strokeWidths;
+            uniforms.uniforms.uStrokeAlignments =
+                frame.strokeAlignments ?? defaultStrokeAlignments;
+            uniforms.uniforms.uStrokePixelRatio = strokePixelRatio;
             uniforms.uniforms.uTextureSize = new Float32Array([
                 frame.width,
                 frame.height,
             ]);
             uniforms.uniforms.uBorderEnabled = frame.hasStroke ? 1 : 0;
-            uniforms.uniforms.uMaxStrokeWidth = Math.min(frame.maxStrokeWidth, MAX_ID_MASK_STROKE_WIDTH);
-            uniforms.uniforms.uMaxFractionalStrokeWidth = frame.strokeWidths.reduce((maximum, width) => width > 0 && width < 1 ? Math.max(maximum, width) : maximum, 0);
+            uniforms.uniforms.uMaxStrokeWidth = frame.maxStrokeWidth;
             uniforms.update();
             mesh.visible = true;
         },
         setOpacity(opacity) {
             mesh.alpha = opacity;
         },
+        setStrokePixelRatio(pixelRatio) {
+            uniforms.uniforms.uStrokePixelRatio = pixelRatio;
+            uniforms.update();
+        },
     };
     function bindTexture(source) {
         try {
@@ -16063,14 +17408,10 @@ uniform sampler2D uTexture;
 uniform vec2 uTextureSize;
 uniform float uBorderEnabled;
 uniform float uMaxStrokeWidth;
-uniform float uMaxFractionalStrokeWidth;
+uniform float uStrokePixelRatio;
 ${idMaskPaletteGlsl}
 out vec4 finalColor;
 
-float sampleMaskId(vec2 uv) {
-  return floor(texture(uTexture, uv).r * 255.0 + 0.5);
-}
-
 vec4 premultiplyAlpha(vec4 color) {
   return vec4(color.rgb * color.a, color.a);
 }
@@ -16082,15 +17423,16 @@ bool differs(float left, float right) {
 ${idMaskStrokeCoverageGlsl}
 
 void main(void) {
-  float centerId = sampleMaskId(vUV);
-  vec2 texel = 1.0 / uTextureSize;
-  vec2 cell = fract(vUV * uTextureSize);
-  vec2 footprint = fwidth(vUV * uTextureSize);
+  vec2 position = vUV * uTextureSize;
+  ivec2 sourceCell = ivec2(floor(position));
+  float centerId = sampleMaskIdCell(sourceCell);
+  vec2 cell = fract(position);
+  vec2 footprint = fwidth(position);
   float pixelWidth = max(max(footprint.x, footprint.y), 0.00001);
 
   if (centerId < 0.5) {
-    if (uBorderEnabled > 0.5 && uMaxStrokeWidth > 0.0) {
-      vec2 border = findNeighborStroke(centerId, texel, cell, pixelWidth);
+    if (uBorderEnabled > 0.5) {
+      vec2 border = findNeighborStroke(centerId, sourceCell, cell, pixelWidth);
 
       if (border.x > 0.5) {
         finalColor = premultiplyAlpha(readStroke(border.x) * vColor) * border.y;
@@ -16103,9 +17445,9 @@ void main(void) {
   }
 
   if (uBorderEnabled > 0.5) {
-    float width = readStrokeWidth(centerId);
+    float width = strokeWidthInTexels(centerId, pixelWidth);
     if (width > 0.0 && readStroke(centerId).a > 0.0) {
-      float coverage = innerStrokeCoverage(centerId, texel, cell, width, pixelWidth);
+      float coverage = innerStrokeCoverage(centerId, sourceCell, cell, width, pixelWidth);
       if (coverage >= 1.0) {
         finalColor = premultiplyAlpha(readStroke(centerId) * vColor);
         return;
@@ -16129,9 +17471,10 @@ struct MaskUniforms {
   uBorderEnabled: f32,
   ${idMaskFillPaletteWgslField}
   uMaxStrokeWidth: f32,
-  uMaxFractionalStrokeWidth: f32,
+  uStrokePixelRatio: f32,
   ${idMaskStrokePaletteWgslField}
   ${idMaskStrokeWidthsWgslField}
+  ${idMaskStrokeAlignmentsWgslField}
   uTextureSize: vec2<f32>,
 }
 
@@ -16139,9 +17482,6 @@ struct MaskUniforms {
 @group(2) @binding(1) var uTexture: texture_2d<f32>;
 @group(2) @binding(2) var uSampler: sampler;
 
-fn sampleMaskId(uv: vec2<f32>) -> f32 {
-  return floor(textureSampleLevel(uTexture, uSampler, uv, 0.0).r * 255.0 + 0.5);
-}
 ${idMaskPaletteWgsl}
 fn premultiplyAlpha(color: vec4<f32>) -> vec4<f32> {
   return vec4<f32>(color.rgb * color.a, color.a);
@@ -16158,15 +17498,16 @@ fn mainFragment(
   @location(0) vUV: vec2<f32>,
   @location(1) vColor: vec4<f32>,
 ) -> @location(0) vec4<f32> {
-  let centerId = sampleMaskId(vUV);
-  let texel = 1.0 / maskUniforms.uTextureSize;
-  let cell = fract(vUV * maskUniforms.uTextureSize);
-  let footprint = fwidth(vUV * maskUniforms.uTextureSize);
+  let position = vUV * maskUniforms.uTextureSize;
+  let sourceCell = vec2<i32>(floor(position));
+  let centerId = sampleMaskIdCell(sourceCell);
+  let cell = fract(position);
+  let footprint = fwidth(position);
   let pixelWidth = max(max(footprint.x, footprint.y), 0.00001);
 
   if (centerId < 0.5) {
-    if (maskUniforms.uBorderEnabled > 0.5 && maskUniforms.uMaxStrokeWidth > 0.0) {
-      let border = findNeighborStroke(vUV, centerId, texel, cell, pixelWidth);
+    if (maskUniforms.uBorderEnabled > 0.5) {
+      let border = findNeighborStroke(centerId, sourceCell, cell, pixelWidth);
 
       if (border.x > 0.5) {
         return premultiplyAlpha(readStroke(border.x) * vColor) * border.y;
@@ -16177,9 +17518,9 @@ fn mainFragment(
   }
 
   if (maskUniforms.uBorderEnabled > 0.5) {
-    let width = readStrokeWidth(centerId);
+    let width = strokeWidthInTexels(centerId, pixelWidth);
     if (width > 0.0 && readStroke(centerId).a > 0.0) {
-      let coverage = innerStrokeCoverage(vUV, centerId, texel, cell, width, pixelWidth);
+      let coverage = innerStrokeCoverage(centerId, sourceCell, cell, width, pixelWidth);
       if (coverage >= 1.0) {
         return premultiplyAlpha(readStroke(centerId) * vColor);
       }
@@ -16245,7 +17586,10 @@ function createPixiMaskLayer(options) {
     const haloTextures = new Map();
     const regionMaskTextures = new Map();
     const maskFrameOptions = options.renderPreparation?.maskFrame;
+    const capsRasterToDisplay = maskFrameOptions?.display !== undefined;
     let rasterDisplay = maskFrameOptions?.display;
+    let rasterResolutionScale = 1;
+    let strokeViewportScale;
     const preparedRenderWindow = createPreparedRenderWindow({
         artifactKind: options.artifactKind,
         detectionTimeline: options.detectionTimeline,
@@ -16269,6 +17613,7 @@ function createPixiMaskLayer(options) {
         resolveInstructions: options.resolveInstructions,
         resolveMaxRasterWidth,
         resolveMaskFrameBackingBytes,
+        resolveMaskDisplayWidth,
     });
     return {
         createSprite({ width, height }) {
@@ -16387,16 +17732,24 @@ function createPixiMaskLayer(options) {
         setPlaybackActive(active) {
             preparedRenderWindow.setPlaybackActive(active);
         },
-        setRasterDisplay(display) {
-            if (!rasterDisplay || isDestroyed)
+        setRasterDisplay(display, resolutionScale = 1) {
+            if (isDestroyed)
                 return;
             const previousWidth = resolveMaxRasterWidth();
             rasterDisplay = display;
+            rasterResolutionScale = resolutionScale;
+            idMaskRenderer?.setStrokePixelRatio(resolveDisplayPixelRatio(display) * resolutionScale);
             const nextWidth = resolveMaxRasterWidth();
             if (mediaWidth > 0 && previousWidth !== nextWidth) {
                 preparedRenderWindow.invalidateRasterSize();
             }
         },
+        setViewportScale(scale) {
+            if (isDestroyed || scale <= 0 || scale === strokeViewportScale)
+                return;
+            strokeViewportScale = scale;
+            preparedRenderWindow.invalidateMaskDisplayWidth();
+        },
         setTimelineContext(context) {
             preparedRenderWindow.setTimelineContext(context);
         },
@@ -16486,14 +17839,22 @@ function createPixiMaskLayer(options) {
         maskTextures.set(maskFrame.key, texture);
         return texture;
     }
-    /**
-     * The widest raster the picture can show. Polygon frames rasterize geometry
-     * at a size of their own choosing, so this sizes mask frames only.
-     */
+    function resolveMaskDisplayWidth() {
+        if (strokeViewportScale !== undefined && mediaWidth > 0) {
+            return mediaWidth * strokeViewportScale;
+        }
+        const display = rasterDisplay;
+        if (!display || mediaWidth <= 0 || mediaHeight <= 0)
+            return undefined;
+        const fit = Math.min(display.boxWidth / mediaWidth, display.boxHeight / mediaHeight);
+        return fit > 0 ? mediaWidth * fit : undefined;
+    }
+    /** Mask detail follows the annotation capture density. */
     function resolveMaxRasterWidth() {
         const display = rasterDisplay;
         const artifactKind = options.artifactKind ?? RenderPreparationArtifactKind.MaskFrame;
         if (!display ||
+            !capsRasterToDisplay ||
             artifactKind !== RenderPreparationArtifactKind.MaskFrame ||
             mediaWidth <= 0 ||
             mediaHeight <= 0) {
@@ -16502,7 +17863,7 @@ function createPixiMaskLayer(options) {
         const fit = Math.min(display.boxWidth / mediaWidth, display.boxHeight / mediaHeight);
         const pixelRatio = resolveDisplayPixelRatio(display);
         return fit > 0 && pixelRatio > 0
-            ? alignRasterWidth(Math.ceil(mediaWidth * fit * pixelRatio))
+            ? alignRasterWidth(Math.ceil(mediaWidth * fit * pixelRatio * rasterResolutionScale))
             : undefined;
     }
     /**
@@ -16583,7 +17944,9 @@ function createPixiMaskLayer(options) {
             return;
         }
         maskSprite.visible = false;
-        idMaskRenderer.render(maskFrame, texture);
+        idMaskRenderer.render(maskFrame, texture, rasterDisplay
+            ? resolveDisplayPixelRatio(rasterDisplay) * rasterResolutionScale
+            : 1);
     }
     function hideFill() {
         if (maskSprite) {
@@ -17022,11 +18385,15 @@ function createPixiPolygonLayer(options) {
             rasterLayer.setMaskStyle(nextPolygonStyle ? createArtifactStyle() : nextPolygonStyle);
         },
         needsRenderPreparationWait: rasterLayer.needsRenderPreparationWait,
+        setPlaybackActive: rasterLayer.setPlaybackActive,
+        setRasterDisplay: rasterLayer.setRasterDisplay,
         setTimelineContext: rasterLayer.setTimelineContext,
+        setViewportScale: adoptViewportScale,
         waitForRenderPreparation: rasterLayer.waitForRenderPreparation,
     };
     function adoptViewportScale(nextViewportScale) {
         const normalizedViewportScale = Math.max(nextViewportScale, Number.EPSILON);
+        rasterLayer.setViewportScale(normalizedViewportScale);
         if (normalizedViewportScale === viewportScale) {
             return;
         }
@@ -17090,9 +18457,10 @@ function resolvePreparedPolygonInstructions(options) {
             },
             stroke: instruction.stroke
                 ? {
+                    alignment: BoxStrokeAlignment.Center,
                     alpha: instruction.stroke.alpha,
                     color: instruction.stroke.color,
-                    width: resolveScreenLength(instruction.stroke.width, options.viewportScale),
+                    width: instruction.stroke.width,
                 }
                 : undefined,
         });
@@ -17237,17 +18605,30 @@ function createPixiRegionCoverageMask(options) {
     });
     let shader = createShader();
     const display = new options.Mesh({ geometry, shader });
-    const effect = new options.AlphaMask({ mask: display });
+    const container = new options.Container();
+    container.addChild(display);
+    const effect = new options.AlphaMask({ mask: container });
+    let antialiasFilter;
     return {
         destroy() {
+            if (antialiasFilter && display.filters?.includes(antialiasFilter)) {
+                display.filters = null;
+            }
+            antialiasFilter?.destroy();
             effect.destroy();
             display.destroy();
+            container.destroy();
             destroyShaderKeepingProgram(shader);
             geometry.destroy();
             placeholderSource.destroy();
         },
+        container,
         display,
         effect,
+        setAntialiasResolution(resolution) {
+            if (antialiasFilter)
+                antialiasFilter.resolution = resolution;
+        },
         releaseTexture(source) {
             if (shader.resources.uTexture !== source)
                 return;
@@ -17256,6 +18637,7 @@ function createPixiRegionCoverageMask(options) {
         },
         render(renderOptions) {
             bindTexture(renderOptions.artifact.texture.source);
+            const alphaCoverage = updateAntialiasing();
             display.visible = true;
             uniforms.uniforms.uCrop = new Float32Array([
                 renderOptions.crop.x,
@@ -17273,8 +18655,34 @@ function createPixiRegionCoverageMask(options) {
             display.position.set(renderOptions.x, renderOptions.y);
             display.scale.set(renderOptions.width * (renderOptions.flipHorizontal ? -1 : 1), renderOptions.height * (renderOptions.flipVertical ? -1 : 1));
             display.rotation = renderOptions.rotation;
+            syncViewportBounds();
+            return alphaCoverage;
         },
+        syncViewportBounds,
     };
+    function syncViewportBounds() {
+        syncPixiMaskViewportBounds(container, options.getViewportBounds?.(), options.Rectangle);
+    }
+    function updateAntialiasing() {
+        if (options.getAnnotationAntialiasing?.() &&
+            options.Filter &&
+            options.defaultFilterVert) {
+            antialiasFilter ??= createPixiAnnotationAntialiasFilter({
+                maskCoverage: true,
+                Filter: options.Filter,
+                defaultFilterVert: options.defaultFilterVert,
+                resolution: options.getAntialiasResolution?.(),
+            });
+            if (display.filters?.[0] !== antialiasFilter) {
+                display.filters = [antialiasFilter];
+            }
+            return true;
+        }
+        if (antialiasFilter && display.filters?.includes(antialiasFilter)) {
+            display.filters = null;
+        }
+        return false;
+    }
     function bindTexture(source) {
         try {
             shader.resources.uTexture = source;
@@ -17576,6 +18984,7 @@ function createPixiRegionLayer(options) {
     let currentMediaTime = 0;
     let currentViewportScale = 1;
     let destroyed = false;
+    let viewportBounds;
     let renderers = [...options.regionRenderers];
     const assets = new Map();
     const entries = new Map();
@@ -17656,6 +19065,7 @@ function createPixiRegionLayer(options) {
                         }
                         const position = positionSprite(entry.display, renderer, region, sourceSize, viewportScale);
                         updateEffect(entry, renderer, viewportScale);
+                        updateAssetAntialiasing(entry, renderer);
                         if (renderer.source.kind === RegionRendererSourceKind.Media &&
                             mediaCrop &&
                             !updateMediaCoverage(entry, renderer, detection, detectionIndex, mediaCrop)) {
@@ -17707,6 +19117,15 @@ function createPixiRegionLayer(options) {
                 }
             }
         },
+        setAntialiasResolution(resolution) {
+            for (const entry of entries.values()) {
+                updateEntryResolution(entry, resolution);
+            }
+            for (const pool of pools.values()) {
+                for (const entry of pool)
+                    updateEntryResolution(entry, resolution);
+            }
+        },
         setRenderers(nextRenderers) {
             renderers = [...nextRenderers];
             syncSources();
@@ -17720,10 +19139,24 @@ function createPixiRegionLayer(options) {
                 entry.display.position.set(entry.baseX + x, entry.baseY + y);
                 entry.coverageMask?.position.set(entry.baseX + x, entry.baseY + y);
                 entry.exactCoverageMask?.display.position.set(entry.baseX + x, entry.baseY + y);
+                syncEntryViewportBounds(entry);
                 translated = true;
             }
             return translated;
         },
+        syncViewportBounds() {
+            const next = options.getViewportBounds?.();
+            if (next?.x === viewportBounds?.x &&
+                next?.y === viewportBounds?.y &&
+                next?.width === viewportBounds?.width &&
+                next?.height === viewportBounds?.height)
+                return;
+            viewportBounds = next ? { ...next } : undefined;
+            for (const entry of entries.values()) {
+                if (entry.active)
+                    syncEntryViewportBounds(entry);
+            }
+        },
         destroy() {
             destroyed = true;
             destroyAllDisplays();
@@ -17845,11 +19278,18 @@ function createPixiRegionLayer(options) {
         return entry;
     }
     function updateMediaCoverage(entry, renderer, detection, detectionIndex, crop) {
-        if (renderer.source.kind !== RegionRendererSourceKind.Media ||
-            renderer.source.coverage === undefined) {
+        if (renderer.source.kind !== RegionRendererSourceKind.Media) {
             removeCoverageMask(entry);
             return true;
         }
+        if (renderer.source.coverage === undefined) {
+            removeExactCoverageMask(entry);
+            if (!annotationAntialiasingEnabled()) {
+                removePolygonCoverageMask(entry);
+                return true;
+            }
+            return updateGraphicsCoverage(entry, renderer, crop);
+        }
         if (renderer.source.coverage.kind === RegionRendererCoverageKind.Mask) {
             removePolygonCoverageMask(entry);
             const artifact = options.getActiveRegionMaskCoverage(currentFrame?.mediaTime ?? null);
@@ -17867,7 +19307,14 @@ function createPixiRegionLayer(options) {
             }
             const mask = entry.exactCoverageMask ??
                 createPixiRegionCoverageMask({
+                    getAnnotationAntialiasing: options.getAnnotationAntialiasing,
+                    getAntialiasResolution: options.getAntialiasResolution,
+                    getViewportBounds: options.getViewportBounds,
+                    defaultFilterVert: options.defaultFilterVert,
+                    Filter: options.Filter,
                     AlphaMask: options.AlphaMask,
+                    Container: options.Container,
+                    Rectangle: options.Rectangle,
                     ImageSource: options.ImageSource,
                     Mesh: options.Mesh,
                     MeshGeometry: options.MeshGeometry,
@@ -17876,7 +19323,7 @@ function createPixiRegionLayer(options) {
                 });
             if (!entry.exactCoverageMask) {
                 entry.exactCoverageMask = mask;
-                container?.addChild(mask.display);
+                container?.addChild(mask.container);
                 // A Mesh assigned through `display.mask` becomes a stencil mask in
                 // Pixi v8, which clips by the quad geometry and ignores shader alpha.
                 // AlphaMask renders the id-sampling mesh to a GPU texture first, so
@@ -17888,7 +19335,7 @@ function createPixiRegionLayer(options) {
                 removeExactCoverageMask(entry);
                 return false;
             }
-            mask.render({
+            const alphaCoverage = mask.render({
                 artifact: { texture: coverageTexture },
                 coverage: coverageEntry,
                 crop,
@@ -17900,6 +19347,7 @@ function createPixiRegionLayer(options) {
                 x: entry.display.position.x,
                 y: entry.display.position.y,
             });
+            setCoverageChannel(entry, alphaCoverage);
             return true;
         }
         if (renderer.source.coverage.kind !== RegionRendererCoverageKind.Polygon ||
@@ -17909,26 +19357,95 @@ function createPixiRegionLayer(options) {
             return false;
         }
         removeExactCoverageMask(entry);
+        return updateGraphicsCoverage(entry, renderer, crop, detection.polygon.points);
+    }
+    function updateGraphicsCoverage(entry, renderer, crop, points) {
         const mask = entry.coverageMask ?? new options.Graphics();
         if (!entry.coverageMask) {
             entry.coverageMask = mask;
-            container?.addChild(mask);
-            entry.display.mask = mask;
+            entry.coverageMaskContainer = new options.Container();
+            entry.coverageMaskContainer.addChild(mask);
+            container?.addChild(entry.coverageMaskContainer);
+        }
+        mask.clear();
+        if (points) {
+            mask.poly(points.flatMap(({ x, y }) => [
+                x - crop.x - crop.width / 2,
+                y - crop.y - crop.height / 2,
+            ]), true);
         }
-        mask
-            .clear()
-            .poly(detection.polygon.points.flatMap(({ x, y }) => [
-            x - crop.x - crop.width / 2,
-            y - crop.y - crop.height / 2,
-        ]), true)
-            .fill({ alpha: 1, color: 0xffffff });
+        else {
+            mask.rect(-crop.width / 2, -crop.height / 2, crop.width, crop.height);
+        }
+        mask.fill({ alpha: 1, color: 0xffffff });
         mask.position.set(entry.display.position.x, entry.display.position.y);
         mask.scale.set((entry.display.width / crop.width) *
             (renderer.transform?.flip?.horizontal ? -1 : 1), (entry.display.height / crop.height) *
             (renderer.transform?.flip?.vertical ? -1 : 1));
         mask.rotation = entry.display.rotation;
+        if (annotationAntialiasingEnabled()) {
+            entry.display.mask = null;
+            const effect = entry.coverageMaskEffect ??
+                new options.AlphaMask({ mask: entry.coverageMaskContainer });
+            if (!entry.coverageMaskEffect)
+                entry.coverageMaskEffect = effect;
+            if (!entry.display.effects?.includes(effect)) {
+                effect.init(entry.coverageMaskContainer);
+                entry.display.addEffect(effect);
+            }
+            const filter = ensureAntialiasFilter(entry, true);
+            if (filter && mask.filters?.[0] !== filter)
+                mask.filters = [filter];
+            syncEntryViewportBounds(entry);
+            setCoverageChannel(entry, true);
+        }
+        else {
+            if (entry.coverageMaskEffect) {
+                entry.display.removeEffect(entry.coverageMaskEffect);
+                entry.coverageMaskEffect.reset();
+            }
+            if (mask.filters?.length)
+                mask.filters = null;
+            setCoverageChannel(entry, false);
+            entry.display.mask = mask;
+        }
         return true;
     }
+    function syncEntryViewportBounds(entry) {
+        entry.exactCoverageMask?.syncViewportBounds();
+        if (entry.coverageMaskContainer) {
+            syncPixiMaskViewportBounds(entry.coverageMaskContainer, options.getViewportBounds?.(), options.Rectangle);
+        }
+    }
+    function annotationAntialiasingEnabled() {
+        return Boolean(options.getAnnotationAntialiasing?.() &&
+            options.Filter &&
+            options.defaultFilterVert);
+    }
+    function ensureAntialiasFilter(entry, maskCoverage = false) {
+        if (!options.Filter || !options.defaultFilterVert)
+            return undefined;
+        entry.antialiasFilter ??= createPixiAnnotationAntialiasFilter({
+            maskCoverage,
+            Filter: options.Filter,
+            defaultFilterVert: options.defaultFilterVert,
+            resolution: options.getAntialiasResolution?.(),
+        });
+        return entry.antialiasFilter;
+    }
+    function updateAssetAntialiasing(entry, renderer) {
+        if (renderer.source.kind !== RegionRendererSourceKind.Asset)
+            return;
+        if (annotationAntialiasingEnabled()) {
+            const filter = ensureAntialiasFilter(entry);
+            if (filter && entry.display.filters?.[0] !== filter) {
+                entry.display.filters = [filter];
+            }
+        }
+        else if (entry.antialiasFilter && entry.display.filters?.length) {
+            entry.display.filters = null;
+        }
+    }
     function updateEffect(entry, renderer, viewportScale) {
         const effect = renderer.source.kind === RegionRendererSourceKind.Media
             ? renderer.source.effect
@@ -17948,26 +19465,6 @@ function createPixiRegionLayer(options) {
         }
         entry.effect?.apply(entry.display, viewportScale);
     }
-    function removeCoverageMask(entry) {
-        removePolygonCoverageMask(entry);
-        removeExactCoverageMask(entry);
-    }
-    function removePolygonCoverageMask(entry) {
-        if (!entry.coverageMask)
-            return;
-        entry.display.mask = null;
-        entry.coverageMask.removeFromParent();
-        entry.coverageMask.destroy();
-        entry.coverageMask = undefined;
-    }
-    function removeExactCoverageMask(entry) {
-        if (!entry.exactCoverageMask)
-            return;
-        entry.display.removeEffect(entry.exactCoverageMask.effect);
-        entry.exactCoverageMask.display.removeFromParent();
-        entry.exactCoverageMask.destroy();
-        entry.exactCoverageMask = undefined;
-    }
     function destroyRendererDisplays(rendererId) {
         for (const [key, entry] of entries) {
             if (entry.rendererId !== rendererId)
@@ -17999,17 +19496,53 @@ function createPixiRegionLayer(options) {
         pools.clear();
     }
 }
+function setCoverageChannel(entry, alpha) {
+    if ((entry.alphaCoverage ?? false) === alpha)
+        return;
+    entry.display.setMask({ channel: alpha ? "alpha" : "red" });
+    entry.alphaCoverage = alpha;
+}
+function removeCoverageMask(entry) {
+    removePolygonCoverageMask(entry);
+    removeExactCoverageMask(entry);
+}
+function removePolygonCoverageMask(entry) {
+    if (!entry.coverageMask)
+        return;
+    entry.display.mask = null;
+    if (entry.coverageMaskEffect) {
+        entry.display.removeEffect(entry.coverageMaskEffect);
+        entry.coverageMaskEffect.destroy();
+        entry.coverageMaskEffect = undefined;
+    }
+    destroyEntryAntialiasFilter(entry);
+    entry.coverageMask.removeFromParent();
+    entry.coverageMask.destroy();
+    entry.coverageMask = undefined;
+    entry.coverageMaskContainer?.removeFromParent();
+    entry.coverageMaskContainer?.destroy();
+    entry.coverageMaskContainer = undefined;
+    setCoverageChannel(entry, false);
+}
+function removeExactCoverageMask(entry) {
+    if (!entry.exactCoverageMask)
+        return;
+    entry.display.removeEffect(entry.exactCoverageMask.effect);
+    entry.exactCoverageMask.container.removeFromParent();
+    entry.exactCoverageMask.destroy();
+    entry.exactCoverageMask = undefined;
+    setCoverageChannel(entry, false);
+}
+function updateEntryResolution(entry, resolution) {
+    if (entry.antialiasFilter)
+        entry.antialiasFilter.resolution = resolution;
+    entry.exactCoverageMask?.setAntialiasResolution(resolution);
+}
 function destroyEntry(entry) {
     entry.effect?.destroy();
     entry.effect = undefined;
-    entry.display.mask = null;
-    entry.coverageMask?.removeFromParent();
-    entry.coverageMask?.destroy();
-    if (entry.exactCoverageMask) {
-        entry.display.removeEffect(entry.exactCoverageMask.effect);
-        entry.exactCoverageMask.display.removeFromParent();
-        entry.exactCoverageMask.destroy();
-    }
+    removeCoverageMask(entry);
+    destroyEntryAntialiasFilter(entry);
     entry.display.removeFromParent?.();
     // GifSprite sources are shared and released through Assets.unload().
     entry.display.destroy();
@@ -18017,6 +19550,18 @@ function destroyEntry(entry) {
     // lightweight crop texture; the scene destroys the shared source.
     entry.ownedTexture?.destroy(false);
 }
+function destroyEntryAntialiasFilter(entry) {
+    if (!entry.antialiasFilter)
+        return;
+    if (entry.display.filters?.includes(entry.antialiasFilter)) {
+        entry.display.filters = null;
+    }
+    if (entry.coverageMask?.filters?.includes(entry.antialiasFilter)) {
+        entry.coverageMask.filters = null;
+    }
+    entry.antialiasFilter.destroy();
+    entry.antialiasFilter = undefined;
+}
 function isAnimatedDisplay(display) {
     return "play" in display && typeof display.play === "function";
 }
@@ -18212,6 +19757,7 @@ function acquireAsset(loader, src) {
 
 function createPixiAnnotationOverlayLayer(editingEngine, initialStyle, initialKeypointStyle) {
     let graphics;
+    let renderedEditingBox;
     let style = resolveAnnotationOverlayStyle(initialStyle);
     let keypointStyle = initialKeypointStyle === undefined
         ? new BaseKeypointStyle()
@@ -18228,12 +19774,16 @@ function createPixiAnnotationOverlayLayer(editingEngine, initialStyle, initialKe
             if (next !== undefined)
                 keypointStyle = next;
         },
+        getRenderedEditingBox() {
+            return renderedEditingBox;
+        },
         draw(context) {
+            renderedEditingBox = undefined;
             if (!graphics)
                 return;
             graphics.clear();
             drawExternalPreview(graphics, context.previewOverlay, context.viewportScale, style);
-            drawEditingPreview(graphics, editingEngine, context.frame, context.viewportScale, style, keypointStyle);
+            renderedEditingBox = drawEditingPreview(graphics, editingEngine, context.frame, context.viewportScale, style, keypointStyle);
             drawSelectionHandles(graphics, context, style, editingEngine);
             drawMarquee(graphics, context.marquee, style);
             drawGuides(graphics, editingEngine, context, style);
@@ -18246,6 +19796,7 @@ function drawEditingPreview(graphics, engine, frame, viewportScale, style, keypo
     const detection = state?.preview;
     if (!detection)
         return;
+    let renderedBox;
     const styleContext = {
         gestureKind: state.kind,
         viewportScale,
@@ -18272,11 +19823,16 @@ function drawEditingPreview(graphics, engine, frame, viewportScale, style, keypo
             { x: x + width / 2, y: y + height / 2 },
             { x: x - width / 2, y: y + height / 2 },
         ], true, stroke, viewportScale);
+        if (width > 0 &&
+            height > 0 &&
+            (boxFill.alpha > 0 || (stroke.alpha > 0 && stroke.width > 0))) {
+            renderedBox = { detection, rect: detection.rect };
+        }
     }
     if (detection.polygon) {
         if (state.kind === AnnotationGestureStateKind.Creating) {
             drawCreatingPolygon(graphics, detection.polygon.points, viewportScale, stroke, closeZoneStroke);
-            return;
+            return renderedBox;
         }
         graphics
             .poly(detection.polygon.points.flatMap(({ x, y }) => [x, y]), true)
@@ -18308,6 +19864,7 @@ function drawEditingPreview(graphics, engine, frame, viewportScale, style, keypo
         if (instruction)
             drawPixiKeypointInstruction(graphics, instruction, viewportScale);
     }
+    return renderedBox;
 }
 const CREATION_VERTEX_RADIUS = 6;
 const CREATION_VERTEX_STROKE_WIDTH = 1.5;
@@ -18560,92 +20117,6 @@ function resolveAnnotationOverlayStyle(style) {
     };
 }
 
-var PixiSceneLayerKind;
-(function (PixiSceneLayerKind) {
-    PixiSceneLayerKind["Media"] = "media";
-    PixiSceneLayerKind["Depth"] = "depth";
-    PixiSceneLayerKind["Heatmap"] = "heatmap";
-    PixiSceneLayerKind["Mask"] = "mask";
-    PixiSceneLayerKind["Box"] = "box";
-    PixiSceneLayerKind["Vector"] = "vector";
-    PixiSceneLayerKind["Region"] = "region";
-    PixiSceneLayerKind["Focus"] = "focus";
-    PixiSceneLayerKind["Preview"] = "preview";
-    PixiSceneLayerKind["Guide"] = "guide";
-    PixiSceneLayerKind["Handle"] = "handle";
-    PixiSceneLayerKind["Interaction"] = "interaction";
-    PixiSceneLayerKind["Label"] = "label";
-})(PixiSceneLayerKind || (PixiSceneLayerKind = {}));
-function createPixiSceneLayerSlot(kind, order = defaultLayerOrder(kind)) {
-    let display;
-    return {
-        getDisplay() {
-            return display;
-        },
-        kind,
-        order,
-        setDisplay(nextDisplay) {
-            display = nextDisplay;
-        },
-    };
-}
-function syncPixiSceneLayerChildren(scene, slots) {
-    if (!scene) {
-        return;
-    }
-    const displays = [...slots]
-        .sort((left, right) => left.order - right.order)
-        .map((slot) => slot.getDisplay())
-        .filter((display) => display !== undefined);
-    clearSceneChildren(scene);
-    if (displays.length === 0) {
-        return;
-    }
-    scene.addChild(...displays);
-}
-function defaultLayerOrder(kind) {
-    switch (kind) {
-        case PixiSceneLayerKind.Media:
-            return 0;
-        case PixiSceneLayerKind.Depth:
-            return 25;
-        case PixiSceneLayerKind.Heatmap:
-            return 50;
-        case PixiSceneLayerKind.Mask:
-            return 100;
-        case PixiSceneLayerKind.Box:
-            return 200;
-        case PixiSceneLayerKind.Vector:
-            return 250;
-        case PixiSceneLayerKind.Region:
-            return 275;
-        case PixiSceneLayerKind.Focus:
-            return 300;
-        case PixiSceneLayerKind.Preview:
-            return 400;
-        case PixiSceneLayerKind.Guide:
-            return 500;
-        case PixiSceneLayerKind.Handle:
-            return 750;
-        case PixiSceneLayerKind.Interaction:
-            return 700;
-        case PixiSceneLayerKind.Label:
-            return 800;
-        default:
-            return 350;
-    }
-}
-function clearSceneChildren(scene) {
-    if (typeof scene.removeChildren === "function") {
-        scene.removeChildren();
-        return;
-    }
-    const fakeScene = scene;
-    if (Array.isArray(fakeScene.children)) {
-        fakeScene.children.splice(0);
-    }
-}
-
 function calculatePixiSceneFit(options) {
     const { fit, mediaHeight, mediaWidth, screenHeight, screenWidth } = options;
     if (mediaWidth <= 0 ||
@@ -18681,6 +20152,7 @@ const REGION_COVERAGE_ONLY_MASK_STYLE = {
 const STATIC_FOCUS_SETTLE_MS = 10_000;
 /** The presentation fields a render answers to that no renderer kind owns. */
 const RENDERED_PRESENTATION_TAIL = [
+    "annotationAntialiasing",
     "annotationOverlayStyle",
     "backgroundColor",
     "focusStyle",
@@ -18776,6 +20248,14 @@ async function createPixiMediaScene(options) {
     let currentFocusStyle = options.focusStyle ?? null;
     let currentLabelStyle = options.labelStyle ?? null;
     let currentMaskStyle = options.maskStyle ?? null;
+    let annotationAntialiasing = options.annotationAntialiasing ?? false;
+    let annotationAntialiasResolution = 1;
+    const annotationAntialiasLayer = createPixiAnnotationAntialiasLayer({
+        Container,
+        Filter,
+        defaultFilterVert,
+        getEnabled: () => Boolean(annotationAntialiasing),
+    });
     let currentMaskHaloStyle = options.maskHaloStyle ?? null;
     let currentBoxCornerStyle = options.boxCornerStyle ?? null;
     let currentEllipseStyle = options.ellipseStyle ?? null;
@@ -18870,6 +20350,7 @@ async function createPixiMediaScene(options) {
         isVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
         // A partial heatmap changes pixels before the all-ready token changes.
         onPreparedWindowChange: () => redrawAnnotationsNow(true),
+        onTextureRelease: (texture) => focusLayer?.releaseMaskTexture(texture),
         prepareTexture: (texture) => app.renderer.prepare.upload(texture),
         renderPreparation: options.renderPreparation,
         renderers: currentHeatmapRenderers,
@@ -18931,6 +20412,7 @@ async function createPixiMediaScene(options) {
             resolveContextState,
         })
         : undefined;
+    polygonLayer?.setPlaybackActive(isPlaybackActive);
     const vectorLayer = createPixiVectorLayer({
         container: retainedGeometry,
         Container,
@@ -18960,6 +20442,9 @@ async function createPixiMediaScene(options) {
         Texture,
         UniformGroup,
         detectionTimeline: annotationDetectionTimeline,
+        getAnnotationAntialiasing: () => Boolean(annotationAntialiasing),
+        getAntialiasResolution: () => annotationAntialiasResolution,
+        getViewportBounds: resolveViewportBounds,
         getActiveRegionMaskCoverage: (detectionFrameTime) => maskLayer?.getActiveRegionMaskCoverage(detectionFrameTime) ?? null,
         // Under GPU compositing the decoded frame lands in a texture the
         // compositor swaps onto the media sprite, leaving the canvas that
@@ -19011,6 +20496,7 @@ async function createPixiMediaScene(options) {
             Text,
             detectionTimeline: annotationDetectionTimeline,
             labelStyle: options.labelStyle,
+            getRenderedBoxes: () => boxLayer.getRenderedBoxes(),
             resolveContextState: resolveLabelContextState,
         })
         : undefined;
@@ -19024,6 +20510,7 @@ async function createPixiMediaScene(options) {
         resolution: resolvePixiResolution(options.maxDevicePixelRatio),
     });
     const destroyBatchTextureBindings = installPixiBatchTextureBindings(pixi, app.renderer);
+    const destroyFilterBindings = installPixiFilterBindings(pixi, app.renderer);
     const rendererCanvas = app.canvas;
     rendererCanvas.style.display = "block";
     rendererCanvas.style.position = "absolute";
@@ -19069,6 +20556,7 @@ async function createPixiMediaScene(options) {
     const focusSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Focus);
     const previewSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Preview);
     const interactionSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Interaction);
+    const interactionLabelSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Label, interactionSlot.order);
     const handleSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Handle);
     const labelSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Label);
     const layerSlots = [
@@ -19083,6 +20571,7 @@ async function createPixiMediaScene(options) {
         previewSlot,
         handleSlot,
         interactionSlot,
+        interactionLabelSlot,
         labelSlot,
     ];
     const viewport = createViewportController({ scale: 1 });
@@ -19254,13 +20743,18 @@ async function createPixiMediaScene(options) {
     }
     let focusLayer = options.focusStyle
         ? createPixiFocusLayer({
+            AlphaMask,
             Container,
             Graphics,
             ImageSource,
             Mesh,
             MeshGeometry,
+            Rectangle,
             Shader,
             UniformGroup,
+            getHeatmapRenderers: () => currentHeatmapRenderers,
+            getAnnotationAntialiasing: () => Boolean(annotationAntialiasing),
+            getViewportBounds: resolveViewportBounds,
             focusStyle: options.focusStyle,
             isDetectionVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
         })
@@ -19270,7 +20764,9 @@ async function createPixiMediaScene(options) {
     let stagingTextureSource;
     const collectFrameTimings = options.diagnostics?.frameTimings === true;
     const syncSceneChildren = () => {
-        syncPixiSceneLayerChildren(mediaScene, layerSlots);
+        labelLayer?.setBackgroundAntialiasFilter(annotationAntialiasLayer.getFxaaFilter());
+        interactionPresentationLayer?.setBackgroundAntialiasFilter(annotationAntialiasLayer.getFxaaFilter());
+        annotationAntialiasLayer.sync(mediaScene, layerSlots);
     };
     const updateMediaSceneFit = () => {
         if (!mediaScene || mediaWidth <= 0 || mediaHeight <= 0) {
@@ -19336,8 +20832,24 @@ async function createPixiMediaScene(options) {
         rendererCanvas.style.left = `${next.left}px`;
         rendererCanvas.style.top = `${next.top}px`;
         app.renderer.resize(next.width, next.height, presentationResolution);
+        syncAnnotationAntialiasResolution();
         return presentationBox;
     };
+    const syncAnnotationAntialiasResolution = () => {
+        annotationAntialiasResolution = resolvePixiAnnotationAntialiasResolution(presentationResolution, containerSize, maxTextureSize(), annotationAntialiasing === 2 ? 2 : 1);
+        annotationAntialiasLayer.setResolution(annotationAntialiasResolution);
+        regionLayer.setAntialiasResolution(annotationAntialiasResolution);
+        syncMaskRasterDisplay();
+    };
+    function syncMaskRasterDisplay() {
+        if (!rasterDisplay)
+            return;
+        const scale = annotationAntialiasing
+            ? annotationAntialiasResolution / presentationResolution
+            : 1;
+        maskLayer?.setRasterDisplay(rasterDisplay, scale);
+        polygonLayer?.setRasterDisplay(rasterDisplay, scale);
+    }
     const syncDisplaySizing = () => {
         if (!baseFit || mediaWidth <= 0 || mediaHeight <= 0)
             return;
@@ -19354,7 +20866,7 @@ async function createPixiMediaScene(options) {
             return;
         }
         rasterDisplay = display;
-        maskLayer?.setRasterDisplay(display);
+        syncMaskRasterDisplay();
         options.onDisplayChange?.(display);
     };
     const updateMediaSampling = () => {
@@ -19375,12 +20887,26 @@ async function createPixiMediaScene(options) {
             return;
         const transform = viewport.getTransform();
         viewportScale = baseFit.scale * transform.scale;
+        maskLayer?.setViewportScale(viewportScale);
+        polygonLayer?.setViewportScale(viewportScale);
         updateMediaSampling();
         mediaScene.scale.set(viewportScale);
         const box = syncPresentationBox();
         mediaScene.position.set(baseFit.x + transform.x - box.left, baseFit.y + transform.y - box.top);
+        focusLayer?.syncViewportBounds();
+        regionLayer.syncViewportBounds();
         maskBrushPreview?.setViewportScale(viewportScale);
     };
+    function resolveViewportBounds() {
+        if (!mediaScene || viewportScale <= 0)
+            return undefined;
+        return {
+            x: -mediaScene.x / viewportScale,
+            y: -mediaScene.y / viewportScale,
+            width: app.renderer.screen.width / viewportScale,
+            height: app.renderer.screen.height / viewportScale,
+        };
+    }
     const mediaPointToScreen = (point) => {
         const fit = baseFit ?? { scale: 1, x: 0, y: 0 };
         const screenPoint = viewport.mediaToScreen({
@@ -19402,6 +20928,7 @@ async function createPixiMediaScene(options) {
         syncPresentationBox();
         updateMediaSceneFit();
         syncDisplaySizing();
+        drawInteractionPresentationLayer(currentMediaTime);
         renderOnChange();
     });
     measureContainer();
@@ -19617,6 +21144,7 @@ async function createPixiMediaScene(options) {
             interactionSlot.setDisplay(interactionPresentationDisplay || interactionHitDisplay
                 ? interactionDisplay
                 : undefined);
+            interactionLabelSlot.setDisplay(interactionPresentationLayer?.getLabelDisplay() ?? undefined);
             attachFocusLayerDisplay();
             attachMaskLayerDisplay();
             attachLabelLayerDisplay();
@@ -19633,6 +21161,7 @@ async function createPixiMediaScene(options) {
         setPlaybackActive(active) {
             isPlaybackActive = active;
             maskLayer?.setPlaybackActive(active);
+            polygonLayer?.setPlaybackActive(active);
             depthSource?.setPlaybackActive?.(active);
         },
         setScrubbing(scrubbing) {
@@ -19733,6 +21262,7 @@ async function createPixiMediaScene(options) {
             syncPresentationBox();
             updateMediaSceneFit();
             syncDisplaySizing();
+            drawInteractionPresentationLayer(currentMediaTime);
             renderOnChange();
         },
         setDisplayAdjustments(adjustments) {
@@ -19862,6 +21392,12 @@ async function createPixiMediaScene(options) {
         setPresentation(presentation, mediaTime) {
             appliedPresentation = presentation;
             currentMediaTime = mediaTime;
+            if (annotationAntialiasing !==
+                (presentation.annotationAntialiasing ?? false)) {
+                annotationAntialiasing = presentation.annotationAntialiasing ?? false;
+                syncAnnotationAntialiasResolution();
+                syncSceneChildren();
+            }
             if (presentation.backgroundColor !== undefined) {
                 app.renderer.background.color = presentation.backgroundColor;
                 applyBackdropColor(backdrop, presentation.backgroundColor);
@@ -20064,6 +21600,10 @@ async function createPixiMediaScene(options) {
             // a decoder buffer in a producer that outlives the scene.
             frameChannel?.onPresentedFrame((presented) => presented.frame.close());
             destroyBatchTextureBindings();
+            destroyFilterBindings();
+            labelLayer?.setBackgroundAntialiasFilter(null);
+            interactionPresentationLayer?.setBackgroundAntialiasFilter(null);
+            annotationAntialiasLayer.destroy();
             inspectionFilter?.destroy();
             mediaCompositor?.destroy();
             interactionLayer?.destroy();
@@ -20172,8 +21712,8 @@ async function createPixiMediaScene(options) {
                 renderPreparation: options.renderPreparation,
                 resolveInstructions: resolveArtifactMaskInstructions,
             });
-            if (rasterDisplay)
-                maskLayer.setRasterDisplay(rasterDisplay);
+            syncMaskRasterDisplay();
+            maskLayer.setViewportScale(viewportScale);
             maskLayer.setPlaybackActive(isPlaybackActive);
             if (timelineContext) {
                 maskLayer.setTimelineContext(timelineContext);
@@ -20427,6 +21967,9 @@ async function createPixiMediaScene(options) {
                 renderPreparation: options.renderPreparation,
                 resolveContextState,
             });
+            polygonLayer.setPlaybackActive(isPlaybackActive);
+            syncMaskRasterDisplay();
+            polygonLayer.setViewportScale(viewportScale);
             if (timelineContext) {
                 polygonLayer.setTimelineContext(timelineContext);
             }
@@ -20467,14 +22010,19 @@ async function createPixiMediaScene(options) {
     function ensureFocusLayer(focusStyle) {
         if (!focusLayer) {
             focusLayer = createPixiFocusLayer({
+                AlphaMask,
                 Container,
                 Graphics,
                 ImageSource,
                 Mesh,
                 MeshGeometry,
+                Rectangle,
                 Shader,
                 UniformGroup,
                 focusStyle,
+                getHeatmapRenderers: () => currentHeatmapRenderers,
+                getAnnotationAntialiasing: () => Boolean(annotationAntialiasing),
+                getViewportBounds: resolveViewportBounds,
                 isDetectionVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
             });
         }
@@ -20515,6 +22063,7 @@ async function createPixiMediaScene(options) {
         const interactionState = interactionLayer?.getState();
         focusLayer.drawFrame({
             frame,
+            heatmapArtifacts: heatmapLayer?.getActiveFocusArtifacts(frame) ?? [],
             hoveredPick: withEditingPreview(filterVisiblePick(interactionState?.hoveredPick ?? null)),
             idMaskArtifact: maskLayer?.getActiveIdMaskFrameTexture(frame?.mediaTime ?? null) ??
                 null,
@@ -20547,6 +22096,9 @@ async function createPixiMediaScene(options) {
             mediaTime,
             selectedPick: interactionState?.selectedPick ?? null,
             selectedPicks: interactionState?.selectedPicks,
+            strokePixelRatio: annotationAntialiasing
+                ? annotationAntialiasResolution
+                : presentationResolution,
             viewportScale,
         });
     }
@@ -20625,9 +22177,6 @@ async function createPixiMediaScene(options) {
         const frame = annotationDetectionTimeline.selectFrame(mediaTime);
         const interactionState = interactionLayer?.getState();
         const editingState = options.editingEngine?.getState();
-        labelLayer?.drawCreationPreview(editingState?.kind === AnnotationGestureStateKind.Creating
-            ? editingState.preview
-            : null, mediaTime, viewportScale);
         const previewOverlay = options.previewOverlay?.() ?? null;
         drawnEditingState = editingState;
         // Only a scene that renders on change compares signatures.
@@ -20647,6 +22196,18 @@ async function createPixiMediaScene(options) {
             viewportScale,
             visibility: currentVisibility,
         });
+        const editingBox = annotationOverlayLayer.getRenderedEditingBox();
+        const creationPreview = editingState?.kind === AnnotationGestureStateKind.Creating
+            ? editingState.preview
+            : null;
+        labelLayer?.drawCreationPreview(creationPreview, mediaTime, viewportScale, editingBox && editingBox.detection === creationPreview
+            ? editingBox.rect
+            : undefined);
+        if (editingState?.activeDetectionId != null) {
+            labelLayer?.updateEditingBox(editingState.activeDetectionId, editingBox?.detection.id === editingState.activeDetectionId
+                ? editingBox.rect
+                : undefined);
+        }
     }
     /**
      * Milliseconds for animations that are not annotation geometry. A pull scene
@@ -20914,6 +22475,7 @@ async function createPixiMediaScene(options) {
                 Text,
                 detectionTimeline: annotationDetectionTimeline,
                 labelStyle,
+                getRenderedBoxes: () => boxLayer.getRenderedBoxes(),
                 resolveContextState: resolveLabelContextState,
             });
         }
@@ -22130,6 +23692,7 @@ async function createMediaSession(options) {
             ...options.renderer,
             ...sessionMedia.rendererSourceOption,
             backgroundColor: initialPresentation.backgroundColor,
+            annotationAntialiasing: initialPresentation.annotationAntialiasing,
             annotationOverlayStyle: initialPresentation.annotationOverlayStyle,
             boxStyle: initialPresentation.boxStyle,
             boxCornerStyle: initialPresentation.boxCornerStyle,