@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/settings/IdentitySettingsSection.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, SaveFooter, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, Textarea, useTimeout, } from "@elizaos/ui";
+import { Volume2, VolumeX } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { client } from "../../api/index.js";
+import { dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT } from "../../events/index.js";
+import { useApp } from "../../state/index.js";
+import { replaceNameTokens } from "../../utils/name-tokens.js";
+import { EDGE_BACKUP_VOICES, hasConfiguredApiKey, PREMADE_VOICES, sanitizeApiKey, } from "../../voice/types.js";
+import { DEFAULT_ELEVEN_FAST_MODEL, EDGE_VOICE_GROUPS, ELEVENLABS_VOICE_GROUPS, } from "../character/character-voice-config.js";
+import { SettingsField, SettingsFieldLabel, } from "./settings-control-primitives.js";
+function resolveEditableVoiceSelectionKey(config) {
+    const elevenLabsVoiceId = typeof config?.elevenlabs?.voiceId === "string"
+        ? config.elevenlabs.voiceId.trim()
+        : "";
+    const edgeVoiceId = typeof config?.edge?.voice === "string" ? config.edge.voice.trim() : "";
+    const provider = config?.provider ??
+        (edgeVoiceId && !elevenLabsVoiceId ? "edge" : "elevenlabs");
+    return `${provider}:${provider === "edge" ? edgeVoiceId : elevenLabsVoiceId}`;
+}
+function resolveVisibleVoicePresetId(config, useElevenLabs) {
+    if (useElevenLabs) {
+        const elevenLabsVoiceId = typeof config.elevenlabs?.voiceId === "string"
+            ? config.elevenlabs.voiceId.trim()
+            : "";
+        if (!elevenLabsVoiceId)
+            return null;
+        return (PREMADE_VOICES.find((preset) => preset.voiceId === elevenLabsVoiceId)
+            ?.id ?? null);
+    }
+    const edgeVoiceId = typeof config.edge?.voice === "string" ? config.edge.voice.trim() : "";
+    if (!edgeVoiceId)
+        return null;
+    return (EDGE_BACKUP_VOICES.find((preset) => preset.voiceId === edgeVoiceId)?.id ??
+        null);
+}
+function normalizeVoiceConfigForSave(args) {
+    const provider = args.voiceConfig.provider ?? (args.useElevenLabs ? "elevenlabs" : "edge");
+    if (provider === "edge") {
+        return {
+            ...args.voiceConfig,
+            provider: "edge",
+            edge: args.voiceConfig.edge ?? {},
+        };
+    }
+    const hasElevenLabsApiKey = hasConfiguredApiKey(args.voiceConfig.elevenlabs?.apiKey);
+    const defaultVoiceMode = typeof args.voiceConfig.mode === "string"
+        ? args.voiceConfig.mode
+        : args.useElevenLabs && !hasElevenLabsApiKey
+            ? "cloud"
+            : "own-key";
+    const normalized = {
+        ...(args.voiceConfig.elevenlabs ?? {}),
+        modelId: args.voiceConfig.elevenlabs?.modelId ?? DEFAULT_ELEVEN_FAST_MODEL,
+    };
+    const sanitizedKey = sanitizeApiKey(normalized.apiKey);
+    if (sanitizedKey)
+        normalized.apiKey = sanitizedKey;
+    else
+        delete normalized.apiKey;
+    return {
+        ...args.voiceConfig,
+        provider: "elevenlabs",
+        mode: defaultVoiceMode,
+        elevenlabs: normalized,
+    };
+}
+export function IdentitySettingsSection() {
+    const { setTimeout } = useTimeout();
+    const { t, characterData, characterDraft, characterLoading, handleCharacterFieldInput, handleSaveCharacter, loadCharacter, elizaCloudConnected, elizaCloudVoiceProxyAvailable, } = useApp();
+    const useElevenLabs = elizaCloudConnected || elizaCloudVoiceProxyAvailable;
+    const [voiceConfig, setVoiceConfig] = useState({});
+    const [savedVoiceConfig, setSavedVoiceConfig] = useState({});
+    const [voiceLoading, setVoiceLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [saveSuccess, setSaveSuccess] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [voiceTesting, setVoiceTesting] = useState(false);
+    const audioRef = useRef(null);
+    const attemptedInitialCharacterLoadRef = useRef(false);
+    const hasCharacterDraft = Object.keys(characterDraft).length > 0;
+    useEffect(() => {
+        if (attemptedInitialCharacterLoadRef.current ||
+            characterLoading ||
+            characterData ||
+            hasCharacterDraft) {
+            return;
+        }
+        attemptedInitialCharacterLoadRef.current = true;
+        void loadCharacter();
+    }, [characterData, characterLoading, hasCharacterDraft, loadCharacter]);
+    useEffect(() => {
+        let cancelled = false;
+        void (async () => {
+            setVoiceLoading(true);
+            try {
+                const config = await client.getConfig();
+                const messages = (config.messages ?? {});
+                const tts = messages.tts ?? {};
+                if (!cancelled) {
+                    setVoiceConfig(tts);
+                    setSavedVoiceConfig(tts);
+                }
+            }
+            catch {
+                if (!cancelled) {
+                    setVoiceConfig({});
+                    setSavedVoiceConfig({});
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setVoiceLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (!audioRef.current)
+                return;
+            audioRef.current.pause();
+            audioRef.current.currentTime = 0;
+            audioRef.current = null;
+        };
+    }, []);
+    const stopVoicePreview = useCallback(() => {
+        if (!audioRef.current)
+            return;
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+        audioRef.current = null;
+        setVoiceTesting(false);
+    }, []);
+    const visibleVoicePresetId = useMemo(() => resolveVisibleVoicePresetId(voiceConfig, useElevenLabs), [useElevenLabs, voiceConfig]);
+    const activeVoicePreset = useMemo(() => {
+        const presets = useElevenLabs ? PREMADE_VOICES : EDGE_BACKUP_VOICES;
+        return presets.find((preset) => preset.id === visibleVoicePresetId) ?? null;
+    }, [useElevenLabs, visibleVoicePresetId]);
+    const voiceGroups = useMemo(() => {
+        if (useElevenLabs) {
+            return ELEVENLABS_VOICE_GROUPS.map((group) => ({
+                label: t(group.labelKey, { defaultValue: group.defaultLabel }),
+                items: group.items.map((item) => {
+                    const preset = PREMADE_VOICES.find((entry) => entry.id === item.id);
+                    return {
+                        id: item.id,
+                        text: preset?.nameKey
+                            ? t(preset.nameKey, { defaultValue: preset.name })
+                            : (preset?.name ?? item.text),
+                        hint: preset?.hintKey
+                            ? t(preset.hintKey, { defaultValue: preset.hint })
+                            : preset?.hint,
+                    };
+                }),
+            }));
+        }
+        return EDGE_VOICE_GROUPS.map((group) => ({
+            label: t(group.labelKey, { defaultValue: group.defaultLabel }),
+            items: group.items.map((item) => {
+                const preset = EDGE_BACKUP_VOICES.find((entry) => entry.id === item.id);
+                return {
+                    id: item.id,
+                    text: preset?.nameKey
+                        ? t(preset.nameKey, { defaultValue: preset.name })
+                        : (preset?.name ?? item.text),
+                    hint: preset?.hintKey
+                        ? t(preset.hintKey, { defaultValue: preset.hint })
+                        : preset?.hint,
+                };
+            }),
+        }));
+    }, [t, useElevenLabs]);
+    const savedName = typeof characterData?.name === "string" ? characterData.name : "";
+    const savedSystem = typeof characterData?.system === "string"
+        ? replaceNameTokens(characterData.system, savedName)
+        : "";
+    const draftName = typeof characterDraft.name === "string" ? characterDraft.name : "";
+    const draftSystem = typeof characterDraft.system === "string" ? characterDraft.system : "";
+    const characterDirty = draftName !== savedName || draftSystem !== savedSystem;
+    const voiceDirty = resolveEditableVoiceSelectionKey(voiceConfig) !==
+        resolveEditableVoiceSelectionKey(savedVoiceConfig);
+    const dirty = characterDirty || voiceDirty;
+    const showCharacterBootstrapping = !characterData &&
+        !hasCharacterDraft &&
+        (characterLoading || !attemptedInitialCharacterLoadRef.current);
+    const handleVoiceSelect = useCallback((presetId) => {
+        stopVoicePreview();
+        if (useElevenLabs) {
+            const preset = PREMADE_VOICES.find((entry) => entry.id === presetId);
+            if (!preset)
+                return;
+            setVoiceConfig((prev) => {
+                const existing = typeof prev.elevenlabs === "object" ? prev.elevenlabs : {};
+                return {
+                    ...prev,
+                    provider: "elevenlabs",
+                    elevenlabs: {
+                        ...existing,
+                        voiceId: preset.voiceId,
+                    },
+                };
+            });
+            return;
+        }
+        const preset = EDGE_BACKUP_VOICES.find((entry) => entry.id === presetId);
+        if (!preset)
+            return;
+        setVoiceConfig((prev) => {
+            const existingEdge = typeof prev.edge === "object" ? prev.edge : {};
+            return {
+                ...prev,
+                provider: "edge",
+                edge: {
+                    ...existingEdge,
+                    voice: preset.voiceId,
+                },
+            };
+        });
+    }, [stopVoicePreview, useElevenLabs]);
+    const handlePreviewVoice = useCallback(() => {
+        if (!activeVoicePreset?.previewUrl)
+            return;
+        stopVoicePreview();
+        setVoiceTesting(true);
+        const audio = new Audio(activeVoicePreset.previewUrl);
+        audioRef.current = audio;
+        audio.onended = () => {
+            audioRef.current = null;
+            setVoiceTesting(false);
+        };
+        audio.onerror = () => {
+            audioRef.current = null;
+            setVoiceTesting(false);
+        };
+        audio.play().catch(() => {
+            audioRef.current = null;
+            setVoiceTesting(false);
+        });
+    }, [activeVoicePreset, stopVoicePreview]);
+    const handleSave = useCallback(async () => {
+        if (!dirty)
+            return;
+        setSaving(true);
+        setSaveError(null);
+        setSaveSuccess(false);
+        try {
+            if (characterDirty) {
+                await handleSaveCharacter();
+            }
+            if (voiceDirty) {
+                const config = await client.getConfig();
+                const messages = (config.messages ?? {});
+                const normalizedVoiceConfig = normalizeVoiceConfigForSave({
+                    voiceConfig,
+                    useElevenLabs,
+                });
+                await client.updateConfig({
+                    messages: {
+                        ...messages,
+                        tts: normalizedVoiceConfig,
+                    },
+                });
+                dispatchWindowEvent(VOICE_CONFIG_UPDATED_EVENT, normalizedVoiceConfig);
+                setSavedVoiceConfig(normalizedVoiceConfig);
+            }
+            setSaveSuccess(true);
+            setTimeout(() => setSaveSuccess(false), 2500);
+        }
+        catch (error) {
+            setSaveError(error instanceof Error
+                ? error.message
+                : t("settings.identity.saveFailed", {
+                    defaultValue: "Failed to save identity settings.",
+                }));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [
+        characterDirty,
+        dirty,
+        handleSaveCharacter,
+        setTimeout,
+        t,
+        useElevenLabs,
+        voiceConfig,
+        voiceDirty,
+    ]);
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [showCharacterBootstrapping ? (_jsx("div", { className: "rounded-2xl border border-border/60 bg-card/92 px-4 py-6 text-center text-xs text-muted shadow-sm", children: t("settings.identity.loading", {
+                    defaultValue: "Loading identity settings…",
+                }) })) : null, _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(SettingsField, { className: "min-w-0", children: [_jsx(SettingsFieldLabel, { htmlFor: "settings-identity-name", children: t("common.name", { defaultValue: "Name" }) }), _jsx(Input, { id: "settings-identity-name", type: "text", value: draftName, placeholder: t("startupshell.AgentName", {
+                                    defaultValue: "Agent name",
+                                }), onChange: (event) => handleCharacterFieldInput("name", event.target.value), className: "rounded-xl border-border/60 bg-card/80" })] }), _jsxs(SettingsField, { className: "min-w-0", children: [_jsx(SettingsFieldLabel, { id: "settings-identity-voice-label", children: t("common.voice", { defaultValue: "Voice" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: visibleVoicePresetId ?? undefined, onValueChange: (value) => handleVoiceSelect(value), children: [_jsx(SelectTrigger, { "aria-labelledby": "settings-identity-voice-label", className: "min-w-0 flex-1 h-11 rounded-xl border-border/60 bg-card/80 px-3 text-sm shadow-none", children: _jsx(SelectValue, { placeholder: t("charactereditor.SelectAVoice", {
+                                                        defaultValue: "Select a voice",
+                                                    }) }) }), _jsx(SelectContent, { className: "border-border/60 bg-bg/92 shadow-2xl backdrop-blur-md", children: voiceGroups.map((group) => (_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { className: "px-2.5 py-1 text-2xs font-semibold text-muted", children: group.label }), group.items.map((item) => (_jsx(SelectItem, { value: item.id, textValue: item.text, children: _jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "font-semibold", children: item.text }), item.hint ? (_jsx("span", { className: "text-muted text-xs", children: item.hint })) : null] }) }, item.id)))] }, group.label))) })] }), _jsx(Button, { type: "button", variant: voiceTesting ? "destructive" : "ghost", size: "icon", className: "h-10 w-10 shrink-0 rounded-full", onClick: voiceTesting ? stopVoicePreview : handlePreviewVoice, "aria-label": voiceTesting
+                                            ? t("settings.identity.stopVoicePreview", {
+                                                defaultValue: "Stop voice preview",
+                                            })
+                                            : t("settings.identity.previewVoice", {
+                                                defaultValue: "Preview voice",
+                                            }), disabled: !activeVoicePreset?.previewUrl || voiceLoading, children: voiceTesting ? (_jsx(VolumeX, { className: "h-4 w-4" })) : (_jsx(Volume2, { className: "h-4 w-4" })) })] })] })] }), _jsxs(SettingsField, { children: [_jsx(SettingsFieldLabel, { htmlFor: "settings-identity-system-prompt", children: t("settings.identity.systemPromptLabel", {
+                            defaultValue: "System prompt",
+                        }) }), _jsx(Textarea, { id: "settings-identity-system-prompt", value: draftSystem, rows: 10, maxLength: 100000, placeholder: t("charactereditor.SystemPromptPlaceholder", {
+                            defaultValue: "Write in first person...",
+                        }), onChange: (event) => handleCharacterFieldInput("system", event.target.value), className: "min-h-[14rem] rounded-xl border-border/60 bg-card/80 font-mono text-xs leading-relaxed" })] }), _jsx(SaveFooter, { dirty: dirty, saving: saving, saveError: saveError, saveSuccess: saveSuccess, onSave: () => void handleSave() })] }));
+}

package/components/settings/PermissionsSection.d.ts

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

package/components/settings/PermissionsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/PermissionsSection.tsx"],"names":[],"mappings":"AA+WA,wBAAgB,kBAAkB,4CAIjC"}

package/components/settings/PermissionsSection.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useCallback, useMemo } from "react";
+import { useBootConfig } from "../../config/boot-config-react.js";
+import { isDesktopPlatform, isNative, isWebPlatform } from "../../platform/index.js";
+import { useApp } from "../../state/index.js";
+import { StreamingPermissionsSettingsView } from "../permissions/StreamingPermissions.js";
+import { CapabilityToggle, PermissionRow, useDesktopPermissionsState, } from "./permission-controls.js";
+import { CAPABILITIES, SYSTEM_PERMISSIONS } from "./permission-types.js";
+const PLATFORM_COPY = {
+    darwin: {
+        systemDescription: {
+            key: "permissionssection.MacSystemPermissionsDescription",
+            defaultValue: "Review the native permissions the app needs for desktop control, voice input, and visual analysis. macOS changes may require opening System Settings.",
+        },
+        grantNote: {
+            key: "permissionssection.MacGrantAccessNote",
+            defaultValue: "macOS requires Accessibility permission for computer control. Open System Settings → Privacy & Security to grant access.",
+        },
+    },
+    win32: {
+        systemDescription: {
+            key: "permissionssection.WindowsSystemPermissionsDescription",
+            defaultValue: "Open Windows privacy settings for microphone and camera, then verify access by using those features in the app.",
+        },
+        grantNote: {
+            key: "permissionssection.WindowsGrantPermissionsNote",
+            defaultValue: "Windows may not list the app as a named app here. Use Privacy settings to enable microphone and camera access, then test them in the app.",
+        },
+    },
+    linux: {
+        systemDescription: {
+            key: "permissionssection.SystemPermissionsDescription",
+            defaultValue: "Grant the runtime access it needs for voice input, camera capture, shell tasks, and desktop automation features.",
+        },
+        grantNote: {
+            key: "permissionssection.GrantPermissionsNote",
+            defaultValue: "Grant permissions to enable features like voice input and computer control.",
+        },
+    },
+};
+function platformCopy(platform) {
+    if (platform === "darwin")
+        return PLATFORM_COPY.darwin;
+    if (platform === "win32")
+        return PLATFORM_COPY.win32;
+    return PLATFORM_COPY.linux;
+}
+/* ── Streaming permission views (mobile / web) ──────────────────── */
+function MobilePermissionsView() {
+    const { t } = useApp();
+    const { appBlockerSettingsCard: AppBlockerSettingsCard, websiteBlockerSettingsCard: WebsiteBlockerSettingsCard, } = useBootConfig();
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(StreamingPermissionsSettingsView, { mode: "mobile", testId: "mobile-permissions", title: t("permissionssection.StreamingPermissions", {
+                    defaultValue: "Streaming Permissions",
+                }), description: t("permissionssection.MobileStreamingDesc", {
+                    defaultValue: "Your device streams camera, microphone, and screen to your Eliza Cloud agent for processing.",
+                }) }), AppBlockerSettingsCard ? _jsx(AppBlockerSettingsCard, { mode: "mobile" }) : null, WebsiteBlockerSettingsCard ? (_jsx(WebsiteBlockerSettingsCard, { mode: "mobile" })) : null] }));
+}
+function WebPermissionsView() {
+    const { t } = useApp();
+    const { websiteBlockerSettingsCard: WebsiteBlockerSettingsCard } = useBootConfig();
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(StreamingPermissionsSettingsView, { mode: "web", testId: "web-permissions-info", title: t("permissionssection.BrowserPermissions", {
+                    defaultValue: "Browser Permissions",
+                }), description: t("permissionssection.WebStreamingDesc", {
+                    defaultValue: "Grant browser access to your camera, microphone, and screen to stream to your agent.",
+                }) }), WebsiteBlockerSettingsCard ? (isLocalBrowserRuntime() ? (_jsx(LocalWebsiteBlockingCard, { WebsiteBlockerSettingsCard: WebsiteBlockerSettingsCard })) : (_jsx(WebsiteBlockerSettingsCard, { mode: "web" }))) : null] }));
+}
+function isLocalBrowserRuntime() {
+    if (typeof window === "undefined")
+        return false;
+    const hostname = window.location.hostname.toLowerCase();
+    return (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1");
+}
+function LocalWebsiteBlockingCard({ WebsiteBlockerSettingsCard, }) {
+    const { handleOpenSettings, handleRequest, loading, permissions, platform } = useDesktopPermissionsState();
+    if (loading) {
+        return (_jsx("p", { className: "py-4 text-center text-xs text-muted", children: "Loading website blocking..." }));
+    }
+    if (!permissions) {
+        return _jsx(WebsiteBlockerSettingsCard, { mode: "web" });
+    }
+    return (_jsx(WebsiteBlockerSettingsCard, { mode: "desktop", permission: permissions["website-blocking"], platform: platform, onRequestPermission: () => handleRequest("website-blocking"), onOpenPermissionSettings: () => handleOpenSettings("website-blocking") }));
+}
+/* ── Desktop permission view ────────────────────────────────────── */
+function DesktopPermissionsView() {
+    const { t, plugins, handlePluginToggle } = useApp();
+    const { websiteBlockerSettingsCard: WebsiteBlockerSettingsCard } = useBootConfig();
+    const { handleOpenSettings, handleRefresh, handleRequest, handleToggleShell, loading, permissions, platform, refreshing, shellEnabled, } = useDesktopPermissionsState();
+    const arePermissionsGranted = useCallback((requiredPerms) => {
+        if (!permissions)
+            return false;
+        return requiredPerms.every((id) => {
+            const state = permissions[id];
+            return (state?.status === "granted" || state?.status === "not-applicable");
+        });
+    }, [permissions]);
+    const applicablePermissions = useMemo(() => SYSTEM_PERMISSIONS.filter((def) => {
+        if (!permissions)
+            return true;
+        const state = permissions[def.id];
+        return state?.status !== "not-applicable";
+    }), [permissions]);
+    if (loading) {
+        return (_jsx("p", { className: "py-6 text-center text-xs text-muted", children: t("permissionssection.LoadingPermissions", {
+                defaultValue: "Loading permissions...",
+            }) }));
+    }
+    if (!permissions) {
+        return (_jsx("p", { className: "py-6 text-center text-xs text-muted", children: t("permissionssection.UnableToLoadPermi", {
+                defaultValue: "Unable to load permissions.",
+            }) }));
+    }
+    const copy = platformCopy(platform);
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("section", { className: "space-y-2", children: [_jsxs("header", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "space-y-0.5", children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: t("permissionssection.SystemPermissions", {
+                                            defaultValue: "System Permissions",
+                                        }) }), _jsx("p", { className: "max-w-2xl text-xs-tight leading-5 text-muted", children: t(copy.systemDescription.key, {
+                                            defaultValue: copy.systemDescription.defaultValue,
+                                        }) })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-9 rounded-lg px-3 text-xs font-semibold", onClick: async () => {
+                                            for (const def of applicablePermissions) {
+                                                if (def.id === "shell")
+                                                    continue;
+                                                const state = permissions[def.id];
+                                                if (state?.status === "granted")
+                                                    continue;
+                                                if (state?.canRequest) {
+                                                    await handleRequest(def.id);
+                                                }
+                                                else {
+                                                    await handleOpenSettings(def.id);
+                                                }
+                                            }
+                                        }, children: t("permissionssection.AllowAll", { defaultValue: "Allow All" }) }), _jsx(Button, { variant: "outline", size: "sm", "data-testid": "permissions-refresh-button", className: "h-9 rounded-lg px-3 text-xs font-semibold", onClick: handleRefresh, disabled: refreshing, children: refreshing
+                                            ? t("common.refreshing", {
+                                                defaultValue: "Refreshing...",
+                                            })
+                                            : t("common.refresh", { defaultValue: "Refresh" }) })] })] }), _jsx("div", { className: "divide-y divide-border/40 rounded-lg border border-border/40", children: applicablePermissions.map((def) => {
+                            const state = permissions[def.id];
+                            return (_jsx(PermissionRow, { def: def, status: state?.status ?? "not-determined", reason: state?.reason, platform: platform, canRequest: state?.canRequest ?? false, onRequest: () => handleRequest(def.id), onOpenSettings: () => handleOpenSettings(def.id), isShell: def.id === "shell", shellEnabled: shellEnabled, onToggleShell: def.id === "shell" ? handleToggleShell : undefined }, def.id));
+                        }) }), _jsx("p", { className: "text-xs-tight leading-5 text-muted", children: t(copy.grantNote.key, { defaultValue: copy.grantNote.defaultValue }) })] }), WebsiteBlockerSettingsCard ? (_jsx(WebsiteBlockerSettingsCard, { mode: "desktop", permission: permissions["website-blocking"], platform: platform, onRequestPermission: () => handleRequest("website-blocking"), onOpenPermissionSettings: () => handleOpenSettings("website-blocking") })) : null, _jsxs("section", { className: "space-y-2 border-t border-border/40 pt-5", children: [_jsxs("header", { className: "space-y-0.5", children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: t("common.capabilities") }), _jsx("p", { className: "max-w-2xl text-xs-tight leading-5 text-muted", children: t("permissionssection.CapabilitiesDescription", {
+                                    defaultValue: "Turn higher-level capabilities on only after the required runtime permissions are available.",
+                                }) })] }), _jsx("div", { className: "space-y-2", children: CAPABILITIES.map((cap) => {
+                            const plugin = plugins.find((p) => p.id === cap.id) ?? null;
+                            const permissionsGranted = arePermissionsGranted(cap.requiredPermissions);
+                            return (_jsx(CapabilityToggle, { cap: cap, plugin: plugin, permissionsGranted: permissionsGranted, onToggle: (enabled) => {
+                                    if (plugin)
+                                        void handlePluginToggle(cap.id, enabled);
+                                } }, cap.id));
+                        }) })] })] }));
+}
+export function PermissionsSection() {
+    if (isWebPlatform())
+        return _jsx(WebPermissionsView, {});
+    if (isNative && !isDesktopPlatform())
+        return _jsx(MobilePermissionsView, {});
+    return _jsx(DesktopPermissionsView, {});
+}

package/components/settings/PolicyControlsView.d.ts

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

package/components/settings/PolicyControlsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolicyControlsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/PolicyControlsView.tsx"],"names":[],"mappings":"AAoDA,wBAAgB,kBAAkB,4CA6XjC"}