@elizaos/app-core 2.0.0-alpha.37

package/dist/components/onboarding/OnboardingStepNav.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ONBOARDING_STEPS, useApp } from "@elizaos/app-core/state";
+export function OnboardingStepNav() {
+    const { onboardingStep, t } = useApp();
+    const currentIndex = ONBOARDING_STEPS.findIndex((s) => s.id === onboardingStep);
+    return (_jsx("div", { className: "onboarding-left", children: _jsx("div", { className: `onboarding-step-list step-${currentIndex}`, children: ONBOARDING_STEPS.map((step, i) => {
+                let state = "";
+                if (i < currentIndex)
+                    state = "onboarding-step-item--done";
+                else if (i === currentIndex)
+                    state = "onboarding-step-item--active";
+                return (_jsxs("div", { className: `onboarding-step-item ${state}`, children: [_jsx("div", { className: "onboarding-step-dot" }), _jsxs("div", { className: "onboarding-step-info", children: [_jsx("span", { className: "onboarding-step-name", children: t(step.name) }), _jsx("span", { className: "onboarding-step-sub", children: t(step.subtitle) })] })] }, step.id));
+            }) }) }));
+}

package/dist/components/onboarding/PermissionsStep.d.ts

@@ -0,0 +1,2 @@
+export declare function PermissionsStep(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PermissionsStep.d.ts.map

package/dist/components/onboarding/PermissionsStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionsStep.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/PermissionsStep.tsx"],"names":[],"mappings":"AAGA,wBAAgB,eAAe,4CAgB9B"}

package/dist/components/onboarding/PermissionsStep.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PermissionsOnboardingSection } from "@elizaos/app-core/components";
+import { useApp } from "@elizaos/app-core/state";
+export function PermissionsStep() {
+    const { handleOnboardingNext, t } = useApp();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.systemAccessTitle") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsx(PermissionsOnboardingSection, { onContinue: (options) => void handleOnboardingNext(options) })] }));
+}

package/dist/components/onboarding/RpcStep.d.ts

@@ -0,0 +1,2 @@
+export declare function RpcStep(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RpcStep.d.ts.map

package/dist/components/onboarding/RpcStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RpcStep.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/RpcStep.tsx"],"names":[],"mappings":"AAKA,wBAAgB,OAAO,4CA4YtB"}

package/dist/components/onboarding/RpcStep.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useApp } from "@elizaos/app-core/state";
+import { useState } from "react";
+export function RpcStep() {
+    const { elizaCloudConnected, elizaCloudLoginBusy, elizaCloudLoginError, onboardingRunMode, onboardingCloudProvider, onboardingApiKey, handleCloudLogin, handleOnboardingNext, handleOnboardingBack, onboardingRpcKeys, setState, t, } = useApp();
+    const elizaCloudReady = elizaCloudConnected ||
+        (onboardingRunMode === "cloud" &&
+            onboardingCloudProvider === "elizacloud" &&
+            onboardingApiKey.trim().length > 0);
+    const [mode, setMode] = useState(elizaCloudReady ? "cloud" : "");
+    const rpcKeys = onboardingRpcKeys;
+    const setRpcKey = (key, value) => {
+        setState("onboardingRpcKeys", { ...rpcKeys, [key]: value });
+    };
+    const handleSkip = () => {
+        // Clear any partial RPC config and advance
+        void handleOnboardingNext();
+    };
+    // ── No mode chosen yet — show two option cards ──────────────────────
+    if (!mode) {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.rpcTitle") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsx("div", { className: "onboarding-question", children: t("onboarding.rpcQuestion") }), _jsx("p", { className: "onboarding-desc", children: t("onboarding.rpcDesc") }), _jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "0.75rem",
+                        width: "100%",
+                        maxWidth: "22rem",
+                        margin: "0 auto",
+                    }, children: [_jsx("button", { type: "button", className: "onboarding-provider-card onboarding-provider-card--recommended", onClick: () => {
+                                if (elizaCloudConnected) {
+                                    // Already connected — just mark cloud and advance
+                                    setState("onboardingRpcSelections", {
+                                        evm: "eliza-cloud",
+                                        bsc: "eliza-cloud",
+                                        solana: "eliza-cloud",
+                                    });
+                                    setMode("cloud");
+                                }
+                                else {
+                                    setMode("cloud");
+                                }
+                            }, style: { justifyContent: "center" }, children: _jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.rpcElizaCloud") }), _jsx("div", { className: "onboarding-provider-desc", children: t("onboarding.rpcElizaCloudDesc") })] }) }), _jsx("button", { type: "button", className: "onboarding-provider-card", onClick: () => setMode("byok"), style: { justifyContent: "center" }, children: _jsxs("div", { children: [_jsx("div", { className: "onboarding-provider-name", children: t("onboarding.rpcBringKeys") }), _jsx("div", { className: "onboarding-provider-desc", children: "Alchemy, QuickNode, Helius" })] }) })] }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: handleOnboardingBack, type: "button", children: t("onboarding.back") }), _jsx("button", { className: "onboarding-back-link", onClick: handleSkip, type: "button", children: t("onboarding.rpcSkip") })] })] }));
+    }
+    // ── Eliza Cloud mode ───────────────────────────────────────────────
+    if (mode === "cloud") {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.rpcTitle") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsx("div", { style: { width: "100%", textAlign: "center" }, children: elizaCloudConnected ? (_jsxs("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.5rem",
+                            padding: "0.625rem 1rem",
+                            border: "1px solid var(--ok-muted)",
+                            background: "var(--ok-subtle)",
+                            color: "var(--ok)",
+                            fontSize: "0.875rem",
+                            borderRadius: "0.5rem",
+                            justifyContent: "center",
+                        }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("title", { children: t("onboarding.connected") }), _jsx("polyline", { points: "20 6 9 17 4 12" })] }), t("onboarding.rpcConnectedCloud")] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "onboarding-confirm-btn", onClick: handleCloudLogin, disabled: elizaCloudLoginBusy || elizaCloudReady, children: elizaCloudLoginBusy
+                                    ? t("onboarding.connecting")
+                                    : elizaCloudReady
+                                        ? t("onboarding.connected")
+                                        : t("onboarding.connectAccount") }), elizaCloudLoginError &&
+                                (() => {
+                                    const urlMatch = elizaCloudLoginError.match(/^Open this link to log in: (.+)$/);
+                                    if (urlMatch) {
+                                        return (_jsxs("p", { style: {
+                                                fontSize: "0.8125rem",
+                                                marginTop: "0.5rem",
+                                                color: "var(--text)",
+                                            }, children: ["Open this link to log in:", " ", _jsx("a", { href: urlMatch[1], target: "_blank", rel: "noopener noreferrer", style: {
+                                                        color: "var(--text)",
+                                                        textDecoration: "underline",
+                                                    }, children: "Click here" })] }));
+                                    }
+                                    return (_jsx("p", { style: {
+                                            color: "var(--danger)",
+                                            fontSize: "0.8125rem",
+                                            marginTop: "0.5rem",
+                                        }, children: elizaCloudLoginError }));
+                                })(), _jsx("p", { className: "onboarding-desc", children: t("onboarding.freeCredits") })] })) }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: () => setMode(""), type: "button", children: t("onboarding.change") }), _jsx("button", { className: "onboarding-confirm-btn", onClick: () => {
+                                setState("onboardingRpcSelections", {
+                                    evm: "eliza-cloud",
+                                    bsc: "eliza-cloud",
+                                    solana: "eliza-cloud",
+                                });
+                                void handleOnboardingNext();
+                            }, disabled: !elizaCloudReady, type: "button", children: t("onboarding.next") ?? "Next" })] })] }));
+    }
+    // ── BYOK mode ───────────────────────────────────────────────────────
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "onboarding-section-title", children: [t("onboarding.rpcTitle"), _jsx("button", { type: "button", className: "onboarding-back-link", style: { marginLeft: "0.5rem", fontSize: "0.75rem" }, onClick: () => setMode(""), children: t("onboarding.change") })] }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsxs("div", { style: {
+                    width: "100%",
+                    textAlign: "left",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "1rem",
+                }, children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "rpc-alchemy", style: {
+                                    display: "block",
+                                    fontSize: "0.8125rem",
+                                    fontWeight: 600,
+                                    marginBottom: "0.375rem",
+                                    color: "var(--text)",
+                                }, children: t("onboarding.rpcAlchemyKey") }), _jsx("p", { className: "onboarding-desc", style: { marginBottom: "0.375rem", textAlign: "left" }, children: "Covers Ethereum, Base, Arbitrum, Optimism, Polygon, BSC" }), _jsx("input", { id: "rpc-alchemy", type: "password", className: "onboarding-input", placeholder: "Enter Alchemy API key", value: rpcKeys.ALCHEMY_API_KEY ?? "", onChange: (e) => setRpcKey("ALCHEMY_API_KEY", e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "rpc-helius", style: {
+                                    display: "block",
+                                    fontSize: "0.8125rem",
+                                    fontWeight: 600,
+                                    marginBottom: "0.375rem",
+                                    color: "var(--text)",
+                                }, children: t("onboarding.rpcHeliusKey") }), _jsx("p", { className: "onboarding-desc", style: { marginBottom: "0.375rem", textAlign: "left" }, children: "Solana mainnet RPC & token data" }), _jsx("input", { id: "rpc-helius", type: "password", className: "onboarding-input", placeholder: "Enter Helius API key", value: rpcKeys.HELIUS_API_KEY ?? "", onChange: (e) => setRpcKey("HELIUS_API_KEY", e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "rpc-birdeye", style: {
+                                    display: "block",
+                                    fontSize: "0.8125rem",
+                                    fontWeight: 600,
+                                    marginBottom: "0.375rem",
+                                    color: "var(--text)",
+                                }, children: t("onboarding.rpcBirdeyeKey") }), _jsx("input", { id: "rpc-birdeye", type: "password", className: "onboarding-input", placeholder: "Enter Birdeye API key (optional)", value: rpcKeys.BIRDEYE_API_KEY ?? "", onChange: (e) => setRpcKey("BIRDEYE_API_KEY", e.target.value) })] })] }), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: () => setMode(""), type: "button", children: t("onboarding.back") }), _jsx("button", { className: "onboarding-confirm-btn", onClick: () => {
+                            // Build RPC selections based on what keys were entered
+                            const selections = {};
+                            if (rpcKeys.ALCHEMY_API_KEY) {
+                                selections.evm = "alchemy";
+                                selections.bsc = "alchemy";
+                            }
+                            if (rpcKeys.HELIUS_API_KEY) {
+                                selections.solana = "helius-birdeye";
+                            }
+                            setState("onboardingRpcSelections", selections);
+                            void handleOnboardingNext();
+                        }, type: "button", children: t("onboarding.next") ?? "Next" })] })] }));
+}

package/dist/components/onboarding/WakeUpStep.d.ts

@@ -0,0 +1,2 @@
+export declare function WakeUpStep(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WakeUpStep.d.ts.map

package/dist/components/onboarding/WakeUpStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WakeUpStep.d.ts","sourceRoot":"","sources":["../../../src/components/onboarding/WakeUpStep.tsx"],"names":[],"mappings":"AAIA,wBAAgB,UAAU,4CAmLzB"}

package/dist/components/onboarding/WakeUpStep.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { client } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { useCallback, useRef, useState } from "react";
+export function WakeUpStep() {
+    const { handleOnboardingNext, t } = useApp();
+    const [showImport, setShowImport] = useState(false);
+    const [importFile, setImportFile] = useState(null);
+    const [importPassword, setImportPassword] = useState("");
+    const [importBusy, setImportBusy] = useState(false);
+    const [importError, setImportError] = useState(null);
+    const [importSuccess, setImportSuccess] = useState(null);
+    const importFileRef = useRef(null);
+    const importBusyRef = useRef(false);
+    const handleImportAgent = useCallback(async () => {
+        if (importBusyRef.current || importBusy)
+            return;
+        if (!importFile) {
+            setImportError(t("onboarding.selectFileError"));
+            return;
+        }
+        if (!importPassword || importPassword.length < 4) {
+            setImportError(t("onboarding.passwordMinError"));
+            return;
+        }
+        try {
+            importBusyRef.current = true;
+            setImportBusy(true);
+            setImportError(null);
+            setImportSuccess(null);
+            const fileBuffer = await importFile.arrayBuffer();
+            const result = await client.importAgent(importPassword, fileBuffer);
+            const counts = result.counts;
+            const summary = [
+                counts.memories ? `${counts.memories} memories` : null,
+                counts.entities ? `${counts.entities} entities` : null,
+                counts.rooms ? `${counts.rooms} rooms` : null,
+            ]
+                .filter(Boolean)
+                .join(", ");
+            setImportSuccess(`Imported "${result.agentName}" successfully${summary ? `: ${summary}` : ""}. Restarting...`);
+            setImportPassword("");
+            setImportFile(null);
+            setTimeout(() => {
+                window.location.reload();
+            }, 2000);
+        }
+        catch (err) {
+            setImportError(err instanceof Error ? err.message : "Import failed");
+        }
+        finally {
+            importBusyRef.current = false;
+            setImportBusy(false);
+        }
+    }, [importBusy, importFile, importPassword, t]);
+    if (showImport) {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.importAgent") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsx("p", { className: "onboarding-desc", style: { marginBottom: "16px" }, children: t("onboarding.importDesc") }), _jsx("input", { ref: importFileRef, type: "file", accept: ".eliza-agent", onChange: (e) => {
+                        setImportFile(e.target.files?.[0] ?? null);
+                        setImportError(null);
+                    }, className: "onboarding-input", style: { fontSize: "13px", textAlign: "left", marginBottom: "12px" } }), _jsx("input", { type: "password", placeholder: t("onboarding.decryptionPasswordPlaceholder"), value: importPassword, onChange: (e) => {
+                        setImportPassword(e.target.value);
+                        setImportError(null);
+                    }, className: "onboarding-input", style: { marginBottom: "12px" } }), importError && (_jsx("p", { className: "onboarding-desc", style: { color: "var(--danger)", marginBottom: "8px" }, children: importError })), importSuccess && (_jsx("p", { className: "onboarding-desc", style: { color: "var(--ok)", marginBottom: "8px" }, children: importSuccess })), _jsxs("div", { className: "onboarding-panel-footer", children: [_jsx("button", { className: "onboarding-back-link", onClick: () => {
+                                setShowImport(false);
+                                setImportError(null);
+                                setImportSuccess(null);
+                                setImportFile(null);
+                                setImportPassword("");
+                            }, type: "button", children: t("onboarding.cancel") }), _jsx("button", { className: "onboarding-confirm-btn", disabled: importBusy || !importFile, onClick: () => void handleImportAgent(), type: "button", children: importBusy ? t("onboarding.importing") : t("onboarding.restore") })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "onboarding-section-title", children: t("onboarding.welcomeTitle") }), _jsx("div", { className: "onboarding-divider", children: _jsx("div", { className: "onboarding-divider-diamond" }) }), _jsx("p", { className: "onboarding-desc", children: t("onboarding.welcomeSubtitle") }), _jsxs("div", { style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "12px",
+                    width: "100%",
+                    marginTop: "16px",
+                }, children: [_jsx("button", { className: "onboarding-confirm-btn", onClick: () => handleOnboardingNext(), type: "button", style: { width: "100%" }, children: t("onboarding.createNewAgent") }), _jsx("button", { className: "onboarding-confirm-btn", onClick: () => setShowImport(true), type: "button", style: {
+                            width: "100%",
+                            background: "transparent",
+                            border: "1px solid var(--border)",
+                        }, children: t("onboarding.restoreFromBackup") })] })] }));
+}

package/dist/components/permissions/PermissionIcon.d.ts

@@ -0,0 +1,4 @@
+export declare function PermissionIcon({ icon }: {
+    icon: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PermissionIcon.d.ts.map

package/dist/components/permissions/PermissionIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionIcon.d.ts","sourceRoot":"","sources":["../../../src/components/permissions/PermissionIcon.tsx"],"names":[],"mappings":"AAUA,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,2CAcxD"}

package/dist/components/permissions/PermissionIcon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Camera, Mic, Monitor, MousePointer2, Settings, Terminal, } from "lucide-react";
+export function PermissionIcon({ icon }) {
+    const icons = {
+        cursor: _jsx(MousePointer2, { className: "w-4 h-4" }),
+        monitor: _jsx(Monitor, { className: "w-4 h-4" }),
+        mic: _jsx(Mic, { className: "w-4 h-4" }),
+        camera: _jsx(Camera, { className: "w-4 h-4" }),
+        terminal: _jsx(Terminal, { className: "w-4 h-4" }),
+    };
+    return (_jsx("span", { className: "text-base", children: icons[icon] ?? _jsx(Settings, { className: "w-4 h-4" }) }));
+}

package/dist/components/permissions/StreamingPermissions.d.ts

@@ -0,0 +1,20 @@
+type StreamingPermissionMode = "mobile" | "web";
+interface StreamingPermissionsSettingsViewProps {
+    description: string;
+    mode: StreamingPermissionMode;
+    testId: string;
+    title: string;
+}
+export declare function StreamingPermissionsSettingsView({ description, mode, testId, title, }: StreamingPermissionsSettingsViewProps): import("react/jsx-runtime").JSX.Element;
+interface StreamingPermissionsOnboardingViewProps {
+    description: string;
+    mode: StreamingPermissionMode;
+    onContinue: (options?: {
+        allowPermissionBypass?: boolean;
+    }) => void;
+    testId: string;
+    title: string;
+}
+export declare function StreamingPermissionsOnboardingView({ description, mode, onContinue, testId, title, }: StreamingPermissionsOnboardingViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StreamingPermissions.d.ts.map

package/dist/components/permissions/StreamingPermissions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamingPermissions.d.ts","sourceRoot":"","sources":["../../../src/components/permissions/StreamingPermissions.tsx"],"names":[],"mappings":"AAQA,KAAK,uBAAuB,GAAG,QAAQ,GAAG,KAAK,CAAC;AA4LhD,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,uBAAuB,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,WAAW,EACX,IAAI,EACJ,MAAM,EACN,KAAK,GACN,EAAE,qCAAqC,2CAqEvC;AAED,UAAU,uCAAuC;IAC/C,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,uBAAuB,CAAC;IAC9B,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,qBAAqB,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,kCAAkC,CAAC,EACjD,WAAW,EACX,IAAI,EACJ,UAAU,EACV,MAAM,EACN,KAAK,GACN,EAAE,uCAAuC,2CAkFzC"}

package/dist/components/permissions/StreamingPermissions.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { Check, Cloud } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useApp } from "../../state";
+import { StatusBadge } from "../ui-badges";
+import { PermissionIcon } from "./PermissionIcon";
+const MEDIA_PERMISSIONS = [
+    {
+        id: "camera",
+        name: "Camera",
+        description: "Stream video to your agent for vision tasks",
+        icon: "camera",
+    },
+    {
+        id: "microphone",
+        name: "Microphone",
+        description: "Stream audio for voice interaction with your agent",
+        icon: "mic",
+    },
+];
+function getCameraPermissionPlugin() {
+    const cap = globalThis.Capacitor;
+    if (!cap?.Plugins)
+        return null;
+    return (cap.Plugins.MiladyCamera ?? null);
+}
+async function checkMobilePermissions() {
+    const states = {};
+    const plugin = getCameraPermissionPlugin();
+    if (!plugin?.checkPermissions)
+        return states;
+    try {
+        const result = await plugin.checkPermissions();
+        states.camera = result.camera;
+        states.microphone = result.microphone;
+    }
+    catch (err) {
+        console.error("Failed to check mobile permissions:", err);
+    }
+    return states;
+}
+async function checkWebPermissions() {
+    const states = {};
+    try {
+        if (navigator.permissions) {
+            const [cameraPermission, microphonePermission] = await Promise.all([
+                navigator.permissions.query({ name: "camera" }),
+                navigator.permissions.query({
+                    name: "microphone",
+                }),
+            ]);
+            states.camera = cameraPermission.state;
+            states.microphone = microphonePermission.state;
+        }
+    }
+    catch {
+        // Permissions API may not support camera/mic queries in all browsers.
+    }
+    return states;
+}
+function useStreamingPermissions(mode) {
+    const [permStates, setPermStates] = useState({});
+    const [checking, setChecking] = useState(true);
+    const checkPermissions = useCallback(async () => {
+        if (mode === "mobile") {
+            return checkMobilePermissions();
+        }
+        return checkWebPermissions();
+    }, [mode]);
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            setChecking(true);
+            const nextStates = await checkPermissions();
+            if (!cancelled) {
+                setPermStates(nextStates);
+                setChecking(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [checkPermissions]);
+    const requestPermission = useCallback(async (id) => {
+        if (mode === "mobile") {
+            try {
+                const plugin = getCameraPermissionPlugin();
+                if (!plugin?.requestPermissions)
+                    return;
+                const result = await plugin.requestPermissions();
+                setPermStates((prev) => ({
+                    ...prev,
+                    camera: result.camera,
+                    microphone: result.microphone,
+                }));
+            }
+            catch (err) {
+                console.error("Failed to request mobile permission:", err);
+            }
+            return;
+        }
+        try {
+            if (id === "camera") {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: true,
+                });
+                stream.getTracks().forEach((track) => {
+                    track.stop();
+                });
+                setPermStates((prev) => ({ ...prev, camera: "granted" }));
+                return;
+            }
+            if (id === "microphone") {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    audio: true,
+                });
+                stream.getTracks().forEach((track) => {
+                    track.stop();
+                });
+                setPermStates((prev) => ({ ...prev, microphone: "granted" }));
+            }
+        }
+        catch (err) {
+            console.error(`Failed to request browser ${id} permission:`, err);
+            setPermStates((prev) => ({ ...prev, [id]: "denied" }));
+        }
+    }, [mode]);
+    return { checking, permStates, requestPermission };
+}
+function getBadgeTone(state) {
+    if (state === "granted")
+        return "success";
+    if (state === "denied")
+        return "danger";
+    return "warning";
+}
+function getBadgeLabel(state) {
+    if (state === "granted")
+        return "Granted";
+    if (state === "denied")
+        return "Denied";
+    return "Not Set";
+}
+function useAllPermissionsGranted(permStates) {
+    return useMemo(() => MEDIA_PERMISSIONS.every((def) => permStates[def.id] === "granted"), [permStates]);
+}
+export function StreamingPermissionsSettingsView({ description, mode, testId, title, }) {
+    const { t } = useApp();
+    const { checking, permStates, requestPermission } = useStreamingPermissions(mode);
+    if (checking) {
+        return (_jsx("div", { className: "text-center py-6 text-[var(--muted)] text-xs", children: t("permissionssection.LoadingPermissions") }));
+    }
+    return (_jsx("div", { className: "space-y-6", "data-testid": testId, children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Cloud, { className: "w-4 h-4 text-[var(--accent)]" }), _jsx("div", { className: "font-bold text-sm", children: title })] }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mb-3", children: description }), _jsx("div", { className: "border border-[var(--border)] bg-[var(--card)]", children: MEDIA_PERMISSIONS.map((def) => {
+                        const status = permStates[def.id] ?? "unknown";
+                        const isGranted = status === "granted";
+                        return (_jsxs("div", { className: "flex items-center gap-3 py-2.5 px-3 border-b border-[var(--border)] last:border-b-0", children: [_jsx(PermissionIcon, { icon: def.icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-semibold text-[13px]", children: def.name }), _jsx(StatusBadge, { label: getBadgeLabel(status), tone: getBadgeTone(status), withDot: true, className: "rounded-full font-semibold" })] }), _jsx("div", { className: "text-[11px] text-[var(--muted)] mt-0.5 truncate", children: def.description })] }), !isGranted ? (_jsx(Button, { variant: "default", size: "sm", className: "h-auto text-[11px] py-1 px-2.5", onClick: () => void requestPermission(def.id), children: t("permissionssection.Grant") || "Grant" })) : (_jsx(Check, { className: "w-4 h-4 text-[var(--ok)]" }))] }, def.id));
+                    }) })] }) }));
+}
+export function StreamingPermissionsOnboardingView({ description, mode, onContinue, testId, title, }) {
+    const { t } = useApp();
+    const { checking, permStates, requestPermission } = useStreamingPermissions(mode);
+    const allGranted = useAllPermissionsGranted(permStates);
+    if (checking) {
+        return (_jsx("div", { className: "text-center py-8", children: _jsx("div", { className: "text-[var(--muted)] text-sm", children: t("permissionssection.CheckingPermissions") }) }));
+    }
+    return (_jsxs("div", { "data-testid": testId, children: [_jsxs("div", { className: "text-center mb-6", children: [_jsx("div", { className: "text-xl font-bold mb-2", children: title }), _jsx("div", { className: "text-[var(--muted)] text-sm", children: description })] }), _jsx("div", { className: "space-y-3 mb-6", children: MEDIA_PERMISSIONS.map((def) => {
+                    const isGranted = permStates[def.id] === "granted";
+                    return (_jsxs("div", { className: `flex items-center gap-4 p-4 border ${isGranted
+                            ? "border-[var(--ok)] bg-[var(--ok)]/10"
+                            : "border-[var(--border)] bg-[var(--card)]"}`, children: [_jsx(PermissionIcon, { icon: def.icon }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "font-semibold text-sm", children: def.name }), _jsx("div", { className: "text-[11px] text-[var(--muted)]", children: def.description })] }), isGranted ? (_jsx(Check, { className: "w-4 h-4 text-[var(--ok)]" })) : (_jsx(Button, { variant: "default", size: "sm", className: "h-auto text-xs py-1.5 px-3", onClick: () => void requestPermission(def.id), children: t("permissionssection.Grant") || "Grant" }))] }, def.id));
+                }) }), _jsxs("div", { className: "flex justify-center gap-3", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-auto text-xs py-2 px-6 opacity-70", onClick: () => onContinue({ allowPermissionBypass: true }), children: t("permissionssection.SkipForNow") }), allGranted ? (_jsx(Button, { variant: "default", size: "sm", className: "h-auto text-xs py-2 px-6 bg-accent border-accent text-accent-foreground", onClick: () => onContinue(), children: t("permissionssection.Continue") })) : null] })] }));
+}

package/dist/components/plugins/showcase-data.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Synthetic showcase plugin that demonstrates all 23 field renderers.
+ * Extracted from PluginsView.tsx to reduce file size.
+ */
+import type { PluginInfo } from "../../api";
+export declare const SHOWCASE_PLUGIN: PluginInfo;
+//# sourceMappingURL=showcase-data.d.ts.map

package/dist/components/plugins/showcase-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"showcase-data.d.ts","sourceRoot":"","sources":["../../../src/components/plugins/showcase-data.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,eAAO,MAAM,eAAe,EAAE,UAyd7B,CAAC"}