supervision 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import { copySortedDetectionFrames, detectionFrameOverlapsRange, includeDefined, MediaSourceStatus, MediaRendererPlaybackState, MediaRendererFit, createDefaultAnnotationPresentation, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createIdleDetectionBufferState, MediaInteractionMode, BoxStrokeAlignment, BaseBoxStyle, centerRectToTopLeftRect, BoxShape, BaseFocusStyle, AnnotationGestureStateKind, AnnotationHandleKind, getDetectionRect, DetectionPickTarget, createDetectionPickKey, rebaseDetectionPickToFrame, pickDetectionAtPoint, pickAnnotationHandle, getAnnotationHandles, createIdMaskFrame, encodeBinaryMask, rasterizePolygonToMask, decodeCompressedRleMask, LabelPlacement, BasePolygonStyle, BasePolylineStyle, BaseKeypointStyle, KeypointMarkerShape, BaseInteractionStyle, DetectionInteractionState, MAX_ID_MASK_PALETTE_ENTRIES, DetectionBufferStatus, canReuseMaskStyleArtifacts, getBufferedDetectionTimelineFrameSnapshot, MAX_ID_MASK_STROKE_WIDTH, resolveMaskStyleOpacity, pickDetectionByMaskId, resolveStyleValue, lightenColor, createViewportController, resolveAnnotationStyleState, MediaSessionMode, DetectionFrameRetentionMode, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, createCompositeDetectionFrameSource, MediaSessionActivityStatus, MediaSessionActivityKind, MediaSessionStatus, createSourceAwarePresentation } from 'supervision-js-core';
-export { BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMaskStyle, BasePolygonStyle, BasePolylineStyle, BoxShape, BoxStrokeAlignment, DEFAULT_DETECTION_CLASS_STYLES, DEFAULT_DETECTION_COLOR_SEQUENCE, DetectionBufferStatus, DetectionFrameRetentionMode, DetectionFrameSelectionMode, DetectionInteractionState, DetectionMaskEncoding, DetectionPickTarget, FocusTargetMode, KeypointMarkerShape, KeypointVisibility, LabelPlacement, LabelVisibilityMode, MaskRenderMode, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, SUPERVISION_ROBOFLOW_COLOR, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, normalizeDetectionClassName, pickDetectionAtPoint, resolveDetectionClassColorStyle } from 'supervision-js-core';
+import { copySortedDetectionFrames, detectionFrameOverlapsRange, includeDefined, MediaSourceStatus, MediaRendererPlaybackState, MediaRendererFit, createDefaultAnnotationPresentation, createArrayDetectionFrameSource, createBufferedDetectionTimeline, resolveAnnotationRendererPresentation, createIdleDetectionBufferState, MediaInteractionMode, StrokeAlignment, BaseBoxStyle, centerRectToTopLeftRect, BoxShape, BaseFocusStyle, decodeCompressedRleMask, extractMaskRectRuns, AnnotationGestureStateKind, AnnotationHandleKind, getDetectionRect, DetectionPickTarget, createDetectionPickKey, rebaseDetectionPickToFrame, pickDetectionAtPoint, followDetectionPickAcrossFrames, haveSameDetectionPickIdentities, pickAnnotationHandle, getAnnotationHandles, createIdMaskFrame, encodeBinaryMask, rasterizePolygonToMask, LabelPlacement, BasePolygonStyle, BasePolylineStyle, BaseKeypointStyle, KeypointMarkerShape, MarkerSizeSpace, MarkerShape, ShapeInstructionKind, sampleEllipseArc, resolveEllipseSegmentCount, resolveMarkerGeometry, BaseInteractionStyle, DetectionInteractionState, MAX_ID_MASK_PALETTE_ENTRIES, DetectionBufferStatus, canReuseMaskStyleArtifacts, getBufferedDetectionTimelineFrameSnapshot, MAX_ID_MASK_STROKE_WIDTH, resolveMaskStyleOpacity, pickDetectionByMaskId, BoxStrokeAlignment, resolveStyleValue, resolveAnnotationStyleState, lightenColor, createViewportController, MediaSessionMode, DetectionFrameRetentionMode, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, createCompositeDetectionFrameSource, MediaSessionActivityStatus, MediaSessionActivityKind, MediaSessionStatus, createSourceAwarePresentation } from 'supervision-js-core';
+export { BaseBoxCornerStyle, BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMarkerStyle, BaseMaskStyle, BasePolygonStyle, BasePolylineStyle, BoxShape, BoxStrokeAlignment, DEFAULT_DETECTION_CLASS_STYLES, DEFAULT_DETECTION_COLOR_SEQUENCE, DetectionBufferStatus, DetectionFrameRetentionMode, DetectionFrameSelectionMode, DetectionInteractionState, DetectionMaskEncoding, DetectionPickTarget, FocusTargetMode, KeypointMarkerShape, KeypointVisibility, LabelPlacement, LabelVisibilityMode, MarkerShape, MarkerSizeSpace, MaskRenderMode, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, RegionRendererComposeMode, RegionRendererRegionKind, RegionRendererSourceKind, SUPERVISION_ROBOFLOW_COLOR, annotationRendererKinds, annotationRenderers, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, normalizeDetectionClassName, pickDetectionAtPoint, resolveDetectionClassColorStyle } from 'supervision-js-core';
 
 const DEFAULT_DATABASE_NAME = "supervision-js-detection-frames";
 const DEFAULT_CHUNK_DURATION_SECONDS = 1;
@@ -2231,7 +2231,7 @@ async function createMediaRendererCore(options, providers) {
         throw new RangeError("playbackRate must be a finite number greater than zero.");
     }
     const defaultPresentation = createDefaultAnnotationPresentation();
-    const resolvePresentation = (presentation) => ({
+    const resolvePresentation = (presentation) => resolveAnnotationRendererPresentation({
         ...defaultPresentation,
         ...presentation,
     });
@@ -2239,13 +2239,18 @@ async function createMediaRendererCore(options, providers) {
         annotationOverlayStyle: options.annotationOverlayStyle,
         backgroundColor: options.backgroundColor,
         boxStyle: options.boxStyle,
+        boxCornerStyle: options.boxCornerStyle,
+        ellipseStyle: options.ellipseStyle,
         focusStyle: options.focusStyle,
         interactionStyle: options.interactionStyle,
         keypointStyle: options.keypointStyle,
         labelStyle: options.labelStyle,
+        maskHaloStyle: options.maskHaloStyle,
         maskStyle: options.maskStyle,
+        markerStyle: options.markerStyle,
         polygonStyle: options.polygonStyle,
         polylineStyle: options.polylineStyle,
+        renderers: options.renderers,
         visibility: options.visibility,
     });
     let detectionTimeline;
@@ -2537,6 +2542,8 @@ async function createMediaRendererCore(options, providers) {
             annotationOverlayStyle: currentPresentation.annotationOverlayStyle,
             backgroundColor: currentPresentation.backgroundColor,
             boxStyle: currentPresentation.boxStyle,
+            boxCornerStyle: currentPresentation.boxCornerStyle,
+            ellipseStyle: currentPresentation.ellipseStyle,
             canInteract: () => canInteract(options, runtimeState.isPlaybackActive()),
             container: options.container,
             detectionTimeline,
@@ -2549,10 +2556,18 @@ async function createMediaRendererCore(options, providers) {
             keypointStyle: currentPresentation.keypointStyle,
             labelStyle: currentPresentation.labelStyle,
             maskBrush: options.createMaskBrush?.(mediaDimensions) ?? options.maskBrush,
+            maskHaloStyle: currentPresentation.maskHaloStyle,
             maskStyle: currentPresentation.maskStyle,
+            markerStyle: currentPresentation.markerStyle,
             maxDevicePixelRatio: options.maxDevicePixelRatio,
+            onPresentationUpdate(presentedSample) {
+                if (!runtimeState.isDestroyed()) {
+                    runtimeState.recordPresentationUpdate(presentedSample);
+                }
+            },
             polygonStyle: currentPresentation.polygonStyle,
             polylineStyle: currentPresentation.polylineStyle,
+            regionRenderers: resolveRegionRenderers(currentPresentation),
             previewOverlay: options.previewOverlay,
             renderPreparation: options.renderPreparation
                 ? {
@@ -2698,6 +2713,10 @@ async function createMediaRendererCore(options, providers) {
         }
     }
 }
+function resolveRegionRenderers(presentation) {
+    return (presentation.renderers?.filter((renderer) => renderer.kind === "region") ??
+        []);
+}
 async function openRendererMediaSource(options, providers) {
     if (options.src !== undefined && options.source !== undefined) {
         throw new Error("Provide either src or source, not both.");
@@ -2791,10 +2810,10 @@ function drawPixiPath(graphics, points, closed, stroke, viewportScale) {
     if (points.length < 2) {
         return;
     }
-    if (stroke.dash?.length) {
-        appendDashedPath(graphics, points, closed, stroke.dash, viewportScale);
-    }
-    else {
+    const appendedDash = stroke.dash?.length
+        ? appendDashedPath(graphics, points, closed, stroke.dash, viewportScale)
+        : false;
+    if (!appendedDash) {
         graphics.moveTo(points[0].x, points[0].y);
         for (let index = 1; index < points.length; index += 1) {
             graphics.lineTo(points[index].x, points[index].y);
@@ -2808,16 +2827,21 @@ function drawPixiPath(graphics, points, closed, stroke, viewportScale) {
 function resolvePixiStroke(stroke, viewportScale) {
     const pixiStroke = {
         alpha: stroke.alpha,
+        ...(stroke.cap === undefined ? {} : { cap: stroke.cap }),
         color: stroke.color,
+        ...(stroke.join === undefined ? {} : { join: stroke.join }),
+        ...(stroke.miterLimit === undefined
+            ? {}
+            : { miterLimit: stroke.miterLimit }),
         width: resolveScreenLength(stroke.width, viewportScale),
     };
     if (stroke.alignment === undefined)
         return pixiStroke;
     return {
         ...pixiStroke,
-        alignment: stroke.alignment === BoxStrokeAlignment.Inside
+        alignment: stroke.alignment === StrokeAlignment.Inside
             ? 1
-            : stroke.alignment === BoxStrokeAlignment.Outside
+            : stroke.alignment === StrokeAlignment.Outside
                 ? 0
                 : 0.5,
     };
@@ -2827,7 +2851,7 @@ function appendDashedPath(graphics, points, closed, dashPattern, viewportScale)
         .filter((value) => Number.isFinite(value) && value > 0)
         .map((value) => resolveScreenLength(value, viewportScale));
     if (pattern.length === 0) {
-        return;
+        return false;
     }
     if (pattern.length % 2 === 1) {
         pattern.push(...pattern);
@@ -2835,6 +2859,7 @@ function appendDashedPath(graphics, points, closed, dashPattern, viewportScale)
     let patternIndex = 0;
     let patternRemaining = pattern[0];
     let drawing = true;
+    let penDown = false;
     const segmentCount = closed ? points.length : points.length - 1;
     for (let segmentIndex = 0; segmentIndex < segmentCount; segmentIndex += 1) {
         const start = points[segmentIndex];
@@ -2855,8 +2880,14 @@ function appendDashedPath(graphics, points, closed, dashPattern, viewportScale)
             const x2 = start.x + dx * endRatio;
             const y2 = start.y + dy * endRatio;
             if (drawing) {
-                graphics.moveTo(x1, y1);
+                if (!penDown) {
+                    graphics.moveTo(x1, y1);
+                }
                 graphics.lineTo(x2, y2);
+                penDown = true;
+            }
+            else {
+                penDown = false;
             }
             offset += step;
             patternRemaining -= step;
@@ -2864,9 +2895,13 @@ function appendDashedPath(graphics, points, closed, dashPattern, viewportScale)
                 patternIndex = (patternIndex + 1) % pattern.length;
                 patternRemaining = pattern[patternIndex];
                 drawing = !drawing;
+                if (!drawing) {
+                    penDown = false;
+                }
             }
         }
     }
+    return true;
 }
 
 function createPixiBoxLayer(options) {
@@ -3055,6 +3090,10 @@ function createPixiFocusLayer(options) {
     let targetAlpha = 0;
     let lastTick = null;
     let isDestroyed = false;
+    // A frame can fall back to a composited RGBA texture when its colored ID-mask
+    // palette is exhausted. Keep decoded row runs by the immutable mask payload so
+    // that fallback focus still cuts out the actual mask, not its bounding rect.
+    const maskCutoutRuns = new WeakMap();
     return {
         createDisplay({ width, height }) {
             mediaWidth = width;
@@ -3099,13 +3138,19 @@ function createPixiFocusLayer(options) {
                 hide();
                 return;
             }
-            const instruction = focusStyle.resolve({
+            const resolvedInstruction = focusStyle.resolve({
                 frame: context.frame,
                 hoveredPick: context.hoveredPick,
                 mediaTime: context.mediaTime,
                 selectedPick: context.selectedPick,
                 viewportScale: context.viewportScale,
             });
+            const instruction = resolvedInstruction
+                ? {
+                    ...resolvedInstruction,
+                    targets: resolvedInstruction.targets.filter(({ detection }) => options.isDetectionVisible?.(detection) ?? true),
+                }
+                : undefined;
             if (!instruction || instruction.targets.length === 0) {
                 transitionToHidden();
                 return;
@@ -3163,8 +3208,10 @@ function createPixiFocusLayer(options) {
         if (!focusGraphics) {
             return;
         }
-        const targetsWithRects = instruction.targets.filter((target) => target.detection.rect || target.detection.polygon);
-        if (targetsWithRects.length === 0) {
+        const targetsWithGeometry = instruction.targets.filter((target) => target.detection.mask ||
+            target.detection.rect ||
+            target.detection.polygon);
+        if (targetsWithGeometry.length === 0) {
             hideVectorFocus();
             return;
         }
@@ -3175,24 +3222,30 @@ function createPixiFocusLayer(options) {
         if (focusMaskGraphics) {
             focusMaskGraphics.visible = true;
             focusMaskGraphics.clear();
-            for (const target of targetsWithRects) {
-                drawCutoutShape(focusMaskGraphics, target, instruction);
-                focusMaskGraphics.fill({ alpha: 1, color: 0xffffff });
+            for (const target of targetsWithGeometry) {
+                if (drawCutoutShape(focusMaskGraphics, target, instruction) === "drawn") {
+                    focusMaskGraphics.fill({ alpha: 1, color: 0xffffff });
+                }
             }
             return;
         }
-        for (const target of targetsWithRects) {
-            drawCutoutShape(focusGraphics, target, instruction);
-            focusGraphics.cut();
+        for (const target of targetsWithGeometry) {
+            if (drawCutoutShape(focusGraphics, target, instruction) === "drawn") {
+                focusGraphics.cut();
+            }
         }
     }
     function drawCutoutShape(graphics, target, instruction) {
+        const maskCutout = drawMaskCutout(graphics, target);
+        if (maskCutout) {
+            return maskCutout;
+        }
         if (target.detection.polygon?.points.length && graphics.poly) {
             graphics.poly(target.detection.polygon.points.flatMap(({ x, y }) => [x, y]), true);
-            return;
+            return "drawn";
         }
         if (!target.detection.rect) {
-            return;
+            return "empty";
         }
         const { rect } = target.detection;
         const fallback = instruction.fallback;
@@ -3203,6 +3256,44 @@ function createPixiFocusLayer(options) {
         else {
             graphics.rect(left, top, rect.width, rect.height);
         }
+        return "drawn";
+    }
+    function drawMaskCutout(graphics, target) {
+        const mask = target.detection.mask;
+        if (!mask) {
+            return undefined;
+        }
+        let runs;
+        if (!maskCutoutRuns.has(mask)) {
+            try {
+                const decoded = decodeCompressedRleMask(mask);
+                runs = {
+                    height: decoded.height,
+                    runs: extractMaskRectRuns(decoded.data, decoded.width, decoded.height) ??
+                        [],
+                    width: decoded.width,
+                };
+            }
+            catch {
+                // Preserve the documented rectangle fallback for malformed masks. A
+                // valid mask must never lose its shape merely because ID-mask rendering
+                // is unavailable, but an unreadable payload still has only bounds.
+                runs = null;
+            }
+            maskCutoutRuns.set(mask, runs);
+        }
+        else {
+            runs = maskCutoutRuns.get(mask);
+        }
+        if (runs === null) {
+            return undefined;
+        }
+        const horizontalScale = mediaWidth / runs.width;
+        const verticalScale = mediaHeight / runs.height;
+        for (const run of runs.runs) {
+            graphics.rect(run.x * horizontalScale, run.y * verticalScale, run.width * horizontalScale, run.height * verticalScale);
+        }
+        return runs.runs.length === 0 ? "empty" : "drawn";
     }
     function hide() {
         hideVectorFocus();
@@ -3271,7 +3362,7 @@ function createFocusIdMaskRenderer(options) {
         autoGenerateMipmaps: false,
         dynamic: false,
         height: 1,
-        resource: createPlaceholderCanvas$2(),
+        resource: createPlaceholderCanvas$3(),
         scaleMode: "nearest",
         width: 1,
     });
@@ -3363,7 +3454,7 @@ function createPremultipliedColor(fill) {
         alpha,
     ]);
 }
-function createPlaceholderCanvas$2() {
+function createPlaceholderCanvas$3() {
     const canvas = document.createElement("canvas");
     canvas.height = 1;
     canvas.width = 1;
@@ -3485,15 +3576,21 @@ function createPixiInteractionLayer(options) {
         drawFrame(mediaTime) {
             currentMediaTime = mediaTime;
             activeFrame = options.detectionTimeline.selectFrame(mediaTime);
-            if (!canHandleInteraction()) {
-                pointerPoint = null;
-                marqueeRect = null;
-                setHoveredPick(null);
-                setSelectedPick(null);
-            }
-            else {
+            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) {
@@ -3512,14 +3609,15 @@ function createPixiInteractionLayer(options) {
             return createState();
         },
         cycleSelection(direction = 1) {
-            if (!activeFrame?.detections.length)
+            const visibleDetections = activeFrame?.detections.flatMap((detection, detectionIndex) => canPickDetection(detection) ? [{ detection, detectionIndex }] : []);
+            if (!activeFrame || !visibleDetections?.length)
                 return null;
-            const currentIndex = selectedPick?.detectionIndex ?? (direction > 0 ? -1 : 0);
-            const nextIndex = (currentIndex + direction + activeFrame.detections.length) %
-                activeFrame.detections.length;
-            const detection = activeFrame.detections[nextIndex];
+            const currentVisibleIndex = visibleDetections.findIndex(({ detectionIndex }) => detectionIndex === selectedPick?.detectionIndex);
+            const nextVisibleIndex = (currentVisibleIndex + direction + visibleDetections.length) %
+                visibleDetections.length;
+            const { detection, detectionIndex } = visibleDetections[nextVisibleIndex];
             const next = createPickFromSelection({
-                detectionIndex: nextIndex,
+                detectionIndex,
                 point: getDetectionCenter(detection),
             });
             setSelectedPick(next);
@@ -3648,6 +3746,8 @@ function createPixiInteractionLayer(options) {
             return;
         if (didDragMarquee && marqueeRect && activeFrame) {
             selectedPicks = activeFrame.detections.flatMap((detection, detectionIndex) => {
+                if (!canPickDetection(detection))
+                    return [];
                 const rect = getDetectionRect(detection);
                 if (!rect || !intersects(rect, marqueeRect))
                     return [];
@@ -3684,10 +3784,13 @@ function createPixiInteractionLayer(options) {
         const pickPoint = { x: point.x, y: point.y };
         const labelPick = options.pickLabelDetectionAtPoint?.(pickPoint, currentMediaTime);
         const activeLabelPick = rebaseDetectionPickToFrame(labelPick ?? null, activeFrame);
-        if (activeLabelPick)
+        if (activeLabelPick && canPickDetection(activeLabelPick.detection)) {
             return activeLabelPick;
+        }
         const geometryPick = pickDetectionAtPoint(activeFrame, pickPoint, {
             ...options.interaction,
+            filter: (detection, detectionIndex) => canPickDetection(detection) &&
+                (options.interaction.filter?.(detection, detectionIndex) ?? true),
             includeMasks: options.pickMaskDetectionAtPoint === undefined,
             maskMediaDimensions: options.getMediaDimensions?.(),
             padding: pickPadding,
@@ -3697,7 +3800,9 @@ function createPixiInteractionLayer(options) {
         }
         const maskPick = options.pickMaskDetectionAtPoint?.(pickPoint, currentMediaTime);
         const activeMaskPick = rebaseDetectionPickToFrame(maskPick ?? null, activeFrame);
-        return activeMaskPick ?? geometryPick;
+        return activeMaskPick && canPickDetection(activeMaskPick.detection)
+            ? activeMaskPick
+            : geometryPick;
     }
     function createPickFromSelection(selection) {
         const frame = selection.mediaTime === undefined
@@ -3709,7 +3814,10 @@ function createPixiInteractionLayer(options) {
         const detection = detectionIndex === undefined || detectionIndex < 0
             ? undefined
             : frame?.detections[detectionIndex];
-        if (!frame || detectionIndex === undefined || !detection) {
+        if (!frame ||
+            detectionIndex === undefined ||
+            !detection ||
+            !canPickDetection(detection)) {
             return null;
         }
         return {
@@ -3723,19 +3831,44 @@ function createPixiInteractionLayer(options) {
         };
     }
     function clearStalePicks(frame) {
-        const nextHoveredPick = rebaseDetectionPickToFrame(hoveredPick, frame);
-        const nextSelectedPick = rebaseDetectionPickToFrame(selectedPick, frame);
+        // Hover stays bound to the pointer, so it keeps a per-frame lifetime.
+        const nextHoveredPick = filterPick(rebaseDetectionPickToFrame(hoveredPick, frame));
         if (hoveredPick && !nextHoveredPick) {
             setHoveredPick(null);
         }
         else if (nextHoveredPick && nextHoveredPick !== hoveredPick) {
-            setHoveredPick(nextHoveredPick);
+            // Hover remains pointer-owned. Refresh its frame snapshot without
+            // emitting a second event-driven redraw from the normal frame path.
+            hoveredPick = nextHoveredPick;
+            hoveredPickKey = createDetectionPickKey(nextHoveredPick);
         }
-        if (selectedPick && !nextSelectedPick) {
-            setSelectedPick(null);
+        followSelectedPicks(frame);
+    }
+    function followSelectedPicks(frame) {
+        if (selectedPicks.length === 0) {
+            return;
+        }
+        const nextSelectedPicks = selectedPicks.flatMap((pick) => {
+            const nextPick = filterPick(followDetectionPickAcrossFrames(pick, frame));
+            return nextPick ? [nextPick] : [];
+        });
+        const currentKeys = selectedPicks.map(createDetectionPickKey).join("|");
+        const nextKeys = nextSelectedPicks.map(createDetectionPickKey).join("|");
+        const identityChanged = !haveSameDetectionPickIdentities(selectedPicks, nextSelectedPicks);
+        selectedPicks = nextSelectedPicks;
+        selectedPick = nextSelectedPicks.at(-1) ?? null;
+        if (nextKeys === currentKeys) {
+            return;
         }
-        else if (nextSelectedPick && nextSelectedPick !== selectedPick) {
-            setSelectedPick(nextSelectedPick);
+        selectedPickKey = createDetectionPickKey(selectedPick);
+        // A followed pick re-bases onto every new frame, so its full pick key
+        // changes at playback rate. The scene's normal frame path consumes this
+        // refreshed state immediately; emitting onStateChange here would redraw
+        // focus and interaction a second time. Public callbacks only report
+        // identity or membership changes.
+        if (identityChanged) {
+            options.interaction.onSelect?.(selectedPick);
+            options.interaction.onSelectionChange?.(selectedPicks);
         }
     }
     function setHoveredPick(nextPick) {
@@ -3844,6 +3977,12 @@ function createPixiInteractionLayer(options) {
         }
         return options.canInteract();
     }
+    function canPickDetection(detection) {
+        return options.canPickDetection?.(detection) ?? true;
+    }
+    function filterPick(pick) {
+        return pick && canPickDetection(pick.detection) ? pick : null;
+    }
 }
 function getDetectionCenter(detection) {
     const rect = getDetectionRect(detection);
@@ -3889,8 +4028,11 @@ function compositeMaskFrame(instructions) {
     }
     return { data, height, width };
 }
+function createMaskIdFrame(instructions) {
+    return createIdMaskFrame(materializeMaskInstructions(instructions));
+}
 async function createPngIdMaskFrame(instructions) {
-    const frame = createIdMaskFrame(materializeMaskInstructions(instructions));
+    const frame = createMaskIdFrame(instructions);
     if (!frame) {
         return undefined;
     }
@@ -4429,6 +4571,9 @@ function createPixiVectorLayer(options) {
     let keypointStyle = options.keypointStyle === undefined
         ? new BaseKeypointStyle()
         : options.keypointStyle;
+    // Shape decorations are opt-in; no default style exists so configuring
+    // nothing keeps the semantic-geometry skip untouched.
+    let shapeStyle = options.shapeStyle ?? null;
     let styleVersion = 0;
     let drawnStyleVersion = -1;
     // A versioned source can replace a frame without changing its timeline key.
@@ -4465,7 +4610,8 @@ function createPixiVectorLayer(options) {
             const resolvedDetections = frame.detections.flatMap((detection, detectionIndex) => {
                 if (!detection.polygon &&
                     !detection.polyline &&
-                    !detection.keypoints) {
+                    !detection.keypoints &&
+                    !shapeStyle) {
                     return [];
                 }
                 const resolved = resolveDetection(detection, detectionIndex, frame, mediaTime, viewportScale);
@@ -4500,6 +4646,8 @@ function createPixiVectorLayer(options) {
                 polylineStyle = styles.polylineStyle;
             if (styles.keypointStyle !== undefined)
                 keypointStyle = styles.keypointStyle;
+            if (styles.shapeStyle !== undefined)
+                shapeStyle = styles.shapeStyle;
             styleVersion += 1;
         },
         destroy() {
@@ -4544,13 +4692,16 @@ function createPixiVectorLayer(options) {
         const polygon = polygonStyle?.resolve(detection, context);
         const polyline = polylineStyle?.resolve(detection, context);
         const keypoints = keypointStyle?.resolve(detection, context);
-        if (!polygon && !polyline && !keypoints)
+        const shapes = shapeStyle?.resolve(detection, context);
+        if (!polygon && !polyline && !keypoints && !shapes?.length) {
             return undefined;
+        }
         return {
             key: detectionKey(detection, detectionIndex),
             keypoints,
             polygon,
             polyline,
+            shapes,
             zIndex: detection.zIndex ?? detectionIndex,
         };
     }
@@ -4559,7 +4710,10 @@ function createPixiVectorLayer(options) {
         if (!entry.cleared)
             graphics.clear();
         entry.cleared = false;
-        const { keypoints, polygon, polyline } = detection;
+        const { keypoints, polygon, polyline, shapes } = detection;
+        for (const shape of shapes ?? []) {
+            drawShapeInstruction(graphics, shape, viewportScale);
+        }
         if (polygon) {
             graphics.poly(polygon.points.flatMap(({ x, y }) => [x, y]), true);
             if (polygon.fill)
@@ -4577,31 +4731,102 @@ function createPixiVectorLayer(options) {
             drawPixiPath(graphics, [edge.from, edge.to], false, edge.stroke, viewportScale);
         }
         for (const marker of keypoints.markers) {
-            const radius = resolveScreenLength(marker.radius, viewportScale);
             if (marker.shape === KeypointMarkerShape.Cross) {
-                drawPixiPath(graphics, [
-                    { x: marker.point.x - radius, y: marker.point.y - radius },
-                    { x: marker.point.x + radius, y: marker.point.y + radius },
-                ], false, marker.stroke ?? { alpha: 1, color: 0xffffff, width: 2 }, viewportScale);
-                drawPixiPath(graphics, [
-                    { x: marker.point.x + radius, y: marker.point.y - radius },
-                    { x: marker.point.x - radius, y: marker.point.y + radius },
-                ], false, marker.stroke ?? { alpha: 1, color: 0xffffff, width: 2 }, viewportScale);
+                drawMarkerInstruction(graphics, {
+                    center: marker.point,
+                    kind: ShapeInstructionKind.Marker,
+                    shape: MarkerShape.Cross,
+                    size: marker.radius * 2,
+                    sizeSpace: MarkerSizeSpace.Screen,
+                    stroke: asOpenStroke(marker.stroke ?? { alpha: 1, color: 0xffffff, width: 2 }),
+                }, viewportScale);
             }
             else {
-                graphics.circle(marker.point.x, marker.point.y, radius);
-                if (marker.fill)
-                    graphics.fill(marker.fill);
-                if (marker.stroke)
-                    graphics.stroke({
-                        alpha: marker.stroke.alpha,
-                        color: marker.stroke.color,
-                        width: resolveScreenLength(marker.stroke.width, viewportScale),
-                    });
+                drawMarkerInstruction(graphics, {
+                    center: marker.point,
+                    fill: marker.fill,
+                    kind: ShapeInstructionKind.Marker,
+                    shape: MarkerShape.Circle,
+                    size: marker.radius * 2,
+                    sizeSpace: MarkerSizeSpace.Screen,
+                    stroke: marker.stroke,
+                }, viewportScale);
             }
         }
     }
 }
+function drawShapeInstruction(graphics, instruction, viewportScale) {
+    if (instruction.kind === ShapeInstructionKind.Ellipse) {
+        const { closed, points } = sampleEllipseArc(instruction, resolveEllipseSegmentCount(instruction, viewportScale));
+        if (closed && instruction.fill) {
+            graphics.poly(points.flatMap(({ x, y }) => [x, y]), true);
+            graphics.fill(instruction.fill);
+        }
+        if (instruction.stroke) {
+            drawPixiPath(graphics, points, closed, instruction.stroke, viewportScale);
+        }
+        return;
+    }
+    if (instruction.kind === ShapeInstructionKind.Marker) {
+        drawMarkerInstruction(graphics, instruction, viewportScale);
+        return;
+    }
+    for (const segment of instruction.segments) {
+        if (instruction.closed && instruction.fill) {
+            graphics.poly(segment.flatMap(({ x, y }) => [x, y]), true);
+            graphics.fill(instruction.fill);
+        }
+        drawPixiPath(graphics, segment, instruction.closed, instruction.stroke, viewportScale);
+    }
+}
+function drawMarkerInstruction(graphics, instruction, viewportScale) {
+    const geometry = resolveMarkerGeometry(instruction, viewportScale);
+    if (geometry.kind === "circle") {
+        const dashed = Boolean(instruction.stroke?.dash?.length);
+        if (instruction.fill || !dashed) {
+            graphics.circle(geometry.center.x, geometry.center.y, geometry.radius);
+            if (instruction.fill)
+                graphics.fill(instruction.fill);
+        }
+        if (instruction.stroke) {
+            if (dashed) {
+                const ellipse = {
+                    center: geometry.center,
+                    radiusX: geometry.radius,
+                    radiusY: geometry.radius,
+                };
+                const { points } = sampleEllipseArc(ellipse, resolveEllipseSegmentCount(ellipse, viewportScale));
+                drawPixiPath(graphics, points, true, instruction.stroke, viewportScale);
+            }
+            else {
+                graphics.stroke(resolvePixiStroke(instruction.stroke, viewportScale));
+            }
+        }
+        return;
+    }
+    for (const subpath of geometry.subpaths) {
+        if (geometry.closed && instruction.fill) {
+            graphics.poly(subpath.flatMap(({ x, y }) => [x, y]), true);
+            graphics.fill(instruction.fill);
+        }
+        if (instruction.stroke) {
+            drawPixiPath(graphics, subpath, geometry.closed, instruction.stroke, viewportScale);
+        }
+    }
+}
+function asOpenStroke(stroke) {
+    if (!stroke)
+        return undefined;
+    return {
+        alpha: stroke.alpha,
+        cap: stroke.cap,
+        color: stroke.color,
+        dash: stroke.dash,
+        join: stroke.join,
+        miterLimit: stroke.miterLimit,
+        width: stroke.width,
+    };
+}
 function detectionKey(detection, detectionIndex) {
     return detection.id === undefined
         ? `index:${detectionIndex}`
@@ -4731,7 +4956,8 @@ function createPixiInteractionPresentationLayer(options) {
     }
     function createActivePick(pick, frame, mediaTime, state) {
         const activePick = rebaseDetectionPickToFrame(pick, frame);
-        if (!activePick) {
+        if (!activePick ||
+            options.isDetectionVisible?.(activePick.detection) === false) {
             return null;
         }
         const context = {
@@ -4988,7 +5214,7 @@ function createInteractionMaskRenderer(options) {
         autoGenerateMipmaps: false,
         dynamic: false,
         height: 1,
-        resource: createPlaceholderCanvas$1(),
+        resource: createPlaceholderCanvas$2(),
         scaleMode: "nearest",
         width: 1,
     });
@@ -5099,7 +5325,7 @@ function writePaletteEntry(palette, maskId, color, alpha) {
     palette[offset + 2] = (color & 0xff) / 255;
     palette[offset + 3] = clampedAlpha;
 }
-function createPlaceholderCanvas$1() {
+function createPlaceholderCanvas$2() {
     const canvas = document.createElement("canvas");
     canvas.height = 1;
     canvas.width = 1;
@@ -5247,7 +5473,7 @@ void main(void) {
 }
 `;
 
-const EMBEDDED_MASK_PREPARATION_WORKER_SOURCE = "(function () {\n    'use strict';\n\n    /** COCO-compatible keypoint visibility values. */\n    var KeypointVisibility;\n    (function (KeypointVisibility) {\n        KeypointVisibility[KeypointVisibility[\"NotLabeled\"] = 0] = \"NotLabeled\";\n        KeypointVisibility[KeypointVisibility[\"Occluded\"] = 1] = \"Occluded\";\n        KeypointVisibility[KeypointVisibility[\"Visible\"] = 2] = \"Visible\";\n    })(KeypointVisibility || (KeypointVisibility = {}));\n    var DetectionMaskEncoding;\n    (function (DetectionMaskEncoding) {\n        DetectionMaskEncoding[\"CompressedRle\"] = \"compressedRle\";\n    })(DetectionMaskEncoding || (DetectionMaskEncoding = {}));\n\n    var DetectionBufferStatus;\n    (function (DetectionBufferStatus) {\n        DetectionBufferStatus[\"Idle\"] = \"idle\";\n        DetectionBufferStatus[\"Loading\"] = \"loading\";\n        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        DetectionFrameSelectionMode[\"Interval\"] = \"interval\";\n        /**\n         * Select from a known inference frame grid using `frameIndex`, `frameRate`,\n         * and optional `frameIndexOriginTime`. This is useful when inference was run\n         * on normalized frames and playback should snap detections to that grid.\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    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[\"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    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 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    var BoxShape;\n    (function (BoxShape) {\n        BoxShape[\"Rect\"] = \"rect\";\n        BoxShape[\"RoundedRect\"] = \"roundedRect\";\n    })(BoxShape || (BoxShape = {}));\n    var BoxStrokeAlignment;\n    (function (BoxStrokeAlignment) {\n        BoxStrokeAlignment[\"Inside\"] = \"inside\";\n        BoxStrokeAlignment[\"Center\"] = \"center\";\n        BoxStrokeAlignment[\"Outside\"] = \"outside\";\n    })(BoxStrokeAlignment || (BoxStrokeAlignment = {}));\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    var KeypointMarkerShape;\n    (function (KeypointMarkerShape) {\n        KeypointMarkerShape[\"Circle\"] = \"circle\";\n        KeypointMarkerShape[\"Cross\"] = \"cross\";\n    })(KeypointMarkerShape || (KeypointMarkerShape = {}));\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 assertMaskDimensions(data, 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        if (data.length !== width * height) {\n            throw new Error(\"Mask data length must equal width * height.\");\n        }\n    }\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.ceil(intersections[index]));\n                const right = Math.min(dimensions.width - 1, Math.floor(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    const MAX_ID_MASK_PALETTE_ENTRIES = 64;\n    const MAX_ID_MASK_STROKE_WIDTH = 16;\n    function createIdMaskFrame(instructions) {\n        if (instructions.length === 0) {\n            return undefined;\n        }\n        const width = Math.max(...instructions.map(({ mask }) => mask.width));\n        const height = Math.max(...instructions.map(({ mask }) => mask.height));\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 = instruction.detectionIndex + 1;\n            if (detectionMaskId <= 0 ||\n                detectionMaskId >= MAX_ID_MASK_PALETTE_ENTRIES) {\n                return undefined;\n            }\n            writePaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);\n            if (instruction.stroke && instruction.stroke.width > 0) {\n                const strokeWidth = Math.min(Math.max(0, instruction.stroke.width), MAX_ID_MASK_STROKE_WIDTH);\n                hasStroke = true;\n                strokeWidths[detectionMaskId] = strokeWidth;\n                maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth);\n                writePaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);\n            }\n            const decodedMask = decodeCompressedRleMask(instruction.mask);\n            for (let y = 0; y < decodedMask.height; y += 1) {\n                for (let x = 0; x < decodedMask.width; x += 1) {\n                    const maskOffset = y * decodedMask.width + x;\n                    if (decodedMask.data[maskOffset]) {\n                        data[y * width + x] = detectionMaskId;\n                    }\n                }\n            }\n        }\n        return {\n            data,\n            fillPalette,\n            hasStroke,\n            height,\n            maxStrokeWidth,\n            strokePalette,\n            strokeWidths,\n            width,\n        };\n    }\n    function writePaletteEntry(palette, id, color, alpha) {\n        const offset = id * 4;\n        palette[offset] = ((color >> 16) & 0xff) / 255;\n        palette[offset + 1] = ((color >> 8) & 0xff) / 255;\n        palette[offset + 2] = (color & 0xff) / 255;\n        palette[offset + 3] = Math.max(0, Math.min(alpha, 1));\n    }\n\n    var MediaRendererFit;\n    (function (MediaRendererFit) {\n        /**\n         * Preserve media aspect ratio and fit the full frame inside the canvas.\n         */\n        MediaRendererFit[\"Contain\"] = \"contain\";\n        /**\n         * Preserve media aspect ratio and fill the canvas, cropping if necessary.\n         */\n        MediaRendererFit[\"Cover\"] = \"cover\";\n    })(MediaRendererFit || (MediaRendererFit = {}));\n    /**\n     * Playback lifecycle state reported by a platform renderer.\n     */\n    var MediaRendererPlaybackState;\n    (function (MediaRendererPlaybackState) {\n        MediaRendererPlaybackState[\"Loading\"] = \"loading\";\n        MediaRendererPlaybackState[\"Ready\"] = \"ready\";\n        MediaRendererPlaybackState[\"Playing\"] = \"playing\";\n        MediaRendererPlaybackState[\"Buffering\"] = \"buffering\";\n        MediaRendererPlaybackState[\"Paused\"] = \"paused\";\n        MediaRendererPlaybackState[\"Error\"] = \"error\";\n        MediaRendererPlaybackState[\"Destroyed\"] = \"destroyed\";\n    })(MediaRendererPlaybackState || (MediaRendererPlaybackState = {}));\n    /**\n     * 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    /**\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        MediaSessionActivityKind[\"DetectionsBuffering\"] = \"detectionsBuffering\";\n        MediaSessionActivityKind[\"DetectionsLoading\"] = \"detectionsLoading\";\n        MediaSessionActivityKind[\"Error\"] = \"error\";\n        MediaSessionActivityKind[\"MediaNormalizing\"] = \"mediaNormalizing\";\n        MediaSessionActivityKind[\"MediaOpening\"] = \"mediaOpening\";\n        MediaSessionActivityKind[\"PlaybackBuffering\"] = \"playbackBuffering\";\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    const PNG_SIGNATURE = new Uint8Array([\n        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,\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    async function createPngIdMaskFrame(instructions) {\n        const frame = createIdMaskFrame(materializeMaskInstructions(instructions));\n        if (!frame) {\n            return undefined;\n        }\n        return {\n            ...frame,\n            png: await encodeGrayscalePng({\n                height: frame.height,\n                pixels: frame.data,\n                width: frame.width,\n            }),\n        };\n    }\n    function compositeInstruction(rgba, canvasWidth, instruction) {\n        const decodedMask = decodeCompressedRleMask(instruction.mask);\n        const fill = resolveRgbaColor(instruction.color, instruction.alpha);\n        compositeMaskFill(rgba, canvasWidth, decodedMask, fill);\n        if (instruction.stroke) {\n            compositeMaskStroke(rgba, canvasWidth, decodedMask, instruction.stroke);\n        }\n    }\n    function materializeMaskInstructions(instructions) {\n        return instructions.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    function compositeMaskFill(rgba, canvasWidth, decodedMask, fill) {\n        for (let y = 0; y < decodedMask.height; y += 1) {\n            for (let x = 0; x < decodedMask.width; x += 1) {\n                const maskOffset = y * decodedMask.width + x;\n                if (!decodedMask.data[maskOffset]) {\n                    continue;\n                }\n                writePixel(rgba, canvasWidth, x, y, fill);\n            }\n        }\n    }\n    function compositeMaskStroke(rgba, canvasWidth, decodedMask, 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 = 0; y < decodedMask.height; y += 1) {\n            for (let x = 0; x < decodedMask.width; 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    async function encodeGrayscalePng(options) {\n        if (typeof CompressionStream === \"undefined\") {\n            throw new Error(\"CompressionStream is required to encode PNG ID masks.\");\n        }\n        const rawScanlines = createFilterlessPngScanlines(options);\n        const ihdr = new Uint8Array(13);\n        const ihdrView = new DataView(ihdr.buffer);\n        ihdrView.setUint32(0, options.width);\n        ihdrView.setUint32(4, options.height);\n        ihdr[8] = 8;\n        ihdr[9] = 0;\n        ihdr[10] = 0;\n        ihdr[11] = 0;\n        ihdr[12] = 0;\n        const compressed = new Uint8Array(await new Response(new Blob([rawScanlines])\n            .stream()\n            .pipeThrough(new CompressionStream(\"deflate\"))).arrayBuffer());\n        return concatUint8Arrays([\n            PNG_SIGNATURE,\n            createPngChunk(\"IHDR\", ihdr),\n            createPngChunk(\"IDAT\", compressed),\n            createPngChunk(\"IEND\", new Uint8Array(0)),\n        ]);\n    }\n    function createFilterlessPngScanlines(options) {\n        const rowStride = options.width + 1;\n        const scanlines = new Uint8Array(rowStride * options.height);\n        for (let y = 0; y < options.height; y += 1) {\n            const sourceOffset = y * options.width;\n            const targetOffset = y * rowStride;\n            scanlines[targetOffset] = 0;\n            scanlines.set(options.pixels.subarray(sourceOffset, sourceOffset + options.width), targetOffset + 1);\n        }\n        return scanlines;\n    }\n    function createPngChunk(type, data) {\n        const typeBytes = new TextEncoder().encode(type);\n        const chunk = new Uint8Array(12 + data.length);\n        const view = new DataView(chunk.buffer);\n        view.setUint32(0, data.length);\n        chunk.set(typeBytes, 4);\n        chunk.set(data, 8);\n        view.setUint32(8 + data.length, crc32(concatUint8Arrays([typeBytes, data])));\n        return chunk;\n    }\n    const crc32Table = createCrc32Table();\n    function createCrc32Table() {\n        const table = new Uint32Array(256);\n        for (let index = 0; index < table.length; index += 1) {\n            let value = index;\n            for (let bit = 0; bit < 8; bit += 1) {\n                value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1;\n            }\n            table[index] = value >>> 0;\n        }\n        return table;\n    }\n    function crc32(bytes) {\n        let crc = 0xffffffff;\n        for (const byte of bytes) {\n            crc = crc32Table[(crc ^ byte) & 0xff] ^ (crc >>> 8);\n        }\n        return (crc ^ 0xffffffff) >>> 0;\n    }\n    function concatUint8Arrays(chunks) {\n        const totalLength = chunks.reduce((total, chunk) => total + chunk.length, 0);\n        const result = new Uint8Array(totalLength);\n        let offset = 0;\n        for (const chunk of chunks) {\n            result.set(chunk, offset);\n            offset += chunk.length;\n        }\n        return result;\n    }\n\n    var PreparedMaskFrameKind;\n    (function (PreparedMaskFrameKind) {\n        PreparedMaskFrameKind[\"PngIdMask\"] = \"pngIdMask\";\n        PreparedMaskFrameKind[\"RgbaImage\"] = \"rgbaImage\";\n    })(PreparedMaskFrameKind || (PreparedMaskFrameKind = {}));\n\n    var MaskPreparationWorkerMessageType;\n    (function (MaskPreparationWorkerMessageType) {\n        MaskPreparationWorkerMessageType[\"Complete\"] = \"complete\";\n        MaskPreparationWorkerMessageType[\"Empty\"] = \"empty\";\n        MaskPreparationWorkerMessageType[\"Error\"] = \"error\";\n        MaskPreparationWorkerMessageType[\"Prepare\"] = \"prepare\";\n    })(MaskPreparationWorkerMessageType || (MaskPreparationWorkerMessageType = {}));\n\n    const workerScope = globalThis;\n    workerScope.addEventListener(\"message\", (event) => {\n        const message = event.data;\n        if (message.type !== MaskPreparationWorkerMessageType.Prepare) {\n            return;\n        }\n        void prepareMaskFrame(message);\n    });\n    async function prepareMaskFrame(message) {\n        try {\n            const pngIdMaskFrame = await createPngIdMaskWorkerResponse(message);\n            if (pngIdMaskFrame) {\n                workerScope.postMessage(pngIdMaskFrame, [\n                    pngIdMaskFrame.imageBitmap,\n                    pngIdMaskFrame.png.buffer,\n                    pngIdMaskFrame.fillPalette.buffer,\n                    pngIdMaskFrame.strokePalette.buffer,\n                    pngIdMaskFrame.strokeWidths.buffer,\n                ]);\n                return;\n            }\n            const compositedFrame = compositeMaskFrame(message.job.instructions);\n            if (!compositedFrame) {\n                workerScope.postMessage({\n                    key: message.job.key,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Empty,\n                });\n                return;\n            }\n            const imageData = new ImageData(compositedFrame.data, compositedFrame.width, compositedFrame.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    imageBitmap,\n                    key: message.job.key,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                }, [imageBitmap]);\n                return;\n            }\n            workerScope.postMessage({\n                imageData,\n                key: message.job.key,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Complete,\n            }, [imageData.data.buffer]);\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    async function createPngIdMaskWorkerResponse(message) {\n        if (typeof Blob === \"undefined\" ||\n            typeof createImageBitmap === \"undefined\" ||\n            typeof CompressionStream === \"undefined\") {\n            return undefined;\n        }\n        let frame;\n        try {\n            frame = await createPngIdMaskFrame(message.job.instructions);\n        }\n        catch {\n            return undefined;\n        }\n        if (!frame) {\n            return undefined;\n        }\n        let imageBitmap;\n        try {\n            imageBitmap = await createImageBitmap(new Blob([frame.png], { type: \"image/png\" }));\n        }\n        catch {\n            return undefined;\n        }\n        return {\n            artifactKind: PreparedMaskFrameKind.PngIdMask,\n            fillPalette: frame.fillPalette,\n            hasStroke: frame.hasStroke,\n            imageBitmap,\n            key: message.job.key,\n            maxStrokeWidth: frame.maxStrokeWidth,\n            png: frame.png,\n            requestId: message.requestId,\n            strokePalette: frame.strokePalette,\n            strokeWidths: frame.strokeWidths,\n            type: MaskPreparationWorkerMessageType.Complete,\n        };\n    }\n    function createImageBitmapFromImageData(imageData) {\n        if (typeof OffscreenCanvas === \"undefined\") {\n            return null;\n        }\n        const canvas = new OffscreenCanvas(imageData.width, imageData.height);\n        const context = canvas.getContext(\"2d\");\n        if (!context) {\n            return null;\n        }\n        context.putImageData(imageData, 0, 0);\n        return canvas.transferToImageBitmap();\n    }\n\n})();";
+const EMBEDDED_MASK_PREPARATION_WORKER_SOURCE = "(function () {\n    'use strict';\n\n    /** COCO-compatible keypoint visibility values. */\n    var KeypointVisibility;\n    (function (KeypointVisibility) {\n        KeypointVisibility[KeypointVisibility[\"NotLabeled\"] = 0] = \"NotLabeled\";\n        KeypointVisibility[KeypointVisibility[\"Occluded\"] = 1] = \"Occluded\";\n        KeypointVisibility[KeypointVisibility[\"Visible\"] = 2] = \"Visible\";\n    })(KeypointVisibility || (KeypointVisibility = {}));\n    var DetectionMaskEncoding;\n    (function (DetectionMaskEncoding) {\n        DetectionMaskEncoding[\"CompressedRle\"] = \"compressedRle\";\n    })(DetectionMaskEncoding || (DetectionMaskEncoding = {}));\n\n    var DetectionBufferStatus;\n    (function (DetectionBufferStatus) {\n        DetectionBufferStatus[\"Idle\"] = \"idle\";\n        DetectionBufferStatus[\"Loading\"] = \"loading\";\n        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        DetectionFrameSelectionMode[\"Interval\"] = \"interval\";\n        /**\n         * Select from a known inference frame grid using `frameIndex`, `frameRate`,\n         * and optional `frameIndexOriginTime`. This is useful when inference was run\n         * on normalized frames and playback should snap detections to that grid.\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    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[\"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    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 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 KeypointMarkerShape;\n    (function (KeypointMarkerShape) {\n        KeypointMarkerShape[\"Circle\"] = \"circle\";\n        KeypointMarkerShape[\"Cross\"] = \"cross\";\n    })(KeypointMarkerShape || (KeypointMarkerShape = {}));\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 assertMaskDimensions(data, 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        if (data.length !== width * height) {\n            throw new Error(\"Mask data length must equal width * height.\");\n        }\n    }\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.ceil(intersections[index]));\n                const right = Math.min(dimensions.width - 1, Math.floor(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    const MAX_ID_MASK_PALETTE_ENTRIES = 64;\n    const MAX_ID_MASK_STROKE_WIDTH = 16;\n    function createIdMaskFrame(instructions) {\n        if (instructions.length === 0) {\n            return undefined;\n        }\n        const width = Math.max(...instructions.map(({ mask }) => mask.width));\n        const height = Math.max(...instructions.map(({ mask }) => mask.height));\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 = instruction.detectionIndex + 1;\n            if (detectionMaskId <= 0 ||\n                detectionMaskId >= MAX_ID_MASK_PALETTE_ENTRIES) {\n                return undefined;\n            }\n            writePaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);\n            if (instruction.stroke && instruction.stroke.width > 0) {\n                const strokeWidth = Math.min(Math.max(0, instruction.stroke.width), MAX_ID_MASK_STROKE_WIDTH);\n                hasStroke = true;\n                strokeWidths[detectionMaskId] = strokeWidth;\n                maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth);\n                writePaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);\n            }\n            const decodedMask = decodeCompressedRleMask(instruction.mask);\n            for (let y = 0; y < decodedMask.height; y += 1) {\n                for (let x = 0; x < decodedMask.width; x += 1) {\n                    const maskOffset = y * decodedMask.width + x;\n                    if (decodedMask.data[maskOffset]) {\n                        data[y * width + x] = detectionMaskId;\n                    }\n                }\n            }\n        }\n        return {\n            data,\n            fillPalette,\n            hasStroke,\n            height,\n            maxStrokeWidth,\n            strokePalette,\n            strokeWidths,\n            width,\n        };\n    }\n    function writePaletteEntry(palette, id, color, alpha) {\n        const offset = id * 4;\n        palette[offset] = ((color >> 16) & 0xff) / 255;\n        palette[offset + 1] = ((color >> 8) & 0xff) / 255;\n        palette[offset + 2] = (color & 0xff) / 255;\n        palette[offset + 3] = Math.max(0, Math.min(alpha, 1));\n    }\n\n    var MediaRendererFit;\n    (function (MediaRendererFit) {\n        /**\n         * Preserve media aspect ratio and fit the full frame inside the canvas.\n         */\n        MediaRendererFit[\"Contain\"] = \"contain\";\n        /**\n         * Preserve media aspect ratio and fill the canvas, cropping if necessary.\n         */\n        MediaRendererFit[\"Cover\"] = \"cover\";\n    })(MediaRendererFit || (MediaRendererFit = {}));\n    /**\n     * Playback lifecycle state reported by a platform renderer.\n     */\n    var MediaRendererPlaybackState;\n    (function (MediaRendererPlaybackState) {\n        MediaRendererPlaybackState[\"Loading\"] = \"loading\";\n        MediaRendererPlaybackState[\"Ready\"] = \"ready\";\n        MediaRendererPlaybackState[\"Playing\"] = \"playing\";\n        MediaRendererPlaybackState[\"Buffering\"] = \"buffering\";\n        MediaRendererPlaybackState[\"Paused\"] = \"paused\";\n        MediaRendererPlaybackState[\"Error\"] = \"error\";\n        MediaRendererPlaybackState[\"Destroyed\"] = \"destroyed\";\n    })(MediaRendererPlaybackState || (MediaRendererPlaybackState = {}));\n    /**\n     * 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    /**\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        MediaSessionActivityKind[\"DetectionsBuffering\"] = \"detectionsBuffering\";\n        MediaSessionActivityKind[\"DetectionsLoading\"] = \"detectionsLoading\";\n        MediaSessionActivityKind[\"Error\"] = \"error\";\n        MediaSessionActivityKind[\"MediaNormalizing\"] = \"mediaNormalizing\";\n        MediaSessionActivityKind[\"MediaOpening\"] = \"mediaOpening\";\n        MediaSessionActivityKind[\"PlaybackBuffering\"] = \"playbackBuffering\";\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    const PNG_SIGNATURE = new Uint8Array([\n        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,\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 createMaskIdFrame(instructions) {\n        return createIdMaskFrame(materializeMaskInstructions(instructions));\n    }\n    async function createPngIdMaskFrame(instructions) {\n        const frame = createMaskIdFrame(instructions);\n        if (!frame) {\n            return undefined;\n        }\n        return {\n            ...frame,\n            png: await encodeGrayscalePng({\n                height: frame.height,\n                pixels: frame.data,\n                width: frame.width,\n            }),\n        };\n    }\n    function compositeInstruction(rgba, canvasWidth, instruction) {\n        const decodedMask = decodeCompressedRleMask(instruction.mask);\n        const fill = resolveRgbaColor(instruction.color, instruction.alpha);\n        compositeMaskFill(rgba, canvasWidth, decodedMask, fill);\n        if (instruction.stroke) {\n            compositeMaskStroke(rgba, canvasWidth, decodedMask, instruction.stroke);\n        }\n    }\n    function materializeMaskInstructions(instructions) {\n        return instructions.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    function compositeMaskFill(rgba, canvasWidth, decodedMask, fill) {\n        for (let y = 0; y < decodedMask.height; y += 1) {\n            for (let x = 0; x < decodedMask.width; x += 1) {\n                const maskOffset = y * decodedMask.width + x;\n                if (!decodedMask.data[maskOffset]) {\n                    continue;\n                }\n                writePixel(rgba, canvasWidth, x, y, fill);\n            }\n        }\n    }\n    function compositeMaskStroke(rgba, canvasWidth, decodedMask, 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 = 0; y < decodedMask.height; y += 1) {\n            for (let x = 0; x < decodedMask.width; 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    async function encodeGrayscalePng(options) {\n        if (typeof CompressionStream === \"undefined\") {\n            throw new Error(\"CompressionStream is required to encode PNG ID masks.\");\n        }\n        const rawScanlines = createFilterlessPngScanlines(options);\n        const ihdr = new Uint8Array(13);\n        const ihdrView = new DataView(ihdr.buffer);\n        ihdrView.setUint32(0, options.width);\n        ihdrView.setUint32(4, options.height);\n        ihdr[8] = 8;\n        ihdr[9] = 0;\n        ihdr[10] = 0;\n        ihdr[11] = 0;\n        ihdr[12] = 0;\n        const compressed = new Uint8Array(await new Response(new Blob([rawScanlines])\n            .stream()\n            .pipeThrough(new CompressionStream(\"deflate\"))).arrayBuffer());\n        return concatUint8Arrays([\n            PNG_SIGNATURE,\n            createPngChunk(\"IHDR\", ihdr),\n            createPngChunk(\"IDAT\", compressed),\n            createPngChunk(\"IEND\", new Uint8Array(0)),\n        ]);\n    }\n    function createFilterlessPngScanlines(options) {\n        const rowStride = options.width + 1;\n        const scanlines = new Uint8Array(rowStride * options.height);\n        for (let y = 0; y < options.height; y += 1) {\n            const sourceOffset = y * options.width;\n            const targetOffset = y * rowStride;\n            scanlines[targetOffset] = 0;\n            scanlines.set(options.pixels.subarray(sourceOffset, sourceOffset + options.width), targetOffset + 1);\n        }\n        return scanlines;\n    }\n    function createPngChunk(type, data) {\n        const typeBytes = new TextEncoder().encode(type);\n        const chunk = new Uint8Array(12 + data.length);\n        const view = new DataView(chunk.buffer);\n        view.setUint32(0, data.length);\n        chunk.set(typeBytes, 4);\n        chunk.set(data, 8);\n        view.setUint32(8 + data.length, crc32(concatUint8Arrays([typeBytes, data])));\n        return chunk;\n    }\n    const crc32Table = createCrc32Table();\n    function createCrc32Table() {\n        const table = new Uint32Array(256);\n        for (let index = 0; index < table.length; index += 1) {\n            let value = index;\n            for (let bit = 0; bit < 8; bit += 1) {\n                value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1;\n            }\n            table[index] = value >>> 0;\n        }\n        return table;\n    }\n    function crc32(bytes) {\n        let crc = 0xffffffff;\n        for (const byte of bytes) {\n            crc = crc32Table[(crc ^ byte) & 0xff] ^ (crc >>> 8);\n        }\n        return (crc ^ 0xffffffff) >>> 0;\n    }\n    function concatUint8Arrays(chunks) {\n        const totalLength = chunks.reduce((total, chunk) => total + chunk.length, 0);\n        const result = new Uint8Array(totalLength);\n        let offset = 0;\n        for (const chunk of chunks) {\n            result.set(chunk, offset);\n            offset += chunk.length;\n        }\n        return result;\n    }\n\n    var PreparedMaskFrameKind;\n    (function (PreparedMaskFrameKind) {\n        PreparedMaskFrameKind[\"PngIdMask\"] = \"pngIdMask\";\n        PreparedMaskFrameKind[\"RgbaImage\"] = \"rgbaImage\";\n    })(PreparedMaskFrameKind || (PreparedMaskFrameKind = {}));\n\n    var MaskPreparationWorkerMessageType;\n    (function (MaskPreparationWorkerMessageType) {\n        MaskPreparationWorkerMessageType[\"Complete\"] = \"complete\";\n        MaskPreparationWorkerMessageType[\"Empty\"] = \"empty\";\n        MaskPreparationWorkerMessageType[\"Error\"] = \"error\";\n        MaskPreparationWorkerMessageType[\"Prepare\"] = \"prepare\";\n    })(MaskPreparationWorkerMessageType || (MaskPreparationWorkerMessageType = {}));\n\n    const workerScope = globalThis;\n    workerScope.addEventListener(\"message\", (event) => {\n        const message = event.data;\n        if (message.type !== MaskPreparationWorkerMessageType.Prepare) {\n            return;\n        }\n        void prepareMaskFrame(message);\n    });\n    async function prepareMaskFrame(message) {\n        try {\n            const pngIdMaskFrame = await createPngIdMaskWorkerResponse(message);\n            if (pngIdMaskFrame) {\n                workerScope.postMessage(pngIdMaskFrame, [\n                    pngIdMaskFrame.imageBitmap,\n                    pngIdMaskFrame.png.buffer,\n                    pngIdMaskFrame.fillPalette.buffer,\n                    pngIdMaskFrame.strokePalette.buffer,\n                    pngIdMaskFrame.strokeWidths.buffer,\n                ]);\n                return;\n            }\n            const compositedFrame = compositeMaskFrame(message.job.instructions);\n            if (!compositedFrame) {\n                workerScope.postMessage({\n                    key: message.job.key,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Empty,\n                });\n                return;\n            }\n            const imageData = new ImageData(compositedFrame.data, compositedFrame.width, compositedFrame.height);\n            const imageBitmap = createImageBitmapFromImageData(imageData);\n            const idMaskData = createMaskIdFrame(message.job.instructions)?.data;\n            if (imageBitmap) {\n                workerScope.postMessage({\n                    imageBitmap,\n                    idMaskData,\n                    key: message.job.key,\n                    requestId: message.requestId,\n                    type: MaskPreparationWorkerMessageType.Complete,\n                }, [...(idMaskData ? [idMaskData.buffer] : []), imageBitmap]);\n                return;\n            }\n            workerScope.postMessage({\n                idMaskData,\n                imageData,\n                key: message.job.key,\n                requestId: message.requestId,\n                type: MaskPreparationWorkerMessageType.Complete,\n            }, [...(idMaskData ? [idMaskData.buffer] : []), imageData.data.buffer]);\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    async function createPngIdMaskWorkerResponse(message) {\n        if (typeof Blob === \"undefined\" ||\n            typeof createImageBitmap === \"undefined\" ||\n            typeof CompressionStream === \"undefined\") {\n            return undefined;\n        }\n        let frame;\n        try {\n            frame = await createPngIdMaskFrame(message.job.instructions);\n        }\n        catch {\n            return undefined;\n        }\n        if (!frame) {\n            return undefined;\n        }\n        let imageBitmap;\n        try {\n            imageBitmap = await createImageBitmap(new Blob([frame.png], { type: \"image/png\" }));\n        }\n        catch {\n            return undefined;\n        }\n        return {\n            artifactKind: PreparedMaskFrameKind.PngIdMask,\n            fillPalette: frame.fillPalette,\n            hasStroke: frame.hasStroke,\n            imageBitmap,\n            key: message.job.key,\n            maxStrokeWidth: frame.maxStrokeWidth,\n            png: frame.png,\n            requestId: message.requestId,\n            strokePalette: frame.strokePalette,\n            strokeWidths: frame.strokeWidths,\n            type: MaskPreparationWorkerMessageType.Complete,\n        };\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;
@@ -5522,6 +5748,7 @@ function createMainThreadMaskFramePreparer(workerStatus, message = null) {
                     canvas.height = 0;
                 },
                 height: compositedFrame.height,
+                idMaskData: createMaskIdFrame(job.instructions)?.data,
                 key: job.key,
                 kind: PreparedMaskFrameKind.RgbaImage,
                 source: canvas,
@@ -5696,6 +5923,7 @@ function createPreparedFrameFromWorkerResponse(message) {
                 message.imageBitmap?.close();
             },
             height: message.imageBitmap.height,
+            idMaskData: message.idMaskData,
             key: message.key,
             kind: PreparedMaskFrameKind.RgbaImage,
             source: message.imageBitmap,
@@ -5719,6 +5947,7 @@ function createPreparedFrameFromWorkerResponse(message) {
             canvas.height = 0;
         },
         height: message.imageData.height,
+        idMaskData: message.idMaskData,
         key: message.key,
         kind: PreparedMaskFrameKind.RgbaImage,
         source: canvas,
@@ -6587,7 +6816,7 @@ function createPixiIdMaskShaderRenderer(options) {
         autoGenerateMipmaps: false,
         dynamic: false,
         height: 1,
-        resource: createPlaceholderCanvas(),
+        resource: createPlaceholderCanvas$1(),
         scaleMode: "nearest",
         width: 1,
     });
@@ -6677,7 +6906,7 @@ function createPixiIdMaskShaderRenderer(options) {
         mesh.shader = shader;
     }
 }
-function createPlaceholderCanvas() {
+function createPlaceholderCanvas$1() {
     const canvas = document.createElement("canvas");
     canvas.height = 1;
     canvas.width = 1;
@@ -6827,15 +7056,219 @@ void main(void) {
 }
 `;
 
+/**
+ * Renders blurred, per-detection-colored copies of the prepared id mask
+ * beneath the mask layer. Each pass maps mask ids through a halo palette and
+ * a GPU blur filter turns that coverage into a smooth glow following the
+ * exact mask silhouette, reusing the already-prepared mask texture. Passes
+ * are pooled and one runs per distinct spread.
+ */
+function createPixiMaskHaloRenderer(options) {
+    const display = new options.Container();
+    const placeholderSource = new options.ImageSource({
+        autoGenerateMipmaps: false,
+        dynamic: false,
+        height: 1,
+        resource: createPlaceholderCanvas(),
+        scaleMode: "nearest",
+        width: 1,
+    });
+    const geometry = new options.MeshGeometry({
+        indices: new Uint32Array([0, 1, 2, 0, 2, 3]),
+        positions: new Float32Array([
+            0,
+            0,
+            options.mediaWidth,
+            0,
+            options.mediaWidth,
+            options.mediaHeight,
+            0,
+            options.mediaHeight,
+        ]),
+        shrinkBuffersToFit: true,
+        topology: "triangle-list",
+        uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
+    });
+    const passes = [];
+    display.visible = false;
+    return {
+        destroy() {
+            for (const pass of passes) {
+                pass.mesh.destroy();
+                pass.shader.destroy(true);
+            }
+            passes.length = 0;
+            display.destroy();
+            geometry.destroy();
+            placeholderSource.destroy();
+        },
+        display,
+        hide() {
+            display.visible = false;
+        },
+        render(frame, texture, groups) {
+            if (groups.length === 0) {
+                display.visible = false;
+                return;
+            }
+            for (const [index, group] of groups.entries()) {
+                const pass = ensurePass(index);
+                bindTexture(pass, texture.source);
+                pass.uniforms.uniforms.uHaloPalette = group.palette;
+                pass.uniforms.update();
+                pass.blurFilter.strength = Math.max(group.spread, 0);
+                pass.mesh.visible = true;
+            }
+            for (const pass of passes.slice(groups.length)) {
+                pass.mesh.visible = false;
+            }
+            display.visible = true;
+        },
+        setOpacity(opacity) {
+            display.alpha = opacity;
+        },
+    };
+    function ensurePass(index) {
+        const existing = passes[index];
+        if (existing) {
+            return existing;
+        }
+        const uniforms = new options.UniformGroup({
+            uHaloPalette: {
+                size: MAX_ID_MASK_PALETTE_ENTRIES,
+                type: "vec4<f32>",
+                value: new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES * 4),
+            },
+        });
+        const shader = createShader(uniforms);
+        const mesh = new options.Mesh({ geometry, shader });
+        const blurFilter = new options.BlurFilter({ quality: 4, strength: 8 });
+        // Filters size their working texture from measured bounds, and a
+        // custom-geometry mesh measures empty; an explicit bounds area keeps the
+        // blur pass covering the full media rect.
+        mesh.boundsArea = new options.Rectangle(0, 0, options.mediaWidth, options.mediaHeight);
+        mesh.filters = [blurFilter];
+        display.addChild(mesh);
+        const pass = { blurFilter, mesh, shader, uniforms };
+        passes.push(pass);
+        return pass;
+    }
+    function bindTexture(pass, source) {
+        try {
+            pass.shader.resources.uTexture = source;
+            pass.shader.resources.uSampler = source.style;
+        }
+        catch {
+            try {
+                pass.shader.destroy(true);
+            }
+            catch {
+                // Pixi has already invalidated this shader's resource group.
+            }
+            pass.shader = createShader(pass.uniforms);
+            pass.mesh.shader = pass.shader;
+            pass.shader.resources.uTexture = source;
+            pass.shader.resources.uSampler = source.style;
+        }
+    }
+    function createShader(uniforms) {
+        return options.Shader.from({
+            gl: {
+                fragment: maskHaloFragmentShader,
+                vertex: maskHaloVertexShader,
+            },
+            resources: {
+                haloUniforms: uniforms,
+                uSampler: placeholderSource.style,
+                uTexture: placeholderSource,
+            },
+        });
+    }
+}
+/**
+ * Builds one halo palette uniform: premultiplied halo color and alpha per
+ * mask id, transparent for ids outside the group.
+ */
+function buildMaskHaloPalette(halos) {
+    const palette = new Float32Array(MAX_ID_MASK_PALETTE_ENTRIES * 4);
+    for (const [maskId, halo] of halos) {
+        if (maskId <= 0 || maskId >= MAX_ID_MASK_PALETTE_ENTRIES) {
+            continue;
+        }
+        const alpha = Math.max(0, Math.min(halo.alpha, 1));
+        const offset = maskId * 4;
+        palette[offset] = (((halo.color >> 16) & 0xff) / 255) * alpha;
+        palette[offset + 1] = (((halo.color >> 8) & 0xff) / 255) * alpha;
+        palette[offset + 2] = ((halo.color & 0xff) / 255) * alpha;
+        palette[offset + 3] = alpha;
+    }
+    return palette;
+}
+function createPlaceholderCanvas() {
+    const canvas = document.createElement("canvas");
+    canvas.height = 1;
+    canvas.width = 1;
+    return canvas;
+}
+const maskHaloVertexShader = `#version 300 es
+precision highp float;
+
+in vec2 aPosition;
+in vec2 aUV;
+
+uniform mat3 uProjectionMatrix;
+uniform mat3 uWorldTransformMatrix;
+uniform vec4 uWorldColorAlpha;
+uniform mat3 uTransformMatrix;
+uniform vec4 uColor;
+
+out vec2 vUV;
+out vec4 vColor;
+
+void main(void) {
+  mat3 modelViewProjectionMatrix =
+    uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
+
+  gl_Position =
+    vec4((modelViewProjectionMatrix * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
+  vUV = aUV;
+  vColor = uWorldColorAlpha * uColor;
+}
+`;
+const maskHaloFragmentShader = `#version 300 es
+precision highp float;
+precision highp int;
+
+in vec2 vUV;
+in vec4 vColor;
+
+uniform sampler2D uTexture;
+uniform vec4 uHaloPalette[${MAX_ID_MASK_PALETTE_ENTRIES}];
+
+out vec4 finalColor;
+
+void main(void) {
+  float maskId = floor(texture(uTexture, vUV).r * 255.0 + 0.5);
+  int paletteIndex =
+    int(clamp(maskId, 0.0, float(${MAX_ID_MASK_PALETTE_ENTRIES - 1})));
+
+  finalColor = uHaloPalette[paletteIndex] * vColor;
+}
+`;
+
 const MAX_PENDING_MASK_HOLD_SECONDS = 0.05;
 function createPixiMaskLayer(options) {
     let mediaHeight = 0;
     let mediaWidth = 0;
     let idMaskRenderer;
+    let haloRenderer;
+    let currentMaskHaloStyle = options.maskHaloStyle ?? null;
+    options.maskStyle;
     let maskSprite;
     let activeFrameKey = null;
     let activeFrameMediaTime = null;
     let activeIdMaskFrame = null;
+    let activeRgbaMaskFrame = null;
     let maskOpacity = resolveMaskStyleOpacity(options.maskStyle);
     let maskPickCanvas;
     let maskPickContext;
@@ -6843,6 +7276,7 @@ function createPixiMaskLayer(options) {
     let visibleMaskMediaTime = null;
     let isDestroyed = false;
     const maskTextures = new Map();
+    const haloTextures = new Map();
     const preparedRenderWindow = createPreparedRenderWindow({
         artifactKind: options.artifactKind,
         detectionTimeline: options.detectionTimeline,
@@ -6888,10 +7322,19 @@ function createPixiMaskLayer(options) {
             maskSprite.height = mediaHeight;
             idMaskRenderer = createIdMaskRenderer();
             idMaskRenderer?.setOpacity(maskOpacity);
+            haloRenderer = createHaloRenderer();
+            // Halo alpha is resolved from MaskHaloStyle per detection. It must not
+            // inherit the independent mask renderer's global opacity.
+            haloRenderer?.setOpacity(1);
             if (!idMaskRenderer || !options.Container) {
                 return maskSprite;
             }
             const maskContainer = new options.Container();
+            // The halo draws beneath the mask so the glow bleeds outward from the
+            // silhouette while fills and borders stay crisp on top.
+            if (haloRenderer) {
+                maskContainer.addChild(haloRenderer.display);
+            }
             maskContainer.addChild(maskSprite, idMaskRenderer.mesh);
             return maskContainer;
         },
@@ -6901,6 +7344,7 @@ function createPixiMaskLayer(options) {
                 activeFrameKey = preparedFrame?.key ?? null;
                 activeFrameMediaTime = preparedFrame?.detectionFrame.mediaTime ?? null;
                 activeIdMaskFrame = null;
+                activeRgbaMaskFrame = null;
                 hideSprite();
                 return;
             }
@@ -6913,6 +7357,7 @@ function createPixiMaskLayer(options) {
             if (preparedFrame.maskStatus === PreparedRenderFrameMaskStatus.Empty ||
                 preparedFrame.maskStatus === PreparedRenderFrameMaskStatus.Disabled) {
                 activeIdMaskFrame = null;
+                activeRgbaMaskFrame = null;
                 hideSprite();
                 return;
             }
@@ -6965,6 +7410,14 @@ function createPixiMaskLayer(options) {
                 applyMaskOpacity();
             }
             preparedRenderWindow.setMaskStyle(nextMaskStyle);
+            refreshHalo();
+        },
+        setMaskHaloStyle(nextMaskHaloStyle) {
+            if (nextMaskHaloStyle === undefined) {
+                return;
+            }
+            currentMaskHaloStyle = nextMaskHaloStyle;
+            refreshHalo();
         },
         destroy() {
             if (isDestroyed) {
@@ -6975,17 +7428,22 @@ function createPixiMaskLayer(options) {
             destroyTextures();
             resetMaskPickCanvas();
             idMaskRenderer?.destroy();
+            haloRenderer?.destroy();
         },
     };
     function showMaskFrame(maskFrame, mediaTime) {
         visibleMaskMediaTime = mediaTime;
         activeIdMaskFrame =
             maskFrame.kind === PreparedMaskFrameKind.PngIdMask ? maskFrame : null;
+        activeRgbaMaskFrame =
+            maskFrame.kind === PreparedMaskFrameKind.RgbaImage ? maskFrame : null;
         if (maskFrame.kind === PreparedMaskFrameKind.PngIdMask && idMaskRenderer) {
             showIdMaskFrame(maskFrame);
             return;
         }
-        showRgbaMaskFrame(maskFrame);
+        if (maskFrame.kind === PreparedMaskFrameKind.RgbaImage) {
+            showRgbaMaskFrame(maskFrame);
+        }
     }
     function getTexture(maskFrame) {
         const existingTexture = maskTextures.get(maskFrame.key);
@@ -7009,6 +7467,40 @@ function createPixiMaskLayer(options) {
         maskTextures.set(maskFrame.key, texture);
         return texture;
     }
+    function getHaloTexture(maskFrame) {
+        const existingTexture = haloTextures.get(maskFrame.key);
+        if (existingTexture) {
+            return existingTexture;
+        }
+        if (!maskFrame.idMaskData || typeof document === "undefined") {
+            return undefined;
+        }
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        if (!context || typeof context.createImageData !== "function") {
+            return undefined;
+        }
+        canvas.width = maskFrame.width;
+        canvas.height = maskFrame.height;
+        const imageData = context.createImageData(maskFrame.width, maskFrame.height);
+        for (let index = 0; index < maskFrame.idMaskData.length; index += 1) {
+            const offset = index * 4;
+            imageData.data[offset] = maskFrame.idMaskData[index];
+            imageData.data[offset + 3] = 255;
+        }
+        context.putImageData(imageData, 0, 0);
+        const source = new options.ImageSource({
+            autoGenerateMipmaps: false,
+            dynamic: false,
+            height: maskFrame.height,
+            resource: canvas,
+            scaleMode: "nearest",
+            width: maskFrame.width,
+        });
+        const texture = new options.Texture({ dynamic: false, source });
+        haloTextures.set(maskFrame.key, texture);
+        return texture;
+    }
     function showRgbaMaskFrame(maskFrame) {
         if (!maskSprite) {
             return;
@@ -7020,6 +7512,13 @@ function createPixiMaskLayer(options) {
         maskSprite.height = mediaHeight;
         maskSprite.visible = true;
         idMaskRenderer?.hide();
+        const haloTexture = getHaloTexture(maskFrame);
+        if (haloTexture) {
+            renderHalo(maskFrame, haloTexture);
+        }
+        else {
+            haloRenderer?.hide();
+        }
     }
     function showIdMaskFrame(maskFrame) {
         if (!idMaskRenderer || !maskSprite) {
@@ -7027,14 +7526,82 @@ function createPixiMaskLayer(options) {
         }
         maskSprite.visible = false;
         idMaskRenderer.render(maskFrame, getTexture(maskFrame));
+        renderHalo(maskFrame, getTexture(maskFrame));
+    }
+    function renderHalo(maskFrame, texture) {
+        if (!haloRenderer) {
+            return;
+        }
+        const groups = resolveFrameHaloGroups();
+        if (groups.length === 0) {
+            haloRenderer.hide();
+            return;
+        }
+        haloRenderer.render(maskFrame, texture, groups);
+    }
+    function refreshHalo() {
+        if (activeIdMaskFrame) {
+            renderHalo(activeIdMaskFrame, getTexture(activeIdMaskFrame));
+            return;
+        }
+        if (activeRgbaMaskFrame) {
+            const texture = getHaloTexture(activeRgbaMaskFrame);
+            if (texture) {
+                renderHalo(activeRgbaMaskFrame, texture);
+            }
+        }
+    }
+    /**
+     * Halo instructions resolve per frame from the live halo style rather than
+     * being baked into the prepared artifact, so halo edits never invalidate
+     * prepared mask pixels. Detections are grouped by their requested spread
+     * and every group renders in its own blur pass, preserving each
+     * detection's public spread contract.
+     */
+    function resolveFrameHaloGroups() {
+        if (visibleMaskMediaTime === null || !currentMaskHaloStyle) {
+            return [];
+        }
+        const frame = options.detectionTimeline.selectFrame(visibleMaskMediaTime);
+        if (!frame) {
+            return [];
+        }
+        const bySpread = new Map();
+        for (const [detectionIndex, detection] of frame.detections.entries()) {
+            if (!detection.mask) {
+                continue;
+            }
+            const halo = currentMaskHaloStyle.resolve(detection, {
+                detectionIndex,
+                frame,
+                mediaTime: visibleMaskMediaTime,
+            });
+            if (!halo || halo.alpha <= 0 || halo.spread <= 0) {
+                continue;
+            }
+            let group = bySpread.get(halo.spread);
+            if (!group) {
+                group = new Map();
+                bySpread.set(halo.spread, group);
+            }
+            group.set(detectionIndex + 1, { alpha: halo.alpha, color: halo.color });
+        }
+        return [...bySpread.entries()]
+            .sort(([left], [right]) => left - right)
+            .map(([spread, halos]) => ({
+            palette: buildMaskHaloPalette(halos),
+            spread,
+        }));
     }
     function hideSprite() {
         visibleMaskMediaTime = null;
         activeIdMaskFrame = null;
+        activeRgbaMaskFrame = null;
         if (maskSprite) {
             maskSprite.visible = false;
         }
         idMaskRenderer?.hide();
+        haloRenderer?.hide();
     }
     function canHoldVisibleMaskFor(mediaTime) {
         return (visibleMaskMediaTime !== null &&
@@ -7050,11 +7617,21 @@ function createPixiMaskLayer(options) {
     function destroyTexture(key) {
         const texture = maskTextures.get(key);
         if (!texture) {
+            destroyHaloTexture(key);
             return;
         }
         releaseTextureBindings(key, texture);
         maskTextures.delete(key);
         texture.destroy(true);
+        destroyHaloTexture(key);
+    }
+    function destroyHaloTexture(key) {
+        const texture = haloTextures.get(key);
+        if (!texture) {
+            return;
+        }
+        haloTextures.delete(key);
+        texture.destroy(true);
     }
     function destroyTextures() {
         releaseTextureBindings();
@@ -7062,6 +7639,10 @@ function createPixiMaskLayer(options) {
             texture.destroy(true);
         }
         maskTextures.clear();
+        for (const texture of haloTextures.values()) {
+            texture.destroy(true);
+        }
+        haloTextures.clear();
     }
     function releaseTextureBindings(key, texture) {
         if (!texture || maskSprite?.texture === texture) {
@@ -7073,6 +7654,31 @@ function createPixiMaskLayer(options) {
             idMaskRenderer?.clearTexture();
         }
     }
+    function createHaloRenderer() {
+        if (!options.BlurFilter ||
+            !options.Container ||
+            !options.Rectangle ||
+            !options.Mesh ||
+            !options.MeshGeometry ||
+            !options.Shader ||
+            !options.UniformGroup ||
+            mediaWidth <= 0 ||
+            mediaHeight <= 0) {
+            return undefined;
+        }
+        return createPixiMaskHaloRenderer({
+            BlurFilter: options.BlurFilter,
+            Container: options.Container,
+            Rectangle: options.Rectangle,
+            ImageSource: options.ImageSource,
+            Mesh: options.Mesh,
+            MeshGeometry: options.MeshGeometry,
+            Shader: options.Shader,
+            UniformGroup: options.UniformGroup,
+            mediaHeight,
+            mediaWidth,
+        });
+    }
     function createIdMaskRenderer() {
         if (!options.Mesh ||
             !options.MeshGeometry ||
@@ -7273,6 +7879,9 @@ function canPreparePolygonInstruction(instruction) {
     return (instruction.points.length >= 3 &&
         Boolean(instruction.fill || stroke) &&
         !stroke?.dash?.length &&
+        stroke?.cap === undefined &&
+        stroke?.join === undefined &&
+        stroke?.miterLimit === undefined &&
         (stroke?.alignment === undefined ||
             stroke.alignment === BoxStrokeAlignment.Center));
 }
@@ -7317,6 +7926,367 @@ function resolvePreparedPolygonInstructions(options) {
     return instructions;
 }
 
+const sharedAssets = new WeakMap();
+/** Browser implementation for asset-backed region renderer descriptors. */
+function createPixiRegionLayer(options) {
+    let container;
+    let currentFrame;
+    let currentMediaTime = 0;
+    let currentViewportScale = 1;
+    let destroyed = false;
+    let renderers = [...options.regionRenderers];
+    const assets = new Map();
+    const entries = new Map();
+    const pools = new Map();
+    syncAssets();
+    return {
+        createContainer() {
+            if (!container) {
+                container = new options.Container();
+                container.sortableChildren = true;
+            }
+            return container;
+        },
+        drawFrame(mediaTime, viewportScale = 1) {
+            currentMediaTime = mediaTime;
+            currentViewportScale = viewportScale;
+            currentFrame = options.detectionTimeline.selectFrame(mediaTime);
+            const activeKeys = new Set();
+            const activeDetectionIndexes = new Set();
+            for (const entry of entries.values())
+                entry.active = false;
+            if (currentFrame) {
+                for (const [rendererIndex, renderer] of renderers.entries()) {
+                    const asset = assets.get(renderer.id);
+                    if (!asset?.asset)
+                        continue;
+                    for (const [detectionIndex, detection,] of currentFrame.detections.entries()) {
+                        const context = {
+                            detectionIndex,
+                            frame: currentFrame,
+                            mediaTime,
+                            viewportScale,
+                            ...options.resolveContextState?.(detection),
+                        };
+                        if (context.hidden ||
+                            !matchesTarget(renderer, detection, context)) {
+                            continue;
+                        }
+                        const region = resolveRegion(renderer, detection);
+                        if (!region)
+                            continue;
+                        const key = resolveSpriteKey(renderer.id, detection, detectionIndex);
+                        const entry = ensureEntry(key, renderer.id, asset.src, asset.asset, detection.id);
+                        const position = positionSprite(entry.display, renderer, region, asset.asset);
+                        entry.baseX = position.x;
+                        entry.baseY = position.y;
+                        entry.detectionId = detection.id;
+                        entry.display.zIndex =
+                            (renderer.compose?.zIndex ?? 0) * 1_000_000 +
+                                rendererIndex * 10_000 +
+                                (detection.zIndex ?? detectionIndex);
+                        entry.display.visible = true;
+                        entry.active = true;
+                        activeKeys.add(key);
+                        activeDetectionIndexes.add(detectionIndex);
+                    }
+                }
+            }
+            for (const [key, entry] of entries) {
+                if (activeKeys.has(key))
+                    continue;
+                entry.display.visible = false;
+                pauseAnimatedDisplay(entry.display);
+                entries.delete(key);
+                const poolKey = resolvePoolKey(entry.rendererId, entry.src);
+                const pool = pools.get(poolKey) ?? [];
+                pool.push(entry);
+                pools.set(poolKey, pool);
+            }
+            return { activeDetectionIndexes: [...activeDetectionIndexes] };
+        },
+        setRenderers(nextRenderers) {
+            renderers = [...nextRenderers];
+            syncAssets();
+            this.drawFrame(currentMediaTime, currentViewportScale);
+        },
+        translateDetection(id, x, y) {
+            let translated = false;
+            for (const entry of entries.values()) {
+                if (!entry.active || entry.detectionId !== id)
+                    continue;
+                entry.display.position.set(entry.baseX + x, entry.baseY + y);
+                translated = true;
+            }
+            return translated;
+        },
+        destroy() {
+            destroyed = true;
+            destroyAllDisplays();
+            for (const asset of assets.values())
+                asset.lease.release();
+            assets.clear();
+            container = undefined;
+            currentFrame = undefined;
+        },
+    };
+    function syncAssets() {
+        const desired = new Map(renderers.map((renderer) => [renderer.id, renderer.source.asset.src]));
+        for (const [id, asset] of assets) {
+            if (desired.get(id) === asset.src)
+                continue;
+            destroyRendererDisplays(id);
+            asset.lease.release();
+            assets.delete(id);
+        }
+        for (const [id, src] of desired) {
+            if (assets.has(id))
+                continue;
+            const lease = acquireAsset(options.Assets, src);
+            const asset = { lease, src };
+            assets.set(id, asset);
+            void lease.asset.then((loadedAsset) => {
+                if (destroyed || assets.get(id) !== asset)
+                    return;
+                asset.asset = loadedAsset;
+                options.onInvalidate?.();
+            }, (error) => {
+                // A failed asset is omitted. Replacing the descriptor retries it.
+                options.onAssetError?.({ error, rendererId: id, src });
+            });
+        }
+    }
+    function ensureEntry(key, rendererId, src, asset, detectionId) {
+        let entry = entries.get(key);
+        if (entry)
+            return entry;
+        const poolKey = resolvePoolKey(rendererId, src);
+        const pool = pools.get(poolKey);
+        entry = pool?.pop();
+        if (pool?.length === 0)
+            pools.delete(poolKey);
+        if (entry) {
+            entry.detectionId = detectionId;
+            resumeAnimatedDisplay(entry.display);
+        }
+        else {
+            const display = isGifSource(asset)
+                ? new options.GifSprite({ autoPlay: true, loop: true, source: asset })
+                : new options.Sprite({ texture: asset });
+            display.anchor.set(0.5);
+            container?.addChild(display);
+            entry = {
+                active: false,
+                baseX: 0,
+                baseY: 0,
+                detectionId,
+                display,
+                rendererId,
+                src,
+            };
+        }
+        entries.set(key, entry);
+        return entry;
+    }
+    function destroyRendererDisplays(rendererId) {
+        for (const [key, entry] of entries) {
+            if (entry.rendererId !== rendererId)
+                continue;
+            destroyDisplay(entry.display);
+            entries.delete(key);
+        }
+        for (const [key, pool] of pools) {
+            const retained = pool.filter((entry) => {
+                if (entry.rendererId !== rendererId)
+                    return true;
+                destroyDisplay(entry.display);
+                return false;
+            });
+            if (retained.length > 0)
+                pools.set(key, retained);
+            else
+                pools.delete(key);
+        }
+    }
+    function destroyAllDisplays() {
+        for (const entry of entries.values())
+            destroyDisplay(entry.display);
+        for (const pool of pools.values()) {
+            for (const entry of pool)
+                destroyDisplay(entry.display);
+        }
+        entries.clear();
+        pools.clear();
+    }
+}
+function destroyDisplay(display) {
+    display.removeFromParent?.();
+    // GifSprite sources are shared and released through Assets.unload().
+    display.destroy();
+}
+function pauseAnimatedDisplay(display) {
+    if ("stop" in display && typeof display.stop === "function")
+        display.stop();
+}
+function resumeAnimatedDisplay(display) {
+    if ("play" in display && typeof display.play === "function")
+        display.play();
+}
+function matchesTarget(renderer, detection, context) {
+    const { target } = renderer;
+    return (matchesValue(target.id, detection.id) &&
+        matchesValue(target.className, detection.className) &&
+        matchesValue(target.sourceId, detection.sourceId) &&
+        (target.resolve?.(detection, context) ?? true));
+}
+function matchesValue(configured, actual) {
+    if (configured === undefined)
+        return true;
+    if (actual === undefined)
+        return false;
+    return Array.isArray(configured)
+        ? configured.includes(actual)
+        : configured === actual;
+}
+function resolveRegion(renderer, detection) {
+    if (renderer.region.kind === "bounds")
+        return detection.rect;
+    const fallbackSize = detection.rect
+        ? Math.max(1, detection.rect.width * 0.4)
+        : undefined;
+    if (renderer.region.anchor === "head") {
+        const facePoints = detection.keypoints?.points
+            .slice(0, 5)
+            .filter((_, index) => (detection.keypoints?.visibility?.[index] ?? 2) > 0);
+        if (facePoints && facePoints.length > 0) {
+            const xs = facePoints.map(({ x }) => x);
+            const ys = facePoints.map(({ y }) => y);
+            const width = Math.max(fallbackSize ?? 1, (Math.max(...xs) - Math.min(...xs)) * 2);
+            return {
+                height: width,
+                width,
+                x: xs.reduce((sum, x) => sum + x, 0) / xs.length,
+                y: ys.reduce((sum, y) => sum + y, 0) / ys.length,
+            };
+        }
+        if (!detection.rect || fallbackSize === undefined)
+            return undefined;
+        return {
+            height: fallbackSize,
+            width: fallbackSize,
+            x: detection.rect.x,
+            y: detection.rect.y - detection.rect.height / 2,
+        };
+    }
+    const point = detection.keypoints?.points[renderer.region.anchor];
+    const visibility = detection.keypoints?.visibility?.[renderer.region.anchor] ?? 2;
+    if (!point || visibility <= 0 || fallbackSize === undefined)
+        return undefined;
+    return { height: fallbackSize, width: fallbackSize, x: point.x, y: point.y };
+}
+function positionSprite(sprite, renderer, region, asset) {
+    const scale = finiteOr(renderer.transform?.scale, 1);
+    const opacity = Math.min(1, Math.max(0, finiteOr(renderer.transform?.opacity, 1)));
+    const sourceWidth = Math.max(1, asset.width);
+    const sourceHeight = Math.max(1, asset.height);
+    const containScale = Math.min(region.width / sourceWidth, region.height / sourceHeight);
+    const offset = renderer.transform?.offset;
+    sprite.alpha = opacity;
+    sprite.width = sourceWidth * containScale * scale;
+    sprite.height = sourceHeight * containScale * scale;
+    const position = {
+        x: region.x + finiteOr(offset?.x, 0) * region.width,
+        y: region.y + finiteOr(offset?.y, 0) * region.height,
+    };
+    sprite.position.set(position.x, position.y);
+    sprite.rotation = finiteOr(renderer.transform?.rotation, 0);
+    return position;
+}
+function isGifSource(asset) {
+    return ("totalFrames" in asset && "frames" in asset && Array.isArray(asset.frames));
+}
+function resolvePoolKey(rendererId, src) {
+    return JSON.stringify([rendererId, src]);
+}
+function resolveSpriteKey(rendererId, detection, detectionIndex) {
+    return JSON.stringify([rendererId, detection.id ?? null, detectionIndex]);
+}
+function finiteOr(value, fallback) {
+    return value !== undefined && Number.isFinite(value) ? value : fallback;
+}
+function acquireAsset(loader, src) {
+    let cache = sharedAssets.get(loader);
+    if (!cache) {
+        cache = new Map();
+        sharedAssets.set(loader, cache);
+    }
+    let entry = cache.get(src);
+    if (!entry) {
+        entry = { asset: loader.load(src), references: 0 };
+        cache.set(src, entry);
+    }
+    entry.references += 1;
+    let released = false;
+    return {
+        release() {
+            if (released)
+                return;
+            released = true;
+            entry.references -= 1;
+            if (entry.references > 0)
+                return;
+            cache.delete(src);
+            void entry.asset.then(() => loader.unload(src), () => undefined);
+        },
+        asset: entry.asset,
+    };
+}
+
+/**
+ * Bridges public annotation renderer kinds onto the internal vector-layer
+ * shape pipeline.
+ *
+ * Each shape-backed renderer kind resolves its own public instruction per
+ * detection; this adapter lowers those instructions into the internal
+ * renderer-neutral shape vocabulary and concatenates them into the single
+ * shape style the vector layer consumes. Kinds stay independent: a kind that
+ * resolves nothing for a detection simply contributes no instructions.
+ */
+function resolveAnnotationShapeStyle(styles) {
+    const boxCornerStyle = styles.boxCornerStyle ?? null;
+    const ellipseStyle = styles.ellipseStyle ?? null;
+    const markerStyle = styles.markerStyle ?? null;
+    if (!boxCornerStyle && !ellipseStyle && !markerStyle) {
+        return null;
+    }
+    return {
+        resolve(detection, context) {
+            const instructions = [];
+            const boxCorners = boxCornerStyle?.resolve(detection, context);
+            if (boxCorners) {
+                instructions.push({
+                    closed: false,
+                    kind: ShapeInstructionKind.Path,
+                    segments: boxCorners.segments,
+                    stroke: boxCorners.stroke,
+                });
+            }
+            const marker = markerStyle?.resolve(detection, context);
+            if (marker) {
+                instructions.push({ kind: ShapeInstructionKind.Marker, ...marker });
+            }
+            const ellipse = ellipseStyle?.resolve(detection, context);
+            if (ellipse) {
+                instructions.push(lowerEllipseInstruction(ellipse));
+            }
+            return instructions.length > 0 ? instructions : undefined;
+        },
+    };
+}
+function lowerEllipseInstruction(instruction) {
+    return { ...instruction, kind: ShapeInstructionKind.Ellipse };
+}
+
 function createPixiAnnotationOverlayLayer(editingEngine, initialStyle) {
     let graphics;
     let style = resolveAnnotationOverlayStyle(initialStyle);
@@ -7549,8 +8519,11 @@ function drawLoading(graphics, context, style) {
     const loading = values instanceof Set ? values : new Set(values);
     const angle = (context.now / 500) % (Math.PI * 2);
     for (const detection of context.frame?.detections ?? []) {
-        if (detection.id === undefined || !loading.has(detection.id))
+        if (detection.id === undefined ||
+            !loading.has(detection.id) ||
+            resolveAnnotationStyleState(detection, context.visibility).hidden) {
             continue;
+        }
         const rect = getDetectionRect(detection);
         if (!rect)
             continue;
@@ -7625,6 +8598,7 @@ var PixiSceneLayerKind;
     PixiSceneLayerKind["Mask"] = "mask";
     PixiSceneLayerKind["Box"] = "box";
     PixiSceneLayerKind["Vector"] = "vector";
+    PixiSceneLayerKind["Region"] = "region";
     PixiSceneLayerKind["Focus"] = "focus";
     PixiSceneLayerKind["Preview"] = "preview";
     PixiSceneLayerKind["Guide"] = "guide";
@@ -7669,6 +8643,8 @@ function defaultLayerOrder(kind) {
             return 200;
         case PixiSceneLayerKind.Vector:
             return 250;
+        case PixiSceneLayerKind.Region:
+            return 275;
         case PixiSceneLayerKind.Focus:
             return 300;
         case PixiSceneLayerKind.Preview:
@@ -7724,14 +8700,42 @@ function observePixiContainerResize(container, resize) {
     return () => observer.disconnect();
 }
 async function createPixiMediaScene(options) {
-    const { Application, CanvasSource, Container, Graphics, ImageSource, Mesh, MeshGeometry, Rectangle, Sprite, Shader, Text, Texture, UniformGroup, } = await import('pixi.js');
+    const { Application, Assets, BlurFilter, CanvasSource, Container, Graphics, ImageSource, Mesh, MeshGeometry, Rectangle, Sprite, Shader, Text, Texture, UniformGroup, } = await import('pixi.js');
+    const { GifSprite } = await import('pixi.js/gif');
     const app = new Application();
+    let currentEllipseStyle = options.ellipseStyle ?? null;
+    let currentBoxCornerStyle = options.boxCornerStyle ?? null;
     let currentLabelStyle = options.labelStyle ?? null;
     let currentMaskStyle = options.maskStyle ?? null;
+    let currentMarkerStyle = options.markerStyle ?? null;
+    let currentMaskHaloStyle = options.maskHaloStyle ?? null;
+    // Halo-only presentations still need prepared id-mask artifacts; this
+    // invisible style drives preparation without drawing any fill or border.
+    const haloOnlyMaskStyle = {
+        artifactKey: "mask-halo-only:v1",
+        resolve: (detection) => detection.mask
+            ? { alpha: 0, color: 0x000000, mask: detection.mask }
+            : undefined,
+    };
+    const createVisibilityMaskHaloStyle = (style) => ({
+        resolve(detection, context) {
+            const state = resolveContextState(detection);
+            if (state.hidden) {
+                return undefined;
+            }
+            return style.resolve(detection, { ...context, ...state });
+        },
+    });
+    const resolveArtifactMaskStyle = () => currentMaskStyle ?? (currentMaskHaloStyle ? haloOnlyMaskStyle : null);
     let currentPolygonStyle = options.polygonStyle === undefined
         ? new BasePolygonStyle()
         : options.polygonStyle;
     let currentVisibility = options.visibility;
+    let currentMediaTime = 0;
+    let viewportScale = 1;
+    let hasPresentedSample = false;
+    let mediaHeight = 0;
+    let mediaWidth = 0;
     let visibilityVersion = 0;
     let visibilityMaskStyleCache = null;
     const resolveContextState = (detection) => resolveAnnotationStyleState(detection, currentVisibility);
@@ -7740,6 +8744,28 @@ async function createPixiMediaScene(options) {
         hidden: currentVisibility?.labelsHidden === true ||
             resolveContextState(detection).hidden,
     });
+    // The vector layer consumes one shape style; renderer kinds that lower to
+    // shape instructions compose with the internal hook here.
+    function resolveVectorShapeStyle() {
+        const kindShapeStyle = resolveAnnotationShapeStyle({
+            boxCornerStyle: currentBoxCornerStyle,
+            ellipseStyle: currentEllipseStyle,
+            markerStyle: currentMarkerStyle,
+        });
+        const baseShapeStyle = options.shapeStyle ?? null;
+        if (!kindShapeStyle || !baseShapeStyle) {
+            return kindShapeStyle ?? baseShapeStyle;
+        }
+        return {
+            resolve(detection, context) {
+                const combined = [
+                    ...(baseShapeStyle.resolve(detection, context) ?? []),
+                    ...(kindShapeStyle.resolve(detection, context) ?? []),
+                ];
+                return combined.length > 0 ? combined : undefined;
+            },
+        };
+    }
     const boxLayer = createPixiBoxLayer({
         boxStyle: options.boxStyle,
         Container: options.editingEngine ? Container : undefined,
@@ -7772,6 +8798,24 @@ async function createPixiMediaScene(options) {
         polygonStyle: polygonLayer?.getVectorFallbackStyle() ?? currentPolygonStyle,
         polylineStyle: options.polylineStyle,
         keypointStyle: options.keypointStyle,
+        shapeStyle: resolveVectorShapeStyle(),
+        resolveContextState,
+    });
+    const regionLayer = createPixiRegionLayer({
+        Assets,
+        Container,
+        GifSprite,
+        Sprite,
+        detectionTimeline: options.detectionTimeline,
+        onInvalidate: () => {
+            if (!hasPresentedSample || mediaWidth <= 0 || mediaHeight <= 0)
+                return;
+            const boxState = boxLayer.drawFrame(currentMediaTime, viewportScale);
+            const regionState = regionLayer.drawFrame(currentMediaTime, viewportScale);
+            options.onPresentationUpdate?.(createPresentedSampleState(currentMediaTime, boxState, regionState));
+        },
+        onAssetError: options.diagnostics?.onAssetError,
+        regionRenderers: options.regionRenderers,
         resolveContextState,
     });
     const annotationOverlayLayer = createPixiAnnotationOverlayLayer(options.editingEngine, options.annotationOverlayStyle);
@@ -7785,9 +8829,11 @@ async function createPixiMediaScene(options) {
             preview: options.maskBrush,
         })
         : undefined;
-    let maskLayer = options.maskStyle
+    let maskLayer = resolveArtifactMaskStyle()
         ? createPixiMaskLayer({
+            BlurFilter,
             Container,
+            Rectangle,
             ImageSource,
             Mesh,
             MeshGeometry,
@@ -7796,7 +8842,10 @@ async function createPixiMediaScene(options) {
             Texture,
             UniformGroup,
             detectionTimeline: options.detectionTimeline,
-            maskStyle: createVisibilityMaskStyle(options.maskStyle),
+            maskHaloStyle: currentMaskHaloStyle
+                ? createVisibilityMaskHaloStyle(currentMaskHaloStyle)
+                : null,
+            maskStyle: createVisibilityMaskStyle(resolveArtifactMaskStyle()),
             onActiveIdMaskFramePresented: handleActiveIdMaskFramePresented,
             renderPreparation: options.renderPreparation,
         })
@@ -7828,8 +8877,6 @@ async function createPixiMediaScene(options) {
     if (!stagingContext) {
         throw new Error("Unable to create staging canvas context.");
     }
-    let mediaHeight = 0;
-    let mediaWidth = 0;
     let mediaScene;
     let vectorDisplay;
     let polygonDisplay;
@@ -7838,6 +8885,7 @@ async function createPixiMediaScene(options) {
     const maskSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Mask);
     const boxSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Box);
     const vectorSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Vector);
+    const regionSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Region);
     const focusSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Focus);
     const previewSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Preview);
     const interactionSlot = createPixiSceneLayerSlot(PixiSceneLayerKind.Interaction);
@@ -7848,16 +8896,14 @@ async function createPixiMediaScene(options) {
         maskSlot,
         boxSlot,
         vectorSlot,
+        regionSlot,
         focusSlot,
         previewSlot,
         handleSlot,
         interactionSlot,
         labelSlot,
     ];
-    let currentMediaTime = 0;
-    let viewportScale = 1;
     const viewport = createViewportController({ scale: 1 });
-    let hasPresentedSample = false;
     /**
      * Timestamp of the sample whose pixels are on the staging canvas. Unlike
      * `currentMediaTime`, presentation and selection updates never move it.
@@ -7873,6 +8919,7 @@ async function createPixiMediaScene(options) {
             interaction: options.interaction ?? {
                 mode: MediaInteractionMode.Always,
             },
+            canPickDetection: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
             editingEngine: options.editingEngine,
             capturePointer: (pointerId) => {
                 if (!rendererCanvas.hasPointerCapture?.(pointerId)) {
@@ -7909,6 +8956,7 @@ async function createPixiMediaScene(options) {
             Text,
             UniformGroup,
             interactionStyle: options.interactionStyle,
+            isDetectionVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
         })
         : undefined;
     let fastTranslatedDetectionId = null;
@@ -7916,6 +8964,7 @@ async function createPixiMediaScene(options) {
         fastTranslatedDetectionId = id;
         boxLayer.translateDetection(id, dx, dy);
         vectorLayer.translateDetection(id, dx, dy);
+        regionLayer.translateDetection(id, dx, dy);
         labelLayer?.translateDetection(id, dx, dy);
     });
     const unsubscribeEditingState = options.editingEngine?.subscribe((state) => {
@@ -7927,11 +8976,13 @@ async function createPixiMediaScene(options) {
         fastTranslatedDetectionId = null;
         boxLayer.translateDetection(id, 0, 0);
         vectorLayer.translateDetection(id, 0, 0);
+        regionLayer.translateDetection(id, 0, 0);
         labelLayer?.translateDetection(id, 0, 0);
         boxLayer.invalidateDetection(id);
         vectorLayer.invalidateDetection(id);
         boxLayer.drawFrame(currentMediaTime, viewportScale);
         vectorLayer.drawFrame(currentMediaTime, viewportScale);
+        regionLayer.drawFrame(currentMediaTime, viewportScale);
         labelLayer?.drawFrame(currentMediaTime, viewportScale);
     });
     const handleKeyDown = (event) => {
@@ -7966,6 +9017,7 @@ async function createPixiMediaScene(options) {
             Shader,
             UniformGroup,
             focusStyle: options.focusStyle,
+            isDetectionVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
         })
         : undefined;
     let mediaSprite;
@@ -8075,6 +9127,7 @@ async function createPixiMediaScene(options) {
             attachPolygonLayerDisplay();
             vectorDisplay.addChild(vectorLayer.createContainer());
             vectorSlot.setDisplay(vectorDisplay);
+            regionSlot.setDisplay(regionLayer.createContainer());
             previewSlot.setDisplay(maskBrushPreview?.display);
             if (annotationOverlay) {
                 annotationOverlayLayer.attachGraphics(annotationOverlay);
@@ -8128,13 +9181,14 @@ async function createPixiMediaScene(options) {
                     const boxState = boxLayer.drawFrame(sample.timestamp, viewportScale);
                     polygonLayer?.drawFrame(sample.timestamp, viewportScale);
                     vectorLayer.drawFrame(sample.timestamp, viewportScale);
+                    const regionState = regionLayer.drawFrame(sample.timestamp, viewportScale);
                     interactionLayer?.drawFrame(sample.timestamp);
                     drawFocusLayer(sample.timestamp);
                     drawInteractionPresentationLayer(sample.timestamp);
                     labelLayer?.drawFrame(sample.timestamp, viewportScale);
                     updateMediaSceneFit();
                     return {
-                        ...createPresentedSampleState(sample.timestamp, boxState),
+                        ...createPresentedSampleState(sample.timestamp, boxState, regionState),
                         duration: sample.duration,
                     };
                 }
@@ -8156,10 +9210,12 @@ async function createPixiMediaScene(options) {
                     maskLayer?.drawFrame(sample.timestamp);
                 });
                 let boxState;
+                let regionState;
                 boxMs = measure(() => {
                     boxState = boxLayer.drawFrame(sample.timestamp, viewportScale);
                     polygonLayer?.drawFrame(sample.timestamp, viewportScale);
                     vectorLayer.drawFrame(sample.timestamp, viewportScale);
+                    regionState = regionLayer.drawFrame(sample.timestamp, viewportScale);
                 });
                 interactionMs = measure(() => {
                     interactionLayer?.drawFrame(sample.timestamp);
@@ -8186,7 +9242,7 @@ async function createPixiMediaScene(options) {
                     totalMs: elapsedSince(totalStart),
                 };
                 return {
-                    ...createPresentedSampleState(sample.timestamp, boxState),
+                    ...createPresentedSampleState(sample.timestamp, boxState, regionState),
                     duration: sample.duration,
                     renderTimings,
                 };
@@ -8335,6 +9391,7 @@ async function createPixiMediaScene(options) {
                     visibilityVersion += 1;
                     maskLayer?.setMaskStyle(createVisibilityMaskStyle(currentMaskStyle));
                 }
+                interactionLayer?.drawFrame(mediaTime);
             }
             boxLayer.setBoxStyle(presentation.boxStyle);
             if (presentation.polygonStyle !== undefined) {
@@ -8355,15 +9412,38 @@ async function createPixiMediaScene(options) {
                 polylineStyle: presentation.polylineStyle,
                 keypointStyle: presentation.keypointStyle,
             });
-            if (presentation.maskStyle !== undefined) {
-                currentMaskStyle = presentation.maskStyle;
-                const nextMaskLayer = presentation.maskStyle
-                    ? ensureMaskLayer(presentation.maskStyle)
+            regionLayer.setRenderers(presentation.renderers?.filter((renderer) => renderer.kind === "region") ?? []);
+            if (presentation.boxCornerStyle !== undefined ||
+                presentation.ellipseStyle !== undefined ||
+                presentation.markerStyle !== undefined) {
+                if (presentation.boxCornerStyle !== undefined) {
+                    currentBoxCornerStyle = presentation.boxCornerStyle;
+                }
+                if (presentation.ellipseStyle !== undefined) {
+                    currentEllipseStyle = presentation.ellipseStyle;
+                }
+                if (presentation.markerStyle !== undefined) {
+                    currentMarkerStyle = presentation.markerStyle;
+                }
+                vectorLayer.setStyles({ shapeStyle: resolveVectorShapeStyle() });
+            }
+            if (presentation.maskStyle !== undefined ||
+                presentation.maskHaloStyle !== undefined) {
+                if (presentation.maskStyle !== undefined) {
+                    currentMaskStyle = presentation.maskStyle;
+                }
+                if (presentation.maskHaloStyle !== undefined) {
+                    currentMaskHaloStyle = presentation.maskHaloStyle;
+                }
+                const artifactStyle = resolveArtifactMaskStyle();
+                const nextMaskLayer = artifactStyle
+                    ? ensureMaskLayer(artifactStyle)
                     : maskLayer;
-                nextMaskLayer?.setMaskStyle(presentation.maskStyle
-                    ? createVisibilityMaskStyle(presentation.maskStyle)
-                    : presentation.maskStyle);
-                if (presentation.maskStyle) {
+                nextMaskLayer?.setMaskStyle(artifactStyle ? createVisibilityMaskStyle(artifactStyle) : null);
+                nextMaskLayer?.setMaskHaloStyle(currentMaskHaloStyle
+                    ? createVisibilityMaskHaloStyle(currentMaskHaloStyle)
+                    : null);
+                if (artifactStyle) {
                     attachMaskLayerDisplay();
                     syncSceneChildren();
                 }
@@ -8397,11 +9477,12 @@ async function createPixiMediaScene(options) {
             const boxState = boxLayer.drawFrame(mediaTime, viewportScale);
             polygonLayer?.drawFrame(mediaTime, viewportScale);
             vectorLayer.drawFrame(mediaTime, viewportScale);
+            const regionState = regionLayer.drawFrame(mediaTime, viewportScale);
             interactionLayer?.drawFrame(mediaTime);
             drawFocusLayer(mediaTime);
             drawInteractionPresentationLayer(mediaTime);
             labelLayer?.drawFrame(mediaTime, viewportScale);
-            return createPresentedSampleState(mediaTime, boxState);
+            return createPresentedSampleState(mediaTime, boxState, regionState);
         },
         setSelectedDetection(selection, mediaTime) {
             currentMediaTime = selection?.mediaTime ?? mediaTime;
@@ -8428,6 +9509,7 @@ async function createPixiMediaScene(options) {
             polygonLayer?.destroy();
             labelLayer?.destroy();
             vectorLayer.destroy();
+            regionLayer.destroy();
             maskBrushPreview?.destroy();
             unsubscribeFastTranslate?.();
             unsubscribeEditingState?.();
@@ -8444,21 +9526,24 @@ async function createPixiMediaScene(options) {
             });
         },
     };
-    function createPresentedSampleState(mediaTime, boxState) {
+    function createPresentedSampleState(mediaTime, boxState, regionState) {
         const detectionFrame = options.detectionTimeline.selectFrame(mediaTime);
         return {
-            activeDetectionCount: countPresentedDetections(detectionFrame, mediaTime, boxState),
+            activeDetectionCount: countPresentedDetections(detectionFrame, mediaTime, boxState, regionState),
             activeDetectionFrameIndex: detectionFrame?.frameIndex ?? null,
             activeDetectionFrameTime: detectionFrame?.mediaTime ?? null,
             detectionBuffer: options.detectionTimeline.getState(),
             mediaTime,
         };
     }
-    function countPresentedDetections(frame, mediaTime, boxState) {
+    function countPresentedDetections(frame, mediaTime, boxState, regionState) {
         if (!frame) {
             return 0;
         }
         const visibleDetectionIndexes = new Set(boxState.activeDetectionIndexes);
+        for (const detectionIndex of regionState?.activeDetectionIndexes ?? []) {
+            visibleDetectionIndexes.add(detectionIndex);
+        }
         for (const [detectionIndex, detection] of frame.detections.entries()) {
             if (visibleDetectionIndexes.has(detectionIndex)) {
                 continue;
@@ -8485,7 +9570,9 @@ async function createPixiMediaScene(options) {
     function ensureMaskLayer(maskStyle) {
         if (!maskLayer) {
             maskLayer = createPixiMaskLayer({
+                BlurFilter,
                 Container,
+                Rectangle,
                 ImageSource,
                 Mesh,
                 MeshGeometry,
@@ -8494,6 +9581,9 @@ async function createPixiMediaScene(options) {
                 Texture,
                 UniformGroup,
                 detectionTimeline: options.detectionTimeline,
+                maskHaloStyle: currentMaskHaloStyle
+                    ? createVisibilityMaskHaloStyle(currentMaskHaloStyle)
+                    : null,
                 maskStyle: createVisibilityMaskStyle(maskStyle),
                 onActiveIdMaskFramePresented: handleActiveIdMaskFramePresented,
                 renderPreparation: options.renderPreparation,
@@ -8571,6 +9661,7 @@ async function createPixiMediaScene(options) {
                 Shader,
                 UniformGroup,
                 focusStyle,
+                isDetectionVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
             });
         }
         return focusLayer;
@@ -8606,10 +9697,10 @@ async function createPixiMediaScene(options) {
         const interactionState = interactionLayer?.getState();
         focusLayer.drawFrame({
             frame,
-            hoveredPick: interactionState?.hoveredPick ?? null,
+            hoveredPick: filterVisiblePick(interactionState?.hoveredPick ?? null),
             idMaskArtifact: maskLayer?.getActiveIdMaskFrameTexture() ?? null,
             mediaTime,
-            selectedPick: interactionState?.selectedPick ?? null,
+            selectedPick: filterVisiblePick(interactionState?.selectedPick ?? null),
             viewportScale,
         });
     }
@@ -8621,11 +9712,11 @@ async function createPixiMediaScene(options) {
         const interactionState = interactionLayer?.getState();
         interactionPresentationLayer.drawFrame({
             frame,
-            hoveredPick: interactionState?.hoveredPick ?? null,
+            hoveredPick: filterVisiblePick(interactionState?.hoveredPick ?? null),
             idMaskArtifact: maskLayer?.getActiveIdMaskFrameTexture() ?? null,
             mediaTime,
-            selectedPick: interactionState?.selectedPick ?? null,
-            selectedPicks: interactionState?.selectedPicks,
+            selectedPick: filterVisiblePick(interactionState?.selectedPick ?? null),
+            selectedPicks: interactionState?.selectedPicks.filter(({ detection }) => !resolveAnnotationStyleState(detection, currentVisibility).hidden),
             viewportScale,
         });
     }
@@ -8696,6 +9787,12 @@ async function createPixiMediaScene(options) {
         };
         return visibilityMaskStyle;
     }
+    function filterVisiblePick(pick) {
+        return pick &&
+            !resolveAnnotationStyleState(pick.detection, currentVisibility).hidden
+            ? pick
+            : null;
+    }
 }
 function canReuseMaskVisibilityArtifacts(previous, next) {
     return ((previous?.annotationsHidden === true) ===
@@ -9332,14 +10429,39 @@ async function createMediaSession(options) {
         const sessionDetections = preparedDetections;
         const defaultPresentation = createDefaultAnnotationPresentation();
         let currentPresentation = options.presentation;
-        const resolvePresentation = (presentation) => createSourceAwarePresentation({ ...defaultPresentation, ...presentation }, sessionDetections.sourcePresentations);
-        const initialPresentation = resolvePresentation(currentPresentation);
+        const resolvePresentation = (presentation) => {
+            const renderers = presentation?.renderers;
+            const resolvedPresentation = resolveAnnotationRendererPresentation({
+                ...defaultPresentation,
+                ...presentation,
+            });
+            return createSourceAwarePresentation(resolvedPresentation, sessionDetections.sourcePresentations, renderers === undefined
+                ? undefined
+                : { enabledRendererKinds: renderers.map(({ kind }) => kind) });
+        };
+        const resolveRendererPresentation = (presentation) => {
+            const resolved = resolvePresentation(presentation);
+            return {
+                ...resolved,
+                // Style-backed renderers have already been lowered into their
+                // specialized fields, including source overrides. Keep their kinds in
+                // the authoritative list so the renderer core does not clear those
+                // fields when direct renderers are also present, but let the resolved
+                // fields win over the descriptors' original global styles.
+                renderers: resolved.renderers?.map((renderer) => renderer.kind === "region"
+                    ? renderer
+                    : { ...renderer, style: undefined }),
+            };
+        };
+        const initialPresentation = resolveRendererPresentation(currentPresentation);
         const renderer = await createMediaRenderer({
             ...options.renderer,
             ...sessionMedia.rendererSourceOption,
             backgroundColor: initialPresentation.backgroundColor,
             annotationOverlayStyle: initialPresentation.annotationOverlayStyle,
             boxStyle: initialPresentation.boxStyle,
+            boxCornerStyle: initialPresentation.boxCornerStyle,
+            ellipseStyle: initialPresentation.ellipseStyle,
             container: options.container,
             detectionBuffer: sessionDefaults.detectionBuffer,
             detectionFrames: sessionDetections.detectionFrames,
@@ -9348,9 +10470,12 @@ async function createMediaSession(options) {
             focusStyle: initialPresentation.focusStyle,
             interactionStyle: initialPresentation.interactionStyle,
             labelStyle: initialPresentation.labelStyle,
+            maskHaloStyle: initialPresentation.maskHaloStyle,
             maskStyle: initialPresentation.maskStyle,
+            markerStyle: initialPresentation.markerStyle,
             polygonStyle: initialPresentation.polygonStyle,
             polylineStyle: initialPresentation.polylineStyle,
+            renderers: initialPresentation.renderers,
             keypointStyle: initialPresentation.keypointStyle,
             visibility: initialPresentation.visibility,
             onState(state) {
@@ -9432,7 +10557,7 @@ async function createMediaSession(options) {
             },
             setPresentation(presentation) {
                 currentPresentation = presentation;
-                renderer.setPresentation(resolvePresentation(currentPresentation));
+                renderer.setPresentation(resolveRendererPresentation(currentPresentation));
             },
             setRenderQuality(quality) {
                 renderer.setRenderQuality(quality);