@meta-sam/graphics 0.1.5

package/dist/renderer.js

@@ -0,0 +1,649 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates. All Rights Reserved.
+ */
+import { InvalidSegmentationMaskError, decodeMaskToRaster, } from '@meta-sam/parser';
+import { InvalidMaskPayloadError, InvalidRenderOptionsError, Path2DUnavailableError, RendererDisposedError, SegmentationResourceLimitError, UnsupportedMaskEncodingError, } from './errors.js';
+import { traceContour } from './contour.js';
+const palette = [
+    '#1677ff',
+    '#00a870',
+    '#d46b08',
+    '#c41d7f',
+    '#531dab',
+    '#08979c',
+    '#cf1322',
+    '#5b8c00',
+];
+function positiveInteger(value, fallback, name) {
+    if (value === undefined)
+        return fallback;
+    if (!Number.isSafeInteger(value) || value <= 0) {
+        throw new TypeError(`${name} must be a positive safe integer.`);
+    }
+    return value;
+}
+function unitInterval(value, fallback, name) {
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== 'number' || !Number.isFinite(value) || value < 0 || value > 1) {
+        throw new TypeError(`${name} must be a finite number from zero through one.`);
+    }
+    return value;
+}
+function colorFor(identity) {
+    let hash = 2_166_136_261;
+    for (let index = 0; index < identity.length; index += 1) {
+        hash ^= identity.charCodeAt(index);
+        hash = Math.imul(hash, 16_777_619);
+    }
+    return palette[(hash >>> 0) % palette.length];
+}
+/**
+ * The fill and stroke color the renderer assigns to an object identifier.
+ * Exposed so legends and inspectors can match the composited overlay exactly.
+ */
+export function objectColor(objectId) {
+    return colorFor(objectId);
+}
+/**
+ * Retained bookkeeping charged per known mask: the map entry plus the retained
+ * descriptor. Payload and traced characters are deliberately excluded — the
+ * payload belongs to the parser's record and the path is traced on demand.
+ */
+const RETAINED_MASK_OVERHEAD = 64;
+function sameBounds(left, right) {
+    if (left === undefined || right === undefined)
+        return left === right;
+    return (left.left === right.left &&
+        left.top === right.top &&
+        left.right === right.right &&
+        left.bottom === right.bottom);
+}
+/**
+ * Compares two mask records field by field, cheapest first, so that identical
+ * payloads are only scanned when everything else already matches.
+ */
+function sameMaskRecord(left, right) {
+    return (left === right ||
+        (left.identity === right.identity &&
+            left.revision === right.revision &&
+            left.order === right.order &&
+            left.objectId === right.objectId &&
+            (left.frame?.frameIndex ?? null) === (right.frame?.frameIndex ?? null) &&
+            left.mask.encoding === right.mask.encoding &&
+            left.mask.width === right.mask.width &&
+            left.mask.height === right.mask.height &&
+            left.mask.payload.length === right.mask.payload.length &&
+            sameBounds(left.bounds, right.bounds) &&
+            left.mask.payload === right.mask.payload));
+}
+function boxIdentity(record) {
+    return `box:${record.frame?.frameIndex ?? '*'}:${record.objectId}`;
+}
+function hiddenSet(hidden) {
+    if (hidden === undefined)
+        return new Set();
+    return hidden instanceof Set ? hidden : new Set(hidden);
+}
+function validateRectangle(rectangle, name) {
+    if (!Number.isFinite(rectangle.x) ||
+        !Number.isFinite(rectangle.y) ||
+        !Number.isFinite(rectangle.width) ||
+        !Number.isFinite(rectangle.height) ||
+        rectangle.width <= 0 ||
+        rectangle.height <= 0) {
+        throw new InvalidRenderOptionsError(`${name} must contain finite coordinates and positive dimensions.`);
+    }
+}
+function validateFit(fit) {
+    const resolved = fit ?? 'contain';
+    if (resolved !== 'contain' && resolved !== 'cover' && resolved !== 'fill') {
+        throw new InvalidRenderOptionsError('fit must be contain, cover, or fill.');
+    }
+    return resolved;
+}
+function resolveDevicePixelRatio(option) {
+    const value = typeof option === 'function' ? option() : (option ?? 1);
+    if (!Number.isFinite(value) || value <= 0) {
+        throw new InvalidRenderOptionsError('devicePixelRatio must be finite and greater than zero.');
+    }
+    return value;
+}
+function fittedTarget(source, display, fit) {
+    if (fit === 'fill')
+        return display;
+    const scale = fit === 'contain'
+        ? Math.min(display.width / source.width, display.height / source.height)
+        : Math.max(display.width / source.width, display.height / source.height);
+    const width = source.width * scale;
+    const height = source.height * scale;
+    return {
+        x: display.x + (display.width - width) / 2,
+        y: display.y + (display.height - height) / 2,
+        width,
+        height,
+    };
+}
+function drawDecodedFrame(context, frame, source, target, display, devicePixelRatio) {
+    context.save();
+    try {
+        context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+        context.clearRect(0, 0, display.width, display.height);
+        context.drawImage(frame, source.x, source.y, source.width, source.height, target.x, target.y, target.width, target.height);
+    }
+    finally {
+        context.restore();
+    }
+}
+function validateFrame(frameIndex) {
+    if (frameIndex !== undefined &&
+        (!Number.isSafeInteger(frameIndex) || frameIndex < 0)) {
+        throw new InvalidRenderOptionsError('Frame indexes must be non-negative safe integers.');
+    }
+}
+function retainMask(record) {
+    return {
+        identity: record.identity,
+        revision: record.revision,
+        record,
+        objectId: record.objectId,
+        ...(record.frame === undefined ? {} : { frameIndex: record.frame.frameIndex }),
+        width: record.mask.width,
+        height: record.mask.height,
+        ...(record.bounds === undefined ? {} : { bounds: record.bounds }),
+    };
+}
+function traceMask(mask, limit) {
+    if (mask.encoding !== 'one_bit' && mask.encoding !== 'lossless') {
+        throw new UnsupportedMaskEncodingError(mask.encoding);
+    }
+    let raster;
+    try {
+        raster = decodeMaskToRaster(mask);
+    }
+    catch (error) {
+        if (error instanceof InvalidSegmentationMaskError) {
+            throw new InvalidMaskPayloadError(error.message);
+        }
+        throw error;
+    }
+    return traceContour(raster, mask.width, mask.height, limit);
+}
+/** Default fill opacity under the contour. */
+const DEFAULT_MASK_FILL_OPACITY = 0.35;
+/** Default contour opacity. */
+const DEFAULT_MASK_OUTLINE_OPACITY = 0.8;
+/**
+ * Contour width as a fraction of the shorter source edge: about 2.2 source
+ * pixels on 720p, so the weight tracks the resolution rather than a fixed
+ * pixel count.
+ */
+const MASK_OUTLINE_WIDTH_RATIO = 0.003;
+/** Contour width in target CSS pixels when the source size is unusable. */
+const FALLBACK_MASK_OUTLINE_WIDTH = 1.5;
+function resolveMaskOutline(option) {
+    if (option === false) {
+        return { enabled: false, width: null, opacity: DEFAULT_MASK_OUTLINE_OPACITY };
+    }
+    if (option === undefined || option === true) {
+        return { enabled: true, width: null, opacity: DEFAULT_MASK_OUTLINE_OPACITY };
+    }
+    if (typeof option !== 'object' || option === null) {
+        throw new TypeError('maskOutline must be a boolean or an options object.');
+    }
+    let width = null;
+    if (option.width !== undefined) {
+        if (!Number.isFinite(option.width) || option.width <= 0) {
+            throw new TypeError('maskOutline.width must be a finite number greater than zero.');
+        }
+        width = option.width;
+    }
+    return {
+        enabled: true,
+        width,
+        opacity: unitInterval(option.opacity, DEFAULT_MASK_OUTLINE_OPACITY, 'maskOutline.opacity'),
+    };
+}
+export class SegmentationRenderer {
+    #limits;
+    #maskFillOpacity;
+    #outline;
+    #cache = new Map();
+    #cacheComplexity = 0;
+    #state;
+    #tail = Promise.resolve();
+    #epoch = 0;
+    #disposed = false;
+    constructor(options = {}) {
+        this.#maskFillOpacity = unitInterval(options.maskFillOpacity, DEFAULT_MASK_FILL_OPACITY, 'maskFillOpacity');
+        this.#outline = resolveMaskOutline(options.maskOutline);
+        this.#limits = {
+            maxCachedPaths: positiveInteger(options.maxCachedPaths, 128, 'maxCachedPaths'),
+            maxCachedComplexity: positiveInteger(options.maxCachedComplexity, 250_000, 'maxCachedComplexity'),
+            maxRecords: positiveInteger(options.maxRecords, 20_000, 'maxRecords'),
+            maxMasks: positiveInteger(options.maxMasks, 4_096, 'maxMasks'),
+            maxBoxes: positiveInteger(options.maxBoxes, 8_192, 'maxBoxes'),
+            maxMaskArea: positiveInteger(options.maxMaskArea, 16_777_216, 'maxMaskArea'),
+            maxMaskPayloadLength: positiveInteger(options.maxMaskPayloadLength, 2_000_000, 'maxMaskPayloadLength'),
+            maxPathComplexity: positiveInteger(options.maxPathComplexity, 250_000, 'maxPathComplexity'),
+            maxRetainedComplexity: positiveInteger(options.maxRetainedComplexity, 1_000_000, 'maxRetainedComplexity'),
+        };
+    }
+    update(result, options = {}) {
+        if (this.#disposed)
+            return Promise.reject(new RendererDisposedError());
+        const epoch = this.#epoch;
+        const task = this.#tail.then(async () => {
+            if (this.#disposed)
+                throw new RendererDisposedError();
+            await Promise.resolve();
+            if (this.#disposed)
+                throw new RendererDisposedError();
+            if (epoch !== this.#epoch)
+                return;
+            const reset = options.reset === true;
+            const candidate = this.#buildState(result, reset);
+            if (this.#disposed)
+                throw new RendererDisposedError();
+            if (epoch !== this.#epoch)
+                return;
+            if (reset)
+                this.#dropCache();
+            this.#state = candidate;
+            this.#pruneCache(candidate);
+        });
+        this.#tail = task.catch(() => undefined);
+        return task;
+    }
+    renderVideoFrame(composition, options = {}) {
+        if (composition.signal.aborted)
+            return false;
+        if (this.#disposed)
+            throw new RendererDisposedError();
+        const fit = validateFit(options.fit);
+        const devicePixelRatio = resolveDevicePixelRatio(options.devicePixelRatio);
+        validateFrame(composition.frameIndex);
+        const source = {
+            x: 0,
+            y: 0,
+            width: composition.frame.width,
+            height: composition.frame.height,
+        };
+        const display = {
+            x: 0,
+            y: 0,
+            width: composition.canvas.width / devicePixelRatio,
+            height: composition.canvas.height / devicePixelRatio,
+        };
+        validateRectangle(source, 'frame');
+        validateRectangle(display, 'canvas');
+        const target = fittedTarget(source, display, fit);
+        validateRectangle(target, 'target');
+        const fallbackCanvas = composition.fallbackCanvas;
+        const fallbackCtx = composition.fallbackCtx;
+        if ((fallbackCanvas === undefined) !== (fallbackCtx === undefined)) {
+            throw new InvalidRenderOptionsError('fallbackCanvas and fallbackCtx must be provided together.');
+        }
+        if (fallbackCanvas !== undefined &&
+            (fallbackCanvas.width !== composition.canvas.width ||
+                fallbackCanvas.height !== composition.canvas.height)) {
+            throw new InvalidRenderOptionsError('The fallback canvas dimensions must match the composition canvas.');
+        }
+        const state = this.#state;
+        if (state !== undefined) {
+            if (state.media !== 'video') {
+                throw new InvalidRenderOptionsError(`Cannot render ${state.media} segmentation as video.`);
+            }
+            const Constructor = globalThis
+                .Path2D;
+            if (Constructor === undefined)
+                throw new Path2DUnavailableError();
+        }
+        const { ctx } = composition;
+        if (fallbackCtx !== undefined) {
+            drawDecodedFrame(fallbackCtx, composition.frame, source, target, display, devicePixelRatio);
+        }
+        drawDecodedFrame(ctx, composition.frame, source, target, display, devicePixelRatio);
+        if (composition.signal.aborted)
+            return false;
+        ctx.save();
+        try {
+            ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+            this.render(ctx, {
+                media: 'video',
+                frameIndex: composition.frameIndex,
+                source,
+                target,
+                ...(options.hiddenIds === undefined ? {} : { hiddenIds: options.hiddenIds }),
+            });
+        }
+        finally {
+            ctx.restore();
+        }
+        return !composition.signal.aborted;
+    }
+    render(context, options) {
+        if (this.#disposed)
+            throw new RendererDisposedError();
+        validateRectangle(options.source, 'source');
+        validateRectangle(options.target, 'target');
+        if (options.media === 'video')
+            validateFrame(options.frameIndex);
+        const state = this.#state;
+        if (state === undefined)
+            return;
+        if (state.media !== options.media) {
+            throw new InvalidRenderOptionsError(`Cannot render ${state.media} segmentation as ${options.media}.`);
+        }
+        const hidden = hiddenSet(options.hiddenIds);
+        const scaleX = options.target.width / options.source.width;
+        const scaleY = options.target.height / options.source.height;
+        const offsetX = options.target.x - options.source.x * scaleX;
+        const offsetY = options.target.y - options.source.y * scaleY;
+        if (!Number.isFinite(scaleX) ||
+            !Number.isFinite(scaleY) ||
+            !Number.isFinite(offsetX) ||
+            !Number.isFinite(offsetY)) {
+            throw new InvalidRenderOptionsError('The source-to-target transform exceeds the supported numeric range.');
+        }
+        const Constructor = globalThis
+            .Path2D;
+        if (Constructor === undefined)
+            throw new Path2DUnavailableError();
+        const clipPath = new Constructor();
+        clipPath.rect(options.target.x, options.target.y, options.target.width, options.target.height);
+        context.save();
+        try {
+            context.clip(clipPath);
+            context.transform(scaleX, 0, 0, scaleY, offsetX, offsetY);
+            const outlineWidth = this.#outline.enabled
+                ? this.#outlineWidth(options.source, scaleX, scaleY)
+                : 0;
+            if (this.#outline.enabled) {
+                context.lineJoin = 'round';
+                context.lineCap = 'round';
+            }
+            for (const mask of state.masks.values()) {
+                if (hidden.has(mask.objectId) ||
+                    (options.media === 'video' &&
+                        mask.frameIndex !== undefined &&
+                        mask.frameIndex !== options.frameIndex)) {
+                    continue;
+                }
+                const traced = this.#path(mask);
+                if (traced.empty)
+                    continue;
+                const color = colorFor(mask.objectId);
+                context.fillStyle = color;
+                if (mask.bounds === undefined) {
+                    this.#paintMask(context, traced.path, color, outlineWidth);
+                }
+                else {
+                    context.save();
+                    try {
+                        const boundsScaleX = (mask.bounds.right - mask.bounds.left) / mask.width;
+                        const boundsScaleY = (mask.bounds.bottom - mask.bounds.top) / mask.height;
+                        context.translate(mask.bounds.left, mask.bounds.top);
+                        context.scale(boundsScaleX, boundsScaleY);
+                        this.#paintMask(context, traced.path, color, outlineWidth /
+                            Math.max(Math.abs(boundsScaleX), Math.abs(boundsScaleY), Number.MIN_VALUE));
+                    }
+                    finally {
+                        context.restore();
+                    }
+                }
+            }
+            for (const box of state.boxes.values()) {
+                if (hidden.has(box.objectId) ||
+                    (options.media === 'video' &&
+                        box.frameIndex !== undefined &&
+                        box.frameIndex !== options.frameIndex)) {
+                    continue;
+                }
+                context.strokeStyle = colorFor(box.objectId);
+                context.globalAlpha = 1;
+                context.lineWidth =
+                    2 / Math.max(Math.abs(scaleX), Math.abs(scaleY), Number.MIN_VALUE);
+                context.strokeRect(box.left, box.top, box.right - box.left, box.bottom - box.top);
+            }
+        }
+        finally {
+            context.restore();
+        }
+    }
+    clear() {
+        if (this.#disposed)
+            return;
+        this.#epoch += 1;
+        this.#tail = Promise.resolve();
+        this.#state = undefined;
+        this.#dropCache();
+    }
+    dispose() {
+        if (this.#disposed)
+            return;
+        this.#disposed = true;
+        this.#epoch += 1;
+        this.#tail = Promise.resolve();
+        this.#state = undefined;
+        this.#dropCache();
+    }
+    #buildState(result, reset) {
+        const previous = !reset && this.#state?.media === result.media ? this.#state : undefined;
+        if (!Number.isSafeInteger(result.revision) || result.revision < 0) {
+            throw new InvalidRenderOptionsError('Segmentation snapshot revisions must be non-negative safe integers.');
+        }
+        if (previous !== undefined && result.revision < previous.snapshotRevision) {
+            return previous;
+        }
+        const latestMasks = new Map();
+        const boxes = new Map();
+        let maskRecords = 0;
+        let boxRecords = 0;
+        if (result.records.length > this.#limits.maxRecords) {
+            throw new SegmentationResourceLimitError('maxRecords');
+        }
+        for (const record of result.records) {
+            validateFrame(record.kind === 'text' ? undefined : record.frame?.frameIndex);
+            if (record.kind === 'mask') {
+                maskRecords += 1;
+                if (maskRecords > this.#limits.maxMasks) {
+                    throw new SegmentationResourceLimitError('maxMasks');
+                }
+                this.#preflightMask(record);
+                const current = latestMasks.get(record.identity);
+                if (current === undefined || record.revision > current.revision) {
+                    latestMasks.set(record.identity, record);
+                }
+                else if (record.revision === current.revision &&
+                    !sameMaskRecord(record, current)) {
+                    throw new InvalidMaskPayloadError(`Mask ${record.identity} has conflicting data at revision ${record.revision}.`);
+                }
+            }
+            else if (record.kind === 'box') {
+                boxRecords += 1;
+                if (boxRecords > this.#limits.maxBoxes) {
+                    throw new SegmentationResourceLimitError('maxBoxes');
+                }
+                const width = record.right - record.left;
+                const height = record.bottom - record.top;
+                if (!Number.isFinite(record.left) ||
+                    !Number.isFinite(record.top) ||
+                    !Number.isFinite(record.right) ||
+                    !Number.isFinite(record.bottom) ||
+                    !Number.isFinite(width) ||
+                    !Number.isFinite(height) ||
+                    width < 0 ||
+                    height < 0) {
+                    throw new InvalidRenderOptionsError('Box coordinates are invalid.');
+                }
+                const identity = boxIdentity(record);
+                boxes.set(identity, {
+                    identity,
+                    objectId: record.objectId,
+                    ...(record.frame === undefined
+                        ? {}
+                        : { frameIndex: record.frame.frameIndex }),
+                    left: record.left,
+                    top: record.top,
+                    right: record.right,
+                    bottom: record.bottom,
+                });
+            }
+        }
+        const masks = new Map();
+        let complexity = 0;
+        for (const box of boxes.values()) {
+            complexity += JSON.stringify([
+                box.identity,
+                box.objectId,
+                box.frameIndex ?? null,
+                box.left,
+                box.top,
+                box.right,
+                box.bottom,
+            ]).length;
+            if (complexity > this.#limits.maxRetainedComplexity) {
+                throw new SegmentationResourceLimitError('maxRetainedComplexity');
+            }
+        }
+        for (const record of latestMasks.values()) {
+            const prior = previous?.masks.get(record.identity);
+            let retained;
+            if (prior !== undefined && record.revision < prior.revision) {
+                retained = prior;
+            }
+            else if (prior?.revision === record.revision) {
+                if (!sameMaskRecord(prior.record, record)) {
+                    throw new InvalidMaskPayloadError(`Mask ${record.identity} has conflicting data at revision ${record.revision}.`);
+                }
+                retained = prior;
+            }
+            else {
+                retained = retainMask(record);
+            }
+            complexity += retained.identity.length + RETAINED_MASK_OVERHEAD;
+            if (complexity > this.#limits.maxRetainedComplexity) {
+                throw new SegmentationResourceLimitError('maxRetainedComplexity');
+            }
+            masks.set(record.identity, retained);
+        }
+        return {
+            media: result.media,
+            snapshotRevision: result.revision,
+            masks,
+            boxes,
+            complexity,
+        };
+    }
+    #preflightMask(record) {
+        const { mask } = record;
+        if (mask.encoding !== 'one_bit' && mask.encoding !== 'lossless') {
+            throw new UnsupportedMaskEncodingError(mask.encoding);
+        }
+        if (!Number.isSafeInteger(record.order) ||
+            record.order < 0 ||
+            !Number.isSafeInteger(record.revision) ||
+            record.revision <= 0 ||
+            record.identity.length === 0 ||
+            record.objectId.length === 0) {
+            throw new InvalidMaskPayloadError('Mask record identity and revision are invalid.');
+        }
+        if (!Number.isSafeInteger(mask.width) ||
+            !Number.isSafeInteger(mask.height) ||
+            mask.width <= 0 ||
+            mask.height <= 0) {
+            throw new InvalidMaskPayloadError('Mask dimensions must be positive safe integers.');
+        }
+        if (record.bounds !== undefined) {
+            const { left, top, right, bottom } = record.bounds;
+            if (![left, top, right, bottom].every(Number.isFinite) ||
+                right <= left ||
+                bottom <= top) {
+                throw new InvalidMaskPayloadError('Mask bounds are invalid.');
+            }
+        }
+        const area = mask.width * mask.height;
+        if (!Number.isSafeInteger(area) || area > this.#limits.maxMaskArea) {
+            throw new SegmentationResourceLimitError('maxMaskArea');
+        }
+        if (mask.payload.length > this.#limits.maxMaskPayloadLength) {
+            throw new SegmentationResourceLimitError('maxMaskPayloadLength');
+        }
+    }
+    /**
+     * The contour width in source pixels. The default is relative to the source
+     * resolution, so a mask keeps the same visual weight whatever the media size
+     * is; the CSS-pixel fallback only applies when the source cannot supply one.
+     */
+    #outlineWidth(source, scaleX, scaleY) {
+        if (this.#outline.width !== null)
+            return this.#outline.width;
+        const shortest = Math.min(source.width, source.height);
+        if (Number.isFinite(shortest) && shortest > 0) {
+            return MASK_OUTLINE_WIDTH_RATIO * shortest;
+        }
+        return (FALLBACK_MASK_OUTLINE_WIDTH /
+            Math.max(Math.abs(scaleX), Math.abs(scaleY), Number.MIN_VALUE));
+    }
+    /**
+     * Fills the contour and strokes the same path, so the translucent body and
+     * the crisp edge always agree. `width` is in the coordinate space in force,
+     * which is source pixels unless a box-local mask added its own bounds scale.
+     */
+    #paintMask(context, path, color, width) {
+        context.globalAlpha = this.#maskFillOpacity;
+        context.fill(path, 'evenodd');
+        if (!this.#outline.enabled)
+            return;
+        context.strokeStyle = color;
+        context.globalAlpha = this.#outline.opacity;
+        context.lineWidth = width;
+        context.stroke(path);
+    }
+    #path(mask) {
+        const cached = this.#cache.get(mask);
+        if (cached !== undefined) {
+            this.#cache.delete(mask);
+            this.#cache.set(mask, cached);
+            return cached;
+        }
+        const Constructor = globalThis
+            .Path2D;
+        if (Constructor === undefined)
+            throw new Path2DUnavailableError();
+        const traced = traceMask(mask.record.mask, this.#limits.maxPathComplexity);
+        const entry = {
+            path: new Constructor(traced.d),
+            complexity: traced.complexity,
+            empty: traced.d.length === 0,
+        };
+        this.#cache.set(mask, entry);
+        this.#cacheComplexity += entry.complexity;
+        this.#evict();
+        return entry;
+    }
+    #evict() {
+        while (this.#cache.size > this.#limits.maxCachedPaths ||
+            this.#cacheComplexity > this.#limits.maxCachedComplexity) {
+            const first = this.#cache.entries().next().value;
+            if (first === undefined)
+                return;
+            this.#cache.delete(first[0]);
+            this.#cacheComplexity -= first[1].complexity;
+        }
+    }
+    #pruneCache(state) {
+        const retained = new Set(state.masks.values());
+        for (const [key, cached] of this.#cache) {
+            if (retained.has(key))
+                continue;
+            this.#cache.delete(key);
+            this.#cacheComplexity -= cached.complexity;
+        }
+    }
+    #dropCache() {
+        this.#cache.clear();
+        this.#cacheComplexity = 0;
+    }
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@meta-sam/graphics",
+  "version": "0.1.5",
+  "description": "Retained Canvas 2D renderer for SAM 3 segmentation",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://github.com/meta-models/meta-sam#readme",
+  "bugs": {
+    "url": "https://github.com/meta-models/meta-sam/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meta-models/meta-sam.git",
+    "directory": "typescript/packages/graphics"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": "^20.17.0 || >=22.9.0"
+  },
+  "dependencies": {
+    "@meta-sam/parser": "0.0.8"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "prepack": "tsc -b --force",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}