supervision 0.0.9000 → 0.1.0

package/node_modules/supervision-js-core/dist/index.js

@@ -0,0 +1,4277 @@
+/** COCO-compatible keypoint visibility values. */
+var KeypointVisibility;
+(function (KeypointVisibility) {
+    KeypointVisibility[KeypointVisibility["NotLabeled"] = 0] = "NotLabeled";
+    KeypointVisibility[KeypointVisibility["Occluded"] = 1] = "Occluded";
+    KeypointVisibility[KeypointVisibility["Visible"] = 2] = "Visible";
+})(KeypointVisibility || (KeypointVisibility = {}));
+var DetectionMaskEncoding;
+(function (DetectionMaskEncoding) {
+    DetectionMaskEncoding["CompressedRle"] = "compressedRle";
+})(DetectionMaskEncoding || (DetectionMaskEncoding = {}));
+
+var DetectionBufferStatus;
+(function (DetectionBufferStatus) {
+    DetectionBufferStatus["Idle"] = "idle";
+    DetectionBufferStatus["Loading"] = "loading";
+    DetectionBufferStatus["Ready"] = "ready";
+    DetectionBufferStatus["Error"] = "error";
+    DetectionBufferStatus["Destroyed"] = "destroyed";
+})(DetectionBufferStatus || (DetectionBufferStatus = {}));
+/**
+ * How the renderer selects the active detection frame for a media timestamp.
+ */
+var DetectionFrameSelectionMode;
+(function (DetectionFrameSelectionMode) {
+    /**
+     * Select the frame whose `[mediaTime, endTime)` interval contains the media
+     * time. This is the default for interval annotations and timestamped sources.
+     */
+    DetectionFrameSelectionMode["Interval"] = "interval";
+    /**
+     * Select from a known inference frame grid using `frameIndex`, `frameRate`,
+     * and optional `frameIndexOriginTime`. This is useful when inference was run
+     * on normalized frames and playback should snap detections to that grid.
+     */
+    DetectionFrameSelectionMode["NearestFrameIndex"] = "nearestFrameIndex";
+})(DetectionFrameSelectionMode || (DetectionFrameSelectionMode = {}));
+var DetectionFrameRetentionMode;
+(function (DetectionFrameRetentionMode) {
+    /**
+     * Keep writable detections only in an in-memory store. Useful for ephemeral
+     * live streams where old predictions should disappear when evicted.
+     */
+    DetectionFrameRetentionMode["MemoryOnly"] = "memoryOnly";
+    /**
+     * Persist every written detection frame. Useful for finite media where seek
+     * and replay should not require recomputing detections.
+     */
+    DetectionFrameRetentionMode["PersistAll"] = "persistAll";
+    /**
+     * Persist only the most recent retention window. Useful for long-running
+     * streams where replay is bounded to a recent time horizon.
+     */
+    DetectionFrameRetentionMode["PersistWindow"] = "persistWindow";
+})(DetectionFrameRetentionMode || (DetectionFrameRetentionMode = {}));
+
+function copySortedDetectionFrames(detectionFrames) {
+    validateDetectionFrames(detectionFrames ?? []);
+    return (detectionFrames ?? [])
+        .map((frame) => ({
+        detections: frame.detections.map((detection) => ({
+            ...detection,
+            attributes: detection.attributes
+                ? [...detection.attributes]
+                : undefined,
+            keypoints: detection.keypoints
+                ? {
+                    edges: detection.keypoints.edges.map((edge) => [edge[0], edge[1]]),
+                    points: detection.keypoints.points.map((point) => ({ ...point })),
+                    visibility: detection.keypoints.visibility
+                        ? [...detection.keypoints.visibility]
+                        : undefined,
+                }
+                : undefined,
+            mask: detection.mask ? { ...detection.mask } : undefined,
+            metadata: detection.metadata
+                ? copyDetectionMetadata(detection.metadata)
+                : undefined,
+            polygon: detection.polygon
+                ? {
+                    points: detection.polygon.points.map((point) => ({ ...point })),
+                }
+                : undefined,
+            polyline: detection.polyline
+                ? {
+                    points: detection.polyline.points.map((point) => ({ ...point })),
+                }
+                : undefined,
+            rect: detection.rect ? { ...detection.rect } : undefined,
+        })),
+        endTime: frame.endTime,
+        frameIndex: frame.frameIndex,
+        mediaTime: frame.mediaTime,
+    }))
+        .sort((left, right) => left.mediaTime - right.mediaTime);
+}
+function copyDetectionMetadata(metadata) {
+    const clone = globalThis.structuredClone;
+    if (clone) {
+        return clone(metadata);
+    }
+    return copyMetadataValue(metadata);
+}
+function copyMetadataValue(value) {
+    if (Array.isArray(value)) {
+        return value.map(copyMetadataValue);
+    }
+    if (value && typeof value === "object") {
+        return Object.fromEntries(Object.entries(value).map(([key, child]) => [
+            key,
+            copyMetadataValue(child),
+        ]));
+    }
+    return value;
+}
+function validateDetectionFrames(detectionFrames) {
+    for (const [frameOffset, frame] of detectionFrames.entries()) {
+        validateNumber(frame.mediaTime, `frames[${frameOffset}].mediaTime`, {
+            min: 0,
+        });
+        if (frame.endTime !== undefined) {
+            validateNumber(frame.endTime, `frames[${frameOffset}].endTime`, {
+                exclusiveMin: frame.mediaTime,
+            });
+        }
+        if (frame.frameIndex !== undefined) {
+            validateNumber(frame.frameIndex, `frames[${frameOffset}].frameIndex`, {
+                integer: true,
+                min: 0,
+            });
+        }
+        for (const [detectionOffset, detection] of frame.detections.entries()) {
+            const detectionPath = `frames[${frameOffset}].detections[${detectionOffset}]`;
+            if (detection.confidence !== undefined) {
+                validateNumber(detection.confidence, `${detectionPath}.confidence`, {
+                    max: 1,
+                    min: 0,
+                });
+            }
+            if (detection.zIndex !== undefined) {
+                validateNumber(detection.zIndex, `${detectionPath}.zIndex`);
+            }
+            if (detection.sourceId !== undefined &&
+                typeof detection.sourceId !== "string") {
+                throw new Error(`${detectionPath}.sourceId must be a string.`);
+            }
+            if (detection.sourceDetectionIndex !== undefined) {
+                validateNumber(detection.sourceDetectionIndex, `${detectionPath}.sourceDetectionIndex`, {
+                    integer: true,
+                    min: 0,
+                });
+            }
+            if (detection.rect) {
+                validateNumber(detection.rect.x, `${detectionPath}.rect.x`);
+                validateNumber(detection.rect.y, `${detectionPath}.rect.y`);
+                validateNumber(detection.rect.width, `${detectionPath}.rect.width`, {
+                    exclusiveMin: 0,
+                });
+                validateNumber(detection.rect.height, `${detectionPath}.rect.height`, {
+                    exclusiveMin: 0,
+                });
+            }
+            validatePoints(detection.polygon?.points, `${detectionPath}.polygon`, 3);
+            validatePoints(detection.polyline?.points, `${detectionPath}.polyline`, 2);
+            if (detection.keypoints) {
+                validatePoints(detection.keypoints.points, `${detectionPath}.keypoints`, 1);
+                if (detection.keypoints.visibility !== undefined &&
+                    detection.keypoints.visibility.length !==
+                        detection.keypoints.points.length) {
+                    throw new Error(`${detectionPath}.keypoints.visibility must match points length.`);
+                }
+                for (const [edgeOffset, edge] of detection.keypoints.edges.entries()) {
+                    const edgePath = `${detectionPath}.keypoints.edges[${edgeOffset}]`;
+                    for (const [endpointOffset, endpoint] of edge.entries()) {
+                        validateNumber(endpoint, `${edgePath}[${endpointOffset}]`, {
+                            integer: true,
+                            min: 0,
+                        });
+                        if (endpoint >= detection.keypoints.points.length) {
+                            throw new Error(`${edgePath}[${endpointOffset}] is out of range.`);
+                        }
+                    }
+                }
+            }
+            if (detection.mask) {
+                validateNumber(detection.mask.width, `${detectionPath}.mask.width`, {
+                    integer: true,
+                    exclusiveMin: 0,
+                });
+                validateNumber(detection.mask.height, `${detectionPath}.mask.height`, {
+                    integer: true,
+                    exclusiveMin: 0,
+                });
+                if (detection.mask.counts.length === 0) {
+                    throw new Error(`${detectionPath}.mask.counts must not be empty.`);
+                }
+            }
+        }
+    }
+}
+function validatePoints(points, path, minimumLength) {
+    if (!points) {
+        return;
+    }
+    if (points.length < minimumLength) {
+        throw new Error(`${path}.points must contain at least ${minimumLength} points.`);
+    }
+    for (const [pointOffset, point] of points.entries()) {
+        validateNumber(point.x, `${path}.points[${pointOffset}].x`);
+        validateNumber(point.y, `${path}.points[${pointOffset}].y`);
+    }
+}
+function validateNumber(value, path, options = {}) {
+    if (!Number.isFinite(value)) {
+        throw new Error(`${path} must be a finite number.`);
+    }
+    if (options.integer && !Number.isInteger(value)) {
+        throw new Error(`${path} must be an integer.`);
+    }
+    if (options.min !== undefined && value < options.min) {
+        throw new Error(`${path} must be greater than or equal to ${options.min}.`);
+    }
+    if (options.exclusiveMin !== undefined && value <= options.exclusiveMin) {
+        throw new Error(`${path} must be greater than ${options.exclusiveMin}.`);
+    }
+    if (options.max !== undefined && value > options.max) {
+        throw new Error(`${path} must be less than or equal to ${options.max}.`);
+    }
+}
+function filterDetectionFramesForRange(detectionFrames, startTime, endTime) {
+    return detectionFrames.filter((frame) => detectionFrameOverlapsRange(frame, startTime, endTime));
+}
+function selectDetectionFrame(detectionFrames, mediaTime, options = {}) {
+    if (options.selectionMode === DetectionFrameSelectionMode.NearestFrameIndex) {
+        const selection = selectNearestFrameIndexDetectionFrame(detectionFrames, mediaTime, options.frameRate, options.frameIndexOriginTime);
+        if (selection.isApplicable) {
+            return selection.frame;
+        }
+    }
+    return selectIntervalDetectionFrame(detectionFrames, mediaTime);
+}
+function decodeCompressedRleMask(mask) {
+    if (mask.encoding !== DetectionMaskEncoding.CompressedRle) {
+        throw new Error(`Unsupported detection mask encoding: ${mask.encoding}`);
+    }
+    const data = new Uint8Array(mask.width * mask.height);
+    const counts = decodeCompressedRleCounts(mask.counts);
+    let offset = 0;
+    for (let index = 0; index < counts.length; index += 1) {
+        const runLength = counts[index] ?? 0;
+        const isForeground = index % 2 === 1;
+        if (isForeground) {
+            for (let runOffset = 0; runOffset < runLength; runOffset += 1) {
+                const maskOffset = offset + runOffset;
+                const x = Math.floor(maskOffset / mask.height);
+                const y = maskOffset % mask.height;
+                const rowMajorOffset = y * mask.width + x;
+                if (rowMajorOffset < data.length) {
+                    data[rowMajorOffset] = 1;
+                }
+            }
+        }
+        offset += runLength;
+    }
+    return {
+        data,
+        height: mask.height,
+        width: mask.width,
+    };
+}
+function selectIntervalDetectionFrame(detectionFrames, mediaTime) {
+    let selectedFrame;
+    let low = 0;
+    let high = detectionFrames.length - 1;
+    while (low <= high) {
+        const middle = Math.floor((low + high) / 2);
+        const frame = detectionFrames[middle];
+        if (frame.mediaTime <= mediaTime) {
+            selectedFrame = frame;
+            low = middle + 1;
+        }
+        else {
+            high = middle - 1;
+        }
+    }
+    return selectedFrame && isDetectionFrameActive(selectedFrame, mediaTime)
+        ? selectedFrame
+        : undefined;
+}
+function selectNearestFrameIndexDetectionFrame(detectionFrames, mediaTime, frameRate, frameIndexOriginTime) {
+    if (!frameRate || !Number.isFinite(frameRate) || frameRate <= 0) {
+        return { frame: undefined, isApplicable: false };
+    }
+    const firstIndexedFrame = detectionFrames.find((frame) => frame.frameIndex !== undefined);
+    if (!firstIndexedFrame || firstIndexedFrame.frameIndex === undefined) {
+        return { frame: undefined, isApplicable: false };
+    }
+    const originTime = frameIndexOriginTime !== undefined
+        ? frameIndexOriginTime
+        : firstIndexedFrame.mediaTime - firstIndexedFrame.frameIndex / frameRate;
+    const targetFrameIndex = Math.round((mediaTime - originTime) * frameRate);
+    let nearestFrame;
+    let nearestDistance = Number.POSITIVE_INFINITY;
+    for (const frame of detectionFrames) {
+        if (frame.frameIndex === undefined) {
+            continue;
+        }
+        const distance = Math.abs(frame.frameIndex - targetFrameIndex);
+        if (distance < nearestDistance ||
+            (distance === nearestDistance &&
+                nearestFrame?.frameIndex !== undefined &&
+                frame.frameIndex > nearestFrame.frameIndex)) {
+            nearestFrame = frame;
+            nearestDistance = distance;
+        }
+    }
+    return {
+        frame: nearestDistance <= 1 ? nearestFrame : undefined,
+        isApplicable: true,
+    };
+}
+function isDetectionFrameActive(frame, mediaTime) {
+    return (frame.mediaTime <= mediaTime &&
+        (frame.endTime === undefined || mediaTime < frame.endTime));
+}
+function detectionFrameOverlapsRange(frame, startTime, endTime) {
+    if (frame.endTime === undefined) {
+        return frame.mediaTime >= startTime && frame.mediaTime <= endTime;
+    }
+    return frame.mediaTime <= endTime && frame.endTime > startTime;
+}
+function decodeCompressedRleCounts(counts) {
+    const decoded = [];
+    let index = 0;
+    while (index < counts.length) {
+        let value = 0;
+        let shift = 0;
+        let charCode;
+        do {
+            charCode = counts.charCodeAt(index) - 48;
+            index += 1;
+            value |= (charCode & 0x1f) << shift;
+            shift += 5;
+        } while (charCode & 0x20);
+        if (charCode & 0x10) {
+            value |= -1 << shift;
+        }
+        if (decoded.length > 2) {
+            value += decoded[decoded.length - 2] ?? 0;
+        }
+        decoded.push(value);
+    }
+    return decoded;
+}
+function encodeCompressedRleCounts(counts) {
+    return counts
+        .map((count, index) => {
+        let value = index > 2 ? count - counts[index - 2] : count;
+        let encoded = "";
+        let more = true;
+        while (more) {
+            let charCode = value & 0x1f;
+            value >>= 5;
+            more = !((value === 0 && (charCode & 0x10) === 0) ||
+                (value === -1 && (charCode & 0x10) !== 0));
+            if (more) {
+                charCode |= 0x20;
+            }
+            encoded += String.fromCharCode(charCode + 48);
+        }
+        return encoded;
+    })
+        .join("");
+}
+
+function createArrayDetectionFrameSource(frames) {
+    const sortedFrames = copySortedDetectionFrames(frames);
+    return {
+        async loadFrames(startTime, endTime) {
+            return copySortedDetectionFrames(filterDetectionFramesForRange(sortedFrames, startTime, endTime));
+        },
+    };
+}
+
+const DEFAULT_BUFFER_AHEAD_SECONDS = 5;
+const DEFAULT_BUFFER_BEHIND_SECONDS = 0.5;
+const bufferedFrameSnapshots = new WeakMap();
+/**
+ * Returns the timeline-owned hot-buffer snapshot without copying it.
+ *
+ * This is an internal platform-adapter fast path. Public callers should use
+ * `getBufferedFrames()`, which preserves the existing defensive-copy contract.
+ */
+function getBufferedDetectionTimelineFrameSnapshot(timeline) {
+    return (bufferedFrameSnapshots.get(timeline)?.() ?? timeline.getBufferedFrames());
+}
+function createBufferedDetectionTimeline(options) {
+    const bufferAheadSeconds = options.bufferAheadSeconds ?? DEFAULT_BUFFER_AHEAD_SECONDS;
+    const bufferBehindSeconds = options.bufferBehindSeconds ?? DEFAULT_BUFFER_BEHIND_SECONDS;
+    const refreshIntervalSeconds = options.refreshIntervalSeconds === undefined
+        ? null
+        : Math.max(0, options.refreshIntervalSeconds);
+    const playbackGate = options.playbackGate;
+    let buffer = [];
+    let state = createIdleDetectionBufferState();
+    let destroyed = false;
+    let loadId = 0;
+    let bufferedSourceVersion = null;
+    let bufferedVersionRange = null;
+    let timelineContext = {
+        duration: null,
+        loop: false,
+    };
+    let inFlight;
+    let incrementalRefresh;
+    let pendingPrefetch;
+    let prefetchPump;
+    const getSourceVersion = (ranges) => {
+        if (!ranges) {
+            return options.source.getVersion?.() ?? 0;
+        }
+        return ranges.reduce((version, range) => Math.max(version, options.source.getVersion?.(range) ?? 0), 0);
+    };
+    const isBufferFresh = () => bufferedVersionRange !== null &&
+        bufferedSourceVersion === getSourceVersion(getBufferedSourceRanges());
+    const getLoadRange = (mediaTime) => {
+        const comparableMediaTime = getComparableMediaTime(mediaTime);
+        const startTime = comparableMediaTime - bufferBehindSeconds;
+        const endTime = comparableMediaTime + bufferAheadSeconds;
+        return createLoadPlan(startTime, endTime);
+    };
+    const loadWindow = (mediaTime) => {
+        const { endTime, sourceRanges, startTime } = getLoadRange(mediaTime);
+        const versionRange = { endTime, startTime };
+        const sourceVersion = getSourceVersion(sourceRanges);
+        if (inFlight &&
+            inFlight.sourceVersion === sourceVersion &&
+            rangeContains(inFlight.startTime, inFlight.endTime, startTime, endTime)) {
+            return inFlight.promise;
+        }
+        const currentLoadId = loadId + 1;
+        loadId = currentLoadId;
+        state = {
+            ...state,
+            errorMessage: null,
+            requestedEndTime: endTime,
+            requestedStartTime: startTime,
+            status: DetectionBufferStatus.Loading,
+        };
+        const promise = Promise.all(sourceRanges.map((range) => options.source.loadFrames(range.startTime, range.endTime)))
+            .then((frameRanges) => {
+            if (destroyed || currentLoadId !== loadId) {
+                return;
+            }
+            const committedSourceVersion = getSourceVersion(sourceRanges);
+            const loadedBuffer = copySortedDetectionFrames(frameRanges.flat());
+            buffer =
+                bufferedSourceVersion !== null &&
+                    bufferedSourceVersion === committedSourceVersion
+                    ? reuseBufferedFrameSnapshots(buffer, loadedBuffer)
+                    : loadedBuffer;
+            bufferedVersionRange = versionRange;
+            bufferedSourceVersion = committedSourceVersion;
+            state = {
+                bufferEndTime: endTime,
+                bufferStartTime: startTime,
+                detectionCount: countDetections(buffer),
+                errorMessage: null,
+                frameCount: buffer.length,
+                requestedEndTime: endTime,
+                requestedStartTime: startTime,
+                status: DetectionBufferStatus.Ready,
+            };
+        })
+            .catch((error) => {
+            if (!destroyed && currentLoadId === loadId) {
+                state = {
+                    ...state,
+                    errorMessage: getErrorMessage(error),
+                    status: DetectionBufferStatus.Error,
+                };
+            }
+            throw error;
+        })
+            .finally(() => {
+            if (inFlight?.id === currentLoadId) {
+                inFlight = undefined;
+            }
+        });
+        inFlight = {
+            endTime,
+            id: currentLoadId,
+            promise,
+            sourceVersion,
+            startTime,
+        };
+        return promise;
+    };
+    const isBuffered = (mediaTime) => {
+        const comparableMediaTime = getComparableMediaTime(mediaTime);
+        return (isBufferFresh() &&
+            state.bufferStartTime !== null &&
+            state.bufferEndTime !== null &&
+            comparableMediaTime >= state.bufferStartTime &&
+            comparableMediaTime <= state.bufferEndTime);
+    };
+    const isInsideBufferedRange = (mediaTime) => {
+        const comparableMediaTime = getComparableMediaTime(mediaTime);
+        return (bufferedVersionRange !== null &&
+            state.bufferStartTime !== null &&
+            state.bufferEndTime !== null &&
+            comparableMediaTime >= state.bufferStartTime &&
+            comparableMediaTime <= state.bufferEndTime);
+    };
+    const refreshBuffer = async (mediaTime) => {
+        if (isBuffered(mediaTime)) {
+            return;
+        }
+        if (isInsideBufferedRange(mediaTime) &&
+            bufferedSourceVersion !== null &&
+            options.source.getChangesSince) {
+            if (!incrementalRefresh) {
+                incrementalRefresh = applyIncrementalChanges().finally(() => {
+                    incrementalRefresh = undefined;
+                });
+            }
+            await incrementalRefresh;
+            if (isBuffered(mediaTime)) {
+                return;
+            }
+            return refreshBuffer(mediaTime);
+        }
+        await loadWindow(mediaTime);
+    };
+    const shouldPrefetch = (mediaTime) => {
+        if (!isBuffered(mediaTime)) {
+            return true;
+        }
+        if (shouldRefreshRollingWindow(mediaTime)) {
+            return true;
+        }
+        if (state.bufferEndTime === null || bufferAheadSeconds <= 0) {
+            return false;
+        }
+        return (getComparableMediaTime(mediaTime) + bufferAheadSeconds / 2 >=
+            state.bufferEndTime);
+    };
+    const timeline = {
+        async prepare(mediaTime, prepareOptions) {
+            if (destroyed) {
+                return;
+            }
+            if (shouldWaitForPlaybackGate(prepareOptions)) {
+                await waitForPlaybackGate(mediaTime, prepareOptions);
+                if (destroyed) {
+                    return;
+                }
+            }
+            await refreshBuffer(mediaTime);
+        },
+        prefetch(mediaTime) {
+            if (destroyed || !shouldPrefetch(mediaTime)) {
+                return;
+            }
+            pendingPrefetch = { loadId, mediaTime };
+            pumpPrefetchQueue();
+        },
+        selectFrame(mediaTime) {
+            if (!isBuffered(mediaTime)) {
+                return undefined;
+            }
+            return selectDetectionFrame(buffer, getSourceMediaTime(mediaTime), options);
+        },
+        setTimelineContext(context) {
+            timelineContext = context;
+            bufferedSourceVersion = null;
+            bufferedVersionRange = null;
+        },
+        getBufferedFrames() {
+            return copySortedDetectionFrames(buffer);
+        },
+        getState() {
+            return { ...state };
+        },
+        destroy() {
+            if (destroyed) {
+                return;
+            }
+            destroyed = true;
+            pendingPrefetch = undefined;
+            buffer = [];
+            bufferedSourceVersion = null;
+            bufferedVersionRange = null;
+            state = {
+                ...state,
+                bufferEndTime: null,
+                bufferStartTime: null,
+                detectionCount: 0,
+                frameCount: 0,
+                status: DetectionBufferStatus.Destroyed,
+            };
+            options.source.destroy?.();
+        },
+    };
+    bufferedFrameSnapshots.set(timeline, () => buffer);
+    return timeline;
+    function pumpPrefetchQueue() {
+        if (destroyed || prefetchPump) {
+            return;
+        }
+        prefetchPump = drainPrefetchQueue().finally(() => {
+            prefetchPump = undefined;
+            if (!destroyed && pendingPrefetch) {
+                pumpPrefetchQueue();
+            }
+        });
+    }
+    async function drainPrefetchQueue() {
+        while (!destroyed && pendingPrefetch) {
+            if (inFlight) {
+                await inFlight.promise.catch(() => undefined);
+                continue;
+            }
+            const request = pendingPrefetch;
+            pendingPrefetch = undefined;
+            if (request.loadId !== loadId) {
+                continue;
+            }
+            const { mediaTime } = request;
+            if (!shouldPrefetch(mediaTime)) {
+                continue;
+            }
+            await (shouldRefreshRollingWindow(mediaTime)
+                ? loadWindow(mediaTime)
+                : refreshBuffer(mediaTime)).catch(() => undefined);
+        }
+    }
+    async function applyIncrementalChanges() {
+        if (destroyed ||
+            bufferedSourceVersion === null ||
+            !options.source.getChangesSince) {
+            return;
+        }
+        const sourceRanges = getBufferedSourceRanges();
+        const incrementalLoadId = loadId;
+        const incrementalVersionRange = bufferedVersionRange;
+        const changes = options.source.getChangesSince(bufferedSourceVersion, sourceRanges);
+        if (changes.requiresReload) {
+            bufferedSourceVersion = null;
+            return;
+        }
+        if (changes.ranges.length === 0) {
+            bufferedSourceVersion = changes.version;
+            return;
+        }
+        const changedRanges = getOverlappingRanges(changes.ranges, sourceRanges);
+        if (changedRanges.length === 0) {
+            bufferedSourceVersion = changes.version;
+            return;
+        }
+        try {
+            const changedFrameRanges = await Promise.all(changedRanges.map((range) => options.source.loadFrames(range.startTime, range.endTime)));
+            if (destroyed ||
+                loadId !== incrementalLoadId ||
+                bufferedVersionRange !== incrementalVersionRange) {
+                return;
+            }
+            buffer = mergeIncrementalFrames(buffer, changedFrameRanges.flat(), changedRanges);
+            bufferedSourceVersion = changes.version;
+            state = {
+                ...state,
+                detectionCount: countDetections(buffer),
+                errorMessage: null,
+                frameCount: buffer.length,
+                status: DetectionBufferStatus.Ready,
+            };
+        }
+        catch (error) {
+            if (!destroyed) {
+                state = {
+                    ...state,
+                    errorMessage: getErrorMessage(error),
+                    status: DetectionBufferStatus.Error,
+                };
+            }
+            throw error;
+        }
+    }
+    function shouldWaitForPlaybackGate(prepareOptions) {
+        return (prepareOptions?.gatePlayback === true &&
+            playbackGate?.enabled === true &&
+            Boolean(options.source.waitForRange));
+    }
+    async function waitForPlaybackGate(mediaTime, prepareOptions) {
+        if (!playbackGate?.enabled || !options.source.waitForRange) {
+            return;
+        }
+        const requiredAheadSeconds = Math.max(0, playbackGate.requiredAheadSeconds ?? 0);
+        const comparableMediaTime = getComparableMediaTime(mediaTime);
+        const endTime = getRequiredCoverageEndTime({
+            duration: isLoopingTimeline() ? null : prepareOptions?.duration,
+            firstTimestamp: prepareOptions?.firstTimestamp,
+            mediaTime: comparableMediaTime,
+            requiredAheadSeconds,
+        });
+        if (endTime <= comparableMediaTime) {
+            return;
+        }
+        const coveragePlan = createLoadPlan(comparableMediaTime, endTime);
+        state = {
+            ...state,
+            errorMessage: null,
+            requestedEndTime: coveragePlan.endTime,
+            requestedStartTime: coveragePlan.startTime,
+            status: DetectionBufferStatus.Loading,
+        };
+        try {
+            await Promise.all(coveragePlan.sourceRanges.map((range) => options.source.waitForRange?.(range)));
+        }
+        catch (error) {
+            if (!destroyed) {
+                state = {
+                    ...state,
+                    errorMessage: getErrorMessage(error),
+                    status: DetectionBufferStatus.Error,
+                };
+            }
+            throw error;
+        }
+    }
+    function shouldRefreshRollingWindow(mediaTime) {
+        if (refreshIntervalSeconds === null ||
+            refreshIntervalSeconds <= 0 ||
+            state.bufferStartTime === null ||
+            state.bufferEndTime === null) {
+            return false;
+        }
+        const { endTime, startTime } = getLoadRange(mediaTime);
+        return (Math.abs(startTime - state.bufferStartTime) >= refreshIntervalSeconds ||
+            Math.abs(endTime - state.bufferEndTime) >= refreshIntervalSeconds);
+    }
+    function createLoadPlan(requestedStartTime, requestedEndTime) {
+        const startTime = Math.min(requestedStartTime, requestedEndTime);
+        const endTime = Math.max(startTime, requestedEndTime);
+        if (!isLoopingTimeline()) {
+            const clampedStartTime = Math.max(0, startTime);
+            const clampedEndTime = Math.max(clampedStartTime, endTime);
+            return {
+                endTime: clampedEndTime,
+                sourceRanges: [
+                    {
+                        endTime: clampedEndTime,
+                        startTime: clampedStartTime,
+                    },
+                ],
+                startTime: clampedStartTime,
+            };
+        }
+        const duration = timelineContext.duration ?? 0;
+        if (endTime - startTime >= duration) {
+            return {
+                endTime: duration,
+                sourceRanges: [{ endTime: duration, startTime: 0 }],
+                startTime: 0,
+            };
+        }
+        return {
+            endTime,
+            sourceRanges: getLoopingSourceRanges(startTime, endTime, duration),
+            startTime,
+        };
+    }
+    function getBufferedSourceRanges() {
+        if (!bufferedVersionRange) {
+            return [];
+        }
+        return createLoadPlan(bufferedVersionRange.startTime, bufferedVersionRange.endTime).sourceRanges;
+    }
+    function isLoopingTimeline() {
+        return (timelineContext.loop &&
+            timelineContext.duration !== null &&
+            timelineContext.duration > 0);
+    }
+    function getComparableMediaTime(mediaTime) {
+        if (!isLoopingTimeline() ||
+            state.bufferStartTime === null ||
+            state.bufferEndTime === null ||
+            timelineContext.duration === null) {
+            return mediaTime;
+        }
+        const duration = timelineContext.duration;
+        let comparableMediaTime = mediaTime;
+        while (comparableMediaTime < state.bufferStartTime) {
+            comparableMediaTime += duration;
+        }
+        while (comparableMediaTime > state.bufferEndTime) {
+            comparableMediaTime -= duration;
+        }
+        return comparableMediaTime;
+    }
+    function getSourceMediaTime(mediaTime) {
+        if (!isLoopingTimeline() || timelineContext.duration === null) {
+            return mediaTime;
+        }
+        if (mediaTime >= 0 && mediaTime <= timelineContext.duration) {
+            return mediaTime;
+        }
+        return modulo(mediaTime, timelineContext.duration);
+    }
+}
+function createIdleDetectionBufferState() {
+    return {
+        bufferEndTime: null,
+        bufferStartTime: null,
+        detectionCount: 0,
+        errorMessage: null,
+        frameCount: 0,
+        requestedEndTime: null,
+        requestedStartTime: null,
+        status: DetectionBufferStatus.Idle,
+    };
+}
+function rangeContains(outerStart, outerEnd, innerStart, innerEnd) {
+    return outerStart <= innerStart && innerEnd <= outerEnd;
+}
+function countDetections(frames) {
+    return frames.reduce((total, frame) => total + frame.detections.length, 0);
+}
+function getErrorMessage(error) {
+    return error instanceof Error
+        ? error.message
+        : "Detection buffer load failed.";
+}
+function getRequiredCoverageEndTime(options) {
+    const requestedEndTime = options.mediaTime + options.requiredAheadSeconds;
+    if (options.duration === null || options.duration === undefined) {
+        return requestedEndTime;
+    }
+    return Math.min(requestedEndTime, (options.firstTimestamp ?? 0) + Math.max(options.duration, 0));
+}
+function getLoopingSourceRanges(startTime, endTime, duration) {
+    const normalizedStartTime = modulo(startTime, duration);
+    const normalizedEndTime = modulo(endTime, duration);
+    const startCycle = Math.floor(startTime / duration);
+    const endCycle = Math.floor(endTime / duration);
+    if (startCycle === endCycle) {
+        return [{ endTime: normalizedEndTime, startTime: normalizedStartTime }];
+    }
+    const ranges = [];
+    if (normalizedStartTime < duration) {
+        ranges.push({ endTime: duration, startTime: normalizedStartTime });
+    }
+    if (normalizedEndTime > 0) {
+        ranges.push({ endTime: normalizedEndTime, startTime: 0 });
+    }
+    return ranges;
+}
+function modulo(value, modulus) {
+    return ((value % modulus) + modulus) % modulus;
+}
+function getOverlappingRanges(changedRanges, bufferedRanges) {
+    const intersections = [];
+    for (const changedRange of changedRanges) {
+        for (const bufferedRange of bufferedRanges) {
+            const startTime = Math.max(changedRange.startTime, bufferedRange.startTime);
+            const endTime = Math.min(changedRange.endTime, bufferedRange.endTime);
+            if (startTime <= endTime) {
+                intersections.push({ endTime, startTime });
+            }
+        }
+    }
+    return intersections;
+}
+function mergeIncrementalFrames(currentFrames, changedFrames, changedRanges) {
+    const framesByIdentity = new Map();
+    for (const frame of currentFrames) {
+        if (changedRanges.some((range) => detectionFrameOverlapsRange(frame, range.startTime, range.endTime))) {
+            continue;
+        }
+        framesByIdentity.set(getDetectionFrameIdentity(frame), frame);
+    }
+    for (const frame of changedFrames) {
+        framesByIdentity.set(getDetectionFrameIdentity(frame), frame);
+    }
+    return Array.from(framesByIdentity.values()).sort(compareDetectionFrames);
+}
+function reuseBufferedFrameSnapshots(currentFrames, loadedFrames) {
+    const currentFramesByIdentity = new Map(currentFrames.map((frame) => [getDetectionFrameIdentity(frame), frame]));
+    return loadedFrames.map((frame) => currentFramesByIdentity.get(getDetectionFrameIdentity(frame)) ?? frame);
+}
+function getDetectionFrameIdentity(frame) {
+    return frame.frameIndex === undefined
+        ? `time:${frame.mediaTime}`
+        : `index:${frame.frameIndex}`;
+}
+function compareDetectionFrames(left, right) {
+    if (left.mediaTime !== right.mediaTime) {
+        return left.mediaTime - right.mediaTime;
+    }
+    return (left.frameIndex ?? 0) - (right.frameIndex ?? 0);
+}
+
+function createColdDetectionFrameSource(options) {
+    return {
+        loadFrames(startTime, endTime) {
+            return options.store.loadFrames({
+                datasetId: options.datasetId,
+                endTime,
+                startTime,
+            });
+        },
+    };
+}
+
+function createCompositeDetectionFrameSource(options) {
+    const sources = normalizeCompositeSources(options.sources);
+    return {
+        async loadFrames(startTime, endTime) {
+            const loadedSources = await Promise.all(sources.map(async (source) => ({
+                ...source,
+                frames: copySortedDetectionFrames(await source.source.loadFrames(startTime, endTime)),
+            })));
+            if (options.selectionMode === DetectionFrameSelectionMode.NearestFrameIndex) {
+                const nearestFrames = composeNearestFrameIndexFrames(loadedSources, startTime, endTime, options);
+                if (nearestFrames) {
+                    return nearestFrames;
+                }
+            }
+            return composeIntervalFrames(loadedSources, startTime, endTime, options);
+        },
+        async waitForRange(range) {
+            await Promise.all(sources
+                .filter((source) => source.requiredForPlayback)
+                .map((source) => source.source.waitForRange?.(range)));
+        },
+        getAvailableRanges() {
+            return mergeRanges$1(sources.flatMap((source) => source.source.getAvailableRanges?.() ?? []));
+        },
+        getVersion(range) {
+            return sources.reduce((version, source) => version + (source.source.getVersion?.(range) ?? 0), 0);
+        },
+        destroy() {
+            for (const source of sources) {
+                source.source.destroy?.();
+            }
+        },
+    };
+}
+function normalizeCompositeSources(entries) {
+    const sourceIds = new Set();
+    return entries
+        .map((entry, declarationIndex) => {
+        if (sourceIds.has(entry.id)) {
+            throw new Error(`Duplicate detection source id: ${entry.id}.`);
+        }
+        sourceIds.add(entry.id);
+        const inputCount = [
+            entry.frames !== undefined,
+            entry.source !== undefined,
+        ].filter(Boolean).length;
+        if (inputCount !== 1) {
+            throw new Error(`Detection source ${entry.id} must provide exactly one input: frames or source.`);
+        }
+        return {
+            declarationIndex,
+            id: entry.id,
+            order: entry.order ?? 0,
+            requiredForPlayback: entry.requiredForPlayback !== false,
+            source: entry.source ?? createArrayDetectionFrameSource(entry.frames ?? []),
+            sync: entry.sync,
+        };
+    })
+        .sort((left, right) => left.order - right.order ||
+        left.declarationIndex - right.declarationIndex);
+}
+function composeIntervalFrames(sources, startTime, endTime, options) {
+    const boundaryTimes = new Set([startTime]);
+    for (const source of sources) {
+        for (const frame of source.frames) {
+            if (frame.mediaTime >= startTime && frame.mediaTime < endTime) {
+                boundaryTimes.add(frame.mediaTime);
+            }
+            if (frame.endTime !== undefined &&
+                frame.endTime > startTime &&
+                frame.endTime < endTime) {
+                boundaryTimes.add(frame.endTime);
+            }
+        }
+    }
+    const sortedBoundaryTimes = [...boundaryTimes].sort((left, right) => left - right);
+    const frames = [];
+    for (const [boundaryIndex, mediaTime] of sortedBoundaryTimes.entries()) {
+        if (mediaTime < startTime || mediaTime >= endTime) {
+            continue;
+        }
+        const nextBoundaryTime = sortedBoundaryTimes[boundaryIndex + 1] ?? endTime;
+        const endTimeForFrame = Math.min(nextBoundaryTime, endTime);
+        const frame = composeFrameAtTime(sources, mediaTime, endTimeForFrame, {
+            ...options,
+            selectionMode: DetectionFrameSelectionMode.Interval,
+        });
+        if (frame) {
+            frames.push(frame);
+        }
+    }
+    return frames;
+}
+function composeNearestFrameIndexFrames(sources, startTime, endTime, options) {
+    const frameRate = options.frameRate;
+    if (!frameRate || !Number.isFinite(frameRate) || frameRate <= 0) {
+        return null;
+    }
+    const indexedFrames = sources.flatMap((source) => source.frames.filter((frame) => frame.frameIndex !== undefined));
+    const firstIndexedFrame = indexedFrames[0];
+    if (!firstIndexedFrame || firstIndexedFrame.frameIndex === undefined) {
+        return null;
+    }
+    const originTime = options.frameIndexOriginTime ??
+        firstIndexedFrame.mediaTime - firstIndexedFrame.frameIndex / frameRate;
+    const frameIndexes = [
+        ...new Set(indexedFrames
+            .map((frame) => frame.frameIndex)
+            .filter((frameIndex) => frameIndex !== undefined)),
+    ].sort((left, right) => left - right);
+    const frames = [];
+    for (const frameIndex of frameIndexes) {
+        const mediaTime = originTime + frameIndex / frameRate;
+        if (mediaTime < startTime || mediaTime >= endTime) {
+            continue;
+        }
+        const frame = composeFrameAtTime(sources, mediaTime, Math.min(mediaTime + 1 / frameRate, endTime), {
+            ...options,
+            selectionMode: DetectionFrameSelectionMode.NearestFrameIndex,
+        }, frameIndex);
+        if (frame) {
+            frames.push(frame);
+        }
+    }
+    return frames;
+}
+function composeFrameAtTime(sources, mediaTime, endTime, options, frameIndex) {
+    const detections = [];
+    const activeFrameIndexes = [];
+    for (const source of sources) {
+        const activeFrame = selectDetectionFrame(source.frames, mediaTime, {
+            ...options,
+            ...source.sync,
+        });
+        if (!activeFrame) {
+            continue;
+        }
+        if (activeFrame.frameIndex !== undefined) {
+            activeFrameIndexes.push(activeFrame.frameIndex);
+        }
+        activeFrame.detections.forEach((detection, sourceDetectionIndex) => {
+            detections.push(copyDetectionWithSource(detection, source.id, sourceDetectionIndex));
+        });
+    }
+    if (detections.length === 0) {
+        return undefined;
+    }
+    return {
+        detections,
+        endTime,
+        frameIndex: frameIndex ?? resolveComposedFrameIndex(activeFrameIndexes) ?? undefined,
+        mediaTime,
+    };
+}
+function copyDetectionWithSource(detection, sourceId, sourceDetectionIndex) {
+    return {
+        ...detection,
+        mask: detection.mask ? { ...detection.mask } : undefined,
+        metadata: detection.metadata ? { ...detection.metadata } : undefined,
+        rect: detection.rect ? { ...detection.rect } : undefined,
+        sourceDetectionIndex,
+        sourceId,
+    };
+}
+function resolveComposedFrameIndex(frameIndexes) {
+    if (frameIndexes.length === 0) {
+        return undefined;
+    }
+    const firstFrameIndex = frameIndexes[0];
+    return frameIndexes.every((frameIndex) => frameIndex === firstFrameIndex)
+        ? firstFrameIndex
+        : undefined;
+}
+function mergeRanges$1(ranges) {
+    const sortedRanges = [...ranges].sort((left, right) => left.startTime - right.startTime);
+    const mergedRanges = [];
+    for (const range of sortedRanges) {
+        const lastRange = mergedRanges.at(-1);
+        if (!lastRange || range.startTime > lastRange.endTime) {
+            mergedRanges.push({ ...range });
+            continue;
+        }
+        mergedRanges[mergedRanges.length - 1] = {
+            startTime: lastRange.startTime,
+            endTime: Math.max(lastRange.endTime, range.endTime),
+        };
+    }
+    return mergedRanges;
+}
+
+var AnnotationFrameMutationKind;
+(function (AnnotationFrameMutationKind) {
+    AnnotationFrameMutationKind["Add"] = "add";
+    AnnotationFrameMutationKind["Remove"] = "remove";
+    AnnotationFrameMutationKind["Replace"] = "replace";
+    AnnotationFrameMutationKind["Transact"] = "transact";
+    AnnotationFrameMutationKind["Update"] = "update";
+})(AnnotationFrameMutationKind || (AnnotationFrameMutationKind = {}));
+function createEditableAnnotationFrameSession(initialFrame) {
+    let snapshot = createSnapshot(initialFrame);
+    let destroyed = false;
+    const listeners = new Set();
+    assertStableIds(snapshot);
+    const commit = (frame, kind, detectionIds) => {
+        assertActive();
+        const previous = snapshot;
+        const current = createSnapshot(frame);
+        assertStableIds(current);
+        snapshot = current;
+        const mutation = Object.freeze({
+            current,
+            detectionIds: Object.freeze([...detectionIds]),
+            kind,
+            previous,
+        });
+        for (const listener of listeners) {
+            listener(mutation);
+        }
+        return current;
+    };
+    const session = {
+        getSnapshot() {
+            assertActive();
+            return snapshot;
+        },
+        add(detection, index = snapshot.detections.length) {
+            assertActive();
+            const id = requireDetectionId(detection);
+            if (findDetectionIndex(snapshot, id) !== -1) {
+                throw new Error(`Detection id ${String(id)} already exists.`);
+            }
+            const detections = [...snapshot.detections];
+            const insertionIndex = Math.max(0, Math.min(index, detections.length));
+            detections.splice(insertionIndex, 0, detection);
+            return commit({ ...snapshot, detections }, AnnotationFrameMutationKind.Add, [id]);
+        },
+        update(id, update) {
+            assertActive();
+            const detectionIndex = findDetectionIndex(snapshot, id);
+            if (detectionIndex === -1) {
+                throw new Error(`Detection id ${String(id)} was not found.`);
+            }
+            const detections = [...snapshot.detections];
+            const current = detections[detectionIndex];
+            const next = typeof update === "function"
+                ? update(current)
+                : { ...current, ...update };
+            if (next.id !== id) {
+                throw new Error("Detection updates must preserve the stable id.");
+            }
+            detections[detectionIndex] = next;
+            return commit({ ...snapshot, detections }, AnnotationFrameMutationKind.Update, [id]);
+        },
+        remove(id) {
+            assertActive();
+            const detectionIndex = findDetectionIndex(snapshot, id);
+            if (detectionIndex === -1) {
+                return snapshot;
+            }
+            const detections = [...snapshot.detections];
+            detections.splice(detectionIndex, 1);
+            return commit({ ...snapshot, detections }, AnnotationFrameMutationKind.Remove, [id]);
+        },
+        replace(frame) {
+            return commit(frame, AnnotationFrameMutationKind.Replace, frame.detections.map(requireDetectionId));
+        },
+        transact(mutate, detectionIds = []) {
+            assertActive();
+            const detections = copySortedDetectionFrames([snapshot])[0]
+                .detections;
+            mutate(detections);
+            return commit({ ...snapshot, detections }, AnnotationFrameMutationKind.Transact, detectionIds);
+        },
+        subscribe(listener) {
+            assertActive();
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        destroy() {
+            destroyed = true;
+            listeners.clear();
+        },
+    };
+    return session;
+    function assertActive() {
+        if (destroyed) {
+            throw new Error("Editable annotation frame session has been destroyed.");
+        }
+    }
+}
+function findDetectionIndex(frame, id) {
+    return frame.detections.findIndex((detection) => detection.id === id);
+}
+function requireDetectionId(detection) {
+    if (detection.id === undefined) {
+        throw new Error("Editable annotation detections require a stable id.");
+    }
+    return detection.id;
+}
+function assertStableIds(frame) {
+    const ids = new Set();
+    for (const detection of frame.detections) {
+        const id = requireDetectionId(detection);
+        if (ids.has(id)) {
+            throw new Error(`Detection id ${String(id)} is duplicated.`);
+        }
+        ids.add(id);
+    }
+}
+function createSnapshot(frame) {
+    const snapshot = copySortedDetectionFrames([frame])[0];
+    return deepFreeze(snapshot);
+}
+function deepFreeze(value) {
+    if (value && typeof value === "object" && !Object.isFrozen(value)) {
+        Object.freeze(value);
+        for (const nested of Object.values(value)) {
+            deepFreeze(nested);
+        }
+    }
+    return value;
+}
+
+const DEFAULT_CHUNK_DURATION_SECONDS = 1;
+function createMemoryColdDetectionFrameStore() {
+    const datasets = new Map();
+    let destroyed = false;
+    return {
+        async putFrames(options) {
+            assertActive();
+            const dataset = createDataset(resolveChunkDurationSeconds(options));
+            upsertFrames(dataset, copySortedDetectionFrames(options.frames));
+            datasets.set(options.datasetId, dataset);
+            return createWriteSummary(options.datasetId, dataset);
+        },
+        async appendFrames(options) {
+            assertActive();
+            const existingDataset = datasets.get(options.datasetId);
+            const chunkDurationSeconds = resolveChunkDurationSeconds(options, existingDataset);
+            const dataset = existingDataset ?? createDataset(chunkDurationSeconds);
+            upsertFrames(dataset, copySortedDetectionFrames(options.frames));
+            datasets.set(options.datasetId, dataset);
+            return createWriteSummary(options.datasetId, dataset);
+        },
+        async loadFrames(options) {
+            assertActive();
+            const dataset = datasets.get(options.datasetId);
+            if (!dataset) {
+                return [];
+            }
+            const startTime = Math.max(0, options.startTime);
+            const endTime = Math.max(startTime, options.endTime);
+            const frameKeys = new Set();
+            const startChunkIndex = getChunkIndex(startTime, dataset.chunkDurationSeconds);
+            const endChunkIndex = getChunkIndex(endTime, dataset.chunkDurationSeconds);
+            for (let chunkIndex = startChunkIndex; chunkIndex <= endChunkIndex; chunkIndex += 1) {
+                for (const frameKey of dataset.frameKeysByChunk.get(chunkIndex) ?? []) {
+                    frameKeys.add(frameKey);
+                }
+            }
+            const frames = Array.from(frameKeys)
+                .map((frameKey) => dataset.framesByKey.get(frameKey)?.frame)
+                .filter((frame) => frame !== undefined &&
+                detectionFrameOverlapsRange(frame, startTime, endTime));
+            return copySortedDetectionFrames(frames);
+        },
+        async clearDataset(datasetId) {
+            assertActive();
+            datasets.delete(datasetId);
+        },
+        destroy() {
+            destroyed = true;
+            datasets.clear();
+        },
+    };
+    function assertActive() {
+        if (destroyed) {
+            throw new Error("Memory cold detection frame store has been destroyed.");
+        }
+    }
+}
+function createDataset(chunkDurationSeconds) {
+    return {
+        chunkDurationSeconds,
+        detectionCount: 0,
+        endTime: null,
+        frameKeysByChunk: new Map(),
+        framesByKey: new Map(),
+        startTime: null,
+    };
+}
+function upsertFrames(dataset, frames) {
+    let shouldRecalculateBounds = false;
+    for (const frame of frames) {
+        const frameKey = getDetectionFrameDedupeKey(frame);
+        const existingFrame = dataset.framesByKey.get(frameKey);
+        if (existingFrame) {
+            removeStoredFrame(dataset, frameKey, existingFrame);
+            shouldRecalculateBounds ||= replacementCanShrinkBounds(dataset, existingFrame.frame, frame);
+        }
+        const chunkIndexes = getFrameChunkIndexes(frame, dataset.chunkDurationSeconds);
+        dataset.framesByKey.set(frameKey, { chunkIndexes, frame });
+        dataset.detectionCount += frame.detections.length;
+        dataset.startTime = Math.min(dataset.startTime ?? frame.mediaTime, frame.mediaTime);
+        dataset.endTime = Math.max(dataset.endTime ?? getFrameEndTime(frame), getFrameEndTime(frame));
+        for (const chunkIndex of chunkIndexes) {
+            const frameKeys = dataset.frameKeysByChunk.get(chunkIndex) ?? new Set();
+            frameKeys.add(frameKey);
+            dataset.frameKeysByChunk.set(chunkIndex, frameKeys);
+        }
+    }
+    if (shouldRecalculateBounds) {
+        recalculateBounds(dataset);
+    }
+}
+function removeStoredFrame(dataset, frameKey, storedFrame) {
+    dataset.framesByKey.delete(frameKey);
+    dataset.detectionCount -= storedFrame.frame.detections.length;
+    for (const chunkIndex of storedFrame.chunkIndexes) {
+        const frameKeys = dataset.frameKeysByChunk.get(chunkIndex);
+        frameKeys?.delete(frameKey);
+        if (frameKeys?.size === 0) {
+            dataset.frameKeysByChunk.delete(chunkIndex);
+        }
+    }
+}
+function replacementCanShrinkBounds(dataset, previousFrame, nextFrame) {
+    return ((dataset.startTime === previousFrame.mediaTime &&
+        nextFrame.mediaTime > previousFrame.mediaTime) ||
+        (dataset.endTime === getFrameEndTime(previousFrame) &&
+            getFrameEndTime(nextFrame) < getFrameEndTime(previousFrame)));
+}
+function recalculateBounds(dataset) {
+    let startTime = null;
+    let endTime = null;
+    for (const { frame } of dataset.framesByKey.values()) {
+        startTime = Math.min(startTime ?? frame.mediaTime, frame.mediaTime);
+        endTime = Math.max(endTime ?? getFrameEndTime(frame), getFrameEndTime(frame));
+    }
+    dataset.startTime = startTime;
+    dataset.endTime = endTime;
+}
+function resolveChunkDurationSeconds(options, existingDataset) {
+    const chunkDurationSeconds = options.chunkDurationSeconds ??
+        existingDataset?.chunkDurationSeconds ??
+        DEFAULT_CHUNK_DURATION_SECONDS;
+    if (chunkDurationSeconds <= 0) {
+        throw new Error("chunkDurationSeconds must be greater than 0.");
+    }
+    if (existingDataset &&
+        options.chunkDurationSeconds !== undefined &&
+        options.chunkDurationSeconds !== existingDataset.chunkDurationSeconds) {
+        throw new Error("chunkDurationSeconds must match the existing detection dataset.");
+    }
+    return chunkDurationSeconds;
+}
+function createWriteSummary(datasetId, dataset) {
+    return {
+        chunkCount: dataset.frameKeysByChunk.size,
+        chunkDurationSeconds: dataset.chunkDurationSeconds,
+        datasetId,
+        detectionCount: dataset.detectionCount,
+        endTime: dataset.endTime,
+        frameCount: dataset.framesByKey.size,
+        startTime: dataset.startTime,
+    };
+}
+function getFrameChunkIndexes(frame, chunkDurationSeconds) {
+    const startIndex = getChunkIndex(frame.mediaTime, chunkDurationSeconds);
+    const endIndex = Math.max(startIndex, Math.ceil(getFrameEndTime(frame) / chunkDurationSeconds) - 1);
+    return Array.from({ length: endIndex - startIndex + 1 }, (_, offset) => startIndex + offset);
+}
+function getFrameEndTime(frame) {
+    return frame.endTime ?? frame.mediaTime;
+}
+function getChunkIndex(mediaTime, chunkDurationSeconds) {
+    return Math.floor(mediaTime / chunkDurationSeconds);
+}
+function getDetectionFrameDedupeKey(frame) {
+    return frame.frameIndex === undefined
+        ? `time:${frame.mediaTime}`
+        : `index:${frame.frameIndex}`;
+}
+
+const RANGE_EPSILON_SECONDS = 1e-6;
+const MAX_CHANGED_RANGE_JOURNAL_LENGTH = 512;
+function createWritableDetectionFrameSource(options) {
+    let summary = null;
+    let version = 0;
+    let allRangeVersion = 0;
+    let journalFloorVersion = 0;
+    let destroyed = false;
+    const changedRanges = [];
+    const availableRanges = [];
+    const waiters = [];
+    const writeOptions = (frames) => ({
+        chunkDurationSeconds: options.chunkDurationSeconds,
+        datasetId: options.datasetId,
+        frames,
+    });
+    const recordRangeWrite = (nextSummary, changedSourceRanges) => {
+        summary = nextSummary;
+        version += 1;
+        for (const changedRange of changedSourceRanges) {
+            changedRanges.push({ ...changedRange, version });
+            recordAvailableRange(changedRange, availableRanges);
+        }
+        compactChangedRangeJournal();
+        resolveCoveredWaiters();
+        return nextSummary;
+    };
+    const recordAllRangesWrite = (nextSummary) => {
+        summary = nextSummary;
+        version += 1;
+        allRangeVersion = version;
+        journalFloorVersion = version;
+        changedRanges.length = 0;
+        availableRanges.length = 0;
+        if (nextSummary.startTime !== null && nextSummary.endTime !== null) {
+            recordAvailableRange({
+                endTime: nextSummary.endTime,
+                startTime: nextSummary.startTime,
+            }, availableRanges);
+        }
+        resolveCoveredWaiters();
+        return nextSummary;
+    };
+    return {
+        datasetId: options.datasetId,
+        async appendFrames(frames) {
+            assertActive();
+            const nextSummary = await options.store.appendFrames(writeOptions(frames));
+            assertActive();
+            const changedSourceRanges = getDetectionFrameRanges(frames);
+            const retainedSummary = await applyRetention(nextSummary);
+            assertActive();
+            if (retainedSummary !== nextSummary) {
+                return recordAllRangesWrite(retainedSummary);
+            }
+            if (changedSourceRanges.length === 0) {
+                summary = nextSummary;
+                return nextSummary;
+            }
+            return recordRangeWrite(nextSummary, changedSourceRanges);
+        },
+        async replaceFrames(frames) {
+            assertActive();
+            const nextSummary = await options.store.putFrames(writeOptions(frames));
+            assertActive();
+            const retainedSummary = await applyRetention(nextSummary);
+            assertActive();
+            return recordAllRangesWrite(retainedSummary);
+        },
+        async clear() {
+            assertActive();
+            await options.store.clearDataset(options.datasetId);
+            assertActive();
+            summary = null;
+            version += 1;
+            allRangeVersion = version;
+            journalFloorVersion = version;
+            changedRanges.length = 0;
+            availableRanges.length = 0;
+        },
+        async loadFrames(startTime, endTime) {
+            assertActive();
+            const loadedFrames = await options.store.loadFrames({
+                datasetId: options.datasetId,
+                endTime,
+                startTime,
+            });
+            assertActive();
+            return loadedFrames;
+        },
+        getSummary() {
+            return summary ? { ...summary } : null;
+        },
+        getAvailableRanges() {
+            return availableRanges.map((range) => ({ ...range }));
+        },
+        waitForRange(range) {
+            if (destroyed) {
+                return Promise.reject(createDestroyedError());
+            }
+            if (isRangeCovered(range, availableRanges)) {
+                return Promise.resolve();
+            }
+            return new Promise((resolve, reject) => {
+                waiters.push({ range, reject, resolve });
+            });
+        },
+        getVersion(range) {
+            if (!range) {
+                return version;
+            }
+            return changedRanges.reduce((rangeVersion, changedRange) => rangesOverlap(range, changedRange)
+                ? Math.max(rangeVersion, changedRange.version)
+                : rangeVersion, Math.max(allRangeVersion, journalFloorVersion));
+        },
+        getChangesSince(previousVersion, ranges) {
+            const relevantVersion = ranges.reduce((rangeVersion, range) => Math.max(rangeVersion, changedRanges.reduce((changedVersion, changedRange) => rangesOverlap(range, changedRange)
+                ? Math.max(changedVersion, changedRange.version)
+                : changedVersion, Math.max(allRangeVersion, journalFloorVersion))), Math.max(allRangeVersion, journalFloorVersion));
+            if (relevantVersion <= previousVersion) {
+                return {
+                    ranges: [],
+                    requiresReload: false,
+                    version: relevantVersion,
+                };
+            }
+            if (previousVersion < allRangeVersion ||
+                previousVersion < journalFloorVersion) {
+                return {
+                    ranges: [],
+                    requiresReload: true,
+                    version: relevantVersion,
+                };
+            }
+            const changedSourceRanges = changedRanges
+                .filter((changedRange) => changedRange.version > previousVersion &&
+                ranges.some((range) => rangesOverlap(range, changedRange)))
+                .map(({ endTime, startTime }) => ({ endTime, startTime }));
+            return {
+                ranges: mergeRanges(changedSourceRanges),
+                requiresReload: false,
+                version: relevantVersion,
+            };
+        },
+        destroy() {
+            if (destroyed) {
+                return;
+            }
+            destroyed = true;
+            for (const waiter of waiters) {
+                waiter.reject(new Error("Detection frame source has been destroyed."));
+            }
+            waiters.length = 0;
+            options.store.destroy?.();
+        },
+    };
+    function assertActive() {
+        if (destroyed) {
+            throw createDestroyedError();
+        }
+    }
+    async function applyRetention(nextSummary) {
+        const retention = options.retention;
+        if (retention === undefined ||
+            !shouldApplyWindowRetention(retention) ||
+            nextSummary.endTime === null) {
+            return nextSummary;
+        }
+        const retentionWindowSeconds = retention.windowSeconds;
+        if (retentionWindowSeconds === undefined ||
+            !Number.isFinite(retentionWindowSeconds) ||
+            retentionWindowSeconds <= 0) {
+            throw new Error("retention.windowSeconds must be greater than 0.");
+        }
+        const retentionStartTime = Math.max(0, nextSummary.endTime - retentionWindowSeconds);
+        if (nextSummary.startTime !== null &&
+            nextSummary.startTime + RANGE_EPSILON_SECONDS >= retentionStartTime) {
+            return nextSummary;
+        }
+        const retainedFrames = await options.store.loadFrames({
+            datasetId: options.datasetId,
+            endTime: nextSummary.endTime,
+            startTime: retentionStartTime,
+        });
+        return options.store.putFrames(writeOptions(retainedFrames));
+    }
+    function resolveCoveredWaiters() {
+        for (let index = waiters.length - 1; index >= 0; index -= 1) {
+            const waiter = waiters[index];
+            if (!waiter || !isRangeCovered(waiter.range, availableRanges)) {
+                continue;
+            }
+            waiters.splice(index, 1);
+            waiter.resolve();
+        }
+    }
+    function compactChangedRangeJournal() {
+        const overflow = changedRanges.length - MAX_CHANGED_RANGE_JOURNAL_LENGTH;
+        if (overflow <= 0) {
+            return;
+        }
+        const removedRanges = changedRanges.splice(0, overflow);
+        journalFloorVersion = Math.max(journalFloorVersion, removedRanges.at(-1)?.version ?? 0);
+    }
+}
+function createDestroyedError() {
+    return new Error("Detection frame source has been destroyed.");
+}
+function shouldApplyWindowRetention(retention) {
+    return (retention?.mode === DetectionFrameRetentionMode.PersistWindow ||
+        retention?.mode === DetectionFrameRetentionMode.MemoryOnly);
+}
+function getDetectionFrameRanges(frames) {
+    return mergeRanges(frames.map((frame) => ({
+        endTime: frame.endTime ?? frame.mediaTime,
+        startTime: frame.mediaTime,
+    })));
+}
+function rangesOverlap(left, right) {
+    return left.startTime <= right.endTime && right.startTime <= left.endTime;
+}
+function mergeRanges(ranges) {
+    const sortedRanges = ranges
+        .map((range) => ({ ...range }))
+        .sort((left, right) => left.startTime - right.startTime);
+    const mergedRanges = [];
+    for (const range of sortedRanges) {
+        const previousRange = mergedRanges.at(-1);
+        if (previousRange &&
+            range.startTime <= previousRange.endTime + RANGE_EPSILON_SECONDS) {
+            previousRange.endTime = Math.max(previousRange.endTime, range.endTime);
+            continue;
+        }
+        mergedRanges.push({ ...range });
+    }
+    return mergedRanges;
+}
+function recordAvailableRange(range, availableRanges) {
+    if (range.endTime < range.startTime) {
+        return;
+    }
+    availableRanges.push({ ...range });
+    availableRanges.sort((left, right) => left.startTime - right.startTime);
+    let writeIndex = 0;
+    for (const nextRange of availableRanges) {
+        const currentRange = availableRanges[writeIndex - 1];
+        if (currentRange &&
+            nextRange.startTime <= currentRange.endTime + RANGE_EPSILON_SECONDS) {
+            currentRange.endTime = Math.max(currentRange.endTime, nextRange.endTime);
+            continue;
+        }
+        availableRanges[writeIndex] = { ...nextRange };
+        writeIndex += 1;
+    }
+    availableRanges.length = writeIndex;
+}
+function isRangeCovered(range, availableRanges) {
+    return availableRanges.some((availableRange) => availableRange.startTime <= range.startTime + RANGE_EPSILON_SECONDS &&
+        availableRange.endTime + RANGE_EPSILON_SECONDS >= range.endTime);
+}
+
+var DetectionPickTarget;
+(function (DetectionPickTarget) {
+    DetectionPickTarget["Box"] = "box";
+    DetectionPickTarget["Edge"] = "edge";
+    DetectionPickTarget["Keypoint"] = "keypoint";
+    DetectionPickTarget["Label"] = "label";
+    DetectionPickTarget["Mask"] = "mask";
+    DetectionPickTarget["Polygon"] = "polygon";
+    DetectionPickTarget["Polyline"] = "polyline";
+})(DetectionPickTarget || (DetectionPickTarget = {}));
+var MediaInteractionMode;
+(function (MediaInteractionMode) {
+    MediaInteractionMode["Always"] = "always";
+    MediaInteractionMode["Disabled"] = "disabled";
+    MediaInteractionMode["PausedOnly"] = "pausedOnly";
+})(MediaInteractionMode || (MediaInteractionMode = {}));
+
+function centerRectToTopLeftRect(rect) {
+    return {
+        height: rect.height,
+        width: rect.width,
+        x: rect.x - rect.width / 2,
+        y: rect.y - rect.height / 2,
+    };
+}
+function topLeftRectToCenterRect(rect) {
+    return {
+        height: rect.height,
+        width: rect.width,
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2,
+    };
+}
+function getPointsRect(points) {
+    if (points.length === 0) {
+        return undefined;
+    }
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const point of points) {
+        minX = Math.min(minX, point.x);
+        minY = Math.min(minY, point.y);
+        maxX = Math.max(maxX, point.x);
+        maxY = Math.max(maxY, point.y);
+    }
+    return {
+        height: maxY - minY,
+        width: maxX - minX,
+        x: (minX + maxX) / 2,
+        y: (minY + maxY) / 2,
+    };
+}
+function getDetectionRect(detection) {
+    return (detection.rect ??
+        getPointsRect(detection.polygon?.points ?? []) ??
+        getPointsRect(detection.polyline?.points ?? []) ??
+        getPointsRect(detection.keypoints?.points ?? []));
+}
+function containsPoint(rect, point, padding = 0) {
+    const halfWidth = rect.width / 2;
+    const halfHeight = rect.height / 2;
+    return (point.x >= rect.x - halfWidth - padding &&
+        point.x <= rect.x + halfWidth + padding &&
+        point.y >= rect.y - halfHeight - padding &&
+        point.y <= rect.y + halfHeight + padding);
+}
+function pointInPolygon(point, polygon) {
+    if (polygon.length < 3) {
+        return false;
+    }
+    let inside = false;
+    for (let currentIndex = 0, previousIndex = polygon.length - 1; currentIndex < polygon.length; previousIndex = currentIndex, currentIndex += 1) {
+        const current = polygon[currentIndex];
+        const previous = polygon[previousIndex];
+        const crossesRay = current.y > point.y !== previous.y > point.y &&
+            point.x <
+                ((previous.x - current.x) * (point.y - current.y)) /
+                    (previous.y - current.y) +
+                    current.x;
+        if (crossesRay) {
+            inside = !inside;
+        }
+    }
+    return inside;
+}
+function distanceToSegment(point, start, end) {
+    const deltaX = end.x - start.x;
+    const deltaY = end.y - start.y;
+    const lengthSquared = deltaX * deltaX + deltaY * deltaY;
+    if (lengthSquared === 0) {
+        return Math.hypot(point.x - start.x, point.y - start.y);
+    }
+    const projection = Math.max(0, Math.min(1, ((point.x - start.x) * deltaX + (point.y - start.y) * deltaY) /
+        lengthSquared));
+    const closestX = start.x + projection * deltaX;
+    const closestY = start.y + projection * deltaY;
+    return Math.hypot(point.x - closestX, point.y - closestY);
+}
+function polygonArea(points) {
+    if (points.length < 3) {
+        return 0;
+    }
+    let twiceArea = 0;
+    for (let index = 0; index < points.length; index += 1) {
+        const current = points[index];
+        const next = points[(index + 1) % points.length];
+        twiceArea += current.x * next.y - next.x * current.y;
+    }
+    return Math.abs(twiceArea) / 2;
+}
+function rectArea(rect) {
+    return rect ? Math.max(0, rect.width) * Math.max(0, rect.height) : 0;
+}
+
+const decodedMaskCache = new WeakMap();
+function pickDetectionAtPoint(frame, point, options = {}) {
+    if (!frame) {
+        return null;
+    }
+    const padding = Math.max(0, options.padding ?? 0);
+    const polylinePadding = Math.max(0, options.polylinePadding ?? 6);
+    const keypointPadding = Math.max(0, options.keypointPadding ?? 10);
+    const edgePadding = Math.max(0, options.edgePadding ?? 8);
+    const candidates = [];
+    for (let detectionIndex = 0; detectionIndex < frame.detections.length; detectionIndex += 1) {
+        const detection = frame.detections[detectionIndex];
+        if (!detection ||
+            (detection.locked && options.includeLocked === false) ||
+            options.filter?.(detection, detectionIndex) === false) {
+            continue;
+        }
+        const detectionArea = Math.max(1, rectArea(getDetectionRect(detection)));
+        const pushCandidate = (target, area = detectionArea, geometryIndex) => {
+            candidates.push({
+                area,
+                priority: getPickTargetPriority(target),
+                result: {
+                    detection,
+                    detectionIndex,
+                    frame,
+                    geometryIndex,
+                    mediaTime: frame.mediaTime,
+                    point,
+                    target,
+                },
+                zIndex: detection.zIndex ?? detectionIndex,
+            });
+        };
+        if (detection.rect && containsPoint(detection.rect, point, padding)) {
+            pushCandidate(DetectionPickTarget.Box, rectArea(detection.rect));
+        }
+        if (detection.polygon && pointInPolygon(point, detection.polygon.points)) {
+            pushCandidate(DetectionPickTarget.Polygon, Math.max(1, polygonArea(detection.polygon.points)));
+        }
+        if (detection.polyline) {
+            const segmentIndex = findHitSegment(point, detection.polyline.points, polylinePadding);
+            if (segmentIndex !== -1) {
+                pushCandidate(DetectionPickTarget.Polyline, detectionArea, segmentIndex);
+            }
+        }
+        if (detection.keypoints) {
+            const keypointIndex = detection.keypoints.points.findIndex((keypoint, index) => detection.keypoints?.visibility?.[index] !==
+                KeypointVisibility.NotLabeled &&
+                Math.hypot(point.x - keypoint.x, point.y - keypoint.y) <=
+                    keypointPadding);
+            if (keypointIndex !== -1) {
+                pushCandidate(DetectionPickTarget.Keypoint, Math.PI * keypointPadding * keypointPadding, keypointIndex);
+            }
+            else {
+                const edgeIndex = detection.keypoints.edges.findIndex(([fromIndex, toIndex]) => {
+                    const from = detection.keypoints?.points[fromIndex];
+                    const to = detection.keypoints?.points[toIndex];
+                    return Boolean(from &&
+                        to &&
+                        detection.keypoints?.visibility?.[fromIndex] !==
+                            KeypointVisibility.NotLabeled &&
+                        detection.keypoints?.visibility?.[toIndex] !==
+                            KeypointVisibility.NotLabeled &&
+                        distanceToSegment(point, from, to) <= edgePadding);
+                });
+                if (edgeIndex !== -1) {
+                    const [fromIndex, toIndex] = detection.keypoints.edges[edgeIndex];
+                    const from = detection.keypoints.points[fromIndex];
+                    const to = detection.keypoints.points[toIndex];
+                    const edgeArea = Math.max(1, Math.hypot(to.x - from.x, to.y - from.y) * edgePadding * 2);
+                    pushCandidate(DetectionPickTarget.Edge, edgeArea, edgeIndex);
+                }
+            }
+        }
+        if (detection.mask && options.includeMasks !== false) {
+            const decoded = getDecodedMask(detection.mask);
+            const mediaDimensions = options.maskMediaDimensions;
+            const x = Math.floor(mediaDimensions && mediaDimensions.width > 0
+                ? (point.x / mediaDimensions.width) * decoded.width
+                : point.x);
+            const y = Math.floor(mediaDimensions && mediaDimensions.height > 0
+                ? (point.y / mediaDimensions.height) * decoded.height
+                : point.y);
+            if (x >= 0 &&
+                y >= 0 &&
+                x < decoded.width &&
+                y < decoded.height &&
+                decoded.data[y * decoded.width + x]) {
+                pushCandidate(DetectionPickTarget.Mask, getMaskMediaArea(decoded, mediaDimensions));
+            }
+        }
+    }
+    candidates.sort((left, right) => {
+        const priorityDifference = left.priority - right.priority;
+        if (priorityDifference !== 0) {
+            return priorityDifference;
+        }
+        const areaDifference = left.area - right.area;
+        if (areaDifference !== 0) {
+            return areaDifference;
+        }
+        const zIndexDifference = right.zIndex - left.zIndex;
+        return zIndexDifference === 0
+            ? right.result.detectionIndex - left.result.detectionIndex
+            : zIndexDifference;
+    });
+    return candidates[0]?.result ?? null;
+}
+function getPickTargetPriority(target) {
+    switch (target) {
+        case DetectionPickTarget.Keypoint:
+            return 0;
+        case DetectionPickTarget.Edge:
+        case DetectionPickTarget.Polyline:
+            return 1;
+        default:
+            return 2;
+    }
+}
+function getDecodedMask(mask) {
+    const cached = decodedMaskCache.get(mask);
+    if (cached)
+        return cached;
+    const decoded = decodeCompressedRleMask(mask);
+    const result = {
+        ...decoded,
+        pixelArea: countMaskPixels(decoded.data),
+    };
+    decodedMaskCache.set(mask, result);
+    return result;
+}
+function getMaskMediaArea(mask, mediaDimensions) {
+    if (!mediaDimensions ||
+        mediaDimensions.width <= 0 ||
+        mediaDimensions.height <= 0) {
+        return mask.pixelArea;
+    }
+    return (mask.pixelArea *
+        (mediaDimensions.width / mask.width) *
+        (mediaDimensions.height / mask.height));
+}
+function createDetectionPickKey(pick) {
+    if (!pick) {
+        return null;
+    }
+    const frameKey = [pick.frame.frameIndex ?? "time", pick.frame.mediaTime];
+    const detectionKey = detectionPickKey(pick);
+    return [
+        ...frameKey,
+        ...detectionKey,
+        pick.target,
+        pick.geometryIndex ?? "geometry",
+    ].join(":");
+}
+function rebaseDetectionPickToFrame(pick, frame) {
+    if (!pick || !frame) {
+        return null;
+    }
+    const detectionIndex = pick.detection.id === undefined ||
+        !hasUniqueDetectionId(pick.frame, pick.detection.id)
+        ? pick.detectionIndex
+        : frame.detections.findIndex((detection) => detection.id === pick.detection.id);
+    const detection = frame.detections[detectionIndex];
+    if (!detection) {
+        return null;
+    }
+    const rebasedPick = {
+        detection,
+        detectionIndex,
+        frame,
+        geometryIndex: pick.geometryIndex,
+        mediaTime: frame.mediaTime,
+        point: pick.point,
+        target: pick.target,
+    };
+    return createDetectionPickKey(rebasedPick) === createDetectionPickKey(pick)
+        ? rebasedPick
+        : null;
+}
+function detectionPickKey(pick) {
+    if (pick.detection.id === undefined) {
+        return ["anonymous", pick.detectionIndex];
+    }
+    return hasUniqueDetectionId(pick.frame, pick.detection.id)
+        ? ["id", String(pick.detection.id)]
+        : ["duplicate-id", String(pick.detection.id), "index", pick.detectionIndex];
+}
+function hasUniqueDetectionId(frame, id) {
+    let count = 0;
+    for (const detection of frame.detections) {
+        if (detection.id !== id)
+            continue;
+        count += 1;
+        if (count > 1)
+            return false;
+    }
+    return count === 1;
+}
+function pickDetectionByMaskId(frame, maskId, point) {
+    if (!frame || maskId <= 0 || !Number.isInteger(maskId)) {
+        return null;
+    }
+    const detectionIndex = maskId - 1;
+    const detection = frame.detections[detectionIndex];
+    if (!detection) {
+        return null;
+    }
+    return {
+        detection,
+        detectionIndex,
+        frame,
+        mediaTime: frame.mediaTime,
+        point,
+        target: DetectionPickTarget.Mask,
+    };
+}
+function findHitSegment(point, points, padding, closed) {
+    const segmentCount = points.length - 1;
+    for (let index = 0; index < segmentCount; index += 1) {
+        const start = points[index];
+        const end = points[(index + 1) % points.length];
+        if (start && end && distanceToSegment(point, start, end) <= padding) {
+            return index;
+        }
+    }
+    return -1;
+}
+function countMaskPixels(data) {
+    let count = 0;
+    for (const value of data) {
+        count += value ? 1 : 0;
+    }
+    return Math.max(1, count);
+}
+
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 10;
+const MAX_WHEEL_DELTA = 50;
+function createViewportController(initial = {}) {
+    let transform = freeze({
+        locked: initial.locked ?? false,
+        scale: clampScale(initial.scale ?? 0.8),
+        x: initial.x ?? 0,
+        y: initial.y ?? 0,
+    });
+    const listeners = new Set();
+    const update = (next) => {
+        if (next.scale === transform.scale &&
+            next.x === transform.x &&
+            next.y === transform.y &&
+            next.locked === transform.locked)
+            return;
+        transform = freeze(next);
+        for (const listener of listeners)
+            listener(transform);
+    };
+    const controller = {
+        getTransform: () => transform,
+        screenToMedia: (point) => screenToMedia(point, transform),
+        mediaToScreen: (point) => mediaToScreen(point, transform),
+        setTransform(next) {
+            if (transform.locked)
+                return;
+            update({
+                ...transform,
+                ...(next.scale === undefined ? {} : { scale: clampScale(next.scale) }),
+                ...(next.x === undefined ? {} : { x: next.x }),
+                ...(next.y === undefined ? {} : { y: next.y }),
+            });
+        },
+        setLocked(locked) {
+            update({ ...transform, locked });
+        },
+        panBy(dx, dy) {
+            if (transform.locked)
+                return;
+            update({ ...transform, x: transform.x + dx, y: transform.y + dy });
+        },
+        zoomAt(point, factor) {
+            if (transform.locked || !Number.isFinite(factor) || factor <= 0)
+                return;
+            const mediaPoint = screenToMedia(point, transform);
+            const scale = clampScale(transform.scale * factor);
+            update({
+                ...transform,
+                scale,
+                x: point.x - mediaPoint.x * scale,
+                y: point.y - mediaPoint.y * scale,
+            });
+        },
+        zoomFromWheel(point, deltaY) {
+            const delta = Math.max(-MAX_WHEEL_DELTA, Math.min(MAX_WHEEL_DELTA, deltaY));
+            controller.zoomAt(point, Math.exp(-delta * 0.01));
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+    return controller;
+}
+function screenToMedia(point, transform) {
+    return {
+        x: (point.x - transform.x) / transform.scale,
+        y: (point.y - transform.y) / transform.scale,
+    };
+}
+function mediaToScreen(point, transform) {
+    return {
+        x: point.x * transform.scale + transform.x,
+        y: point.y * transform.scale + transform.y,
+    };
+}
+function clampScale(scale) {
+    return Math.max(MIN_SCALE, Math.min(MAX_SCALE, Number.isFinite(scale) ? scale : 1));
+}
+function freeze(transform) {
+    return Object.freeze(transform);
+}
+
+var AnnotationGeometryKind;
+(function (AnnotationGeometryKind) {
+    AnnotationGeometryKind["Box"] = "box";
+    AnnotationGeometryKind["Polygon"] = "polygon";
+    AnnotationGeometryKind["Polyline"] = "polyline";
+    AnnotationGeometryKind["Keypoints"] = "keypoints";
+    AnnotationGeometryKind["Mask"] = "mask";
+})(AnnotationGeometryKind || (AnnotationGeometryKind = {}));
+var AnnotationGestureStateKind;
+(function (AnnotationGestureStateKind) {
+    AnnotationGestureStateKind["Idle"] = "idle";
+    AnnotationGestureStateKind["Creating"] = "creating";
+    AnnotationGestureStateKind["Moving"] = "moving";
+    AnnotationGestureStateKind["Resizing"] = "resizing";
+    AnnotationGestureStateKind["DragSelecting"] = "dragSelecting";
+})(AnnotationGestureStateKind || (AnnotationGestureStateKind = {}));
+var AnnotationHandleKind;
+(function (AnnotationHandleKind) {
+    AnnotationHandleKind["Resize"] = "resize";
+    AnnotationHandleKind["Vertex"] = "vertex";
+    AnnotationHandleKind["AddVertex"] = "addVertex";
+    AnnotationHandleKind["Keypoint"] = "keypoint";
+})(AnnotationHandleKind || (AnnotationHandleKind = {}));
+
+const HANDLE_RADIUS = 6;
+const ADD_HANDLE_RADIUS = 3.6;
+const HANDLE_HIT_SIZE = 16;
+function getAnnotationHandles(detection, viewportScale = 1) {
+    if (detection.locked || detection.mask)
+        return [];
+    const radius = HANDLE_RADIUS / viewportScale;
+    const hitSize = HANDLE_HIT_SIZE / viewportScale;
+    if (detection.polygon)
+        return getPathHandles(detection.polygon.points, true, radius, hitSize);
+    if (detection.polyline)
+        return getPathHandles(detection.polyline.points, false, radius, hitSize);
+    if (detection.keypoints) {
+        return detection.keypoints.points.map((point, geometryIndex) => ({
+            cursor: "move",
+            geometryIndex,
+            hitSize,
+            id: `kp-${geometryIndex}`,
+            kind: AnnotationHandleKind.Keypoint,
+            point,
+            radius,
+        }));
+    }
+    if (detection.rect)
+        return getBoxHandles(detection.rect, radius, hitSize);
+    return [];
+}
+function pickAnnotationHandle(handles, point) {
+    return [...handles]
+        .reverse()
+        .find((handle) => Math.abs(point.x - handle.point.x) <= handle.hitSize / 2 &&
+        Math.abs(point.y - handle.point.y) <= handle.hitSize / 2);
+}
+function applyAnnotationHandleDrag(detection, handle, point) {
+    if (detection.rect && handle.kind === AnnotationHandleKind.Resize) {
+        return { ...detection, rect: resizeRect(detection.rect, handle.id, point) };
+    }
+    if (handle.kind === AnnotationHandleKind.AddVertex &&
+        handle.edgeIndex !== undefined) {
+        const key = detection.polygon ? "polygon" : "polyline";
+        const geometry = detection[key];
+        if (!geometry)
+            return detection;
+        const points = [...geometry.points];
+        points.splice(handle.edgeIndex + 1, 0, point);
+        return { ...detection, [key]: { points } };
+    }
+    if (handle.geometryIndex === undefined)
+        return detection;
+    if (detection.polygon)
+        return replacePathPoint(detection, "polygon", handle.geometryIndex, point);
+    if (detection.polyline)
+        return replacePathPoint(detection, "polyline", handle.geometryIndex, point);
+    if (detection.keypoints) {
+        const points = [...detection.keypoints.points];
+        points[handle.geometryIndex] = point;
+        return { ...detection, keypoints: { ...detection.keypoints, points } };
+    }
+    return detection;
+}
+function deleteAnnotationVertex(detection, vertexIndex) {
+    const geometry = detection.polygon ?? detection.polyline;
+    const minimum = detection.polygon ? 3 : 2;
+    if (!geometry || geometry.points.length <= minimum)
+        return null;
+    const points = geometry.points.filter((_, index) => index !== vertexIndex);
+    return detection.polygon
+        ? { ...detection, polygon: { points } }
+        : { ...detection, polyline: { points } };
+}
+function offsetDetection(detection, dx, dy) {
+    const offsetPoint = ({ x, y }) => ({ x: x + dx, y: y + dy });
+    return {
+        ...detection,
+        ...(detection.rect
+            ? {
+                rect: {
+                    ...detection.rect,
+                    x: detection.rect.x + dx,
+                    y: detection.rect.y + dy,
+                },
+            }
+            : {}),
+        ...(detection.polygon
+            ? { polygon: { points: detection.polygon.points.map(offsetPoint) } }
+            : {}),
+        ...(detection.polyline
+            ? { polyline: { points: detection.polyline.points.map(offsetPoint) } }
+            : {}),
+        ...(detection.keypoints
+            ? {
+                keypoints: {
+                    ...detection.keypoints,
+                    points: detection.keypoints.points.map(offsetPoint),
+                },
+            }
+            : {}),
+    };
+}
+function getBoxHandles(rect, radius, hitSize) {
+    const left = rect.x - rect.width / 2;
+    const right = rect.x + rect.width / 2;
+    const top = rect.y - rect.height / 2;
+    const bottom = rect.y + rect.height / 2;
+    const definitions = [
+        ["nw", { x: left, y: top }, "nwse-resize"],
+        ["n", { x: rect.x, y: top }, "ns-resize"],
+        ["ne", { x: right, y: top }, "nesw-resize"],
+        ["e", { x: right, y: rect.y }, "ew-resize"],
+        ["se", { x: right, y: bottom }, "nwse-resize"],
+        ["s", { x: rect.x, y: bottom }, "ns-resize"],
+        ["sw", { x: left, y: bottom }, "nesw-resize"],
+        ["w", { x: left, y: rect.y }, "ew-resize"],
+    ];
+    return definitions.map(([id, point, cursor]) => ({
+        cursor,
+        hitSize,
+        id,
+        kind: AnnotationHandleKind.Resize,
+        point,
+        radius,
+    }));
+}
+function getPathHandles(points, closed, radius, hitSize) {
+    const handles = points.map((point, geometryIndex) => ({
+        cursor: "move",
+        geometryIndex,
+        hitSize,
+        id: `vertex-${geometryIndex}`,
+        kind: AnnotationHandleKind.Vertex,
+        point,
+        radius,
+    }));
+    const edgeCount = closed ? points.length : Math.max(0, points.length - 1);
+    for (let edgeIndex = 0; edgeIndex < edgeCount; edgeIndex += 1) {
+        const from = points[edgeIndex];
+        const to = points[(edgeIndex + 1) % points.length];
+        handles.push({
+            cursor: "copy",
+            edgeIndex,
+            hitSize,
+            id: `add-${edgeIndex}`,
+            kind: AnnotationHandleKind.AddVertex,
+            point: { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 },
+            radius: ADD_HANDLE_RADIUS / (HANDLE_RADIUS / radius),
+        });
+    }
+    return handles;
+}
+function resizeRect(rect, handle, point) {
+    let left = rect.x - rect.width / 2;
+    let right = rect.x + rect.width / 2;
+    let top = rect.y - rect.height / 2;
+    let bottom = rect.y + rect.height / 2;
+    if (handle.includes("w"))
+        left = Math.min(point.x, right - 5);
+    if (handle.includes("e"))
+        right = Math.max(point.x, left + 5);
+    if (handle.includes("n"))
+        top = Math.min(point.y, bottom - 5);
+    if (handle.includes("s"))
+        bottom = Math.max(point.y, top + 5);
+    return {
+        x: (left + right) / 2,
+        y: (top + bottom) / 2,
+        width: right - left,
+        height: bottom - top,
+    };
+}
+function replacePathPoint(detection, key, index, point) {
+    const geometry = detection[key];
+    const points = [...geometry.points];
+    points[index] = point;
+    return { ...detection, [key]: { points } };
+}
+/** Finds the closest path segment, useful for contextual vertex insertion. */
+function findClosestAnnotationSegment(points, point, closed) {
+    const count = closed ? points.length : points.length - 1;
+    let best;
+    for (let index = 0; index < count; index += 1) {
+        const distance = distanceToSegment(point, points[index], points[(index + 1) % points.length]);
+        if (!best || distance < best.distance)
+            best = { index, distance };
+    }
+    return best;
+}
+
+const MOVE_THRESHOLD = 4;
+const CLICK_CANCEL_MS = 250;
+const CLICK_CANCEL_DIAGONAL = 25;
+const CLOSE_ZONE_SCREEN_PX = 12;
+function createAnnotationEditingEngine(options = {}) {
+    let tool = null;
+    let gesture = null;
+    let state = idleState();
+    const stateListeners = new Set();
+    const fastTranslateListeners = new Set();
+    return {
+        getState: () => state,
+        setCreationTool(nextTool) {
+            if (gesture)
+                cancel();
+            tool = nextTool;
+        },
+        pointerDown(input, pick = null) {
+            if (input.button !== undefined && input.button !== 0)
+                return;
+            if (tool) {
+                beginCreation(input);
+            }
+            else if (pick && !pick.detection.locked && !pick.detection.mask) {
+                beginMove(pick, input);
+            }
+        },
+        pointerMove(input) {
+            if (!gesture)
+                return;
+            switch (gesture.kind) {
+                case "box":
+                    gesture = { ...gesture, current: input };
+                    setPreview(resolveBoxPreview(gesture));
+                    break;
+                case "move": {
+                    const dx = input.point.x - gesture.start.point.x;
+                    const dy = input.point.y - gesture.start.point.y;
+                    const moved = gesture.moved || Math.hypot(dx, dy) >= MOVE_THRESHOLD / scale();
+                    gesture = { ...gesture, current: input, moved };
+                    if (moved) {
+                        const preview = offsetDetection(gesture.detection, dx, dy);
+                        setPreview(preview);
+                        if (gesture.detection.id !== undefined) {
+                            options.onFastTranslate?.(gesture.detection.id, dx, dy);
+                            for (const listener of fastTranslateListeners) {
+                                listener(gesture.detection.id, dx, dy);
+                            }
+                        }
+                    }
+                    break;
+                }
+                case "resize":
+                    gesture = { ...gesture, current: input };
+                    setPreview(applyAnnotationHandleDrag(gesture.detection, gesture.handle, input.point));
+                    break;
+                case "path":
+                    setPreview(resolvePathPreview([...gesture.points, input.point]));
+                    break;
+                case "freehand": {
+                    const previous = gesture.points.at(-1);
+                    if (!previous ||
+                        previous.x !== input.point.x ||
+                        previous.y !== input.point.y) {
+                        gesture.points.push(input.point);
+                    }
+                    gesture = { ...gesture, current: input };
+                    setPreview(resolvePathPreview(gesture.points));
+                    break;
+                }
+            }
+        },
+        pointerUp(input) {
+            if (!gesture)
+                return;
+            if (gesture.kind === "path")
+                return;
+            const active = gesture;
+            gesture = null;
+            release(active.start.pointerId);
+            if (active.kind === "box") {
+                const preview = resolveBoxPreview({ ...active, current: input });
+                const duration = input.timestamp - active.start.timestamp;
+                const diagonal = Math.hypot(input.point.x - active.start.point.x, input.point.y - active.start.point.y) * scale();
+                const rect = preview.rect;
+                if (!rect ||
+                    rect.width < 1 ||
+                    rect.height < 1 ||
+                    (duration < CLICK_CANCEL_MS && diagonal <= CLICK_CANCEL_DIAGONAL)) {
+                    cancel();
+                    return;
+                }
+                if (tool?.shouldCommit?.(rect) === false) {
+                    cancel();
+                    return;
+                }
+                commit(preview, null);
+                return;
+            }
+            if (active.kind === "freehand") {
+                const points = [...active.points, input.point];
+                if (points.length < 2 || tool?.shouldCommit?.(points) === false) {
+                    cancel();
+                    return;
+                }
+                commit(tool.createDetection(points), null);
+                return;
+            }
+            if (active.kind === "move") {
+                if (!active.moved) {
+                    setState(idleState());
+                    return;
+                }
+                const preview = offsetDetection(active.detection, input.point.x - active.start.point.x, input.point.y - active.start.point.y);
+                commit(preview, active.detection);
+                return;
+            }
+            const preview = applyAnnotationHandleDrag(active.detection, active.handle, input.point);
+            commit(preview, active.detection);
+        },
+        keyDown(key) {
+            if (key === "Escape") {
+                cancel();
+            }
+            else if (key === "Enter" && gesture?.kind === "path") {
+                commitPath();
+            }
+        },
+        beginHandleDrag(detection, handle, input) {
+            if (detection.locked || detection.mask)
+                return;
+            capture(input.pointerId);
+            gesture = {
+                current: input,
+                detection,
+                handle,
+                kind: "resize",
+                start: input,
+            };
+            setState({
+                activeDetectionId: detection.id ?? null,
+                activeHandleId: handle.id,
+                kind: AnnotationGestureStateKind.Resizing,
+                pointerId: input.pointerId ?? null,
+                preview: detection,
+            });
+        },
+        deleteVertex(detection, vertexIndex) {
+            const next = deleteAnnotationVertex(detection, vertexIndex);
+            if (next)
+                commit(next, detection);
+            return next;
+        },
+        cancel,
+        hasCreationTool: () => tool !== null,
+        subscribe(listener) {
+            stateListeners.add(listener);
+            return () => stateListeners.delete(listener);
+        },
+        subscribeFastTranslate(listener) {
+            fastTranslateListeners.add(listener);
+            return () => fastTranslateListeners.delete(listener);
+        },
+    };
+    function beginCreation(input) {
+        if (!tool)
+            return;
+        const mode = tool.mode ??
+            (tool.geometry === AnnotationGeometryKind.Box
+                ? "drag"
+                : tool.geometry === AnnotationGeometryKind.Mask
+                    ? "freehand"
+                    : "multiClick");
+        if (mode === "drag") {
+            capture(input.pointerId);
+            gesture = { current: input, kind: "box", start: input };
+            const preview = resolveBoxPreview(gesture);
+            options.onPreview?.(preview);
+            setState({
+                activeDetectionId: null,
+                activeHandleId: null,
+                kind: AnnotationGestureStateKind.Creating,
+                pointerId: input.pointerId ?? null,
+                preview,
+            });
+            return;
+        }
+        if (mode === "freehand") {
+            capture(input.pointerId);
+            gesture = {
+                current: input,
+                kind: "freehand",
+                points: [input.point],
+                start: input,
+            };
+            setPreview(resolvePathPreview([input.point]));
+            return;
+        }
+        if (tool.geometry !== AnnotationGeometryKind.Polygon &&
+            tool.geometry !== AnnotationGeometryKind.Polyline &&
+            tool.geometry !== AnnotationGeometryKind.Keypoints)
+            return;
+        if (gesture?.kind !== "path") {
+            capture(input.pointerId);
+            gesture = {
+                kind: "path",
+                lastTimestamp: input.timestamp,
+                pointerId: input.pointerId ?? null,
+                points: [input.point],
+            };
+            setPreview(resolvePathPreview([input.point, input.point]));
+            return;
+        }
+        const minimum = tool.minVertices ??
+            (tool.geometry === AnnotationGeometryKind.Polygon ? 3 : 2);
+        const closeDistance = Math.hypot(input.point.x - gesture.points[0].x, input.point.y - gesture.points[0].y) * scale();
+        const doubleClick = input.detail !== undefined
+            ? input.detail >= 2
+            : input.timestamp - gesture.lastTimestamp < CLICK_CANCEL_MS;
+        if (gesture.points.length >= minimum &&
+            ((tool.geometry === AnnotationGeometryKind.Polygon &&
+                closeDistance <= CLOSE_ZONE_SCREEN_PX) ||
+                doubleClick)) {
+            commitPath();
+            return;
+        }
+        gesture.points.push(input.point);
+        gesture.lastTimestamp = input.timestamp;
+        setPreview(resolvePathPreview([...gesture.points, input.point]));
+    }
+    function beginMove(pick, input) {
+        capture(input.pointerId);
+        gesture = {
+            current: input,
+            detection: pick.detection,
+            kind: "move",
+            moved: false,
+            start: input,
+        };
+        setState({
+            activeDetectionId: pick.detection.id ?? null,
+            activeHandleId: null,
+            kind: AnnotationGestureStateKind.Moving,
+            pointerId: input.pointerId ?? null,
+            preview: null,
+        });
+    }
+    function resolveBoxPreview(active) {
+        const left = Math.min(active.start.point.x, active.current.point.x);
+        const right = Math.max(active.start.point.x, active.current.point.x);
+        const top = Math.min(active.start.point.y, active.current.point.y);
+        const bottom = Math.max(active.start.point.y, active.current.point.y);
+        const rect = {
+            x: (left + right) / 2,
+            y: (top + bottom) / 2,
+            width: right - left,
+            height: bottom - top,
+        };
+        return tool.createDetection(rect);
+    }
+    function resolvePathPreview(points) {
+        return tool.createDetection(points);
+    }
+    function commitPath() {
+        if (!tool || gesture?.kind !== "path")
+            return;
+        const minimum = tool.minVertices ??
+            (tool.geometry === AnnotationGeometryKind.Polygon ? 3 : 2);
+        if (gesture.points.length < minimum) {
+            cancel();
+            return;
+        }
+        const preview = tool.createDetection(gesture.points);
+        if (tool.shouldCommit?.(gesture.points) === false) {
+            cancel();
+            return;
+        }
+        release(gesture.pointerId ?? undefined);
+        gesture = null;
+        commit(preview, null);
+    }
+    function commit(detection, previous) {
+        options.onCommit?.(detection, previous);
+        options.onPreview?.(null);
+        setState(idleState());
+    }
+    function setPreview(preview) {
+        options.onPreview?.(preview);
+        setState({
+            activeDetectionId: state.activeDetectionId,
+            activeHandleId: state.activeHandleId,
+            kind: state.kind === AnnotationGestureStateKind.Idle
+                ? AnnotationGestureStateKind.Creating
+                : state.kind,
+            pointerId: state.pointerId ??
+                (gesture && "pointerId" in gesture
+                    ? (gesture.pointerId ?? null)
+                    : null),
+            preview,
+        });
+    }
+    function cancel() {
+        const pointerId = gesture && "start" in gesture
+            ? gesture.start.pointerId
+            : gesture?.kind === "path"
+                ? (gesture.pointerId ?? undefined)
+                : undefined;
+        release(pointerId);
+        gesture = null;
+        options.onPreview?.(null);
+        options.onCancel?.();
+        setState(idleState());
+    }
+    function setState(next) {
+        state = Object.freeze(next);
+        options.onStateChange?.(state);
+        for (const listener of stateListeners)
+            listener(state);
+    }
+    function scale() {
+        return Math.max(options.viewportScale?.() ?? 1, Number.EPSILON);
+    }
+    function capture(pointerId) {
+        if (pointerId !== undefined)
+            options.capturePointer?.(pointerId);
+    }
+    function release(pointerId) {
+        if (pointerId !== undefined)
+            options.releasePointer?.(pointerId);
+    }
+}
+function idleState() {
+    return Object.freeze({
+        activeDetectionId: null,
+        activeHandleId: null,
+        kind: AnnotationGestureStateKind.Idle,
+        pointerId: null,
+        preview: null,
+    });
+}
+
+function resolveStyleValue(value, detection, context) {
+    return typeof value === "function"
+        ? value(detection, context)
+        : value;
+}
+
+var BoxShape;
+(function (BoxShape) {
+    BoxShape["Rect"] = "rect";
+    BoxShape["RoundedRect"] = "roundedRect";
+})(BoxShape || (BoxShape = {}));
+var BoxStrokeAlignment;
+(function (BoxStrokeAlignment) {
+    BoxStrokeAlignment["Inside"] = "inside";
+    BoxStrokeAlignment["Center"] = "center";
+    BoxStrokeAlignment["Outside"] = "outside";
+})(BoxStrokeAlignment || (BoxStrokeAlignment = {}));
+
+const DEFAULT_BOX_STROKE_ALPHA = 1;
+const DEFAULT_BOX_STROKE_COLOR = 0x00ff66;
+const DEFAULT_BOX_STROKE_WIDTH = 2;
+/**
+ * Default configurable box style.
+ *
+ * This is the simplest `supervision-js` equivalent of a box annotator: it
+ * converts detections with `rect` geometry into renderer-neutral box draw
+ * instructions. Use options such as `shape`, `cornerRadius`, `stroke`, and
+ * `fill` for static or per-detection styling.
+ */
+class BaseBoxStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        if (!detection.rect ||
+            context.hidden ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const shape = this.resolveShape(detection, context);
+        const cornerRadius = this.resolveCornerRadius(detection, context, shape);
+        const instruction = {
+            fill: this.resolveFill(detection, context),
+            rect: detection.rect,
+            shape,
+            stroke: this.resolveStroke(detection, context),
+        };
+        if (cornerRadius !== undefined) {
+            return {
+                ...instruction,
+                cornerRadius,
+            };
+        }
+        return instruction;
+    }
+    resolveShape(detection, context) {
+        return (resolveStyleValue(this.options.shape, detection, context) ?? BoxShape.Rect);
+    }
+    resolveCornerRadius(detection, context, shape) {
+        if (shape !== BoxShape.RoundedRect) {
+            return undefined;
+        }
+        return resolveStyleValue(this.options.cornerRadius, detection, context);
+    }
+    resolveStroke(detection, context) {
+        const stroke = resolveStyleValue(this.options.stroke, detection, context);
+        if (stroke === null) {
+            return undefined;
+        }
+        const resolvedStroke = {
+            alpha: stroke?.alpha ?? DEFAULT_BOX_STROKE_ALPHA,
+            color: stroke?.color ?? DEFAULT_BOX_STROKE_COLOR,
+            width: stroke?.width ?? DEFAULT_BOX_STROKE_WIDTH,
+        };
+        return {
+            ...resolvedStroke,
+            ...(stroke?.alignment === undefined
+                ? {}
+                : { alignment: stroke.alignment }),
+            ...(stroke?.dash === undefined
+                ? context.ephemeral
+                    ? { dash: [6, 4] }
+                    : {}
+                : { dash: stroke.dash }),
+        };
+    }
+    resolveFill(detection, context) {
+        const fill = resolveStyleValue(this.options.fill, detection, context);
+        if (fill === null || fill === undefined) {
+            return undefined;
+        }
+        return {
+            alpha: fill.alpha ?? 1,
+            color: fill.color ?? DEFAULT_BOX_STROKE_COLOR,
+        };
+    }
+}
+
+var FocusTargetMode;
+(function (FocusTargetMode) {
+    FocusTargetMode["Hovered"] = "hovered";
+    FocusTargetMode["Selected"] = "selected";
+    FocusTargetMode["HoveredAndSelected"] = "hoveredAndSelected";
+    FocusTargetMode["Ambient"] = "ambient";
+})(FocusTargetMode || (FocusTargetMode = {}));
+
+const DEFAULT_FOCUS_FILL_COLOR = 0x020617;
+const DEFAULT_FOCUS_FILL_ALPHA = 0.45;
+const DEFAULT_FOCUS_CORNER_RADIUS = 8;
+/**
+ * Default configurable focus style.
+ *
+ * Focus styles dim the current media frame while leaving the selected or
+ * hovered detections visible. Renderers may use prepared mask artifacts for
+ * shape-accurate cutouts, falling back to detection rectangles when needed.
+ */
+class BaseFocusStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(context) {
+        if (this.options.shouldRender?.(context) === false) {
+            return undefined;
+        }
+        const targetMode = this.options.targetMode ?? FocusTargetMode.Selected;
+        const targets = getFocusTargets(context, targetMode);
+        const ambient = targetMode === FocusTargetMode.Ambient &&
+            !context.selectedPick &&
+            !context.hoveredPick;
+        const fill = resolveFocusStyleValue(this.options.fill, context);
+        if (targets.length === 0 || fill === null) {
+            return undefined;
+        }
+        return {
+            fallback: this.resolveFallback(context),
+            fill: {
+                alpha: fill?.alpha ?? DEFAULT_FOCUS_FILL_ALPHA,
+                color: fill?.color ?? DEFAULT_FOCUS_FILL_COLOR,
+            },
+            targetMode,
+            targets,
+            ...(ambient ? { ambient: true } : {}),
+        };
+    }
+    resolveFallback(context) {
+        const shape = resolveFocusStyleValue(this.options.shape, context) ??
+            BoxShape.RoundedRect;
+        const cornerRadius = shape === BoxShape.RoundedRect
+            ? (resolveFocusStyleValue(this.options.cornerRadius, context) ??
+                DEFAULT_FOCUS_CORNER_RADIUS)
+            : undefined;
+        if (cornerRadius === undefined) {
+            return { shape };
+        }
+        return {
+            cornerRadius,
+            shape,
+        };
+    }
+}
+function getFocusTargets(context, targetMode) {
+    const targets = [];
+    if (targetMode === FocusTargetMode.Ambient) {
+        if (context.selectedPick)
+            return [context.selectedPick];
+        if (context.hoveredPick)
+            return [context.hoveredPick];
+        return context.frame.detections.map((detection, detectionIndex) => ({
+            detection,
+            detectionIndex,
+            frame: context.frame,
+            mediaTime: context.mediaTime,
+            point: detection.rect
+                ? { x: detection.rect.x, y: detection.rect.y }
+                : { x: 0, y: 0 },
+            target: detection.mask
+                ? DetectionPickTarget.Mask
+                : detection.polygon
+                    ? DetectionPickTarget.Polygon
+                    : DetectionPickTarget.Box,
+        }));
+    }
+    if ((targetMode === FocusTargetMode.Selected ||
+        targetMode === FocusTargetMode.HoveredAndSelected) &&
+        context.selectedPick) {
+        targets.push(context.selectedPick);
+    }
+    if ((targetMode === FocusTargetMode.Hovered ||
+        targetMode === FocusTargetMode.HoveredAndSelected) &&
+        context.hoveredPick) {
+        targets.push(context.hoveredPick);
+    }
+    return dedupeTargetsForFrame(targets, context.frame);
+}
+function dedupeTargetsForFrame(targets, frame) {
+    const keys = new Set();
+    const dedupedTargets = [];
+    for (const target of targets) {
+        if (target.frame !== frame) {
+            continue;
+        }
+        const key = `${target.detectionIndex}:${target.target}`;
+        if (keys.has(key)) {
+            continue;
+        }
+        keys.add(key);
+        dedupedTargets.push(target);
+    }
+    return dedupedTargets;
+}
+function resolveFocusStyleValue(value, context) {
+    if (typeof value === "function") {
+        return value(context);
+    }
+    return value;
+}
+
+var DetectionInteractionState;
+(function (DetectionInteractionState) {
+    DetectionInteractionState["Hovered"] = "hovered";
+    DetectionInteractionState["Selected"] = "selected";
+})(DetectionInteractionState || (DetectionInteractionState = {}));
+
+const DEFAULT_HOVER_FILL_COLOR = 0x67e8f9;
+const DEFAULT_HOVER_FILL_ALPHA = 0.1;
+const DEFAULT_HOVER_STROKE_COLOR = 0x67e8f9;
+const DEFAULT_HOVER_STROKE_ALPHA = 0.95;
+const DEFAULT_HOVER_STROKE_WIDTH = 3;
+const DEFAULT_SELECTED_FILL_COLOR = 0xfde047;
+const DEFAULT_SELECTED_FILL_ALPHA = 0.18;
+const DEFAULT_SELECTED_STROKE_COLOR = 0xfde047;
+const DEFAULT_SELECTED_STROKE_ALPHA = 1;
+const DEFAULT_SELECTED_STROKE_WIDTH = 4;
+/**
+ * Default configurable interaction style.
+ *
+ * It resolves hover and selected picks into state-specific presentations using
+ * the same style contracts as normal boxes, masks, and labels. The older
+ * rectangle options are kept as compatibility sugar and resolve to a box style.
+ */
+class BaseInteractionStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        if (this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const statePresentation = context.state === DetectionInteractionState.Selected
+            ? this.options.selected
+            : this.options.hovered;
+        if (statePresentation !== undefined) {
+            return statePresentation ?? undefined;
+        }
+        const rect = detection.rect;
+        if (!rect) {
+            return undefined;
+        }
+        return {
+            boxStyle: createResolvedBoxStyle(this.resolveBoxInstruction(detection, context, rect)),
+        };
+    }
+    resolveBoxInstruction(detection, context, rect) {
+        const shape = this.resolveShape(detection, context);
+        const cornerRadius = this.resolveCornerRadius(detection, context, shape);
+        const instruction = {
+            fill: this.resolveFill(detection, context),
+            rect,
+            shape,
+            stroke: this.resolveStroke(detection, context),
+        };
+        if (cornerRadius !== undefined) {
+            return {
+                ...instruction,
+                cornerRadius,
+            };
+        }
+        return instruction;
+    }
+    resolveShape(detection, context) {
+        return (resolveStyleValue(this.options.shape, detection, context) ?? BoxShape.Rect);
+    }
+    resolveCornerRadius(detection, context, shape) {
+        if (shape !== BoxShape.RoundedRect) {
+            return undefined;
+        }
+        return resolveStyleValue(this.options.cornerRadius, detection, context);
+    }
+    resolveStroke(detection, context) {
+        const stroke = resolveStyleValue(this.options.stroke, detection, context);
+        if (stroke === null) {
+            return undefined;
+        }
+        const defaults = getStateDefaults(context.state);
+        const resolvedStroke = {
+            alpha: stroke?.alpha ?? defaults.strokeAlpha,
+            color: stroke?.color ?? defaults.strokeColor,
+            width: stroke?.width ?? defaults.strokeWidth,
+        };
+        if (stroke?.alignment !== undefined) {
+            return {
+                ...resolvedStroke,
+                alignment: stroke.alignment,
+            };
+        }
+        return resolvedStroke;
+    }
+    resolveFill(detection, context) {
+        const fill = resolveStyleValue(this.options.fill, detection, context);
+        if (fill === null) {
+            return undefined;
+        }
+        const defaults = getStateDefaults(context.state);
+        return {
+            alpha: fill?.alpha ?? defaults.fillAlpha,
+            color: fill?.color ?? defaults.fillColor,
+        };
+    }
+}
+function createResolvedBoxStyle(instruction) {
+    return {
+        resolve() {
+            return instruction;
+        },
+    };
+}
+function getStateDefaults(state) {
+    if (state === DetectionInteractionState.Selected) {
+        return {
+            fillAlpha: DEFAULT_SELECTED_FILL_ALPHA,
+            fillColor: DEFAULT_SELECTED_FILL_COLOR,
+            strokeAlpha: DEFAULT_SELECTED_STROKE_ALPHA,
+            strokeColor: DEFAULT_SELECTED_STROKE_COLOR,
+            strokeWidth: DEFAULT_SELECTED_STROKE_WIDTH,
+        };
+    }
+    return {
+        fillAlpha: DEFAULT_HOVER_FILL_ALPHA,
+        fillColor: DEFAULT_HOVER_FILL_COLOR,
+        strokeAlpha: DEFAULT_HOVER_STROKE_ALPHA,
+        strokeColor: DEFAULT_HOVER_STROKE_COLOR,
+        strokeWidth: DEFAULT_HOVER_STROKE_WIDTH,
+    };
+}
+
+var LabelPlacement;
+(function (LabelPlacement) {
+    LabelPlacement["Top"] = "top";
+    LabelPlacement["Bottom"] = "bottom";
+    LabelPlacement["InsideTop"] = "insideTop";
+    LabelPlacement["InsideBottom"] = "insideBottom";
+    LabelPlacement["Center"] = "center";
+})(LabelPlacement || (LabelPlacement = {}));
+var LabelVisibilityMode;
+(function (LabelVisibilityMode) {
+    LabelVisibilityMode["Always"] = "always";
+    LabelVisibilityMode["HoveredOnly"] = "hoveredOnly";
+})(LabelVisibilityMode || (LabelVisibilityMode = {}));
+
+/** Returns black or white for readable text over an RGB background. */
+function resolveContrastTextColor(color) {
+    "worklet";
+    const red = (color >> 16) & 0xff;
+    const green = (color >> 8) & 0xff;
+    const blue = color & 0xff;
+    const luminance = (red * 299 + green * 587 + blue * 114) / 1000;
+    return luminance >= 150 ? 0x111111 : 0xffffff;
+}
+function lightenColor(color, amount = 0.14) {
+    "worklet";
+    const mix = (value) => Math.round(value + (255 - value) * amount);
+    return ((mix((color >> 16) & 0xff) << 16) |
+        (mix((color >> 8) & 0xff) << 8) |
+        mix(color & 0xff));
+}
+
+/**
+ * Default label style.
+ *
+ * Resolves labels from `className`, `metadata.label`, or a custom text
+ * resolver, optionally including confidence.
+ */
+class BaseLabelStyle {
+    includeConfidence;
+    offsetY;
+    options;
+    constructor(options = {}) {
+        this.options = options;
+        this.includeConfidence = options.includeConfidence ?? false;
+        this.offsetY = options.offsetY ?? 0;
+    }
+    resolve(detection, context) {
+        if (!getDetectionRect(detection) ||
+            context.hidden ||
+            (this.options.visibilityMode === LabelVisibilityMode.HoveredOnly &&
+                !context.hovered) ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const text = resolveStyleValue(this.options.text, detection, context) ??
+            formatDetectionLabel(detection, this.includeConfidence);
+        if (!text) {
+            return undefined;
+        }
+        const background = this.resolveBackground(detection, context);
+        return {
+            background,
+            ...this.resolveOffset(detection, context),
+            placement: this.resolvePlacement(detection, context),
+            rect: getDetectionRect(detection),
+            text,
+            textStyle: this.resolveTextStyle(detection, context, background),
+        };
+    }
+    resolveBackground(detection, context) {
+        const background = resolveStyleValue(this.options.background, detection, context);
+        return {
+            alpha: background?.alpha ?? 0.72,
+            color: context.hovered
+                ? lightenColor(background?.color ?? 0x111827)
+                : (background?.color ?? 0x111827),
+            cornerRadius: background?.cornerRadius ?? 4,
+            paddingX: background?.paddingX ?? 6,
+            paddingY: background?.paddingY ?? 3,
+            ...(background?.topCornersOnly === undefined
+                ? {}
+                : { topCornersOnly: background.topCornersOnly }),
+        };
+    }
+    resolveTextStyle(detection, context, background) {
+        const textStyle = resolveStyleValue(this.options.textStyle, detection, context);
+        return {
+            alpha: textStyle?.alpha ?? 1,
+            color: textStyle?.color ?? resolveContrastTextColor(background.color),
+            fontFamily: textStyle?.fontFamily ?? "Inter, sans-serif",
+            fontSize: textStyle?.fontSize ?? 13,
+            fontWeight: textStyle?.fontWeight ?? "600",
+        };
+    }
+    resolveOffset(detection, context) {
+        const offset = resolveStyleValue(this.options.offset, detection, context);
+        if (offset === null) {
+            return {};
+        }
+        return {
+            ...(offset?.x === undefined ? {} : { offsetX: offset.x }),
+            offsetY: offset?.y ?? this.offsetY,
+        };
+    }
+    resolvePlacement(detection, context) {
+        return (resolveStyleValue(this.options.placement, detection, context) ??
+            LabelPlacement.Top);
+    }
+}
+function formatDetectionLabel(detection, includeConfidence) {
+    const label = detection.className ??
+        (typeof detection.metadata?.label === "string"
+            ? detection.metadata.label
+            : undefined);
+    if (!label) {
+        return undefined;
+    }
+    if (!includeConfidence || detection.confidence === undefined) {
+        return label;
+    }
+    return `${label} ${Math.round(detection.confidence * 100)}%`;
+}
+
+var MaskRenderMode;
+(function (MaskRenderMode) {
+    MaskRenderMode["FillAndStroke"] = "fillAndStroke";
+    MaskRenderMode["FillOnly"] = "fillOnly";
+    MaskRenderMode["StrokeOnly"] = "strokeOnly";
+})(MaskRenderMode || (MaskRenderMode = {}));
+
+/**
+ * Default compressed-RLE mask style.
+ *
+ * Static color/stroke options can reuse prepared mask artifacts by key. Dynamic
+ * color or stroke resolvers intentionally do not expose an artifact key, so new
+ * style objects rebuild prepared palettes instead of reusing stale ones.
+ */
+class BaseMaskStyle {
+    artifactKey;
+    opacity;
+    options;
+    constructor(options = {}) {
+        this.options = options;
+        this.opacity = clampOpacity(options.opacity ?? options.alpha ?? 0.35);
+        this.artifactKey = createArtifactKey(options);
+    }
+    resolve(detection, context) {
+        if (!detection.mask ||
+            context.hidden ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const color = resolveStyleValue(this.options.color, detection, context) ??
+            DEFAULT_MASK_COLOR;
+        const mode = resolveStyleValue(this.options.mode, detection, context) ??
+            MaskRenderMode.FillAndStroke;
+        const stroke = resolveStroke(resolveStyleValue(this.options.stroke, detection, context), color, mode);
+        return {
+            alpha: mode === MaskRenderMode.StrokeOnly
+                ? 0
+                : clampOpacity(resolveStyleValue(this.options.fillAlpha, detection, context) ??
+                    1),
+            color,
+            mask: detection.mask,
+            stroke: mode === MaskRenderMode.FillOnly ? undefined : stroke,
+        };
+    }
+}
+const DEFAULT_MASK_COLOR = 0x00ff66;
+const DEFAULT_MASK_STROKE_ALPHA = 1;
+const DEFAULT_MASK_STROKE_WIDTH = 1;
+function clampOpacity(opacity) {
+    return Number.isFinite(opacity) ? Math.max(0, Math.min(opacity, 1)) : 1;
+}
+function serializeStroke(stroke) {
+    if (!stroke) {
+        return "none";
+    }
+    return `${stroke.color}:${stroke.alpha}:${stroke.width}`;
+}
+function normalizeStroke(stroke, fallbackColor) {
+    if (!stroke) {
+        return undefined;
+    }
+    return {
+        alpha: stroke.alpha ?? DEFAULT_MASK_STROKE_ALPHA,
+        color: stroke.color ?? fallbackColor,
+        width: stroke.width ?? DEFAULT_MASK_STROKE_WIDTH,
+    };
+}
+function resolveStroke(stroke, fallbackColor, mode) {
+    if (mode === MaskRenderMode.FillOnly) {
+        return undefined;
+    }
+    if (mode === MaskRenderMode.StrokeOnly && stroke === undefined) {
+        return normalizeStroke({}, fallbackColor);
+    }
+    return normalizeStroke(stroke, fallbackColor);
+}
+function createArtifactKey(options) {
+    if (typeof options.color === "function" ||
+        typeof options.fillAlpha === "function" ||
+        typeof options.mode === "function" ||
+        typeof options.stroke === "function") {
+        return undefined;
+    }
+    const color = options.color ?? DEFAULT_MASK_COLOR;
+    const fillAlpha = options.fillAlpha ?? 1;
+    const mode = options.mode ?? MaskRenderMode.FillAndStroke;
+    return `base:${color}:${fillAlpha}:${mode}:${serializeStroke(resolveStroke(options.stroke, color, mode))}`;
+}
+
+class BasePolygonStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        if (!detection.polygon ||
+            context.hidden ||
+            detection.polygon.points.length < 3 ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const fill = resolveStyleValue(this.options.fill, detection, context);
+        const stroke = resolveStyleValue(this.options.stroke, detection, context);
+        return {
+            points: detection.polygon.points,
+            ...(fill === null
+                ? {}
+                : {
+                    fill: {
+                        alpha: fill?.alpha ?? 0.16,
+                        color: fill?.color ?? 0x00ff66,
+                    },
+                }),
+            ...(stroke === null
+                ? {}
+                : {
+                    stroke: {
+                        alpha: stroke?.alpha ?? 1,
+                        color: stroke?.color ?? 0x00ff66,
+                        width: stroke?.width ?? 2,
+                        ...(stroke?.alignment === undefined
+                            ? {}
+                            : { alignment: stroke.alignment }),
+                        ...(stroke?.dash === undefined ? {} : { dash: stroke.dash }),
+                    },
+                }),
+        };
+    }
+}
+
+class BasePolylineStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        if (!detection.polyline ||
+            context.hidden ||
+            detection.polyline.points.length < 2 ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const stroke = resolveStyleValue(this.options.stroke, detection, context);
+        if (stroke === null) {
+            return undefined;
+        }
+        return {
+            points: detection.polyline.points,
+            stroke: {
+                alpha: stroke?.alpha ?? 1,
+                color: stroke?.color ?? 0x00ff66,
+                width: stroke?.width ?? 2,
+                ...(stroke?.alignment === undefined
+                    ? {}
+                    : { alignment: stroke.alignment }),
+                ...(stroke?.dash === undefined ? {} : { dash: stroke.dash }),
+            },
+        };
+    }
+}
+
+var KeypointMarkerShape;
+(function (KeypointMarkerShape) {
+    KeypointMarkerShape["Circle"] = "circle";
+    KeypointMarkerShape["Cross"] = "cross";
+})(KeypointMarkerShape || (KeypointMarkerShape = {}));
+
+class BaseKeypointStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        const geometry = detection.keypoints;
+        if (!geometry ||
+            context.hidden ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const definition = detection.className
+            ? this.options.definitions?.[detection.className]
+            : undefined;
+        const markerFill = resolveStyleValue(this.options.markerFill, detection, context);
+        const markerStroke = resolveStyleValue(this.options.markerStroke, detection, context);
+        const edgeStroke = resolveStyleValue(this.options.edgeStroke, detection, context);
+        const shadowStroke = resolveStyleValue(this.options.edgeShadowStroke, detection, context);
+        const radius = resolveStyleValue(this.options.radius, detection, context) ?? 6;
+        const edges = geometry.edges.map(([fromIndex, toIndex], edgeIndex) => ({
+            from: geometry.points[fromIndex],
+            to: geometry.points[toIndex],
+            stroke: {
+                alpha: edgeStroke?.alpha ?? 1,
+                color: definition?.edges[edgeIndex]?.color ?? edgeStroke?.color ?? 0x00ff66,
+                width: edgeStroke?.width ?? 2,
+            },
+            ...(shadowStroke === null
+                ? {}
+                : {
+                    shadowStroke: {
+                        alpha: shadowStroke?.alpha ?? 0.65,
+                        color: shadowStroke?.color ?? 0x000000,
+                        width: shadowStroke?.width ?? 4,
+                    },
+                }),
+        }));
+        const markers = geometry.points.flatMap((point, index) => {
+            const visibility = geometry.visibility?.[index] ?? KeypointVisibility.Visible;
+            if (visibility === KeypointVisibility.NotLabeled) {
+                return [];
+            }
+            return [
+                {
+                    fill: {
+                        alpha: markerFill?.alpha ?? 1,
+                        color: definition?.vertices[index]?.color ??
+                            markerFill?.color ??
+                            0x00ff66,
+                    },
+                    index,
+                    point,
+                    radius,
+                    shape: visibility === KeypointVisibility.Occluded
+                        ? KeypointMarkerShape.Cross
+                        : KeypointMarkerShape.Circle,
+                    stroke: {
+                        alpha: markerStroke?.alpha ?? 1,
+                        color: markerStroke?.color ?? 0xffffff,
+                        width: markerStroke?.width ?? 2,
+                    },
+                },
+            ];
+        });
+        return { edges, markers };
+    }
+}
+
+const SUPERVISION_ROBOFLOW_COLOR = 0xa351fb;
+const DEFAULT_DETECTION_COLOR_SEQUENCE = [
+    createClassColorStyle(0x38bdf8, 0x164e63, 0xecfeff, 0x7dd3fc),
+    createClassColorStyle(0x22c55e, 0x14532d, 0xf0fdf4, 0x86efac),
+    createClassColorStyle(0xa78bfa, 0x4c1d95, 0xf5f3ff, 0xc4b5fd),
+    createClassColorStyle(0xfacc15, 0x713f12, 0xfffbeb, 0xfde047),
+    createClassColorStyle(0xf97316, 0x7c2d12, 0xfff7ed, 0xffa23a),
+    createClassColorStyle(0xf472b6, 0x831843, 0xfdf2f8, 0xf9a8d4),
+    createClassColorStyle(0x60a5fa, 0x1e3a8a, 0xeff6ff, 0x93c5fd),
+    createClassColorStyle(0xfb7185, 0x881337, 0xfff1f2, 0xfda4af),
+    createClassColorStyle(0x34d399, 0x064e3b, 0xecfdf5, 0x6ee7b7),
+    createClassColorStyle(0xe879f9, 0x701a75, 0xfdf4ff, 0xf0abfc),
+];
+const DEFAULT_DETECTION_CLASS_STYLES = {
+    basketball: DEFAULT_DETECTION_COLOR_SEQUENCE[4],
+    bed: DEFAULT_DETECTION_COLOR_SEQUENCE[5],
+    bottle: DEFAULT_DETECTION_COLOR_SEQUENCE[4],
+    "cell phone": DEFAULT_DETECTION_COLOR_SEQUENCE[8],
+    cow: DEFAULT_DETECTION_COLOR_SEQUENCE[2],
+    cup: DEFAULT_DETECTION_COLOR_SEQUENCE[3],
+    horse: DEFAULT_DETECTION_COLOR_SEQUENCE[0],
+    keyboard: DEFAULT_DETECTION_COLOR_SEQUENCE[1],
+    knife: DEFAULT_DETECTION_COLOR_SEQUENCE[7],
+    laptop: DEFAULT_DETECTION_COLOR_SEQUENCE[6],
+    person: DEFAULT_DETECTION_COLOR_SEQUENCE[1],
+    "potted plant": DEFAULT_DETECTION_COLOR_SEQUENCE[8],
+    "sports ball": DEFAULT_DETECTION_COLOR_SEQUENCE[4],
+    tv: DEFAULT_DETECTION_COLOR_SEQUENCE[2],
+    "white team player": createClassColorStyle(0xf8fafc, 0x334155, 0xffffff, 0xffffff),
+    "yellow team player": DEFAULT_DETECTION_COLOR_SEQUENCE[3],
+};
+// The "worklet" directives below are inert everywhere except React Native:
+// browsers and Node see a no-op string, while React Native's worklets Babel
+// plugin makes these functions callable inside frame worklets, so every
+// platform resolves detection colors through this one implementation.
+// Worklet constraint on ordering: the plugin turns marked declarations into
+// non-hoisted assignments that capture each other at module-init time, so
+// helpers must be defined before the functions that call them.
+function normalizeDetectionClassName(className) {
+    "worklet";
+    return (className ?? "")
+        .trim()
+        .toLowerCase()
+        .replace(/[_-]/g, " ")
+        .replace(/\s+/g, " ");
+}
+function hashClassName(className) {
+    "worklet";
+    let hash = 0;
+    for (let index = 0; index < className.length; index += 1) {
+        hash = (hash * 31 + className.charCodeAt(index)) >>> 0;
+    }
+    return hash;
+}
+function resolveDetectionClassColorStyle(className) {
+    "worklet";
+    const normalizedClassName = normalizeDetectionClassName(className);
+    const knownStyle = DEFAULT_DETECTION_CLASS_STYLES[normalizedClassName];
+    if (knownStyle) {
+        return knownStyle;
+    }
+    return DEFAULT_DETECTION_COLOR_SEQUENCE[hashClassName(normalizedClassName) % DEFAULT_DETECTION_COLOR_SEQUENCE.length];
+}
+function createClassColorStyle(fill, labelBackground, labelText, stroke) {
+    return {
+        fill,
+        labelBackground,
+        labelText,
+        stroke,
+    };
+}
+
+const DEFAULT_BOX_CORNER_RADIUS = 1;
+const DEFAULT_OUTLINE_WIDTH = 2;
+const DEFAULT_FILL_ALPHA = 0.08;
+const DEFAULT_MASK_FILL_ALPHA = 0.45;
+const DEFAULT_KEYPOINT_EDGE_WIDTH = 1.5;
+const DEFAULT_KEYPOINT_SHADOW_WIDTH = 3;
+const DEFAULT_KEYPOINT_SHADOW_ALPHA = 0.25;
+const DEFAULT_KEYPOINT_RADIUS = 3.5;
+const DEFAULT_LABEL_CORNER_RADIUS = 4;
+const DEFAULT_LABEL_PADDING_X = 6;
+const DEFAULT_LABEL_PADDING_Y = 3;
+const DEFAULT_LABEL_FONT_SIZE = 12;
+const DEFAULT_LABEL_FONT_FAMILY = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+/**
+ * Builds the canonical, unselected annotation presentation used by Roboflow's
+ * Core annotation editor. It deliberately excludes host-specific interaction,
+ * editing, focus, and theme behaviour so consumers can compose those layers.
+ */
+function createDefaultAnnotationPresentation(options = {}) {
+    const getClassColor = (detection) => resolveDefaultClassColor(detection, options.getClassColor);
+    const shouldRenderBox = (detection) => !(detection.mask ||
+        detection.polygon ||
+        detection.polyline ||
+        detection.keypoints);
+    return {
+        boxStyle: new BaseBoxStyle({
+            cornerRadius: DEFAULT_BOX_CORNER_RADIUS,
+            fill: (detection) => ({
+                alpha: DEFAULT_FILL_ALPHA,
+                color: getClassColor(detection),
+            }),
+            shape: BoxShape.RoundedRect,
+            shouldRender: shouldRenderBox,
+            stroke: (detection) => ({
+                alpha: 1,
+                color: getClassColor(detection),
+                width: DEFAULT_OUTLINE_WIDTH,
+            }),
+        }),
+        keypointStyle: new BaseKeypointStyle({
+            ...(options.skeletonDefinitions === undefined
+                ? {}
+                : { definitions: options.skeletonDefinitions }),
+            edgeShadowStroke: {
+                alpha: DEFAULT_KEYPOINT_SHADOW_ALPHA,
+                color: 0x000000,
+                width: DEFAULT_KEYPOINT_SHADOW_WIDTH,
+            },
+            edgeStroke: (detection) => ({
+                alpha: 1,
+                color: getClassColor(detection),
+                width: DEFAULT_KEYPOINT_EDGE_WIDTH,
+            }),
+            markerFill: (detection) => ({
+                alpha: 1,
+                color: getClassColor(detection),
+            }),
+            markerStroke: { alpha: 1, color: 0xffffff, width: 1 },
+            radius: DEFAULT_KEYPOINT_RADIUS,
+        }),
+        labelStyle: new BaseLabelStyle({
+            background: (detection) => ({
+                alpha: 1,
+                color: getClassColor(detection),
+                cornerRadius: DEFAULT_LABEL_CORNER_RADIUS,
+                paddingX: DEFAULT_LABEL_PADDING_X,
+                paddingY: DEFAULT_LABEL_PADDING_Y,
+                topCornersOnly: true,
+            }),
+            includeConfidence: options.includeConfidence,
+            placement: LabelPlacement.Top,
+            textStyle: {
+                fontFamily: DEFAULT_LABEL_FONT_FAMILY,
+                fontSize: DEFAULT_LABEL_FONT_SIZE,
+                fontWeight: "600",
+            },
+        }),
+        maskStyle: new BaseMaskStyle({
+            color: (detection) => getClassColor(detection),
+            fillAlpha: DEFAULT_MASK_FILL_ALPHA,
+            mode: MaskRenderMode.FillAndStroke,
+            opacity: 1,
+            stroke: (detection) => ({
+                alpha: 1,
+                color: getClassColor(detection),
+                width: DEFAULT_OUTLINE_WIDTH,
+            }),
+        }),
+        polygonStyle: new BasePolygonStyle({
+            fill: (detection) => ({
+                alpha: DEFAULT_FILL_ALPHA,
+                color: getClassColor(detection),
+            }),
+            stroke: (detection) => ({
+                alpha: 1,
+                color: getClassColor(detection),
+                width: DEFAULT_OUTLINE_WIDTH,
+            }),
+        }),
+        polylineStyle: new BasePolylineStyle({
+            stroke: (detection) => ({
+                alpha: 1,
+                color: getClassColor(detection),
+                width: DEFAULT_OUTLINE_WIDTH,
+            }),
+        }),
+    };
+}
+function resolveDefaultClassColor(detection, getClassColor) {
+    const color = getClassColor?.(detection.className);
+    return typeof color === "number" && Number.isFinite(color)
+        ? color
+        : resolveDetectionClassColorStyle(detection.className).fill;
+}
+
+function createSourceAwarePresentation(globalPresentation = {}, sources) {
+    if (!sources.some((source) => source.presentation !== undefined)) {
+        return globalPresentation;
+    }
+    const sourcePresentations = new Map(sources.map((source) => [source.id, source.presentation]));
+    return {
+        ...globalPresentation,
+        boxStyle: hasSourceStyle(sources, "boxStyle")
+            ? new SourceAwareBoxStyle(normalizeGlobalBoxStyle(globalPresentation.boxStyle), sourcePresentations)
+            : globalPresentation.boxStyle,
+        labelStyle: hasSourceStyle(sources, "labelStyle")
+            ? new SourceAwareLabelStyle(normalizeGlobalLabelStyle(globalPresentation.labelStyle), sourcePresentations)
+            : globalPresentation.labelStyle,
+        maskStyle: hasSourceStyle(sources, "maskStyle")
+            ? new SourceAwareMaskStyle(normalizeGlobalMaskStyle(globalPresentation.maskStyle), sourcePresentations)
+            : globalPresentation.maskStyle,
+        polygonStyle: hasSourceStyle(sources, "polygonStyle")
+            ? new SourceAwarePolygonStyle(normalizeGlobalPolygonStyle(globalPresentation.polygonStyle), sourcePresentations)
+            : globalPresentation.polygonStyle,
+        polylineStyle: hasSourceStyle(sources, "polylineStyle")
+            ? new SourceAwarePolylineStyle(normalizeGlobalPolylineStyle(globalPresentation.polylineStyle), sourcePresentations)
+            : globalPresentation.polylineStyle,
+        keypointStyle: hasSourceStyle(sources, "keypointStyle")
+            ? new SourceAwareKeypointStyle(normalizeGlobalKeypointStyle(globalPresentation.keypointStyle), sourcePresentations)
+            : globalPresentation.keypointStyle,
+    };
+}
+class SourceAwareBoxStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "boxStyle");
+        return style?.resolve(detection, context);
+    }
+}
+class SourceAwareLabelStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "labelStyle");
+        return style?.resolve(detection, context);
+    }
+}
+class SourceAwareMaskStyle {
+    globalStyle;
+    sourcePresentations;
+    artifactKey = undefined;
+    opacity;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+        this.opacity = globalStyle?.opacity;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "maskStyle");
+        return style?.resolve(detection, context);
+    }
+}
+class SourceAwarePolygonStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "polygonStyle");
+        return style?.resolve(detection, context);
+    }
+}
+class SourceAwarePolylineStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "polylineStyle");
+        return style?.resolve(detection, context);
+    }
+}
+class SourceAwareKeypointStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "keypointStyle");
+        return style?.resolve(detection, context);
+    }
+}
+function hasSourceStyle(sources, key) {
+    return sources.some((source) => source.presentation?.[key] !== undefined);
+}
+function resolveSourceStyle(detection, globalStyle, sourcePresentations, key) {
+    const sourcePresentation = detection.sourceId
+        ? sourcePresentations.get(detection.sourceId)
+        : undefined;
+    const sourceStyle = sourcePresentation?.[key];
+    return sourceStyle === undefined ? globalStyle : sourceStyle;
+}
+function normalizeGlobalBoxStyle(style) {
+    return style === undefined ? new BaseBoxStyle() : style;
+}
+function normalizeGlobalLabelStyle(style) {
+    return style === undefined ? new BaseLabelStyle() : style;
+}
+function normalizeGlobalMaskStyle(style) {
+    return style === undefined ? new BaseMaskStyle() : style;
+}
+function normalizeGlobalPolygonStyle(style) {
+    return style === undefined ? new BasePolygonStyle() : style;
+}
+function normalizeGlobalPolylineStyle(style) {
+    return style === undefined ? new BasePolylineStyle() : style;
+}
+function normalizeGlobalKeypointStyle(style) {
+    return style === undefined ? new BaseKeypointStyle() : style;
+}
+
+var DetectionMaskPayloadFormat;
+(function (DetectionMaskPayloadFormat) {
+    DetectionMaskPayloadFormat["RawCocoRle"] = "rawCocoRle";
+    DetectionMaskPayloadFormat["DeflatedBase64"] = "deflatedBase64";
+})(DetectionMaskPayloadFormat || (DetectionMaskPayloadFormat = {}));
+function encodeBinaryMask(data, width, height) {
+    assertMaskDimensions(data, width, height);
+    const runs = [];
+    let currentValue = 0;
+    let runLength = 0;
+    for (let x = 0; x < width; x += 1) {
+        for (let y = 0; y < height; y += 1) {
+            const value = data[y * width + x] ? 1 : 0;
+            if (value === currentValue) {
+                runLength += 1;
+            }
+            else {
+                runs.push(runLength);
+                currentValue = value;
+                runLength = 1;
+            }
+        }
+    }
+    runs.push(runLength);
+    return {
+        counts: encodeCompressedRleCounts(runs),
+        encoding: DetectionMaskEncoding.CompressedRle,
+        height,
+        width,
+    };
+}
+/** Encodes a binary mask and derives its bounds in the same raster traversal. */
+function encodeBinaryMaskWithBounds(data, width, height) {
+    assertMaskDimensions(data, width, height);
+    const runs = [];
+    let currentValue = 0;
+    let runLength = 0;
+    let minX = width;
+    let minY = height;
+    let maxX = -1;
+    let maxY = -1;
+    for (let x = 0; x < width; x += 1) {
+        for (let y = 0; y < height; y += 1) {
+            const value = data[y * width + x] ? 1 : 0;
+            if (value) {
+                minX = Math.min(minX, x);
+                minY = Math.min(minY, y);
+                maxX = Math.max(maxX, x);
+                maxY = Math.max(maxY, y);
+            }
+            if (value === currentValue) {
+                runLength += 1;
+            }
+            else {
+                runs.push(runLength);
+                currentValue = value;
+                runLength = 1;
+            }
+        }
+    }
+    runs.push(runLength);
+    return {
+        bounds: maxX < 0
+            ? null
+            : {
+                height: maxY - minY + 1,
+                width: maxX - minX + 1,
+                x: minX + (maxX - minX + 1) / 2,
+                y: minY + (maxY - minY + 1) / 2,
+            },
+        mask: {
+            counts: encodeCompressedRleCounts(runs),
+            encoding: DetectionMaskEncoding.CompressedRle,
+            height,
+            width,
+        },
+    };
+}
+function encodeDetectionMaskPayload(mask, codec) {
+    return codec ? codec.deflate(mask.counts) : mask.counts;
+}
+function decodeDetectionMaskPayload(payload, width, height, options = {}) {
+    const format = options.format ??
+        (isDeflatedBase64DetectionMaskPayload(payload)
+            ? DetectionMaskPayloadFormat.DeflatedBase64
+            : DetectionMaskPayloadFormat.RawCocoRle);
+    if (format === DetectionMaskPayloadFormat.DeflatedBase64 && !options.codec) {
+        throw new Error("A detection mask compression codec is required for deflated payloads.");
+    }
+    return {
+        counts: format === DetectionMaskPayloadFormat.DeflatedBase64
+            ? options.codec.inflate(payload)
+            : payload,
+        encoding: DetectionMaskEncoding.CompressedRle,
+        height,
+        width,
+    };
+}
+/** Matches the annotation editor's legacy transport-format heuristic. */
+function isDeflatedBase64DetectionMaskPayload(value) {
+    return value.length > 100 && /^[A-Za-z0-9+/]+={0,2}$/.test(value);
+}
+function computeMaskBounds(data, width, height) {
+    assertMaskDimensions(data, width, height);
+    let minX = width;
+    let minY = height;
+    let maxX = -1;
+    let maxY = -1;
+    for (let y = 0; y < height; y += 1) {
+        for (let x = 0; x < width; x += 1) {
+            if (!data[y * width + x]) {
+                continue;
+            }
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x);
+            maxY = Math.max(maxY, y);
+        }
+    }
+    if (maxX < 0) {
+        return null;
+    }
+    const boundsWidth = maxX - minX + 1;
+    const boundsHeight = maxY - minY + 1;
+    return {
+        height: boundsHeight,
+        width: boundsWidth,
+        x: minX + boundsWidth / 2,
+        y: minY + boundsHeight / 2,
+    };
+}
+function computeDetectionMaskRect(mask) {
+    const decoded = decodeCompressedRleMask(mask);
+    const bounds = computeMaskBounds(decoded.data, decoded.width, decoded.height);
+    return bounds ?? undefined;
+}
+function detectMaskBorders(data, width, height) {
+    assertMaskDimensions(data, width, height);
+    const borders = new Uint8Array(data.length);
+    for (let y = 0; y < height; y += 1) {
+        for (let x = 0; x < width; x += 1) {
+            const offset = y * width + x;
+            if (!data[offset]) {
+                continue;
+            }
+            if (x === 0 ||
+                y === 0 ||
+                x === width - 1 ||
+                y === height - 1 ||
+                !data[offset - 1] ||
+                !data[offset + 1] ||
+                !data[offset - width] ||
+                !data[offset + width]) {
+                borders[offset] = 1;
+            }
+        }
+    }
+    return borders;
+}
+function extractMaskContour(data, width, height) {
+    assertMaskDimensions(data, width, height);
+    const stride = Math.max(1, Math.floor(height / 100));
+    const leftEdge = [];
+    const rightEdge = [];
+    for (let y = 0; y < height; y += stride) {
+        let left = -1;
+        let right = -1;
+        for (let x = 0; x < width; x += 1) {
+            if (data[y * width + x]) {
+                left = left === -1 ? x : left;
+                right = x;
+            }
+        }
+        if (left !== -1) {
+            leftEdge.push({ x: left, y });
+            rightEdge.push({ x: right, y });
+        }
+    }
+    return leftEdge.length < 2
+        ? undefined
+        : [...leftEdge, ...rightEdge.reverse()];
+}
+function extractMaskRectRuns(data, width, height) {
+    assertMaskDimensions(data, width, height);
+    const rects = [];
+    const openRects = new Map();
+    for (let y = 0; y < height; y += 1) {
+        const activeSpans = new Set();
+        let x = 0;
+        while (x < width) {
+            while (x < width && !data[y * width + x]) {
+                x += 1;
+            }
+            if (x >= width) {
+                break;
+            }
+            const startX = x;
+            while (x < width && data[y * width + x]) {
+                x += 1;
+            }
+            const runWidth = x - startX;
+            const key = `${startX}:${runWidth}`;
+            const openRect = openRects.get(key);
+            activeSpans.add(key);
+            if (openRect && openRect.y + openRect.height === y) {
+                openRects.set(key, { ...openRect, height: openRect.height + 1 });
+            }
+            else {
+                if (openRect) {
+                    rects.push(openRect);
+                }
+                openRects.set(key, { height: 1, width: runWidth, x: startX, y });
+            }
+        }
+        for (const [key, openRect] of openRects) {
+            if (!activeSpans.has(key)) {
+                rects.push(openRect);
+                openRects.delete(key);
+            }
+        }
+    }
+    rects.push(...openRects.values());
+    return rects.length > 0 ? rects : undefined;
+}
+function assertMaskDimensions(data, width, height) {
+    if (!Number.isInteger(width) || width <= 0) {
+        throw new Error("Mask width must be a positive integer.");
+    }
+    if (!Number.isInteger(height) || height <= 0) {
+        throw new Error("Mask height must be a positive integer.");
+    }
+    if (data.length !== width * height) {
+        throw new Error("Mask data length must equal width * height.");
+    }
+}
+
+function rectToPolygon(rect) {
+    const halfWidth = rect.width / 2;
+    const halfHeight = rect.height / 2;
+    return {
+        points: [
+            { x: rect.x - halfWidth, y: rect.y - halfHeight },
+            { x: rect.x + halfWidth, y: rect.y - halfHeight },
+            { x: rect.x + halfWidth, y: rect.y + halfHeight },
+            { x: rect.x - halfWidth, y: rect.y + halfHeight },
+        ],
+    };
+}
+function polygonToRect(polygon) {
+    return getPointsRect(polygon.points);
+}
+function rasterizeRectToMask(rect, dimensions) {
+    const data = createEmptyMask(dimensions);
+    const topLeft = centerRectToTopLeftRect(rect);
+    const left = Math.max(0, Math.round(topLeft.x));
+    const top = Math.max(0, Math.round(topLeft.y));
+    const right = Math.min(dimensions.width - 1, Math.round(rect.x + rect.width / 2));
+    const bottom = Math.min(dimensions.height - 1, Math.round(rect.y + rect.height / 2));
+    for (let y = top; y <= bottom; y += 1) {
+        for (let x = left; x <= right; x += 1) {
+            data[y * dimensions.width + x] = 1;
+        }
+    }
+    return data;
+}
+function rasterizePolygonToMask(points, dimensions) {
+    const data = createEmptyMask(dimensions);
+    if (points.length < 3) {
+        return data;
+    }
+    const bounds = centerRectToTopLeftRect(getPointsRect(points));
+    const startY = Math.max(0, Math.floor(bounds.y));
+    const endY = Math.min(dimensions.height - 1, Math.ceil(bounds.y + bounds.height));
+    for (let y = startY; y <= endY; y += 1) {
+        const scanY = y + 0.5;
+        const intersections = [];
+        for (let index = 0; index < points.length; index += 1) {
+            const current = points[index];
+            const next = points[(index + 1) % points.length];
+            if ((current.y <= scanY && next.y > scanY) ||
+                (next.y <= scanY && current.y > scanY)) {
+                const ratio = (scanY - current.y) / (next.y - current.y);
+                intersections.push(current.x + ratio * (next.x - current.x));
+            }
+        }
+        intersections.sort((left, right) => left - right);
+        for (let index = 0; index < intersections.length - 1; index += 2) {
+            const left = Math.max(0, Math.ceil(intersections[index]));
+            const right = Math.min(dimensions.width - 1, Math.floor(intersections[index + 1]));
+            for (let x = left; x <= right; x += 1) {
+                data[y * dimensions.width + x] = 1;
+            }
+        }
+    }
+    return data;
+}
+function convertDetectionBoxToPolygon(detection) {
+    return detection.rect
+        ? replaceGeometry(detection, { polygon: rectToPolygon(detection.rect) })
+        : detection;
+}
+function convertDetectionPolygonToBox(detection) {
+    const rect = detection.polygon ? polygonToRect(detection.polygon) : undefined;
+    return rect ? replaceGeometry(detection, { rect }) : detection;
+}
+function convertDetectionMaskToBox(detection) {
+    const rect = detection.mask
+        ? computeDetectionMaskRect(detection.mask)
+        : undefined;
+    return rect ? replaceGeometry(detection, { rect }) : detection;
+}
+function convertDetectionMaskToPolygon(detection) {
+    if (!detection.mask) {
+        return detection;
+    }
+    const decoded = decodeCompressedRleMask(detection.mask);
+    const contour = extractMaskContour(decoded.data, decoded.width, decoded.height);
+    const fallbackRect = computeDetectionMaskRect(detection.mask);
+    const polygon = contour && contour.length >= 3
+        ? { points: contour }
+        : fallbackRect
+            ? rectToPolygon(fallbackRect)
+            : undefined;
+    return polygon ? replaceGeometry(detection, { polygon }) : detection;
+}
+function convertDetectionBoxToMask(detection, dimensions) {
+    if (!detection.rect) {
+        return detection;
+    }
+    const mask = encodeBinaryMask(rasterizeRectToMask(detection.rect, dimensions), dimensions.width, dimensions.height);
+    return replaceGeometry(detection, { mask });
+}
+function convertDetectionPolygonToMask(detection, dimensions) {
+    if (!detection.polygon) {
+        return detection;
+    }
+    const mask = encodeBinaryMask(rasterizePolygonToMask(detection.polygon.points, dimensions), dimensions.width, dimensions.height);
+    return replaceGeometry(detection, { mask });
+}
+function mergeDetectionMasks(detections) {
+    if (detections.length < 2 || detections.some(({ mask }) => !mask)) {
+        return null;
+    }
+    const first = detections[0];
+    if (detections.some((detection) => detection.className !== first.className)) {
+        return null;
+    }
+    const masks = detections.map(({ mask }) => decodeCompressedRleMask(mask));
+    const width = masks[0].width;
+    const height = masks[0].height;
+    if (masks.some((mask) => mask.width !== width || mask.height !== height)) {
+        throw new Error("Merged detection masks must have matching dimensions.");
+    }
+    const data = new Uint8Array(width * height);
+    for (const mask of masks) {
+        for (let index = 0; index < data.length; index += 1) {
+            data[index] ||= mask.data[index] ?? 0;
+        }
+    }
+    return replaceGeometry(first, {
+        mask: encodeBinaryMask(data, width, height),
+    });
+}
+/**
+ * Groups polygon detections by class and returns one union bounding-box
+ * detection per class. This intentionally converts the output to rectangles.
+ */
+function mergeDetectionPolygonsByClass(detections, options = {}) {
+    const groups = new Map();
+    for (const detection of detections) {
+        if (!detection.polygon) {
+            continue;
+        }
+        const group = groups.get(detection.className) ?? [];
+        group.push(detection);
+        groups.set(detection.className, group);
+    }
+    return [...groups.entries()].flatMap(([className, group], groupIndex) => {
+        const points = group.flatMap((detection) => detection.polygon.points);
+        const rect = getPointsRect(points);
+        if (!rect) {
+            return [];
+        }
+        const first = group[0];
+        const id = options.createId?.(className, groupIndex) ?? first.id;
+        return [
+            replaceGeometry({
+                ...first,
+                id,
+            }, { rect }),
+        ];
+    });
+}
+function createEmptyMask(dimensions) {
+    if (!Number.isInteger(dimensions.width) ||
+        dimensions.width <= 0 ||
+        !Number.isInteger(dimensions.height) ||
+        dimensions.height <= 0) {
+        throw new Error("Media dimensions must be positive integers.");
+    }
+    return new Uint8Array(dimensions.width * dimensions.height);
+}
+function replaceGeometry(detection, geometry) {
+    return {
+        ...detection,
+        keypoints: undefined,
+        mask: geometry.mask,
+        polygon: geometry.polygon,
+        polyline: undefined,
+        rect: geometry.rect,
+    };
+}
+
+function canReuseMaskStyleArtifacts(previousMaskStyle, nextMaskStyle) {
+    if (previousMaskStyle === nextMaskStyle) {
+        return true;
+    }
+    return (previousMaskStyle?.artifactKey !== undefined &&
+        nextMaskStyle?.artifactKey !== undefined &&
+        previousMaskStyle.artifactKey === nextMaskStyle.artifactKey);
+}
+function resolveMaskStyleOpacity(maskStyle) {
+    const opacity = maskStyle?.opacity;
+    if (opacity === undefined) {
+        return 1;
+    }
+    return Number.isFinite(opacity) ? Math.max(0, Math.min(opacity, 1)) : 1;
+}
+
+const MAX_ID_MASK_PALETTE_ENTRIES = 64;
+const MAX_ID_MASK_STROKE_WIDTH = 16;
+function createIdMaskFrame(instructions) {
+    if (instructions.length === 0) {
+        return undefined;
+    }
+    const width = Math.max(...instructions.map(({ mask }) => mask.width));
+    const height = Math.max(...instructions.map(({ mask }) => mask.height));
+    const data = new Uint8Array(new ArrayBuffer(width * height));
+    const fillPalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));
+    const strokePalette = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4 * 4));
+    const strokeWidths = new Float32Array(new ArrayBuffer(MAX_ID_MASK_PALETTE_ENTRIES * 4));
+    let hasStroke = false;
+    let maxStrokeWidth = 0;
+    for (const instruction of instructions) {
+        const detectionMaskId = instruction.detectionIndex + 1;
+        if (detectionMaskId <= 0 ||
+            detectionMaskId >= MAX_ID_MASK_PALETTE_ENTRIES) {
+            return undefined;
+        }
+        writePaletteEntry(fillPalette, detectionMaskId, instruction.color, instruction.alpha);
+        if (instruction.stroke && instruction.stroke.width > 0) {
+            const strokeWidth = Math.min(Math.max(0, instruction.stroke.width), MAX_ID_MASK_STROKE_WIDTH);
+            hasStroke = true;
+            strokeWidths[detectionMaskId] = strokeWidth;
+            maxStrokeWidth = Math.max(maxStrokeWidth, strokeWidth);
+            writePaletteEntry(strokePalette, detectionMaskId, instruction.stroke.color, instruction.stroke.alpha);
+        }
+        const decodedMask = decodeCompressedRleMask(instruction.mask);
+        for (let y = 0; y < decodedMask.height; y += 1) {
+            for (let x = 0; x < decodedMask.width; x += 1) {
+                const maskOffset = y * decodedMask.width + x;
+                if (decodedMask.data[maskOffset]) {
+                    data[y * width + x] = detectionMaskId;
+                }
+            }
+        }
+    }
+    return {
+        data,
+        fillPalette,
+        hasStroke,
+        height,
+        maxStrokeWidth,
+        strokePalette,
+        strokeWidths,
+        width,
+    };
+}
+function writePaletteEntry(palette, id, color, alpha) {
+    const offset = id * 4;
+    palette[offset] = ((color >> 16) & 0xff) / 255;
+    palette[offset + 1] = ((color >> 8) & 0xff) / 255;
+    palette[offset + 2] = (color & 0xff) / 255;
+    palette[offset + 3] = Math.max(0, Math.min(alpha, 1));
+}
+
+function includeDefined(values) {
+    return Object.fromEntries(Object.entries(values).filter(([, value]) => value !== undefined));
+}
+
+function resolveAnnotationStyleState(detection, visibility) {
+    const id = detection.id;
+    return {
+        hidden: visibility?.annotationsHidden === true ||
+            (detection.className !== undefined &&
+                includes(visibility?.hiddenClasses, detection.className)) ||
+            (id !== undefined && includes(visibility?.hiddenDetectionIds, id)),
+        loading: id !== undefined && includes(visibility?.loadingDetectionIds, id),
+        ephemeral: id !== undefined && includes(visibility?.ephemeralDetectionIds, id),
+        isCreating: id !== undefined && visibility?.creatingDetectionId === id,
+    };
+}
+function includes(values, value) {
+    if (!values)
+        return false;
+    return Array.isArray(values)
+        ? values.includes(value)
+        : values.has(value);
+}
+
+var MediaRendererFit;
+(function (MediaRendererFit) {
+    /**
+     * Preserve media aspect ratio and fit the full frame inside the canvas.
+     */
+    MediaRendererFit["Contain"] = "contain";
+    /**
+     * Preserve media aspect ratio and fill the canvas, cropping if necessary.
+     */
+    MediaRendererFit["Cover"] = "cover";
+})(MediaRendererFit || (MediaRendererFit = {}));
+/**
+ * Playback lifecycle state reported by a platform renderer.
+ */
+var MediaRendererPlaybackState;
+(function (MediaRendererPlaybackState) {
+    MediaRendererPlaybackState["Loading"] = "loading";
+    MediaRendererPlaybackState["Ready"] = "ready";
+    MediaRendererPlaybackState["Playing"] = "playing";
+    MediaRendererPlaybackState["Buffering"] = "buffering";
+    MediaRendererPlaybackState["Paused"] = "paused";
+    MediaRendererPlaybackState["Error"] = "error";
+    MediaRendererPlaybackState["Destroyed"] = "destroyed";
+})(MediaRendererPlaybackState || (MediaRendererPlaybackState = {}));
+/**
+ * Lower-level media source readiness.
+ */
+var MediaSourceStatus;
+(function (MediaSourceStatus) {
+    MediaSourceStatus["Loading"] = "loading";
+    MediaSourceStatus["Ready"] = "ready";
+    MediaSourceStatus["Error"] = "error";
+    MediaSourceStatus["Destroyed"] = "destroyed";
+})(MediaSourceStatus || (MediaSourceStatus = {}));
+
+/**
+ * Media-session operating mode.
+ *
+ * Core owns the names because file-like and stream-like lifecycle choices are
+ * platform-neutral. Platform packages decide how these modes tune media,
+ * storage, and renderer defaults.
+ */
+var MediaSessionMode;
+(function (MediaSessionMode) {
+    /**
+     * Finite media. Defaults usually favor seek/replay and persistent detection
+     * storage.
+     */
+    MediaSessionMode["File"] = "file";
+    /**
+     * Live or append-only media. Defaults usually favor rolling windows and
+     * bounded retention.
+     */
+    MediaSessionMode["Stream"] = "stream";
+})(MediaSessionMode || (MediaSessionMode = {}));
+/**
+ * Aggregate lifecycle state for a media session.
+ */
+var MediaSessionStatus;
+(function (MediaSessionStatus) {
+    MediaSessionStatus["Buffering"] = "buffering";
+    MediaSessionStatus["Destroyed"] = "destroyed";
+    MediaSessionStatus["Error"] = "error";
+    MediaSessionStatus["Loading"] = "loading";
+    MediaSessionStatus["Paused"] = "paused";
+    MediaSessionStatus["Playing"] = "playing";
+    MediaSessionStatus["Processing"] = "processing";
+    MediaSessionStatus["Ready"] = "ready";
+})(MediaSessionStatus || (MediaSessionStatus = {}));
+/**
+ * Subsystem currently affecting session readiness or presentation.
+ */
+var MediaSessionActivityKind;
+(function (MediaSessionActivityKind) {
+    MediaSessionActivityKind["DetectionsBuffering"] = "detectionsBuffering";
+    MediaSessionActivityKind["DetectionsLoading"] = "detectionsLoading";
+    MediaSessionActivityKind["Error"] = "error";
+    MediaSessionActivityKind["MediaNormalizing"] = "mediaNormalizing";
+    MediaSessionActivityKind["MediaOpening"] = "mediaOpening";
+    MediaSessionActivityKind["PlaybackBuffering"] = "playbackBuffering";
+    MediaSessionActivityKind["RenderPreparing"] = "renderPreparing";
+})(MediaSessionActivityKind || (MediaSessionActivityKind = {}));
+/**
+ * State of one session activity.
+ */
+var MediaSessionActivityStatus;
+(function (MediaSessionActivityStatus) {
+    MediaSessionActivityStatus["Error"] = "error";
+    MediaSessionActivityStatus["Running"] = "running";
+    MediaSessionActivityStatus["Waiting"] = "waiting";
+})(MediaSessionActivityStatus || (MediaSessionActivityStatus = {}));
+
+export { AnnotationFrameMutationKind, AnnotationGeometryKind, AnnotationGestureStateKind, AnnotationHandleKind, BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMaskStyle, BasePolygonStyle, BasePolylineStyle, BoxShape, BoxStrokeAlignment, DEFAULT_DETECTION_CLASS_STYLES, DEFAULT_DETECTION_COLOR_SEQUENCE, DetectionBufferStatus, DetectionFrameRetentionMode, DetectionFrameSelectionMode, DetectionInteractionState, DetectionMaskEncoding, DetectionMaskPayloadFormat, DetectionPickTarget, FocusTargetMode, KeypointMarkerShape, KeypointVisibility, LabelPlacement, LabelVisibilityMode, MAX_ID_MASK_PALETTE_ENTRIES, MAX_ID_MASK_STROKE_WIDTH, MaskRenderMode, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, SUPERVISION_ROBOFLOW_COLOR, applyAnnotationHandleDrag, canReuseMaskStyleArtifacts, centerRectToTopLeftRect, computeDetectionMaskRect, computeMaskBounds, containsPoint, convertDetectionBoxToMask, convertDetectionBoxToPolygon, convertDetectionMaskToBox, convertDetectionMaskToPolygon, convertDetectionPolygonToBox, convertDetectionPolygonToMask, copySortedDetectionFrames, createAnnotationEditingEngine, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createDetectionPickKey, createEditableAnnotationFrameSession, createIdMaskFrame, createIdleDetectionBufferState, createMemoryColdDetectionFrameStore, createSourceAwarePresentation, createViewportController, createWritableDetectionFrameSource, decodeCompressedRleCounts, decodeCompressedRleMask, decodeDetectionMaskPayload, deleteAnnotationVertex, detectMaskBorders, detectionFrameOverlapsRange, distanceToSegment, encodeBinaryMask, encodeBinaryMaskWithBounds, encodeCompressedRleCounts, encodeDetectionMaskPayload, extractMaskContour, extractMaskRectRuns, filterDetectionFramesForRange, findClosestAnnotationSegment, getAnnotationHandles, getBufferedDetectionTimelineFrameSnapshot, getDetectionRect, getPointsRect, includeDefined, isDeflatedBase64DetectionMaskPayload, lightenColor, mediaToScreen, mergeDetectionMasks, mergeDetectionPolygonsByClass, normalizeDetectionClassName, offsetDetection, pickAnnotationHandle, pickDetectionAtPoint, pickDetectionByMaskId, pointInPolygon, polygonArea, polygonToRect, rasterizePolygonToMask, rasterizeRectToMask, rebaseDetectionPickToFrame, rectArea, rectToPolygon, resolveAnnotationStyleState, resolveContrastTextColor, resolveDetectionClassColorStyle, resolveMaskStyleOpacity, resolveStyleValue, screenToMedia, selectDetectionFrame, topLeftRectToCenterRect, validateDetectionFrames };
+//# sourceMappingURL=index.js.map