@botiverse/porthole 0.0.1 → 0.1.0

package/dist/protocol/jsonrpc.d.ts

@@ -0,0 +1,43 @@
+/**
+ * JSON-RPC 2.0, as MCP Apps carries it over a transport. Every message crossing the frame boundary
+ * is checked against these shapes before use; anything else is dropped, never coerced.
+ */
+export type JsonRpcId = string | number;
+export interface JsonRpcRequest {
+    readonly jsonrpc: "2.0";
+    readonly id: JsonRpcId;
+    readonly method: string;
+    readonly params?: Readonly<Record<string, unknown>>;
+}
+export interface JsonRpcNotification {
+    readonly jsonrpc: "2.0";
+    readonly method: string;
+    readonly params?: Readonly<Record<string, unknown>>;
+}
+export interface JsonRpcError {
+    readonly code: number;
+    readonly message: string;
+    readonly data?: unknown;
+}
+export type JsonRpcResponse = {
+    readonly jsonrpc: "2.0";
+    readonly id: JsonRpcId;
+    readonly result: unknown;
+} | {
+    readonly jsonrpc: "2.0";
+    readonly id: JsonRpcId;
+    readonly error: JsonRpcError;
+};
+export type JsonRpcMessage = JsonRpcRequest | JsonRpcNotification | JsonRpcResponse;
+/** The standard error codes the adapters answer with. */
+export declare const JSON_RPC_ERRORS: {
+    readonly invalidRequest: -32600;
+    readonly methodNotFound: -32601;
+    readonly invalidParams: -32602;
+    readonly internal: -32603;
+};
+/**
+ * `value` as a JSON-RPC message, or null when it isn't one: a request (id + method), a
+ * notification (method only), or a response (id + exactly one of result / error).
+ */
+export declare function parseJsonRpc(value: unknown): JsonRpcMessage | null;

package/dist/protocol/jsonrpc.js

@@ -0,0 +1,50 @@
+/**
+ * JSON-RPC 2.0, as MCP Apps carries it over a transport. Every message crossing the frame boundary
+ * is checked against these shapes before use; anything else is dropped, never coerced.
+ */
+/** The standard error codes the adapters answer with. */
+export const JSON_RPC_ERRORS = {
+    invalidRequest: -32600,
+    methodNotFound: -32601,
+    invalidParams: -32602,
+    internal: -32603,
+};
+const isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const isId = (value) => (typeof value === "string" && value.length <= 256) ||
+    (typeof value === "number" && Number.isSafeInteger(value));
+/**
+ * `value` as a JSON-RPC message, or null when it isn't one: a request (id + method), a
+ * notification (method only), or a response (id + exactly one of result / error).
+ */
+export function parseJsonRpc(value) {
+    if (!isRecord(value) || value.jsonrpc !== "2.0") {
+        return null;
+    }
+    if (value.params !== undefined && !isRecord(value.params)) {
+        return null;
+    }
+    if (typeof value.method === "string") {
+        if (value.method.length === 0 || value.method.length > 256) {
+            return null;
+        }
+        if (value.id === undefined) {
+            return value;
+        }
+        return isId(value.id) ? value : null;
+    }
+    if (!isId(value.id) || value.method !== undefined) {
+        return null;
+    }
+    const hasResult = "result" in value;
+    const hasError = "error" in value;
+    if (hasResult === hasError) {
+        return null;
+    }
+    if (hasError) {
+        const error = value.error;
+        if (!isRecord(error) || typeof error.code !== "number" || typeof error.message !== "string") {
+            return null;
+        }
+    }
+    return value;
+}

package/dist/protocol/mcp-apps.d.ts

@@ -0,0 +1,79 @@
+/**
+ * MCP Apps (`io.modelcontextprotocol/ui`, 2026-01-26): the method names Porthole speaks. The shell
+ * is an MCP Apps view of its host; content may also use the official App SDK directly, so the host
+ * side answers these whoever sends them. This module holds names and shapes only: the core's own
+ * adapter (the subset the shell speaks) and the `/mcp` adapter (full MCP Apps views) both use it.
+ */
+export declare const MCP_APPS_PROTOCOL_VERSION = "2026-01-26";
+export declare const MCP_APPS_METHODS: {
+    readonly initialize: "ui/initialize";
+    readonly message: "ui/message";
+    readonly openLink: "ui/open-link";
+    readonly downloadFile: "ui/download-file";
+    readonly requestDisplayMode: "ui/request-display-mode";
+    readonly updateModelContext: "ui/update-model-context";
+    readonly callTool: "tools/call";
+    readonly readResource: "resources/read";
+    readonly initialized: "ui/notifications/initialized";
+    readonly sizeChanged: "ui/notifications/size-changed";
+    readonly requestTeardown: "ui/notifications/request-teardown";
+    readonly log: "notifications/message";
+    readonly toolInput: "ui/notifications/tool-input";
+    readonly toolInputPartial: "ui/notifications/tool-input-partial";
+    readonly toolResult: "ui/notifications/tool-result";
+    readonly toolCancelled: "ui/notifications/tool-cancelled";
+    readonly hostContextChanged: "ui/notifications/host-context-changed";
+    readonly resourceTeardown: "ui/resource-teardown";
+    readonly sandboxProxyReady: "ui/notifications/sandbox-proxy-ready";
+    readonly sandboxResourceReady: "ui/notifications/sandbox-resource-ready";
+};
+export type McpAppsMethod = (typeof MCP_APPS_METHODS)[keyof typeof MCP_APPS_METHODS];
+/**
+ * What the shell's `tool-input(-partial)` carries: the content to draw. Porthole's own argument
+ * names, since the shell is the only view that reads them.
+ */
+export interface ShellToolInput {
+    readonly html: string;
+}
+/**
+ * The style variables MCP Apps defines (`McpUiStyleVariableKey`, 2026-01-26). The official App SDK
+ * refuses a host context whose `styles.variables` holds any other name ("Unrecognized key"), so a
+ * host sends exactly these there; Porthole's own names go under `PORTHOLE_STYLES` instead.
+ */
+export declare const MCP_APPS_STYLE_VARIABLES: readonly string[];
+/**
+ * The host context's own-prefixed field for the theme variables MCP Apps doesn't define (an
+ * accent, a chart palette): `{ variables }`. The shell applies them with the standard ones; a view
+ * that doesn't know the field ignores it (the host context is open to extra fields).
+ */
+export declare const PORTHOLE_STYLES = "porthole/styles";
+/** The logger name the shell's error reports (`notifications/message`, level `error`) carry. */
+export declare const SHELL_LOGGER = "porthole";
+/**
+ * The host context a view receives in `ui/initialize`'s result and in `host-context-changed`
+ * (the fields Porthole sets; the spec allows more, which views ignore).
+ */
+export interface HostContext {
+    readonly theme: "light" | "dark";
+    readonly styles: {
+        readonly variables: Readonly<Record<string, string>>;
+    };
+    readonly displayMode: "inline" | "fullscreen" | "pip";
+    readonly availableDisplayModes: readonly ("inline" | "fullscreen" | "pip")[];
+    readonly containerDimensions?: {
+        readonly maxWidth?: number;
+        readonly maxHeight?: number;
+    };
+    readonly locale?: string;
+    readonly timeZone?: string;
+    readonly platform?: "web" | "desktop" | "mobile";
+    readonly deviceCapabilities?: {
+        readonly touch?: boolean;
+        readonly hover?: boolean;
+    };
+    /** Porthole's own theme variables, outside the spec's list (`PORTHOLE_STYLES`). */
+    readonly "porthole/styles"?: {
+        readonly variables: Readonly<Record<string, string>>;
+    };
+    readonly [key: string]: unknown;
+}

package/dist/protocol/mcp-apps.js

@@ -0,0 +1,99 @@
+/**
+ * MCP Apps (`io.modelcontextprotocol/ui`, 2026-01-26): the method names Porthole speaks. The shell
+ * is an MCP Apps view of its host; content may also use the official App SDK directly, so the host
+ * side answers these whoever sends them. This module holds names and shapes only: the core's own
+ * adapter (the subset the shell speaks) and the `/mcp` adapter (full MCP Apps views) both use it.
+ */
+export const MCP_APPS_PROTOCOL_VERSION = "2026-01-26";
+export const MCP_APPS_METHODS = {
+    // View → host requests.
+    initialize: "ui/initialize",
+    message: "ui/message",
+    openLink: "ui/open-link",
+    downloadFile: "ui/download-file",
+    requestDisplayMode: "ui/request-display-mode",
+    updateModelContext: "ui/update-model-context",
+    callTool: "tools/call",
+    readResource: "resources/read",
+    // View → host notifications.
+    initialized: "ui/notifications/initialized",
+    sizeChanged: "ui/notifications/size-changed",
+    requestTeardown: "ui/notifications/request-teardown",
+    log: "notifications/message",
+    // Host → view notifications.
+    toolInput: "ui/notifications/tool-input",
+    toolInputPartial: "ui/notifications/tool-input-partial",
+    toolResult: "ui/notifications/tool-result",
+    toolCancelled: "ui/notifications/tool-cancelled",
+    hostContextChanged: "ui/notifications/host-context-changed",
+    // Host → view requests.
+    resourceTeardown: "ui/resource-teardown",
+    // Sandbox proxy (a second origin that relays between host and view).
+    sandboxProxyReady: "ui/notifications/sandbox-proxy-ready",
+    sandboxResourceReady: "ui/notifications/sandbox-resource-ready",
+};
+/**
+ * The style variables MCP Apps defines (`McpUiStyleVariableKey`, 2026-01-26). The official App SDK
+ * refuses a host context whose `styles.variables` holds any other name ("Unrecognized key"), so a
+ * host sends exactly these there; Porthole's own names go under `PORTHOLE_STYLES` instead.
+ */
+export const MCP_APPS_STYLE_VARIABLES = [
+    ...["background", "text", "border", "ring"].flatMap((kind) => (kind === "background"
+        ? [
+            "primary",
+            "secondary",
+            "tertiary",
+            "inverse",
+            "ghost",
+            "info",
+            "danger",
+            "success",
+            "warning",
+            "disabled",
+        ]
+        : kind === "text"
+            ? [
+                "primary",
+                "secondary",
+                "tertiary",
+                "inverse",
+                "ghost",
+                "info",
+                "danger",
+                "success",
+                "warning",
+                "disabled",
+            ]
+            : kind === "border"
+                ? [
+                    "primary",
+                    "secondary",
+                    "tertiary",
+                    "inverse",
+                    "ghost",
+                    "info",
+                    "danger",
+                    "success",
+                    "warning",
+                    "disabled",
+                ]
+                : ["primary", "secondary", "inverse", "info", "danger", "success", "warning"]).map((name) => `--color-${kind}-${name}`)),
+    "--font-sans",
+    "--font-mono",
+    ...["normal", "medium", "semibold", "bold"].map((weight) => `--font-weight-${weight}`),
+    ...["xs", "sm", "md", "lg"].map((size) => `--font-text-${size}-size`),
+    ...["xs", "sm", "md", "lg", "xl", "2xl", "3xl"].map((size) => `--font-heading-${size}-size`),
+    ...["xs", "sm", "md", "lg"].map((size) => `--font-text-${size}-line-height`),
+    ...["xs", "sm", "md", "lg", "xl", "2xl", "3xl"].map((size) => `--font-heading-${size}-line-height`),
+    ...["xs", "sm", "md", "lg", "xl", "full"].map((size) => `--border-radius-${size}`),
+    "--border-width-regular",
+    ...["hairline", "sm", "md", "lg"].map((size) => `--shadow-${size}`),
+];
+/**
+ * The host context's own-prefixed field for the theme variables MCP Apps doesn't define (an
+ * accent, a chart palette): `{ variables }`. The shell applies them with the standard ones; a view
+ * that doesn't know the field ignores it (the host context is open to extra fields).
+ */
+export const PORTHOLE_STYLES = "porthole/styles";
+/** The logger name the shell's error reports (`notifications/message`, level `error`) carry. */
+export const SHELL_LOGGER = "porthole";

package/dist/protocol/shell-adapter.d.ts

@@ -0,0 +1,5 @@
+import type { CapabilityName } from "../config/capabilities.ts";
+import type { ProtocolAdapter, ShellConnection } from "./adapter.ts";
+/** What the host offers, from the declared capabilities (MCP Apps `hostCapabilities`). */
+export declare function hostCapabilities(declared: (name: CapabilityName) => boolean): Record<string, object>;
+export declare const shellAdapter: ProtocolAdapter<ShellConnection>;

package/dist/protocol/shell-adapter.js

@@ -0,0 +1,228 @@
+import { JSON_RPC_ERRORS, parseJsonRpc, } from "./jsonrpc.js";
+import { MCP_APPS_METHODS as M, MCP_APPS_PROTOCOL_VERSION } from "./mcp-apps.js";
+/**
+ * The core's adapter: the host side of the MCP Apps subset the shell speaks, which content using
+ * the official App SDK speaks too. Every message is checked before use; every power goes through
+ * the bridge. Content goes as `tool-input-partial` while it is written and `tool-input` once,
+ * after the view has initialized.
+ */
+const LOG_ERRORS = new Set(["error", "critical", "alert", "emergency"]);
+/** Requests that are capability calls, and how their params become the capability's args. */
+const REQUESTS = {
+    [M.message]: {
+        capability: "sendPrompt",
+        args: (params) => ({
+            text: Array.isArray(params.content)
+                ? params.content
+                    .map((part) => {
+                    const block = part;
+                    return block !== null &&
+                        typeof block === "object" &&
+                        block.type === "text" &&
+                        typeof block.text === "string"
+                        ? block.text
+                        : "";
+                })
+                    .join("")
+                : undefined,
+        }),
+    },
+    [M.openLink]: { capability: "openLink", args: (params) => ({ url: params.url }) },
+    [M.downloadFile]: {
+        capability: "downloadFile",
+        args: (params) => ({ contents: params.contents }),
+    },
+    [M.callTool]: {
+        capability: "callTool",
+        args: (params) => ({ name: params.name, arguments: params.arguments }),
+    },
+    [M.readResource]: { capability: "readData", args: (params) => ({ uri: params.uri }) },
+    [M.updateModelContext]: {
+        capability: "setModelContext",
+        args: (params) => ({ content: params.content, structuredContent: params.structuredContent }),
+    },
+};
+/** What a capability's outcome looks like to the view. */
+function answer(capability, outcome) {
+    const flagged = capability === "sendPrompt" || capability === "openLink" || capability === "downloadFile";
+    if (!outcome.ok) {
+        return flagged
+            ? { result: { isError: true } }
+            : { error: { code: -32000, message: `Refused (${outcome.refusal})` } };
+    }
+    if (flagged) {
+        return { result: outcome.value === true ? {} : { isError: true } };
+    }
+    return { result: outcome.value ?? {} };
+}
+/** What the host offers, from the declared capabilities (MCP Apps `hostCapabilities`). */
+export function hostCapabilities(declared) {
+    const offered = {};
+    if (declared("openLink")) {
+        offered.openLinks = {};
+    }
+    if (declared("sendPrompt")) {
+        offered.message = { text: {} };
+    }
+    if (declared("downloadFile")) {
+        offered.downloadFile = {};
+    }
+    if (declared("callTool")) {
+        offered.serverTools = {};
+    }
+    if (declared("readData")) {
+        offered.serverResources = {};
+    }
+    if (declared("setModelContext")) {
+        offered.updateModelContext = { text: {} };
+    }
+    if (declared("reportError")) {
+        offered.logging = {};
+    }
+    return offered;
+}
+export const shellAdapter = {
+    name: "porthole-shell",
+    connect(session) {
+        const { transport, bridge } = session;
+        let initialized = false;
+        let closed = false;
+        let drafted = null;
+        let content = null;
+        let sentWhole = false;
+        let nextId = 1;
+        const pending = new Map();
+        const respond = (id, body) => transport.send({ jsonrpc: "2.0", id, ...body });
+        const notify = (method, params) => transport.send({ jsonrpc: "2.0", method, params });
+        const flush = () => {
+            if (!initialized || closed || content === null || sentWhole) {
+                return;
+            }
+            if (content.partial) {
+                if (drafted !== content.html) {
+                    drafted = content.html;
+                    notify(M.toolInputPartial, { arguments: { html: content.html } });
+                }
+                return;
+            }
+            sentWhole = true;
+            notify(M.toolInput, { arguments: { html: content.html } });
+        };
+        const onRequest = async (request) => {
+            const params = request.params ?? {};
+            if (request.method === M.initialize) {
+                respond(request.id, {
+                    result: {
+                        protocolVersion: MCP_APPS_PROTOCOL_VERSION,
+                        hostInfo: session.hostInfo,
+                        hostCapabilities: hostCapabilities((name) => bridge.declared(name)),
+                        hostContext: session.hostContext(),
+                    },
+                });
+                return;
+            }
+            if (request.method === "ping") {
+                respond(request.id, { result: {} });
+                return;
+            }
+            if (request.method === M.requestDisplayMode) {
+                respond(request.id, { result: { mode: "inline" } });
+                return;
+            }
+            const mapped = REQUESTS[request.method];
+            if (mapped === undefined) {
+                respond(request.id, {
+                    error: {
+                        code: JSON_RPC_ERRORS.methodNotFound,
+                        message: `${request.method} isn't offered here`,
+                    },
+                });
+                return;
+            }
+            const outcome = await bridge.call(mapped.capability, mapped.args(params));
+            if (!closed) {
+                respond(request.id, answer(mapped.capability, outcome));
+            }
+        };
+        const onNotification = (method, params) => {
+            switch (method) {
+                case M.initialized:
+                    if (!initialized) {
+                        initialized = true;
+                        session.emit({ type: "initialized" });
+                        flush();
+                    }
+                    return;
+                case M.sizeChanged:
+                    void bridge.call("resize", { height: params.height, width: params.width });
+                    return;
+                case M.log:
+                    if (LOG_ERRORS.has(String(params.level))) {
+                        const data = params.data;
+                        void bridge.call("reportError", {
+                            message: typeof data === "string" ? data : JSON.stringify(data ?? null).slice(0, 2_000),
+                        });
+                    }
+                    return;
+                case M.requestTeardown:
+                    session.emit({ type: "teardown-requested" });
+                    return;
+                default:
+                    return;
+            }
+        };
+        const stop = transport.listen((raw) => {
+            const message = parseJsonRpc(raw);
+            if (message === null || closed) {
+                return;
+            }
+            if ("method" in message) {
+                if ("id" in message) {
+                    void onRequest(message);
+                }
+                else {
+                    onNotification(message.method, message.params ?? {});
+                }
+                return;
+            }
+            pending.get(message.id)?.(message);
+            pending.delete(message.id);
+        });
+        return {
+            setContent(html, options) {
+                if (sentWhole) {
+                    return;
+                }
+                content = { html, partial: options?.partial === true };
+                flush();
+            },
+            hostContextChanged(context) {
+                if (initialized && !closed) {
+                    notify(M.hostContextChanged, { ...context });
+                }
+            },
+            teardown() {
+                if (!initialized || closed) {
+                    return Promise.resolve();
+                }
+                const id = `teardown-${nextId++}`;
+                return new Promise((resolve) => {
+                    const timer = setTimeout(() => {
+                        pending.delete(id);
+                        resolve();
+                    }, 500);
+                    pending.set(id, () => {
+                        clearTimeout(timer);
+                        resolve();
+                    });
+                    transport.send({ jsonrpc: "2.0", id, method: M.resourceTeardown, params: {} });
+                });
+            },
+            close() {
+                closed = true;
+                stop();
+                pending.clear();
+            },
+        };
+    },
+};

package/dist/react/dialog.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement } from "react";
+import type { ConfirmRequest } from "../bridge/types.ts";
+/**
+ * The default confirmation dialog (P019): drawn by the host's page, outside every frame, as a
+ * modal (the top layer covers the frames, so content can't draw over it or click it). It shows
+ * the call's whole effect (the prompt's full text, the link's full URL), the display's title as
+ * the host named it, Cancel focused, and ignores presses on its accept button for a moment after
+ * it opens (a click meant for the content mustn't land on it). Escape cancels. A host replaces it
+ * by passing its own `confirm`; it styles it through the `porthole-confirm` class and data
+ * attributes.
+ */
+/** How long the accept button ignores presses after the dialog opens. */
+export declare const ARM_DELAY_MS = 500;
+export interface ConfirmDialogProps {
+    /** The call to confirm, or null when nothing is asked. */
+    readonly request: ConfirmRequest | null;
+    readonly onAnswer: (accepted: boolean) => void;
+    readonly className?: string;
+}
+export declare function ConfirmDialog({ request, onAnswer, className }: ConfirmDialogProps): ReactElement;

package/dist/react/dialog.js

@@ -0,0 +1,98 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+/**
+ * The default confirmation dialog (P019): drawn by the host's page, outside every frame, as a
+ * modal (the top layer covers the frames, so content can't draw over it or click it). It shows
+ * the call's whole effect (the prompt's full text, the link's full URL), the display's title as
+ * the host named it, Cancel focused, and ignores presses on its accept button for a moment after
+ * it opens (a click meant for the content mustn't land on it). Escape cancels. A host replaces it
+ * by passing its own `confirm`; it styles it through the `porthole-confirm` class and data
+ * attributes.
+ */
+/** How long the accept button ignores presses after the dialog opens. */
+export const ARM_DELAY_MS = 500;
+const json = (value) => JSON.stringify(value, null, 2) ?? "";
+function words(request) {
+    switch (request.capability) {
+        case "sendPrompt":
+            return { heading: "Send this message?", accept: "Send", detail: request.args.text };
+        case "openLink": {
+            let host = "";
+            try {
+                host = new URL(request.args.url).host;
+            }
+            catch {
+                host = "";
+            }
+            return {
+                heading: "Open this link?",
+                accept: "Open link",
+                detail: request.args.url,
+                ...(host === "" ? {} : { note: `It opens ${host}.` }),
+            };
+        }
+        case "downloadFile":
+            return {
+                heading: "Download this file?",
+                accept: "Download",
+                detail: json(request.args.contents),
+            };
+        case "callTool":
+            return {
+                heading: "Run this tool?",
+                accept: "Run",
+                detail: `${request.args.name}\n${json(request.args.arguments)}`,
+            };
+        case "setModelContext":
+            return { heading: "Share this with the agent?", accept: "Share", detail: json(request.args) };
+        case "readData":
+            return { heading: "Let it read this?", accept: "Allow", detail: request.args.uri };
+        default:
+            return { heading: "Allow this?", accept: "Allow", detail: json(request.args) };
+    }
+}
+const STYLE = `.porthole-confirm{color-scheme:light dark;color:CanvasText;background:Canvas;border:1px solid color-mix(in srgb,CanvasText 18%,transparent);border-radius:12px;padding:20px;width:min(440px,calc(100vw - 32px));font:inherit;box-shadow:0 12px 40px rgb(0 0 0 / .28)}
+.porthole-confirm::backdrop{background:rgb(0 0 0 / .4)}
+.porthole-confirm h2{font-size:1.05em;margin:0 0 4px}
+.porthole-confirm [data-porthole-source],.porthole-confirm [data-porthole-note]{opacity:.72;font-size:.9em;margin:0 0 12px}
+.porthole-confirm [data-porthole-detail]{white-space:pre-wrap;overflow-wrap:anywhere;max-height:40vh;overflow:auto;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,CanvasText 7%,transparent);margin:0 0 12px;font:inherit}
+.porthole-confirm menu{display:flex;justify-content:flex-end;gap:8px;margin:16px 0 0;padding:0}
+.porthole-confirm button{font:inherit;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid color-mix(in srgb,CanvasText 25%,transparent);background:transparent;color:inherit;cursor:pointer}
+.porthole-confirm button[data-porthole-accept]{background:Highlight;background:AccentColor;color:HighlightText;color:AccentColorText;border-color:transparent}`;
+export function ConfirmDialog({ request, onAnswer, className }) {
+    const dialog = useRef(null);
+    const cancel = useRef(null);
+    // The request the accept button is armed for: a new one starts unarmed.
+    const [armedFor, setArmedFor] = useState(null);
+    const armed = request !== null && armedFor === request;
+    const heading = useId();
+    useEffect(() => {
+        const element = dialog.current;
+        if (element === null) {
+            return;
+        }
+        if (request === null) {
+            if (element.open) {
+                element.close();
+            }
+            return;
+        }
+        if (!element.open) {
+            element.showModal();
+        }
+        cancel.current?.focus();
+        const timer = setTimeout(() => setArmedFor(request), ARM_DELAY_MS);
+        return () => clearTimeout(timer);
+    }, [request]);
+    const said = request === null ? null : words(request);
+    return (_jsxs("dialog", { ref: dialog, className: className === undefined ? "porthole-confirm" : `porthole-confirm ${className}`, "aria-labelledby": heading, "data-porthole-confirm": request?.capability ?? "", onCancel: (event) => {
+            event.preventDefault();
+            if (request !== null) {
+                onAnswer(false);
+            }
+        }, children: [_jsx("style", { children: STYLE }), said === null || request === null ? null : (_jsxs(_Fragment, { children: [_jsx("h2", { id: heading, children: said.heading }), _jsx("p", { "data-porthole-source": "", children: `From “${request.display.title}”` }), _jsx("div", { "data-porthole-detail": "", children: said.detail }), said.note === undefined ? null : _jsx("p", { "data-porthole-note": "", children: said.note }), _jsxs("menu", { children: [_jsx("button", { type: "button", ref: cancel, autoFocus: true, "data-porthole-cancel": "", onClick: () => onAnswer(false), children: "Cancel" }), _jsx("button", { type: "button", "data-porthole-accept": "", "data-armed": String(armed), onClick: () => {
+                                    if (armed) {
+                                        onAnswer(true);
+                                    }
+                                }, children: said.accept })] })] }))] }));
+}