@lindaui/blocks 0.4.2 → 0.5.0

package/dist/compat-chat/whatsapp-audio-player.d.ts

@@ -0,0 +1,7 @@
+export interface WhatsAppAudioPlayerProps {
+    isBot?: boolean;
+    src: string;
+}
+/** Voice-note playback, buffering, duration tracking and click-to-seek. */
+export declare function WhatsAppAudioPlayer({ src, isBot }: WhatsAppAudioPlayerProps): import("react").JSX.Element;
+//# sourceMappingURL=whatsapp-audio-player.d.ts.map

package/dist/compat-chat/whatsapp-audio-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"whatsapp-audio-player.d.ts","sourceRoot":"","sources":["../../src/compat-chat/whatsapp-audio-player.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,wBAAwB;IAAG,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;CAAE;AA0B3E,2EAA2E;AAC3E,wBAAgB,mBAAmB,CAAC,EAAE,GAAG,EAAE,KAAa,EAAE,EAAE,wBAAwB,+BAoEnF"}

package/dist/compat.d.ts

@@ -0,0 +1,9 @@
+/** Legacy presentation API isolated from the existing lindaui entry points. */
+export * from "@lindaui/ui/compat";
+export { KPICard } from "./legacy-kpi-card.js";
+export type { KPICardProps, KPICardColor } from "./legacy-kpi-card.js";
+export { StatusFilters } from "./status-filters.js";
+export type { StatusFiltersProps } from "./status-filters.js";
+export { DateDivider } from "./compat-chat/date-divider.js";
+export type { DateDividerProps } from "./compat-chat/date-divider.js";
+//# sourceMappingURL=compat.d.ts.map

package/dist/compat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat.d.ts","sourceRoot":"","sources":["../src/compat.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAmB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAkB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAkB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA4B,CAAC;AACzD,YAAY,EAAE,gBAAgB,EAAE,MAAM,+BAA4B,CAAC"}

package/dist/compat.js

@@ -0,0 +1,4 @@
+export * from '@lindaui/ui/compat';
+export { K as KPICard } from './analytics-skeleton-imve37du.js';
+export { StatusFilters } from './status-filters.js';
+export { D as DateDivider } from './conversation-thread-c60431oa.js';

package/dist/connected-panel-lhwy25yk.js

@@ -0,0 +1,132 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button, Modal, Spinner } from '@lindaui/ui/compound';
+import { useState, useRef } from 'react';
+
+/** Connection metadata and an async, non-dismissable-while-pending confirmation. */ function ConnectedPanel({ details, labels, error: connectionError, onDisconnect }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState(null);
+    const pending = useRef(false);
+    async function disconnect() {
+        if (pending.current) return;
+        pending.current = true;
+        setIsPending(true);
+        setError(null);
+        try {
+            await onDisconnect();
+            setIsOpen(false);
+        } catch  {
+            setError(labels.disconnectError);
+        } finally{
+            pending.current = false;
+            setIsPending(false);
+        }
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: "space-y-6",
+        children: [
+            /*#__PURE__*/ jsx("dl", {
+                className: "divide-y divide-border/60 text-sm",
+                children: details.map(({ id, label, value, valueClassName, dateTime })=>/*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-col gap-1 py-4 sm:flex-row sm:justify-between sm:gap-6",
+                        children: [
+                            /*#__PURE__*/ jsx("dt", {
+                                className: "text-muted",
+                                children: label
+                            }),
+                            /*#__PURE__*/ jsx("dd", {
+                                className: valueClassName,
+                                children: dateTime ? /*#__PURE__*/ jsx("time", {
+                                    dateTime: dateTime,
+                                    children: value
+                                }) : value
+                            })
+                        ]
+                    }, id))
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col items-start gap-3 border-border/60 border-t pt-5 sm:flex-row sm:items-center sm:justify-between sm:gap-6",
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        className: "max-w-sm text-muted text-xs leading-relaxed",
+                        children: labels.disconnectHint
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        className: "min-h-11 shrink-0",
+                        onPress: ()=>{
+                            setError(null);
+                            setIsOpen(true);
+                        },
+                        variant: "danger-soft",
+                        children: labels.disconnect
+                    })
+                ]
+            }),
+            connectionError && !isOpen && /*#__PURE__*/ jsx("p", {
+                className: "text-danger text-sm",
+                role: "alert",
+                children: connectionError
+            }),
+            /*#__PURE__*/ jsx(Modal.Backdrop, {
+                isDismissable: !isPending,
+                isKeyboardDismissDisabled: isPending,
+                isOpen: isOpen,
+                onOpenChange: (open)=>{
+                    if (!pending.current) setIsOpen(open);
+                },
+                children: /*#__PURE__*/ jsx(Modal.Container, {
+                    children: /*#__PURE__*/ jsxs(Modal.Dialog, {
+                        className: "sm:max-w-md",
+                        role: "alertdialog",
+                        children: [
+                            /*#__PURE__*/ jsx(Modal.Header, {
+                                children: /*#__PURE__*/ jsx(Modal.Heading, {
+                                    children: labels.confirmTitle
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(Modal.Body, {
+                                children: [
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "text-muted text-sm leading-relaxed",
+                                        children: labels.confirmDescription
+                                    }),
+                                    error && /*#__PURE__*/ jsx("p", {
+                                        className: "mt-3 text-danger text-sm",
+                                        role: "alert",
+                                        children: error
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(Modal.Footer, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Button, {
+                                        autoFocus: true,
+                                        isDisabled: isPending,
+                                        onPress: ()=>setIsOpen(false),
+                                        variant: "tertiary",
+                                        children: labels.cancel
+                                    }),
+                                    /*#__PURE__*/ jsxs(Button, {
+                                        isPending: isPending,
+                                        onPress: disconnect,
+                                        variant: "danger",
+                                        children: [
+                                            isPending && /*#__PURE__*/ jsx(Spinner, {
+                                                color: "current",
+                                                size: "sm"
+                                            }),
+                                            isPending ? labels.disconnecting : labels.disconnect
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+
+export { ConnectedPanel as C };

package/dist/connection-panel/connected-panel.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+export interface ConnectionDetail {
+    id: string;
+    label: ReactNode;
+    value: ReactNode;
+    valueClassName?: string;
+    dateTime?: string;
+}
+export interface ConnectedPanelLabels {
+    disconnectHint: ReactNode;
+    disconnect: ReactNode;
+    disconnecting: ReactNode;
+    disconnectError: ReactNode;
+    confirmTitle: ReactNode;
+    confirmDescription: ReactNode;
+    cancel: ReactNode;
+}
+export interface ConnectedPanelProps {
+    details: readonly ConnectionDetail[];
+    labels: ConnectedPanelLabels;
+    error?: ReactNode;
+    onDisconnect: () => Promise<void>;
+}
+/** Connection metadata and an async, non-dismissable-while-pending confirmation. */
+export declare function ConnectedPanel({ details, labels, error: connectionError, onDisconnect }: ConnectedPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=connected-panel.d.ts.map

package/dist/connection-panel/connected-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-panel.d.ts","sourceRoot":"","sources":["../../src/connection-panel/connected-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,cAAc,EAAE,SAAS,CAAC;IAC1B,UAAU,EAAE,SAAS,CAAC;IACtB,aAAa,EAAE,SAAS,CAAC;IACzB,eAAe,EAAE,SAAS,CAAC;IAC3B,YAAY,EAAE,SAAS,CAAC;IACxB,kBAAkB,EAAE,SAAS,CAAC;IAC9B,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACrC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACnC;AAED,oFAAoF;AACpF,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,EAAE,mBAAmB,+BA0E5G"}

package/dist/connection-panel/disconnected-panel.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { ConnectionPanelLabels } from "../connection-panel.js";
+interface DisconnectedPanelProps {
+    generating: boolean;
+    pending: boolean;
+    labels: ConnectionPanelLabels;
+    error?: ReactNode;
+    onConnect: () => Promise<void>;
+}
+export declare function DisconnectedPanel({ generating, pending, labels, error, onConnect }: DisconnectedPanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=disconnected-panel.d.ts.map

package/dist/connection-panel/disconnected-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"disconnected-panel.d.ts","sourceRoot":"","sources":["../../src/connection-panel/disconnected-panel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAqB,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAED,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,sBAAsB,+BAkC1G"}

package/dist/connection-panel/instructions.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export declare function ConnectionInstructions({ items }: {
+    items: readonly ReactNode[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=instructions.d.ts.map

package/dist/connection-panel/instructions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instructions.d.ts","sourceRoot":"","sources":["../../src/connection-panel/instructions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;CAAE,+BAMhF"}

package/dist/connection-panel/qr-panel.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { ConnectionPanelLabels } from "../connection-panel.js";
+interface QRPanelProps {
+    qrCode: ReactNode;
+    qrFormat?: "ascii" | "image";
+    labels: ConnectionPanelLabels;
+    timeRemaining: number;
+    isRefreshing: boolean;
+    error?: ReactNode;
+    onRefresh: () => Promise<void>;
+}
+export declare function QRPanel({ qrCode, qrFormat, labels, timeRemaining, isRefreshing, error, onRefresh }: QRPanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=qr-panel.d.ts.map

package/dist/connection-panel/qr-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-panel.d.ts","sourceRoot":"","sources":["../../src/connection-panel/qr-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAqB,CAAC;AAGjE,UAAU,YAAY;IACpB,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAMD,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,YAAY,+BAyChH"}

package/dist/connection-panel/use-qr-refresh.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+interface QRRefreshOptions {
+    enabled: boolean;
+    expirySeconds: number;
+    error?: ReactNode;
+    errorLabel: ReactNode;
+    onRefresh: () => Promise<void>;
+}
+/** Pause hidden challenges and never overlap refreshes or automatically retry failures. */
+export declare function useQRRefresh({ enabled, expirySeconds, error, errorLabel, onRefresh }: QRRefreshOptions): {
+    timeRemaining: number;
+    isRefreshing: boolean;
+    actionError: ReactNode;
+    setActionError: import("react").Dispatch<import("react").SetStateAction<ReactNode>>;
+    refresh: () => Promise<void>;
+};
+export {};
+//# sourceMappingURL=use-qr-refresh.d.ts.map

package/dist/connection-panel/use-qr-refresh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-qr-refresh.d.ts","sourceRoot":"","sources":["../../src/connection-panel/use-qr-refresh.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjF,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAED,2FAA2F;AAC3F,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,gBAAgB;;;;;;EAwCtG"}

package/dist/connection-panel.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+export { ConnectedPanel } from "./connection-panel/connected-panel.js";
+export type { ConnectedPanelProps, ConnectedPanelLabels, ConnectionDetail } from "./connection-panel/connected-panel.js";
+export type ConnectionPanelState = {
+    status: "checking" | "disconnected" | "generating";
+} | {
+    status: "awaiting_scan";
+    qrCode: ReactNode;
+    qrFormat?: "ascii" | "image";
+} | {
+    status: "connected";
+    content: ReactNode;
+};
+export interface ConnectionPanelLabels {
+    checking: ReactNode;
+    generating: ReactNode;
+    waiting: ReactNode;
+    disconnectedDescription: ReactNode;
+    connect: ReactNode;
+    connectError: ReactNode;
+    refresh: ReactNode;
+    expiresSoon: ReactNode;
+    expiresIn: (time: string) => ReactNode;
+    instructions: readonly ReactNode[];
+    disconnectedInstructions: readonly ReactNode[];
+}
+export interface ConnectionPanelProps {
+    state: ConnectionPanelState;
+    labels: ConnectionPanelLabels;
+    error?: ReactNode;
+    isActive?: boolean;
+    className?: string;
+    qrExpirySeconds?: number;
+    onConnect: () => Promise<void>;
+    onRefreshQR: () => Promise<void>;
+}
+/** Controlled connection presentation. Authentication and automatic connection policy stay in the app. */
+export declare function ConnectionPanel({ state, labels, error, isActive, className, qrExpirySeconds, onConnect, onRefreshQR, }: ConnectionPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=connection-panel.d.ts.map

package/dist/connection-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-panel.d.ts","sourceRoot":"","sources":["../src/connection-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAoC,CAAC;AACpE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,uCAAoC,CAAC;AAEtH,MAAM,MAAM,oBAAoB,GAC5B;IAAE,MAAM,EAAE,UAAU,GAAG,cAAc,GAAG,YAAY,CAAA;CAAE,GACtD;IAAE,MAAM,EAAE,eAAe,CAAC;IAAC,MAAM,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,GAC5E;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,SAAS,CAAA;CAAE,CAAC;AAEhD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,uBAAuB,EAAE,SAAS,CAAC;IACnC,OAAO,EAAE,SAAS,CAAC;IACnB,YAAY,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,EAAE,SAAS,CAAC;IACvB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACvC,YAAY,EAAE,SAAS,SAAS,EAAE,CAAC;IACnC,wBAAwB,EAAE,SAAS,SAAS,EAAE,CAAC;CAChD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC;AAED,0GAA0G;AAC1G,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,KAAK,EACL,QAAe,EACf,SAAc,EACd,eAAoB,EACpB,SAAS,EACT,WAAW,GACZ,EAAE,oBAAoB,+BAwFtB"}

package/dist/connection-panel.js

@@ -0,0 +1,328 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Spinner, Button } from '@lindaui/ui/compound';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
+export { C as ConnectedPanel } from './connected-panel-lhwy25yk.js';
+
+function ConnectionInstructions({ items }) {
+    return /*#__PURE__*/ jsx("ol", {
+        className: "mx-auto w-fit list-inside list-decimal space-y-2 text-left text-muted text-sm",
+        children: items.map((item, index)=>/*#__PURE__*/ jsx("li", {
+                children: item
+            }, index))
+    });
+}
+
+function DisconnectedPanel({ generating, pending, labels, error, onConnect }) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            generating && /*#__PURE__*/ jsxs("div", {
+                className: "space-y-3",
+                role: "status",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "mx-auto flex size-48 items-center justify-center rounded-xl bg-surface-secondary",
+                        children: /*#__PURE__*/ jsx(Spinner, {
+                            size: "lg"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        className: "text-muted text-sm",
+                        children: labels.generating
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "space-y-5",
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        className: "max-w-md text-muted text-sm leading-relaxed",
+                        children: labels.disconnectedDescription
+                    }),
+                    /*#__PURE__*/ jsx(ConnectionInstructions, {
+                        items: labels.disconnectedInstructions
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ jsx("p", {
+                className: "text-danger text-sm",
+                role: "alert",
+                children: error
+            }),
+            !generating && /*#__PURE__*/ jsx(Button, {
+                className: "mt-2 min-h-11 w-full whitespace-nowrap sm:w-auto",
+                isPending: pending,
+                onPress: onConnect,
+                size: "lg",
+                variant: "secondary",
+                children: ({ isPending })=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            isPending && /*#__PURE__*/ jsx(Spinner, {
+                                color: "current",
+                                size: "sm"
+                            }),
+                            labels.connect
+                        ]
+                    })
+            })
+        ]
+    });
+}
+
+function formatTime(seconds) {
+    return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
+}
+function QRPanel({ qrCode, qrFormat, labels, timeRemaining, isRefreshing, error, onRefresh }) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex justify-center",
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: qrFormat === "ascii" ? "relative overflow-hidden rounded-xl bg-white p-2 shadow-md ring-1 ring-black/5" : "relative flex aspect-square w-48 items-center justify-center rounded-xl bg-white p-3 shadow-md ring-1 ring-black/5",
+                    children: [
+                        qrCode,
+                        timeRemaining <= 10 && /*#__PURE__*/ jsx("div", {
+                            className: "absolute inset-0 flex items-center justify-center rounded-xl bg-black/60 backdrop-blur-sm",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "text-center",
+                                children: [
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "font-bold text-2xl text-white",
+                                        children: formatTime(timeRemaining)
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: "text-white/80 text-xs",
+                                        children: labels.expiresSoon
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "space-y-2 text-center",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-center gap-2 text-muted",
+                        role: "status",
+                        children: [
+                            /*#__PURE__*/ jsx(Spinner, {
+                                color: "current",
+                                size: "sm"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "font-medium text-sm",
+                                children: labels.waiting
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        className: "text-muted text-xs",
+                        children: labels.expiresIn(formatTime(timeRemaining))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "border-border/60 border-t pt-5",
+                children: /*#__PURE__*/ jsx(ConnectionInstructions, {
+                    items: labels.instructions
+                })
+            }),
+            error && /*#__PURE__*/ jsx("p", {
+                className: "text-danger text-sm",
+                role: "alert",
+                children: error
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                className: "min-h-11 w-full sm:w-auto",
+                isPending: isRefreshing,
+                onPress: onRefresh,
+                variant: "tertiary",
+                children: ({ isPending })=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            isPending ? /*#__PURE__*/ jsx(Spinner, {
+                                color: "current",
+                                size: "sm"
+                            }) : /*#__PURE__*/ jsx(RefreshCw, {
+                                className: "h-4 w-4"
+                            }),
+                            labels.refresh
+                        ]
+                    })
+            })
+        ]
+    });
+}
+
+/** Pause hidden challenges and never overlap refreshes or automatically retry failures. */ function useQRRefresh({ enabled, expirySeconds, error, errorLabel, onRefresh }) {
+    const [timeRemaining, setTimeRemaining] = useState(expirySeconds);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [actionError, setActionError] = useState(null);
+    const pending = useRef(false);
+    const refresh = useCallback(async ()=>{
+        if (pending.current) return;
+        pending.current = true;
+        setIsRefreshing(true);
+        setActionError(null);
+        try {
+            await onRefresh();
+            setTimeRemaining(expirySeconds);
+        } catch  {
+            setActionError(errorLabel);
+        } finally{
+            pending.current = false;
+            setIsRefreshing(false);
+        }
+    }, [
+        onRefresh,
+        expirySeconds,
+        errorLabel
+    ]);
+    useEffect(()=>{
+        if (!enabled) {
+            setTimeRemaining(expirySeconds);
+            return;
+        }
+        if (isRefreshing || error || actionError) return;
+        const timer = setInterval(()=>setTimeRemaining((value)=>Math.max(0, value - 1)), 1000);
+        return ()=>clearInterval(timer);
+    }, [
+        enabled,
+        expirySeconds,
+        isRefreshing,
+        error,
+        actionError
+    ]);
+    useEffect(()=>{
+        if (enabled && timeRemaining === 0 && !error && !actionError && !isRefreshing) {
+            setTimeRemaining(expirySeconds);
+            void refresh();
+        }
+    }, [
+        enabled,
+        timeRemaining,
+        expirySeconds,
+        error,
+        actionError,
+        isRefreshing,
+        refresh
+    ]);
+    return {
+        timeRemaining,
+        isRefreshing,
+        actionError,
+        setActionError,
+        refresh
+    };
+}
+
+/** Controlled connection presentation. Authentication and automatic connection policy stay in the app. */ function ConnectionPanel({ state, labels, error, isActive = true, className = "", qrExpirySeconds = 60, onConnect, onRefreshQR }) {
+    const [isConnecting, setIsConnecting] = useState(false);
+    const pending = useRef(false);
+    const hasQR = state.status === "awaiting_scan";
+    const qr = useQRRefresh({
+        enabled: hasQR && isActive,
+        expirySeconds: Number.isFinite(qrExpirySeconds) ? Math.max(1, Math.floor(qrExpirySeconds)) : 60,
+        error,
+        errorLabel: labels.connectError,
+        onRefresh: onRefreshQR
+    });
+    const actionError = error || qr.actionError;
+    async function connect() {
+        if (pending.current) return;
+        pending.current = true;
+        setIsConnecting(true);
+        qr.setActionError(null);
+        try {
+            await onConnect();
+        } catch  {
+            qr.setActionError(labels.connectError);
+        } finally{
+            pending.current = false;
+            setIsConnecting(false);
+        }
+    }
+    if (state.status === "checking") {
+        return /*#__PURE__*/ jsxs("div", {
+            className: `flex items-center justify-center gap-3 py-10 text-muted text-sm ${className}`,
+            role: "status",
+            children: [
+                /*#__PURE__*/ jsx(Spinner, {
+                    size: "sm"
+                }),
+                labels.checking
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
+        className: `${state.status === "connected" ? "space-y-4" : "mx-auto w-full max-w-sm space-y-6 py-6 text-center"} ${className}`,
+        children: /*#__PURE__*/ jsx(AnimatePresence, {
+            mode: "wait",
+            children: state.status === "connected" ? /*#__PURE__*/ jsx(motion.div, {
+                animate: {
+                    opacity: 1,
+                    y: 0
+                },
+                className: "space-y-3",
+                exit: {
+                    opacity: 0,
+                    y: -10
+                },
+                initial: {
+                    opacity: 0,
+                    y: 10
+                },
+                children: state.content
+            }, "connected") : state.status === "awaiting_scan" ? /*#__PURE__*/ jsx(motion.div, {
+                animate: {
+                    opacity: 1,
+                    y: 0
+                },
+                className: "space-y-4",
+                exit: {
+                    opacity: 0,
+                    y: -10
+                },
+                initial: {
+                    opacity: 0,
+                    y: 10
+                },
+                children: /*#__PURE__*/ jsx(QRPanel, {
+                    error: actionError,
+                    isRefreshing: qr.isRefreshing,
+                    labels: labels,
+                    onRefresh: qr.refresh,
+                    qrCode: state.qrCode,
+                    qrFormat: state.qrFormat,
+                    timeRemaining: qr.timeRemaining
+                })
+            }, "qr") : /*#__PURE__*/ jsx(motion.div, {
+                animate: {
+                    opacity: 1,
+                    y: 0
+                },
+                className: "space-y-4",
+                exit: {
+                    opacity: 0,
+                    y: -10
+                },
+                initial: {
+                    opacity: 0,
+                    y: 10
+                },
+                children: /*#__PURE__*/ jsx(DisconnectedPanel, {
+                    error: actionError,
+                    generating: state.status === "generating",
+                    labels: labels,
+                    onConnect: connect,
+                    pending: isConnecting
+                })
+            }, "initial")
+        })
+    });
+}
+
+export { ConnectionPanel };