frameyard 0.2.0 → 0.4.0

package/dist/runtime/host.js

@@ -0,0 +1,701 @@
+import { isPlainObject, mergeProps, normalizeAudioClip, normalizeTranscriptClip, } from "../contracts.js";
+import { errorMessage, FrameyardError, isFrameyardError } from "../errors.js";
+import { applyBindings, applyPropVariables } from "./bindings.js";
+import { frameToMilliseconds } from "./clock.js";
+import { withDiagnosticsAsync, withDiagnosticsSync } from "./diagnostics.js";
+import { describeMediaAudio, prepareMedia, releaseMedia, settleMedia } from "./media.js";
+const FRAME_STATE_PROPERTIES = [
+    "--fy-frame",
+    "--fy-time",
+    "--fy-progress",
+    "--fy-fps",
+    "--fy-duration",
+    "--fy-duration-frames",
+];
+class HostRuntime {
+    metadata;
+    defaultProps;
+    controller;
+    root;
+    snapshot;
+    controllerModule;
+    manual;
+    readyPromise;
+    resolveReady;
+    readyResolved = false;
+    diagnosticsList = [];
+    diagnosticKeys = new Set();
+    props;
+    currentFrame = 0;
+    loaded = false;
+    mounted = false;
+    disposed = false;
+    audio = Object.freeze([]);
+    embedded = Object.freeze([]);
+    transcripts = Object.freeze([]);
+    loadQueue = Promise.resolve();
+    settleLoop = null;
+    settleWaiters = [];
+    diagnosticSink = (message) => {
+        this.addDiagnostic({ severity: "warning", code: "DETERMINISM_WARNING", message });
+    };
+    constructor(options) {
+        this.root = options.root;
+        this.metadata = options.metadata;
+        this.defaultProps = options.defaultProps;
+        this.controllerModule = options.controllerModule;
+        this.manual = options.manual;
+        this.props = options.defaultProps;
+        this.controller = options.declaration
+            ? options.declaration.kind === "inline"
+                ? { kind: "inline" }
+                : { kind: "external", src: options.declaration.src ?? "" }
+            : null;
+        this.snapshot = options.root.cloneNode(true);
+        this.readyPromise = new Promise((resolve) => {
+            this.resolveReady = resolve;
+        });
+        this.load = this.load.bind(this);
+        this.seek = this.seek.bind(this);
+        this.settle = this.settle.bind(this);
+        this.dispose = this.dispose.bind(this);
+        this.hideRoot();
+        this.pauseAllAnimations();
+    }
+    get ready() {
+        return this.readyPromise;
+    }
+    get audioClips() {
+        return this.audio;
+    }
+    get embeddedAudioClips() {
+        return this.embedded;
+    }
+    get transcriptClips() {
+        return this.transcripts;
+    }
+    get diagnostics() {
+        return Object.freeze([...this.diagnosticsList]);
+    }
+    get frame() {
+        return this.currentFrame;
+    }
+    markReady() {
+        if (this.readyResolved) {
+            return;
+        }
+        this.readyResolved = true;
+        this.resolveReady();
+        document.dispatchEvent(new CustomEvent("fy-ready", { detail: { manual: this.manual } }));
+    }
+    initialLoad() {
+        return this.loadNow({});
+    }
+    load(options = {}) {
+        const task = this.readyPromise.then(() => {
+            const run = this.loadQueue.then(() => this.loadNow(options), () => this.loadNow(options));
+            this.loadQueue = run.then(() => undefined, () => undefined);
+            return run;
+        });
+        return task.catch((error) => {
+            throw toHostError(error);
+        });
+    }
+    seek(frame) {
+        try {
+            if (this.disposed) {
+                throw new FrameyardError("COMPOSITION_DISPOSED", "Cannot seek a disposed composition host.");
+            }
+            if (!this.loaded) {
+                throw new FrameyardError("COMPOSITION_NOT_READY", "Cannot seek before the composition has loaded.");
+            }
+            this.seekNow(frame);
+        }
+        catch (error) {
+            this.addError(error, Number.isInteger(frame) ? frame : null);
+            throw toHostError(error);
+        }
+    }
+    settle() {
+        if (this.disposed) {
+            return Promise.reject(toHostError(new FrameyardError("COMPOSITION_DISPOSED", "Cannot settle a disposed composition host.")));
+        }
+        if (!this.loaded) {
+            return Promise.reject(toHostError(new FrameyardError("COMPOSITION_NOT_READY", "Cannot settle before the composition has loaded.")));
+        }
+        const promise = new Promise((resolve, reject) => {
+            this.settleWaiters.push({ resolve, reject, frame: this.currentFrame });
+            this.settleLoop ??= this.runSettleLoop();
+        });
+        return promise.catch((error) => {
+            this.addError(error, this.currentFrame);
+            throw toHostError(error);
+        });
+    }
+    async dispose() {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        const error = new FrameyardError("COMPOSITION_DISPOSED", "Composition host was disposed.");
+        for (const waiter of this.settleWaiters) {
+            waiter.reject(error);
+        }
+        this.settleWaiters = [];
+        await this.disposeCurrent();
+        this.loaded = false;
+        this.currentFrame = 0;
+        this.audio = Object.freeze([]);
+        this.embedded = Object.freeze([]);
+        this.transcripts = Object.freeze([]);
+        this.root.replaceChildren();
+        this.hideRoot();
+        this.clearFrameState();
+    }
+    async loadNow(options) {
+        if (this.disposed) {
+            throw new FrameyardError("COMPOSITION_DISPOSED", "Cannot load a disposed composition host.");
+        }
+        this.clearDiagnostics();
+        let props;
+        try {
+            props = resolveHostProps(this.defaultProps, options.props, this.controllerModule?.validateProps);
+        }
+        catch (error) {
+            this.addError(error, null);
+            throw error;
+        }
+        try {
+            await this.disposeCurrent();
+            this.assertActive();
+            this.restoreSnapshot();
+            this.hideRoot();
+            this.props = props;
+            applyPropVariables(this.root, props);
+            setFrameState(this.metadata, 0);
+            applyBindings({
+                root: this.root,
+                props,
+                onDiagnostic: (diagnostic) => this.addDiagnostic(diagnostic),
+            });
+            applyAnimationSchedule(this.root, this.metadata.fps);
+            if (this.controllerModule?.mount) {
+                await withDiagnosticsAsync("Composition mount()", this.diagnosticSink, () => this.controllerModule?.mount?.({ root: this.root, props }));
+            }
+            this.assertActive();
+            this.mounted = true;
+            await waitForAssets(this.root);
+            this.assertActive();
+            await prepareMedia(this.root);
+            this.assertActive();
+            this.audio = collectAudioClips(this.root, (diagnostic) => this.addDiagnostic(diagnostic));
+            this.embedded = describeMediaAudio(this.root);
+            this.transcripts = collectTranscriptClips(this.root, (diagnostic) => this.addDiagnostic(diagnostic));
+            checkAnimationDiagnostics(this.root, (diagnostic) => this.addDiagnostic(diagnostic));
+            this.seekNow(0);
+            await settleMedia(this.root, 0, this.metadata.fps);
+            this.assertActive();
+            this.loaded = true;
+            this.showRoot();
+        }
+        catch (error) {
+            this.loaded = false;
+            this.hideRoot();
+            this.addError(error, null);
+            throw error;
+        }
+    }
+    assertActive() {
+        if (this.disposed) {
+            throw new FrameyardError("COMPOSITION_DISPOSED", "Composition host was disposed during load.");
+        }
+    }
+    async disposeCurrent() {
+        if (this.mounted && this.controllerModule?.dispose) {
+            try {
+                await withDiagnosticsAsync("Composition dispose()", this.diagnosticSink, () => this.controllerModule?.dispose?.());
+            }
+            catch (error) {
+                this.addError(error, null);
+            }
+        }
+        this.mounted = false;
+        releaseMedia(this.root);
+        this.loaded = false;
+    }
+    restoreSnapshot() {
+        releaseMedia(this.root);
+        this.root.replaceChildren(...Array.from(this.snapshot.childNodes, (child) => child.cloneNode(true)));
+        for (const attribute of Array.from(this.root.attributes)) {
+            this.root.removeAttribute(attribute.name);
+        }
+        for (const attribute of Array.from(this.snapshot.attributes)) {
+            this.root.setAttribute(attribute.name, attribute.value);
+        }
+    }
+    seekNow(frame) {
+        if (!Number.isInteger(frame) || frame < 0 || frame >= this.metadata.durationInFrames) {
+            throw new FrameyardError("FRAME_OUT_OF_RANGE", `Frame ${frame} is outside the valid range 0..${this.metadata.durationInFrames - 1}.`);
+        }
+        setFrameState(this.metadata, frame);
+        if (this.controllerModule?.update) {
+            const result = withDiagnosticsSync("Composition update()", frame, this.diagnosticSink, () => this.controllerModule?.update?.({ frame, props: this.props, root: this.root }));
+            if (isThenable(result)) {
+                throw new FrameyardError("COMPOSITION_UPDATE_ASYNC", `Composition update() must be synchronous, but it returned a promise at frame ${frame}.`);
+            }
+        }
+        seekAnimations(this.root, frame, this.metadata.fps, () => {
+            this.addDiagnostic({
+                severity: "warning",
+                code: "DETERMINISM_WARNING",
+                message: "Composition uses CSS transitions; derive visual styles from frame and props instead.",
+            });
+        });
+        this.currentFrame = frame;
+    }
+    async runSettleLoop() {
+        try {
+            while (this.settleWaiters.length > 0) {
+                const waiters = this.settleWaiters;
+                this.settleWaiters = [];
+                const frame = waiters[waiters.length - 1]?.frame ?? this.currentFrame;
+                try {
+                    await settleMedia(this.root, frame, this.metadata.fps);
+                    for (const waiter of waiters) {
+                        waiter.resolve();
+                    }
+                }
+                catch (error) {
+                    for (const waiter of waiters) {
+                        waiter.reject(error);
+                    }
+                }
+            }
+        }
+        finally {
+            this.settleLoop = null;
+            if (this.settleWaiters.length > 0) {
+                this.settleLoop = this.runSettleLoop();
+            }
+        }
+    }
+    addDiagnostic(diagnostic) {
+        const key = JSON.stringify([diagnostic.severity, diagnostic.code, diagnostic.message, diagnostic.details ?? null]);
+        if (this.diagnosticKeys.has(key)) {
+            return;
+        }
+        this.diagnosticKeys.add(key);
+        this.diagnosticsList.push(diagnostic);
+        document.dispatchEvent(new CustomEvent("fy-diagnostic", { detail: diagnostic }));
+    }
+    addError(error, frame) {
+        const code = isFrameyardError(error) ? error.code : "COMPOSITION_ERROR";
+        this.addDiagnostic({
+            severity: "error",
+            code,
+            message: errorMessage(error),
+            ...(frame !== null ? { details: { frame } } : {}),
+        });
+    }
+    clearDiagnostics() {
+        this.diagnosticsList.length = 0;
+        this.diagnosticKeys.clear();
+    }
+    hideRoot() {
+        this.root.setAttribute("data-fy-pending", "");
+    }
+    showRoot() {
+        this.root.removeAttribute("data-fy-pending");
+    }
+    pauseAllAnimations() {
+        for (const animation of this.root.getAnimations({ subtree: true })) {
+            try {
+                animation.pause();
+                animation.currentTime = 0;
+            }
+            catch {
+                // Best-effort: hidden content should not animate in real time.
+            }
+        }
+    }
+    clearFrameState() {
+        for (const property of FRAME_STATE_PROPERTIES) {
+            document.documentElement.style.removeProperty(property);
+        }
+    }
+}
+function resolveHostProps(defaults, overrides, validateProps) {
+    const merged = mergeProps(defaults, overrides);
+    if (!validateProps) {
+        return merged;
+    }
+    let errors;
+    try {
+        errors = validateProps(merged);
+    }
+    catch (error) {
+        throw new FrameyardError("PROPS_INVALID", `Props validation failed: ${errorMessage(error)}`, { cause: error });
+    }
+    if (errors !== undefined) {
+        if (!Array.isArray(errors) || errors.some((item) => typeof item !== "string")) {
+            throw new FrameyardError("PROPS_INVALID", "validateProps() must return void or an array of strings.");
+        }
+        if (errors.length > 0) {
+            throw new FrameyardError("PROPS_INVALID", `Invalid props: ${errors.join("; ")}`);
+        }
+    }
+    return merged;
+}
+async function waitForDom() {
+    if (document.readyState !== "loading") {
+        return;
+    }
+    await new Promise((resolve) => {
+        document.addEventListener("DOMContentLoaded", () => resolve(), { once: true });
+    });
+}
+function readMetadata(root) {
+    const width = readPositiveInteger(root, "width");
+    const height = readPositiveInteger(root, "height");
+    const fps = readPositiveNumber(root, "fps");
+    const durationInFrames = readPositiveInteger(root, "duration-in-frames");
+    return { width, height, fps, durationInFrames };
+}
+function readPositiveInteger(root, attribute) {
+    const raw = root.getAttribute(attribute);
+    if (raw === null) {
+        throw new FrameyardError("COMPOSITION_INVALID", `Missing required "${attribute}" attribute on <fy-composition>.`);
+    }
+    const value = Number(raw);
+    if (!/^\d+$/.test(raw.trim()) || !Number.isInteger(value) || value <= 0) {
+        throw new FrameyardError("COMPOSITION_INVALID", `"${attribute}" must be a positive integer; received "${raw}".`);
+    }
+    return value;
+}
+function readPositiveNumber(root, attribute) {
+    const raw = root.getAttribute(attribute);
+    if (raw === null) {
+        throw new FrameyardError("COMPOSITION_INVALID", `Missing required "${attribute}" attribute on <fy-composition>.`);
+    }
+    const value = Number(raw);
+    if (!Number.isFinite(value) || value <= 0) {
+        throw new FrameyardError("COMPOSITION_INVALID", `"${attribute}" must be a positive number; received "${raw}".`);
+    }
+    return value;
+}
+function readDefaultProps() {
+    const blocks = document.querySelectorAll('script[type="application/json"][data-fy="props"]');
+    if (blocks.length > 1) {
+        throw new FrameyardError("PROPS_INVALID", 'A composition may contain at most one data-fy="props" block.');
+    }
+    const block = blocks[0];
+    if (!block) {
+        return Object.freeze({});
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(block.textContent ?? "");
+    }
+    catch (error) {
+        throw new FrameyardError("PROPS_INVALID", `Invalid default props JSON: ${errorMessage(error)}`);
+    }
+    if (!isPlainObject(parsed)) {
+        throw new FrameyardError("PROPS_INVALID", 'The data-fy="props" block must contain a JSON object.');
+    }
+    return mergeProps(parsed, undefined);
+}
+function readControllerDeclaration() {
+    const blocks = document.querySelectorAll('script[type="text/fy-controller"]');
+    if (blocks.length > 1) {
+        throw new FrameyardError("CONTROLLER_INVALID", "A composition may declare at most one controller.");
+    }
+    const block = blocks[0];
+    if (!block) {
+        return null;
+    }
+    const src = block.getAttribute("src");
+    const source = block.textContent ?? "";
+    if (src !== null && source.trim().length > 0) {
+        throw new FrameyardError("CONTROLLER_INVALID", "A controller must be either inline or external, not both.");
+    }
+    if (src === null && source.trim().length === 0) {
+        throw new FrameyardError("CONTROLLER_INVALID", "A controller must contain inline source or reference an external module with src.");
+    }
+    if (src !== null) {
+        return { kind: "external", src };
+    }
+    return { kind: "inline", source };
+}
+async function importController(declaration) {
+    if (!declaration) {
+        return null;
+    }
+    const url = declaration.kind === "external"
+        ? new URL(declaration.src ?? "", document.baseURI).href
+        : new URL("?__fy-controller", document.baseURI).href;
+    let module;
+    try {
+        module = (await import(url));
+    }
+    catch (error) {
+        throw new FrameyardError("CONTROLLER_INVALID", `Could not load controller ${url}: ${errorMessage(error)}`, {
+            cause: error,
+        });
+    }
+    if (!isPlainObject(module.default)) {
+        throw new FrameyardError("CONTROLLER_INVALID", `Controller ${url} must default-export an object.`);
+    }
+    const controller = module.default;
+    for (const key of ["mount", "update", "dispose", "validateProps"]) {
+        if (controller[key] !== undefined && typeof controller[key] !== "function") {
+            throw new FrameyardError("CONTROLLER_INVALID", `Controller ${key} must be a function when provided.`);
+        }
+    }
+    if (!controller.mount && !controller.update && !controller.validateProps) {
+        throw new FrameyardError("CONTROLLER_INVALID", "Controller must export at least one of mount(), update(), or validateProps().");
+    }
+    if (controller.update && isAsyncFunction(controller.update)) {
+        throw new FrameyardError("CONTROLLER_INVALID", "Controller update() must be synchronous; finish asynchronous work in mount().");
+    }
+    return controller;
+}
+function isThenable(value) {
+    return ((typeof value === "object" || typeof value === "function") &&
+        value !== null &&
+        typeof value.then === "function");
+}
+function isAsyncFunction(value) {
+    return typeof value === "function" && Object.prototype.toString.call(value) === "[object AsyncFunction]";
+}
+function toHostError(error) {
+    if (isFrameyardError(error)) {
+        return new Error(`[${error.code}] ${error.message}`);
+    }
+    return error instanceof Error ? error : new Error(String(error));
+}
+async function waitForAssets(root) {
+    await document.fonts.ready;
+    const images = Array.from(root.querySelectorAll("img"));
+    await Promise.all(images.map(async (image) => {
+        if (!image.currentSrc && !image.src) {
+            return;
+        }
+        try {
+            await image.decode();
+        }
+        catch (error) {
+            throw new FrameyardError("ASSET_NOT_FOUND", `Could not load image asset "${image.currentSrc || image.src}".`, {
+                cause: error,
+            });
+        }
+    }));
+}
+function animationElements(root) {
+    const selector = "[data-fy-anim-start], [data-fy-anim-duration], [data-fy-anim-easing]";
+    return [...(root.matches(selector) ? [root] : []), ...Array.from(root.querySelectorAll(selector))];
+}
+function applyAnimationSchedule(root, fps) {
+    for (const element of animationElements(root)) {
+        const style = element instanceof HTMLElement || element instanceof SVGElement ? element.style : null;
+        if (!style) {
+            continue;
+        }
+        const start = element.getAttribute("data-fy-anim-start");
+        const duration = element.getAttribute("data-fy-anim-duration");
+        const easing = element.getAttribute("data-fy-anim-easing");
+        if (start !== null) {
+            const frames = Number(start);
+            if (!Number.isInteger(frames) || frames < 0) {
+                throw new FrameyardError("ANIMATION_INVALID", "data-fy-anim-start must be a non-negative integer frame.");
+            }
+            style.setProperty("animation-delay", `${frames / fps}s`, "important");
+        }
+        if (duration !== null) {
+            const frames = Number(duration);
+            if (!Number.isInteger(frames) || frames <= 0) {
+                throw new FrameyardError("ANIMATION_INVALID", "data-fy-anim-duration must be a positive integer frame.");
+            }
+            style.setProperty("animation-duration", `${frames / fps}s`, "important");
+        }
+        if (easing !== null) {
+            if (easing.trim().length === 0) {
+                throw new FrameyardError("ANIMATION_INVALID", "data-fy-anim-easing must not be empty.");
+            }
+            style.setProperty("animation-timing-function", easing, "important");
+        }
+    }
+}
+function checkAnimationDiagnostics(root, sink) {
+    for (const element of animationElements(root)) {
+        const animations = element.getAnimations();
+        if (animations.length === 0) {
+            sink({
+                severity: "warning",
+                code: "ANIMATION_NOT_FOUND",
+                message: "data-fy-anim-* is present but the element has no CSS animation.",
+                details: { element: element.tagName.toLowerCase() },
+            });
+        }
+        else if (animations.length > 1) {
+            sink({
+                severity: "warning",
+                code: "ANIMATION_MULTIPLE",
+                message: "data-fy-anim-* applies one schedule to every animation on the element.",
+                details: { element: element.tagName.toLowerCase() },
+            });
+        }
+    }
+}
+function seekAnimations(root, frame, fps, onTransition) {
+    if (typeof root.getAnimations !== "function") {
+        return;
+    }
+    const time = frameToMilliseconds(frame, fps);
+    let sawTransition = false;
+    for (const animation of root.getAnimations({ subtree: true })) {
+        if (typeof CSSTransition !== "undefined" && animation instanceof CSSTransition) {
+            sawTransition = true;
+        }
+        try {
+            animation.pause();
+            animation.currentTime = time;
+        }
+        catch (error) {
+            throw new FrameyardError("COMPOSITION_ERROR", `A CSS or Web Animation could not be seeked to frame ${frame}: ${errorMessage(error)}`, { cause: error });
+        }
+    }
+    if (sawTransition) {
+        onTransition();
+    }
+}
+function setFrameState(metadata, frame) {
+    const root = document.documentElement;
+    const progress = metadata.durationInFrames <= 1 ? 0 : frame / (metadata.durationInFrames - 1);
+    root.style.setProperty("--fy-frame", String(frame));
+    root.style.setProperty("--fy-time", String(frame / metadata.fps));
+    root.style.setProperty("--fy-progress", String(progress));
+    root.style.setProperty("--fy-fps", String(metadata.fps));
+    root.style.setProperty("--fy-duration", String(metadata.durationInFrames / metadata.fps));
+    root.style.setProperty("--fy-duration-frames", String(metadata.durationInFrames));
+}
+function collectAudioClips(root, onDiagnostic) {
+    const clips = [];
+    for (const element of Array.from(root.querySelectorAll("audio"))) {
+        const src = element.getAttribute("src");
+        if (src === null || src.length === 0) {
+            continue;
+        }
+        const startFrame = readMediaInteger(element, "data-fy-start", 0);
+        const trimStart = readMediaNumber(element, "data-fy-trim", 0);
+        const trimDuration = readOptionalMediaNumber(element, "data-fy-duration");
+        const volume = element.hasAttribute("muted") ? 0 : readMediaNumber(element, "data-fy-volume", 1);
+        if (startFrame === undefined || trimStart === undefined || volume === undefined) {
+            continue;
+        }
+        try {
+            clips.push(normalizeAudioClip({
+                src,
+                startFrame,
+                trimStart,
+                ...(trimDuration !== undefined ? { trimDuration } : {}),
+                volume,
+            }, clips.length));
+        }
+        catch (error) {
+            onDiagnostic({
+                severity: "warning",
+                code: isFrameyardError(error) ? error.code : "MEDIA_INVALID",
+                message: errorMessage(error),
+            });
+        }
+    }
+    return Object.freeze(clips);
+}
+function collectTranscriptClips(root, onDiagnostic) {
+    const clips = [];
+    for (const element of Array.from(root.querySelectorAll("fy-transcript"))) {
+        const src = element.getAttribute("src");
+        if (src === null || src.length === 0) {
+            continue;
+        }
+        try {
+            clips.push(normalizeTranscriptClip({ src, words: element.hasAttribute("words") }, clips.length));
+        }
+        catch (error) {
+            onDiagnostic({
+                severity: "warning",
+                code: isFrameyardError(error) ? error.code : "TRANSCRIPT_INVALID",
+                message: errorMessage(error),
+            });
+        }
+    }
+    return Object.freeze(clips);
+}
+function readMediaInteger(element, attribute, fallback) {
+    const raw = element.getAttribute(attribute);
+    if (raw === null) {
+        return fallback;
+    }
+    const value = Number(raw);
+    return /^\d+$/.test(raw.trim()) && Number.isInteger(value) && value >= 0 ? value : undefined;
+}
+function readMediaNumber(element, attribute, fallback) {
+    const raw = element.getAttribute(attribute);
+    if (raw === null) {
+        return fallback;
+    }
+    const value = Number(raw);
+    return Number.isFinite(value) && value >= 0 ? value : undefined;
+}
+function readOptionalMediaNumber(element, attribute) {
+    const raw = element.getAttribute(attribute);
+    if (raw === null) {
+        return undefined;
+    }
+    const value = Number(raw);
+    return Number.isFinite(value) && value > 0 ? value : undefined;
+}
+export async function createFrameyardHost() {
+    await waitForDom();
+    const root = document.querySelector("fy-composition");
+    if (!(root instanceof HTMLElement)) {
+        throw new FrameyardError("COMPOSITION_INVALID", "Composition document must contain one <fy-composition> root.");
+    }
+    const metadata = readMetadata(root);
+    const defaultProps = readDefaultProps();
+    const declaration = readControllerDeclaration();
+    const controllerModule = await importController(declaration);
+    const manual = new URLSearchParams(window.location.search).has("__fy-manual");
+    const host = new HostRuntime({
+        root,
+        metadata,
+        defaultProps,
+        declaration,
+        controllerModule,
+        manual,
+    });
+    window.__fy = host;
+    if (manual) {
+        host.markReady();
+    }
+    else {
+        try {
+            await host.initialLoad();
+        }
+        catch {
+            // The host records the diagnostic; ready still resolves so callers can inspect it.
+        }
+        host.markReady();
+    }
+    return host;
+}
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+    void createFrameyardHost().catch((error) => {
+        const code = isFrameyardError(error) ? error.code : "COMPOSITION_ERROR";
+        const message = errorMessage(error);
+        window.__fyError = { code, message };
+        console.error(`[frameyard] ${message}`);
+        document.dispatchEvent(new CustomEvent("fy-error", { detail: { code, message } }));
+    });
+}
+//# sourceMappingURL=host.js.map