@motionscript/browser 0.0.0-stage → 0.1.0-alpha.0

package/dist/storage-adapter.js

@@ -0,0 +1,1278 @@
+import { StorageAdapter } from "@motionscript/core";
+import { ALL_FORMATS, BlobSource, Input, UrlSource, VideoSampleSink } from "mediabunny";
+import { ParagraphShapeCache } from "@motionscript/skia-render/shapes/paragraph-cache";
+// Type-only three usage keeps this a real lazy boundary — see three/bridge.ts.
+import { hasPendingCanvas3D, warmPendingCanvas3D } from "@motionscript/skia-render/three/bridge";
+import { localAssetBytes } from "./asset-bytes";
+import { ImageLevelCache } from "./decode/image-levels";
+import { levelCap, levelSize, MAX_IMAGE_DECODE_EDGE } from "./decode/levels";
+import { VideoLevel, videoWindowFrames } from "./decode/video-levels";
+/** A view over a readback's own buffer — a copy of a level's pixels is a second full-size allocation. */
+function pixelsOf(image) {
+    const { data } = image;
+    return new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+}
+/** Whether a src points at an SVG (by extension, ignoring any query/hash). */
+function isSvgSrc(src) {
+    return /\.svg(?:[?#]|$)/i.test(src);
+}
+/** The buckets {@link WebStorageAdapter.assetUrl} reads a source's address from, in order. */
+const ASSET_URL_LOOKUPS = {
+    image: [(c, src) => c.getImageMeta(src)],
+    video: [(c, src) => c.getVideoMeta(src)],
+    media: [
+        (c, src) => c.getAudioMeta(src),
+        (c, src) => c.getVideoMeta(src),
+    ],
+};
+/**
+ * Browser implementation of {@link StorageAdapter} — owns all async asset
+ * decoding (images, video, audio, fonts) so the render loop can stay
+ * synchronous.
+ *
+ * Images and video are held at **levels** chosen from the footprints the
+ * renderer's getters report, not from declared layout boxes: a 4K photo drawn
+ * as a thumbnail holds a thumbnail's pixels, and the same photo zoomed to fill
+ * the screen is re-decoded to match. See `decode/image-levels.ts`.
+ */
+export class WebStorageAdapter extends StorageAdapter {
+    canvasKit;
+    fontMgr;
+    disposed = false;
+    /**
+     * GPU surface the render context draws into; needed to upload decoded video
+     * frames straight to texture (Surface.makeImageFromTextureSource /
+     * updateTextureFromSource). Set by the render context on mount.
+     */
+    surface = null;
+    /** Open decode session per video src (opened once by loadVideo, deduped). */
+    videoSessions = new Map();
+    /** Decoded frame bitmaps per src, keyed by quantized source timestamp; bounded to the forward/back window. */
+    videoFrames = new Map();
+    /**
+     * Decoded past frames the Echo filter needs, kept in a SEPARATE cache so the
+     * forward/back window eviction (which is centered on the current playhead)
+     * never drops them — echo taps reach intentionally outside that window.
+     * Bounded by trimming to the most-recently requested {@link ECHO_CACHE_LIMIT}
+     * per src.
+     */
+    videoEchoFrames = new Map();
+    /** Last timestamp each src's playhead was asked to show, used to drive sequential decoding forward. */
+    videoPlayhead = new Map();
+    /**
+     * Exact `(src, timestamp)` pairs a render asked for but couldn't satisfy from
+     * the warm window. A blocking caller drains these via
+     * {@link warmPendingDecodes} and re-renders.
+     */
+    pendingVideoFrames = new Map();
+    /** Like {@link pendingVideoFrames}, for the several past frames an echo or a second playhead needs at once. */
+    pendingEchoFrames = new Map();
+    /** In-flight echo/extra-playhead decodes, keyed `src#quantizedTs`, so callers join one seek. */
+    echoDecodes = new Map();
+    /**
+     * Quantized timestamps claimed per src during the current render pass, in claim
+     * order (see {@link claimVideoFrame}): index 0 holds the session's own texture,
+     * index *n* holds {@link videoAltSlots} slot *n−1*. Cleared by
+     * {@link beginRenderPass}.
+     */
+    videoFrameClaims = new Map();
+    /**
+     * Extra textures per src — one per *simultaneously visible* time of that clip
+     * beyond the first. Persistent and updated in place exactly like a session's
+     * own texture, so a second playhead costs a blit per frame, not an allocation.
+     */
+    videoAltSlots = new Map();
+    /** The last footprint each clip was drawn at, for sizing a session opened later. */
+    videoDemand = new Map();
+    /**
+     * Whether playback is live. When false the adapter does no look-ahead
+     * prefetch, so a paused clip never drains a backlog of stale decodes.
+     */
+    playing = false;
+    decodePolicy = "interactive";
+    images;
+    imageSources = new Map();
+    reportedImageErrors = new Set();
+    audioBuffers = new Map();
+    audioCtx = null;
+    fps;
+    /** Families already registered with the font provider (registered once, all weights at once). */
+    registeredFontFamilies = new Set();
+    /**
+     * Families the catalog could not describe, so the warning is emitted once
+     * rather than on every `loadAt`. Cleared by {@link setCatalog}: a new
+     * manifest is exactly the event that can turn one of these into a real face.
+     */
+    unknownFontFamilies = new Set();
+    /** Cache of shaped straight-text runs; owns the cached Fonts. See {@link ParagraphShapeCache}. */
+    paragraphCache = new ParagraphShapeCache();
+    /** Bumped whenever a new font family registers, invalidating runs shaped against a fallback. */
+    fontEpoch = 0;
+    /** Past frames the Echo cache holds per src; caps the renderer's MAX_ECHOES (32) with slack. */
+    static ECHO_CACHE_LIMIT = 48;
+    /**
+     * Max extra textures per src (see {@link videoAltSlots}) — how many different
+     * times of one clip can be on screen together. Past it the last slot is reused.
+     */
+    static ALT_SLOT_LIMIT = 16;
+    constructor(canvasKit, catalog, viewport, fps) {
+        super(catalog, viewport);
+        this.canvasKit = canvasKit;
+        this.fps = fps;
+        this.fontMgr = canvasKit.TypefaceFontProvider.Make();
+        this.images = new ImageLevelCache({
+            now: () => performance.now(),
+            decode: (src, chooseEdge) => this.decodeImage(src, chooseEdge),
+            released: (_src, level) => {
+                level.gpu?.delete();
+                level.gpu = null;
+            },
+            sourceBytes: (src) => this.imageSources.get(src)?.bytes ?? 0,
+            dropSource: (src) => this.imageSources.delete(src),
+            surfaceEdge: () => this.surfaceEdge(),
+            onError: (src, error) => {
+                if (this.disposed || this.reportedImageErrors.has(src))
+                    return;
+                this.reportedImageErrors.add(src);
+                console.error(`[WebStorageAdapter] image decode failed for ${src}:`, error);
+            },
+        });
+    }
+    getCanvasKit() {
+        return this.canvasKit;
+    }
+    /**
+     * Adopt a new manifest, and forget which families it previously could not
+     * describe — installing a typeface folds it into the live manifest without
+     * rebuilding this adapter, and that family deserves a fresh attempt.
+     */
+    setCatalog(catalog) {
+        super.setCatalog(catalog);
+        this.unknownFontFamilies.clear();
+    }
+    // ─── Decode policy ───────────────────────────────────────────────────────
+    setDecodePolicy(policy) {
+        this.decodePolicy = policy;
+        this.images.setPolicy(policy);
+    }
+    getDecodePolicy() {
+        return this.decodePolicy;
+    }
+    hasPendingDecodes() {
+        return this.pendingVideoFrames.size > 0
+            || this.pendingEchoFrames.size > 0
+            || this.echoDecodes.size > 0
+            || hasPendingCanvas3D()
+            || this.images.hasPending();
+    }
+    /**
+     * Settle what the last render could not draw acceptably: video frames, echo
+     * taps, the 3D runtime, and images — every exact level under `"exact"`, only
+     * a source drawn with nothing resident under `"interactive"`, whose upgrades
+     * are {@link warmPendingUpgrades}. Returns whether there was any, so a
+     * blocking caller re-renders only when something changed.
+     */
+    async warmPendingDecodes() {
+        const [video, images] = await Promise.all([this.warmVideo(), this.images.warm()]);
+        return video || images;
+    }
+    hasPendingUpgrades() {
+        return this.images.hasUpgrades();
+    }
+    warmPendingUpgrades() {
+        return this.images.warmUpgrades();
+    }
+    /** @deprecated Use {@link warmPendingDecodes}. */
+    warmPendingVideo() {
+        return this.warmPendingDecodes();
+    }
+    /** Resident decode memory, for tests and the e2e memory script. */
+    _decodeStats() {
+        let windowFrames = 0;
+        let echoFrames = 0;
+        let frameBytes = 0;
+        const counted = new Set();
+        const count = (frames) => {
+            for (const { bitmap } of frames.values()) {
+                if (counted.has(bitmap))
+                    continue;
+                counted.add(bitmap);
+                frameBytes += (bitmap.width ?? 0) * (bitmap.height ?? 0) * 4;
+            }
+        };
+        for (const frames of this.videoFrames.values()) {
+            windowFrames += frames.size;
+            count(frames);
+        }
+        for (const frames of this.videoEchoFrames.values()) {
+            echoFrames += frames.size;
+            count(frames);
+        }
+        return {
+            images: this.images.stats(),
+            video: { sessions: this.videoSessions.size, windowFrames, echoFrames, frameBytes },
+        };
+    }
+    // ─── Image ───────────────────────────────────────────────────────────────
+    /**
+     * Make `src` drawable: decode its first level. Which level that is follows the
+     * policy — see `ImageLevelCache.load`. Every later level follows the
+     * footprints the draws report.
+     */
+    async loadImage(src) {
+        await this.images.load(src);
+    }
+    /** GPU-resident image for `src` at the level this draw needs, or null until it has loaded. */
+    getCKImage(src, footprint) {
+        const level = this.images.select(src, footprint);
+        if (!level)
+            return null;
+        level.gpu ??= this.makeCKImageFromPixels(level.pixels, level.width, level.height);
+        return level.gpu;
+    }
+    /**
+     * Decoded RGBA8888 pixels for `src` at the level this draw needs, or null
+     * until it has loaded. The same object comes back for as long as that level
+     * is resident, which is what the 3D texture cache keys its uploads on.
+     */
+    getImagePixels(src, footprint) {
+        return this.images.select(src, footprint);
+    }
+    getImageSize(src) {
+        return this.images.intrinsicSize(src) ?? this.catalogImageSize(src);
+    }
+    catalogImageSize(src) {
+        try {
+            const meta = this.catalog.getImageMeta(src);
+            return meta.width > 0 && meta.height > 0 ? { width: meta.width, height: meta.height } : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Decode one level of `src`.
+     *
+     * A raster decodes from its kept compressed bytes, resized by the browser's
+     * own high-quality scaler; with no manifest size it is decoded once at
+     * natural size to learn it. An SVG is rasterized from its kept `<img>` at
+     * any level, since it has no resolution of its own to cap at.
+     */
+    async decodeImage(src, chooseEdge) {
+        const url = this.assetUrl(src, "image");
+        if (isSvgSrc(url)) {
+            const svg = await this.svgSource(src, url);
+            const intrinsic = svg.natural;
+            const edge = chooseEdge(intrinsic, true);
+            const size = levelSize(edge, intrinsic);
+            const canvas = new OffscreenCanvas(size.width, size.height);
+            const ctx = canvas.getContext("2d", { willReadFrequently: true });
+            if (!ctx)
+                throw new Error(`loadImage(${src}): could not get 2d context`);
+            ctx.drawImage(svg.svg, 0, 0, size.width, size.height);
+            return { pixels: pixelsOf(ctx.getImageData(0, 0, size.width, size.height)), ...size, intrinsic, vector: true, edge };
+        }
+        const blob = await this.rasterSource(src, url);
+        let intrinsic = this.catalogImageSize(src);
+        let full = null;
+        if (!intrinsic) {
+            full = await createImageBitmap(blob);
+            intrinsic = { width: full.width, height: full.height };
+        }
+        const edge = chooseEdge(intrinsic, false);
+        const natural = edge >= levelCap(intrinsic, false)
+            && Math.max(intrinsic.width, intrinsic.height) <= MAX_IMAGE_DECODE_EDGE;
+        let bitmap;
+        if (natural) {
+            bitmap = full ?? await createImageBitmap(blob);
+        }
+        else {
+            const size = levelSize(edge, intrinsic);
+            try {
+                bitmap = await createImageBitmap(full ?? blob, {
+                    resizeWidth: size.width,
+                    resizeHeight: size.height,
+                    resizeQuality: "high",
+                });
+            }
+            finally {
+                full?.close();
+            }
+        }
+        try {
+            const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+            const ctx = canvas.getContext("2d", { willReadFrequently: true });
+            if (!ctx)
+                throw new Error(`loadImage(${src}): could not get 2d context`);
+            ctx.drawImage(bitmap, 0, 0);
+            return {
+                pixels: pixelsOf(ctx.getImageData(0, 0, bitmap.width, bitmap.height)),
+                width: bitmap.width,
+                height: bitmap.height,
+                intrinsic,
+                vector: false,
+                edge,
+            };
+        }
+        finally {
+            bitmap.close();
+        }
+    }
+    async rasterSource(src, url) {
+        const kept = this.imageSources.get(src);
+        if (kept?.blob)
+            return kept.blob;
+        const blob = await this.fetchBlob(url);
+        this.imageSources.set(src, { blob, bytes: blob.size });
+        return blob;
+    }
+    /**
+     * Decodes an SVG through an `HTMLImageElement`, which every browser
+     * supports — `createImageBitmap` can't decode SVG reliably (Chrome throws on
+     * an SVG Blob). From a data URL rather than an object URL so a missing xmlns
+     * or external ref can't taint the image and fail the readback.
+     */
+    async svgSource(src, url) {
+        const kept = this.imageSources.get(src);
+        if (kept?.svg && kept.natural)
+            return kept;
+        const text = await (await this.fetchBlob(url)).text();
+        const img = new Image();
+        img.decoding = "sync";
+        await new Promise((resolve, reject) => {
+            img.onload = () => resolve();
+            img.onerror = () => reject(new Error(`loadImage(${src}): failed to decode SVG`));
+            img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(text)}`;
+        });
+        // 300 is the CSS default replaced-element size, which is what a browser
+        // itself gives an SVG with no intrinsic dimensions.
+        const natural = {
+            width: img.naturalWidth > 0 ? img.naturalWidth : 300,
+            height: img.naturalHeight > 0 ? img.naturalHeight : 300,
+        };
+        const source = { svg: img, natural, bytes: text.length };
+        this.imageSources.set(src, source);
+        return source;
+    }
+    /** Long edge of the draw surface in device px, or the viewport before one is attached. */
+    surfaceEdge() {
+        const surface = this.surface;
+        if (surface && typeof surface.width === "function" && typeof surface.height === "function") {
+            return Math.max(surface.width(), surface.height());
+        }
+        return Math.max(this.viewport.width, this.viewport.height);
+    }
+    /**
+     * The compressed bytes for `src`, from the host's local store if it has
+     * them and from the network otherwise. Every byte-reading path goes through
+     * this, so a source is local for all of images, video, audio and fonts or
+     * for none of them.
+     */
+    async fetchBlob(src) {
+        const local = await localAssetBytes(src);
+        if (local)
+            return local;
+        return (await fetch(src)).blob();
+    }
+    /**
+     * The address `src` is fetched from.
+     *
+     * A manifest key and the URL its bytes live at are the same string only
+     * while the host keys its manifest by URL; `meta.src` is the address. An
+     * undescribed source falls back to itself. `media` is audio-then-video
+     * because a video's own soundtrack is requested under the video's key.
+     */
+    assetUrl(src, kind) {
+        const lookup = ASSET_URL_LOOKUPS[kind];
+        for (const read of lookup) {
+            try {
+                const found = read(this.catalog, src).src;
+                if (found)
+                    return found;
+            }
+            catch {
+                // Undescribed in this bucket; try the next, then `src` itself.
+            }
+        }
+        return src;
+    }
+    // ─── 3D compositing ──────────────────────────────────────────────────────
+    /** Persistent CanvasKit texture per 3D slot, so a 60 fps 3D scene doesn't allocate a texture a frame. */
+    canvas3DTextures = new Map();
+    /**
+     * Upload a 3D renderer's canvas into a GPU-resident CanvasKit image, creating
+     * the texture on first use and updating it in place afterwards.
+     *
+     * **The source arrives unpremultiplied, even though the canvas is not.**
+     * Uploading a canvas *as a texture source* goes through the browser's unpack
+     * pipeline, where `UNPACK_PREMULTIPLY_ALPHA_WEBGL` is false by default, so
+     * what reaches Skia is straight colour. Declaring it `Premul` made Skia
+     * composite additively — invisible at full alpha, and read as `opacity`
+     * being ignored on a translucent surface. `packages/e2e` has a probe in a
+     * colour that separates the two.
+     *
+     * The returned image is owned by this adapter (keyed by slot): it must NOT
+     * be deleted after the draw, or the next frame loses its texture.
+     */
+    upload3DFrame(key, 
+    // In this backend always an HTMLCanvasElement | OffscreenCanvas | ImageBitmap;
+    // widened to the seam's opaque handle so skia-render never names a DOM type.
+    source, width, height) {
+        const surface = this.surface;
+        if (!surface)
+            return null;
+        const info = {
+            width,
+            height,
+            alphaType: this.canvasKit.AlphaType.Unpremul,
+            colorType: this.canvasKit.ColorType.RGBA_8888,
+            colorSpace: this.canvasKit.ColorSpace.SRGB,
+        };
+        let image = this.canvas3DTextures.get(key);
+        // The buffer can grow (see the renderer's size quantisation); a texture is
+        // fixed-size, so a size change needs a fresh one.
+        if (image && (image.width() !== width || image.height() !== height)) {
+            image.delete();
+            this.canvas3DTextures.delete(key);
+            image = undefined;
+        }
+        if (!image) {
+            // CanvasKit's TextureSource type omits canvas elements, though the
+            // underlying texImage2D upload accepts them.
+            const made = surface.makeImageFromTextureSource(source, info, false);
+            if (!made)
+                return null;
+            this.canvas3DTextures.set(key, made);
+            return made;
+        }
+        surface.updateTextureFromSource(image, source, false);
+        return image;
+    }
+    /** Release a 3D node's texture — called when its node is swept. */
+    release3DTexture(key) {
+        this.canvas3DTextures.get(key)?.delete();
+        this.canvas3DTextures.delete(key);
+    }
+    // ─── Render pass ─────────────────────────────────────────────────────────
+    /**
+     * Receive the GPU surface so decoded video frames can upload straight to
+     * texture. A texture-backed image is only valid for the surface that made it,
+     * so swapping surfaces drops every one; they are recreated on the next frame.
+     * Image levels are raster images and survive.
+     */
+    setSurface(surface) {
+        if (surface === this.surface)
+            return;
+        for (const session of this.videoSessions.values()) {
+            session.textureImage?.delete();
+            session.textureImage = null;
+            session.uploadedTs = null;
+            session.uploadedBitmap = null;
+        }
+        this.clearVideoAltSlots();
+        for (const image of this.canvas3DTextures.values())
+            image.delete();
+        this.canvas3DTextures.clear();
+        this.surface = surface;
+    }
+    /**
+     * Toggle live-playback mode. While playing, the adapter prefetches a window
+     * ahead; when paused it decodes only the exact frame the render needs, so
+     * pausing immediately quiesces.
+     */
+    setPlaying(playing) {
+        this.playing = playing;
+    }
+    /** Start a render pass: forget which timestamp each clip's texture was claimed for. */
+    beginRenderPass() {
+        this.videoFrameClaims.clear();
+        this.images.beginPass();
+    }
+    /**
+     * End a render pass: every draw has reported its footprint, so decide level
+     * changes now rather than chasing each draw.
+     */
+    endRenderPass() {
+        this.images.endPass();
+        const now = performance.now();
+        for (const [src, session] of this.videoSessions) {
+            const moved = session.levels?.endPass(this.decodePolicy, this.playing, now) ?? false;
+            if (!moved)
+                continue;
+            this.videoDemand.set(src, session.levels.level);
+            const size = levelSize(session.levels.level, session.intrinsic);
+            session.width = size.width;
+            session.height = size.height;
+            // What this pass drew is now at the wrong level: queue the exact
+            // frames again so a settling caller lands them at the new one.
+            const claims = this.videoFrameClaims.get(src) ?? [];
+            claims.forEach((key, index) => {
+                const ts = key * session.frameStep;
+                if (index === 0) {
+                    // A miss already queued the time it asked for; the claim
+                    // only records the fallback frame that was painted.
+                    if (!this.pendingVideoFrames.has(src))
+                        this.pendingVideoFrames.set(src, ts);
+                }
+                else {
+                    let set = this.pendingEchoFrames.get(src);
+                    if (!set) {
+                        set = new Set();
+                        this.pendingEchoFrames.set(src, set);
+                    }
+                    set.add(ts);
+                }
+            });
+            if (this.playing)
+                this.driveSequentialDecode(src, this.videoPlayhead.get(src) ?? 0);
+        }
+    }
+    // ─── Video ───────────────────────────────────────────────────────────────
+    /**
+     * Open a streaming decode session for `src` (deduped — runs once per clip)
+     * and warm the first frame around `trimStart` so the first synchronous render
+     * hits cache. The rest streams in as the playhead advances; the level
+     * follows the footprints claims report.
+     */
+    async loadVideo(src, _startFrame, _endFrame, trimStart = 0, _trimEnd) {
+        if (this.videoSessions.has(src))
+            return;
+        // A local blob is handed to mediabunny as a `BlobSource` rather than
+        // downloaded first: both are random-access, so the streaming decode and
+        // the frame window behave identically.
+        const url = this.assetUrl(src, "video");
+        const local = await localAssetBytes(url);
+        const input = new Input({
+            formats: ALL_FORMATS,
+            source: local ? new BlobSource(local) : new UrlSource(url),
+        });
+        const track = await input.getPrimaryVideoTrack();
+        if (!track) {
+            input.dispose();
+            throw new Error(`loadVideo(${src}): no video track found`);
+        }
+        const sink = new VideoSampleSink(track);
+        const durationSec = await input.computeDuration();
+        const probe = await this.probeFirstFrame(sink);
+        const intrinsic = this.catalogVideoSize(src) ?? await this.trackDisplaySize(track, probe);
+        const levels = new VideoLevel(intrinsic, this.decodePolicy, this.videoDemand.get(src), this.surfaceEdge());
+        const size = levelSize(levels.level, intrinsic);
+        this.videoSessions.set(src, {
+            input, sink, durationSec, frameStep: probe.frameStep,
+            width: size.width, height: size.height, intrinsic, levels, canvas: null,
+            textureImage: null, uploadedTs: null, decoding: false,
+        });
+        this.videoFrames.set(src, new Map());
+        // Warm the entry frame so the first render after load is never empty.
+        await this.decodeAt(src, trimStart);
+    }
+    getVideoSize(src) {
+        return this.videoSessions.get(src)?.intrinsic ?? this.catalogVideoSize(src);
+    }
+    catalogVideoSize(src) {
+        try {
+            const meta = this.catalog.getVideoMeta(src);
+            return meta.width > 0 && meta.height > 0 ? { width: meta.width, height: meta.height } : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    async trackDisplaySize(track, probe) {
+        try {
+            const width = await track.getDisplayWidth();
+            const height = await track.getDisplayHeight();
+            if (width > 0 && height > 0)
+                return { width, height };
+        }
+        catch {
+            // fall through to the probed sample
+        }
+        return { width: Math.max(1, probe.width), height: Math.max(1, probe.height) };
+    }
+    /**
+     * Synchronously return the GPU image for the frame at `timestamp` (source
+     * seconds), uploaded in place into the session's one texture. On a miss it
+     * records the exact frame for a blocking re-render and, while playing, primes
+     * the sequential decoder; it returns the nearest decoded frame so the picture
+     * never goes blank mid-stream.
+     *
+     * A *drawing* caller should go through {@link claimVideoFrame}, which owns
+     * the rule for one frame needing two different times of the same clip.
+     */
+    getVideoFrame(src, timestamp) {
+        const session = this.videoSessions.get(src);
+        const frames = this.videoFrames.get(src);
+        if (!session || !frames || !this.surface)
+            return null;
+        if (!Number.isFinite(timestamp))
+            timestamp = 0;
+        this.videoPlayhead.set(src, timestamp);
+        const frame = this.nearestDecoded(frames, timestamp, session.frameStep);
+        const exactKey = this.quantizeTs(timestamp, session.frameStep);
+        const haveExact = !!frame
+            && this.quantizeTs(frame.timestamp, session.frameStep) === exactKey
+            && this.accepts(session, frame);
+        if (!haveExact) {
+            this.pendingVideoFrames.set(src, timestamp);
+            if (this.playing)
+                this.driveSequentialDecode(src, timestamp);
+        }
+        else if (this.playing) {
+            this.driveSequentialDecode(src, timestamp);
+        }
+        if (!frame)
+            return null;
+        return this.uploadFrame(src, session, frame);
+    }
+    /**
+     * The image to paint `src` at `timestamp` with, for one draw in the current
+     * render pass. **This, not {@link getVideoFrame}, is what a fill should call.**
+     *
+     * A session's texture is updated in place and Skia doesn't resolve a draw
+     * until the surface flushes, so two draws of the same clip at different times
+     * would both sample whatever was uploaded last. Each distinct timestamp a
+     * pass asks for therefore gets its own texture: the first claim takes the
+     * session's, the rest take {@link videoAltSlots} by claim order. Every
+     * returned image is adapter-owned.
+     */
+    claimVideoFrame(src, timestamp, footprint) {
+        const session = this.videoSessions.get(src);
+        if (!session || !this.surface)
+            return null;
+        if (!Number.isFinite(timestamp))
+            timestamp = 0;
+        session.levels?.note(footprint);
+        const key = this.quantizeTs(timestamp, session.frameStep);
+        let claims = this.videoFrameClaims.get(src);
+        if (!claims) {
+            claims = [];
+            this.videoFrameClaims.set(src, claims);
+        }
+        const claimed = claims.indexOf(key);
+        if (claimed === 0)
+            return session.textureImage;
+        if (claimed > 0)
+            return this.videoAltSlots.get(src)?.[claimed - 1]?.image ?? null;
+        if (claims.length === 0) {
+            const image = this.getVideoFrame(src, timestamp);
+            // Record what the texture actually holds, not what was asked for: a
+            // miss paints the nearest decoded frame, and a later draw wanting
+            // *that* frame can then share it.
+            if (image)
+                claims.push(session.uploadedTs ?? key);
+            return image;
+        }
+        const slot = Math.min(claims.length - 1, WebStorageAdapter.ALT_SLOT_LIMIT - 1);
+        const image = this.uploadAltFrame(src, session, timestamp, slot);
+        if (image)
+            claims.push(key);
+        return image;
+    }
+    /** Free every alt-slot texture (surface swap, teardown). */
+    clearVideoAltSlots() {
+        for (const slots of this.videoAltSlots.values()) {
+            for (const slot of slots)
+                slot.image?.delete();
+        }
+        this.videoAltSlots.clear();
+    }
+    /** Upload the frame for a non-primary timestamp into its slot — see {@link claimVideoFrame}. */
+    uploadAltFrame(src, session, timestamp, slotIndex) {
+        const surface = this.surface;
+        if (!surface)
+            return null;
+        const frame = this.decodedFrameFor(src, session, timestamp);
+        if (!frame)
+            return null;
+        let slots = this.videoAltSlots.get(src);
+        if (!slots) {
+            slots = [];
+            this.videoAltSlots.set(src, slots);
+        }
+        let slot = slots[slotIndex];
+        if (!slot) {
+            slot = { image: null, uploadedTs: null };
+            slots[slotIndex] = slot;
+        }
+        const key = this.quantizeTs(frame.timestamp, session.frameStep);
+        if (slot.image && slot.uploadedTs === key && (slot.bitmap === undefined || slot.bitmap === frame.bitmap)) {
+            return slot.image;
+        }
+        this.uploadInto(slot, frame, session);
+        slot.uploadedTs = slot.image ? key : null;
+        return slot.image;
+    }
+    /**
+     * Upload `frame` into `slot`'s texture — in place when the size held, fresh
+     * when a level change resized the frames, since a texture is fixed-size.
+     */
+    uploadInto(slot, frame, session) {
+        const surface = this.surface;
+        const width = frame.bitmap.width || session.width;
+        const height = frame.bitmap.height || session.height;
+        if (slot.image && (slot.width !== width || slot.height !== height)) {
+            slot.image.delete();
+            slot.image = null;
+        }
+        if (!slot.image) {
+            slot.image = surface.makeImageFromTextureSource(frame.bitmap, {
+                width,
+                height,
+                alphaType: this.canvasKit.AlphaType.Unpremul,
+                colorType: this.canvasKit.ColorType.RGBA_8888,
+                colorSpace: this.canvasKit.ColorSpace.SRGB,
+            });
+        }
+        else {
+            surface.updateTextureFromSource(slot.image, frame.bitmap);
+        }
+        slot.width = width;
+        slot.height = height;
+        slot.bitmap = slot.image ? frame.bitmap : null;
+    }
+    /**
+     * The decoded frame to show a non-primary playhead at `timestamp`: the exact
+     * one when it's warm at the clip's level, otherwise the nearest decoded, with
+     * the exact one queued. Null only when nothing at all is decoded yet.
+     */
+    decodedFrameFor(src, session, timestamp) {
+        const step = session.frameStep;
+        const clamped = Math.max(0, Math.min(timestamp, session.durationSec));
+        const accept = (f) => this.accepts(session, f);
+        // The echo cache first — its entries survive the playhead window's
+        // eviction, which is centred on the *primary* head.
+        const echo = this.videoEchoFrames.get(src);
+        const window = this.videoFrames.get(src);
+        const exact = this.nearestWithin(echo, clamped, step, accept) ??
+            this.nearestWithin(window, clamped, step, accept);
+        if (exact)
+            return exact;
+        let set = this.pendingEchoFrames.get(src);
+        if (!set) {
+            set = new Set();
+            this.pendingEchoFrames.set(src, set);
+        }
+        set.add(clamped);
+        // While playing there is no blocking caller to drain that set, and the
+        // sequential prefetch only runs ahead of the primary head.
+        if (this.playing)
+            void this.decodeEchoFrameAt(src, clamped);
+        const nearEcho = echo ? this.nearestDecoded(echo, clamped, step) : null;
+        const nearWindow = window ? this.nearestDecoded(window, clamped, step) : null;
+        if (!nearEcho)
+            return nearWindow;
+        if (!nearWindow)
+            return nearEcho;
+        return Math.abs(nearEcho.timestamp - clamped) <= Math.abs(nearWindow.timestamp - clamped)
+            ? nearEcho
+            : nearWindow;
+    }
+    /**
+     * The decoded length of `src` in seconds, or `0` when its session hasn't
+     * opened yet. The *container's* duration rather than the manifest's, so
+     * looping still works for a source whose manifest probe couldn't read one.
+     */
+    getVideoDuration(src) {
+        return this.videoSessions.get(src)?.durationSec ?? 0;
+    }
+    /**
+     * An INDEPENDENT, caller-owned image for a past `timestamp` — the Echo
+     * filter needs several frames resident at once, which the shared session
+     * texture can't give. The caller must push it to `transientImages`.
+     *
+     * On a miss it records the timestamp for {@link warmPendingDecodes} and
+     * returns null, so the tap is skipped this pass and a blocking caller lands it.
+     */
+    getVideoFrameImage(src, timestamp, footprint) {
+        const session = this.videoSessions.get(src);
+        if (!session || !this.surface || !Number.isFinite(timestamp))
+            return null;
+        session.levels?.note(footprint);
+        const clamped = Math.max(0, Math.min(timestamp, session.durationSec));
+        const step = session.frameStep;
+        const accept = (f) => this.accepts(session, f);
+        const frame = this.nearestWithin(this.videoEchoFrames.get(src), clamped, step, accept) ??
+            this.nearestWithin(this.videoFrames.get(src), clamped, step, accept);
+        if (!frame) {
+            let set = this.pendingEchoFrames.get(src);
+            if (!set) {
+                set = new Set();
+                this.pendingEchoFrames.set(src, set);
+            }
+            set.add(clamped);
+            return null;
+        }
+        return this.surface.makeImageFromTextureSource(frame.bitmap, {
+            width: frame.bitmap.width || session.width,
+            height: frame.bitmap.height || session.height,
+            alphaType: this.canvasKit.AlphaType.Unpremul,
+            colorType: this.canvasKit.ColorType.RGBA_8888,
+            colorSpace: this.canvasKit.ColorSpace.SRGB,
+        });
+    }
+    /**
+     * Upload `frame`'s bitmap into the session's persistent texture and return it.
+     * No upload when that bitmap is already resident, so a parked playhead costs
+     * nothing per render.
+     */
+    uploadFrame(src, session, frame) {
+        if (!this.surface)
+            return null;
+        const key = this.quantizeTs(frame.timestamp, session.frameStep);
+        if (session.textureImage && session.uploadedTs === key
+            && (session.uploadedBitmap == null || session.uploadedBitmap === frame.bitmap)) {
+            return session.textureImage;
+        }
+        const slot = {
+            image: session.textureImage,
+            uploadedTs: session.uploadedTs,
+            width: session.textureWidth,
+            height: session.textureHeight,
+        };
+        this.uploadInto(slot, frame, session);
+        session.textureImage = slot.image;
+        session.textureWidth = slot.width;
+        session.textureHeight = slot.height;
+        session.uploadedBitmap = slot.bitmap;
+        session.uploadedTs = session.textureImage ? key : null;
+        return session.textureImage;
+    }
+    /** Whether `frame` counts as the frame at the clip's current level. */
+    accepts(session, frame) {
+        return session.levels ? session.levels.accepts(frame.level, this.decodePolicy) : true;
+    }
+    /** Decode every exact video frame and echo tap a prior render asked for, plus the 3D runtime. */
+    async warmVideo() {
+        const pending = [...this.pendingVideoFrames];
+        this.pendingVideoFrames.clear();
+        const echo = [...this.pendingEchoFrames].flatMap(([src, set]) => [...set].map((ts) => [src, ts]));
+        this.pendingEchoFrames.clear();
+        // Drained before the early return below so a 3D-only scene, which queues
+        // no video work at all, still gets its runtime loaded.
+        const warmed3D = await warmPendingCanvas3D();
+        const inFlight = [...this.echoDecodes.values()];
+        if (pending.length === 0 && echo.length === 0 && inFlight.length === 0)
+            return warmed3D;
+        await Promise.all([
+            ...pending.map(([src, ts]) => this.decodeAt(src, ts)),
+            ...echo.map(([src, ts]) => this.decodeEchoFrameAt(src, ts)),
+            ...inFlight,
+        ]);
+        return true;
+    }
+    /**
+     * Sequentially decode forward from `timestamp` to fill the window ahead, using
+     * mediabunny's monotonic pipeline — far cheaper than a random seek per frame.
+     * At most one pass runs per src; it stops as soon as playback pauses or the
+     * playhead jumps away. Each sample is sized as it is snapshotted, so a level
+     * change mid-pass applies to the next frame without restarting the stream.
+     */
+    driveSequentialDecode(src, timestamp) {
+        const session = this.videoSessions.get(src);
+        if (!session || session.decoding || !session.sink)
+            return;
+        if (!this.videoFrames.get(src))
+            return;
+        const step = session.frameStep;
+        const { forward } = this.windowFrames(session);
+        const end = Math.min(session.durationSec, timestamp + forward * step);
+        if (timestamp >= end)
+            return;
+        session.decoding = true;
+        void (async () => {
+            try {
+                for await (const sample of session.sink.samples(timestamp, end + step)) {
+                    const store = this.videoFrames.get(src);
+                    if (this.disposed || !store) {
+                        sample.close();
+                        break;
+                    }
+                    const key = this.quantizeTs(sample.timestamp, step);
+                    const existing = store.get(key);
+                    if (existing && this.accepts(session, existing)) {
+                        sample.close();
+                    }
+                    else {
+                        this.storeFrame(src, store, key, await this.snapshot(session, sample));
+                    }
+                    const head = this.videoPlayhead.get(src) ?? timestamp;
+                    if (!this.playing || head < timestamp - step || head > end)
+                        break;
+                }
+                this.evictVideoWindow(src, this.videoPlayhead.get(src) ?? timestamp, step);
+            }
+            catch (err) {
+                if (!this.disposed)
+                    console.error(`[WebStorageAdapter] sequential decode failed for ${src}:`, err);
+            }
+            finally {
+                session.decoding = false;
+            }
+        })();
+    }
+    /**
+     * Decode the single frame containing `timestampSec` (random access) and cache
+     * its bitmap — for cold warms, where streaming isn't appropriate. Idempotent
+     * per quantized ts at the clip's current level.
+     */
+    async decodeAt(src, timestampSec) {
+        const session = this.videoSessions.get(src);
+        if (!session || !Number.isFinite(timestampSec))
+            return;
+        const clamped = Math.max(0, Math.min(timestampSec, session.durationSec));
+        const key = this.quantizeTs(clamped, session.frameStep);
+        const store = this.videoFrames.get(src);
+        const existing = store?.get(key);
+        if (!store || (existing && this.accepts(session, existing)))
+            return;
+        try {
+            const sample = await session.sink.getSample(clamped);
+            if (!sample)
+                return;
+            if (this.disposed) {
+                sample.close();
+                return;
+            }
+            const frame = await this.snapshot(session, sample);
+            const dst = this.videoFrames.get(src);
+            if (!dst) {
+                frame.bitmap.close();
+                return;
+            }
+            this.storeFrame(src, dst, this.quantizeTs(frame.timestamp, session.frameStep), frame);
+            this.evictVideoWindow(src, clamped, session.frameStep);
+        }
+        catch (err) {
+            if (!this.disposed)
+                console.error(`[WebStorageAdapter] video decode failed for ${src}@${clamped}:`, err);
+        }
+    }
+    /** Put `frame` in the window, closing what it replaces unless the echo cache shares it. */
+    storeFrame(src, store, key, frame) {
+        const session = this.videoSessions.get(src);
+        const existing = store.get(key);
+        if (existing && session && this.accepts(session, existing) && !this.accepts(session, frame)) {
+            frame.bitmap.close();
+            return;
+        }
+        if (existing && existing !== frame && this.videoEchoFrames.get(src)?.get(key) !== existing) {
+            existing.bitmap.close();
+        }
+        store.set(key, frame);
+    }
+    /**
+     * Decode a single past frame into the dedicated {@link videoEchoFrames} cache.
+     * Like {@link decodeAt} but it does NOT window-evict — echo taps reach outside
+     * that window on purpose. Concurrent calls for the same frame join one decode.
+     */
+    decodeEchoFrameAt(src, timestampSec) {
+        const session = this.videoSessions.get(src);
+        if (!session || !Number.isFinite(timestampSec))
+            return Promise.resolve();
+        const clamped = Math.max(0, Math.min(timestampSec, session.durationSec));
+        const key = this.quantizeTs(clamped, session.frameStep);
+        const cached = this.videoEchoFrames.get(src)?.get(key);
+        if (cached && this.accepts(session, cached))
+            return Promise.resolve();
+        const id = `${src}#${key}`;
+        const inFlight = this.echoDecodes.get(id);
+        if (inFlight)
+            return inFlight;
+        const decode = this.decodeEchoFrameNow(src, session, clamped, key)
+            .finally(() => this.echoDecodes.delete(id));
+        this.echoDecodes.set(id, decode);
+        return decode;
+    }
+    /** {@link decodeEchoFrameAt}'s body, past the dedup gate. */
+    async decodeEchoFrameNow(src, session, clamped, key) {
+        let store = this.videoEchoFrames.get(src);
+        const windowed = this.videoFrames.get(src)?.get(key);
+        try {
+            if (!store) {
+                store = new Map();
+                this.videoEchoFrames.set(src, store);
+            }
+            if (windowed && this.accepts(session, windowed)) {
+                this.replaceEcho(src, store, key, windowed);
+            }
+            else {
+                const sample = await session.sink.getSample(clamped);
+                if (!sample)
+                    return;
+                if (this.disposed) {
+                    sample.close();
+                    return;
+                }
+                const frame = await this.snapshot(session, sample);
+                store = this.videoEchoFrames.get(src);
+                if (!store) {
+                    frame.bitmap.close();
+                    return;
+                }
+                this.replaceEcho(src, store, this.quantizeTs(frame.timestamp, session.frameStep), frame);
+            }
+            this.trimEchoCache(src);
+        }
+        catch (err) {
+            if (!this.disposed)
+                console.error(`[WebStorageAdapter] echo decode failed for ${src}@${clamped}:`, err);
+        }
+    }
+    replaceEcho(src, store, key, frame) {
+        const existing = store.get(key);
+        if (existing && existing !== frame && this.videoFrames.get(src)?.get(key) !== existing) {
+            existing.bitmap.close();
+        }
+        store.set(key, frame);
+    }
+    /** Bound the echo cache to ECHO_CACHE_LIMIT frames per src, dropping oldest-inserted first. */
+    trimEchoCache(src) {
+        const store = this.videoEchoFrames.get(src);
+        if (!store)
+            return;
+        while (store.size > WebStorageAdapter.ECHO_CACHE_LIMIT) {
+            const oldest = store.keys().next().value;
+            if (oldest === undefined)
+                break;
+            const frame = store.get(oldest);
+            // Only close the bitmap if it isn't shared with the live playback window.
+            if (frame && this.videoFrames.get(src)?.get(oldest) !== frame)
+                frame.bitmap.close();
+            store.delete(oldest);
+        }
+    }
+    /**
+     * Resize `sample` to the clip's level and snapshot it to an immutable bitmap,
+     * closing the sample. Drawn and snapshotted in one synchronous step, so the
+     * pooled canvas can be shared by concurrent decodes of the same clip.
+     */
+    snapshot(session, sample) {
+        const level = session.levels.level;
+        const { width, height } = levelSize(level, session.intrinsic);
+        try {
+            let canvas = session.canvas;
+            if (!canvas || canvas.width !== width || canvas.height !== height) {
+                canvas = new OffscreenCanvas(width, height);
+                session.canvas = canvas;
+            }
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+                throw new Error("video snapshot: could not get 2d context");
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = "high";
+            ctx.clearRect(0, 0, width, height);
+            sample.drawWithFit(ctx, { fit: "fill" });
+            const bitmap = createImageBitmap(canvas);
+            const timestamp = sample.timestamp;
+            return bitmap.then((b) => ({ timestamp, bitmap: b, level }));
+        }
+        finally {
+            sample.close();
+        }
+    }
+    windowFrames(session) {
+        return videoWindowFrames(session ? { width: session.width, height: session.height } : null);
+    }
+    /** Drop decoded frames (closing their bitmaps) outside the window around `timestamp` (source seconds). */
+    evictVideoWindow(src, timestamp, step) {
+        const frames = this.videoFrames.get(src);
+        if (!frames)
+            return;
+        const { forward, back } = this.windowFrames(this.videoSessions.get(src));
+        const lo = timestamp - back * step;
+        const hi = timestamp + forward * step;
+        const echo = this.videoEchoFrames.get(src);
+        for (const [key, frame] of frames) {
+            if (frame.timestamp < lo || frame.timestamp > hi) {
+                if (echo?.get(key) !== frame)
+                    frame.bitmap.close();
+                frames.delete(key);
+            }
+        }
+    }
+    /**
+     * Closest decoded frame to `timestamp`, or null if none are decoded yet — at
+     * any distance, so a not-yet-warm playhead paints the closest frame.
+     */
+    nearestDecoded(frames, timestamp, step) {
+        const exact = frames.get(this.quantizeTs(timestamp, step));
+        if (exact)
+            return exact;
+        let best = null;
+        let bestDist = Infinity;
+        for (const frame of frames.values()) {
+            const dist = Math.abs(frame.timestamp - timestamp);
+            if (dist < bestDist) {
+                bestDist = dist;
+                best = frame;
+            }
+        }
+        return best;
+    }
+    /** Quantize a source timestamp to a stable integer ring key. */
+    quantizeTs(timestamp, step) {
+        return Math.round(timestamp / step);
+    }
+    /**
+     * The frame in `store` closest to `timestamp`, but only within one frame step
+     * (so a request matches the sample whose grid-aligned timestamp quantized to
+     * an adjacent key, without returning a clearly wrong frame).
+     */
+    nearestWithin(store, timestamp, step, accept) {
+        if (!store || store.size === 0)
+            return null;
+        let best = null;
+        let bestDist = Infinity;
+        for (const frame of store.values()) {
+            if (accept && !accept(frame))
+                continue;
+            const dist = Math.abs(frame.timestamp - timestamp);
+            if (dist < bestDist) {
+                bestDist = dist;
+                best = frame;
+            }
+        }
+        return best && bestDist <= step ? best : null;
+    }
+    /** The first sample's duration and size; ~30fps when the track won't say. */
+    async probeFirstFrame(sink) {
+        try {
+            let first = await sink.getSample(0);
+            if (!first) {
+                for await (const sample of sink.samples()) {
+                    first = sample;
+                    break;
+                }
+            }
+            if (first) {
+                const probe = {
+                    frameStep: first.duration > 0 ? first.duration : 1 / 30,
+                    width: first.displayWidth,
+                    height: first.displayHeight,
+                };
+                first.close();
+                return probe;
+            }
+        }
+        catch {
+            // fall through to defaults
+        }
+        return { frameStep: 1 / 30, width: 1, height: 1 };
+    }
+    makeCKImageFromPixels(pixels, width, height) {
+        return this.canvasKit.MakeImage({
+            width,
+            height,
+            alphaType: this.canvasKit.AlphaType.Unpremul,
+            colorType: this.canvasKit.ColorType.RGBA_8888,
+            colorSpace: this.canvasKit.ColorSpace.SRGB,
+        }, pixels, 4 * width);
+    }
+    // ─── Audio ───────────────────────────────────────────────────────────────
+    /** Fetches and decodes `src` into a Web Audio `AudioBuffer`, cached for {@link getAudioBuffer}. No-op if already cached. */
+    async loadAudio(src, _startFrame, _endFrame, _trimStart = 0, _trimEnd) {
+        if (this.audioBuffers.has(src))
+            return;
+        if (!this.audioCtx)
+            this.audioCtx = new AudioContext();
+        const arrayBuffer = await (await this.fetchBlob(this.assetUrl(src, "media"))).arrayBuffer();
+        const audioBuffer = await this.audioCtx.decodeAudioData(arrayBuffer);
+        this.audioBuffers.set(src, audioBuffer);
+    }
+    async fetchAudioData(src) {
+        return (await this.fetchBlob(this.assetUrl(src, "media"))).arrayBuffer();
+    }
+    getAudioBuffer(src) {
+        return this.audioBuffers.get(src) ?? null;
+    }
+    // ─── Font ────────────────────────────────────────────────────────────────
+    /**
+     * Registers every weight/slant file for `fontFamily` under the bare family
+     * name, once per family, so CanvasKit's matcher can pick the closest file for
+     * any requested weight — which is what makes weights tweenable.
+     */
+    async loadFont(key, fontFamily, _fontWeight) {
+        if (this.registeredFontFamilies.has(fontFamily))
+            return true;
+        const metas = this.catalog.getFontFamilyMetas(fontFamily);
+        if (metas.length === 0) {
+            // Not an error: an undescribed family shapes against the platform
+            // fallback. Warned once per family per catalog, since the caller
+            // retries on every `loadAt`.
+            if (!this.unknownFontFamilies.has(fontFamily)) {
+                this.unknownFontFamilies.add(fontFamily);
+                console.warn(`[WebStorageAdapter] No font manifest entry for "${key}"; shaping against the fallback face. Add it to the manifest font record.`);
+            }
+            return false;
+        }
+        // Dedupe by src in case the same file is registered under multiple keys.
+        const sources = [...new Set(metas.map(m => m.src))];
+        await Promise.all(sources.map(async (src) => {
+            const bytes = await (await this.fetchBlob(src)).arrayBuffer();
+            this.fontMgr.registerFont(new Uint8Array(bytes), fontFamily);
+        }));
+        this.registeredFontFamilies.add(fontFamily);
+        this.unknownFontFamilies.delete(fontFamily);
+        this.fontEpoch++;
+        return true;
+    }
+    getFontMgr() {
+        return this.fontMgr;
+    }
+    /** The shared shaped-text cache (see {@link paragraphCache}). */
+    getParagraphCache() {
+        return this.paragraphCache;
+    }
+    /** Current font-registration epoch, folded into paragraph cache keys. */
+    getFontEpoch() {
+        return this.fontEpoch;
+    }
+    // ─── Lifecycle ───────────────────────────────────────────────────────────
+    dispose() {
+        if (this.disposed)
+            return;
+        this.disposed = true;
+        this.paragraphCache.dispose();
+        this.images.dispose();
+        this.imageSources.clear();
+        for (const image of this.canvas3DTextures.values())
+            image.delete();
+        this.canvas3DTextures.clear();
+        // Close window bitmaps, tracking them so shared echo entries aren't
+        // double-closed below.
+        const closed = new Set();
+        for (const frames of this.videoFrames.values()) {
+            for (const { bitmap } of frames.values()) {
+                bitmap.close();
+                closed.add(bitmap);
+            }
+        }
+        this.videoFrames.clear();
+        for (const frames of this.videoEchoFrames.values()) {
+            for (const { bitmap } of frames.values())
+                if (!closed.has(bitmap))
+                    bitmap.close();
+        }
+        this.videoEchoFrames.clear();
+        for (const session of this.videoSessions.values()) {
+            session.textureImage?.delete();
+            session.input.dispose();
+        }
+        this.videoSessions.clear();
+        this.clearVideoAltSlots();
+        this.videoPlayhead.clear();
+        this.videoFrameClaims.clear();
+        this.pendingVideoFrames.clear();
+        this.pendingEchoFrames.clear();
+        this.echoDecodes.clear();
+        this.surface = null;
+        this.audioBuffers.clear();
+        if (this.audioCtx && this.audioCtx.state !== "closed") {
+            this.audioCtx.close();
+        }
+        this.audioCtx = null;
+        super.dispose();
+    }
+}
+//# sourceMappingURL=storage-adapter.js.map