@polymorfa/react 0.1.0-dev.20260922094209

package/dist/context.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+import { PolymorfaClient, type PolymorfaClientSnapshot, type PolymorfaPermission } from "@polymorfa/browser";
+import { type Appearance, type AppearanceInput, type Locale } from "@polymorfa/ui";
+export interface PolymorfaReactConfiguration {
+    readonly appearance: Appearance;
+    readonly locale: Locale;
+}
+export interface PolymorfaProviderProps {
+    readonly appearance?: AppearanceInput;
+    readonly locale?: Locale;
+    /**
+     * Your handler's token route, for example `/api/polymorfa/token`. The
+     * provider fetches a client token from it, refreshes it before expiry and
+     * shares it with every component inside.
+     */
+    readonly tokenEndpoint?: string;
+    /** A client you created yourself; takes precedence over `tokenEndpoint`. */
+    readonly client?: PolymorfaClient;
+    readonly children?: ReactNode;
+}
+export declare function PolymorfaProvider({ appearance, locale, tokenEndpoint, client, children, }: PolymorfaProviderProps): import("react").JSX.Element;
+export declare function usePolymorfa(): PolymorfaReactConfiguration;
+/**
+ * The provider's client: token refresh, `can()`, and the browser Messaging
+ * client. Throws outside `<PolymorfaProvider tokenEndpoint>`.
+ */
+export declare function usePolymorfaClient(): PolymorfaClient;
+/** The provider's client, or `undefined` without one. */
+export declare function useOptionalPolymorfaClient(): PolymorfaClient | undefined;
+export interface PolymorfaPermissions {
+    /** `unknown` without a provider client: controls render and the server decides. */
+    readonly status: PolymorfaClientSnapshot["status"] | "unknown";
+    readonly snapshot: PolymorfaClientSnapshot | undefined;
+    /** Whether the grant allows `permission`. True without a provider client. */
+    can(permission: PolymorfaPermission): boolean;
+}
+/**
+ * What the current token allows, for rendering only. The server enforces
+ * every permission again; this never widens access.
+ */
+export declare function usePermissions(): PolymorfaPermissions;
+/**
+ * Whether a control may render. Once a token has been minted without
+ * `permission`, logs one development warning naming the component.
+ */
+export declare function usePermission(component: string, control: string, permission: PolymorfaPermission): boolean;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,eAAe,EAEf,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,MAAM,EACZ,MAAM,eAAe,CAAC;AAGvB,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAMD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,eAAe,CAAC;IACtC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,4EAA4E;IAC5E,QAAQ,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,MAAM,EACN,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,sBAAsB,+BAsBxB;AAgBD,wBAAgB,YAAY,IAAI,2BAA2B,CAQ1D;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAOpD;AAED,yDAAyD;AACzD,wBAAgB,0BAA0B,IAAI,eAAe,GAAG,SAAS,CAExE;AAKD,MAAM,WAAW,oBAAoB;IACnC,mFAAmF;IACnF,QAAQ,CAAC,MAAM,EAAE,uBAAuB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAC/D,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,GAAG,SAAS,CAAC;IACvD,6EAA6E;IAC7E,GAAG,CAAC,UAAU,EAAE,mBAAmB,GAAG,OAAO,CAAC;CAC/C;AAED;;;GAGG;AACH,wBAAgB,cAAc,IAAI,oBAAoB,CAkBrD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,mBAAmB,GAC9B,OAAO,CAST"}

package/dist/context.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useSyncExternalStore, } from "react";
+import { PolymorfaClient, warnMissingPermission, } from "@polymorfa/browser";
+import { createLocale, defineAppearance, } from "@polymorfa/ui";
+import { safeSubscribe, useOwnedController } from "./hooks.js";
+const Context = createContext(undefined);
+const ClientContext = createContext(undefined);
+export function PolymorfaProvider({ appearance, locale, tokenEndpoint, client, children, }) {
+    const value = useMemo(() => ({
+        appearance: defineAppearance(appearance),
+        locale: locale ?? createLocale("en"),
+    }), [appearance, locale]);
+    const owned = useOwnedClient(client === undefined ? tokenEndpoint : undefined);
+    const resolved = client ?? owned;
+    useEffect(() => {
+        resolved?.start();
+    }, [resolved]);
+    return (_jsx(Context.Provider, { value: value, children: _jsx(ClientContext.Provider, { value: resolved, children: children }) }));
+}
+/** One owned client per endpoint, safe under StrictMode. */
+function useOwnedClient(tokenEndpoint) {
+    return useOwnedController(undefined, tokenEndpoint === undefined
+        ? undefined
+        : () => new PolymorfaClient({ tokenEndpoint }));
+}
+// One shared default keeps memoized components stable without a provider.
+let defaultConfiguration;
+export function usePolymorfa() {
+    const value = useContext(Context);
+    if (value !== undefined)
+        return value;
+    defaultConfiguration ??= {
+        appearance: defineAppearance(),
+        locale: createLocale("en"),
+    };
+    return defaultConfiguration;
+}
+/**
+ * The provider's client: token refresh, `can()`, and the browser Messaging
+ * client. Throws outside `<PolymorfaProvider tokenEndpoint>`.
+ */
+export function usePolymorfaClient() {
+    const client = useContext(ClientContext);
+    if (client === undefined)
+        throw new Error('usePolymorfaClient() needs <PolymorfaProvider tokenEndpoint="/api/polymorfa/token">.');
+    return client;
+}
+/** The provider's client, or `undefined` without one. */
+export function useOptionalPolymorfaClient() {
+    return useContext(ClientContext);
+}
+const NO_SUBSCRIPTION = () => () => undefined;
+const NO_SNAPSHOT = () => undefined;
+/**
+ * What the current token allows, for rendering only. The server enforces
+ * every permission again; this never widens access.
+ */
+export function usePermissions() {
+    const client = useContext(ClientContext);
+    const snapshot = useSyncExternalStore(client === undefined ? NO_SUBSCRIPTION : safeSubscribe(client), client?.getSnapshot ?? NO_SNAPSHOT, client?.getSnapshot ?? NO_SNAPSHOT);
+    return useMemo(() => ({
+        status: snapshot?.status ?? "unknown",
+        snapshot,
+        can: (permission) => snapshot === undefined
+            ? true
+            : snapshot.grant?.allow.includes(permission) === true,
+    }), [snapshot]);
+}
+/**
+ * Whether a control may render. Once a token has been minted without
+ * `permission`, logs one development warning naming the component.
+ */
+export function usePermission(component, control, permission) {
+    const permissions = usePermissions();
+    const allowed = permissions.can(permission);
+    const minted = permissions.snapshot?.grant !== undefined;
+    useEffect(() => {
+        if (minted && !allowed)
+            warnMissingPermission(component, control, permission);
+    }, [minted, allowed, component, control, permission]);
+    return allowed;
+}

package/dist/dropin.d.ts

@@ -0,0 +1,100 @@
+import { InboxController, type ConnectWhatsAppOptions, type ConnectWhatsAppResult, type InboxContact, type InboxConversation, type InboxDataSource, type TemplateDraft } from "@polymorfa/browser";
+import { type SlotClassNames } from "@polymorfa/ui";
+import { type ReactNode } from "react";
+import { type ComposeBoxProps, type Slots } from "./components.js";
+/** Initials avatar, or the image when `src` is set. */
+export declare function Avatar({ id, name, src, size, slots, }: {
+    readonly id: string;
+    readonly name: string;
+    readonly src?: string;
+    readonly size?: "s" | "l";
+    readonly slots: Slots;
+}): import("react").JSX.Element;
+export interface ConversationListProps {
+    readonly controller: InboxController;
+    readonly onSelect?: (conversation: InboxConversation) => void;
+    /** Heading above the list. Defaults to the locale's `inbox.title`. */
+    readonly title?: ReactNode;
+    /** Show the search field. Defaults to `true`. */
+    readonly search?: boolean;
+    readonly className?: string;
+    readonly classNames?: SlotClassNames;
+}
+/** The inbox's conversation list, usable on its own. */
+export declare function ConversationList({ controller, onSelect, title, search, className, classNames, }: ConversationListProps): import("react").JSX.Element;
+export interface ContactPanelProps {
+    readonly conversation: InboxConversation;
+    /** Loads the contact. Defaults to the inbox source's `contact()`. */
+    readonly load?: (conversation: InboxConversation, signal: AbortSignal) => Promise<InboxContact | undefined>;
+    readonly onClose?: () => void;
+    /** Extra content under the details, such as your CRM fields. */
+    readonly children?: ReactNode;
+    /** Actions under the name, for example a `<CallButton/>`. */
+    readonly actions?: ReactNode;
+    readonly className?: string;
+    readonly classNames?: SlotClassNames;
+}
+/** Contact details for a conversation. */
+export declare function ContactPanel({ conversation, load, onClose, children, actions, className, classNames, }: ContactPanelProps): import("react").JSX.Element;
+export interface InboxProps {
+    /**
+     * Where conversations come from. Defaults to your handler's history and
+     * events routes, through the provider's client.
+     */
+    readonly source?: InboxDataSource;
+    /** Supply your own controller to drive the inbox from outside. */
+    readonly controller?: InboxController;
+    /** Open this conversation first. */
+    readonly defaultConversationId?: string;
+    readonly onSelect?: (conversation: InboxConversation | undefined) => void;
+    /** Show the contact panel toggle. Defaults to `true`. */
+    readonly contactPanel?: boolean;
+    /** Extra content inside the contact panel. */
+    readonly renderContact?: (conversation: InboxConversation) => ReactNode;
+    /**
+     * Actions in the thread header. Defaults to a `<CallButton/>` when the
+     * grant allows `voip_place` and the conversation has a phone number.
+     */
+    readonly renderActions?: (conversation: InboxConversation) => ReactNode;
+    readonly title?: ReactNode;
+    readonly composerProps?: Omit<ComposeBoxProps, "controller" | "createController" | "conversation">;
+    readonly className?: string;
+    readonly classNames?: SlotClassNames;
+}
+/**
+ * A complete inbox: conversation list, chat and contact panel. Controls the
+ * token does not allow are hidden, with one development warning each.
+ */
+export declare function Inbox({ source, controller, defaultConversationId, onSelect, contactPanel, renderContact, renderActions, title, composerProps, className, classNames, }: InboxProps): import("react").JSX.Element;
+export interface ConnectWhatsAppButtonProps extends Pick<ConnectWhatsAppOptions, "target" | "open"> {
+    readonly children?: ReactNode;
+    readonly onConnect?: (result: ConnectWhatsAppResult) => void;
+    readonly onError?: (error: unknown) => void;
+    readonly className?: string;
+    readonly classNames?: SlotClassNames;
+}
+/**
+ * Creates a QuickLink through your handler and opens Polymorfa's hosted
+ * pairing page. The pairing UI is never embedded.
+ */
+export declare function ConnectWhatsAppButton({ target, open, children, onConnect, onError, className, classNames, }: ConnectWhatsAppButtonProps): import("react").JSX.Element | null;
+export interface SessionStatusProps {
+    /** Show a Retry button after a failure. Defaults to `true`. */
+    readonly retry?: boolean;
+    readonly className?: string;
+    readonly classNames?: SlotClassNames;
+}
+/** The provider's connection state as a badge, with a retry prompt. */
+export declare function SessionStatus({ retry, className, classNames, }: SessionStatusProps): import("react").JSX.Element;
+export interface TemplateManagerProps {
+    /** Starting draft for "New template". */
+    readonly newDraft?: TemplateDraft;
+    readonly className?: string;
+    readonly classNames?: SlotClassNames;
+}
+/**
+ * Lists your project's templates and edits one with `<TemplateBuilder/>`,
+ * through your handler's `templates` route.
+ */
+export declare function TemplateManager({ newDraft, className, classNames, }: TemplateManagerProps): import("react").JSX.Element | null;
+//# sourceMappingURL=dropin.d.ts.map

package/dist/dropin.d.ts.map

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

package/dist/dropin.js

@@ -0,0 +1,298 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { InboxController, MessageComposerController, TemplateBuilderController, connectWhatsApp, createConversationComposerActions, createHandlerInboxSource, createSameOriginTemplateBuilderTransport, } from "@polymorfa/browser";
+import { formatDayLabel, formatMessageTime, } from "@polymorfa/ui";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { ComposeBox, Icon, MessageList, TemplateBuilder, text, useShell, useSlots, } from "./components.js";
+import { useOptionalPolymorfaClient, usePermission, usePermissions, usePolymorfa, usePolymorfaClient, } from "./context.js";
+import { useController, useOwnedController } from "./hooks.js";
+import { CallButton } from "./call-button.js";
+// ── Shared pieces ─────────────────────────────────────────────────────
+function initials(name) {
+    const letters = name
+        .replace(/[^\p{L}\p{N}\s]/gu, " ")
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((word) => Array.from(word)[0] ?? "");
+    const first = letters[0] ?? "";
+    const last = letters.length > 1 ? (letters[letters.length - 1] ?? "") : "";
+    return (first + last).toUpperCase() || "#";
+}
+function hue(id) {
+    let hash = 0;
+    for (const character of id)
+        hash = Math.imul(hash ^ character.charCodeAt(0), 2654435761);
+    return Math.round(Math.abs(hash % 360) * 137.508) % 360;
+}
+function displayName(conversation) {
+    return conversation.name ?? conversation.phoneNumber ?? conversation.id;
+}
+/** Initials avatar, or the image when `src` is set. */
+export function Avatar({ id, name, src, size, slots, }) {
+    const slot = slots("avatar", size === undefined ? "pmfa-avatar" : `pmfa-avatar pmfa-avatar-${size}`);
+    const [failed, setFailed] = useState(false);
+    return (_jsx("span", { ...slot, style: {
+            ...slot.style,
+            "--pmfa-avatar-hue": String(hue(id)),
+        }, "aria-hidden": "true", children: src !== undefined && !failed ? (_jsx("img", { src: src, alt: "", onError: () => setFailed(true) })) : (initials(name)) }));
+}
+function conversationTime(configuration, time, now) {
+    const today = new Date(now).toDateString() === new Date(time).toDateString();
+    if (today)
+        return formatMessageTime(time, configuration.locale.code) ?? "";
+    return formatDayLabel(time, configuration.locale.code, {
+        today: text(configuration, "chat.today"),
+        yesterday: text(configuration, "chat.yesterday"),
+    }, now);
+}
+/** The inbox's conversation list, usable on its own. */
+export function ConversationList({ controller, onSelect, title, search = true, className, classNames, }) {
+    const snapshot = useController(controller);
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const list = slots("conversationList", "pmfa-inbox-list");
+    const [query, setQuery] = useState("");
+    const headingId = useId();
+    const normalized = query.trim().toLowerCase();
+    const visible = useMemo(() => normalized === ""
+        ? snapshot.conversations
+        : snapshot.conversations.filter((conversation) => [
+            conversation.name,
+            conversation.phoneNumber,
+            conversation.lastMessage?.text,
+        ].some((value) => value?.toLowerCase().includes(normalized))), [snapshot.conversations, normalized]);
+    const now = Date.now();
+    return (_jsxs("section", { ...list, className: [list.className, className].filter(Boolean).join(" "), "aria-labelledby": headingId, "data-pmfa": "conversation-list", children: [_jsxs("div", { className: "pmfa-inbox-head", children: [_jsx("h2", { className: "pmfa-inbox-title", id: headingId, children: title ?? text(configuration, "inbox.title") }), search && (_jsxs("div", { ...slots("conversationSearch", "pmfa-search"), children: [_jsx(Icon, { name: "search" }), _jsx("input", { ...slots("input", "pmfa-input"), type: "search", value: query, placeholder: text(configuration, "inbox.search"), "aria-label": text(configuration, "inbox.search"), onChange: (event) => setQuery(event.currentTarget.value) })] }))] }), snapshot.status === "loading" || snapshot.status === "idle" ? (_jsxs("div", { className: "pmfa-skeleton", "aria-busy": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {}), _jsx("span", { className: "pmfa-sr", children: text(configuration, "status.loading") })] })) : snapshot.status === "error" ? (_jsxs("div", { className: "pmfa-inbox-state", role: "alert", children: [_jsx("p", { className: "pmfa-error", children: text(configuration, "inbox.loadError") }), _jsx("button", { type: "button", ...slots("button", "pmfa-btn"), onClick: () => void controller.load(), children: text(configuration, "common.retry") })] })) : visible.length === 0 ? (_jsxs("div", { ...slots("empty", "pmfa-inbox-state"), children: [_jsx(Icon, { name: normalized === "" ? "inbox" : "search" }), text(configuration, normalized === "" ? "inbox.empty" : "inbox.noMatches")] })) : (_jsxs("ul", { className: "pmfa-convs", children: [visible.map((conversation) => {
+                        const name = displayName(conversation);
+                        const selected = conversation.id === snapshot.selectedId;
+                        const last = conversation.lastMessage;
+                        const unread = conversation.unreadCount;
+                        return (_jsx("li", { children: _jsxs("button", { type: "button", ...slots("conversationItem", "pmfa-conv"), "aria-current": selected ? "true" : undefined, ...(unread > 0 ? { "data-unread": "" } : {}), onClick: () => {
+                                    controller.select(conversation.id);
+                                    onSelect?.(conversation);
+                                }, children: [_jsx(Avatar, { id: conversation.id, name: name, ...(conversation.avatarUrl === undefined
+                                            ? {}
+                                            : { src: conversation.avatarUrl }), slots: slots }), _jsx("span", { className: "pmfa-conv-name", children: name }), _jsx("span", { className: "pmfa-conv-time", children: conversation.lastActivity > 0
+                                            ? conversationTime(configuration, conversation.lastActivity, now)
+                                            : "" }), _jsx("span", { className: "pmfa-conv-preview", children: last === undefined
+                                            ? (conversation.phoneNumber ?? "")
+                                            : `${last.direction === "outbound" ? text(configuration, "inbox.you") : ""}${last.text}` }), unread > 0 && (_jsxs("span", { ...slots("unreadBadge", "pmfa-badge"), children: [_jsx("span", { "aria-hidden": "true", children: unread > 99 ? "99+" : unread }), _jsx("span", { className: "pmfa-sr", children: text(configuration, "inbox.unread", {
+                                                    count: String(unread),
+                                                }) })] }))] }) }, conversation.id));
+                    }), snapshot.hasMore && normalized === "" && (_jsx("li", { className: "pmfa-loadmore", style: { alignItems: "center", padding: 8 }, children: _jsx("button", { type: "button", ...slots("loadMore", "pmfa-btn"), disabled: snapshot.status === "loading_more", onClick: () => void controller.loadMore(), children: text(configuration, "inbox.loadMore") }) }))] }))] }));
+}
+/** Contact details for a conversation. */
+export function ContactPanel({ conversation, load, onClose, children, actions, className, classNames, }) {
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const panel = slots("contactPanel", "pmfa-contact");
+    const [contact, setContact] = useState();
+    const headingId = useId();
+    useEffect(() => {
+        setContact(undefined);
+        if (load === undefined)
+            return;
+        const abort = new AbortController();
+        load(conversation, abort.signal).then((value) => {
+            if (!abort.signal.aborted)
+                setContact(value);
+        }, () => undefined);
+        return () => abort.abort();
+    }, [conversation.id, load]);
+    const name = contact?.name ?? displayName(conversation);
+    const phone = contact?.phoneNumber ?? conversation.phoneNumber;
+    const rows = [];
+    if (phone !== undefined)
+        rows.push({ label: text(configuration, "inbox.phone"), value: phone });
+    if (contact?.email !== undefined)
+        rows.push({
+            label: text(configuration, "inbox.email"),
+            value: contact.email,
+        });
+    if (contact?.about !== undefined)
+        rows.push({
+            label: text(configuration, "inbox.about"),
+            value: contact.about,
+        });
+    for (const field of contact?.fields ?? [])
+        rows.push(field);
+    const avatar = contact?.avatarUrl ?? conversation.avatarUrl;
+    return (_jsxs("aside", { ...panel, className: [panel.className, className].filter(Boolean).join(" "), "aria-labelledby": headingId, "data-pmfa": "contact-panel", children: [_jsxs("div", { className: "pmfa-contact-head", children: [_jsx("h3", { id: headingId, children: text(configuration, "inbox.contact") }), onClose !== undefined && (_jsx("button", { type: "button", ...slots("button", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon"), "aria-label": text(configuration, "inbox.hideContact"), onClick: onClose, children: _jsx(Icon, { name: "close" }) }))] }), _jsxs("div", { className: "pmfa-contact-card", children: [_jsx(Avatar, { id: conversation.id, name: name, ...(avatar === undefined ? {} : { src: avatar }), size: "l", slots: slots }), _jsx("p", { className: "pmfa-contact-name", children: name }), phone !== undefined && phone !== name && (_jsx("span", { className: "pmfa-contact-phone", children: phone })), actions !== undefined && (_jsx("div", { className: "pmfa-contact-actions", children: actions }))] }), rows.length > 0 && (_jsx("dl", { className: "pmfa-contact-fields", children: rows.map((row, index) => (_jsxs("div", { children: [_jsx("dt", { children: row.label }), _jsx("dd", { children: row.value })] }, `${row.label}-${index}`))) })), children] }));
+}
+// ── Thread ────────────────────────────────────────────────────────────
+const noUpload = async () => {
+    throw new Error("Attachments need an upload adapter.");
+};
+function Thread({ inbox, conversation, slots, onBack, contactOpen, onToggleContact, showContactToggle, actions, composerProps, }) {
+    const configuration = usePolymorfa();
+    const controller = inbox.conversation(conversation);
+    const canSend = usePermission("Inbox", "composer", "send_message");
+    const ownedComposer = useOwnedController(undefined, canSend
+        ? () => new MessageComposerController(createConversationComposerActions(controller, noUpload))
+        : undefined);
+    // A revoked permission hides the composer even if one was created.
+    const composer = canSend ? ownedComposer : undefined;
+    const threadRef = useRef(null);
+    const reply = useCallback((message) => {
+        composer?.setReplyTo(message.id);
+        threadRef.current?.querySelector("textarea")?.focus();
+    }, [composer]);
+    const name = displayName(conversation);
+    const sub = conversation.phoneNumber !== undefined && conversation.phoneNumber !== name
+        ? conversation.phoneNumber
+        : undefined;
+    return (_jsxs("section", { ...slots("thread", "pmfa-thread"), ref: threadRef, "aria-label": name, "data-pmfa": "thread", children: [_jsxs("header", { ...slots("threadHeader", "pmfa-thread-head"), children: [_jsx("button", { type: "button", ...slots("backButton", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon pmfa-back"), "aria-label": text(configuration, "inbox.back"), onClick: onBack, children: _jsx(Icon, { name: "back" }) }), _jsx(Avatar, { id: conversation.id, name: name, ...(conversation.avatarUrl === undefined
+                            ? {}
+                            : { src: conversation.avatarUrl }), size: "s", slots: slots }), _jsxs("div", { className: "pmfa-thread-who", children: [_jsx("span", { className: "pmfa-thread-name", children: name }), sub !== undefined && _jsx("span", { className: "pmfa-thread-sub", children: sub })] }), _jsxs("div", { className: "pmfa-thread-actions", children: [actions, showContactToggle && onToggleContact !== undefined && (_jsx("button", { type: "button", ...slots("button", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon"), "aria-label": text(configuration, contactOpen ? "inbox.hideContact" : "inbox.showContact"), title: text(configuration, "inbox.contact"), "aria-expanded": contactOpen, onClick: onToggleContact, children: _jsx(Icon, { name: "info" }) }))] })] }), _jsx(MessageList, { controller: controller, ...(composer === undefined ? {} : { onReply: reply }) }), _jsx("div", { className: "pmfa-thread-foot", children: composer !== undefined ? (_jsx(ComposeBox, { attachments: false, voiceNotes: false, ...composerProps, controller: composer, conversation: controller })) : (_jsx("p", { className: "pmfa-readonly", children: text(configuration, "inbox.readOnly") })) })] }));
+}
+/**
+ * A complete inbox: conversation list, chat and contact panel. Controls the
+ * token does not allow are hidden, with one development warning each.
+ */
+export function Inbox({ source, controller, defaultConversationId, onSelect, contactPanel = true, renderContact, renderActions, title, composerProps, className, classNames, }) {
+    const client = useOptionalPolymorfaClient();
+    const permissions = usePermissions();
+    if (controller === undefined && source === undefined && client === undefined)
+        throw new Error('<Inbox/> needs <PolymorfaProvider tokenEndpoint="/api/polymorfa/token"> or a source.');
+    const inbox = useOwnedController(controller, () => {
+        const created = new InboxController(source ?? createHandlerInboxSource(client));
+        if (defaultConversationId !== undefined)
+            created.select(defaultConversationId);
+        return created;
+    });
+    const canRead = usePermission("Inbox", "conversations", "read_messages");
+    const ready = permissions.status === "unknown" ||
+        permissions.snapshot?.grant !== undefined;
+    useEffect(() => {
+        if (!ready || !canRead)
+            return;
+        const status = inbox.getSnapshot().status;
+        if (status === "idle")
+            void inbox.load();
+    }, [inbox, ready, canRead]);
+    const snapshot = useController(inbox);
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "inbox", "pmfa-inbox", className);
+    const contactAllowed = usePermission("Inbox", "contact panel", "read_contact");
+    const canContact = contactPanel && contactAllowed;
+    const canCall = permissions.can("voip_place");
+    const [contactOpen, setContactOpen] = useState(false);
+    const selected = snapshot.conversations.find((conversation) => conversation.id === snapshot.selectedId);
+    const latestSelect = useRef(onSelect);
+    latestSelect.current = onSelect;
+    const loadContact = useMemo(() => inbox.source.contact === undefined
+        ? undefined
+        : (conversation, signal) => inbox.source.contact(conversation, signal), [inbox]);
+    const back = useCallback(() => {
+        inbox.select(undefined);
+        setContactOpen(false);
+        latestSelect.current?.(undefined);
+    }, [inbox]);
+    if (!canRead && permissions.snapshot?.grant !== undefined)
+        return (_jsx("div", { ...root, "data-pmfa": "inbox", "data-view": "list", children: _jsxs("div", { className: "pmfa-inbox-state", style: { gridColumn: "1 / -1" }, children: [_jsx(Icon, { name: "inbox" }), text(configuration, "inbox.empty")] }) }));
+    const actions = selected === undefined ? null : renderActions !== undefined ? (renderActions(selected)) : canCall && selected.phoneNumber !== undefined ? (_jsx(CallButton, { to: selected.phoneNumber, variant: "icon" })) : null;
+    const showPanel = canContact && contactOpen && selected !== undefined;
+    return (_jsxs("div", { ...root, "data-pmfa": "inbox", "data-view": selected === undefined ? "list" : "thread", ...(showPanel ? { "data-contact-open": "" } : {}), children: [_jsx(ConversationList, { controller: inbox, ...(title === undefined ? {} : { title }), ...(classNames === undefined ? {} : { classNames }), onSelect: (conversation) => latestSelect.current?.(conversation) }), selected === undefined ? (_jsx("section", { ...slots("thread", "pmfa-thread"), "data-pmfa": "thread", children: _jsxs("div", { className: "pmfa-inbox-state", children: [_jsx(Icon, { name: "inbox" }), text(configuration, "inbox.select")] }) })) : (_jsx(Thread, { inbox: inbox, conversation: selected, slots: slots, onBack: back, contactOpen: showPanel, onToggleContact: canContact ? () => setContactOpen((open) => !open) : undefined, showContactToggle: canContact, actions: actions, composerProps: composerProps }, selected.id)), showPanel && (_jsx(ContactPanel, { conversation: selected, ...(loadContact === undefined ? {} : { load: loadContact }), onClose: () => setContactOpen(false), ...(classNames === undefined ? {} : { classNames }), children: renderContact?.(selected) }))] }));
+}
+/**
+ * Creates a QuickLink through your handler and opens Polymorfa's hosted
+ * pairing page. The pairing UI is never embedded.
+ */
+export function ConnectWhatsAppButton({ target = "redirect", open, children, onConnect, onError, className, classNames, }) {
+    const client = usePolymorfaClient();
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "connectButton", "pmfa-btn pmfa-btn-primary pmfa-connect", className);
+    const allowed = usePermission("ConnectWhatsAppButton", "button", "connect_whatsapp");
+    const [busy, setBusy] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const errorId = useId();
+    if (!allowed)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", ...root, "data-pmfa": "connect-whatsapp", "aria-busy": busy ? "true" : undefined, "aria-describedby": failed ? errorId : undefined, disabled: busy, onClick: () => {
+                    setBusy(true);
+                    setFailed(false);
+                    connectWhatsApp(client, {
+                        target,
+                        ...(open === undefined ? {} : { open }),
+                    }).then((result) => {
+                        setBusy(false);
+                        onConnect?.(result);
+                    }, (error) => {
+                        setBusy(false);
+                        setFailed(true);
+                        onError?.(error);
+                    });
+                }, children: [_jsx(Icon, { name: "link" }), busy
+                        ? text(configuration, "connect.opening")
+                        : (children ?? text(configuration, "connect.button"))] }), failed && (_jsx("span", { id: errorId, role: "alert", ...slots("error", "pmfa pmfa-error"), style: { display: "block", marginTop: 6 }, children: text(configuration, "connect.failed") }))] }));
+}
+/** The provider's connection state as a badge, with a retry prompt. */
+export function SessionStatus({ retry = true, className, classNames, }) {
+    const client = usePolymorfaClient();
+    const { snapshot } = usePermissions();
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "sessionStatus", "pmfa-session", className);
+    const status = snapshot?.status ?? "idle";
+    const label = text(configuration, `status.${status}`);
+    const failed = status === "error" || status === "unauthenticated" || status === "retrying";
+    return (_jsxs("span", { ...root, role: "status", "data-pmfa": "session-status", "data-status": status, "aria-label": text(configuration, "status.label", { status: label }), children: [_jsx("span", { className: "pmfa-session-dot", "aria-hidden": "true" }), _jsx("span", { "aria-hidden": "true", children: label }), retry && failed && (_jsx("button", { type: "button", ...slots("button", "pmfa-btn pmfa-btn-ghost"), onClick: () => void client.refresh().catch(() => undefined), children: text(configuration, "common.retry") }))] }));
+}
+const DEFAULT_DRAFT = {
+    name: "new_template",
+    definition: {
+        version: 1,
+        kind: "standard",
+        category: "UTILITY",
+        language: "en_US",
+        body: "Hello {{name}}",
+        variables: [{ name: "name", type: "text", example: "Ada" }],
+    },
+};
+/**
+ * Lists your project's templates and edits one with `<TemplateBuilder/>`,
+ * through your handler's `templates` route.
+ */
+export function TemplateManager({ newDraft = DEFAULT_DRAFT, className, classNames, }) {
+    const client = usePolymorfaClient();
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "templateManager", "pmfa-tm", className);
+    const allowed = usePermission("TemplateManager", "templates", "manage_templates");
+    const transport = useMemo(() => createSameOriginTemplateBuilderTransport({
+        path: client.url("templates"),
+        fetch: client.fetch,
+    }), [client]);
+    const [templates, setTemplates] = useState();
+    const [failed, setFailed] = useState(false);
+    const [editing, setEditing] = useState();
+    const reload = useCallback(() => {
+        const abort = new AbortController();
+        setFailed(false);
+        transport.list(abort.signal).then(setTemplates, () => setFailed(true));
+        return () => abort.abort();
+    }, [transport]);
+    useEffect(() => {
+        if (allowed && editing === undefined)
+            return reload();
+        return undefined;
+    }, [allowed, editing, reload]);
+    if (!allowed)
+        return null;
+    if (editing !== undefined)
+        return (_jsxs("div", { ...root, "data-pmfa": "template-manager", children: [_jsx("div", { className: "pmfa-tm-head", children: _jsxs("button", { type: "button", ...slots("backButton", "pmfa-btn pmfa-btn-ghost"), onClick: () => setEditing(undefined), children: [_jsx(Icon, { name: "back" }), text(configuration, "templates.back")] }) }), _jsx(TemplateEditor, { transport: transport, ...(editing.id === undefined ? {} : { templateId: editing.id }), draft: newDraft, ...(classNames === undefined ? {} : { classNames }) }, editing.key)] }));
+    return (_jsxs("div", { ...root, "data-pmfa": "template-manager", children: [_jsxs("div", { className: "pmfa-tm-head", children: [_jsx("h2", { children: text(configuration, "templates.list") }), _jsxs("button", { type: "button", ...slots("primaryButton", "pmfa-btn pmfa-btn-primary"), onClick: () => setEditing({ key: Date.now() }), children: [_jsx(Icon, { name: "plus" }), text(configuration, "templates.new")] })] }), failed ? (_jsxs("div", { className: "pmfa-inbox-state", role: "alert", children: [_jsx("p", { className: "pmfa-error", children: text(configuration, "templates.loadError") }), _jsx("button", { type: "button", ...slots("button", "pmfa-btn"), onClick: reload, children: text(configuration, "common.retry") })] })) : templates === undefined ? (_jsxs("div", { className: "pmfa-skeleton", "aria-busy": "true", children: [_jsx("span", {}), _jsx("span", {})] })) : templates.length === 0 ? (_jsx("div", { ...slots("empty", "pmfa-inbox-state"), children: text(configuration, "templates.empty") })) : (_jsx("ul", { ...slots("templateList", "pmfa-tm-list"), children: templates.map((template) => (_jsx("li", { children: _jsxs("button", { type: "button", ...slots("templateItem", "pmfa-tm-item"), onClick: () => setEditing({ id: template.id, key: Date.now() }), children: [_jsx("span", { className: "pmfa-tm-name", children: template.name }), _jsx("span", { className: "pmfa-tm-body", children: template.definition.body }), _jsxs("span", { className: "pmfa-tm-meta", children: [_jsx("span", { className: "pmfa-tag", "data-status": template.status, children: template.status }), _jsx("span", { className: "pmfa-tag", children: template.category }), _jsx("span", { className: "pmfa-tag", children: template.language })] })] }) }, template.id))) }))] }));
+}
+function TemplateEditor({ transport, templateId, draft, classNames, }) {
+    const controller = useOwnedController(undefined, () => {
+        const created = new TemplateBuilderController(transport);
+        if (templateId === undefined)
+            created.create(draft);
+        else
+            void created.load(templateId);
+        return created;
+    });
+    return (_jsx(TemplateBuilder, { controller: controller, ...(classNames === undefined ? {} : { classNames }) }));
+}

package/dist/hooks.d.ts

@@ -0,0 +1,30 @@
+export interface ReactController<TSnapshot> {
+    getSnapshot(): TSnapshot;
+    subscribe(listener: () => void): () => void;
+    dispose(): void;
+}
+type Subscribable = {
+    subscribe(listener: () => void): () => void;
+};
+/**
+ * `controller.subscribe`, except that a disposed controller yields a no-op
+ * subscription. Under StrictMode an owned controller can be disposed and
+ * replaced while a child is still subscribing to it; the child re-renders
+ * with the replacement right after.
+ * @internal
+ */
+export declare function safeSubscribe(controller: Subscribable): (listener: () => void) => () => void;
+export declare function useController<TSnapshot>(controller: ReactController<TSnapshot>): TSnapshot;
+/**
+ * The passed `controller`, or one made by `create` that this component owns
+ * and disposes. Safe under StrictMode and `<Activity>`: when an effect
+ * cleanup disposes the owned controller and the effect runs again, a fresh
+ * controller replaces it and the component re-renders with it.
+ * @internal
+ */
+export declare function useOwnedController<T extends {
+    dispose(): void;
+}>(controller: T | undefined, create: (() => T) | undefined): T | undefined;
+export declare function useResolvedController<TSnapshot, TController extends ReactController<TSnapshot>>(controller: TController | undefined, createController: (() => TController) | undefined): TController;
+export {};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe,CAAC,SAAS;IACxC,WAAW,IAAI,SAAS,CAAC;IACzB,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5C,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,KAAK,YAAY,GAAG;IAAE,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAA;CAAE,CAAC;AAMpE;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,UAAU,EAAE,YAAY,GACvB,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAetC;AAED,wBAAgB,aAAa,CAAC,SAAS,EACrC,UAAU,EAAE,eAAe,CAAC,SAAS,CAAC,GACrC,SAAS,CAMX;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS;IAAE,OAAO,IAAI,IAAI,CAAA;CAAE,EAC9D,UAAU,EAAE,CAAC,GAAG,SAAS,EACzB,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,SAAS,GAC5B,CAAC,GAAG,SAAS,CAwBf;AAED,wBAAgB,qBAAqB,CACnC,SAAS,EACT,WAAW,SAAS,eAAe,CAAC,SAAS,CAAC,EAE9C,UAAU,EAAE,WAAW,GAAG,SAAS,EACnC,gBAAgB,EAAE,CAAC,MAAM,WAAW,CAAC,GAAG,SAAS,GAChD,WAAW,CAMb"}