supervision 0.1.3 → 0.1.4

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

@@ -1928,6 +1928,29 @@ function createDetectionPickKey(pick) {
         pick.geometryIndex ?? "geometry",
     ].join(":");
 }
+/**
+ * Compares the frame-independent membership of two ordered selections.
+ *
+ * Detection ids retain their runtime type, so numeric `1` and string `"1"`
+ * remain distinct identities. Anonymous detections keep their frame-local
+ * index identity.
+ */
+function haveSameDetectionPickIdentities(current, next) {
+    if (current.length !== next.length) {
+        return false;
+    }
+    return current.every((pick, index) => {
+        const nextPick = next[index];
+        if (!nextPick) {
+            return false;
+        }
+        const id = pick.detection.id;
+        const nextId = nextPick.detection.id;
+        return id === undefined || nextId === undefined
+            ? id === nextId && pick.detectionIndex === nextPick.detectionIndex
+            : typeof id === typeof nextId && id === nextId;
+    });
+}
 function rebaseDetectionPickToFrame(pick, frame) {
     if (!pick || !frame) {
         return null;
@@ -1953,13 +1976,55 @@ function rebaseDetectionPickToFrame(pick, frame) {
         ? rebasedPick
         : null;
 }
+/**
+ * Carries a pick forward onto a different frame of the same timeline.
+ *
+ * Same-frame rebases behave exactly like `rebaseDetectionPickToFrame`. Across
+ * frames, the pick follows its detection only when the detection id is defined
+ * and unique in both frames, so anonymous and duplicate-id detections keep the
+ * per-frame lifetime they have today. Returns `null` when the detection has no
+ * followable identity or has left the frame.
+ */
+function followDetectionPickAcrossFrames(pick, frame) {
+    const rebasedPick = rebaseDetectionPickToFrame(pick, frame);
+    if (rebasedPick || !pick || !frame) {
+        return rebasedPick;
+    }
+    const id = pick.detection.id;
+    if (id === undefined ||
+        !hasUniqueDetectionId(pick.frame, id) ||
+        !hasUniqueDetectionId(frame, id)) {
+        return null;
+    }
+    const detectionIndex = frame.detections.findIndex((detection) => detection.id === id);
+    const detection = frame.detections[detectionIndex];
+    if (!detection) {
+        return null;
+    }
+    return {
+        detection,
+        detectionIndex,
+        frame,
+        geometryIndex: pick.geometryIndex,
+        mediaTime: frame.mediaTime,
+        point: pick.point,
+        target: pick.target,
+    };
+}
 function detectionPickKey(pick) {
     if (pick.detection.id === undefined) {
         return ["anonymous", pick.detectionIndex];
     }
+    const idType = typeof pick.detection.id;
     return hasUniqueDetectionId(pick.frame, pick.detection.id)
-        ? ["id", String(pick.detection.id)]
-        : ["duplicate-id", String(pick.detection.id), "index", pick.detectionIndex];
+        ? ["id", idType, String(pick.detection.id)]
+        : [
+            "duplicate-id",
+            idType,
+            String(pick.detection.id),
+            "index",
+            pick.detectionIndex,
+        ];
 }
 function hasUniqueDetectionId(frame, id) {
     let count = 0;
@@ -2652,17 +2717,46 @@ function resolveStyleValue(value, detection, context) {
         : value;
 }
 
+/**
+ * Resolves the renderer-neutral stroke contract without dropping optional
+ * geometry controls as styles move from public configuration to draw
+ * instructions.
+ *
+ * Keep this as the single normalization point for every built-in style. That
+ * makes additions to `StrokeStyle` deliberate instead of relying on each style
+ * implementation to copy a growing property list correctly.
+ */
+function resolveStrokeStyle(stroke, defaults) {
+    const alignment = stroke?.alignment ?? defaults.alignment;
+    const cap = stroke?.cap ?? defaults.cap;
+    const dash = stroke?.dash ?? defaults.dash;
+    const join = stroke?.join ?? defaults.join;
+    const miterLimit = stroke?.miterLimit ?? defaults.miterLimit;
+    return {
+        alpha: stroke?.alpha ?? defaults.alpha,
+        color: stroke?.color ?? defaults.color,
+        width: stroke?.width ?? defaults.width,
+        ...(alignment === undefined ? {} : { alignment }),
+        ...(cap === undefined ? {} : { cap }),
+        ...(dash === undefined ? {} : { dash }),
+        ...(join === undefined ? {} : { join }),
+        ...(miterLimit === undefined ? {} : { miterLimit }),
+    };
+}
+
+/** Alignment for strokes applied to closed rendered geometry. */
+var StrokeAlignment;
+(function (StrokeAlignment) {
+    StrokeAlignment["Inside"] = "inside";
+    StrokeAlignment["Center"] = "center";
+    StrokeAlignment["Outside"] = "outside";
+})(StrokeAlignment || (StrokeAlignment = {}));
+
 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;
@@ -2716,22 +2810,12 @@ class BaseBoxStyle {
         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 }),
-        };
+        return resolveStrokeStyle(stroke, {
+            alpha: DEFAULT_BOX_STROKE_ALPHA,
+            color: DEFAULT_BOX_STROKE_COLOR,
+            ...(context.ephemeral ? { dash: [6, 4] } : {}),
+            width: DEFAULT_BOX_STROKE_WIDTH,
+        });
     }
     resolveFill(detection, context) {
         const fill = resolveStyleValue(this.options.fill, detection, context);
@@ -2745,6 +2829,83 @@ class BaseBoxStyle {
     }
 }
 
+const DEFAULT_CORNER_LENGTH = 20;
+const DEFAULT_CORNER_STROKE = {
+    alpha: 1,
+    cap: "round",
+    color: 0x00ff66,
+    join: "round",
+    width: 2,
+};
+/**
+ * Configurable four-corner decoration derived from a detection rectangle.
+ *
+ * This is the BoxCornerAnnotator-style facade: it keeps the rectangle semantic
+ * and draws only its four open corner segments.
+ */
+class BaseBoxCornerStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        if (!detection.rect ||
+            context.hidden ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const resolvedLength = resolveStyleValue(this.options.length, detection, context) ??
+            DEFAULT_CORNER_LENGTH;
+        const viewportScale = context.viewportScale && context.viewportScale > 0
+            ? context.viewportScale
+            : 1;
+        const length = Math.min(Math.max(0, resolvedLength / viewportScale), detection.rect.width / 2, detection.rect.height / 2);
+        const stroke = resolveStyleValue(this.options.stroke, detection, context);
+        if (length <= 0 || stroke === null)
+            return undefined;
+        const { height, width, x, y } = detection.rect;
+        const left = x - width / 2;
+        const right = x + width / 2;
+        const top = y - height / 2;
+        const bottom = y + height / 2;
+        const resolvedStroke = resolveStrokeStyle(stroke, DEFAULT_CORNER_STROKE);
+        const openStroke = {
+            alpha: resolvedStroke.alpha,
+            cap: resolvedStroke.cap,
+            color: resolvedStroke.color,
+            dash: resolvedStroke.dash,
+            join: resolvedStroke.join,
+            miterLimit: resolvedStroke.miterLimit,
+            width: resolvedStroke.width,
+        };
+        return {
+            segments: [
+                [
+                    { x: left + length, y: top },
+                    { x: left, y: top },
+                    { x: left, y: top + length },
+                ],
+                [
+                    { x: right - length, y: top },
+                    { x: right, y: top },
+                    { x: right, y: top + length },
+                ],
+                [
+                    { x: left + length, y: bottom },
+                    { x: left, y: bottom },
+                    { x: left, y: bottom - length },
+                ],
+                [
+                    { x: right - length, y: bottom },
+                    { x: right, y: bottom },
+                    { x: right, y: bottom - length },
+                ],
+            ],
+            stroke: openStroke,
+        };
+    }
+}
+
 var FocusTargetMode;
 (function (FocusTargetMode) {
     FocusTargetMode["Hovered"] = "hovered";
@@ -2943,18 +3104,11 @@ class BaseInteractionStyle {
             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;
+        return resolveStrokeStyle(stroke, {
+            alpha: defaults.strokeAlpha,
+            color: defaults.strokeColor,
+            width: defaults.strokeWidth,
+        });
     }
     resolveFill(detection, context) {
         const fill = resolveStyleValue(this.options.fill, detection, context);
@@ -3206,6 +3360,115 @@ function createArtifactKey(options) {
     return `base:${color}:${fillAlpha}:${mode}:${serializeStroke(resolveStroke(options.stroke, color, mode))}`;
 }
 
+/**
+ * Discriminator for renderer-neutral shape draw instructions.
+ */
+var ShapeInstructionKind;
+(function (ShapeInstructionKind) {
+    ShapeInstructionKind["Ellipse"] = "ellipse";
+    ShapeInstructionKind["Marker"] = "marker";
+    ShapeInstructionKind["Path"] = "path";
+})(ShapeInstructionKind || (ShapeInstructionKind = {}));
+var MarkerShape;
+(function (MarkerShape) {
+    MarkerShape["Circle"] = "circle";
+    MarkerShape["Cross"] = "cross";
+    MarkerShape["Square"] = "square";
+    MarkerShape["Triangle"] = "triangle";
+})(MarkerShape || (MarkerShape = {}));
+/**
+ * Coordinate space for marker sizing. Media sizes scale with the viewport;
+ * screen sizes stay constant on screen, matching stroke-width semantics.
+ */
+var MarkerSizeSpace;
+(function (MarkerSizeSpace) {
+    MarkerSizeSpace["Media"] = "media";
+    MarkerSizeSpace["Screen"] = "screen";
+})(MarkerSizeSpace || (MarkerSizeSpace = {}));
+
+const DEFAULT_FILL = { alpha: 1, color: 0x00ff66 };
+const DEFAULT_STROKE = { alpha: 1, color: 0xffffff, width: 1 };
+const DEFAULT_SIZE = 12;
+/**
+ * Configurable marker renderer style anchored to semantic detection geometry.
+ *
+ * Use `center` for any domain-specific anchor (keypoint, centroid, or custom
+ * metadata). Without it, the marker lands at the detection rectangle center.
+ */
+class BaseMarkerStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        if (context.hidden ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const center = resolveStyleValue(this.options.center, detection, context) ??
+            (detection.rect
+                ? { x: detection.rect.x, y: detection.rect.y }
+                : undefined);
+        const shape = resolveStyleValue(this.options.shape, detection, context) ??
+            MarkerShape.Circle;
+        const size = resolveStyleValue(this.options.size, detection, context) ?? DEFAULT_SIZE;
+        const sizeSpace = resolveStyleValue(this.options.sizeSpace, detection, context) ??
+            MarkerSizeSpace.Screen;
+        const rotation = resolveStyleValue(this.options.rotation, detection, context);
+        const stroke = resolveStyleValue(this.options.stroke, detection, context);
+        if (!center || !Number.isFinite(size) || size <= 0) {
+            return undefined;
+        }
+        if (shape === MarkerShape.Cross) {
+            if (stroke === null) {
+                return undefined;
+            }
+            const resolvedStroke = resolveStrokeStyle(stroke, DEFAULT_STROKE);
+            const openStroke = {
+                alpha: resolvedStroke.alpha,
+                cap: resolvedStroke.cap,
+                color: resolvedStroke.color,
+                dash: resolvedStroke.dash,
+                join: resolvedStroke.join,
+                miterLimit: resolvedStroke.miterLimit,
+                width: resolvedStroke.width,
+            };
+            return {
+                center,
+                shape,
+                size,
+                sizeSpace,
+                ...(rotation === undefined ? {} : { rotation }),
+                stroke: openStroke,
+            };
+        }
+        const fill = resolveStyleValue(this.options.fill, detection, context);
+        if (fill === null && stroke === null) {
+            return undefined;
+        }
+        return {
+            center,
+            shape,
+            size,
+            sizeSpace,
+            ...(rotation === undefined ? {} : { rotation }),
+            ...(fill === null
+                ? {}
+                : {
+                    fill: {
+                        alpha: fill?.alpha ?? DEFAULT_FILL.alpha,
+                        color: fill?.color ?? DEFAULT_FILL.color,
+                    },
+                }),
+            ...(stroke === null
+                ? {}
+                : stroke === undefined
+                    ? { stroke: DEFAULT_STROKE }
+                    : { stroke: resolveStrokeStyle(stroke, DEFAULT_STROKE) }),
+        };
+    }
+}
+
 class BasePolygonStyle {
     options;
     constructor(options = {}) {
@@ -3233,15 +3496,11 @@ class BasePolygonStyle {
             ...(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 }),
-                    },
+                    stroke: resolveStrokeStyle(stroke, {
+                        alpha: 1,
+                        color: 0x00ff66,
+                        width: 2,
+                    }),
                 }),
         };
     }
@@ -3265,15 +3524,11 @@ class BasePolylineStyle {
         }
         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 }),
-            },
+            stroke: resolveStrokeStyle(stroke, {
+                alpha: 1,
+                color: 0x00ff66,
+                width: 2,
+            }),
         };
     }
 }
@@ -3307,19 +3562,21 @@ class BaseKeypointStyle {
         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,
-            },
+            stroke: resolveStrokeStyle(definition?.edges[edgeIndex]?.color === undefined
+                ? edgeStroke
+                : { ...edgeStroke, color: definition.edges[edgeIndex].color }, {
+                alpha: 1,
+                color: 0x00ff66,
+                width: 2,
+            }),
             ...(shadowStroke === null
                 ? {}
                 : {
-                    shadowStroke: {
-                        alpha: shadowStroke?.alpha ?? 0.65,
-                        color: shadowStroke?.color ?? 0x000000,
-                        width: shadowStroke?.width ?? 4,
-                    },
+                    shadowStroke: resolveStrokeStyle(shadowStroke, {
+                        alpha: 0.65,
+                        color: 0x000000,
+                        width: 4,
+                    }),
                 }),
         }));
         const markers = geometry.points.flatMap((point, index) => {
@@ -3341,11 +3598,11 @@ class BaseKeypointStyle {
                     shape: visibility === KeypointVisibility.Occluded
                         ? KeypointMarkerShape.Cross
                         : KeypointMarkerShape.Circle,
-                    stroke: {
-                        alpha: markerStroke?.alpha ?? 1,
-                        color: markerStroke?.color ?? 0xffffff,
-                        width: markerStroke?.width ?? 2,
-                    },
+                    stroke: resolveStrokeStyle(markerStroke, {
+                        alpha: 1,
+                        color: 0xffffff,
+                        width: 2,
+                    }),
                 },
             ];
         });
@@ -3426,6 +3683,9 @@ function createClassColorStyle(fill, labelBackground, labelText, stroke) {
 }
 
 const DEFAULT_BOX_CORNER_RADIUS = 1;
+const DEFAULT_ELLIPSE_AXIS_RATIO = 0.35;
+const DEFAULT_ELLIPSE_START_ANGLE = (-45 * Math.PI) / 180;
+const DEFAULT_ELLIPSE_END_ANGLE = (235 * Math.PI) / 180;
 const DEFAULT_OUTLINE_WIDTH = 2;
 const DEFAULT_FILL_ALPHA = 0.08;
 const DEFAULT_MASK_FILL_ALPHA = 0.45;
@@ -3480,6 +3740,47 @@ function createDefaultBoxStyle(options = {}) {
         }),
     });
 }
+/** Canonical opt-in BoxCornerAnnotator-style presentation. */
+function createDefaultBoxCornerStyle(options = {}) {
+    const getClassColor = createClassColorResolver(options);
+    return new BaseBoxCornerStyle({
+        stroke: (detection) => ({ color: getClassColor(detection) }),
+    });
+}
+/**
+ * Matches the Python Supervision EllipseAnnotator: an elliptical footprint
+ * arc under the detection box, swept from -45deg to 235deg, in the class
+ * color.
+ */
+function createDefaultEllipseStyle(options = {}) {
+    const getClassColor = createClassColorResolver(options);
+    return {
+        resolve(detection, context) {
+            if (!detection.rect || context.hidden) {
+                return undefined;
+            }
+            const radiusX = detection.rect.width / 2;
+            const radiusY = radiusX * DEFAULT_ELLIPSE_AXIS_RATIO;
+            return {
+                center: {
+                    x: detection.rect.x,
+                    // Bottom-tangent so the arc hugs the detection instead of dipping
+                    // below its feet.
+                    y: detection.rect.y + detection.rect.height / 2 - radiusY,
+                },
+                endAngle: DEFAULT_ELLIPSE_END_ANGLE,
+                radiusX,
+                radiusY,
+                startAngle: DEFAULT_ELLIPSE_START_ANGLE,
+                stroke: {
+                    alpha: 1,
+                    color: getClassColor(detection),
+                    width: DEFAULT_OUTLINE_WIDTH,
+                },
+            };
+        },
+    };
+}
 function createDefaultKeypointStyle(options = {}) {
     const getClassColor = createClassColorResolver(options);
     return new BaseKeypointStyle({
@@ -3538,6 +3839,31 @@ function createDefaultMaskStyle(options = {}) {
         }),
     });
 }
+/** Canonical opt-in marker presentation. */
+function createDefaultMarkerStyle() {
+    return new BaseMarkerStyle();
+}
+const DEFAULT_MASK_HALO_ALPHA = 0.6;
+const DEFAULT_MASK_HALO_SPREAD = 12;
+/**
+ * Canonical mask halo: a class-colored glow that follows the mask silhouette.
+ * Used when the `maskHalo` renderer is listed without an explicit style.
+ */
+function createDefaultMaskHaloStyle(options = {}) {
+    const getClassColor = createClassColorResolver(options);
+    return {
+        resolve(detection, context) {
+            if (!detection.mask || context.hidden) {
+                return undefined;
+            }
+            return {
+                alpha: DEFAULT_MASK_HALO_ALPHA,
+                color: getClassColor(detection),
+                spread: DEFAULT_MASK_HALO_SPREAD,
+            };
+        },
+    };
+}
 function createDefaultPolygonStyle(options = {}) {
     const getClassColor = createClassColorResolver(options);
     return new BasePolygonStyle({
@@ -3580,12 +3906,30 @@ function resolveDefaultClassColor(detection, getClassColor) {
  */
 const annotationRendererKinds = [
     "box",
+    "box-corners",
+    "ellipse",
     "keypoints",
     "label",
     "mask",
+    "maskHalo",
+    "marker",
     "polygon",
     "polyline",
+    "region",
 ];
+/** Sources currently supported by a region renderer. */
+const RegionRendererSourceKind = {
+    Asset: "asset",
+};
+/** Media-space regions currently supported by a region renderer. */
+const RegionRendererRegionKind = {
+    Bounds: "bounds",
+    KeypointAnchor: "keypoint-anchor",
+};
+/** Composition modes currently supported by a region renderer. */
+const RegionRendererComposeMode = {
+    Over: "over",
+};
 /**
  * Creates built-in annotation renderer descriptors for
  * `MediaRendererPresentation.renderers`.
@@ -3596,11 +3940,16 @@ const annotationRendererKinds = [
  */
 const annotationRenderers = {
     box: (options) => createAnnotationRenderer("box", options),
+    boxCorners: (options) => createAnnotationRenderer("box-corners", options),
+    ellipse: (options) => createAnnotationRenderer("ellipse", options),
     keypoints: (options) => createAnnotationRenderer("keypoints", options),
     label: (options) => createAnnotationRenderer("label", options),
     mask: (options) => createAnnotationRenderer("mask", options),
+    maskHalo: (options) => createAnnotationRenderer("maskHalo", options),
+    marker: (options) => createAnnotationRenderer("marker", options),
     polygon: (options) => createAnnotationRenderer("polygon", options),
     polyline: (options) => createAnnotationRenderer("polyline", options),
+    region: (options) => ({ kind: "region", ...options }),
 };
 function createAnnotationRenderer(kind, options) {
     // Every built-in renderer keeps its kind as its stable id. TypeScript cannot
@@ -3610,31 +3959,67 @@ function createAnnotationRenderer(kind, options) {
 }
 
 const annotationRendererRegistry = {
-    box: { createCanonicalStyle: createDefaultBoxStyle, styleField: "boxStyle" },
+    box: {
+        cardinality: "singleton",
+        createCanonicalStyle: createDefaultBoxStyle,
+        styleField: "boxStyle",
+    },
+    "box-corners": {
+        cardinality: "singleton",
+        createCanonicalStyle: createDefaultBoxCornerStyle,
+        styleField: "boxCornerStyle",
+    },
+    ellipse: {
+        cardinality: "singleton",
+        createCanonicalStyle: createDefaultEllipseStyle,
+        styleField: "ellipseStyle",
+    },
     keypoints: {
+        cardinality: "singleton",
         createCanonicalStyle: createDefaultKeypointStyle,
         styleField: "keypointStyle",
     },
     label: {
+        cardinality: "singleton",
         createCanonicalStyle: createDefaultLabelStyle,
         styleField: "labelStyle",
     },
     mask: {
+        cardinality: "singleton",
         createCanonicalStyle: createDefaultMaskStyle,
         styleField: "maskStyle",
     },
+    maskHalo: {
+        cardinality: "singleton",
+        createCanonicalStyle: () => createDefaultMaskHaloStyle(),
+        styleField: "maskHaloStyle",
+    },
+    marker: {
+        cardinality: "singleton",
+        createCanonicalStyle: createDefaultMarkerStyle,
+        styleField: "markerStyle",
+    },
     polygon: {
+        cardinality: "singleton",
         createCanonicalStyle: createDefaultPolygonStyle,
         styleField: "polygonStyle",
     },
     polyline: {
+        cardinality: "singleton",
         createCanonicalStyle: createDefaultPolylineStyle,
         styleField: "polylineStyle",
     },
+    region: { cardinality: "multiple" },
 };
+function isStyleBackedAnnotationRendererKind(kind) {
+    return annotationRendererRegistry[kind].cardinality === "singleton";
+}
 /** Presentation fields owned by the given renderer kinds, in the same order. */
 function resolveAnnotationRendererStyleFields(kinds) {
-    return kinds.map((kind) => annotationRendererRegistry[kind].styleField);
+    return kinds.flatMap((kind) => {
+        const metadata = annotationRendererRegistry[kind];
+        return "styleField" in metadata ? [metadata.styleField] : [];
+    });
 }
 
 /**
@@ -3650,9 +4035,13 @@ function resolveAnnotationRendererPresentation(presentation) {
     }
     const resolved = {
         boxStyle: null,
+        boxCornerStyle: null,
+        ellipseStyle: null,
         keypointStyle: null,
         labelStyle: null,
+        maskHaloStyle: null,
         maskStyle: null,
+        markerStyle: null,
         polygonStyle: null,
         polylineStyle: null,
     };
@@ -3663,17 +4052,23 @@ function resolveAnnotationRendererPresentation(presentation) {
             throw new RangeError(`MediaRendererPresentation.renderers contains duplicate renderer id "${renderer.id}".`);
         }
         rendererIds.add(renderer.id);
-        if (rendererKinds.has(renderer.kind)) {
+        if (annotationRendererRegistry[renderer.kind].cardinality === "singleton" &&
+            rendererKinds.has(renderer.kind)) {
             throw new RangeError(`MediaRendererPresentation.renderers contains duplicate renderer kind "${renderer.kind}".`);
         }
         rendererKinds.add(renderer.kind);
-        applyRendererStyle(resolved, presentation, renderer);
+        if (isStyleBackedAnnotationRenderer(renderer)) {
+            applyRendererStyle(resolved, presentation, renderer);
+        }
     }
     return {
         ...presentation,
         ...resolved,
     };
 }
+function isStyleBackedAnnotationRenderer(renderer) {
+    return isStyleBackedAnnotationRendererKind(renderer.kind);
+}
 function applyRendererStyle(resolved, configured, renderer) {
     const { createCanonicalStyle, styleField } = annotationRendererRegistry[renderer.kind];
     const configuredStyle = configured[styleField];
@@ -3703,12 +4098,24 @@ function createSourceAwarePresentation(globalPresentation = {}, sources, options
         boxStyle: shouldApplySourceStyle("boxStyle")
             ? new SourceAwareBoxStyle(normalizeGlobalBoxStyle(globalPresentation.boxStyle), sourcePresentations)
             : globalPresentation.boxStyle,
+        boxCornerStyle: shouldApplySourceStyle("boxCornerStyle")
+            ? new SourceAwareBoxCornerStyle(globalPresentation.boxCornerStyle ?? null, sourcePresentations)
+            : globalPresentation.boxCornerStyle,
+        ellipseStyle: shouldApplySourceStyle("ellipseStyle")
+            ? new SourceAwareEllipseStyle(globalPresentation.ellipseStyle ?? null, sourcePresentations)
+            : globalPresentation.ellipseStyle,
         labelStyle: shouldApplySourceStyle("labelStyle")
             ? new SourceAwareLabelStyle(normalizeGlobalLabelStyle(globalPresentation.labelStyle), sourcePresentations)
             : globalPresentation.labelStyle,
         maskStyle: shouldApplySourceStyle("maskStyle")
             ? new SourceAwareMaskStyle(normalizeGlobalMaskStyle(globalPresentation.maskStyle), sourcePresentations)
             : globalPresentation.maskStyle,
+        markerStyle: shouldApplySourceStyle("markerStyle")
+            ? new SourceAwareMarkerStyle(normalizeGlobalMarkerStyle(globalPresentation.markerStyle), sourcePresentations)
+            : globalPresentation.markerStyle,
+        maskHaloStyle: shouldApplySourceStyle("maskHaloStyle")
+            ? new SourceAwareMaskHaloStyle(normalizeGlobalMaskHaloStyle(globalPresentation.maskHaloStyle), sourcePresentations)
+            : globalPresentation.maskHaloStyle,
         polygonStyle: shouldApplySourceStyle("polygonStyle")
             ? new SourceAwarePolygonStyle(normalizeGlobalPolygonStyle(globalPresentation.polygonStyle), sourcePresentations)
             : globalPresentation.polygonStyle,
@@ -3720,6 +4127,17 @@ function createSourceAwarePresentation(globalPresentation = {}, sources, options
             : globalPresentation.keypointStyle,
     };
 }
+class SourceAwareBoxCornerStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        return resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "boxCornerStyle")?.resolve(detection, context);
+    }
+}
 class SourceAwareBoxStyle {
     globalStyle;
     sourcePresentations;
@@ -3732,6 +4150,18 @@ class SourceAwareBoxStyle {
         return style?.resolve(detection, context);
     }
 }
+class SourceAwareEllipseStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "ellipseStyle");
+        return style?.resolve(detection, context);
+    }
+}
 class SourceAwareLabelStyle {
     globalStyle;
     sourcePresentations;
@@ -3759,6 +4189,30 @@ class SourceAwareMaskStyle {
         return style?.resolve(detection, context);
     }
 }
+class SourceAwareMaskHaloStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "maskHaloStyle");
+        return style?.resolve(detection, context);
+    }
+}
+class SourceAwareMarkerStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "markerStyle");
+        return style?.resolve(detection, context);
+    }
+}
 class SourceAwarePolygonStyle {
     globalStyle;
     sourcePresentations;
@@ -3814,6 +4268,12 @@ function normalizeGlobalLabelStyle(style) {
 function normalizeGlobalMaskStyle(style) {
     return style === undefined ? new BaseMaskStyle() : style;
 }
+function normalizeGlobalMaskHaloStyle(style) {
+    return style === undefined ? createDefaultMaskHaloStyle() : style;
+}
+function normalizeGlobalMarkerStyle(style) {
+    return style === undefined ? new BaseMarkerStyle() : style;
+}
 function normalizeGlobalPolygonStyle(style) {
     return style === undefined ? new BasePolygonStyle() : style;
 }
@@ -4310,6 +4770,180 @@ function writePaletteEntry(palette, id, color, alpha) {
     palette[offset + 3] = Math.max(0, Math.min(alpha, 1));
 }
 
+const DEFAULT_ELLIPSE_SEGMENT_COUNT = 48;
+const FULL_TURN = Math.PI * 2;
+const GEOMETRY_EPSILON = 1e-9;
+const MIN_ELLIPSE_SEGMENT_COUNT = 4;
+const MAX_ELLIPSE_SEGMENT_COUNT = 512;
+/**
+ * Samples an ellipse or elliptical arc into a deterministic polyline so every
+ * backend rasterizes the same structural geometry, including dashed strokes.
+ *
+ * A closed ellipse returns `segmentCount` points without repeating the first
+ * point; an open arc returns `segmentCount + 1` points including both
+ * endpoints.
+ */
+function sampleEllipseArc(ellipse, segmentCount = DEFAULT_ELLIPSE_SEGMENT_COUNT) {
+    validateEllipseGeometry(ellipse);
+    assertIntegerAtLeast(segmentCount, MIN_ELLIPSE_SEGMENT_COUNT, "segmentCount");
+    const rotation = ellipse.rotation ?? 0;
+    const startAngle = ellipse.startAngle ?? 0;
+    const endAngle = ellipse.endAngle ?? startAngle + FULL_TURN;
+    const range = endAngle - startAngle;
+    const closed = ellipse.startAngle === undefined;
+    const pointCount = closed ? segmentCount : segmentCount + 1;
+    const cosRotation = Math.cos(rotation);
+    const sinRotation = Math.sin(rotation);
+    const points = [];
+    for (let index = 0; index < pointCount; index += 1) {
+        const angle = startAngle + (range * index) / segmentCount;
+        const localX = Math.cos(angle) * ellipse.radiusX;
+        const localY = Math.sin(angle) * ellipse.radiusY;
+        points.push({
+            x: ellipse.center.x + localX * cosRotation - localY * sinRotation,
+            y: ellipse.center.y + localX * sinRotation + localY * cosRotation,
+        });
+    }
+    return { closed, points };
+}
+/**
+ * Chooses a bounded segment count from the ellipse's on-screen radius. The
+ * result targets sub-pixel chord error without making tiny markers expensive.
+ */
+function resolveEllipseSegmentCount(ellipse, viewportScale = 1, maxErrorPixels = 0.5) {
+    validateEllipseGeometry(ellipse);
+    assertPositiveFinite(viewportScale, "viewportScale");
+    assertPositiveFinite(maxErrorPixels, "maxErrorPixels");
+    const screenRadius = Math.max(ellipse.radiusX, ellipse.radiusY) * viewportScale;
+    assertPositiveFinite(screenRadius, "screenRadius");
+    const clampedError = Math.min(maxErrorPixels, screenRadius);
+    const maxStep = clampedError === screenRadius
+        ? Math.PI / 2
+        : 2 * Math.acos(1 - clampedError / screenRadius);
+    const startAngle = ellipse.startAngle ?? 0;
+    const endAngle = ellipse.endAngle ?? startAngle + FULL_TURN;
+    const arcLength = Math.abs(endAngle - startAngle);
+    const segmentCount = Math.ceil(arcLength / maxStep);
+    return Math.min(MAX_ELLIPSE_SEGMENT_COUNT, Math.max(MIN_ELLIPSE_SEGMENT_COUNT, segmentCount));
+}
+/**
+ * Resolves a marker instruction into media-space geometry. Screen-space sizes
+ * are divided by the viewport scale, matching stroke-width semantics.
+ */
+function resolveMarkerGeometry(marker, viewportScale = 1) {
+    assertFinitePoint(marker.center, "center");
+    assertPositiveFinite(marker.size, "size");
+    assertPositiveFinite(viewportScale, "viewportScale");
+    if (marker.rotation !== undefined) {
+        assertFinite(marker.rotation, "rotation");
+    }
+    const size = marker.sizeSpace === MarkerSizeSpace.Screen
+        ? marker.size / viewportScale
+        : marker.size;
+    const radius = size / 2;
+    const rotation = marker.rotation ?? 0;
+    if (marker.shape === MarkerShape.Circle) {
+        return { center: marker.center, kind: "circle", radius };
+    }
+    if (marker.shape === MarkerShape.Cross) {
+        return {
+            closed: false,
+            kind: "subpaths",
+            subpaths: [
+                [
+                    rotatePoint(marker.center, -radius, -radius, rotation),
+                    rotatePoint(marker.center, radius, radius, rotation),
+                ],
+                [
+                    rotatePoint(marker.center, radius, -radius, rotation),
+                    rotatePoint(marker.center, -radius, radius, rotation),
+                ],
+            ],
+        };
+    }
+    if (marker.shape === MarkerShape.Square) {
+        return {
+            closed: true,
+            kind: "subpaths",
+            subpaths: [
+                [
+                    rotatePoint(marker.center, -radius, -radius, rotation),
+                    rotatePoint(marker.center, radius, -radius, rotation),
+                    rotatePoint(marker.center, radius, radius, rotation),
+                    rotatePoint(marker.center, -radius, radius, rotation),
+                ],
+            ],
+        };
+    }
+    // Triangle: equilateral, inscribed in the marker circle, pointing toward
+    // positive y at rotation 0.
+    const baseOffsetY = -radius / 2;
+    const baseOffsetX = radius * (Math.sqrt(3) / 2);
+    return {
+        closed: true,
+        kind: "subpaths",
+        subpaths: [
+            [
+                rotatePoint(marker.center, 0, radius, rotation),
+                rotatePoint(marker.center, baseOffsetX, baseOffsetY, rotation),
+                rotatePoint(marker.center, -baseOffsetX, baseOffsetY, rotation),
+            ],
+        ],
+    };
+}
+function validateEllipseGeometry(ellipse) {
+    assertFinitePoint(ellipse.center, "center");
+    assertPositiveFinite(ellipse.radiusX, "radiusX");
+    assertPositiveFinite(ellipse.radiusY, "radiusY");
+    if (ellipse.rotation !== undefined) {
+        assertFinite(ellipse.rotation, "rotation");
+    }
+    const hasStart = ellipse.startAngle !== undefined;
+    const hasEnd = ellipse.endAngle !== undefined;
+    if (hasStart !== hasEnd) {
+        throw new RangeError("startAngle and endAngle must be provided together");
+    }
+    if (hasStart && hasEnd) {
+        assertFinite(ellipse.startAngle, "startAngle");
+        assertFinite(ellipse.endAngle, "endAngle");
+        const range = Math.abs(ellipse.endAngle - ellipse.startAngle);
+        if (range <= GEOMETRY_EPSILON || range >= FULL_TURN - GEOMETRY_EPSILON) {
+            throw new RangeError("ellipse arc range must be greater than 0 and less than one full turn");
+        }
+    }
+}
+function assertFinitePoint(point, name) {
+    assertFinite(point.x, `${name}.x`);
+    assertFinite(point.y, `${name}.y`);
+}
+function assertFinite(value, name) {
+    if (!Number.isFinite(value)) {
+        throw new RangeError(`${name} must be finite`);
+    }
+}
+function assertPositiveFinite(value, name) {
+    assertFinite(value, name);
+    if (value <= 0) {
+        throw new RangeError(`${name} must be greater than 0`);
+    }
+}
+function assertIntegerAtLeast(value, minimum, name) {
+    if (!Number.isInteger(value) || value < minimum) {
+        throw new RangeError(`${name} must be an integer of at least ${minimum}`);
+    }
+}
+function rotatePoint(center, offsetX, offsetY, rotation) {
+    if (rotation === 0) {
+        return { x: center.x + offsetX, y: center.y + offsetY };
+    }
+    const cosRotation = Math.cos(rotation);
+    const sinRotation = Math.sin(rotation);
+    return {
+        x: center.x + offsetX * cosRotation - offsetY * sinRotation,
+        y: center.y + offsetX * sinRotation + offsetY * cosRotation,
+    };
+}
+
 function includeDefined(values) {
     return Object.fromEntries(Object.entries(values).filter(([, value]) => value !== undefined));
 }
@@ -4426,5 +5060,5 @@ var MediaSessionActivityStatus;
     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, annotationRendererKinds, annotationRenderers, 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, resolveAnnotationRendererPresentation, resolveAnnotationStyleState, resolveContrastTextColor, resolveDetectionClassColorStyle, resolveMaskStyleOpacity, resolveStyleValue, screenToMedia, selectDetectionFrame, topLeftRectToCenterRect, validateDetectionFrames };
+export { AnnotationFrameMutationKind, AnnotationGeometryKind, AnnotationGestureStateKind, AnnotationHandleKind, BaseBoxCornerStyle, BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMarkerStyle, BaseMaskStyle, BasePolygonStyle, BasePolylineStyle, BoxShape, StrokeAlignment as 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, MarkerShape, MarkerSizeSpace, MaskRenderMode, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, RegionRendererComposeMode, RegionRendererRegionKind, RegionRendererSourceKind, SUPERVISION_ROBOFLOW_COLOR, ShapeInstructionKind, StrokeAlignment, annotationRendererKinds, annotationRenderers, 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, followDetectionPickAcrossFrames, getAnnotationHandles, getBufferedDetectionTimelineFrameSnapshot, getDetectionRect, getPointsRect, haveSameDetectionPickIdentities, includeDefined, isDeflatedBase64DetectionMaskPayload, lightenColor, mediaToScreen, mergeDetectionMasks, mergeDetectionPolygonsByClass, normalizeDetectionClassName, offsetDetection, pickAnnotationHandle, pickDetectionAtPoint, pickDetectionByMaskId, pointInPolygon, polygonArea, polygonToRect, rasterizePolygonToMask, rasterizeRectToMask, rebaseDetectionPickToFrame, rectArea, rectToPolygon, resolveAnnotationRendererPresentation, resolveAnnotationStyleState, resolveContrastTextColor, resolveDetectionClassColorStyle, resolveEllipseSegmentCount, resolveMarkerGeometry, resolveMaskStyleOpacity, resolveStyleValue, sampleEllipseArc, screenToMedia, selectDetectionFrame, topLeftRectToCenterRect, validateDetectionFrames };
 //# sourceMappingURL=index.js.map