fauna-api 0.0.0-stage → 1.0.679

package/dist/src/ui/view.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { Fauna } from "../../index.js";
+import type { Presence } from "../shared/server.js";
+type Target = Fauna.View.Target;
+export type ViewOptions = {
+    /** Join the file's live room (default). With false the file shows alone, read only. */
+    live?: boolean;
+    /** Show the bar with the name, size, people and download (default true). */
+    header?: boolean;
+    /** Who else has the file open changed, for a tab that shows them. */
+    onPeople?(people: Presence[]): void;
+    /** The room's edits were written back to the file, for anything showing it elsewhere (a preview). */
+    onSaved?(): void;
+};
+/** Mount a file's view in `container`: its live room and the right editor or player. */
+export declare function createView(container: HTMLElement, target: Target, options?: ViewOptions): {
+    destroy(): void;
+};
+/** A file's view: its live room (unless `live` is false) and the editor or player for its kind. */
+export declare function View({ target, live, header, onPeople, onSaved }: {
+    target: Target;
+} & ViewOptions): React.JSX.Element;
+export {};

package/dist/src/ui/view.js

@@ -0,0 +1,584 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import * as Y from "yjs";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState } from "@codemirror/state";
+import { yCollab } from "y-codemirror.next";
+import { javascript } from "@codemirror/lang-javascript";
+import { python } from "@codemirror/lang-python";
+import { json } from "@codemirror/lang-json";
+import { markdown } from "@codemirror/lang-markdown";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { Fauna } from "../../index.js";
+import { colorFromSeed, hashSeed } from "./cursor.js";
+/** Mount a file's view in `container`: its live room and the right editor or player. */
+export function createView(container, target, options = {}) {
+    const root = createRoot(container);
+    root.render(_jsx(View, { target: target, ...options }));
+    return { destroy: () => root.unmount() };
+}
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function fileOf(target) {
+    return 'ref' in target && 'chat' in target ? target.file : target;
+}
+function nameOf(presence) {
+    return presence.profile?.displayName || presence.profile?.email?.split("@")[0] || "Guest";
+}
+function avatarOf(presence) {
+    if (presence.profile?.icon)
+        return presence.profile.icon;
+    return `https://ui-avatars.com/api/?name=${encodeURIComponent(nameOf(presence))}&background=161617&color=E8E2DC&size=64`;
+}
+function colorOf(seed) {
+    return colorFromSeed(seed || "?");
+}
+function faded(color, alpha) {
+    return color.replace(/\)$/, ` / ${alpha})`);
+}
+function sizeLabel(bytes) {
+    if (bytes < 1024)
+        return `${bytes} bytes`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function kindLabel(kind, contentType) {
+    if (kind === "text")
+        return "Text";
+    if (kind === "table")
+        return "Table";
+    if (kind === "image")
+        return "Image";
+    if (contentType.startsWith("video/"))
+        return "Video";
+    if (contentType.startsWith("audio/"))
+        return "Audio";
+    if (contentType === "application/pdf")
+        return "PDF";
+    return "File";
+}
+function statusOf(presence) {
+    try {
+        return presence.status ? JSON.parse(presence.status) : {};
+    }
+    catch {
+        return {};
+    }
+}
+function throttle(fn, ms) {
+    let last = 0;
+    let pending = null;
+    let next = null;
+    return (...args) => {
+        next = args;
+        const wait = last + ms - Date.now();
+        if (wait <= 0) {
+            last = Date.now();
+            fn(...args);
+            next = null;
+        }
+        else if (!pending) {
+            pending = setTimeout(() => {
+                pending = null;
+                last = Date.now();
+                if (next)
+                    fn(...next);
+                next = null;
+            }, wait);
+        }
+    };
+}
+function languageFor(name) {
+    const ext = name.includes(".") ? name.split(".").pop().toLowerCase() : "";
+    if (["js", "mjs", "cjs", "jsx"].includes(ext))
+        return javascript({ jsx: true });
+    if (["ts", "tsx"].includes(ext))
+        return javascript({ jsx: ext === "tsx", typescript: true });
+    if (ext === "py")
+        return python();
+    if (["json", "jsonl"].includes(ext))
+        return json();
+    if (["md", "markdown"].includes(ext))
+        return markdown();
+    if (["html", "htm", "vue", "svelte"].includes(ext))
+        return html();
+    if (ext === "css")
+        return css();
+    return [];
+}
+function useObjectURL(file, enabled, version) {
+    const [state, setState] = useState({ url: null, failed: false });
+    useEffect(() => {
+        if (!enabled)
+            return;
+        let url = null;
+        let cancelled = false;
+        setState({ url: null, failed: false });
+        file.download(version > 0).then((bytes) => {
+            if (cancelled)
+                return;
+            url = URL.createObjectURL(new Blob([new Uint8Array(bytes)], { type: file.contentType || "application/octet-stream" }));
+            setState({ url, failed: false });
+        }, () => { if (!cancelled)
+            setState({ url: null, failed: true }); });
+        return () => {
+            cancelled = true;
+            if (url)
+                URL.revokeObjectURL(url);
+        };
+    }, [file, enabled, version]);
+    return state;
+}
+/** An awareness for y-codemirror built from room seats: honest, one cursor per seat. */
+class SeatAwareness {
+    constructor(doc, onLocal) {
+        Object.defineProperty(this, "onLocal", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: onLocal
+        });
+        Object.defineProperty(this, "doc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "local", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "states", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+        this.doc = doc;
+    }
+    getLocalState() { return this.local; }
+    setLocalStateField(field, value) {
+        this.local = { ...this.local, [field]: value };
+        this.onLocal(this.local);
+    }
+    getStates() {
+        const states = new Map(this.states);
+        states.set(this.doc.clientID, this.local);
+        return states;
+    }
+    on(_event, listener) { this.listeners.add(listener); }
+    off(_event, listener) { this.listeners.delete(listener); }
+    setRemote(states) {
+        const added = [];
+        const updated = [];
+        const removed = [];
+        for (const [id, state] of states) {
+            if (!this.states.has(id))
+                added.push(id);
+            else if (JSON.stringify(this.states.get(id)) !== JSON.stringify(state))
+                updated.push(id);
+        }
+        for (const id of this.states.keys())
+            if (!states.has(id))
+                removed.push(id);
+        this.states = states;
+        if (added.length || updated.length || removed.length) {
+            for (const listener of this.listeners)
+                listener({ added, updated, removed }, "remote");
+        }
+    }
+}
+// ─── The view ────────────────────────────────────────────────────────────────
+/** A file's view: its live room (unless `live` is false) and the editor or player for its kind. */
+export function View({ target, live = true, header = true, onPeople, onSaved }) {
+    const file = fileOf(target);
+    const [room, setRoom] = useState(null);
+    const [self, setSelf] = useState(null);
+    const [people, setPeople] = useState([]);
+    const [version, setVersion] = useState(0);
+    const [error, setError] = useState(null);
+    const [local, setLocal] = useState(null);
+    const onPeopleRef = useRef(onPeople);
+    onPeopleRef.current = onPeople;
+    const onSavedRef = useRef(onSaved);
+    onSavedRef.current = onSaved;
+    // Join the room, and join again whenever it closes or the connection drops.
+    useEffect(() => {
+        if (!live)
+            return;
+        let active = true;
+        let current = null;
+        let retry = null;
+        // A chat attachment opens as a chat member; someone who isn't one (a share link guest) looks through its code.
+        let attempt = target;
+        const join = async () => {
+            try {
+                const joined = await Fauna.View.connect(attempt, {
+                    onPeople: (r) => {
+                        if (!active)
+                            return;
+                        const others = r.people(joined.self);
+                        setPeople([...others]);
+                        onPeopleRef.current?.(others);
+                    },
+                    onReload: () => { if (active)
+                        setVersion((v) => v + 1); },
+                    onSaved: () => { if (active)
+                        onSavedRef.current?.(); },
+                    onClosed: () => {
+                        if (!active)
+                            return;
+                        retry = setTimeout(() => void join(), 1500);
+                    },
+                });
+                if (!active) {
+                    joined.room.disconnect();
+                    return;
+                }
+                current = joined.room;
+                setError(null);
+                setRoom(joined.room);
+                setSelf(joined.self);
+                const others = joined.room.people(joined.self);
+                setPeople([...others]);
+                onPeopleRef.current?.(others);
+                setVersion((v) => v + 1);
+            }
+            catch (err) {
+                if (!active)
+                    return;
+                const code = fileOf(target).authorization.accessCode;
+                if (attempt === target && 'ref' in target && code) {
+                    attempt = fileOf(target);
+                    void join();
+                    return;
+                }
+                setError(err?.message ?? "Couldn't open this file.");
+                retry = setTimeout(() => void join(), 4000);
+            }
+        };
+        void join();
+        return () => {
+            active = false;
+            if (retry)
+                clearTimeout(retry);
+            current?.disconnect();
+        };
+    }, [target, live]);
+    // Without a room: the file alone, read only.
+    useEffect(() => {
+        if (live)
+            return;
+        const kind = Fauna.View.kindOf(file.contentType, file.name, file.contentLength);
+        if (kind !== "text" && kind !== "table") {
+            setLocal({ kind, doc: new Y.Doc() });
+            return;
+        }
+        let cancelled = false;
+        file.download().then((bytes) => {
+            if (!cancelled)
+                setLocal({ kind, doc: Fauna.View.docFrom(kind, new Uint8Array(bytes)) });
+        }, () => { if (!cancelled)
+            setError("Couldn't open this file."); });
+        return () => { cancelled = true; };
+    }, [file, live]);
+    const kind = live ? (room ? room.kind : null) : local?.kind ?? null;
+    const doc = live ? room?.doc ?? null : local?.doc ?? null;
+    const readOnly = !live || room?.role !== "write";
+    const contentType = live && room ? room.file.contentType || file.contentType : file.contentType;
+    const name = live && room ? room.file.name || file.name : file.name;
+    const size = live && room ? room.file.contentLength : file.contentLength;
+    const mediaKind = kind === "image" || kind === "view";
+    const media = useObjectURL(file, Boolean(kind) && mediaKind, version);
+    const download = useCallback(async () => {
+        const bytes = await file.download(true);
+        const url = URL.createObjectURL(new Blob([new Uint8Array(bytes)], { type: file.contentType || "application/octet-stream" }));
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = name;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }, [file, name]);
+    let body;
+    if (!kind || !doc) {
+        body = _jsx("div", { className: "view-state", children: error ?? "Opening\u2026" });
+    }
+    else if (kind === "text") {
+        body = _jsx(TextEditor, { doc: doc, name: name, readOnly: readOnly, self: self, people: people }, version);
+    }
+    else if (kind === "table") {
+        body = _jsx(TableEditor, { doc: doc, readOnly: readOnly, self: self, people: people }, version);
+    }
+    else if (kind === "image") {
+        body = media.url
+            ? _jsx(ImageMarks, { doc: doc, url: media.url, readOnly: readOnly, owner: room?.owner === true, self: self, people: people }, version)
+            : _jsx("div", { className: "view-state", children: media.failed ? "Couldn't load this image." : "Opening\u2026" });
+    }
+    else {
+        body = _jsx(Player, { url: media.url, failed: media.failed, contentType: contentType, name: name, size: size, onDownload: download });
+    }
+    return (_jsxs("div", { className: "view-root", children: [header && (_jsxs("div", { className: "view-bar", children: [_jsx("div", { className: "view-bar-name", title: name, children: name }), _jsxs("div", { className: "view-bar-meta", children: [kind ? `${kindLabel(kind, contentType)}, ${sizeLabel(size)}` : sizeLabel(size), live && readOnly && room ? ", view only" : ""] }), _jsx(People, { self: self, people: people }), _jsx("button", { className: "view-bar-button material-symbols-outlined", title: "Download", "aria-label": "Download", onClick: () => void download(), children: "download" })] })), _jsx("div", { className: "view-body", children: body })] }));
+}
+function People({ self, people }) {
+    const seats = self ? [self, ...people] : people;
+    if (seats.length === 0)
+        return null;
+    return (_jsxs("div", { className: "view-people", children: [seats.slice(0, 6).map((p) => (_jsx("img", { className: "view-person", src: avatarOf(p), alt: nameOf(p), title: p === self ? `${nameOf(p)} (you)` : nameOf(p), style: { borderColor: colorOf(p.profile?.email ?? p.id) } }, p.id))), seats.length > 6 && _jsxs("span", { className: "view-people-more", children: ["+", seats.length - 6] })] }));
+}
+// ─── Text and code ───────────────────────────────────────────────────────────
+function TextEditor({ doc, name, readOnly, self, people }) {
+    const host = useRef(null);
+    const awarenessRef = useRef(null);
+    useEffect(() => {
+        const ytext = doc.getText("text");
+        const publish = throttle((state) => {
+            self?.setStatus(JSON.stringify({ sel: state.cursor ?? null }));
+        }, 120);
+        const awareness = new SeatAwareness(doc, publish);
+        awarenessRef.current = awareness;
+        const undoManager = new Y.UndoManager(ytext);
+        const view = new EditorView({
+            parent: host.current,
+            state: EditorState.create({
+                doc: ytext.toString(),
+                extensions: [
+                    basicSetup,
+                    languageFor(name),
+                    yCollab(ytext, awareness, { undoManager }),
+                    EditorState.readOnly.of(readOnly),
+                    EditorView.editable.of(!readOnly),
+                    EditorView.theme({
+                        "&": { height: "100%", color: "var(--v-text)", backgroundColor: "var(--v-bg)" },
+                        ".cm-scroller": { fontFamily: "var(--view-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)" },
+                        ".cm-gutters": { backgroundColor: "var(--v-surface)", color: "var(--v-muted)", borderRight: "1px solid var(--v-border)" },
+                        ".cm-activeLineGutter": { backgroundColor: "color-mix(in srgb, var(--v-accent) 18%, transparent)" },
+                        ".cm-activeLine": { backgroundColor: "color-mix(in srgb, var(--v-accent) 8%, transparent)" },
+                        ".cm-cursor": { borderLeftColor: "var(--v-text)" },
+                    }),
+                ],
+            }),
+        });
+        return () => {
+            view.destroy();
+            undoManager.destroy();
+            awarenessRef.current = null;
+        };
+    }, [doc, name, readOnly, self]);
+    useEffect(() => {
+        const states = new Map();
+        for (const p of people) {
+            const sel = statusOf(p).sel;
+            const color = colorOf(p.profile?.email ?? p.id);
+            states.set(hashSeed(p.id) || 1, { user: { name: nameOf(p), color, colorLight: faded(color, 0.22) }, cursor: sel ?? null });
+        }
+        awarenessRef.current?.setRemote(states);
+    }, [people, doc]);
+    return _jsx("div", { className: "view-text", ref: host });
+}
+// ─── Tables ──────────────────────────────────────────────────────────────────
+const ROW_PAGE = 500;
+function columnName(index) {
+    let name = "";
+    let n = index + 1;
+    while (n > 0) {
+        const r = (n - 1) % 26;
+        name = String.fromCharCode(65 + r) + name;
+        n = Math.floor((n - 1) / 26);
+    }
+    return name;
+}
+function useDocTick(doc) {
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        const bump = () => setTick((t) => t + 1);
+        doc.on("update", bump);
+        return () => doc.off("update", bump);
+    }, [doc]);
+    return tick;
+}
+function TableEditor({ doc, readOnly, self, people }) {
+    useDocTick(doc);
+    const [selected, setSelected] = useState(null);
+    const [shown, setShown] = useState(ROW_PAGE);
+    const columns = doc.getArray("columns").toArray();
+    const rows = doc.getArray("rows").toArray();
+    const cells = doc.getMap("cells");
+    const select = (cell) => {
+        setSelected(cell);
+        self?.setStatus(JSON.stringify({ cell }));
+    };
+    const others = new Map();
+    for (const p of people) {
+        const cell = statusOf(p).cell;
+        if (Array.isArray(cell) && cell.length === 2)
+            others.set(`${cell[0]}|${cell[1]}`, colorOf(p.profile?.email ?? p.id));
+    }
+    const setCell = (row, column, value) => {
+        let map = cells.get(row);
+        doc.transact(() => {
+            if (!map) {
+                map = new Y.Map();
+                cells.set(row, map);
+            }
+            if (value)
+                map.set(column, value);
+            else
+                map.delete(column);
+        });
+    };
+    return (_jsxs("div", { className: "view-table", children: [!readOnly && (_jsxs("div", { className: "view-tools", children: [_jsx("button", { onClick: () => { const row = Fauna.View.addRow(doc, selected?.[0]); select([row, selected?.[1] ?? columns[0]]); }, children: "Add row" }), _jsx("button", { onClick: () => { const column = Fauna.View.addColumn(doc, selected?.[1]); select([selected?.[0] ?? rows[0], column]); }, children: "Add column" }), _jsx("button", { disabled: !selected, onClick: () => { if (selected) {
+                            Fauna.View.removeRow(doc, selected[0]);
+                            select(null);
+                        } }, children: "Remove row" }), _jsx("button", { disabled: !selected || columns.length < 2, onClick: () => { if (selected) {
+                            Fauna.View.removeColumn(doc, selected[1]);
+                            select(null);
+                        } }, children: "Remove column" })] })), _jsxs("div", { className: "view-table-scroll", children: [_jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), columns.map((column, c) => _jsx("th", { children: columnName(c) }, column))] }) }), _jsx("tbody", { children: rows.slice(0, shown).map((row, r) => (_jsxs("tr", { children: [_jsx("th", { children: r + 1 }), columns.map((column) => {
+                                            const mine = selected?.[0] === row && selected?.[1] === column;
+                                            const theirs = others.get(`${row}|${column}`);
+                                            return (_jsx("td", { className: mine ? "view-cell-mine" : undefined, style: theirs ? { outline: `2px solid ${theirs}`, outlineOffset: "-2px" } : undefined, children: _jsx("input", { value: cells.get(row)?.get(column) ?? "", readOnly: readOnly, onFocus: () => select([row, column]), onChange: (e) => setCell(row, column, e.target.value) }) }, column));
+                                        })] }, row))) })] }), rows.length > shown && (_jsxs("button", { className: "view-more", onClick: () => setShown((n) => n + ROW_PAGE), children: ["Showing ", shown, " of ", rows.length, " rows. Show more"] }))] })] }));
+}
+const TOOLS = [
+    { tool: "move", icon: "arrow_selector_tool", label: "Select" },
+    { tool: "pen", icon: "draw", label: "Pen" },
+    { tool: "box", icon: "crop_square", label: "Box" },
+    { tool: "arrow", icon: "north_east", label: "Arrow" },
+    { tool: "note", icon: "sticky_note_2", label: "Note" },
+    { tool: "pin", icon: "location_on", label: "Pin" },
+];
+function markId() {
+    return Math.random().toString(36).slice(2, 10);
+}
+function ImageMarks({ doc, url, readOnly, owner, self, people }) {
+    useDocTick(doc);
+    const marks = doc.getArray("marks");
+    const [tool, setTool] = useState("move");
+    const [zoom, setZoom] = useState(null);
+    const [drawing, setDrawing] = useState(null);
+    const [picked, setPicked] = useState(null);
+    const [editing, setEditing] = useState(null);
+    const [natural, setNatural] = useState(null);
+    const box = useRef(null);
+    const me = self?.profile?.email ?? "";
+    const myColor = colorOf(me || self?.id || "");
+    const point = (e) => {
+        const rect = box.current.getBoundingClientRect();
+        return [Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)), Math.min(1, Math.max(0, (e.clientY - rect.top) / rect.height))];
+    };
+    const share = useMemo(() => throttle((x, y) => self?.move([x, y, 0]), 60), [self]);
+    const indexOf = (id) => marks.toArray().findIndex((m) => m.id === id);
+    const replace = (mark) => {
+        const index = indexOf(mark.id);
+        doc.transact(() => {
+            if (index >= 0)
+                marks.delete(index, 1);
+            marks.insert(index >= 0 ? index : marks.length, [mark]);
+        });
+    };
+    const removable = (mark) => !readOnly && (mark.author === me || owner);
+    const down = (e) => {
+        if (readOnly || tool === "move") {
+            if (tool === "move")
+                setPicked(null);
+            return;
+        }
+        const p = point(e);
+        const mark = { id: markId(), kind: tool, points: [p, p], author: me, color: myColor, at: Date.now() };
+        if (tool === "note" || tool === "pin") {
+            marks.push([{ ...mark, points: [p], text: "" }]);
+            setEditing(mark.id);
+            setTool("move");
+            return;
+        }
+        ;
+        e.target.setPointerCapture?.(e.pointerId);
+        setDrawing(mark);
+    };
+    const moveOver = (e) => {
+        const p = point(e);
+        share(p[0], p[1]);
+        if (!drawing)
+            return;
+        setDrawing(drawing.kind === "pen" ? { ...drawing, points: [...drawing.points, p] } : { ...drawing, points: [drawing.points[0], p] });
+    };
+    const up = () => {
+        if (!drawing)
+            return;
+        const [a, b] = [drawing.points[0], drawing.points[drawing.points.length - 1]];
+        if (drawing.kind === "pen" ? drawing.points.length > 2 : Math.hypot(a[0] - b[0], a[1] - b[1]) > 0.005)
+            marks.push([drawing]);
+        setDrawing(null);
+    };
+    useEffect(() => {
+        const onKey = (e) => {
+            if (!picked || editing)
+                return;
+            if (e.key !== "Delete" && e.key !== "Backspace")
+                return;
+            const mark = marks.toArray().find((m) => m.id === picked);
+            if (mark && removable(mark)) {
+                marks.delete(indexOf(picked), 1);
+                setPicked(null);
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    });
+    const all = [...marks.toArray(), ...(drawing ? [drawing] : [])];
+    const pickedMark = picked ? marks.toArray().find((m) => m.id === picked) : undefined;
+    const width = natural ? (zoom === null ? undefined : natural.width * zoom) : undefined;
+    return (_jsxs("div", { className: "view-image", children: [_jsxs("div", { className: "view-tools", children: [!readOnly && TOOLS.map(({ tool: t, icon, label }) => (_jsx("button", { className: `material-symbols-outlined${tool === t ? " view-tool-on" : ""}`, title: label, "aria-label": label, onClick: () => setTool(t), children: icon }, t))), pickedMark && removable(pickedMark) && (_jsx("button", { onClick: () => { marks.delete(indexOf(pickedMark.id), 1); setPicked(null); }, children: "Remove mark" })), _jsx("span", { className: "view-tools-gap" }), _jsx("button", { className: "material-symbols-outlined", title: "Zoom out", "aria-label": "Zoom out", onClick: () => setZoom((z) => Math.max(0.1, (z ?? 1) / 1.25)), children: "zoom_out" }), _jsx("button", { className: zoom === null ? "view-tool-on" : undefined, onClick: () => setZoom(null), children: "Fit" }), _jsx("button", { className: zoom === 1 ? "view-tool-on" : undefined, onClick: () => setZoom(1), children: "100%" }), _jsx("button", { className: "material-symbols-outlined", title: "Zoom in", "aria-label": "Zoom in", onClick: () => setZoom((z) => Math.min(8, (z ?? 1) * 1.25)), children: "zoom_in" })] }), _jsx("div", { className: `view-image-stage${zoom === null ? " view-image-fit" : ""}`, children: _jsxs("div", { className: "view-image-box", ref: box, style: width ? { width } : undefined, onPointerDown: down, onPointerMove: moveOver, onPointerUp: up, onPointerLeave: () => self?.move([-1, -1, 0]), children: [_jsx("img", { src: url, alt: "", draggable: false, onLoad: (e) => setNatural({ width: e.currentTarget.naturalWidth, height: e.currentTarget.naturalHeight }) }), _jsxs("svg", { viewBox: "0 0 1 1", preserveAspectRatio: "none", className: "view-image-marks", children: [_jsx("defs", { children: all.filter((m) => m.kind === "arrow").map((m) => (_jsx("marker", { id: `view-arrow-${m.id}`, viewBox: "0 0 10 10", refX: "8", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto-start-reverse", children: _jsx("path", { d: "M0,0 L10,5 L0,10 z", fill: m.color }) }, m.id))) }), all.map((m) => {
+                                    const stroke = { stroke: m.color, strokeWidth: m.id === picked ? 4 : 2.5, fill: "none", vectorEffect: "non-scaling-stroke" };
+                                    const pick = (e) => { if (tool === "move") {
+                                        e.stopPropagation();
+                                        setPicked(m.id);
+                                    } };
+                                    if (m.kind === "pen")
+                                        return _jsx("polyline", { points: m.points.map((p) => p.join(",")).join(" "), ...stroke, onPointerDown: pick }, m.id);
+                                    if (m.kind === "box") {
+                                        const [a, b] = [m.points[0], m.points[m.points.length - 1]];
+                                        return _jsx("rect", { x: Math.min(a[0], b[0]), y: Math.min(a[1], b[1]), width: Math.abs(a[0] - b[0]), height: Math.abs(a[1] - b[1]), ...stroke, onPointerDown: pick }, m.id);
+                                    }
+                                    if (m.kind === "arrow") {
+                                        const [a, b] = [m.points[0], m.points[m.points.length - 1]];
+                                        return _jsx("line", { x1: a[0], y1: a[1], x2: b[0], y2: b[1], ...stroke, markerEnd: `url(#view-arrow-${m.id})`, onPointerDown: pick }, m.id);
+                                    }
+                                    return null;
+                                })] }), all.filter((m) => m.kind === "note" || m.kind === "pin").map((m) => (_jsxs("div", { className: `view-mark-${m.kind}${m.id === picked ? " view-mark-picked" : ""}`, style: { left: `${m.points[0][0] * 100}%`, top: `${m.points[0][1] * 100}%`, borderColor: m.color, ...(m.kind === "pin" ? { color: m.color } : {}) }, onPointerDown: (e) => { e.stopPropagation(); if (tool === "move")
+                                setPicked(m.id); }, onDoubleClick: () => { if (removable(m) || m.author === me)
+                                setEditing(m.id); }, children: [m.kind === "pin" && _jsx("span", { className: "material-symbols-outlined", children: "location_on" }), editing === m.id
+                                    ? _jsx("textarea", { autoFocus: true, defaultValue: m.text ?? "", placeholder: "Write a note", onBlur: (e) => { replace({ ...m, text: e.target.value }); setEditing(null); }, onKeyDown: (e) => { if (e.key === "Enter" && !e.shiftKey)
+                                            e.target.blur(); } })
+                                    : m.text ? _jsx("span", { className: "view-mark-text", children: m.text }) : null] }, m.id))), people.map((p) => {
+                            const [x, y] = p.position;
+                            if (!(x >= 0 && x <= 1 && y >= 0 && y <= 1))
+                                return null;
+                            const color = colorOf(p.profile?.email ?? p.id);
+                            return (_jsxs("div", { className: "view-pointer", style: { left: `${x * 100}%`, top: `${y * 100}%`, color }, children: [_jsx("span", { className: "view-pointer-dot", style: { background: color } }), _jsx("span", { className: "view-pointer-name", style: { background: color }, children: nameOf(p) })] }, p.id));
+                        })] }) })] }));
+}
+// ─── Everything else ─────────────────────────────────────────────────────────
+function Player({ url, failed, contentType, name, size, onDownload }) {
+    if (failed)
+        return _jsx("div", { className: "view-state", children: "Couldn't load this file." });
+    const card = (_jsxs("div", { className: "view-card", children: [_jsx("span", { className: "material-symbols-outlined", children: "draft" }), _jsx("div", { className: "view-card-name", children: name }), _jsxs("div", { className: "view-card-meta", children: [sizeLabel(size), ". There's no preview for this kind of file."] }), _jsx("button", { onClick: onDownload, children: "Download" })] }));
+    if (!contentType.startsWith("video/") && !contentType.startsWith("audio/") && contentType !== "application/pdf")
+        return card;
+    if (!url)
+        return _jsxs("div", { className: "view-state", children: ["Opening", "\u2026"] });
+    if (contentType.startsWith("video/"))
+        return _jsx("video", { className: "view-video", src: url, controls: true });
+    if (contentType.startsWith("audio/"))
+        return _jsx("div", { className: "view-audio", children: _jsx("audio", { src: url, controls: true }) });
+    return _jsx("iframe", { className: "view-pdf", src: url, title: name });
+}