@derive-to/artifacts 0.0.0-stage → 0.6.0

package/dist/react/use-actions.js

@@ -0,0 +1,91 @@
+import { useMemo, useRef } from "react";
+import { peopleTool } from "../protocol/index.js";
+import { useLatest } from "./use-latest.js";
+const upsert = (all, thread) => all.some((t) => t.id === thread.id)
+    ? all.map((t) => (t.id === thread.id ? thread : t))
+    : [...all, thread];
+const snapshotRect = ({ top, left, width, height }) => ({ top, left, width, height });
+const sameGeometry = (before, after) => before.positions.size === after.positions.size &&
+    before.missing.size === after.missing.size &&
+    before.slides.size === after.slides.size &&
+    [...after.positions].every(([id, rect]) => {
+        const previous = before.positions.get(id);
+        return (previous?.top === rect.top &&
+            previous.left === rect.left &&
+            previous.width === rect.width &&
+            previous.height === rect.height);
+    }) &&
+    [...after.missing].every((id) => before.missing.has(id)) &&
+    [...after.slides].every(([id, slide]) => before.slides.get(id) === slide);
+/** Stable actions over the provider's state. Fresh values are read through refs, so the
+ *  identities never change and the stage never remounts because of them. */
+export const useActions = (inputs) => {
+    const latest = useLatest(inputs);
+    const view = useRef(null);
+    const viewedVersion = useRef(undefined);
+    const draftVersion = useRef(undefined);
+    return useMemo(() => {
+        const now = () => latest.current;
+        const save = (thread) => now().setThreads((all) => upsert(all, thread));
+        return {
+            setView: (next, version) => {
+                view.current = next;
+                viewedVersion.current = version;
+                now().setViewState(next);
+            },
+            // A draft owns its quote until it posts or cancels. Canvas clicks must not retarget it.
+            setSelection: (selection) => {
+                if (draftVersion.current === undefined)
+                    now().setSelection(selection);
+            },
+            setPositions: (positions, missing, slides = new Map()) => {
+                const geometry = {
+                    positions: new Map([...positions].map(([id, rect]) => [id, snapshotRect(rect)])),
+                    missing: new Set(missing),
+                    slides: new Map(slides),
+                };
+                now().setGeometry((current) => (sameGeometry(current, geometry) ? current : geometry));
+            },
+            activate: (threadId) => {
+                now().setActive(threadId);
+                if (threadId)
+                    view.current?.focusAnchor(threadId);
+            },
+            compose: (open) => {
+                draftVersion.current = open
+                    ? (viewedVersion.current ?? now().artifact?.currentVersion ?? 1)
+                    : undefined;
+                now().setComposing(open);
+                if (!open)
+                    now().setSelection(null);
+            },
+            startThread: async (body) => {
+                const { client, artifactId, artifact, selection } = now();
+                const version = draftVersion.current ?? viewedVersion.current ?? artifact?.currentVersion ?? 1;
+                const thread = await client.startThread(artifactId, {
+                    body,
+                    quote: selection?.quote ?? null,
+                    version,
+                });
+                save(thread);
+                now().setSelection(null);
+                now().setComposing(false);
+                draftVersion.current = undefined;
+                now().setActive(thread.id);
+            },
+            reply: async (threadId, body) => save(await now().client.reply(now().artifactId, threadId, body)),
+            setThreadState: async (threadId, state) => save(await now().client.setThreadState(now().artifactId, threadId, state)),
+            snapshot: () => view.current?.snapshot() ?? Promise.reject(new Error("Artifact is not ready. Try again.")),
+            searchPeople: async (query) => {
+                const { client, artifactId, artifact } = now();
+                if (!artifact?.features.includes("mentions"))
+                    return [];
+                const result = await client.callTool(peopleTool.name, { artifactId, query });
+                if (result.isError)
+                    return [];
+                return peopleTool.output.parse(result.structuredContent).people;
+            },
+        };
+    }, [latest]);
+};
+//# sourceMappingURL=use-actions.js.map

package/dist/react/use-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-actions.js","sourceRoot":"","sources":["../../src/react/use-actions.ts"],"names":[],"mappings":"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"}

package/dist/react/use-editing.d.ts

@@ -0,0 +1,28 @@
+import { type EditingInputs } from "./editing-actions.js";
+export type { ArtifactSourceEditor } from "./editing-actions.js";
+export interface EditingState {
+    layoutEditable: boolean;
+    /** True while the page's text is editable. */
+    editing: boolean;
+    saving: boolean;
+    /** The version the draft started from; live updates must not replace it. */
+    editVersion: number | null;
+    /** The last save's refusal, until the next attempt. */
+    editError: string | null;
+    editConflict: boolean;
+    /** Bumps when the frame must reload, such as after discarding edits that could not save. */
+    revision: number;
+}
+export interface EditingActions {
+    startEditing(): void;
+    /** Save every change as one new version. On a refusal, editing stays on with the changes
+     *  kept, so the person can fix the text and save again, or cancel. */
+    saveEditing(): Promise<void>;
+    cancelEditing(): Promise<void>;
+    /** Escape: stop editing when nothing changed. With changes, keep them and ask the person
+     *  to save or cancel, so a stray key never discards their text. */
+    leaveEditing(): Promise<void>;
+}
+/** Shared private drafts for text and direct layout changes. */
+export declare const useEditing: (inputs: EditingInputs) => EditingState & EditingActions;
+//# sourceMappingURL=use-editing.d.ts.map

package/dist/react/use-editing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-editing.d.ts","sourceRoot":"","sources":["../../src/react/use-editing.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,aAAa,EAInB,MAAM,sBAAsB,CAAA;AAI7B,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAEhE,MAAM,WAAW,YAAY;IAC3B,cAAc,EAAE,OAAO,CAAA;IACvB,8CAA8C;IAC9C,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,OAAO,CAAA;IACf,4EAA4E;IAC5E,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,uDAAuD;IACvD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,YAAY,EAAE,OAAO,CAAA;IACrB,4FAA4F;IAC5F,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,IAAI,IAAI,CAAA;IACpB;0EACsE;IACtE,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5B,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9B;uEACmE;IACnE,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;CAC9B;AAWD,gEAAgE;AAChE,eAAO,MAAM,UAAU,WAAY,aAAa,KAAG,YAAY,GAAG,cA8DjE,CAAA"}

package/dist/react/use-editing.js

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { cancelEditing, leaveEditing, saveEditing, startEditing, } from "./editing-actions.js";
+import { useLabels } from "./labels.js";
+import { useLatest } from "./use-latest.js";
+/** A reload or closed tab would lose the draft. Hosts guard their own in-app navigation. */
+const useUnloadWarning = (editing) => useEffect(() => {
+    if (!editing)
+        return undefined;
+    const warn = (event) => event.preventDefault();
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+}, [editing]);
+/** Shared private drafts for text and direct layout changes. */
+export const useEditing = (inputs) => {
+    const latest = useLatest(inputs);
+    const labels = useLatest(useLabels().labels);
+    const [editing, setEditing] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [editVersion, setEditVersion] = useState(null);
+    const [editError, setEditError] = useState(null);
+    const [revision, setRevision] = useState(0);
+    const draft = useRef({
+        busy: false,
+        version: null,
+        edits: [],
+        layout: undefined,
+        source: undefined,
+    });
+    const view = inputs.view;
+    const subscribe = useCallback((changed) => {
+        const stop = view?.on("layoutReady", changed);
+        return () => {
+            stop?.();
+        };
+    }, [view]);
+    const snapshot = useCallback(() => view?.layoutAvailable ?? false, [view]);
+    const layoutAvailable = useSyncExternalStore(subscribe, snapshot, () => false);
+    const actions = useMemo(() => ({
+        latest,
+        draft,
+        labels,
+        state: {
+            editing: setEditing,
+            saving: setSaving,
+            version: setEditVersion,
+            error: setEditError,
+            reload: () => setRevision((n) => n + 1),
+        },
+    }), [latest, labels]);
+    useUnloadWarning(editing);
+    const artifact = inputs.artifact;
+    return {
+        layoutEditable: layoutAvailable && !!artifact?.features.includes("layout"),
+        editing,
+        saving,
+        editVersion,
+        editError,
+        revision,
+        editConflict: !inputs.sourceEditor &&
+            !!editError &&
+            !!artifact &&
+            editVersion !== null &&
+            artifact.currentVersion > editVersion,
+        startEditing: () => startEditing(actions),
+        saveEditing: () => saveEditing(actions),
+        leaveEditing: () => leaveEditing(actions),
+        cancelEditing: () => cancelEditing(actions),
+    };
+};
+//# sourceMappingURL=use-editing.js.map

package/dist/react/use-editing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-editing.js","sourceRoot":"","sources":["../../src/react/use-editing.ts"],"names":[],"mappings":"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"}

package/dist/react/use-latest.d.ts

@@ -0,0 +1,4 @@
+/** A ref that holds the latest value, for stable callbacks that read fresh state. Updated
+ *  after render, so render itself never touches the ref. */
+export declare const useLatest: <T>(value: T) => import("react").RefObject<T>;
+//# sourceMappingURL=use-latest.d.ts.map

package/dist/react/use-latest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-latest.d.ts","sourceRoot":"","sources":["../../src/react/use-latest.ts"],"names":[],"mappings":"AAEA;4DAC4D;AAC5D,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,CAAC,iCAMpC,CAAA"}

package/dist/react/use-latest.js

@@ -0,0 +1,11 @@
+import { useLayoutEffect, useRef } from "react";
+/** A ref that holds the latest value, for stable callbacks that read fresh state. Updated
+ *  after render, so render itself never touches the ref. */
+export const useLatest = (value) => {
+    const ref = useRef(value);
+    useLayoutEffect(() => {
+        ref.current = value;
+    });
+    return ref;
+};
+//# sourceMappingURL=use-latest.js.map

package/dist/react/use-latest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-latest.js","sourceRoot":"","sources":["../../src/react/use-latest.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE/C;4DAC4D;AAC5D,MAAM,CAAC,MAAM,SAAS,GAAG,CAAI,KAAQ,EAAE,EAAE;IACvC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACzB,eAAe,CAAC,GAAG,EAAE;QACnB,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;IACrB,CAAC,CAAC,CAAA;IACF,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA"}

package/dist/react/use-live.d.ts

@@ -0,0 +1,58 @@
+import type { LiveChannel } from "../host/index.js";
+import type { Thread } from "../protocol/index.js";
+import type { RemoteCursor } from "./context.js";
+type Cursors = Map<string, RemoteCursor & {
+    at: number;
+}>;
+/** Threads and other viewers' cursors, kept current from the artifact's event stream. */
+export declare const useLive: (live: LiveChannel, initialThreads: Thread[], selfId: string | null) => {
+    threads: {
+        id: string;
+        state: "open" | "outdated" | "resolved";
+        comments: {
+            id: string;
+            threadId: string;
+            version: number;
+            quote: {
+                exact: string;
+                prefix: string;
+                suffix: string;
+                element?: string | undefined;
+                sourceSelector?: string | undefined;
+            } | null;
+            body: string;
+            author: {
+                id: string;
+                name: string;
+                avatarUrl?: string | undefined;
+            };
+            createdAt: string;
+        }[];
+    }[];
+    setThreads: import("react").Dispatch<import("react").SetStateAction<{
+        id: string;
+        state: "open" | "outdated" | "resolved";
+        comments: {
+            id: string;
+            threadId: string;
+            version: number;
+            quote: {
+                exact: string;
+                prefix: string;
+                suffix: string;
+                element?: string | undefined;
+                sourceSelector?: string | undefined;
+            } | null;
+            body: string;
+            author: {
+                id: string;
+                name: string;
+                avatarUrl?: string | undefined;
+            };
+            createdAt: string;
+        }[];
+    }[]>>;
+    cursors: Cursors;
+};
+export {};
+//# sourceMappingURL=use-live.d.ts.map

package/dist/react/use-live.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live.d.ts","sourceRoot":"","sources":["../../src/react/use-live.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,KAAK,EAAiB,MAAM,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAIhD,KAAK,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,YAAY,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAqBzD,yFAAyF;AACzF,eAAO,MAAM,OAAO,SAAU,WAAW,kBAAkB,MAAM,EAAE,UAAU,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BzF,CAAA"}

package/dist/react/use-live.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+const CURSOR_TTL_MS = 30_000;
+const upsert = (threads, thread) => {
+    const at = threads.findIndex((each) => each.id === thread.id);
+    return at < 0 ? [...threads, thread] : threads.with(at, thread);
+};
+const withCursor = (current, event) => {
+    const next = new Map(current);
+    if (event.cursor)
+        next.set(event.actor.id, { actor: event.actor, point: event.cursor, at: Date.now() });
+    else
+        next.delete(event.actor.id);
+    return next;
+};
+const withoutStale = (current) => {
+    const cutoff = Date.now() - CURSOR_TTL_MS;
+    const fresh = [...current].filter(([, cursor]) => cursor.at >= cutoff);
+    return fresh.length === current.size ? current : new Map(fresh);
+};
+/** Threads and other viewers' cursors, kept current from the artifact's event stream. */
+export const useLive = (live, initialThreads, selfId) => {
+    const [threads, setThreads] = useState(initialThreads);
+    const [seeded, setSeeded] = useState(initialThreads);
+    const [cursors, setCursors] = useState(new Map());
+    // Reset when a fresh load arrives: adjusting state during render, as React recommends.
+    if (seeded !== initialThreads) {
+        setSeeded(initialThreads);
+        setThreads(initialThreads);
+    }
+    useEffect(() => live.subscribe((event) => {
+        if (event.type === "thread.changed")
+            setThreads((current) => upsert(current, event.thread));
+        else if (event.type === "presence" && event.actor.id !== selfId)
+            setCursors((current) => withCursor(current, event));
+    }), [live, selfId]);
+    useEffect(() => {
+        const timer = setInterval(() => setCursors(withoutStale), CURSOR_TTL_MS / 3);
+        return () => clearInterval(timer);
+    }, []);
+    return { threads, setThreads, cursors };
+};
+//# sourceMappingURL=use-live.js.map

package/dist/react/use-live.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live.js","sourceRoot":"","sources":["../../src/react/use-live.ts"],"names":[],"mappings":"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"}

package/dist/react/use-mention-picker.d.ts

@@ -0,0 +1,18 @@
+import { type KeyboardEvent } from "react";
+import type { Person } from "./context.js";
+export interface Picked {
+    body: string;
+    caret: number;
+    /** Who was picked; the composer turns "@Name" into a token when it sends. */
+    person: Person;
+}
+/** Offers people while someone types "@name", and turns a pick into `@[Name](id)`. */
+export declare const useMentionPicker: (search: ((query: string) => Promise<Person[]>) | null) => {
+    open: boolean;
+    people: Person[];
+    active: number;
+    track: (body: string, caret: number) => void;
+    pick: (body: string, person: Person) => Picked | null;
+    onKey: (event: KeyboardEvent, body: string) => Picked | "handled" | null;
+};
+//# sourceMappingURL=use-mention-picker.d.ts.map

package/dist/react/use-mention-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mention-picker.d.ts","sourceRoot":"","sources":["../../src/react/use-mention-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAuB,MAAM,OAAO,CAAA;AAC/D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAa1C,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAA;CACf;AAED,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,WAAY,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,IAAI;;;;kBAwB/D,MAAM,SAAS,MAAM;iBAOtB,MAAM,UAAU,MAAM,KAAG,MAAM,GAAG,IAAI;mBAYpC,aAAa,QAAQ,MAAM,KAAG,MAAM,GAAG,SAAS,GAAG,IAAI;CAkB9E,CAAA"}

package/dist/react/use-mention-picker.js

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+const DEBOUNCE_MS = 120;
+/** "@" at the start or after a space, then up to 30 name characters, right before the caret. */
+const TYPING = /(?:^|\s)@([^\s@[\]()]{0,30})$/u;
+/** Offers people while someone types "@name", and turns a pick into `@[Name](id)`. */
+export const useMentionPicker = (search) => {
+    const [query, setQuery] = useState(null);
+    const [found, setFound] = useState({ for: "", people: [] });
+    const [active, setActive] = useState(0);
+    const text = query?.text ?? null;
+    useEffect(() => {
+        if (text === null || !search)
+            return undefined;
+        let live = true;
+        const timer = setTimeout(() => {
+            search(text)
+                .then((people) => live && setFound({ for: text, people }))
+                .catch(() => live && setFound({ for: text, people: [] }));
+        }, DEBOUNCE_MS);
+        return () => {
+            live = false;
+            clearTimeout(timer);
+        };
+    }, [text, search]);
+    const people = query && found.for === query.text ? found.people : [];
+    const open = people.length > 0;
+    /** Call with the body and caret after every edit. */
+    const track = (body, caret) => {
+        const match = search ? TYPING.exec(body.slice(0, caret)) : null;
+        const typed = match?.[1];
+        setQuery(typed === undefined ? null : { text: typed, start: caret - typed.length - 1, caret });
+        setActive(0);
+    };
+    const pick = (body, person) => {
+        if (!query)
+            return null;
+        const shown = `@${person.name} `;
+        setQuery(null);
+        return {
+            body: body.slice(0, query.start) + shown + body.slice(query.caret),
+            caret: query.start + shown.length,
+            person,
+        };
+    };
+    /** Arrow keys move, Enter or Tab picks, Escape closes. True when the key was used. */
+    const onKey = (event, body) => {
+        if (!open)
+            return null;
+        const moves = { ArrowDown: 1, ArrowUp: -1 };
+        const move = moves[event.key];
+        if (move !== undefined) {
+            setActive((current) => (current + move + people.length) % people.length);
+            return "handled";
+        }
+        const person = people[active];
+        if ((event.key === "Enter" || event.key === "Tab") && person)
+            return pick(body, person);
+        if (event.key === "Escape") {
+            setQuery(null);
+            return "handled";
+        }
+        return null;
+    };
+    return { open, people, active, track, pick, onKey };
+};
+//# sourceMappingURL=use-mention-picker.js.map

package/dist/react/use-mention-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mention-picker.js","sourceRoot":"","sources":["../../src/react/use-mention-picker.ts"],"names":[],"mappings":"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"}

package/dist/react/use-presence-sender.d.ts

@@ -0,0 +1,4 @@
+import type { Point } from "../protocol/index.js";
+/** Returns a function that shares this viewer's cursor, at most ten times a second. */
+export declare const usePresenceSender: () => (cursor: Point | null) => void;
+//# sourceMappingURL=use-presence-sender.d.ts.map

package/dist/react/use-presence-sender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-presence-sender.d.ts","sourceRoot":"","sources":["../../src/react/use-presence-sender.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAKjD,uFAAuF;AACvF,eAAO,MAAM,iBAAiB,iBAaZ,KAAK,GAAG,IAAI,SAU7B,CAAA"}

package/dist/react/use-presence-sender.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+import { useArtifact } from "./context.js";
+const INTERVAL_MS = 100;
+/** Returns a function that shares this viewer's cursor, at most ten times a second. */
+export const usePresenceSender = () => {
+    const { client, artifactId, actor, artifact } = useArtifact();
+    const enabled = artifact?.features.includes("presence") ?? false;
+    const pending = useRef(null);
+    const timer = useRef(null);
+    useEffect(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    return (cursor) => {
+        // Nothing is sent unless the server has the presence plugin.
+        if (!actor || !enabled)
+            return;
+        pending.current = cursor;
+        if (timer.current)
+            return;
+        timer.current = setTimeout(() => {
+            timer.current = null;
+            client.presence(artifactId, pending.current).catch(() => undefined);
+        }, INTERVAL_MS);
+    };
+};
+//# sourceMappingURL=use-presence-sender.js.map

package/dist/react/use-presence-sender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-presence-sender.js","sourceRoot":"","sources":["../../src/react/use-presence-sender.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,MAAM,WAAW,GAAG,GAAG,CAAA;AAEvB,uFAAuF;AACvF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAC7D,MAAM,OAAO,GAAG,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,KAAK,CAAA;IAChE,MAAM,OAAO,GAAG,MAAM,CAAe,IAAI,CAAC,CAAA;IAC1C,MAAM,KAAK,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAA;IAEhE,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,IAAI,KAAK,CAAC,OAAO;YAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAChD,CAAC,EACD,EAAE,CACH,CAAA;IAED,OAAO,CAAC,MAAoB,EAAE,EAAE;QAC9B,6DAA6D;QAC7D,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO;YAAE,OAAM;QAC9B,OAAO,CAAC,OAAO,GAAG,MAAM,CAAA;QACxB,IAAI,KAAK,CAAC,OAAO;YAAE,OAAM;QACzB,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,KAAK,CAAC,OAAO,GAAG,IAAI,CAAA;YACpB,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAA;QACrE,CAAC,EAAE,WAAW,CAAC,CAAA;IACjB,CAAC,CAAA;AACH,CAAC,CAAA"}

package/dist/react/use-presenting.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import type { ArtifactView } from "../host/index.js";
+import type { Params } from "../protocol/index.js";
+export interface Presenting {
+    /** True while a slides artifact is in fullscreen, one slide at a time. */
+    presenting: boolean;
+    /** Enlarge the fixed slide for reading. The host frame scrolls horizontally. */
+    zoomed: boolean;
+    zoom(on: boolean): void;
+    /** The slide in view and how many there are; null until a slides page reports. */
+    slide: Params<"slide"> | null;
+    present(on: boolean): void;
+    /** Jump to a slide in the deck or during Present. */
+    goTo(index: number): void;
+    /** The stage hands over its view and the element to put in fullscreen. */
+    attach(view: ArtifactView | null, element: HTMLElement | null): void;
+}
+/** Present mode for slides: the stage fills the screen (true fullscreen when the browser
+ *  allows it), the page shows one slide at a time, and Esc, leaving fullscreen, or the button
+ *  again ends it. */
+export declare const PresentingProvider: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+/** Present mode for the artifact in view. */
+export declare const usePresenting: () => Presenting;
+//# sourceMappingURL=use-presenting.d.ts.map

package/dist/react/use-presenting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-presenting.d.ts","sourceRoot":"","sources":["../../src/react/use-presenting.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAGlD,MAAM,WAAW,UAAU;IACzB,0EAA0E;IAC1E,UAAU,EAAE,OAAO,CAAA;IACnB,gFAAgF;IAChF,MAAM,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAA;IACvB,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;IAC7B,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAA;IAC1B,qDAAqD;IACrD,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,0EAA0E;IAC1E,MAAM,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAA;CACrE;AAgDD;;qBAEqB;AACrB,eAAO,MAAM,kBAAkB,iBAAkB;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,gCA4EvE,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,aAAa,kBAAsC,CAAA"}

package/dist/react/use-presenting.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { useLatest } from "./use-latest.js";
+const PresentingContext = createContext({
+    presenting: false,
+    zoomed: false,
+    zoom: () => undefined,
+    slide: null,
+    present: () => undefined,
+    goTo: () => undefined,
+    attach: () => undefined,
+});
+const usePresentationExit = (presenting, leave) => {
+    useEffect(() => {
+        if (!presenting)
+            return undefined;
+        const left = () => {
+            if (!document.fullscreenElement)
+                leave.current();
+        };
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                leave.current();
+        };
+        document.addEventListener("fullscreenchange", left);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("fullscreenchange", left);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [presenting, leave]);
+};
+/** Zoom and Fit change the slide size, so bring the selected slide back into view once the
+ *  frame has resized. */
+const useSlideInView = (view, current, zoomed, presenting) => 
+// biome-ignore lint/correctness/useExhaustiveDependencies: a zoom change is the trigger
+useEffect(() => {
+    if (presenting)
+        return undefined;
+    const frame = requestAnimationFrame(() => requestAnimationFrame(() => view.current?.setPresenting(false, current.current)));
+    return () => cancelAnimationFrame(frame);
+    // oxlint-disable-next-line react/exhaustive-effect-dependencies -- a zoom change is the trigger
+}, [zoomed, presenting, view, current]);
+/** Present mode for slides: the stage fills the screen (true fullscreen when the browser
+ *  allows it), the page shows one slide at a time, and Esc, leaving fullscreen, or the button
+ *  again ends it. */
+export const PresentingProvider = ({ children }) => {
+    const [presenting, setPresenting] = useState(false);
+    // Every screen opens the whole slide. Zoom is one tap away for small text on a phone.
+    const [zoomed, zoom] = useState(false);
+    const [slide, setSlide] = useState(null);
+    const view = useRef(null);
+    const element = useRef(null);
+    const returnFocus = useRef(null);
+    const stopView = useRef(() => undefined);
+    const current = useLatest(slide?.index ?? 0);
+    // Set once `present` exists; the view's exit request and Esc both end Present through it.
+    const leave = useRef(() => undefined);
+    const attach = useCallback((next, at) => {
+        stopView.current();
+        view.current = next;
+        element.current = at;
+        if (!next) {
+            stopView.current = () => undefined;
+            setSlide(null);
+            setPresenting(false);
+            return;
+        }
+        const stops = [next.on("slide", setSlide), next.on("exitPresent", () => leave.current())];
+        stopView.current = () => {
+            for (const stop of stops)
+                stop();
+        };
+    }, []);
+    const present = useCallback((on) => {
+        const target = view.current;
+        if (!target)
+            return;
+        if (on) {
+            if (!returnFocus.current && document.activeElement instanceof HTMLElement)
+                returnFocus.current = document.activeElement;
+            void element.current?.requestFullscreen?.().catch(() => undefined);
+            target.setPresenting(true, current.current);
+            // Keys go to the page, which moves between slides.
+            element.current?.querySelector("iframe")?.focus();
+        }
+        else {
+            const restoreReader = () => requestAnimationFrame(() => {
+                target.setPresenting(false, current.current);
+                const trigger = returnFocus.current;
+                returnFocus.current = null;
+                if (trigger?.isConnected)
+                    trigger.focus({ preventScroll: true });
+            });
+            if (document.fullscreenElement === element.current)
+                void document.exitFullscreen().then(restoreReader, restoreReader);
+            else
+                restoreReader();
+        }
+        setPresenting(on);
+    }, [current]);
+    const goTo = useCallback((index) => {
+        if (!Number.isInteger(index) || index < 0)
+            return;
+        view.current?.setPresenting(presenting, index);
+    }, [presenting]);
+    useSlideInView(view, current, zoomed, presenting);
+    const presentLatest = useLatest(present);
+    useEffect(() => {
+        leave.current = () => presentLatest.current(false);
+    }, [presentLatest]);
+    usePresentationExit(presenting, leave);
+    const value = useMemo(() => ({ presenting, zoomed, zoom, slide, present, goTo, attach }), [presenting, zoomed, slide, present, goTo, attach]);
+    return _jsx(PresentingContext.Provider, { value: value, children: children });
+};
+/** Present mode for the artifact in view. */
+export const usePresenting = () => useContext(PresentingContext);
+//# sourceMappingURL=use-presenting.js.map