@agentshouse/mdruntime 0.1.0-cedb03eaa48b6 → 0.1.0-cedd665dffa4c

package/dist/live.js

@@ -0,0 +1,206 @@
+import { changeOf, digestOf, keyedAt, keyedInto, samePending, unchanged, } from './observation.js';
+import { uncaught } from './failure.js';
+import { roomsOfReach } from './rows.js';
+function narrowed(plan) {
+    return (plan.paths !== null &&
+        plan.hop === null &&
+        plan.backlinks === null &&
+        !(plan.shape.kind === 'documents' && plan.shape.backlinks));
+}
+export function readerOf(plan) {
+    const locked = new Set(plan.locked);
+    const named = plan.rooms === null ? null : new Set(plan.rooms);
+    const reached = plan.reach === null ? null : roomsOfReach(plan.reach);
+    return (locator) => !locked.has(locator) &&
+        (named === null || named.has(locator)) &&
+        (reached === null || reached.has(locator));
+}
+function affected({ plan, reads }, set) {
+    if (set.rooms.some(reads))
+        return true;
+    const paths = narrowed(plan) ? new Set(plan.paths) : null;
+    return set.documents.some(({ locator, path }) => reads(locator) && (paths === null || path === null || paths.has(path)));
+}
+function shown(entry, held) {
+    const cover = entry.cover(held);
+    return JSON.stringify('pending' in cover ? cover : cover.coverage);
+}
+export function createLiveQueries(run, holding) {
+    const entries = new Map();
+    let closed = false;
+    let recoveringNow = false;
+    let recoveringAll = false;
+    const recovering = new Set();
+    function deliver(entry, next) {
+        const previous = entry.digest;
+        entry.digest = digestOf(next);
+        entry.pending = 'pending' in entry.digest ? entry.digest.pending : null;
+        entry.covered = JSON.stringify('pending' in next.result ? next.result : next.result.coverage);
+        const change = previous === undefined ? null : changeOf(previous, next);
+        if (change !== null) {
+            for (const listener of entry.ready)
+                listener(change);
+        }
+        for (const listener of entry.fresh.keys()) {
+            entry.ready.add(listener);
+            listener(next);
+        }
+        entry.fresh.clear();
+    }
+    async function delivered(entry) {
+        const { current, ...next } = await run(entry.plan, async () => entry.cover(await holding()));
+        if (closed || entry.listeners.size === 0)
+            return null;
+        deliver(entry, next);
+        return current;
+    }
+    function schedule(entry) {
+        if (closed || entry.listeners.size === 0)
+            return;
+        if (entry.running) {
+            entry.dirty = true;
+            return;
+        }
+        entry.running = true;
+        void (async () => {
+            try {
+                for (;;) {
+                    entry.dirty = false;
+                    const current = await delivered(entry);
+                    if (current === null)
+                        return;
+                    const held = await holding();
+                    if (entry.fresh.size > 0 || (entry.dirty && !current()))
+                        continue;
+                    if (shown(entry, held) === entry.covered)
+                        break;
+                }
+            }
+            catch (error) {
+                const unanswered = [...entry.fresh.values()];
+                entry.fresh.clear();
+                for (const failed of unanswered)
+                    failed(error);
+            }
+            finally {
+                entry.running = false;
+            }
+        })();
+    }
+    function pendingMoved(entry, held, rooms) {
+        const { pending } = entry;
+        if (pending === null || pending.size === 0 || entry.running || entry.fresh.size > 0) {
+            return false;
+        }
+        const at = entry.pendingAt(held, rooms);
+        const change = at === null ? null : keyedAt(pending, at, samePending);
+        if (change === null || change.removed.length === pending.size)
+            return false;
+        keyedInto(pending, change);
+        entry.covered = '';
+        if (unchanged(change))
+            return true;
+        for (const listener of entry.ready)
+            listener({ pending: change });
+        return true;
+    }
+    function recovered(locators) {
+        if (locators === undefined)
+            recoveringAll = true;
+        else
+            for (const locator of locators)
+                recovering.add(locator);
+        if (recoveringNow)
+            return;
+        recoveringNow = true;
+        void (async () => {
+            try {
+                while ((recoveringAll || recovering.size > 0) && !closed) {
+                    const all = recoveringAll;
+                    const touched = [...recovering];
+                    recoveringAll = false;
+                    recovering.clear();
+                    const reached = [...entries.values()].filter((entry) => all || touched.some(entry.reads));
+                    for (const entry of reached) {
+                        if (entry.running)
+                            entry.dirty = true;
+                    }
+                    const waiting = reached.filter((entry) => !entry.running);
+                    if (waiting.length === 0)
+                        continue;
+                    const held = await holding();
+                    for (const entry of waiting) {
+                        if (entry.running)
+                            continue;
+                        const read = all ? [] : touched.filter(entry.reads);
+                        if (read.length > 0 && pendingMoved(entry, held, read))
+                            continue;
+                        if (entry.digest === undefined || shown(entry, held) !== entry.covered)
+                            schedule(entry);
+                    }
+                }
+            }
+            catch (error) {
+                uncaught(error);
+            }
+            finally {
+                recoveringNow = false;
+            }
+        })();
+    }
+    return {
+        touched(set) {
+            const pending = new Set();
+            for (const entry of entries.values()) {
+                if (!affected(entry, set))
+                    continue;
+                if (entry.pending === null || entry.running) {
+                    schedule(entry);
+                    continue;
+                }
+                for (const locator of set.rooms)
+                    pending.add(locator);
+                for (const { locator } of set.documents)
+                    pending.add(locator);
+            }
+            if (pending.size > 0)
+                recovered([...pending]);
+        },
+        recover: recovered,
+        watch(plan, identity, cover, pendingAt, listener, failed) {
+            let entry = entries.get(identity);
+            if (entry === undefined) {
+                entry = {
+                    plan,
+                    reads: readerOf(plan),
+                    cover,
+                    pendingAt,
+                    listeners: new Set(),
+                    fresh: new Map(),
+                    ready: new Set(),
+                    digest: undefined,
+                    pending: null,
+                    covered: '',
+                    dirty: false,
+                    running: false,
+                };
+                entries.set(identity, entry);
+            }
+            const held = entry;
+            held.listeners.add(listener);
+            held.fresh.set(listener, failed);
+            schedule(held);
+            return () => {
+                held.listeners.delete(listener);
+                held.fresh.delete(listener);
+                held.ready.delete(listener);
+                if (held.listeners.size === 0 && entries.get(identity) === held)
+                    entries.delete(identity);
+            };
+        },
+        close() {
+            closed = true;
+            entries.clear();
+        },
+    };
+}

package/dist/loaded.d.ts

@@ -0,0 +1,5 @@
+import type { BuildFile } from './client.js';
+export declare function parsed(file: Blob | null): Promise<unknown>;
+export declare function perBuild<T>(buildFile: BuildFile, key: string, make: () => Promise<T>): Promise<T>;
+export declare function loaded<T>(buildFile: BuildFile, name: string, read?: (file: Blob | null) => Promise<unknown>): Promise<T | null>;
+//# sourceMappingURL=loaded.d.ts.map

package/dist/loaded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loaded.d.ts","sourceRoot":"","sources":["../src/loaded.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAc7C,wBAAsB,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAEhE;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAYjG;AAED,wBAAgB,MAAM,CAAC,CAAC,EACtB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,EACZ,IAAI,GAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,OAAO,CAAC,OAAO,CAAY,GACvD,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAEnB"}

package/dist/loaded.js

@@ -0,0 +1,40 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+const holdings = new WeakMap();
+async function imported(file) {
+    if (file === null)
+        return null;
+    const address = URL.createObjectURL(file);
+    try {
+        return await import(__rewriteRelativeImportExtension(address));
+    }
+    finally {
+        URL.revokeObjectURL(address);
+    }
+}
+export async function parsed(file) {
+    return file === null ? null : JSON.parse(await file.text());
+}
+export function perBuild(buildFile, key, make) {
+    let named = holdings.get(buildFile);
+    if (named === undefined) {
+        named = new Map();
+        holdings.set(buildFile, named);
+    }
+    const holding = named.get(key);
+    if (holding !== undefined)
+        return holding;
+    const making = make();
+    named.set(key, making);
+    making.catch(() => named.delete(key));
+    return making;
+}
+export function loaded(buildFile, name, read = imported) {
+    return perBuild(buildFile, name, () => buildFile(name).then(read));
+}

package/dist/locks.d.ts

@@ -0,0 +1,7 @@
+import type { Runtime } from './runtime.js';
+export declare function locked({ store, presence }: Runtime, locator: string): Promise<boolean>;
+export declare function lockedRooms({ store, presence }: Runtime): Promise<readonly string[]>;
+export declare function relocked(runtime: Runtime, before: readonly string[]): Promise<void>;
+export declare function connectionLost(runtime: Runtime): void;
+export declare function watchLocks({ store }: Runtime, notify: () => void): () => void;
+//# sourceMappingURL=locks.d.ts.map

package/dist/locks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locks.d.ts","sourceRoot":"","sources":["../src/locks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5C,wBAAsB,MAAM,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAE5F;AAED,wBAAsB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC,SAAS,MAAM,EAAE,CAAC,CAG1F;AAED,wBAAsB,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,MAAM,EAAE,iBAKzE;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,QAU9C;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAE7E"}

package/dist/locks.js

@@ -0,0 +1,32 @@
+import { uncaught } from './failure.js';
+import { emitRooms, LOCKS_TOPIC } from './shown.js';
+export async function locked({ store, presence }, locator) {
+    return presence.locked(locator, async () => (await store.open()).offline(locator));
+}
+export async function lockedRooms({ store, presence }) {
+    const { rooms, locking } = await store.covering();
+    return presence.lockedAmong(rooms, locking);
+}
+export async function relocked(runtime, before) {
+    const after = await lockedRooms(runtime);
+    if (JSON.stringify(after) === JSON.stringify(before))
+        return;
+    emitRooms(runtime);
+    runtime.store.tell(LOCKS_TOPIC, undefined);
+}
+export function connectionLost(runtime) {
+    const { socket, presence } = runtime;
+    if (socket.closed())
+        return;
+    presence.connectionLost(() => {
+        if (socket.isOpen() || socket.closed())
+            return;
+        void lockedRooms(runtime).then((before) => {
+            presence.lapse();
+            return relocked(runtime, before);
+        }, uncaught);
+    });
+}
+export function watchLocks({ store }, notify) {
+    return store.watch(LOCKS_TOPIC, notify).stop;
+}

package/dist/lost.d.ts

@@ -0,0 +1,5 @@
+import type { Runtime } from './runtime.js';
+export declare function eraseFenced({ store }: Runtime, locators: readonly string[]): Promise<void>;
+export declare function fenceLive(runtime: Runtime, locators: readonly string[]): void;
+export declare function loseRooms(runtime: Runtime, locators: readonly string[]): Promise<void>;
+//# sourceMappingURL=lost.d.ts.map

package/dist/lost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lost.d.ts","sourceRoot":"","sources":["../src/lost.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAK5C,wBAAsB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,MAAM,EAAE,iBAIhF;AAED,wBAAgB,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,MAAM,EAAE,QAMtE;AAED,wBAAsB,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,MAAM,EAAE,iBA+B5E"}

package/dist/lost.js

@@ -0,0 +1,49 @@
+import { changeSet, mergeChangeSets } from './change-set.js';
+import { ERASE_BATCH } from './install.js';
+import { unpair } from './queue.js';
+import { recoverReads } from './shown.js';
+import { yielded } from './turn.js';
+export async function eraseFenced({ store }, locators) {
+    for (const locator of locators) {
+        while (await store.durably((local) => local.erase(locator, ERASE_BATCH)))
+            await yielded();
+    }
+}
+export function fenceLive(runtime, locators) {
+    const { store, socket, presence } = runtime;
+    for (const locator of new Set(locators)) {
+        if (!presence.lose(locator, socket.session.now().discoveries))
+            continue;
+        store.forget(locator);
+    }
+}
+export async function loseRooms(runtime, locators) {
+    const { store, presence } = runtime;
+    fenceLive(runtime, locators);
+    const fresh = [...new Set(locators)].filter((locator) => presence.writing(locator));
+    if (fresh.length === 0)
+        return;
+    let held = [];
+    try {
+        await store.durably(async (local) => {
+            held = await local.roomDrafts();
+            await local.fence(fresh);
+        });
+    }
+    catch (error) {
+        for (const locator of fresh)
+            presence.unwritten(locator);
+        throw error;
+    }
+    finally {
+        store.changed(mergeChangeSets(fresh.map((locator) => changeSet(locator, {
+            documents: null,
+            room: true,
+            queue: true,
+            drafts: held.filter((draft) => draft.locator === locator).map(({ path }) => path),
+        }))));
+        recoverReads(runtime, fresh);
+    }
+    await unpair(runtime);
+    await eraseFenced(runtime, fresh);
+}

package/dist/media.d.ts

@@ -0,0 +1,13 @@
+import type { MdRuntimeClient } from './client.js';
+import { type ShownAnswer } from './outcome.js';
+export declare const ROOM_MEDIA = "room-media";
+export declare const DIAGRAM = "md-diagram";
+export declare const VIEWING = "ahc-viewer";
+type Show = (room: string, path: string, revision?: string) => Promise<ShownAnswer>;
+export declare function shownBy(show: Show, client: MdRuntimeClient): MdRuntimeClient;
+export declare function rendered(element: Element): boolean;
+export declare function viewable(element: Element): boolean;
+export declare function viewFile(client: MdRuntimeClient, media: Element): void;
+export declare function defineRoomMedia(client: Promise<MdRuntimeClient> | MdRuntimeClient): void;
+export {};
+//# sourceMappingURL=media.d.ts.map

package/dist/media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../src/media.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnE,eAAO,MAAM,UAAU,eAAe,CAAC;AAMvC,eAAO,MAAM,OAAO,eAAe,CAAC;AAEpC,eAAO,MAAM,OAAO,eAAe,CAAC;AA8BpC,KAAK,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;AAIpF,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAG5E;AAsBD,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAElD;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAMlD;AA4BD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAEtE;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,IAAI,CAkMxF"}

package/dist/media.js

@@ -0,0 +1,269 @@
+import { isAudioType, isImageType, isVideoType } from '@agentshouse/mdmodel';
+import { loaded } from './loaded.js';
+import { blobOf, UNCERTAIN } from './outcome.js';
+export const ROOM_MEDIA = 'room-media';
+const VIEWER = 'viewer';
+const RENDERED = '.ahc, .ahc-markdown';
+export const DIAGRAM = 'md-diagram';
+export const VIEWING = 'ahc-viewer';
+const PRESSED_ELSEWHERE = 'a[href], button, input, select, textarea, summary, label, [role="button"], [role="link"]';
+const ATTRIBUTES = ['room', 'path', 'revision', 'width', 'height', 'alt'];
+const LOADING = new Set(['room', 'path', 'revision']);
+const NEARING = '600px 0px';
+const RELINKS = 2;
+// The Room's stream brings a file seconds after the text that links it, minutes after on a first open, and a page's reach of its Rooms settles seconds after it opens, so a file not shown yet is asked for again every three seconds.
+const UNSHOWN_MS = 3_000;
+const SHAPE = '16 / 9';
+const STYLE = `:host{display:block}
+[part=box]{position:relative;overflow:hidden}
+[part=box]>img,[part=box]>video,[part=box]>audio{display:block;width:100%;height:100%;object-fit:contain}
+[part=box]>video:not([controls]){cursor:pointer}
+[part=box]>slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center}
+[part=play]{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgb(0 0 0/.6);pointer-events:none}
+[part=play]::before{content:"";position:absolute;top:18px;left:22px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}`;
+const shows = new WeakMap();
+export function shownBy(show, client) {
+    shows.set(client, show);
+    return client;
+}
+function ratioOf(width, height) {
+    const across = Number(width);
+    const down = Number(height);
+    return Number.isFinite(across) && Number.isFinite(down) && across > 0 && down > 0
+        ? `${across} / ${down}`
+        : SHAPE;
+}
+function refusedForGood(shown) {
+    if (shown.kind === 'revoked-authorization')
+        return true;
+    return (shown.kind === 'rejected' || shown.kind === 'scoped-refusal') && !shown.retryable;
+}
+function drawnFor(mediaType) {
+    if (isImageType(mediaType))
+        return 'img';
+    if (isVideoType(mediaType))
+        return 'video';
+    if (isAudioType(mediaType))
+        return 'audio';
+    return null;
+}
+export function rendered(element) {
+    return element.closest(RENDERED) !== null;
+}
+export function viewable(element) {
+    if (element.localName === 'figure')
+        return element.classList.contains(DIAGRAM);
+    if (element.localName !== ROOM_MEDIA || element.closest(`.${VIEWING}`) !== null)
+        return false;
+    return (rendered(element) || (element.shadowRoot?.querySelector('[part=box] > video') ?? null) !== null);
+}
+function viewed(client, opener, alone) {
+    void loaded(client.buildFile, VIEWER).then((file) => file?.openViewer({
+        opener,
+        alone,
+        download: (room, path, revision) => void client.binaryFile.download(room, path, revision),
+    }));
+}
+function pressed(client) {
+    return (event) => {
+        if (event.defaultPrevented || event.detail > 1)
+            return;
+        for (const node of event.composedPath()) {
+            if (!(node instanceof Element))
+                continue;
+            if (viewable(node)) {
+                event.preventDefault();
+                void client.then((one) => viewed(one, node, !rendered(node)));
+                return;
+            }
+            if (node.matches(PRESSED_ELSEWHERE))
+                return;
+        }
+    };
+}
+export function viewFile(client, media) {
+    viewed(client, media, true);
+}
+export function defineRoomMedia(client) {
+    if (customElements.get(ROOM_MEDIA) !== undefined)
+        return;
+    const connected = Promise.resolve(client);
+    document.addEventListener('click', pressed(connected));
+    class RoomMedia extends HTMLElement {
+        static observedAttributes = ATTRIBUTES;
+        #root = this.attachShadow({ mode: 'open' });
+        #box = document.createElement('div');
+        #fallback = document.createElement('slot');
+        #play = document.createElement('span');
+        #watching = null;
+        #near = false;
+        #asked = 0;
+        #shown = null;
+        #drawn = null;
+        #loaded = false;
+        #relinked = 0;
+        constructor() {
+            super();
+            this.#box.setAttribute('part', 'box');
+            this.#play.setAttribute('part', 'play');
+            this.#root.append(Object.assign(document.createElement('style'), { textContent: STYLE }), this.#box);
+            this.#shape();
+        }
+        connectedCallback() {
+            this.#label();
+            this.#watching ??= new IntersectionObserver((seen) => {
+                if (!seen.some((entry) => entry.isIntersecting) || this.#near)
+                    return;
+                this.#near = true;
+                void this.#load();
+            }, { rootMargin: NEARING });
+            this.#watching.observe(this);
+        }
+        disconnectedCallback() {
+            this.#watching?.disconnect();
+            this.#watching = null;
+            this.#near = false;
+            this.#asked += 1;
+            this.#show(null);
+        }
+        attributeChangedCallback(name, before, after) {
+            if (before === after)
+                return;
+            this.#shape();
+            if (this.isConnected)
+                this.#label();
+            if (!LOADING.has(name) || !this.#near)
+                return;
+            this.#relinked = 0;
+            void this.#load();
+        }
+        #shape() {
+            this.#box.style.aspectRatio = ratioOf(this.getAttribute('width'), this.getAttribute('height'));
+        }
+        #label() {
+            const alt = this.getAttribute('alt') ?? '';
+            const drawn = this.#drawn;
+            if (drawn instanceof HTMLMediaElement) {
+                this.removeAttribute('role');
+                this.removeAttribute('aria-label');
+                drawn.setAttribute('aria-label', alt);
+                return;
+            }
+            this.setAttribute('role', 'img');
+            this.setAttribute('aria-label', alt);
+            if (drawn !== null)
+                drawn.alt = '';
+        }
+        async #load() {
+            const asked = (this.#asked += 1);
+            this.#loaded = false;
+            const room = this.getAttribute('room');
+            const path = this.getAttribute('path');
+            const revision = this.getAttribute('revision') ?? undefined;
+            if (room === null || path === null) {
+                this.#unreadable();
+                return;
+            }
+            const show = shows.get(await connected);
+            const shown = show === undefined ? null : await show(room, path, revision).catch(() => UNCERTAIN);
+            if (asked !== this.#asked)
+                return;
+            if (shown?.kind === 'link') {
+                this.#draw({ url: shown.url, copy: false }, shown.mediaType);
+                return;
+            }
+            if (shown?.kind !== 'binary') {
+                if (shown === null || refusedForGood(shown))
+                    this.#unreadable();
+                else
+                    this.#unshown(asked);
+                return;
+            }
+            const copy = await blobOf(shown).catch(() => null);
+            if (asked !== this.#asked)
+                return;
+            if (copy === null)
+                this.#unshown(asked);
+            else
+                this.#draw({ url: URL.createObjectURL(copy), copy: true }, shown.mediaType);
+        }
+        #unshown(asked) {
+            this.#unreadable();
+            setTimeout(() => {
+                if (asked === this.#asked && this.#near)
+                    void this.#load();
+            }, UNSHOWN_MS);
+        }
+        #show(shown, content = null) {
+            if (this.#shown?.copy === true)
+                URL.revokeObjectURL(this.#shown.url);
+            this.#shown = shown;
+            if (content !== this.#drawn)
+                this.#drawn = null;
+            if (content === null)
+                this.#box.replaceChildren();
+            else if (content.parentNode !== this.#box)
+                this.#box.replaceChildren(...(content instanceof HTMLVideoElement && !content.controls
+                    ? [content, this.#play]
+                    : [content]));
+            this.#label();
+        }
+        #unreadable() {
+            this.#show(null, this.#fallback);
+        }
+        #draw(shown, mediaType) {
+            const tag = drawnFor(mediaType);
+            if (tag === null) {
+                if (shown.copy)
+                    URL.revokeObjectURL(shown.url);
+                this.#unreadable();
+                return;
+            }
+            const kept = this.#drawn?.localName === tag ? this.#drawn : null;
+            const drawn = kept ?? document.createElement(tag);
+            if (kept === null) {
+                const plays = !(drawn instanceof HTMLVideoElement) || this.closest(`.${VIEWING}`) !== null;
+                if (drawn instanceof HTMLImageElement)
+                    drawn.decoding = 'async';
+                if (drawn instanceof HTMLMediaElement) {
+                    drawn.preload = 'metadata';
+                    drawn.controls = plays;
+                }
+                if (drawn instanceof HTMLVideoElement && plays) {
+                    drawn.autoplay = true;
+                    drawn.setAttribute('playsinline', '');
+                }
+                drawn.addEventListener(drawn instanceof HTMLImageElement ? 'load' : 'loadedmetadata', () => {
+                    if (drawn !== this.#drawn)
+                        return;
+                    this.#loaded = true;
+                    this.#relinked = 0;
+                });
+                drawn.addEventListener('error', () => this.#failed(drawn));
+            }
+            this.#drawn = drawn;
+            this.#show(shown, drawn);
+            drawn.src = shown.url;
+        }
+        #failed(drawn) {
+            if (drawn !== this.#drawn)
+                return;
+            if (this.#shown?.copy !== false || !this.#loaded || this.#relinked >= RELINKS) {
+                this.#unreadable();
+                return;
+            }
+            this.#relinked += 1;
+            if (drawn instanceof HTMLMediaElement) {
+                const at = drawn.currentTime;
+                const playing = !drawn.paused;
+                drawn.addEventListener('loadedmetadata', () => {
+                    drawn.currentTime = at;
+                    if (playing)
+                        void drawn.play().catch(() => undefined);
+                }, { once: true });
+            }
+            void this.#load();
+        }
+    }
+    customElements.define(ROOM_MEDIA, RoomMedia);
+}