@sansavision/yousaid-react 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,441 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState, } from "react";
+import { collectDiagnostics, SIGNAL_ATTACHMENT_LIMITS, mentionAtCaret, } from "@sansavision/yousaid";
+import { useYouSaid } from "./context.js";
+import { AgentMentionMenu, DEFAULT_MENTION_AGENTS, filterAgents, mentionMenuKey, RequestHumanButton, RoomCanvas, roomAgentStyles } from "./rooms.js";
+export { YouSaidProvider, useYouSaid } from "./context.js";
+export { AgentMentionMenu, canvasEntries, DEFAULT_CANVAS_LABELS, DEFAULT_MENTION_AGENTS, filterAgents, mentionMenuKey, RequestHumanButton, RoomCanvas, roomAgentStyles, useAgentRun, usePendingApprovals, useRequestHuman, useRoomCanvas, useRoomEvents, useRoomMembers, } from "./rooms.js";
+export function YouSaidLauncher({ label = "Talk to us", defaultView = "feedback", appVersion, featureFlags, breadcrumbs, verifyInstall = true, }) {
+    const client = useYouSaid();
+    const [open, setOpen] = useState(false);
+    const [pending, setPending] = useState(false);
+    const [receipt, setReceipt] = useState(null);
+    const [error, setError] = useState("");
+    const [files, setFiles] = useState([]);
+    const [shareDiagnostics, setShareDiagnostics] = useState(false);
+    const preview = useMemo(() => shareDiagnostics ? collectDiagnostics({ consent: true, ...(appVersion ? { appVersion } : {}), ...(featureFlags ? { featureFlags } : {}), ...(breadcrumbs ? { breadcrumbs } : {}) }) : null, [shareDiagnostics, appVersion, featureFlags, breadcrumbs]);
+    useEffect(() => {
+        if (!verifyInstall || installVerified.has(client))
+            return;
+        installVerified.add(client);
+        // Health reporting must never disturb the host app.
+        void client.verifyInstallation().catch(() => undefined);
+    }, [client, verifyInstall]);
+    function chooseFiles(list) {
+        const chosen = Array.from(list ?? []);
+        if (chosen.length > SIGNAL_ATTACHMENT_LIMITS.maxFiles) {
+            setError(`Attach at most ${SIGNAL_ATTACHMENT_LIMITS.maxFiles} files.`);
+            return;
+        }
+        if (chosen.some((file) => file.size > SIGNAL_ATTACHMENT_LIMITS.maxFileBytes)) {
+            setError("Each file must be 5 MB or smaller.");
+            return;
+        }
+        if (chosen.some((file) => !SIGNAL_ATTACHMENT_LIMITS.types.includes(file.type))) {
+            setError("Attach images, PDF, text, CSV, or JSON files.");
+            return;
+        }
+        setError("");
+        setFiles(chosen);
+    }
+    async function submit(event) {
+        event.preventDefault();
+        const form = event.currentTarget;
+        const data = new FormData(form);
+        const input = {
+            kind: data.get("kind"),
+            title: String(data.get("title") ?? ""),
+            body: String(data.get("body") ?? ""),
+            context: { route: location.pathname, ...(appVersion ? { appVersion } : {}) },
+            ...(preview ? { diagnostics: preview } : {}),
+            ...(files.length ? { attachments: files } : {}),
+        };
+        setPending(true);
+        setError("");
+        try {
+            setReceipt(await client.sendSignal(input));
+            form.reset();
+            setFiles([]);
+            setShareDiagnostics(false);
+        }
+        catch (reason) {
+            setError(reason instanceof Error
+                ? reason.message
+                : "We could not send your message.");
+        }
+        finally {
+            setPending(false);
+        }
+    }
+    return (_jsxs("div", { "data-yousaid-root": "true", children: [_jsx("button", { type: "button", onClick: () => setOpen((value) => !value), "aria-expanded": open, children: label }), open ? (_jsx("section", { role: "dialog", "aria-label": defaultView === "rooms" ? "Customer Rooms" : "Send product feedback", children: defaultView === "rooms" ? (_jsx(YouSaidRooms, { embedded: true })) : receipt ? (_jsx("p", { role: "status", children: receipt.receipt })) : (_jsxs("form", { onSubmit: submit, children: [_jsxs("label", { children: ["Type", _jsxs("select", { name: "kind", defaultValue: "support", children: [_jsx("option", { value: "support", children: "Support" }), _jsx("option", { value: "bug", children: "Bug" }), _jsx("option", { value: "feature", children: "Feature" }), _jsx("option", { value: "ux", children: "Experience" }), _jsx("option", { value: "review", children: "Review" })] })] }), _jsxs("label", { children: ["Title", _jsx("input", { name: "title", required: true, minLength: 3, maxLength: 180 })] }), _jsxs("label", { children: ["Message", _jsx("textarea", { name: "body", required: true, minLength: 3, maxLength: 10000 })] }), _jsxs("label", { children: ["Attach files (optional)", _jsx("input", { type: "file", multiple: true, accept: SIGNAL_ATTACHMENT_LIMITS.types.join(","), onChange: (event) => chooseFiles(event.currentTarget.files) })] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shareDiagnostics, onChange: (event) => setShareDiagnostics(event.currentTarget.checked) }), "Share technical details to help fix this"] }), preview ? (_jsxs("details", { open: true, children: [_jsx("summary", { children: "What will be shared" }), _jsx("pre", { "data-yousaid-diagnostics-preview": "true", children: JSON.stringify({ ...preview, consent: undefined }, null, 2) }), _jsx("small", { children: "Page addresses are sent without query strings. Personal data and secrets are removed before storage." })] })) : null, error ? _jsx("p", { role: "alert", children: error }) : null, _jsx("button", { type: "submit", disabled: pending, children: pending ? "Sending" : "Send" })] })) })) : null] }));
+}
+const installVerified = new WeakSet();
+/**
+ * Live in-app inbox for the signed-in end user: loads the latest items, keeps
+ * a Server-Sent Events stream open (with backoff reconnects), and marks items read.
+ */
+export function useInbox(options = {}) {
+    const client = useYouSaid();
+    const live = options.live ?? true;
+    const [items, setItems] = useState([]);
+    const [unread, setUnread] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [connected, setConnected] = useState(false);
+    const [error, setError] = useState("");
+    const refresh = useCallback(async () => {
+        setError("");
+        try {
+            const page = await client.listInbox({ limit: options.limit ?? 50 });
+            setItems(page.items);
+            setUnread(page.unread);
+        }
+        catch (reason) {
+            setError(reason instanceof Error ? reason.message : "The inbox could not be loaded.");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, options.limit]);
+    useEffect(() => { void refresh(); }, [refresh]);
+    useEffect(() => {
+        if (!live)
+            return;
+        const controller = new AbortController();
+        let attempt = 0;
+        const apply = (event) => {
+            attempt = 0;
+            setConnected(true);
+            setUnread(event.unread);
+            if (event.type === "item")
+                setItems((current) => current.some((item) => item.id === event.item.id) ? current : [event.item, ...current]);
+            if (event.type === "unread") {
+                const readAt = new Date().toISOString();
+                setItems((current) => current.map((item) => item.readAt || !(event.all || event.readIds?.includes(item.id)) ? item : { ...item, readAt }));
+            }
+        };
+        const run = async () => {
+            while (!controller.signal.aborted) {
+                try {
+                    await client.streamInbox(apply, controller.signal);
+                }
+                catch { /* reconnect below */ }
+                setConnected(false);
+                if (controller.signal.aborted)
+                    return;
+                attempt += 1;
+                await new Promise((resolve) => setTimeout(resolve, Math.min(30_000, 1_000 * 2 ** Math.min(attempt, 5))));
+            }
+        };
+        void run();
+        return () => controller.abort();
+    }, [client, live]);
+    const markRead = useCallback(async (ids) => {
+        const readAt = new Date().toISOString();
+        setItems((current) => current.map((item) => !item.readAt && (!ids || ids.includes(item.id)) ? { ...item, readAt } : item));
+        try {
+            const result = await client.markInboxRead(ids);
+            setUnread(result.unread);
+        }
+        catch (reason) {
+            setError(reason instanceof Error ? reason.message : "The inbox could not be updated.");
+            void refresh();
+        }
+    }, [client, refresh]);
+    return { items, unread, loading, connected, error, refresh, markRead };
+}
+export function Inbox({ title = "Inbox", emptyMessage = "Replies from the team will appear here.", onOpen }) {
+    const { items, unread, loading, error, markRead } = useInbox();
+    return (_jsxs("section", { className: "ys-inbox", "aria-label": title, children: [_jsx("style", { children: inboxStyles }), _jsxs("header", { children: [_jsxs("h2", { children: [title, unread ? _jsx("span", { "aria-label": `${unread} unread`, children: unread }) : null] }), unread ? _jsx("button", { type: "button", onClick: () => void markRead(), children: "Mark all read" }) : null] }), error ? _jsx("p", { role: "alert", className: "ys-inbox__error", children: error }) : null, loading ? _jsx("p", { className: "ys-inbox__empty", children: "Loading\u2026" }) : items.length === 0 ? _jsx("p", { className: "ys-inbox__empty", children: emptyMessage }) : (_jsx("ul", { children: items.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", className: item.readAt ? "" : "is-unread", onClick: () => { if (!item.readAt)
+                            void markRead([item.id]); onOpen?.(item); }, children: [_jsx("strong", { children: item.subject }), _jsx("small", { children: item.preview }), _jsx("time", { dateTime: item.createdAt, children: new Date(item.createdAt).toLocaleString() })] }) }, item.id))) }))] }));
+}
+const inboxStyles = `.ys-inbox{color:#f4f1eb;background:#111116;border:1px solid #2c2b34;border-radius:20px;overflow:hidden;font:500 14px/1.5 ui-sans-serif,system-ui,sans-serif}.ys-inbox header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #2c2b34}.ys-inbox h2{margin:0;font-size:18px;display:flex;gap:8px;align-items:center}.ys-inbox h2 span{min-width:22px;padding:1px 7px;border-radius:9px;background:#8878ff;font-size:11px;text-align:center}.ys-inbox header button{border:0;border-radius:10px;background:#212129;color:#f4f1eb;padding:7px 11px;cursor:pointer}.ys-inbox ul{list-style:none;margin:0;padding:6px}.ys-inbox li button{width:100%;display:grid;gap:3px;text-align:left;border:0;border-radius:12px;padding:12px;background:transparent;color:#aaa6b2;cursor:pointer}.ys-inbox li button:hover{background:#212129}.ys-inbox li button.is-unread{color:#f4f1eb}.ys-inbox li button.is-unread strong::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#8878ff;vertical-align:middle}.ys-inbox small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ys-inbox time{font-size:10px;color:#aaa6b2}.ys-inbox__empty{padding:28px 18px;text-align:center;color:#aaa6b2}.ys-inbox__error{margin:10px;padding:10px;border-radius:10px;background:#3b2023;color:#ffb6ae}.ys-inbox button:focus-visible{outline:2px solid #8878ff;outline-offset:2px}`;
+/** @experimental */
+export function useRooms() {
+    const client = useYouSaid();
+    const [rooms, setRooms] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState("");
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError("");
+        try {
+            setRooms(await client.listRooms());
+        }
+        catch (reason) {
+            setError(reason instanceof Error ? reason.message : "Rooms could not be loaded.");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    return { rooms, loading, error, refresh };
+}
+/** @experimental */
+export function useRoom(roomId) {
+    const client = useYouSaid();
+    const [room, setRoom] = useState(null);
+    const [loading, setLoading] = useState(Boolean(roomId));
+    const [error, setError] = useState("");
+    const refresh = useCallback(async () => {
+        if (!roomId) {
+            setRoom(null);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError("");
+        try {
+            setRoom(await client.getRoom(roomId));
+        }
+        catch (reason) {
+            setError(reason instanceof Error
+                ? reason.message
+                : "This Room could not be opened.");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, roomId]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    return { room, loading, error, refresh };
+}
+/** @experimental */
+export function useRoomComposer(roomId, onSent) {
+    const client = useYouSaid();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState("");
+    const send = useCallback(async (body) => {
+        if (!roomId)
+            return false;
+        setPending(true);
+        setError("");
+        try {
+            await client.postRoomMessage(roomId, body);
+            await onSent?.();
+            return true;
+        }
+        catch (reason) {
+            setError(reason instanceof Error
+                ? reason.message
+                : "The message could not be sent.");
+            return false;
+        }
+        finally {
+            setPending(false);
+        }
+    }, [client, roomId, onSent]);
+    return { send, pending, error };
+}
+/** @experimental */
+export function YouSaidRooms({ embedded = false, initialRoomId = null, onSolveSession, }) {
+    const client = useYouSaid();
+    const roomsState = useRooms();
+    const [selectedId, setSelectedId] = useState(initialRoomId);
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState("");
+    useEffect(() => {
+        if (!selectedId && roomsState.rooms[0])
+            setSelectedId(roomsState.rooms[0].id);
+    }, [roomsState.rooms, selectedId]);
+    const detail = useRoom(selectedId);
+    async function create(event) {
+        event.preventDefault();
+        const data = new FormData(event.currentTarget);
+        setCreating(true);
+        setCreateError("");
+        try {
+            const created = await client.createRoom({
+                template: data.get("template"),
+                title: String(data.get("title") ?? ""),
+                purpose: String(data.get("purpose") ?? "") || undefined,
+            });
+            setSelectedId(created.id);
+            event.currentTarget.reset();
+            await roomsState.refresh();
+        }
+        catch (reason) {
+            setCreateError(reason instanceof Error
+                ? reason.message
+                : "The Room could not be opened.");
+        }
+        finally {
+            setCreating(false);
+        }
+    }
+    return (_jsxs("section", { className: `ys-rooms ${embedded ? "ys-rooms--embedded" : ""}`, "data-yousaid-rooms": "true", children: [_jsx("style", { children: roomStyles + communityStyles + roomAgentStyles }), _jsxs("header", { className: "ys-rooms__header", children: [_jsxs("div", { children: [_jsx("span", { className: "ys-rooms__eyebrow", children: "Shared with the product team" }), _jsx("h2", { children: "Rooms" }), _jsx("p", { children: "Follow an issue or idea all the way to an outcome." })] }), _jsx("span", { className: "ys-rooms__quiet", children: "Quiet by default" })] }), _jsxs("div", { className: "ys-rooms__grid", children: [_jsxs("aside", { className: "ys-rooms__list", "aria-label": "Your Rooms", children: [roomsState.loading ? (_jsx(RoomSkeleton, {})) : roomsState.error ? (_jsx("p", { role: "alert", className: "ys-rooms__error", children: roomsState.error })) : roomsState.rooms.length ? (roomsState.rooms.map((room) => (_jsxs("button", { type: "button", onClick: () => setSelectedId(room.id), className: selectedId === room.id ? "is-active" : "", children: [_jsx("span", { className: `ys-room-dot ys-room-dot--${room.template_key}` }), _jsxs("span", { children: [_jsx("strong", { children: room.title }), _jsxs("small", { children: [friendlyStatus(room.status), " \u00B7", " ", room.last_message || room.purpose] })] }), Number(room.unread_count) > 0 ? (_jsx("b", { children: room.unread_count })) : null] }, room.id)))) : (_jsxs("div", { className: "ys-rooms__empty", children: [_jsx("strong", { children: "No Rooms yet" }), _jsx("p", { children: "Open one when a question deserves a shared outcome, not another disappearing chat." })] })), _jsxs("details", { className: "ys-rooms__new", children: [_jsx("summary", { children: "Open a Room" }), _jsxs("form", { onSubmit: create, children: [_jsxs("label", { children: ["What is this about?", _jsx("input", { name: "title", required: true, minLength: 3, maxLength: 140, placeholder: "Login recovery on mobile" })] }), _jsxs("label", { children: ["Shape", _jsxs("select", { name: "template", defaultValue: "direct", children: [_jsx("option", { value: "direct", children: "Private question" }), _jsx("option", { value: "feature", children: "Feature discussion" }), _jsx("option", { value: "topic", children: "Product topic" }), _jsx("option", { value: "office_hours", children: "Office hours" })] })] }), _jsxs("label", { children: ["What would a useful outcome be?", _jsx("textarea", { name: "purpose", maxLength: 600, placeholder: "Optional. We will suggest a clear outcome." })] }), createError ? (_jsx("p", { role: "alert", className: "ys-rooms__error", children: createError })) : null, _jsx("button", { type: "submit", disabled: creating, children: creating ? "Opening…" : "Open Room" })] })] })] }), _jsx("div", { className: "ys-rooms__detail", children: detail.loading ? (_jsx(RoomSkeleton, { detail: true })) : detail.error ? (_jsx("p", { role: "alert", className: "ys-rooms__error", children: detail.error })) : detail.room ? (_jsx(RoomView, { detail: detail.room, onRefresh: detail.refresh, onSolveSession: onSolveSession })) : (_jsxs("div", { className: "ys-rooms__welcome", children: [_jsx("span", { children: "\u25CE" }), _jsx("h3", { children: "Choose a Room" }), _jsx("p", { children: "The current state and next step stay visible without reading every message." })] })) })] })] }));
+}
+/** @experimental */
+export function RoomsList({ rooms, selectedId, onSelect, }) {
+    return (_jsx("div", { children: rooms.map((room) => (_jsx("button", { type: "button", "aria-pressed": selectedId === room.id, onClick: () => onSelect(room.id), children: room.title }, room.id))) }));
+}
+/** @experimental */
+export function RoomView({ detail, onRefresh, onSolveSession, }) {
+    const client = useYouSaid();
+    const [message, setMessage] = useState("");
+    const [uploading, setUploading] = useState(false);
+    const [uploadError, setUploadError] = useState("");
+    const [safetyNote, setSafetyNote] = useState("");
+    const composer = useRoomComposer(detail.room.id, onRefresh);
+    const canvas = detail.canvas?.content ?? {};
+    const [caret, setCaret] = useState(0);
+    const [mentionIndex, setMentionIndex] = useState(0);
+    const [mentionDismissed, setMentionDismissed] = useState(false);
+    const mention = mentionDismissed ? null : mentionAtCaret(message, caret);
+    const mentionMatches = mention ? filterAgents(DEFAULT_MENTION_AGENTS, mention.query) : [];
+    function insertMention(alias) {
+        if (!mention)
+            return;
+        const next = `${message.slice(0, mention.start)}@${alias} ${message.slice(caret)}`;
+        setMessage(next);
+        setCaret(mention.start + alias.length + 2);
+        setMentionIndex(0);
+    }
+    async function submit(event) {
+        event.preventDefault();
+        if (await composer.send(message))
+            setMessage("");
+    }
+    async function upload(file) {
+        setUploading(true);
+        setUploadError("");
+        try {
+            await client.uploadRoomAttachment(detail.room.id, file);
+            await onRefresh();
+        }
+        catch (reason) {
+            setUploadError(reason instanceof Error
+                ? reason.message
+                : "The file could not be attached.");
+        }
+        finally {
+            setUploading(false);
+        }
+    }
+    return (_jsxs("article", { className: "ys-room-view", children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsxs("span", { className: "ys-room-view__type", children: [detail.room.channel_kind === "office_hours"
+                                        ? "Office hours"
+                                        : `${detail.room.template_key} Room`, " ", "\u00B7 ", friendlyStatus(detail.room.status)] }), _jsx("h3", { children: detail.room.title }), _jsx("p", { children: detail.room.purpose }), detail.solveSessions
+                                .filter((session) => ["scheduled", "live"].includes(session.state))
+                                .map((session) => (_jsxs("button", { type: "button", className: "ys-room-view__live", onClick: () => void client
+                                    .joinSolveSession(detail.room.id, session.id)
+                                    .then(({ authToken, mode }) => onSolveSession?.({ authToken, mode }))
+                                    .catch((reason) => setUploadError(reason instanceof Error
+                                    ? reason.message
+                                    : "The live session is unavailable.")), children: ["\u25CF", " ", session.state === "live"
+                                        ? "Join live Solve Session"
+                                        : "Open scheduled session"] }, session.id)))] }), _jsxs("div", { children: [_jsxs("details", { className: "ys-room-view__canvas", children: [_jsx("summary", { children: String(canvas.currentState ?? "Waiting for the next useful response.") }), _jsx(RoomCanvas, { detail: detail, title: "Current outcome" })] }), _jsx(RequestHumanButton, { roomId: detail.room.id })] })] }), _jsxs("div", { className: "ys-room-view__messages", "aria-live": "polite", children: [detail.messages.map((item) => (_jsxs("article", { className: item.author_type === "end_user"
+                            ? "is-customer"
+                            : item.author_type === "agent"
+                                ? "is-agent"
+                                : "is-team", children: [_jsxs("div", { children: [_jsx("strong", { children: item.author_label }), item.agent_alias ? _jsx("span", { children: "Agent \u00B7 sources visible" }) : null, _jsx("time", { children: new Date(item.created_at).toLocaleString() })] }), _jsx("p", { children: item.body_plain }), _jsx("button", { className: "ys-room-view__report", type: "button", onClick: () => void client
+                                    .reportRoomContent(detail.room.id, {
+                                    messageId: item.id,
+                                    category: "other",
+                                    reason: "This message needs a human moderator to review it in context.",
+                                })
+                                    .then((result) => setSafetyNote(result.message))
+                                    .catch((reason) => setSafetyNote(reason instanceof Error
+                                    ? reason.message
+                                    : "The report could not be sent.")), children: "Report" })] }, item.id))), detail.polls
+                        .filter((poll) => poll.status === "open")
+                        .map((poll) => (_jsx(CustomerPoll, { roomId: detail.room.id, poll: poll, onSaved: onRefresh }, poll.id))), detail.attachments.length ? (_jsx("div", { className: "ys-room-view__files", children: detail.attachments.map((file) => (_jsxs("button", { type: "button", onClick: () => void client
+                                .downloadRoomAttachment(detail.room.id, file.id)
+                                .then((blob) => {
+                                const url = URL.createObjectURL(blob);
+                                const link = document.createElement("a");
+                                link.href = url;
+                                link.download = file.file_name;
+                                link.click();
+                                setTimeout(() => URL.revokeObjectURL(url), 1_000);
+                            })
+                                .catch((reason) => setUploadError(reason instanceof Error
+                                ? reason.message
+                                : "The file is unavailable.")), children: [_jsx("span", { children: "\u2197" }), file.file_name, _jsxs("small", { children: [Math.max(1, Math.ceil(file.byte_size / 1024)), " KB"] })] }, file.id))) })) : null, safetyNote ? (_jsx("p", { role: "status", className: "ys-room-view__safety", children: safetyNote })) : null] }), _jsxs("form", { className: "ys-room-view__composer", onSubmit: submit, children: [_jsx("label", { htmlFor: `ys-room-message-${detail.room.id}`, children: "Reply to this Room" }), _jsx("textarea", { id: `ys-room-message-${detail.room.id}`, value: message, onChange: (event) => {
+                            setMessage(event.target.value);
+                            setCaret(event.target.selectionStart ?? event.target.value.length);
+                            setMentionDismissed(false);
+                        }, onSelect: (event) => setCaret(event.currentTarget.selectionStart ?? 0), onKeyDown: (event) => {
+                            if (!mention || !mentionMatches.length)
+                                return;
+                            const result = mentionMenuKey(event.key, mentionIndex, mentionMatches.length);
+                            if (!result.handled)
+                                return;
+                            event.preventDefault();
+                            if (result.close)
+                                setMentionDismissed(true);
+                            else if (result.select)
+                                insertMention(mentionMatches[mentionIndex]?.alias ?? mentionMatches[0].alias);
+                            else
+                                setMentionIndex(result.activeIndex);
+                        }, "aria-controls": mention ? `ys-mentions-${detail.room.id}` : undefined, "aria-autocomplete": "list", required: true, maxLength: 20_000, placeholder: "Write a reply or type @ to ask an agent\u2026" }), mention ? (_jsx(AgentMentionMenu, { id: `ys-mentions-${detail.room.id}`, query: mention.query, activeIndex: mentionIndex, onActiveIndexChange: setMentionIndex, onSelect: (agent) => insertMention(agent.alias), onClose: () => setMentionDismissed(true) })) : null, _jsxs("div", { children: [_jsx("small", { children: "Agents are labeled and cannot make external changes without approval." }), _jsxs("span", { className: "ys-room-view__actions", children: [_jsxs("label", { className: "ys-room-view__attach", children: [uploading ? "Attaching…" : "Attach", _jsx("input", { type: "file", accept: ".pdf,.json,.txt,.md,.csv,.png,.jpg,.jpeg,.webp,.gif", disabled: uploading, onChange: (event) => {
+                                                    const file = event.target.files?.[0];
+                                                    if (file)
+                                                        void upload(file);
+                                                    event.currentTarget.value = "";
+                                                } })] }), _jsx("button", { type: "submit", disabled: composer.pending || !message.trim(), children: composer.pending ? "Sending…" : "Send" })] })] }), composer.error || uploadError ? (_jsx("p", { role: "alert", className: "ys-rooms__error", children: composer.error || uploadError })) : null] })] }));
+}
+function CustomerPoll({ roomId, poll, onSaved, }) {
+    const client = useYouSaid();
+    const [selected, setSelected] = useState("");
+    const [answer, setAnswer] = useState("");
+    const [pending, setPending] = useState(false);
+    return (_jsxs("section", { className: "ys-room-poll", children: [_jsxs("small", { children: ["Room poll \u00B7 ", poll.responses.length, " responses"] }), _jsx("strong", { children: poll.question }), poll.poll_type === "open_question" ? (_jsx("textarea", { value: answer, onChange: (event) => setAnswer(event.target.value), placeholder: "Your answer" })) : (poll.options.map((option) => (_jsx("button", { type: "button", "aria-pressed": selected === option.id, onClick: () => setSelected(option.id), children: option.label }, option.id)))), _jsx("button", { type: "button", disabled: pending ||
+                    (poll.poll_type === "open_question" ? !answer.trim() : !selected), onClick: () => {
+                    setPending(true);
+                    void client
+                        .respondToRoomPoll(roomId, poll.id, {
+                        optionIds: selected ? [selected] : [],
+                        answer: answer || null,
+                    })
+                        .then(onSaved)
+                        .finally(() => setPending(false));
+                }, children: pending ? "Saving…" : "Record response" })] }));
+}
+/** @experimental */
+export function RoomComposer({ roomId, onSent, }) {
+    const [body, setBody] = useState("");
+    const composer = useRoomComposer(roomId, onSent);
+    return (_jsxs("form", { onSubmit: (event) => {
+            event.preventDefault();
+            void composer.send(body).then((sent) => {
+                if (sent)
+                    setBody("");
+            });
+        }, children: [_jsx("textarea", { value: body, onChange: (event) => setBody(event.target.value), required: true }), _jsx("button", { disabled: composer.pending, children: "Send" }), composer.error ? _jsx("p", { role: "alert", children: composer.error }) : null] }));
+}
+/** @experimental */
+export function AgentActionCard({ state, children, }) {
+    return (_jsxs("section", { "data-agent-state": state, children: [_jsx("strong", { children: state.replace("_", " ") }), children] }));
+}
+/** @experimental */
+export function ApprovalCard({ summary, onApprove, onReject, }) {
+    return (_jsxs("section", { children: [_jsx("p", { children: summary }), _jsx("button", { type: "button", onClick: onApprove, children: "Approve exact action" }), _jsx("button", { type: "button", onClick: onReject, children: "Reject" })] }));
+}
+export function LifecycleReceipt({ title, state, }) {
+    return (_jsxs("section", { role: "status", children: [_jsx("strong", { children: title }), _jsx("p", { children: state })] }));
+}
+function RoomSkeleton({ detail = false }) {
+    return (_jsxs("div", { className: `ys-skeleton ${detail ? "is-detail" : ""}`, "aria-label": "Loading Rooms", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }));
+}
+function friendlyStatus(status) {
+    return status
+        .replaceAll("_", " ")
+        .replace(/^./, (value) => value.toUpperCase());
+}
+const communityStyles = `.ys-room-view__live{margin-top:12px;border:0;border-radius:10px;background:#18342c;color:var(--ys-mint);padding:8px 11px;font-weight:700;cursor:pointer}.ys-room-view__report{margin-top:8px;border:0;background:transparent;color:var(--ys-muted);font-size:9px;cursor:pointer}.ys-room-view__safety{max-width:none!important;border-radius:10px;background:#18342c;padding:10px;color:var(--ys-mint)}.ys-room-poll{max-width:100%;display:grid;gap:8px;border:1px solid var(--ys-line);border-radius:16px;background:var(--ys-panel);padding:15px}.ys-room-poll small{color:var(--ys-accent)}.ys-room-poll>button{border:1px solid var(--ys-line);border-radius:10px;background:var(--ys-inset);color:var(--ys-text);padding:9px;text-align:left;cursor:pointer}.ys-room-poll>button[aria-pressed=true]{border-color:var(--ys-accent);background:#2b2746}.ys-room-poll textarea{border:1px solid var(--ys-line);border-radius:10px;background:#0e0e13;color:var(--ys-text);padding:10px}`;
+const roomStyles = `.ys-rooms{--ys-bg:#111116;--ys-panel:#19191f;--ys-inset:#212129;--ys-text:#f4f1eb;--ys-muted:#aaa6b2;--ys-line:#2c2b34;--ys-accent:#8878ff;--ys-mint:#6eddbb;color:var(--ys-text);background:var(--ys-bg);border:1px solid var(--ys-line);border-radius:24px;overflow:hidden;font:500 14px/1.5 ui-sans-serif,system-ui,sans-serif}.ys-rooms *{box-sizing:border-box}.ys-rooms button,.ys-rooms input,.ys-rooms textarea,.ys-rooms select{font:inherit}.ys-rooms__header{display:flex;justify-content:space-between;gap:24px;padding:24px 26px;border-bottom:1px solid var(--ys-line)}.ys-rooms__header h2{margin:3px 0 0;font-size:28px;line-height:1;letter-spacing:-.045em}.ys-rooms__header p{margin:9px 0 0;color:var(--ys-muted)}.ys-rooms__eyebrow{color:var(--ys-accent);font-size:11px;font-weight:750}.ys-rooms__quiet{align-self:flex-start;padding:7px 10px;border-radius:10px;background:#18342c;color:var(--ys-mint);font-size:11px}.ys-rooms__grid{display:grid;grid-template-columns:minmax(220px,34%) minmax(0,1fr);min-height:520px}.ys-rooms__list{padding:10px;border-right:1px solid var(--ys-line);background:#141419}.ys-rooms__list>button{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;text-align:left;border:0;border-radius:14px;padding:13px;background:transparent;color:var(--ys-text);cursor:pointer;transition:background .2s ease,transform .2s ease}.ys-rooms__list>button:hover,.ys-rooms__list>button.is-active{background:var(--ys-inset)}.ys-rooms__list>button:active{transform:scale(.985)}.ys-rooms__list strong,.ys-rooms__list small{display:block}.ys-rooms__list small{margin-top:4px;color:var(--ys-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ys-rooms__list b{min-width:20px;text-align:center;padding:2px 5px;border-radius:8px;background:var(--ys-accent);font-size:10px}.ys-room-dot{width:9px;height:9px;margin-top:5px;border-radius:3px;background:var(--ys-accent)}.ys-room-dot--incident{background:#ff8178}.ys-room-dot--topic{background:var(--ys-mint)}.ys-rooms__new{margin:8px}.ys-rooms__new summary{cursor:pointer;padding:11px;color:var(--ys-accent);font-weight:700}.ys-rooms__new form{display:grid;gap:10px;padding:11px}.ys-rooms__new label{display:grid;gap:5px;color:var(--ys-muted);font-size:12px}.ys-rooms__new input,.ys-rooms__new textarea,.ys-rooms__new select,.ys-room-view__composer textarea{width:100%;border:1px solid var(--ys-line);border-radius:11px;background:#0e0e13;color:var(--ys-text);padding:10px;outline:none}.ys-rooms input:focus,.ys-rooms textarea:focus,.ys-rooms select:focus,.ys-rooms button:focus-visible{outline:2px solid var(--ys-accent);outline-offset:2px}.ys-rooms__new button,.ys-room-view__composer button{border:0;border-radius:11px;background:var(--ys-text);color:var(--ys-bg);padding:10px 14px;font-weight:750;cursor:pointer}.ys-rooms__new button:disabled,.ys-room-view__composer button:disabled{opacity:.5}.ys-rooms__detail{min-width:0}.ys-room-view>header{padding:24px;border-bottom:1px solid var(--ys-line);display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,34%);gap:20px}.ys-room-view h3{margin:4px 0;font-size:25px;letter-spacing:-.035em}.ys-room-view header p{margin:8px 0 0;max-width:55ch;color:var(--ys-muted)}.ys-room-view__type{color:var(--ys-accent);font-size:11px;font-weight:750;text-transform:capitalize}.ys-room-view__canvas{background:var(--ys-inset);border-radius:14px;padding:13px}.ys-room-view__canvas summary{cursor:pointer;font-weight:750}.ys-room-view__canvas dl{margin:10px 0 0}.ys-room-view__canvas dl div+div{margin-top:10px}.ys-room-view__canvas dt{color:var(--ys-muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.ys-room-view__canvas dd{margin:3px 0 0}.ys-room-view__messages{padding:22px;display:grid;gap:11px;max-height:460px;overflow:auto}.ys-room-view__messages article{max-width:82%;padding:13px 15px;border-radius:16px;background:var(--ys-inset)}.ys-room-view__messages article.is-customer{margin-left:auto;background:#4539a3}.ys-room-view__messages article.is-agent{border:1px solid #3c3860;background:#1f1d2d}.ys-room-view__messages article>div{display:flex;gap:8px;align-items:center}.ys-room-view__messages article span{color:var(--ys-accent);font-size:10px}.ys-room-view__messages time{margin-left:auto;color:var(--ys-muted);font-size:9px}.ys-room-view__messages p{margin:8px 0 0;white-space:pre-wrap}.ys-room-view__composer{border-top:1px solid var(--ys-line);padding:16px 22px}.ys-room-view__composer label{display:block;margin-bottom:6px;font-size:11px;color:var(--ys-muted)}.ys-room-view__composer textarea{min-height:80px;resize:vertical}.ys-room-view__composer>div{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}.ys-room-view__composer small{color:var(--ys-muted)}.ys-room-view__actions{display:flex;align-items:center;gap:8px}.ys-room-view__attach{position:relative;overflow:hidden;cursor:pointer;padding:9px 11px;border:1px solid var(--ys-line);border-radius:11px;font-weight:700}.ys-room-view__attach input{position:absolute;inset:0;opacity:0;cursor:pointer}.ys-room-view__files{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}.ys-room-view__files button{display:flex;align-items:center;gap:6px;padding:8px 10px;border:0;border-radius:11px;background:var(--ys-inset);color:var(--ys-text);font-size:12px;cursor:pointer}.ys-room-view__files small{color:var(--ys-muted)}.ys-rooms__welcome,.ys-rooms__empty{padding:40px 24px;text-align:center;color:var(--ys-muted)}.ys-rooms__welcome span{display:block;color:var(--ys-accent);font-size:38px}.ys-rooms__welcome h3,.ys-rooms__empty strong{color:var(--ys-text)}.ys-rooms__error{padding:10px;border-radius:10px;background:#3b2023;color:#ffb6ae}.ys-skeleton{display:grid;gap:10px;padding:14px}.ys-skeleton i{display:block;height:54px;border-radius:13px;background:linear-gradient(90deg,var(--ys-inset),#292832,var(--ys-inset));background-size:200% 100%;animation:ys-shimmer 1.4s infinite}.ys-skeleton.is-detail i:first-child{height:120px}.ys-skeleton.is-detail i:nth-child(2){height:220px}@keyframes ys-shimmer{to{background-position:-200% 0}}@media(max-width:700px){.ys-rooms__header{padding:20px}.ys-rooms__quiet{display:none}.ys-rooms__grid{grid-template-columns:1fr}.ys-rooms__list{border-right:0;border-bottom:1px solid var(--ys-line);max-height:250px;overflow:auto}.ys-room-view>header{grid-template-columns:1fr}.ys-room-view__messages article{max-width:92%}}@media(prefers-reduced-motion:reduce){.ys-rooms *{animation:none!important;scroll-behavior:auto!important;transition:none!important}}`;
+export * from "./proof.js";
+export { ProofPromptView, useProofPrompt } from "./proof-prompt.js";
+/**
+ * Native in-app Proof prompt using the provider's signed identity. See ProofPromptView for props.
+ * @experimental
+ */
+export function ProofPrompt(props) {
+    return _jsx(ProofPromptViewInternal, { client: useYouSaid(), ...props });
+}
+import { ProofPromptView as ProofPromptViewInternal } from "./proof-prompt.js";

package/dist/proof-prompt.d.ts

@@ -0,0 +1,57 @@
+import type { ProofEligibility, ProofPromptAction, ProofPromptEvent, ProofPromptPresentation, YouSaidClient } from "@sansavision/yousaid";
+/** @experimental */
+export type ProofPromptOptions = {
+    client: YouSaidClient;
+    formId: string;
+    presentation?: ProofPromptPresentation;
+    /** Check server-side frequency caps / "never ask" before opening automatically. */
+    respectFrequency?: boolean;
+    onEvent?: (event: ProofPromptEvent) => void;
+};
+/** @experimental */
+export type ProofPromptState = {
+    status: "idle" | "checking" | "ineligible" | "ready" | "open" | "completed" | "error";
+    eligibility: ProofEligibility | null;
+    frameUrl: string | null;
+    error: string | null;
+    open: () => Promise<void>;
+    close: (action?: ProofPromptAction) => Promise<void>;
+    frameRef: React.RefObject<HTMLIFrameElement | null>;
+};
+/**
+ * Headless hook behind <ProofPrompt>: eligibility, a signed known-customer
+ * session, the frame URL and lifecycle events (open, step, consent, complete,
+ * abandon) from the collection frame.
+ * @experimental
+ */
+export declare function useProofPrompt({ client, formId, presentation, respectFrequency, onEvent }: ProofPromptOptions): ProofPromptState;
+/** @experimental */
+export type ProofPromptProps = {
+    client: YouSaidClient;
+    formId: string;
+    presentation?: ProofPromptPresentation;
+    /** The product moment that justified the ask, e.g. { event: "release_outcome_verified", id: "rel_123" }. Passed to onEvent. */
+    trigger?: {
+        event: string;
+        id?: string;
+    };
+    /** Open as soon as the prompt is eligible (still subject to server frequency caps). */
+    autoOpen?: boolean;
+    label?: string;
+    className?: string;
+    onEvent?: (event: ProofPromptEvent & {
+        trigger?: {
+            event: string;
+            id?: string;
+        };
+    }) => void;
+    onComplete?: (event: ProofPromptEvent) => void;
+};
+/**
+ * Native in-app Proof prompt (PRD §13.1, §17.4). Inline, modal, drawer,
+ * popover or full-screen. Offers "Not now" and "Don't ask again", which are
+ * enforced server-side across devices and products.
+ * @experimental
+ */
+export declare function ProofPromptView({ client, formId, presentation, trigger, autoOpen, label, className, onEvent, onComplete }: ProofPromptProps): import("react").JSX.Element | null;
+//# sourceMappingURL=proof-prompt.d.ts.map

package/dist/proof-prompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"proof-prompt.d.ts","sourceRoot":"","sources":["../src/proof-prompt.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,uBAAuB,EAAgB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAExJ,oBAAoB;AACpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,oBAAoB;AACpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;IACtF,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACrD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,YAAuB,EAAE,gBAAuB,EAAE,OAAO,EAAE,EAAE,kBAAkB,GAAG,gBAAgB,CAiDlJ;AAWD,oBAAoB;AACpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,+HAA+H;IAC/H,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG;QAAE,OAAO,CAAC,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,EAAE,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,YAAuB,EAAE,OAAO,EAAE,QAAgB,EAAE,KAA0B,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,gBAAgB,sCA+BnL"}

package/dist/proof-prompt.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+/**
+ * Headless hook behind <ProofPrompt>: eligibility, a signed known-customer
+ * session, the frame URL and lifecycle events (open, step, consent, complete,
+ * abandon) from the collection frame.
+ * @experimental
+ */
+export function useProofPrompt({ client, formId, presentation = "drawer", respectFrequency = true, onEvent }) {
+    const proof = useMemo(() => client.proof(), [client]);
+    const [status, setStatus] = useState("idle");
+    const [eligibility, setEligibility] = useState(null);
+    const [session, setSession] = useState(null);
+    const [error, setError] = useState(null);
+    const frameRef = useRef(null);
+    const eventRef = useRef(onEvent);
+    eventRef.current = onEvent;
+    useEffect(() => {
+        if (!respectFrequency) {
+            setStatus("ready");
+            return;
+        }
+        let cancelled = false;
+        setStatus("checking");
+        proof.eligibility(formId).then((result) => { if (cancelled)
+            return; setEligibility(result); setStatus(result.eligible ? "ready" : "ineligible"); })
+            .catch(() => { if (!cancelled)
+            setStatus("ready"); });
+        return () => { cancelled = true; };
+    }, [proof, formId, respectFrequency]);
+    useEffect(() => {
+        function listen(message) {
+            const event = proof.parseEvent(message, frameRef.current);
+            if (!event)
+                return;
+            if (event.type === "resize" && frameRef.current && presentation === "inline" && typeof event.height === "number")
+                frameRef.current.style.height = `${Math.min(4000, Math.max(400, event.height + 8))}px`;
+            if (event.type === "complete")
+                setStatus("completed");
+            eventRef.current?.(event);
+        }
+        window.addEventListener("message", listen);
+        return () => window.removeEventListener("message", listen);
+    }, [proof, presentation]);
+    const open = useCallback(async () => {
+        setError(null);
+        try {
+            const next = session ?? await proof.startSession(formId, presentation);
+            setSession(next);
+            setStatus("open");
+        }
+        catch (caught) {
+            setError(caught instanceof Error ? caught.message : "The story prompt could not open.");
+            setStatus("error");
+        }
+    }, [proof, formId, presentation, session]);
+    const close = useCallback(async (action) => {
+        setStatus((current) => (current === "completed" ? current : "ready"));
+        if (action)
+            await proof.recordPreference(formId, action).catch(() => undefined);
+    }, [proof, formId]);
+    return { status, eligibility, frameUrl: session ? proof.frameUrl(formId, session) : null, error, open, close, frameRef };
+}
+const overlayStyle = { position: "fixed", inset: 0, zIndex: 2147483000, background: "rgba(10,10,14,.55)", display: "flex" };
+function panelStyle(presentation) {
+    const base = { background: "#fff", display: "flex", flexDirection: "column", overflow: "hidden", boxShadow: "0 24px 80px rgba(0,0,0,.3)" };
+    if (presentation === "drawer")
+        return { ...base, marginLeft: "auto", width: "min(520px, 100vw)", height: "100vh" };
+    if (presentation === "fullscreen")
+        return { ...base, width: "100vw", height: "100vh" };
+    if (presentation === "popover")
+        return { ...base, position: "fixed", right: 16, bottom: 16, width: "min(420px, calc(100vw - 32px))", height: "min(640px, calc(100vh - 32px))", borderRadius: 18 };
+    return { ...base, margin: "auto", width: "min(680px, calc(100vw - 24px))", height: "min(860px, calc(100vh - 24px))", borderRadius: 18 };
+}
+/**
+ * Native in-app Proof prompt (PRD §13.1, §17.4). Inline, modal, drawer,
+ * popover or full-screen. Offers "Not now" and "Don't ask again", which are
+ * enforced server-side across devices and products.
+ * @experimental
+ */
+export function ProofPromptView({ client, formId, presentation = "drawer", trigger, autoOpen = false, label = "Share your story", className, onEvent, onComplete }) {
+    const prompt = useProofPrompt({
+        client, formId, presentation, respectFrequency: presentation !== "inline",
+        onEvent: (event) => { onEvent?.({ ...event, ...(trigger ? { trigger } : {}) }); if (event.type === "complete")
+            onComplete?.(event); },
+    });
+    const { status, open } = prompt;
+    useEffect(() => { if ((autoOpen || presentation === "inline") && status === "ready")
+        void open(); }, [autoOpen, presentation, status, open]);
+    useEffect(() => {
+        if (status !== "open" || presentation === "inline")
+            return;
+        const onKey = (event) => { if (event.key === "Escape")
+            void prompt.close("dismissed"); };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [status, presentation, prompt]);
+    const frame = prompt.frameUrl ? _jsx("iframe", { ref: prompt.frameRef, src: prompt.frameUrl, title: label, allow: "camera; microphone; display-capture; clipboard-write", referrerPolicy: "no-referrer", style: { border: 0, width: "100%", flex: 1, minHeight: presentation === "inline" ? 560 : 0 } }) : null;
+    if (presentation === "inline")
+        return _jsx("div", { className: className, children: status === "error" ? _jsx("p", { role: "alert", children: prompt.error }) : frame });
+    if (status === "ineligible" && !autoOpen)
+        return null;
+    return _jsxs("div", { className: className, children: [status !== "open" ? _jsx("button", { type: "button", onClick: () => void open(), disabled: status === "checking", children: label }) : null, status === "error" ? _jsx("p", { role: "alert", children: prompt.error }) : null, status === "open" && frame ? _jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": label, style: overlayStyle, onClick: (event) => { if (event.target === event.currentTarget)
+                    void prompt.close("dismissed"); }, children: _jsxs("div", { style: panelStyle(presentation), children: [_jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, padding: "8px 12px", borderBottom: "1px solid rgba(0,0,0,.08)", fontSize: 13 }, children: [_jsx("button", { type: "button", onClick: () => void prompt.close("not_now"), children: "Not now" }), _jsx("button", { type: "button", onClick: () => void prompt.close("never"), children: "Don't ask again" }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => void prompt.close("dismissed"), children: "×" })] }), frame] }) }) : null] });
+}