@alpha2-sh/editor 0.0.0-stage → 0.1.0

package/dist/native-client/index.js

@@ -0,0 +1,354 @@
+import { compileEditorDocument, EditorError, sequenceEnd, } from "../core/document.js";
+import { ExportFailureError } from "alpha2/export-failure";
+import { ExportJob, requireExportFrameRate } from "../browser/jobs.js";
+/**
+ * Asks the service whether the file at `url` (an artifact's) can still be downloaded, without
+ * downloading it. Never rejects: a network error is `unreachable`, a 404 is `missing`, and a 410
+ * is `gone` with the reason the service gives (`expired` when it gives none).
+ */
+export async function nativeArtifactStatus(url, request = fetch) {
+    let response;
+    try {
+        response = await request(url, { method: "HEAD" });
+    }
+    catch {
+        return { status: "unreachable" };
+    }
+    if (response.ok) {
+        const expires = Number(response.headers.get("x-alpha2-expires-at"));
+        return {
+            status: "available",
+            expiresAt: Number.isFinite(expires) && expires > 0 ? expires : null,
+        };
+    }
+    if (response.status === 410) {
+        // A HEAD answer has no body to say why; ask once more for it.
+        const detail = (await request(url)
+            .then((full) => full.json())
+            .catch(() => ({})));
+        return { status: "gone", reason: detail.reason ?? "expired" };
+    }
+    return { status: response.status === 404 ? "missing" : "unreachable" };
+}
+/** The error a failed or cancelled native job reports, carrying the host's failure. */
+function nativeFailure(state, jobId) {
+    const message = state.error ?? "Native export cancelled";
+    if (state.phase === "cancelled")
+        return new DOMException(message, "AbortError");
+    const failure = state.failure ?? {
+        code: "UNKNOWN",
+        message,
+        origin: "node",
+        operation: "export",
+        backend: "native",
+        phase: "prepare",
+        resource: "unknown",
+    };
+    return new ExportFailureError({ ...failure, message, jobId });
+}
+/** How many times a job's state is asked for in a row before an attempt gives up on it. */
+const STATUS_ATTEMPTS = 5;
+/** The wait before asking for a job's state again, doubled each time (0.25 s to 2 s). */
+const STATUS_RETRY_MS = 250;
+function delay(ms, signal) {
+    return new Promise((resolve, reject) => {
+        const stop = () => {
+            clearTimeout(timer);
+            reject(new DOMException("Native export cancelled", "AbortError"));
+        };
+        const timer = setTimeout(() => {
+            signal.removeEventListener("abort", stop);
+            resolve();
+        }, ms);
+        signal.addEventListener("abort", stop, { once: true });
+        if (signal.aborted)
+            stop();
+    });
+}
+/**
+ * A client for the native export service (`@alpha2-sh/node`'s HTTP host). Exports run on the service
+ * with the editor's retry policy; each job uploads its assets once and reuses them across attempts.
+ */
+export function createNativeClient(options) {
+    const request = options.fetch ?? fetch;
+    const base = options.baseUrl.replace(/\/$/, "");
+    const jobs = new Set();
+    let disposed = false;
+    // Set by `detach`: a job whose render was asked for is let go of, not removed.
+    let detached = false;
+    async function checked(path, init) {
+        const response = await request(`${base}${path}`, init);
+        if (!response.ok)
+            throw Error(`Native host: ${await response.text()}`);
+        return response;
+    }
+    return {
+        /** The service's `/health` report. Rejects when the service answers with an error status. */
+        async capabilities() {
+            return (await checked("/health")).json();
+        },
+        /**
+         * Starts an export of `editor.document` on the service and returns its job. The document,
+         * `assets` and `settings` are captured now; later edits do not reach the job. `assets` may be
+         * a function, called once per upload with the document and the attempt's signal. The range is
+         * the document's export range, else the whole timeline. Throws when the client is disposed,
+         * and an `EditorError` `invalid_frame_rate` for a `frameRate` the engine does not read.
+         */
+        startExport(editor, assets, settings = {}) {
+            if (disposed)
+                throw Error("Native client is disposed");
+            requireExportFrameRate(settings.frameRate);
+            const document = editor.document;
+            const capturedSettings = { ...settings };
+            const capturedAssets = typeof assets === "function" ? assets : [...assets];
+            const id = crypto.randomUUID();
+            const path = `/jobs/${id}`;
+            // Shared by attempts: an attempt resumes, and starts over only when the service lost the job.
+            let captured = null;
+            // Whether the service holds a job to clean up: from the acknowledged PUT on, uploads or not.
+            let allocated = false;
+            const acknowledged = new Set();
+            let uploaded = null;
+            // Whether a render was asked for: the service may be running one an earlier attempt started.
+            let posted = false;
+            const lost = () => {
+                allocated = false;
+                acknowledged.clear();
+                uploaded = null;
+                posted = false;
+            };
+            const allocate = async () => {
+                // Allocate without the cancellation signal: even a cancelled allocation is acknowledged
+                // before DELETE, so an orphan job cannot win that race.
+                try {
+                    await checked(path, { method: "PUT" });
+                }
+                catch (error) {
+                    // An allocation whose answer was lost: the id is this job's alone, so a job there is it.
+                    const existing = await request(`${base}${path}`).catch(() => null);
+                    if (!existing?.ok)
+                        throw error;
+                }
+                allocated = true;
+            };
+            const upload = async (doc, signal) => {
+                if (!allocated)
+                    await allocate();
+                captured ??=
+                    typeof capturedAssets === "function"
+                        ? await capturedAssets(doc, signal)
+                        : capturedAssets;
+                signal.throwIfAborted();
+                for (const asset of captured) {
+                    const key = `${asset.kind}/${asset.id}`;
+                    if (acknowledged.has(key))
+                        continue;
+                    await checked(`${path}/${asset.kind}/${encodeURIComponent(asset.id)}`, {
+                        method: "PUT",
+                        body: asset.blob,
+                        signal,
+                        headers: {
+                            "x-alpha2-filename": encodeURIComponent(asset.name),
+                        },
+                    });
+                    acknowledged.add(key);
+                }
+                return {
+                    assets: captured,
+                    frames: new Map(captured.flatMap((asset) => asset.kind === "frames" && asset.locator !== undefined
+                        ? [[asset.locator, asset.id]]
+                        : [])),
+                };
+            };
+            /**
+             * The job's state. A request that fails for a moment (the network, a proxy's 502) is asked
+             * again, backing off, so a long render is not given up for one lost answer; a 404 means the
+             * service lost the job, and the next attempt starts over.
+             */
+            const status = async (signal, attempt) => {
+                for (let failures = 1;; failures += 1) {
+                    signal.throwIfAborted();
+                    let failure;
+                    try {
+                        const response = await request(`${base}${path}`, { signal });
+                        if (response.status === 404) {
+                            lost();
+                            throw new ExportFailureError({
+                                code: "HOST_EXITED",
+                                message: "The native export service lost this job; it may have restarted",
+                                origin: "browser",
+                                operation: "export",
+                                backend: "native",
+                                phase: "render",
+                                resource: "unknown",
+                                jobId: id,
+                                attemptId: attempt.id,
+                            });
+                        }
+                        if (response.ok)
+                            return (await response.json());
+                        failure = Error(`Native host: ${await response.text()}`);
+                    }
+                    catch (error) {
+                        if (signal.aborted || error instanceof ExportFailureError)
+                            throw error;
+                        failure = error;
+                    }
+                    if (failures >= STATUS_ATTEMPTS)
+                        throw failure;
+                    await delay(STATUS_RETRY_MS * 2 ** (failures - 1), signal);
+                }
+            };
+            const render = async (doc, signal, progress, attempt) => {
+                uploaded ??= await upload(doc, signal);
+                const { assets: captured, frames } = uploaded;
+                const compiled = compileEditorDocument(doc);
+                const diagnostics = compiled.diagnostics;
+                // Sent whole: the host's conform decides which sources need media.
+                const project = compiled.project;
+                if (diagnostics.length)
+                    throw Error(diagnostics.map((d) => d.message).join("; "));
+                signal.throwIfAborted();
+                // A render an earlier attempt asked for is followed, not asked again (the service refuses that
+                // while it runs). One that failed or never started is asked anew.
+                const running = posted
+                    ? !["preparing", "failed"].includes((await status(signal, attempt)).phase)
+                    : false;
+                if (!running) {
+                    posted = true;
+                    await checked(path, {
+                        method: "POST",
+                        headers: { "content-type": "application/json" },
+                        body: JSON.stringify({
+                            project,
+                            ...capturedSettings,
+                            startTicks: doc.metadata.exportRange?.start ?? 0,
+                            endTicks: doc.metadata.exportRange?.end ?? sequenceEnd(project),
+                            fonts: captured
+                                .filter((a) => a.kind === "caption-fonts")
+                                .map((a) => a.id),
+                            // Each image sequence's frame uploads, in project order.
+                            frames: Object.fromEntries(project.sources.flatMap((source) => source.provider?.format === "image_sequence"
+                                ? [
+                                    [
+                                        source.id,
+                                        source.provider.frames.map((locator) => locator === null
+                                            ? null
+                                            : (frames.get(locator) ?? null)),
+                                    ],
+                                ]
+                                : [])),
+                            proxies: Object.fromEntries(captured
+                                .filter((a) => a.kind === "proxies")
+                                .map((a) => [a.id, { madeFrom: a.madeFrom }])),
+                            media: capturedSettings.media ?? "original",
+                            // A retry asks for less in flight: the host scales its own budgets.
+                            ...(attempt.profile.memoryScale < 1 || capturedSettings.memory
+                                ? {
+                                    memory: {
+                                        ...capturedSettings.memory,
+                                        ...(attempt.profile.memoryScale < 1
+                                            ? { scale: attempt.profile.memoryScale }
+                                            : {}),
+                                    },
+                                }
+                                : {}),
+                            attempt: attempt.id,
+                        }),
+                    });
+                }
+                let published;
+                for (;;) {
+                    const state = await status(signal, attempt);
+                    if (state.phase === "failed" || state.phase === "cancelled")
+                        throw nativeFailure(state, id);
+                    if (state.phase === "completed") {
+                        published = state.artifact;
+                        break;
+                    }
+                    progress({
+                        phase: state.phase === "finalizing" || state.phase === "publishing"
+                            ? state.phase
+                            : "rendering",
+                        fraction: state.fraction,
+                        ...(state.frames ? { frames: state.frames } : {}),
+                    });
+                    await delay(100, signal);
+                }
+                const artifact = published;
+                if (!artifact)
+                    throw Error("The native service finished without a file to download");
+                // The file stays on the service until released, so a failed download retries without a rerender.
+                return {
+                    kind: "url",
+                    url: `${base}${path}/artifact`,
+                    name: artifact.name,
+                    bytes: artifact.bytes,
+                    expiresAt: artifact.expiresAt,
+                    release: async () => {
+                        await checked(path, { method: "DELETE" });
+                    },
+                };
+            };
+            const job = new ExportJob(editor.revision, document, {
+                run: render,
+                // Cleaned up once the job settles, never between attempts (a retry reuses the uploads). DELETE
+                // resolves only after the host exits and its files are removed.
+                async dispose({ ok }) {
+                    if (ok || !allocated || (detached && posted))
+                        return;
+                    lost();
+                    try {
+                        await checked(path, { method: "DELETE" });
+                    }
+                    catch (cause) {
+                        throw new EditorError("cancel_failed", "Native cleanup could not be confirmed. The host will expire an abandoned job.", "cancel", id, true, { cause });
+                    }
+                },
+            }, () => jobs.delete(job), { id });
+            jobs.add(job);
+            return job;
+        },
+        /**
+         * What the service knows of job `id`, for a page that lost the job it started (it was
+         * reloaded): its state, and where its file can be downloaded once it is complete. Null when the
+         * service no longer has the job. Rejects on any other error status.
+         */
+        async jobState(id) {
+            const response = await request(`${base}/jobs/${encodeURIComponent(id)}`);
+            if (response.status === 404)
+                return null;
+            if (!response.ok)
+                throw Error(`Native host: ${await response.text()}`);
+            const state = (await response.json());
+            return state.phase === "completed" && state.artifact
+                ? { ...state, url: `${base}/jobs/${encodeURIComponent(id)}/artifact` }
+                : state;
+        },
+        /**
+         * Removes job `id` from the service: a render it runs stops, and its kept file is deleted. For
+         * a job this client did not start, such as one a page that is gone left (see
+         * {@link jobState}). Rejects when the service answers with an error status.
+         */
+        async releaseJob(id) {
+            await checked(`/jobs/${encodeURIComponent(id)}`, { method: "DELETE" });
+        },
+        /** Cancels every running job and refuses new ones. Resolves once the cancellations settle. */
+        async dispose() {
+            disposed = true;
+            await Promise.all([...jobs].map((job) => job.cancel()));
+        },
+        /**
+         * Lets go of every running job and refuses new ones, for a page that is leaving, without
+         * cancelling what the service already renders: a job whose render was asked for goes on there
+         * and keeps its file, for a later page to find with {@link jobState}. A job still uploading is
+         * removed, since only this client could send the rest. The jobs here settle as cancelled.
+         * Resolves once they settle; a removal that fails is left to the service's lease.
+         */
+        async detach() {
+            disposed = true;
+            detached = true;
+            await Promise.allSettled([...jobs].map((job) => job.cancel()));
+        },
+    };
+}

package/dist/ports/index.d.ts

@@ -0,0 +1,146 @@
+import type { Selection } from "alpha2/assets";
+import type { ExportFailure } from "alpha2/export-failure";
+import type { RetryProfile } from "alpha2/export-retry";
+import type { Project } from "alpha2/project";
+import type { EditorDocument, AssetDescriptor } from "../core/document.js";
+/** Shows a project in a preview surface. Implemented by the browser bridge and native previews. */
+export interface PreviewBridge {
+    /**
+     * Replaces the shown project. `revision` identifies this version and increases with every call.
+     */
+    replaceProject(project: Project, revision: number): Promise<void>;
+    /** Shows the frame at `tick` (timeline ticks). */
+    seek(tick: number): Promise<void>;
+    /** Releases the preview's resources. The bridge is unusable afterwards. */
+    dispose(): Promise<void>;
+}
+/** Turns an imported input (a file, a URL) into a project source and its editor asset. */
+export interface MediaAdapter<T = unknown> {
+    /**
+     * Makes `input` readable as a source. Rejects when the input cannot be read or `signal` aborts.
+     * The caller calls `dispose` once the source is no longer used.
+     */
+    stage(input: T, signal: AbortSignal): Promise<{
+        source: Project["sources"][number];
+        asset: AssetDescriptor;
+        dispose(): void;
+    }>;
+}
+/** Plays a project's audio and owns the playhead while it plays. */
+export interface AudioTransport {
+    /** Moves the playhead to `tick` (timeline ticks), playing or not. */
+    seek(tick: number): void;
+    /** Starts playback from the playhead. Rejects when the output cannot start. */
+    play(): Promise<void>;
+    pause(): void;
+    /** The playhead, in timeline ticks. */
+    readonly tick: number;
+    dispose(): Promise<void>;
+}
+/** An export job's progress, as its backends report it and `ExportJob.progress` holds it. */
+export interface ExportProgress {
+    /**
+     * Where the job is. `rendering` counts frames; `finalizing` means every frame is encoded and the
+     * output is being flushed and closed; `publishing` that the file is being made available;
+     * `downloading` that a native result is crossing to this browser. Only `completed` means the
+     * result exists: 100 % of frames does not.
+     */
+    readonly phase: "preparing" | "rendering" | "finalizing" | "publishing" | "downloading" | "retrying" | "completed" | "cancelling" | "cancelled" | "failed";
+    /** The whole job's share done, from 0 to 1. */
+    readonly fraction: number;
+    /** The attempt this progress belongs to, from 1; `retrying` names the one about to start. */
+    readonly attempt?: number;
+    /** While `retrying`: why, and how long until the next attempt starts. */
+    readonly retry?: {
+        readonly reason: string;
+        readonly delayMs: number;
+    };
+    /** Frames encoded, when the backend counts them. */
+    readonly frames?: {
+        readonly completed: number;
+        readonly total: number;
+    };
+}
+/**
+ * The file a completed export made: a `blob` in memory, a disk-backed `file` (temporary
+ * origin-private storage), a file the user picked (`saved`), or a `url` on an export service.
+ */
+export type ExportArtifact = ({
+    readonly kind: "blob";
+    readonly blob: Blob;
+    readonly name: string;
+} | {
+    readonly kind: "file";
+    /** A disk-backed file: reading or downloading it does not load it into memory. */
+    readonly file: File;
+    readonly name: string;
+    /** Deletes the file. The artifact is unusable afterwards. */
+    release(): Promise<void>;
+} | {
+    readonly kind: "saved";
+    /** The name of the file the user picked, which now holds the export. */
+    readonly name: string;
+} | {
+    readonly kind: "url";
+    /** Where the file can be downloaded, any number of times, until it expires or is released. */
+    readonly url: string;
+    readonly name: string;
+    /** When the file stops being available, in milliseconds since the epoch. */
+    readonly expiresAt?: number;
+    /** Deletes the file behind `url`, when its holder allows it. */
+    release?(): Promise<void>;
+}) & {
+    /** The media each source read, as the engine selected it, when the exporter reports it. */
+    readonly media?: Readonly<Record<string, Selection>>;
+    /** The file's length, when known. */
+    readonly bytes?: number;
+    /**
+     * What the exporter reported about the run: timings, `performance` (with `memory` and `output`),
+     * rates. A browser export adds `decodeFallbacks`: the sources whose frames were read by element
+     * seeks rather than decoded, with why, how many frames, and whether for good.
+     */
+    readonly report?: Readonly<Record<string, unknown>>;
+};
+/** One run of an export job: a fresh device or host process, from the job's pinned document. */
+export interface ExportAttempt {
+    /**
+     * `<job id>/<number>`: what a backend tags this run's work with, so a late answer from an earlier
+     * one is told apart.
+     */
+    readonly id: string;
+    /** From 1. */
+    readonly number: number;
+    /**
+     * How much this run keeps in flight: a backend scales its byte budgets by `profile.memoryScale`.
+     */
+    readonly profile: RetryProfile;
+    /** Why the previous attempt failed, when this one is a retry. */
+    readonly previous?: ExportFailure;
+}
+/** Runs export attempts for an export job, in the browser, a native host, or a service. */
+export interface ExportBackend {
+    /** Runs one attempt. A retry is a new call, with the same document and a new `attempt`. */
+    run(document: EditorDocument, signal: AbortSignal, progress: (value: ExportProgress) => void, attempt: ExportAttempt): Promise<ExportArtifact>;
+    /**
+     * Called once, when the job has settled: after the attempt that succeeded, the last that failed,
+     * or the cancellation. What attempts share (uploads, a job on a service) is released here, not
+     * between attempts. Rejecting reports an unconfirmed cleanup.
+     */
+    dispose?(outcome: {
+        readonly ok: boolean;
+        readonly cancelled: boolean;
+    }): Promise<void>;
+}
+/** Stores a serialized editor document. */
+export interface PersistenceAdapter {
+    /** Returns the last saved JSON. Rejects when nothing can be read. */
+    load(): Promise<string>;
+    /** Stores `json`, replacing what was saved before. */
+    save(json: string): Promise<void>;
+}
+/** Whether a feature works on this host. */
+export interface Capability {
+    readonly available: boolean;
+    /** Why the feature is unavailable, for display; absent when it is available. */
+    readonly reason?: string;
+}

package/dist/ports/index.js

@@ -0,0 +1 @@
+export {};

package/dist/react/index.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode, CSSProperties } from "react";
+import type { EditorSession, EditorSnapshot } from "../core/session.js";
+import type { BrowserBridge } from "../browser/types.js";
+/**
+ * Makes `editor` available to {@link useEditor} and {@link useEditorSelector} below it. The caller
+ * owns the session; mounting or unmounting a provider never disposes it.
+ */
+export declare function EditorProvider({ editor, children, }: {
+    editor: EditorSession;
+    children: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<EditorSession | null>>;
+/** The session of the nearest {@link EditorProvider}. Throws when there is none. */
+export declare function useEditor(): EditorSession;
+/**
+ * Subscribes to one value derived from the session's snapshot; the component re-renders when it
+ * changes by `equal` (`Object.is` by default). Inline selectors are fine: the result is cached per
+ * snapshot and an `equal` result keeps the previous reference, even when the selector function
+ * itself is new on every render, so a selector that builds arrays or objects does not re-render
+ * in a loop. Throws without an {@link EditorProvider}.
+ */
+export declare function useEditorSelector<T>(selector: (snapshot: EditorSnapshot) => T, equal?: (a: T, b: T) => boolean): T;
+/**
+ * Shows `bridge`'s preview in a canvas filling a `div` (styled by `className` and `style`). The
+ * canvas is bound on mount and released on unmount; binds of one bridge run one at a time.
+ * `onReady` fires once the canvas is bound; `onError` receives a bind or release failure.
+ */
+export declare function EditorPreview({ bridge, className, style, onReady, onError, }: {
+    bridge: BrowserBridge;
+    className?: string;
+    style?: CSSProperties;
+    onReady?: () => void;
+    onError?: (error: unknown) => void;
+}): import("react").DetailedReactHTMLElement<{
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    className: string | undefined;
+    style: CSSProperties | undefined;
+}, HTMLDivElement>;

package/dist/react/index.js

@@ -0,0 +1,94 @@
+import { createContext, createElement, useContext, useEffect, useRef, useSyncExternalStore, } from "react";
+const Context = createContext(null);
+/**
+ * Makes `editor` available to {@link useEditor} and {@link useEditorSelector} below it. The caller
+ * owns the session; mounting or unmounting a provider never disposes it.
+ */
+export function EditorProvider({ editor, children, }) {
+    return createElement(Context.Provider, { value: editor }, children);
+}
+/** The session of the nearest {@link EditorProvider}. Throws when there is none. */
+export function useEditor() {
+    const editor = useContext(Context);
+    if (!editor)
+        throw new Error("EditorProvider is missing");
+    return editor;
+}
+/**
+ * Subscribes to one value derived from the session's snapshot; the component re-renders when it
+ * changes by `equal` (`Object.is` by default). Inline selectors are fine: the result is cached per
+ * snapshot and an `equal` result keeps the previous reference, even when the selector function
+ * itself is new on every render, so a selector that builds arrays or objects does not re-render
+ * in a loop. Throws without an {@link EditorProvider}.
+ */
+export function useEditorSelector(selector, equal = Object.is) {
+    const editor = useEditor();
+    const cache = useRef(null);
+    const getSelection = () => {
+        const snapshot = editor.getSnapshot();
+        const previous = cache.current;
+        if (previous &&
+            previous.editor === editor &&
+            previous.snapshot === snapshot &&
+            previous.selector === selector)
+            return previous.value;
+        const next = selector(snapshot);
+        const value = previous && previous.editor === editor && equal(previous.value, next)
+            ? previous.value
+            : next;
+        cache.current = { editor, snapshot, selector, value };
+        return value;
+    };
+    return useSyncExternalStore(editor.subscribe, getSelection, getSelection);
+}
+// Binds and unbinds are serialized per bridge, so a second surface can mount while the first is
+// still initializing. Each effect run owns a fresh canvas, including StrictMode's double run.
+const bindings = new WeakMap();
+/**
+ * Shows `bridge`'s preview in a canvas filling a `div` (styled by `className` and `style`). The
+ * canvas is bound on mount and released on unmount; binds of one bridge run one at a time.
+ * `onReady` fires once the canvas is bound; `onError` receives a bind or release failure.
+ */
+export function EditorPreview({ bridge, className, style, onReady, onError, }) {
+    const host = useRef(null);
+    const callbacks = useRef({ onReady, onError });
+    callbacks.current = { onReady, onError };
+    useEffect(() => {
+        const container = host.current;
+        if (!container)
+            return;
+        const canvas = document.createElement("canvas");
+        canvas.setAttribute("aria-label", "Sequence preview");
+        canvas.style.cssText =
+            "display:block;width:100%;height:100%;object-fit:contain";
+        container.append(canvas);
+        let cancelled = false;
+        let binding;
+        const setup = (bindings.get(bridge) ?? Promise.resolve())
+            .then(async () => {
+            if (cancelled)
+                return;
+            binding = await bridge.bindPreview(canvas);
+            if (cancelled) {
+                await binding.dispose();
+                binding = undefined;
+            }
+            else
+                callbacks.current.onReady?.();
+        })
+            .catch((error) => {
+            if (!cancelled)
+                callbacks.current.onError?.(error);
+        });
+        bindings.set(bridge, setup);
+        return () => {
+            cancelled = true;
+            canvas.remove();
+            const cleanup = setup.then(async () => {
+                await binding?.dispose();
+            });
+            bindings.set(bridge, cleanup.catch((error) => callbacks.current.onError?.(error)));
+        };
+    }, [bridge]);
+    return createElement("div", { ref: host, className, style });
+}