supervision 0.2.1 → 0.2.2

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

@@ -120,6 +120,13 @@ function copyDetectionFrame(frame) {
             metadata: detection.metadata
                 ? copyDetectionMetadata(detection.metadata)
                 : undefined,
+            orientedBox: detection.orientedBox
+                ? {
+                    points: detection.orientedBox.points.map((point) => ({
+                        ...point,
+                    })),
+                }
+                : undefined,
             polygon: detection.polygon
                 ? {
                     points: detection.polygon.points.map((point) => ({ ...point })),
@@ -252,6 +259,17 @@ function validateDetectionFrames(detectionFrames) {
             }
             validatePoints(detection.polygon?.points, () => `${detectionPath()}.polygon`, 3);
             validatePoints(detection.polyline?.points, () => `${detectionPath()}.polyline`, 2);
+            if (detection.orientedBox !== undefined) {
+                const points = detection.orientedBox?.points;
+                const path = () => `${detectionPath()}.orientedBox.points`;
+                if (!Array.isArray(points) || points.length !== 4) {
+                    throw new Error(`${path()} must contain exactly 4 points.`);
+                }
+                for (let index = 0; index < points.length; index += 1) {
+                    validateNumber(points[index]?.x, () => `${path()}[${index}].x`);
+                    validateNumber(points[index]?.y, () => `${path()}[${index}].y`);
+                }
+            }
             if (detection.keypoints) {
                 validatePoints(detection.keypoints.points, () => `${detectionPath()}.keypoints`, 1);
                 if (detection.keypoints.visibility !== undefined &&
@@ -1374,12 +1392,12 @@ function createColdDetectionFrameSource(options) {
  * Projects one detection frame from its declared source coordinate space into
  * `target`.
  *
- * Rectangles, polygons, polylines, and keypoints are scaled. Masks are left
- * untouched because a `DetectionMask` already carries the mask-pixel
- * dimensions its `counts` are encoded against; scaling them here would apply
- * the ratio twice. Frames without `coordinateSpace`, with a degenerate space,
- * or already in the target space are returned unchanged so mixed producers can
- * share one source.
+ * Rectangles, polygons, oriented boxes, polylines, and keypoints are scaled.
+ * Masks are left untouched because a `DetectionMask` already carries the
+ * mask-pixel dimensions its `counts` are encoded against; scaling them here
+ * would apply the ratio twice. Frames without `coordinateSpace`, with a
+ * degenerate space, or already in the target space are returned unchanged so
+ * mixed producers can share one source.
  */
 function projectDetectionFrame(frame, target) {
     const space = frame.coordinateSpace;
@@ -1420,6 +1438,9 @@ function projectDetection(detection, scaleX, scaleY) {
         ...(detection.polygon
             ? { polygon: scalePolygon(detection.polygon, scaleX, scaleY) }
             : {}),
+        ...(detection.orientedBox
+            ? { orientedBox: scaleOrientedBox(detection.orientedBox, scaleX, scaleY) }
+            : {}),
         ...(detection.polyline
             ? { polyline: scalePolyline(detection.polyline, scaleX, scaleY) }
             : {}),
@@ -1439,6 +1460,30 @@ function scaleRect(rect, scaleX, scaleY) {
 function scalePolygon(polygon, scaleX, scaleY) {
     return { points: scalePoints(polygon.points, scaleX, scaleY) };
 }
+/**
+ * Scales an explicit oriented-box quadrilateral by independent axis factors.
+ *
+ * A uniform scale keeps every vertex angle intact, but `scaleX` and `scaleY`
+ * can differ when the source and target aspect ratios do not match. That
+ * skews the quadrilateral's angles exactly the way it already skews a scaled
+ * `Rect` or polygon, so a non-uniform projection stays internally consistent
+ * across every detection geometry kind instead of only axis-aligned ones.
+ */
+function scaleOrientedBox(orientedBox, scaleX, scaleY) {
+    // `points` is typed as an exact 4-tuple, but a caller that bypasses the
+    // type system (e.g. a detection deserialized from untyped data, the same
+    // scenario BaseOrientedBoxStyle's own points.length !== 4 guard defends
+    // against) can hand this an array of a different length. Scale whatever
+    // length was actually given instead of destructuring into a synthetic
+    // four-element tuple: destructuring a 3-point array pads a real
+    // `undefined` into the fourth slot (which crashes downstream reading
+    // `.x`/`.y`), and destructuring a 5+-point array silently truncates it
+    // into an apparently-valid box. Preserving the real length lets the
+    // style's own guard see and reject the malformed cardinality instead of
+    // this function corrupting it into something that looks valid or crashes.
+    const scaled = scalePoints(orientedBox.points, scaleX, scaleY);
+    return { points: scaled };
+}
 function scalePolyline(polyline, scaleX, scaleY) {
     return { points: scalePoints(polyline.points, scaleX, scaleY) };
 }
@@ -4440,6 +4485,7 @@ function getPointsRect(points) {
 function getDetectionRect(detection) {
     return (detection.rect ??
         getPointsRect(detection.polygon?.points ?? []) ??
+        getPointsRect(detection.orientedBox?.points ?? []) ??
         getPointsRect(detection.polyline?.points ?? []) ??
         getPointsRect(detection.keypoints?.points ?? []));
 }
@@ -4699,6 +4745,7 @@ var DetectionPickTarget;
     DetectionPickTarget["Keypoint"] = "keypoint";
     DetectionPickTarget["Label"] = "label";
     DetectionPickTarget["Mask"] = "mask";
+    DetectionPickTarget["OrientedBox"] = "orientedBox";
     DetectionPickTarget["Polygon"] = "polygon";
     DetectionPickTarget["Polyline"] = "polyline";
 })(DetectionPickTarget || (DetectionPickTarget = {}));
@@ -4757,6 +4804,10 @@ function pickDetectionAtPoint(frame, point, options = {}) {
         if (detection.polygon && pointInPolygon(point, detection.polygon.points)) {
             pushCandidate(DetectionPickTarget.Polygon, Math.max(1, polygonArea(detection.polygon.points)));
         }
+        if (detection.orientedBox &&
+            pointInPolygon(point, detection.orientedBox.points)) {
+            pushCandidate(DetectionPickTarget.OrientedBox, Math.max(1, polygonArea(detection.orientedBox.points)));
+        }
         if (detection.polyline) {
             const segmentIndex = findHitSegment(point, detection.polyline.points, polylinePadding);
             if (segmentIndex !== -1) {
@@ -5282,6 +5333,13 @@ function offsetDetection(detection, dx, dy) {
         ...(detection.polygon
             ? { polygon: { points: detection.polygon.points.map(offsetPoint) } }
             : {}),
+        ...(detection.orientedBox
+            ? {
+                orientedBox: {
+                    points: detection.orientedBox.points.map(offsetPoint),
+                },
+            }
+            : {}),
         ...(detection.polyline
             ? { polyline: { points: detection.polyline.points.map(offsetPoint) } }
             : {}),
@@ -6460,6 +6518,272 @@ class BaseMarkerStyle {
     }
 }
 
+const DEFAULT_ORIENTED_BOX_STROKE_ALPHA = 1;
+const DEFAULT_ORIENTED_BOX_STROKE_COLOR = 0x00ff66;
+const DEFAULT_ORIENTED_BOX_STROKE_WIDTH = 2;
+const DEFAULT_ORIENTED_BOX_FILL_ALPHA = 0.16;
+/**
+ * Default configurable oriented-box style.
+ *
+ * Converts detections carrying explicit `orientedBox` quadrilateral geometry
+ * into a renderer-neutral closed-path draw instruction, the same fill/stroke
+ * shape `BasePolygonStyle` produces. A quadrilateral is skipped, rather than
+ * emitted as an invalid or degenerate draw instruction, when it has fewer
+ * or more than four vertices, a non-finite (NaN/Infinity) coordinate, or exactly
+ * zero area (`polygonArea` already returns 0 for fewer than three points).
+ * There is no near-zero/epsilon tolerance; only exact zero area is rejected.
+ */
+class BaseOrientedBoxStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        const points = detection.orientedBox?.points;
+        if (!points ||
+            points.length !== 4 ||
+            points.some((point) => !Number.isFinite(point.x) || !Number.isFinite(point.y)) ||
+            context.hidden ||
+            polygonArea(points) === 0 ||
+            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,
+            ...(fill === null
+                ? {}
+                : {
+                    fill: {
+                        alpha: fill?.alpha ?? DEFAULT_ORIENTED_BOX_FILL_ALPHA,
+                        color: fill?.color ?? DEFAULT_ORIENTED_BOX_STROKE_COLOR,
+                    },
+                }),
+            ...(stroke === null
+                ? {}
+                : {
+                    stroke: resolveStrokeStyle(stroke, {
+                        alpha: DEFAULT_ORIENTED_BOX_STROKE_ALPHA,
+                        color: DEFAULT_ORIENTED_BOX_STROKE_COLOR,
+                        width: DEFAULT_ORIENTED_BOX_STROKE_WIDTH,
+                    }),
+                }),
+        };
+    }
+}
+
+var PercentageBarPlacement;
+(function (PercentageBarPlacement) {
+    PercentageBarPlacement["Top"] = "top";
+    PercentageBarPlacement["Bottom"] = "bottom";
+    PercentageBarPlacement["InsideTop"] = "insideTop";
+    PercentageBarPlacement["InsideBottom"] = "insideBottom";
+})(PercentageBarPlacement || (PercentageBarPlacement = {}));
+
+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_BAR_HEIGHT = 8;
+const DEFAULT_BACKGROUND_FILL = { alpha: 0.75, color: 0x0f172a };
+const DEFAULT_PROGRESS_ALPHA = 1;
+/**
+ * Configurable percentage bar style anchored to detection rectangles.
+ *
+ * Converts a detection's confidence or custom numeric metric into a
+ * proportional progress bar positioned relative to the detection bounding box.
+ */
+class BasePercentageBarStyle {
+    options;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    resolve(detection, context) {
+        if (context.hidden ||
+            this.options.shouldRender?.(detection, context) === false) {
+            return undefined;
+        }
+        const rect = getDetectionRect(detection);
+        if (!rect || rect.width <= 0 || rect.height <= 0) {
+            return undefined;
+        }
+        const rawValue = resolveStyleValue(this.options.value, detection, context) ??
+            detection.confidence ??
+            0;
+        const value = Math.min(1, Math.max(0, Number.isFinite(rawValue) ? rawValue : 0));
+        const height = resolveStyleValue(this.options.height, detection, context) ??
+            DEFAULT_BAR_HEIGHT;
+        if (!Number.isFinite(height) || height <= 0) {
+            return undefined;
+        }
+        const resolvedWidth = resolveStyleValue(this.options.width, detection, context);
+        const width = resolvedWidth !== undefined &&
+            Number.isFinite(resolvedWidth) &&
+            resolvedWidth > 0
+            ? resolvedWidth
+            : rect.width;
+        const placement = resolveStyleValue(this.options.placement, detection, context) ??
+            PercentageBarPlacement.Top;
+        const offset = resolveStyleValue(this.options.offset, detection, context);
+        const offsetX = offset?.x ?? 0;
+        const offsetY = (offset?.y ?? 0) + (this.options.offsetY ?? 0);
+        const rectTop = rect.y - rect.height / 2;
+        const rectBottom = rect.y + rect.height / 2;
+        const barLeft = rect.x - width / 2 + offsetX;
+        let barTop;
+        switch (placement) {
+            case PercentageBarPlacement.Bottom:
+                barTop = rectBottom + offsetY;
+                break;
+            case PercentageBarPlacement.InsideTop:
+                barTop = rectTop + offsetY;
+                break;
+            case PercentageBarPlacement.InsideBottom:
+                barTop = rectBottom - height + offsetY;
+                break;
+            case PercentageBarPlacement.Top:
+            default:
+                barTop = rectTop - height + offsetY;
+                break;
+        }
+        const backgroundRect = {
+            height,
+            width,
+            x: barLeft + width / 2,
+            y: barTop + height / 2,
+        };
+        const valueWidth = width * value;
+        const valueRect = {
+            height,
+            width: valueWidth,
+            x: barLeft + valueWidth / 2,
+            y: barTop + height / 2,
+        };
+        const background = this.resolveBackground(detection, context);
+        const fill = this.resolveFill(detection, context);
+        const border = this.resolveBorder(detection, context);
+        if (!background && !fill && !border) {
+            return undefined;
+        }
+        return {
+            ...(background ? { background } : {}),
+            ...(border ? { border } : {}),
+            ...(fill ? { fill } : {}),
+            backgroundRect,
+            value,
+            valueRect,
+        };
+    }
+    resolveBackground(detection, context) {
+        const background = resolveStyleValue(this.options.background, detection, context);
+        if (background === null) {
+            return undefined;
+        }
+        return {
+            alpha: background?.alpha ?? DEFAULT_BACKGROUND_FILL.alpha,
+            color: background?.color ?? DEFAULT_BACKGROUND_FILL.color,
+        };
+    }
+    resolveFill(detection, context) {
+        const fill = resolveStyleValue(this.options.fill, detection, context);
+        if (fill === null) {
+            return undefined;
+        }
+        if (fill) {
+            return {
+                alpha: fill.alpha ?? DEFAULT_PROGRESS_ALPHA,
+                color: fill.color ??
+                    resolveDetectionClassColorStyle(detection.className).stroke,
+            };
+        }
+        const classColor = resolveDetectionClassColorStyle(detection.className);
+        return {
+            alpha: DEFAULT_PROGRESS_ALPHA,
+            color: classColor.stroke,
+        };
+    }
+    resolveBorder(detection, context) {
+        const border = resolveStyleValue(this.options.border, detection, context);
+        if (!border) {
+            return undefined;
+        }
+        return resolveStrokeStyle(border, {
+            alpha: 1,
+            color: 0xffffff,
+            width: 1,
+        });
+    }
+}
+
 class BasePolygonStyle {
     options;
     constructor(options = {}) {
@@ -6611,78 +6935,6 @@ class BaseKeypointStyle {
     }
 }
 
-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_ELLIPSE_AXIS_RATIO = 0.35;
 const DEFAULT_ELLIPSE_START_ANGLE = (-45 * Math.PI) / 180;
@@ -6867,6 +7119,24 @@ function createDefaultMaskHaloStyle(options = {}) {
         },
     };
 }
+/**
+ * Canonical opt-in oriented-box presentation, styled the same as the default
+ * polygon fill/stroke so the two closed shapes read consistently together.
+ */
+function createDefaultOrientedBoxStyle(options = {}) {
+    const getClassColor = createClassColorResolver(options);
+    return new BaseOrientedBoxStyle({
+        fill: (detection) => ({
+            alpha: DEFAULT_FILL_ALPHA,
+            color: getClassColor(detection),
+        }),
+        stroke: (detection) => ({
+            alpha: 1,
+            color: getClassColor(detection),
+            width: DEFAULT_OUTLINE_WIDTH,
+        }),
+    });
+}
 function createDefaultPolygonStyle(options = {}) {
     const getClassColor = createClassColorResolver(options);
     return new BasePolygonStyle({
@@ -6896,6 +7166,15 @@ function createDefaultPolylineStyle(options = {}) {
         }),
     });
 }
+function createDefaultPercentageBarStyle(options = {}) {
+    const getClassColor = createClassColorResolver(options);
+    return new BasePercentageBarStyle({
+        fill: (detection) => ({
+            alpha: 1,
+            color: getClassColor(detection),
+        }),
+    });
+}
 function createClassColorResolver(options) {
     return (detection) => resolveDefaultClassColor(detection, options.getClassColor);
 }
@@ -6921,6 +7200,8 @@ const annotationRendererKinds = [
     "mask",
     "maskHalo",
     "marker",
+    "orientedBox",
+    "percentageBar",
     "polygon",
     "polyline",
     "region",
@@ -6971,6 +7252,8 @@ const annotationRenderers = {
     mask: (options) => createAnnotationRenderer("mask", options),
     maskHalo: (options) => createAnnotationRenderer("maskHalo", options),
     marker: (options) => createAnnotationRenderer("marker", options),
+    orientedBox: (options) => createAnnotationRenderer("orientedBox", options),
+    percentageBar: (options) => createAnnotationRenderer("percentageBar", options),
     polygon: (options) => createAnnotationRenderer("polygon", options),
     polyline: (options) => createAnnotationRenderer("polyline", options),
     region: (options) => ({ kind: "region", ...options }),
@@ -7023,6 +7306,16 @@ const annotationRendererRegistry = {
         createCanonicalStyle: createDefaultMarkerStyle,
         styleField: "markerStyle",
     },
+    orientedBox: {
+        cardinality: "singleton",
+        createCanonicalStyle: createDefaultOrientedBoxStyle,
+        styleField: "orientedBoxStyle",
+    },
+    percentageBar: {
+        cardinality: "singleton",
+        createCanonicalStyle: createDefaultPercentageBarStyle,
+        styleField: "percentageBarStyle",
+    },
     polygon: {
         cardinality: "singleton",
         createCanonicalStyle: createDefaultPolygonStyle,
@@ -7066,6 +7359,8 @@ function resolveAnnotationRendererPresentation(presentation) {
         maskHaloStyle: null,
         maskStyle: null,
         markerStyle: null,
+        orientedBoxStyle: null,
+        percentageBarStyle: null,
         polygonStyle: null,
         polylineStyle: null,
     };
@@ -7137,6 +7432,12 @@ function createSourceAwarePresentation(globalPresentation = {}, sources, options
         markerStyle: shouldApplySourceStyle("markerStyle")
             ? new SourceAwareMarkerStyle(normalizeGlobalMarkerStyle(globalPresentation.markerStyle), sourcePresentations)
             : globalPresentation.markerStyle,
+        orientedBoxStyle: shouldApplySourceStyle("orientedBoxStyle")
+            ? new SourceAwareOrientedBoxStyle(globalPresentation.orientedBoxStyle ?? null, sourcePresentations)
+            : globalPresentation.orientedBoxStyle,
+        percentageBarStyle: shouldApplySourceStyle("percentageBarStyle")
+            ? new SourceAwarePercentageBarStyle(normalizeGlobalPercentageBarStyle(globalPresentation.percentageBarStyle), sourcePresentations)
+            : globalPresentation.percentageBarStyle,
         maskHaloStyle: shouldApplySourceStyle("maskHaloStyle")
             ? new SourceAwareMaskHaloStyle(normalizeGlobalMaskHaloStyle(globalPresentation.maskHaloStyle), sourcePresentations)
             : globalPresentation.maskHaloStyle,
@@ -7237,6 +7538,29 @@ class SourceAwareMarkerStyle {
         return style?.resolve(detection, context);
     }
 }
+class SourceAwareOrientedBoxStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        return resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "orientedBoxStyle")?.resolve(detection, context);
+    }
+}
+class SourceAwarePercentageBarStyle {
+    globalStyle;
+    sourcePresentations;
+    constructor(globalStyle, sourcePresentations) {
+        this.globalStyle = globalStyle;
+        this.sourcePresentations = sourcePresentations;
+    }
+    resolve(detection, context) {
+        const style = resolveSourceStyle(detection, this.globalStyle, this.sourcePresentations, "percentageBarStyle");
+        return style?.resolve(detection, context);
+    }
+}
 class SourceAwarePolygonStyle {
     globalStyle;
     sourcePresentations;
@@ -7298,6 +7622,9 @@ function normalizeGlobalMaskHaloStyle(style) {
 function normalizeGlobalMarkerStyle(style) {
     return style === undefined ? new BaseMarkerStyle() : style;
 }
+function normalizeGlobalPercentageBarStyle(style) {
+    return style === undefined ? new BasePercentageBarStyle() : style;
+}
 function normalizeGlobalPolygonStyle(style) {
     return style === undefined ? new BasePolygonStyle() : style;
 }
@@ -8039,5 +8366,5 @@ var MediaSessionActivityStatus;
     MediaSessionActivityStatus["Waiting"] = "waiting";
 })(MediaSessionActivityStatus || (MediaSessionActivityStatus = {}));
 
-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, MediaErrorKind, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, PlaybackGateReach, RegionRendererComposeMode, RegionRendererCoverageKind, RegionRendererMediaEffectKind, RegionRendererRegionKind, RegionRendererSizeSpace, RegionRendererSourceKind, SUPERVISION_ROBOFLOW_COLOR, ShapeInstructionKind, StrokeAlignment, TrackingGeometry, annotationRendererKinds, annotationRenderers, applyAnnotationHandleDrag, canReuseMaskStyleArtifacts, centerRectToTopLeftRect, computeDetectionMaskRect, computeMaskBounds, containsPoint, convertDetectionBoxToMask, convertDetectionBoxToPolygon, convertDetectionMaskToBox, convertDetectionMaskToPolygon, convertDetectionPolygonToBox, convertDetectionPolygonToMask, copySortedDetectionFrames, createAnnotationEditingEngine, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createByteTrackTracker, createCBIoUTracker, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createDetectionPickKey, createEditableAnnotationFrameSession, createIdMaskFrame, createIdleDetectionBufferState, createMemoryColdDetectionFrameStore, createOCSortTracker, createProjectedDetectionFrameSource, createSortTracker, createSourceAwarePresentation, createViewportController, createWritableDetectionFrameSource, decodeCompressedRleCounts, decodeCompressedRleMask, decodeDetectionMaskPayload, deleteAnnotationVertex, detectMaskBorders, detectionFrameOverlapsRange, detectionPostProcessors, distanceToSegment, encodeBinaryMask, encodeBinaryMaskWithBounds, encodeCompressedRleCounts, encodeDetectionMaskPayload, extractDetectionMaskRectRuns, extractMaskContour, extractMaskRectRuns, filterDetectionFramesForRange, findClosestAnnotationSegment, followDetectionPickAcrossFrames, getAnnotationHandles, getBufferedDetectionTimelineFrameSnapshot, getDetectionRect, getPointsRect, haveSameDetectionPickIdentities, includeDefined, isDeflatedBase64DetectionMaskPayload, lightenColor, mediaToScreen, mergeDetectionMasks, mergeDetectionPolygonsByClass, normalizeDetectionClassName, offsetDetection, pickAnnotationHandle, pickDetectionAtPoint, pickDetectionByMaskId, pointInPolygon, polygonArea, polygonToRect, projectDetectionFrame, projectDetectionFrameForTracking, projectDetectionFrames, rasterizePolygonToMask, rasterizeRectToMask, rebaseDetectionPickToFrame, rectArea, rectToPolygon, resolveAnnotationRendererPresentation, resolveAnnotationRendererStyleFields, resolveAnnotationStyleState, resolveContrastTextColor, resolveDetectionClassColorStyle, resolveEllipseSegmentCount, resolveIdMaskPaletteId, resolveIdMaskStrokeTexels, resolveMarkerGeometry, resolveMaskStyleOpacity, resolveStyleValue, sampleEllipseArc, screenToMedia, selectDetectionFrame, topLeftRectToCenterRect, validateDetectionFrames, writeIdMaskPaletteEntry };
+export { AnnotationFrameMutationKind, AnnotationGeometryKind, AnnotationGestureStateKind, AnnotationHandleKind, BaseBoxCornerStyle, BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMarkerStyle, BaseMaskStyle, BaseOrientedBoxStyle, BasePercentageBarStyle, 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, MediaErrorKind, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, PercentageBarPlacement, PlaybackGateReach, RegionRendererComposeMode, RegionRendererCoverageKind, RegionRendererMediaEffectKind, RegionRendererRegionKind, RegionRendererSizeSpace, RegionRendererSourceKind, SUPERVISION_ROBOFLOW_COLOR, ShapeInstructionKind, StrokeAlignment, TrackingGeometry, annotationRendererKinds, annotationRenderers, applyAnnotationHandleDrag, canReuseMaskStyleArtifacts, centerRectToTopLeftRect, computeDetectionMaskRect, computeMaskBounds, containsPoint, convertDetectionBoxToMask, convertDetectionBoxToPolygon, convertDetectionMaskToBox, convertDetectionMaskToPolygon, convertDetectionPolygonToBox, convertDetectionPolygonToMask, copySortedDetectionFrames, createAnnotationEditingEngine, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createByteTrackTracker, createCBIoUTracker, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createDetectionPickKey, createEditableAnnotationFrameSession, createIdMaskFrame, createIdleDetectionBufferState, createMemoryColdDetectionFrameStore, createOCSortTracker, createProjectedDetectionFrameSource, createSortTracker, createSourceAwarePresentation, createViewportController, createWritableDetectionFrameSource, decodeCompressedRleCounts, decodeCompressedRleMask, decodeDetectionMaskPayload, deleteAnnotationVertex, detectMaskBorders, detectionFrameOverlapsRange, detectionPostProcessors, distanceToSegment, encodeBinaryMask, encodeBinaryMaskWithBounds, encodeCompressedRleCounts, encodeDetectionMaskPayload, extractDetectionMaskRectRuns, extractMaskContour, extractMaskRectRuns, filterDetectionFramesForRange, findClosestAnnotationSegment, followDetectionPickAcrossFrames, getAnnotationHandles, getBufferedDetectionTimelineFrameSnapshot, getDetectionRect, getPointsRect, haveSameDetectionPickIdentities, includeDefined, isDeflatedBase64DetectionMaskPayload, lightenColor, mediaToScreen, mergeDetectionMasks, mergeDetectionPolygonsByClass, normalizeDetectionClassName, offsetDetection, pickAnnotationHandle, pickDetectionAtPoint, pickDetectionByMaskId, pointInPolygon, polygonArea, polygonToRect, projectDetectionFrame, projectDetectionFrameForTracking, projectDetectionFrames, rasterizePolygonToMask, rasterizeRectToMask, rebaseDetectionPickToFrame, rectArea, rectToPolygon, resolveAnnotationRendererPresentation, resolveAnnotationRendererStyleFields, resolveAnnotationStyleState, resolveContrastTextColor, resolveDetectionClassColorStyle, resolveEllipseSegmentCount, resolveIdMaskPaletteId, resolveIdMaskStrokeTexels, resolveMarkerGeometry, resolveMaskStyleOpacity, resolveStyleValue, sampleEllipseArc, screenToMedia, selectDetectionFrame, topLeftRectToCenterRect, validateDetectionFrames, writeIdMaskPaletteEntry };
 //# sourceMappingURL=index.js.map