@polymorfa/react 0.1.0-dev.20260922094209

package/LICENSE

@@ -0,0 +1,5 @@
+MIT License
+
+Copyright (c) 2026 Polymorfa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.

package/README.md

@@ -0,0 +1,303 @@
+# @polymorfa/react
+
+React bindings for the framework-neutral controllers in `@polymorfa/browser`.
+
+## Drop-in components
+
+One provider, one server route, one component:
+
+```tsx
+"use client";
+import { Inbox, PolymorfaProvider } from "@polymorfa/react";
+
+<PolymorfaProvider tokenEndpoint="/api/polymorfa/token">
+  <Inbox />
+</PolymorfaProvider>;
+```
+
+With `tokenEndpoint`, the provider POSTs to your `createPolymorfaHandler`
+route, refreshes the token 60 s before it expires (80 % of the lifetime for
+short tokens), and retries failures with exponential backoff and jitter
+(1 s up to 30 s). A `401` or `403` stops retries until `refresh()`.
+`usePolymorfaClient()` returns the shared client; `usePermissions()` reports
+the grant for rendering only. `appearance` and `locale` work as before.
+
+| Component                                | Needs              | Notes                                                                                                                   |
+| ---------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| `<Inbox/>`                               | `read_messages`    | List, chat and contact panel. Composer needs `send_message`, contact panel `read_contact`, the call button `voip_place` |
+| `<ConversationList/>`, `<ContactPanel/>` |                    | Inbox parts, usable alone                                                                                               |
+| `<ConnectWhatsAppButton/>`               | `connect_whatsapp` | Opens Polymorfa's hosted QuickLink page; never embeds it                                                                |
+| `<SessionStatus/>`                       |                    | Connection badge with a Retry button                                                                                    |
+| `<CallButton to/>`                       | `voip_place`       | Places a call with the browser Calls client and shows `CallSurface`                                                     |
+| `<TemplateManager/>`                     | `manage_templates` | Template list plus `<TemplateBuilder/>`                                                                                 |
+
+When a permission is missing, the control is hidden and development builds
+log one warning, for example
+`<Inbox/>: composer hidden; the token lacks "send_message". Add it to allow in mint().`
+Production builds log nothing.
+
+`<Inbox source={...}/>` accepts any `InboxDataSource`. The default reads your
+handler's `history` and `events` routes and sends with the client token. For
+a local cache, pass `createStoreInboxSource(store, { backend })` from
+`@polymorfa/store`. Every part takes `className` and `classNames` for its
+slots and follows `appearance`, including `unstyled`.
+
+`<CampaignComposer/>` is not included: campaign creation needs a server
+credential, so it belongs behind a handler route that does not exist yet.
+
+```tsx
+import { MessageList, PolymorfaProvider } from "@polymorfa/react";
+
+<PolymorfaProvider appearance={{ theme: "dark" }}>
+  <MessageList controller={conversationController} />
+</PolymorfaProvider>;
+```
+
+`MessageList`, `ComposeBox`, `ChatDrawer`, `TemplateBuilder`, and
+`CallSurface` subscribe with `useSyncExternalStore`. Controllers may be passed
+directly or created through a component factory; only factory-created
+controllers are disposed by the binding. `useController` and
+`useResolvedController` support custom rendering without forking state logic.
+
+The chat and template components add the shared `@polymorfa/ui` stylesheet
+to the document on mount and use `pmfa-*` class names, so a host stylesheet
+can adjust them. Visible text comes from the provider's locale.
+
+## Chat
+
+`ChatDrawer` shows a conversation with its composer. Pass
+`composerController` (or `createComposerController`) to render the built-in
+`ComposeBox`; each message then offers Reply, which sets the composer's
+reply target. Use `createConversationComposerActions()` from
+`@polymorfa/browser` so the composer sends through the same conversation the
+drawer shows.
+
+```tsx
+import {
+  ConversationController,
+  MessageComposerController,
+  createConversationComposerActions,
+} from "@polymorfa/browser";
+import { ChatDrawer } from "@polymorfa/react";
+
+const conversation = new ConversationController(source);
+const composer = new MessageComposerController(
+  createConversationComposerActions(conversation, uploadFile),
+);
+
+<ChatDrawer
+  open={open}
+  onClose={() => setOpen(false)}
+  conversation={conversation}
+  composerController={composer}
+  title="Casey Rivera"
+/>;
+```
+
+`uploadFile(attachment, onProgress, signal)` reads `attachment.file` and
+resolves with a `MessageAttachment`; set its `url` (and `previewUrl` for
+images) so the message list can show it.
+
+- **Messages.** `MessageList` groups consecutive messages by side, adds
+  "Today", "Yesterday", or a localized date between days, and shows a
+  pending, sent, or failed icon on outbound messages. Images render as lazy
+  thumbnails; other files render as a card with name, size, and a link when
+  `url` is set. Only `https:`, `http:`, and `blob:` URLs become links or
+  images; any other scheme renders the card without one. A reply shows the quoted message, and selecting the quote
+  scrolls to and focuses it. Failed outbound messages offer Retry, which
+  calls `controller.retry(clientId)`. Pass `onReply` to offer Reply on every
+  message.
+- **Composer.** `ComposeBox` attaches files from the paperclip button, a
+  paste, or a drop onto the composer. Pending files show upload progress,
+  a failed state, and a remove button. A rejected file, such as one over the
+  size limit, shows as the composer error. When a reply target is set, a
+  banner shows the quoted text (pass `conversation` or `messages` to resolve
+  it) with a cancel button. `accept` and `multiple` (default `true`) apply to
+  the file picker. Enter sends; Shift+Enter adds a line.
+- **Composer toolbar.** The toolbar reads, in order: `startActions`, the
+  emoji button, the attach button, the message field, `endActions`, and
+  either the microphone or the send button. The send button replaces the
+  microphone once there is text or an uploaded attachment. `placeholder`
+  replaces the localized placeholder, and the field grows to `maxRows`
+  (default 8) before it scrolls. Every button is at least 40px.
+- **Emoji.** The smiley button (`emoji`, default `true`) opens a picker with
+  search, a Recent tab, and nine categories. Arrow keys move through the
+  grid, Escape closes it and returns focus to the button, and a picked emoji
+  is inserted at the caret. Recent emoji are kept in `localStorage` when it
+  is available. The picker flips above or below the button to stay on
+  screen, and shows as a bottom sheet at 600px wide or less. The emoji set
+  is built in and needs no network.
+- **Voice notes.** Where the browser has `MediaRecorder` and
+  `getUserMedia`, an empty composer shows a microphone (`voiceNotes`,
+  default `true`). While recording, a bar shows the elapsed time, a live
+  input level, a delete button, and a send button. Sending adds the
+  recording as an `audio/webm` (`audio/ogg` or `audio/mp4`) attachment through
+  `upload`, then sends it; pass `voiceNoteAutoSend={false}` to leave it in
+  the composer instead. A denied microphone shows a localized error.
+  Recording start and stop are announced politely, and the microphone is
+  released when the recording ends or the composer unmounts.
+- **Quick replies.** Pass `quickReplies` (`{ id, shortcut, text,
+description? }[]`). Typing `/` at the start of a word opens a list
+  filtered by shortcut and text. The field follows the ARIA combobox
+  pattern: Up and Down move, Enter or Tab inserts, and Escape closes the
+  list. Choosing an option replaces the `/word` with its `text`, then calls
+  `onQuickReply(option)`.
+
+```tsx
+<ComposeBox
+  controller={composer}
+  placeholder="Reply to Casey"
+  quickReplies={[
+    { id: "thanks", shortcut: "thanks", text: "Thanks for reaching out!" },
+  ]}
+  endActions={<TemplateButton />}
+/>
+```
+
+- **Drawer.** The drawer is a non-modal dialog labelled by its title. When
+  `open` changes to `true`, it focuses the message field (or the close
+  button); closing it returns focus to the element that had it. A drawer
+  that mounts open leaves focus alone unless you pass `autoFocus`. Escape
+  pressed inside the drawer calls `onClose`, except while an input method is
+  composing text. A `composer`
+  node replaces the built-in composer, and `conversation` is an alias of
+  `controller`.
+- **Custom rendering.** `renderMessage(message)` replaces a bubble's
+  content, and `renderAttachment(attachment, message)` replaces one
+  attachment.
+
+## Styling
+
+Every chat and template component takes `className` for its root and
+`classNames` for its inner slots. Each slotted node also carries
+`data-slot`, and `appearance.elements[slot]` applies a class and inline
+styles from the provider:
+
+```tsx
+<PolymorfaProvider
+  appearance={{
+    theme: "system",
+    variables: { colorPrimary: "#0f766e" },
+    darkVariables: { colorPrimary: "#14b8a6" },
+    elements: { bubble: { styles: { borderRadius: "6px" } } },
+  }}
+>
+  <MessageList
+    controller={conversation}
+    classNames={{ messageList: "my-log", dateSeparator: "my-date" }}
+  />
+</PolymorfaProvider>
+```
+
+The bundled rules sit in `@layer polymorfa`, so unlayered app CSS overrides
+them. `appearance.unstyled` stops the chat, template, and call components
+from adding their stylesheets. The bundled stylesheet is document-wide and stays
+installed once any styled component has mounted, so its `.pmfa-*` rules still
+match unstyled components rendered alongside styled ones, or after a provider
+switches to `unstyled: true`. Keep unstyled components on a page without styled
+Polymorfa components, or override the bundled rules from unlayered CSS. See the
+[`@polymorfa/ui` styling reference](../ui/README.md#styling) for the variable
+list, dark colors, and every slot name.
+
+`TemplateBuilder` edits canonical headers, bodies, footers, button labels,
+carousel card bodies, and variable examples. It keeps “Save draft” and “Submit
+to Meta” as separate actions and renders structured previews. Use
+`renderPreview` to replace the preview region without replacing controller
+state.
+
+## Calls
+
+`CallSurface` is the whole call experience: the incoming card while a call
+rings, the stage, control dock and participant list during the call, and a ↗
+button that pops the call into its own resizable window. `IncomingCallCard`,
+`CallStage`, `ParticipantVideoGrid`, `ParticipantList`, `CallControls`, and
+`DialPad` compose individually. All of them render from a `CallsController`
+and follow the provider's appearance and locale.
+
+```tsx
+import {
+  createBrowserCalls,
+  createClientTokenProvider,
+} from "@polymorfa/browser";
+import { CallSurface, DialPad, PolymorfaProvider } from "@polymorfa/react";
+
+// Create once in the browser; call dispose() when the app releases it.
+const calls = createBrowserCalls({
+  session: "support",
+  getClientToken: createClientTokenProvider(),
+});
+await calls.connect();
+
+<PolymorfaProvider>
+  <CallSurface
+    controller={calls.controller}
+    resolveName={lookupContactName}
+    exclusive={false}
+  />
+  <DialPad controller={calls.controller} />
+</PolymorfaProvider>;
+```
+
+The client token comes from your server (`POST /platform/client-tokens`) and
+needs `voip_place`, `voip_answer` and `voip_signal`. The components use it
+directly; there is no calling ticket. `calls.controller.call` is the shared
+`Call` model. See the [browser package](../browser/README.md#calls) for token
+replacement, lifecycle ownership and limits.
+
+### Answering and claims
+
+`exclusive` on `CallSurface` and `IncomingCallCard` decides what Answer does:
+
+- `false` (default): the call is answered without a claim. Other participants
+  keep ringing and can join it.
+- `true`: Answer claims the call. Other participants stop ringing and cannot
+  join.
+
+The card never declines a call on its own. A call another participant
+answered without a claim shows Join and Dismiss. A call another participant
+claimed shows "Answered by another participant" and only Dismiss, because
+declining would end the call for the participant who answered. Other waiting
+calls are listed under the card with a Show button.
+
+In a call, `CallControls` shows Leave on calls nobody claimed (`showLeave`
+overrides this). Leave closes only this browser's connection; the red button
+ends the call for everyone and is labelled "End call for everyone" when Leave
+is shown. A call this browser placed shows only Hang up until it connects,
+because leaving it would keep the callee ringing.
+
+### Participant video
+
+`CallStage` renders `ParticipantVideoGrid` when anyone sends video: one tile
+per remote participant, keyed by participant or connection so a tile survives
+camera and source changes. Tiles are muted video elements with an accessible
+name ("Video from …") and a visible label; call audio plays through one
+hidden element and follows the selected speaker. Tiles for other app
+connections show their participant reference (`client:<id>` or
+`server:<name>`) unless `labelVideo` names them. `renderMedia` receives `{ local, remote, videos }` to
+replace the media region. `ParticipantList` shows the WhatsApp participants
+and their state.
+
+The incoming card mirrors the official desktop call window: name, "WhatsApp
+audio/video call" subtitle, avatar or a mirrored self-preview with camera and
+mute toggles and a ⋯ device menu, then Reject and Answer. Answering a video
+offer with the camera off still acquires video muted, so the in-call camera
+toggle can enable it. The dock carries split pills — `[camera|⌄]` and
+`[mic|⌄]` whose dropdowns pick devices live — the Leave button when shown,
+and a red end-call pill. Video is
+per direction; on an audio call the camera button upgrades to video
+(`controller.enableVideo()`, a re-offer on the same connection) and
+`disableVideo` hides it. A dropped connection shows "Reconnecting…" while the
+controller reconnects media, and gives up as `connection_failed` after the
+resumption window. Avatars come from
+`resolveAvatar` (a URL or a promise of one; `BrowserMessagingClient.contacts
+.picture` works when the token carries `read_contact`); without one a stable
+hash of the caller id picks one of eight palette tones.
+
+If a reject or hangup request fails, the call stays active and its controls remain
+available for retry. The UI shows a localized failure message and keeps existing
+media connected until the call ends. `snapshot.error` clears when ending succeeds.
+
+While an answer is in flight, the incoming card disables Answer, Join, Reject
+and its camera and microphone choices. A failed answer shows a notice on the
+incoming card: on the call itself when it is still ringing, or on the next
+waiting call when the answered call's media failed.

package/dist/call-button.d.ts

@@ -0,0 +1,29 @@
+import { type BrowserCalls, type PolymorfaClient } from "@polymorfa/browser";
+import type { SlotClassNames } from "@polymorfa/ui";
+import { type ReactNode } from "react";
+/**
+ * The provider's shared Calls client for a session, created on first use
+ * with the provider's client token.
+ */
+export declare function browserCallsFor(client: PolymorfaClient, session: string): BrowserCalls;
+export interface CallButtonProps {
+    /** Phone number in E.164 form or a WhatsApp user ID. */
+    readonly to: string;
+    readonly video?: boolean;
+    /** Session that places the call. Defaults to the grant's session. */
+    readonly session?: string;
+    /** `icon` renders a round icon button, as in the inbox header. */
+    readonly variant?: "button" | "icon";
+    /** Render the call overlay after placing. Defaults to `true`. */
+    readonly surface?: boolean;
+    readonly children?: ReactNode;
+    readonly onError?: (error: unknown) => void;
+    readonly className?: string;
+    readonly classNames?: SlotClassNames;
+}
+/**
+ * Places a WhatsApp call with the Calls client. Hidden unless the token
+ * allows `voip_place`.
+ */
+export declare function CallButton({ to, video, session, variant, surface, children, onError, className, classNames, }: CallButtonProps): import("react").JSX.Element | null;
+//# sourceMappingURL=call-button.d.ts.map

package/dist/call-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"call-button.d.ts","sourceRoot":"","sources":["../src/call-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOjD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,eAAe,EACvB,OAAO,EAAE,MAAM,GACd,YAAY,CAgBd;AAED,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,qEAAqE;IACrE,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,kEAAkE;IAClE,QAAQ,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,iEAAiE;IACjE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,KAAa,EACb,OAAO,EACP,OAAkB,EAClB,OAAc,EACd,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,GACX,EAAE,eAAe,sCA2CjB"}

package/dist/call-button.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createBrowserCalls, } from "@polymorfa/browser";
+import { useState } from "react";
+import { CallSurface } from "./calls.js";
+import { Icon, text, useShell, useSlots } from "./components.js";
+import { usePermission, usePolymorfa, usePolymorfaClient } from "./context.js";
+const shared = new WeakMap();
+/**
+ * The provider's shared Calls client for a session, created on first use
+ * with the provider's client token.
+ */
+export function browserCallsFor(client, session) {
+    let bySession = shared.get(client);
+    if (bySession === undefined) {
+        bySession = new Map();
+        shared.set(client, bySession);
+    }
+    let calls = bySession.get(session);
+    if (calls === undefined) {
+        calls = createBrowserCalls({
+            session,
+            getClientToken: client.getClientToken,
+            ...(client.baseUrl === undefined ? {} : { baseUrl: client.baseUrl }),
+        });
+        bySession.set(session, calls);
+    }
+    return calls;
+}
+/**
+ * Places a WhatsApp call with the Calls client. Hidden unless the token
+ * allows `voip_place`.
+ */
+export function CallButton({ to, video = false, session, variant = "button", surface = true, children, onError, className, classNames, }) {
+    const client = usePolymorfaClient();
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "callButton", variant === "icon" ? "pmfa-btn pmfa-btn-ghost pmfa-btn-icon" : "pmfa-btn", className);
+    const allowed = usePermission("CallButton", "button", "voip_place");
+    const [calls, setCalls] = useState();
+    const [busy, setBusy] = useState(false);
+    const resolvedSession = session ?? client.getSnapshot().grant?.session;
+    if (!allowed || resolvedSession === undefined)
+        return null;
+    const label = text(configuration, video ? "calls.videoCall" : "calls.call");
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", ...root, "data-pmfa": "call-button", "aria-label": variant === "icon" ? label : undefined, title: variant === "icon" ? label : undefined, disabled: busy, onClick: () => {
+                    const instance = browserCallsFor(client, resolvedSession);
+                    setCalls(instance);
+                    setBusy(true);
+                    (instance.connected ? Promise.resolve() : instance.connect())
+                        .then(() => instance.controller.place(to, { video }))
+                        .catch((error) => onError?.(error))
+                        .finally(() => setBusy(false));
+                }, children: [_jsx(Icon, { name: video ? "video" : "phone" }), variant === "icon" ? null : (children ?? label)] }), surface && calls !== undefined && (_jsx(CallSurface, { controller: calls.controller }))] }));
+}

package/dist/calls.d.ts

@@ -0,0 +1,201 @@
+import { type CallParticipant, type CallsController, type CallsSnapshot, type RemoteVideoInfo } from "@polymorfa/browser";
+import { type ReactNode } from "react";
+type ControllerProps = {
+    readonly controller?: CallsController;
+    readonly createController?: () => CallsController;
+};
+/**
+ * Inject the calls stylesheet once per document. SSR-safe (no-op without a
+ * `document`) and idempotent.
+ */
+export declare function injectCallsStyles(target?: Document | undefined): void;
+/** Resolve a peer's picture: a URL, nothing, or a promise of either. */
+export type AvatarResolver = (peer: string) => string | undefined | Promise<string | undefined>;
+export interface IncomingCallCardProps extends ControllerProps {
+    /** Human name to show instead of the raw number, if the app knows one. */
+    readonly displayName?: string;
+    readonly avatarUrl?: string;
+    readonly resolveAvatar?: AvatarResolver;
+    readonly className?: string;
+    /**
+     * Claim the call when Answer is pressed, so other participants stop
+     * ringing and cannot join. Default `false`: others keep ringing and can
+     * join the answered call.
+     */
+    readonly exclusive?: boolean;
+    /** Name for another waiting call in the "Other incoming calls" list. */
+    readonly resolveName?: (peer: string) => string | undefined;
+}
+/**
+ * The incoming-call window: name, "WhatsApp audio/video call" subtitle, the
+ * media middle (avatar for audio; a mirrored self-preview with camera/mic
+ * toggles and a ⋯ device menu for video), then Reject / Answer. Answering a
+ * video offer with the camera toggled off still acquires video muted, so the
+ * in-call camera toggle can enable it later.
+ *
+ * A call another participant answered without claiming shows Join instead of
+ * Answer. A call another participant claimed shows only Dismiss: declining it
+ * would end it for the participant who answered. Other waiting calls are
+ * listed below; the card never declines them.
+ */
+export declare function IncomingCallCard({ controller, createController, displayName, avatarUrl, resolveAvatar, className, exclusive, resolveName, }: IncomingCallCardProps): import("react").JSX.Element | null;
+/**
+ * Seconds since the call connected, ticking once a second (0 before that).
+ * A call that drops to `reconnecting` keeps counting: the controller holds
+ * `connectedAt` across the flap, and the call it measures is the same one.
+ */
+export declare function useCallDuration(snapshot: Pick<CallsSnapshot, "status" | "connectedAt">): number;
+/** Format seconds as `m:ss` (or `h:mm:ss` past an hour). */
+export declare function formatDuration(totalSeconds: number): string;
+export interface CallStageProps extends ControllerProps {
+    readonly displayName?: string;
+    readonly avatarUrl?: string;
+    readonly resolveAvatar?: AvatarResolver;
+    readonly className?: string;
+    /** Label for a remote video tile; see {@link ParticipantVideoGridProps}. */
+    readonly labelVideo?: ParticipantVideoGridProps["labelVideo"];
+    /**
+     * Replace the media region without forking state. `remote` is the merged
+     * call audio; `videos` holds one stream per remote participant.
+     */
+    readonly renderMedia?: (streams: {
+        readonly local?: MediaStream;
+        readonly remote?: MediaStream;
+        readonly videos: readonly {
+            readonly key: string;
+            readonly info: RemoteVideoInfo;
+            readonly stream: MediaStream;
+        }[];
+    }) => ReactNode;
+}
+/**
+ * The in-call stage: one tile per remote participant video when anyone sends
+ * video, the centered avatar hero otherwise, the local preview as a
+ * picture-in-picture tile, and the identity (name + flashing number/duration
+ * line). The merged call audio plays through a hidden element. Always dark by
+ * design.
+ */
+export declare function CallStage({ controller, createController, displayName, avatarUrl, resolveAvatar, className, labelVideo, renderMedia, }: CallStageProps): import("react").JSX.Element | null;
+export interface ParticipantVideoGridProps extends ControllerProps {
+    readonly className?: string;
+    /**
+     * Label for a tile. Defaults to the participant's number or ID, then the
+     * participant reference of another app connection, then "Participant".
+     */
+    readonly labelVideo?: (video: RemoteVideoInfo) => string | undefined;
+}
+/**
+ * One tile per remote participant video, keyed by participant or
+ * connection so a tile survives source changes. Videos are separate
+ * streams; nothing is composed. Renders nothing without remote video.
+ */
+export declare function ParticipantVideoGrid({ controller, createController, className, labelVideo, }: ParticipantVideoGridProps): import("react").JSX.Element | null;
+export interface ParticipantListProps extends ControllerProps {
+    readonly className?: string;
+    /** Display name for a participant, when the application knows one. */
+    readonly resolveName?: (participant: CallParticipant) => string | undefined;
+}
+/** The displayed call's WhatsApp participants and their state. */
+export declare function ParticipantList({ controller, createController, className, resolveName, }: ParticipantListProps): import("react").JSX.Element | null;
+export interface CallControlsProps extends ControllerProps {
+    readonly className?: string;
+    /** Hide the camera control even when the call can carry video. */
+    readonly disableVideo?: boolean;
+    /**
+     * Show a Leave button that closes only this connection. Defaults to
+     * showing it on calls nobody claimed, where others can stay in the call.
+     * Never shown on a call this client placed that has not connected: nobody
+     * else is on it, so the red button ends it. The red button always ends the
+     * call for everyone.
+     */
+    readonly showLeave?: boolean;
+}
+/**
+ * The in-call dock, after the official window: the camera split group
+ * ([toggle|⌄] — the dropdown picks the camera) and the mic split group
+ * ([toggle|⌄] — the dropdown picks microphone + speaker) on the left, the
+ * red hang-up pill on the right. The camera group renders whenever the line
+ * can carry video (unless `disableVideo`) and is disabled until the call
+ * connects. Video is per direction: the camera controls only the outgoing
+ * stream.
+ */
+export declare function CallControls({ controller, createController, className, disableVideo, showLeave, }: CallControlsProps): import("react").JSX.Element | null;
+export interface DialPadProps extends ControllerProps {
+    /** Prefill the number field. */
+    readonly defaultValue?: string;
+    /**
+     * Offer a video-call button. Default `true`. Set it to `false` for numbers
+     * whose calls cannot carry video.
+     */
+    readonly allowVideo?: boolean;
+    /** Called once the call is actually placed, not when a placement fails. */
+    readonly onPlaced?: (to: string) => void;
+    readonly className?: string;
+}
+/**
+ * A dial pad card: E.164 entry plus place-call buttons — audio always, and a
+ * video-call button unless `allowVideo` is false.
+ */
+export declare function DialPad({ controller, createController, defaultValue, allowVideo, onPlaced, className, }: DialPadProps): import("react").JSX.Element;
+export interface CallPopoutHandle {
+    /** True while the separate call window is open. */
+    readonly popped: boolean;
+    /** Open the call window (no-op if already open or the popup was blocked). */
+    readonly open: () => void;
+    /** Close the call window (popping the call back inline). */
+    readonly close: () => void;
+    /** Portal target inside the call window; null while not popped. */
+    readonly container: HTMLElement | null;
+}
+/**
+ * Owns a separate, freely resizable call window (like the desktop client's)
+ * and hands back a container to portal the stage + controls into. Media
+ * streams keep playing across same-origin windows, so portal'd `<video>`
+ * elements just work.
+ */
+/**
+ * @param title Window title. `CallSurface` passes the localized
+ * `calls.popoutTitle`; the default keeps the hook usable on its own.
+ */
+export declare function useCallPopout(title?: string): CallPopoutHandle;
+export interface CallSurfaceProps extends ControllerProps {
+    /** Resolve a display name for a number (contact lookup). */
+    readonly resolveName?: (peer: string) => string | undefined;
+    /** Resolve an avatar URL for a number (sync or async). */
+    readonly resolveAvatar?: AvatarResolver;
+    /** Hide the camera control even when the call can carry video. */
+    readonly disableVideo?: boolean;
+    /** Offer the ↗ pop-out window button. Defaults to true. */
+    readonly popout?: boolean;
+    /** Replace the stage's media region without forking state. */
+    readonly renderMedia?: CallStageProps["renderMedia"];
+    /**
+     * Claim calls answered from this surface. Default `false`: other
+     * participants keep ringing and can join.
+     */
+    readonly exclusive?: boolean;
+    /** Show the participant list during a call. Defaults to true. */
+    readonly showParticipants?: boolean;
+    /** Show the Leave button; see {@link CallControlsProps.showLeave}. */
+    readonly showLeave?: boolean;
+    /** Label for a remote video tile. */
+    readonly labelVideo?: ParticipantVideoGridProps["labelVideo"];
+}
+/**
+ * The whole call experience in one component: a fixed overlay that shows the
+ * incoming-call card while ringing and the stage + control dock during a
+ * call. The ↗ button pops the call into its own resizable browser window;
+ * closing that window (or the call ending) pops it back inline.
+ */
+export declare function CallSurface({ controller, createController, resolveName, resolveAvatar, disableVideo, popout: allowPopout, renderMedia, exclusive, showParticipants, showLeave, labelVideo, }: CallSurfaceProps): import("react").JSX.Element | null;
+/**
+ * One injected `<style>` tag, scoped under `.pmfa-calls` so nothing leaks into
+ * the host app, inside the `polymorfa` cascade layer so unlayered host CSS
+ * wins. Colors derive from the shared `--pmfa-*` appearance variables
+ * with the monochrome Material-3 palette as fallbacks; the verbs use
+ * `--pmfa-color-success` / `--pmfa-color-danger`. All motion is disabled under
+ * `prefers-reduced-motion: reduce`.
+ */
+export declare const CALLS_STYLES = "\n@layer polymorfa {\n.pmfa-calls {\n  --pmfa-calls-accent: var(--pmfa-color-foreground, oklch(0.15 0 0));\n  --pmfa-calls-accent-soft: oklch(0.96 0 0);\n  --pmfa-calls-answer: var(--pmfa-color-success, oklch(0.76 0.19 150));\n  --pmfa-calls-answer-strong: oklch(0.68 0.18 150);\n  --pmfa-calls-danger: var(--pmfa-color-danger, oklch(0.5 0.19 28));\n  --pmfa-calls-danger-strong: oklch(0.44 0.18 28);\n  --pmfa-calls-card: var(--pmfa-color-background, oklch(1 0 0));\n  --pmfa-calls-fg: var(--pmfa-color-foreground, oklch(0.17 0 0));\n  --pmfa-calls-muted: var(--pmfa-color-muted, oklch(0.49 0.008 250));\n  --pmfa-calls-border: var(--pmfa-color-border, oklch(0.91 0 0));\n  --pmfa-calls-stage: oklch(0.15 0 0);\n  --pmfa-calls-stage-fg: oklch(0.985 0 0);\n  --pmfa-calls-stage-muted: oklch(0.75 0 0);\n  --pmfa-calls-stage-line: oklch(1 0 0 / 0.12);\n  --pmfa-calls-avatar-1: oklch(0.55 0.09 200);\n  --pmfa-calls-avatar-2: oklch(0.55 0.12 255);\n  --pmfa-calls-avatar-3: oklch(0.55 0.14 292);\n  --pmfa-calls-avatar-4: oklch(0.58 0.14 10);\n  --pmfa-calls-avatar-5: oklch(0.6 0.11 70);\n  --pmfa-calls-avatar-6: oklch(0.55 0.11 150);\n  --pmfa-calls-avatar-7: oklch(0.5 0.13 275);\n  --pmfa-calls-avatar-8: oklch(0.55 0.14 330);\n  --pmfa-calls-radius: var(--pmfa-radius-medium, 0.5rem);\n  --pmfa-calls-font: var(--pmfa-font-family, \"Roboto\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n  font-family: var(--pmfa-calls-font);\n  color: var(--pmfa-calls-fg);\n  font-size: 14px;\n  line-height: 1.45;\n  -webkit-font-smoothing: antialiased;\n}\n.pmfa-calls *, .pmfa-calls *::before, .pmfa-calls *::after { box-sizing: border-box; }\n.pmfa-calls :focus-visible { outline: 2px solid var(--pmfa-calls-accent); outline-offset: 2px; }\n.pmfa-calls.pmfa-calls-dark {\n  --pmfa-calls-accent: oklch(0.92 0 0);\n  --pmfa-calls-accent-soft: oklch(1 0 0 / 0.08);\n  --pmfa-calls-card: oklch(0.21 0 0);\n  --pmfa-calls-fg: oklch(0.985 0 0);\n  --pmfa-calls-muted: oklch(0.74 0 0);\n  --pmfa-calls-border: oklch(1 0 0 / 0.12);\n}\n@media (prefers-color-scheme: dark) {\n  .pmfa-calls.pmfa-calls-auto {\n    --pmfa-calls-accent: oklch(0.92 0 0);\n    --pmfa-calls-accent-soft: oklch(1 0 0 / 0.08);\n    --pmfa-calls-card: oklch(0.21 0 0);\n    --pmfa-calls-fg: oklch(0.985 0 0);\n    --pmfa-calls-muted: oklch(0.74 0 0);\n    --pmfa-calls-border: oklch(1 0 0 / 0.12);\n  }\n}\n.pmfa-calls-card { background: var(--pmfa-calls-card); border: 1px solid var(--pmfa-calls-border); border-radius: var(--pmfa-calls-radius); }\n.pmfa-calls-incoming { position: relative; width: 100%; padding: 22px 16px 18px; display: flex; flex-direction: column; text-align: center; background: var(--pmfa-calls-stage); color: var(--pmfa-calls-stage-fg); border-color: var(--pmfa-calls-stage-line); animation: pmfa-calls-rise 0.28s cubic-bezier(0.16, 1, 0.3, 1); }\n.pmfa-calls-incoming .pmfa-calls-name { font-size: 19px; font-weight: 600; }\n.pmfa-calls-subtitle { margin-top: 3px; font-size: 13px; color: var(--pmfa-calls-stage-muted); }\n.pmfa-calls-media { position: relative; width: 100%; margin-top: 16px; border-radius: var(--pmfa-calls-radius); overflow: hidden; aspect-ratio: 16 / 10; background: oklch(0.08 0 0); }\n.pmfa-calls-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }\n.pmfa-calls-media-audio { overflow: visible; background: transparent; display: flex; align-items: center; justify-content: center; }\n.pmfa-calls-media-audio .pmfa-calls-avatar-wrap { margin-bottom: 0; }\n.pmfa-calls-mini { width: 36px; height: 36px; background: oklch(1 0 0 / 0.14); color: oklch(0.985 0 0); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }\n.pmfa-calls-mini:hover { background: oklch(1 0 0 / 0.22); }\n.pmfa-calls-mini svg { width: 16px; height: 16px; }\n.pmfa-calls-mini.pmfa-calls-on { background: oklch(0.985 0 0); color: oklch(0.2 0 0); }\n.pmfa-calls-more { position: absolute; top: 10px; right: 10px; z-index: 2; }\n.pmfa-calls-media-ctrls { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 2; }\n.pmfa-calls-pop-float { position: absolute; left: 50%; transform: translateX(-50%); top: 96px; z-index: 4; }\n.pmfa-calls-avatar-wrap { position: relative; width: 72px; height: 72px; margin-bottom: 14px; }\n.pmfa-calls-avatar { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: oklch(0.985 0 0); font-size: 24px; font-weight: 500; letter-spacing: 0.01em; background: oklch(0.22 0 0); }\n.pmfa-calls-audio-hero .pmfa-calls-avatar { border: 1.5px solid var(--pmfa-calls-stage-line); }\n.pmfa-calls-avatar-c1 { background: var(--pmfa-calls-avatar-1); }\n.pmfa-calls-avatar-c2 { background: var(--pmfa-calls-avatar-2); }\n.pmfa-calls-avatar-c3 { background: var(--pmfa-calls-avatar-3); }\n.pmfa-calls-avatar-c4 { background: var(--pmfa-calls-avatar-4); }\n.pmfa-calls-avatar-c5 { background: var(--pmfa-calls-avatar-5); }\n.pmfa-calls-avatar-c6 { background: var(--pmfa-calls-avatar-6); }\n.pmfa-calls-avatar-c7 { background: var(--pmfa-calls-avatar-7); }\n.pmfa-calls-avatar-c8 { background: var(--pmfa-calls-avatar-8); }\n.pmfa-calls-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.pmfa-calls-name { font-size: 16px; font-weight: 500; letter-spacing: 0.01em; text-wrap: balance; }\n.pmfa-calls-peer { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--pmfa-calls-muted); letter-spacing: 0.01em; }\n.pmfa-calls-flash { animation: pmfa-calls-swap 0.35s ease; }\n@keyframes pmfa-calls-swap { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }\n.pmfa-calls-btn { appearance: none; border: none; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; color: oklch(0.985 0 0); transition: background-color 0.14s ease; }\n.pmfa-calls-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n.pmfa-calls-btn svg { width: 22px; height: 22px; }\n.pmfa-calls-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 22px; width: 100%; }\n.pmfa-calls-action { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; color: var(--pmfa-calls-stage-muted); }\n.pmfa-calls-btn-answer { width: 56px; height: 56px; background: var(--pmfa-calls-answer); animation: pmfa-calls-beckon 2s ease-in-out infinite; }\n.pmfa-calls-btn-answer:hover { background: var(--pmfa-calls-answer-strong); }\n.pmfa-calls-btn-decline { width: 56px; height: 56px; background: var(--pmfa-calls-danger); }\n.pmfa-calls-btn-decline:hover { background: var(--pmfa-calls-danger-strong); }\n@keyframes pmfa-calls-beckon { 0%, 100% { box-shadow: 0 0 0 0 oklch(0.76 0.19 150 / 0.4); } 50% { box-shadow: 0 0 0 10px oklch(0.76 0.19 150 / 0); } }\n@keyframes pmfa-calls-fade { from { opacity: 0; } to { opacity: 1; } }\n.pmfa-calls-pop { width: 236px; padding: 12px; display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--pmfa-calls-card); color: var(--pmfa-calls-fg); border: 1px solid var(--pmfa-calls-border); border-radius: calc(var(--pmfa-calls-radius) + 4px); animation: pmfa-calls-fade 0.16s ease; }\n.pmfa-calls-field { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pmfa-calls-muted); }\n.pmfa-calls-select { width: 100%; padding: 7px 8px; font: inherit; font-family: var(--pmfa-calls-font); font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--pmfa-calls-fg); background: transparent; border: 1px solid var(--pmfa-calls-border); border-radius: var(--pmfa-calls-radius); }\n.pmfa-calls-select:focus { outline: none; border-color: var(--pmfa-calls-accent); }\n.pmfa-calls-select option { color: initial; background: initial; }\n.pmfa-calls-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--pmfa-calls-radius); overflow: hidden; background: radial-gradient(130% 90% at 50% 0%, oklch(1 0 0 / 0.06) 0%, transparent 62%), var(--pmfa-calls-stage); color: var(--pmfa-calls-stage-fg); }\n.pmfa-calls-audio-sink { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }\n.pmfa-calls-grid { position: absolute; inset: 0; margin: 0; padding: 4px; list-style: none; display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); grid-auto-rows: 1fr; background: var(--pmfa-calls-stage); }\n.pmfa-calls-grid[data-count=\"1\"] { grid-template-columns: 1fr; padding: 0; }\n.pmfa-calls-tile { position: relative; min-height: 0; overflow: hidden; border-radius: var(--pmfa-calls-radius); background: oklch(0.08 0 0); }\n.pmfa-calls-grid[data-count=\"1\"] .pmfa-calls-tile { border-radius: 0; }\n.pmfa-calls-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }\n.pmfa-calls-tile-label { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 6px; border-radius: 4px; font-size: 11.5px; color: var(--pmfa-calls-stage-fg); background: oklch(0.1 0 0 / 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.pmfa-calls-btn-dismiss { width: 56px; height: 56px; background: oklch(1 0 0 / 0.14); }\n.pmfa-calls-btn-dismiss:hover { background: oklch(1 0 0 / 0.22); }\n.pmfa-calls-btn-leave { width: 46px; }\n.pmfa-calls-others, .pmfa-calls-people { width: 100%; margin-top: 14px; text-align: left; }\n.pmfa-calls-people { margin-top: 0; padding: 12px 14px; }\n.pmfa-calls-others ul, .pmfa-calls-people ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n.pmfa-calls-others li, .pmfa-calls-people li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }\n.pmfa-calls-others li > span:first-child, .pmfa-calls-people li > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.pmfa-calls-others-title { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pmfa-calls-muted); }\n.pmfa-calls-incoming .pmfa-calls-others-title, .pmfa-calls-others-state { color: var(--pmfa-calls-stage-muted); }\n.pmfa-calls-people .pmfa-calls-others-state { color: var(--pmfa-calls-muted); }\n.pmfa-calls-others-state { font-size: 12px; white-space: nowrap; }\n.pmfa-calls-chip { appearance: none; border: 1px solid var(--pmfa-calls-stage-line); background: transparent; color: inherit; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer; }\n.pmfa-calls-chip:hover { background: oklch(1 0 0 / 0.12); }\n.pmfa-calls-audio-hero { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }\n.pmfa-calls-audio-hero .pmfa-calls-name { font-size: 19px; }\n.pmfa-calls-audio-hero .pmfa-calls-peer { color: var(--pmfa-calls-stage-muted); }\n.pmfa-calls-hero-preview { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; text-align: center; }\n.pmfa-calls-hero-preview .pmfa-calls-peer { color: var(--pmfa-calls-stage-muted); }\n.pmfa-calls-inset { position: relative; width: 82%; aspect-ratio: 16 / 10; border-radius: var(--pmfa-calls-radius); overflow: hidden; background: oklch(0.08 0 0); }\n.pmfa-calls-pip { position: absolute; right: 14px; bottom: 14px; width: 96px; aspect-ratio: 3 / 4; border-radius: var(--pmfa-calls-radius); overflow: hidden; border: 1.5px solid var(--pmfa-calls-stage-line); background: oklch(0.24 0 0); }\n.pmfa-calls-pip video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }\n.pmfa-calls-stage-id { position: absolute; top: 0; left: 0; right: 0; padding: 16px 18px 30px; background: linear-gradient(oklch(0.1 0 0 / 0.6), transparent); color: var(--pmfa-calls-stage-fg); }\n.pmfa-calls-stage-id .pmfa-calls-peer { color: var(--pmfa-calls-stage-muted); }\n.pmfa-calls-dock-col { position: relative; display: inline-flex; flex-direction: column; align-items: center; }\n.pmfa-calls-dock-col > .pmfa-calls-pop { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5; }\n.pmfa-calls-dock { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--pmfa-calls-stage-line); background: oklch(0.17 0 0 / 0.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); animation: pmfa-calls-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1); }\n.pmfa-calls-btn-ctrl { width: 46px; height: 46px; background: oklch(1 0 0 / 0.1); color: oklch(0.985 0 0); }\n.pmfa-calls-btn-ctrl:hover { background: oklch(1 0 0 / 0.18); }\n.pmfa-calls-group { display: inline-flex; align-items: stretch; border-radius: 999px; background: oklch(1 0 0 / 0.1); overflow: hidden; }\n.pmfa-calls-group.pmfa-calls-disabled { opacity: 0.45; }\n.pmfa-calls-group .pmfa-calls-btn-ctrl { background: transparent; border-radius: 0; }\n.pmfa-calls-group .pmfa-calls-btn-ctrl:hover { background: oklch(1 0 0 / 0.12); }\n.pmfa-calls-group .pmfa-calls-btn-ctrl.pmfa-calls-on { background: oklch(0.985 0 0); }\n.pmfa-calls-btn-acc { width: 30px; height: 46px; border-radius: 0; background: transparent; color: oklch(0.985 0 0 / 0.8); border-left: 1px solid oklch(1 0 0 / 0.12); }\n.pmfa-calls-btn-acc:hover { background: oklch(1 0 0 / 0.12); transform: none; }\n.pmfa-calls-btn-acc svg { width: 14px; height: 14px; transition: transform 0.18s ease; }\n.pmfa-calls-btn-acc.pmfa-calls-open svg { transform: rotate(180deg); }\n.pmfa-calls-btn-ctrl.pmfa-calls-on { background: oklch(0.985 0 0); color: oklch(0.2 0 0); }\n.pmfa-calls-btn-hangup { width: 64px; height: 46px; border-radius: 999px; background: var(--pmfa-calls-danger); }\n.pmfa-calls-btn-hangup:hover { background: var(--pmfa-calls-danger-strong); }\n.pmfa-calls-dialpad { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 16px; }\n.pmfa-calls-input { width: 100%; border: none; background: transparent; color: var(--pmfa-calls-fg); font-variant-numeric: tabular-nums; font-size: 22px; text-align: center; letter-spacing: 0.03em; padding: 6px 2px 10px; border-bottom: 1px solid var(--pmfa-calls-border); }\n.pmfa-calls-input:focus { outline: none; border-bottom-color: var(--pmfa-calls-accent); }\n.pmfa-calls-input::placeholder { color: var(--pmfa-calls-muted); opacity: 0.6; }\n.pmfa-calls-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; }\n.pmfa-calls-key { appearance: none; border: none; margin: 0; width: 62px; height: 48px; border-radius: var(--pmfa-calls-radius); background: transparent; color: var(--pmfa-calls-fg); font-family: var(--pmfa-calls-font); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.12s ease; }\n.pmfa-calls-key:hover { background: var(--pmfa-calls-accent-soft); }\n.pmfa-calls-key-digit { font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }\n.pmfa-calls-dial-actions { display: flex; align-items: center; justify-content: center; gap: 18px; }\n.pmfa-calls-dialpad .pmfa-calls-btn-answer { animation: none; }\n.pmfa-calls-key-erase { color: var(--pmfa-calls-muted); }\n.pmfa-calls-key-erase:hover { color: var(--pmfa-calls-fg); background: var(--pmfa-calls-accent-soft); }\n.pmfa-calls-key-erase svg { width: 20px; height: 20px; }\n.pmfa-calls-popout { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; padding: 12px; background: var(--pmfa-calls-stage); }\n.pmfa-calls-popout .pmfa-calls-stage { flex: 1; min-height: 0; aspect-ratio: auto; }\n.pmfa-calls-popbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 8px 8px 14px; border-radius: var(--pmfa-calls-radius); border: 1px solid var(--pmfa-calls-stage-line); background: var(--pmfa-calls-stage); color: var(--pmfa-calls-stage-fg); font-size: 13px; }\n@keyframes pmfa-calls-rise { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }\n@media (prefers-reduced-motion: reduce) {\n  .pmfa-calls *, .pmfa-calls *::before, .pmfa-calls *::after { animation: none !important; transition: none !important; }\n}\n}\n";
+export {};
+//# sourceMappingURL=calls.d.ts.map

package/dist/calls.d.ts.map

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