@agentshouse/mdruntime 0.1.0-c5fe3b2cddda7 → 0.1.0-c6197367d5fad

package/dist/live.js

@@ -1,50 +1,59 @@
-import { changeOf, digestOf, } from './observation.js';
-import { roomOfKey } from './rows.js';
+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));
 }
-function reads(plan, locator) {
-    if (plan.locked.includes(locator))
-        return false;
-    if (plan.rooms !== null && !plan.rooms.includes(locator))
-        return false;
-    if (plan.reach === null)
-        return true;
-    return (plan.reach.rooms.includes(locator) ||
-        plan.reach.documents.some((document) => roomOfKey(document) === locator) ||
-        plan.reach.areas.some((area) => area.room === locator && area.types.length > 0));
+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, set) {
-    if (set.rooms.some((locator) => reads(plan, 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(plan, locator) && (paths === null || path === null || paths.has(path)));
+    return set.documents.some(({ locator, path }) => reads(locator) && (paths === null || path === null || paths.has(path)));
 }
-function shown(entry) {
-    const cover = entry.cover();
+function shown(entry, held) {
+    const cover = entry.cover(held);
     return JSON.stringify('pending' in cover ? cover : cover.coverage);
 }
-export function createLiveQueries(run) {
+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) {
+        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;
@@ -57,47 +66,120 @@ export function createLiveQueries(run) {
             try {
                 for (;;) {
                     entry.dirty = false;
-                    const { current, ...next } = await run(entry.plan, entry.cover);
-                    if (closed || entry.listeners.size === 0)
+                    const current = await delivered(entry);
+                    if (current === null)
                         return;
-                    deliver(entry, next);
-                    if (!(entry.dirty && !current()) && shown(entry) === entry.covered)
+                    const held = await holding();
+                    if (entry.fresh.size > 0 || (entry.dirty && !current()))
+                        continue;
+                    if (shown(entry, held) === entry.covered)
                         break;
                 }
             }
-            catch {
-                entry.dirty = false;
+            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.plan, set))
-                    schedule(entry);
-            }
-        },
-        recover() {
-            for (const entry of entries.values()) {
-                if (entry.running)
+                if (!affected(entry, set))
                     continue;
-                if (entry.digest === undefined || shown(entry) !== entry.covered)
+                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]);
         },
-        watch(plan, identity, cover, listener) {
+        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 Set(),
+                    fresh: new Map(),
                     ready: new Set(),
                     digest: undefined,
+                    pending: null,
                     covered: '',
                     dirty: false,
                     running: false,
@@ -106,7 +188,7 @@ export function createLiveQueries(run) {
             }
             const held = entry;
             held.listeners.add(listener);
-            held.fresh.add(listener);
+            held.fresh.set(listener, failed);
             schedule(held);
             return () => {
                 held.listeners.delete(listener);

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

@@ -1,8 +1,25 @@
 import type { MdRuntimeClient } from './client.js';
-import { type ShownAnswer } from './outcome.js';
+import { type DownloadAnswer, type ShownAnswer } from './outcome.js';
 export declare const ROOM_MEDIA = "room-media";
+export declare const KEYED_MEDIA = "ahc-attachment";
+export declare const MEDIA = "room-media, ahc-attachment";
+export declare const DIAGRAM = "md-diagram";
+export declare const VIEWING = "ahc-viewer";
 type Show = (room: string, path: string, revision?: string) => Promise<ShownAnswer>;
+export type MediaAt = {
+    readonly link: string;
+} | {
+    readonly room: string;
+    readonly path: string;
+    readonly revision: string | undefined;
+};
 export declare function shownBy(show: Show, client: MdRuntimeClient): MdRuntimeClient;
-export declare function defineRoomMedia(client: Promise<MdRuntimeClient> | MdRuntimeClient, registry?: CustomElementRegistry): void;
+export declare function mediaAt(media: Element): MediaAt | null;
+export declare function mediaTag(at: MediaAt): string;
+export declare function downloadAt(client: MdRuntimeClient, at: MediaAt): Promise<DownloadAnswer>;
+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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../src/media.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3D,eAAO,MAAM,UAAU,eAAe,CAAC;AAwBvC,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,eAAe,CAC7B,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,eAAe,EAClD,QAAQ,GAAE,qBAAsC,GAC/C,IAAI,CA0LN"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../src/media.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAExF,eAAO,MAAM,UAAU,eAAe,CAAC;AAEvC,eAAO,MAAM,WAAW,mBAAmB,CAAC;AAE5C,eAAO,MAAM,KAAK,+BAAkC,CAAC;AAMrD,eAAO,MAAM,OAAO,eAAe,CAAC;AAEpC,eAAO,MAAM,OAAO,eAAe,CAAC;AAgCpC,KAAK,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;AAEpF,MAAM,MAAM,OAAO,GACf;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACzB;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAI5F,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAG5E;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAUtD;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,CAE5C;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,eAAe,EAAE,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC,cAAc,CAAC,CAIxF;AA6BD,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,CAgMxF"}

package/dist/media.js

@@ -1,7 +1,18 @@
-import { UNCERTAIN } from './outcome.js';
+import { isAudioType, isImageType, isVideoType } from '@agentshouse/mdmodel';
+import { loaded } from './loaded.js';
+import { downloadAttachment } from './download.js';
+import { blobOf, UNCERTAIN } from './outcome.js';
 export const ROOM_MEDIA = 'room-media';
+export const KEYED_MEDIA = 'ahc-attachment';
+export const MEDIA = `${ROOM_MEDIA}, ${KEYED_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 KEYED_ATTRIBUTES = ['link', 'alt'];
+const LOADING = new Set(['link', '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.
@@ -10,12 +21,42 @@ 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]>slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center}`;
+[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;
 }
+export function mediaAt(media) {
+    if (media.localName === KEYED_MEDIA) {
+        const link = media.getAttribute('link');
+        return link === null ? null : { link };
+    }
+    const room = media.getAttribute('room');
+    const path = media.getAttribute('path');
+    return room === null || path === null
+        ? null
+        : { room, path, revision: media.getAttribute('revision') ?? undefined };
+}
+export function mediaTag(at) {
+    return 'link' in at ? KEYED_MEDIA : ROOM_MEDIA;
+}
+export function downloadAt(client, at) {
+    return 'link' in at
+        ? downloadAttachment(client, at.link)
+        : client.binaryFile.download(at.room, at.path, at.revision);
+}
+function shownAt(client, at) {
+    if (at === null)
+        return null;
+    if ('link' in at)
+        return client.conversation.attachment(at.link);
+    const show = shows.get(client);
+    return show === undefined ? null : show(at.room, at.path, at.revision);
+}
 function ratioOf(width, height) {
     const across = Number(width);
     const down = Number(height);
@@ -29,23 +70,62 @@ function refusedForGood(shown) {
     return (shown.kind === 'rejected' || shown.kind === 'scoped-refusal') && !shown.retryable;
 }
 function drawnFor(mediaType) {
-    if (mediaType.startsWith('image/'))
+    if (isImageType(mediaType))
         return 'img';
-    if (mediaType.startsWith('video/'))
+    if (isVideoType(mediaType))
         return 'video';
-    if (mediaType.startsWith('audio/'))
+    if (isAudioType(mediaType))
         return 'audio';
     return null;
 }
-export function defineRoomMedia(client, registry = customElements) {
-    if (registry.get(ROOM_MEDIA) !== undefined)
+export function rendered(element) {
+    return element.closest(RENDERED) !== null;
+}
+export function viewable(element) {
+    if (element.localName === 'figure')
+        return element.classList.contains(DIAGRAM);
+    if (!element.matches(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: (at) => void downloadAt(client, at),
+    }));
+}
+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;
@@ -56,6 +136,7 @@ export function defineRoomMedia(client, registry = customElements) {
         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();
         }
@@ -107,15 +188,8 @@ export function defineRoomMedia(client, registry = customElements) {
         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);
+            const showing = shownAt(await connected, mediaAt(this));
+            const shown = showing === null ? null : await showing.catch(() => UNCERTAIN);
             if (asked !== this.#asked)
                 return;
             if (shown?.kind === 'link') {
@@ -129,11 +203,7 @@ export function defineRoomMedia(client, registry = customElements) {
                     this.#unshown(asked);
                 return;
             }
-            const copy = await new Response(shown.stream, {
-                headers: { 'content-type': shown.mediaType },
-            })
-                .blob()
-                .catch(() => null);
+            const copy = await blobOf(shown).catch(() => null);
             if (asked !== this.#asked)
                 return;
             if (copy === null)
@@ -157,7 +227,9 @@ export function defineRoomMedia(client, registry = customElements) {
             if (content === null)
                 this.#box.replaceChildren();
             else if (content.parentNode !== this.#box)
-                this.#box.replaceChildren(content);
+                this.#box.replaceChildren(...(content instanceof HTMLVideoElement && !content.controls
+                    ? [content, this.#play]
+                    : [content]));
             this.#label();
         }
         #unreadable() {
@@ -174,13 +246,16 @@ export function defineRoomMedia(client, registry = customElements) {
             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.controls = true;
                     drawn.preload = 'metadata';
-                    if (drawn instanceof HTMLVideoElement)
-                        drawn.playsInline = true;
+                    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)
@@ -214,5 +289,8 @@ export function defineRoomMedia(client, registry = customElements) {
             void this.#load();
         }
     }
-    registry.define(ROOM_MEDIA, RoomMedia);
+    customElements.define(ROOM_MEDIA, RoomMedia);
+    customElements.define(KEYED_MEDIA, class extends RoomMedia {
+        static observedAttributes = KEYED_ATTRIBUTES;
+    });
 }