@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/SettingsView.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Settings view — two-panel layout with section navigator and active section.
+ */
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, SectionCard, } from "@elizaos/ui";
+import { AlertTriangle, Bot, Cloud, Download, Image, Loader2, Mic, RefreshCw, Search, Shield, Sliders, Terminal, Upload, Wallet, X, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useApp } from "../state";
+import { CodingAgentSettingsSection } from "./CodingAgentSettingsSection";
+import { ConfigPageView } from "./ConfigPageView";
+import { CloudDashboard } from "./ElizaCloudDashboard";
+import { MediaSettingsSection } from "./MediaSettingsSection";
+import { PermissionsSection } from "./PermissionsSection";
+import { ProviderSwitcher } from "./ProviderSwitcher";
+import { VoiceConfigView } from "./VoiceConfigView";
+const SETTINGS_SECTIONS = [
+    {
+        id: "ai-model",
+        label: "settings.sections.aimodel.label",
+        icon: Bot,
+        description: "settings.sections.aimodel.desc",
+    },
+    {
+        id: "cloud",
+        label: "elizaclouddashboard.ElizaCloud",
+        icon: Cloud,
+        description: "settings.sections.cloud.desc",
+    },
+    {
+        id: "coding-agents",
+        label: "settings.sections.codingagents.label",
+        icon: Terminal,
+        description: "settings.sections.codingagents.desc",
+    },
+    {
+        id: "wallet-rpc",
+        label: "settings.sections.walletrpc.label",
+        icon: Wallet,
+        description: "settings.sections.walletrpc.desc",
+    },
+    {
+        id: "media",
+        label: "settings.sections.media.label",
+        icon: Image,
+        description: "settings.sections.media.desc",
+    },
+    {
+        id: "voice",
+        label: "settings.sections.voice.label",
+        icon: Mic,
+        description: "settings.sections.voice.desc",
+    },
+    {
+        id: "permissions",
+        label: "settings.sections.permissions.label",
+        icon: Shield,
+        description: "settings.sections.permissions.desc",
+    },
+    {
+        id: "updates",
+        label: "settings.sections.updates.label",
+        icon: RefreshCw,
+        description: "settings.sections.updates.desc",
+    },
+    {
+        id: "advanced",
+        label: "nav.advanced",
+        icon: Sliders,
+        description: "settings.sections.advanced.desc",
+    },
+];
+function matchesSettingsSection(section, query, t) {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized)
+        return true;
+    return (t(section.label).toLowerCase().includes(normalized) ||
+        (section.description
+            ? t(section.description).toLowerCase().includes(normalized)
+            : false));
+}
+/* ── Settings Sidebar ────────────────────────────────────────────────── */
+function SettingsSidebar({ sections, activeSection, onSectionChange, }) {
+    const { t } = useApp();
+    return (_jsx("aside", { className: "hidden w-80 shrink-0 self-start border-r border-border/50 bg-bg/35 backdrop-blur-xl xl:sticky xl:top-0 xl:flex", children: _jsxs("div", { className: "flex flex-1 flex-col p-5", children: [_jsx("div", { className: "mb-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted/80", children: t("settingsview.JumpToSection") }), _jsx("nav", { className: "flex flex-col gap-2 pr-1", children: sections.map((section) => {
+                        const Icon = section.icon;
+                        const isActive = activeSection === section.id;
+                        return (_jsxs("button", { type: "button", onClick: () => onSectionChange(section.id), "aria-current": isActive ? "page" : undefined, className: `flex w-full items-center gap-3 rounded-2xl border px-4 py-3 text-left transition-all duration-200 ${isActive
+                                ? "border-accent/40 bg-accent/12 text-txt shadow-[0_10px_30px_rgba(var(--accent),0.08)]"
+                                : "border-transparent text-muted hover:border-border/60 hover:bg-card/55 hover:text-txt"}`, children: [_jsx("span", { className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border p-2 ${isActive
+                                        ? "border-accent/30 bg-accent/18 text-txt-strong"
+                                        : "border-border/50 bg-bg-accent/80 text-muted"}`, children: _jsx(Icon, { className: "w-4 h-4 shrink-0" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "text-sm font-semibold leading-snug text-current", children: t(section.label) }) })] }, section.id));
+                    }) })] }) }));
+}
+/* ── Updates Section ─────────────────────────────────────────────────── */
+function UpdatesSection() {
+    const { t } = useApp();
+    const { updateStatus, updateLoading, loadUpdateStatus } = useApp();
+    useEffect(() => {
+        void loadUpdateStatus();
+    }, [loadUpdateStatus]);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between p-5 bg-card/60 backdrop-blur-sm border border-border/50 rounded-2xl shadow-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium text-sm", children: t("settings.versionPrefix") }), _jsx("div", { className: "text-2xl font-bold text-txt-strong mt-1", children: updateStatus?.currentVersion || `${t("common.loading")}...` })] }), _jsxs(Button, { variant: "default", size: "sm", className: "rounded-xl shadow-sm whitespace-normal text-left", onClick: () => void loadUpdateStatus(true), disabled: updateLoading, children: [updateLoading && _jsx(Loader2, { className: "w-4 h-4 animate-spin" }), updateLoading ? t("settings.checking") : t("settings.checkNow")] })] }), updateStatus?.updateAvailable && (_jsxs("div", { className: "p-4 bg-ok/10 border border-ok/30 rounded-2xl", children: [_jsx("div", { className: "font-bold text-ok mb-1", children: t("settings.updateAvailable") }), _jsxs("p", { className: "text-sm text-txt-strong", children: [updateStatus.currentVersion, " ", t("ui-renderer.Rarr"), " ", updateStatus.latestVersion] })] })), updateStatus?.lastCheckAt && (_jsxs("div", { className: "text-[11px] text-muted", children: [t("settings.lastChecked"), " ", new Date(updateStatus.lastCheckAt).toLocaleString()] }))] }));
+}
+/* ── Advanced Section ─────────────────────────────────────────────────── */
+function AdvancedSection() {
+    const { t } = useApp();
+    const { handleReset, exportBusy, exportPassword, exportIncludeLogs, exportError, exportSuccess, importBusy, importPassword, importFile, importError, importSuccess, handleAgentExport, handleAgentImport, setState, } = useApp();
+    const [exportModalOpen, setExportModalOpen] = useState(false);
+    const [importModalOpen, setImportModalOpen] = useState(false);
+    const importFileInputRef = useRef(null);
+    const resetExportState = useCallback(() => {
+        setState("exportPassword", "");
+        setState("exportIncludeLogs", false);
+        setState("exportError", null);
+        setState("exportSuccess", null);
+    }, [setState]);
+    const resetImportState = useCallback(() => {
+        if (importFileInputRef.current) {
+            importFileInputRef.current.value = "";
+        }
+        setState("importPassword", "");
+        setState("importFile", null);
+        setState("importError", null);
+        setState("importSuccess", null);
+    }, [setState]);
+    const openExportModal = useCallback(() => {
+        resetExportState();
+        setExportModalOpen(true);
+    }, [resetExportState]);
+    const closeExportModal = useCallback(() => {
+        setExportModalOpen(false);
+        resetExportState();
+    }, [resetExportState]);
+    const openImportModal = useCallback(() => {
+        resetImportState();
+        setImportModalOpen(true);
+    }, [resetImportState]);
+    const closeImportModal = useCallback(() => {
+        setImportModalOpen(false);
+        resetImportState();
+    }, [resetImportState]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs("button", { type: "button", onClick: openExportModal, className: "settings-card-button flex items-center gap-4 border border-border/50 bg-card/60 text-left backdrop-blur-md transition-all group hover:-translate-y-0.5 hover:border-accent hover:shadow-[0_4px_20px_rgba(var(--accent),0.1)]", "aria-haspopup": "dialog", children: [_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-border/50 bg-bg-accent p-3 shadow-sm transition-all group-hover:border-accent group-hover:bg-accent", children: _jsx(Download, { className: "h-5 w-5 shrink-0 text-txt transition-colors group-hover:text-accent-fg" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-sm", children: t("settings.exportAgent") }), _jsx("div", { className: "text-xs text-muted", children: t("settings.exportAgentShort") })] })] }), _jsxs("button", { type: "button", onClick: openImportModal, className: "settings-card-button flex items-center gap-4 border border-border/50 bg-card/60 text-left backdrop-blur-md transition-all group hover:-translate-y-0.5 hover:border-accent hover:shadow-[0_4px_20px_rgba(var(--accent),0.1)]", "aria-haspopup": "dialog", children: [_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-border/50 bg-bg-accent p-3 shadow-sm transition-all group-hover:border-accent group-hover:bg-accent", children: _jsx(Upload, { className: "h-5 w-5 shrink-0 text-txt transition-colors group-hover:text-accent-fg" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-sm", children: t("settings.importAgent") }), _jsx("div", { className: "text-xs text-muted", children: t("settings.importAgentShort") })] })] })] }), _jsxs("div", { className: "border border-danger/30 rounded-2xl overflow-hidden bg-bg/40 backdrop-blur-sm", children: [_jsxs("div", { className: "bg-danger/10 px-5 py-3 border-b border-danger/20 flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "w-4 h-4 text-danger" }), _jsx("span", { className: "font-bold text-sm text-danger tracking-wide uppercase", children: t("settings.dangerZone") })] }), _jsx("div", { className: "p-4 space-y-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium text-sm", children: t("settings.resetAgent") }), _jsx("div", { className: "text-xs text-muted", children: t("settings.resetAgentHint") })] }), _jsx(Button, { variant: "destructive", size: "sm", className: "rounded-xl shadow-sm whitespace-normal text-left", onClick: () => {
+                                                void handleReset();
+                                            }, children: t("settings.resetEverything") })] }) })] })] }), _jsx(Dialog, { open: exportModalOpen, onOpenChange: (open) => {
+                    if (!open)
+                        closeExportModal();
+                }, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t("settings.exportAgent") }) }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "settings-export-password", className: "text-sm font-medium text-txt-strong", children: t("settingsview.Password") }), _jsx(Input, { id: "settings-export-password", type: "password", value: exportPassword, onChange: (e) => setState("exportPassword", e.target.value), placeholder: t("settingsview.EnterExportPasswor"), className: "rounded-lg bg-bg" }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-muted", children: [_jsx("input", { type: "checkbox", checked: exportIncludeLogs, onChange: (e) => setState("exportIncludeLogs", e.target.checked) }), t("settingsview.IncludeRecentLogs")] })] }), exportError && (_jsx("div", { className: "rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger", children: exportError })), exportSuccess && (_jsx("div", { className: "rounded-lg border border-ok/30 bg-ok/10 px-3 py-2 text-sm text-ok", children: exportSuccess })), _jsxs("div", { className: "flex items-center justify-end gap-2 pt-1", children: [_jsx(Button, { variant: "outline", size: "sm", className: "settings-button rounded-lg", onClick: closeExportModal, children: t("onboarding.cancel") }), _jsxs(Button, { variant: "default", size: "sm", className: "settings-button rounded-lg", disabled: exportBusy, onClick: () => void handleAgentExport(), children: [exportBusy && _jsx(Loader2, { className: "w-4 h-4 animate-spin" }), t("settings.export")] })] })] })] }) }), _jsx(Dialog, { open: importModalOpen, onOpenChange: (open) => {
+                    if (!open)
+                        closeImportModal();
+                }, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t("settings.importAgent") }) }), _jsxs("div", { className: "space-y-4", children: [_jsx("input", { ref: importFileInputRef, type: "file", className: "hidden", accept: ".eliza-agent,.agent,application/octet-stream", onChange: (e) => setState("importFile", e.target.files?.[0] ?? null) }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-sm font-medium text-txt-strong", children: t("settingsview.BackupFile") }), _jsxs("button", { type: "button", className: "settings-button flex w-full items-center justify-between gap-3 rounded-lg border border-border bg-bg text-left transition-colors hover:bg-bg-hover", onClick: () => importFileInputRef.current?.click(), children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-txt", children: importFile?.name ?? t("settingsview.ChooseAnExportedBack") }), _jsx("span", { className: "shrink-0 text-xs font-medium text-txt", children: importFile
+                                                        ? t("settings.change", { defaultValue: "Change" })
+                                                        : t("settings.browse", { defaultValue: "Browse" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "settings-import-password", className: "text-sm font-medium text-txt-strong", children: t("settingsview.Password") }), _jsx(Input, { id: "settings-import-password", type: "password", value: importPassword, onChange: (e) => setState("importPassword", e.target.value), placeholder: t("settingsview.EnterImportPasswor"), className: "rounded-lg bg-bg" })] }), importError && (_jsx("div", { className: "rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger", children: importError })), importSuccess && (_jsx("div", { className: "rounded-lg border border-ok/30 bg-ok/10 px-3 py-2 text-sm text-ok", children: importSuccess })), _jsxs("div", { className: "flex items-center justify-end gap-2 pt-1", children: [_jsx(Button, { variant: "outline", size: "sm", className: "settings-button rounded-lg", onClick: closeImportModal, children: t("onboarding.cancel") }), _jsxs(Button, { variant: "default", size: "sm", className: "settings-button rounded-lg", disabled: importBusy, onClick: () => void handleAgentImport(), children: [importBusy && _jsx(Loader2, { className: "w-4 h-4 animate-spin" }), t("settings.import")] })] })] })] }) })] }));
+}
+/* ── SettingsView ─────────────────────────────────────────────────────── */
+export function SettingsView({ inModal, onClose, initialSection, } = {}) {
+    const { t, loadPlugins, setTab } = useApp();
+    const [activeSection, setActiveSection] = useState(initialSection ?? "ai-model");
+    const [searchQuery, setSearchQuery] = useState("");
+    const shellRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const visibleSections = useMemo(() => SETTINGS_SECTIONS.filter((section) => matchesSettingsSection(section, searchQuery, t)), [searchQuery, t]);
+    const visibleSectionIds = useMemo(() => new Set(visibleSections.map((section) => section.id)), [visibleSections]);
+    useEffect(() => {
+        void loadPlugins();
+    }, [loadPlugins]);
+    useEffect(() => {
+        const shell = shellRef.current;
+        if (!shell)
+            return;
+        scrollContainerRef.current = inModal
+            ? shell
+            : (shell.closest('[data-shell-scroll-region="true"]') ?? shell);
+    }, [inModal]);
+    const handleClose = useCallback(() => onClose?.() ?? setTab(inModal ? "companion" : "chat"), [inModal, onClose, setTab]);
+    const handleSectionChange = useCallback((sectionId) => {
+        setActiveSection(sectionId);
+        if (shellRef.current) {
+            const element = shellRef.current.querySelector(`#${sectionId}`);
+            if (element instanceof HTMLElement) {
+                element.scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+        }
+    }, []);
+    useEffect(() => {
+        if (visibleSections.length === 0)
+            return;
+        if (!visibleSectionIds.has(activeSection)) {
+            setActiveSection(visibleSections[0].id);
+        }
+    }, [activeSection, visibleSectionIds, visibleSections]);
+    useEffect(() => {
+        if (!initialSection)
+            return;
+        handleSectionChange(initialSection);
+    }, [handleSectionChange, initialSection]);
+    useEffect(() => {
+        const shell = shellRef.current;
+        const root = scrollContainerRef.current;
+        if (!shell || !root)
+            return;
+        const handleScroll = () => {
+            const sections = visibleSections
+                .map((section) => {
+                const el = shell.querySelector(`#${section.id}`);
+                return { id: section.id, el };
+            })
+                .filter((section) => section.el instanceof HTMLElement);
+            if (sections.length === 0)
+                return;
+            if (root.scrollHeight - Math.ceil(root.scrollTop) <=
+                root.clientHeight + 10) {
+                setActiveSection(sections[sections.length - 1].id);
+                return;
+            }
+            const rootRect = root.getBoundingClientRect();
+            let currentSection = sections[0].id;
+            for (const { id, el } of sections) {
+                const elRect = el.getBoundingClientRect();
+                if (elRect.top - rootRect.top <= 150) {
+                    currentSection = id;
+                }
+            }
+            setActiveSection((prev) => prev !== currentSection ? currentSection : prev);
+        };
+        root.addEventListener("scroll", handleScroll, { passive: true });
+        handleScroll();
+        return () => root.removeEventListener("scroll", handleScroll);
+    }, [visibleSections]);
+    const sectionsContent = (_jsxs(_Fragment, { children: [visibleSectionIds.has("ai-model") && (_jsx(SectionCard, { id: "ai-model", title: t("settings.aiModel"), description: t("settings.aiModelDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx(ProviderSwitcher, {}) })), visibleSectionIds.has("coding-agents") && (_jsx(SectionCard, { id: "coding-agents", title: t("settings.codingAgents"), description: t("settings.codingAgentsDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx(CodingAgentSettingsSection, {}) })), visibleSectionIds.has("cloud") && (_jsx("section", { id: "cloud", className: "bg-bg rounded-2xl border border-border/50 overflow-hidden relative", children: _jsx(CloudDashboard, {}) })), visibleSectionIds.has("wallet-rpc") && (_jsx(SectionCard, { id: "wallet-rpc", title: t("settings.walletRpc"), description: t("settings.walletRpcDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx(ConfigPageView, { embedded: true }) })), visibleSectionIds.has("media") && (_jsx(SectionCard, { id: "media", title: t("settings.mediaGeneration"), description: t("settings.mediaDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx(MediaSettingsSection, {}) })), visibleSectionIds.has("voice") && (_jsx(SectionCard, { id: "voice", title: t("settings.speechInterface"), description: t("settings.speechDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx(VoiceConfigView, {}) })), visibleSectionIds.has("permissions") && (_jsx(SectionCard, { id: "permissions", title: t("settings.permissionsCapabilities"), description: t("settings.permissionsDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx(PermissionsSection, {}) })), visibleSectionIds.has("updates") && (_jsx(SectionCard, { id: "updates", title: t("settings.softwareUpdates"), description: t("settings.updatesDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx(UpdatesSection, {}) })), visibleSectionIds.has("advanced") && (_jsx(SectionCard, { id: "advanced", title: t("settings.advancedSettings"), description: t("settings.advancedDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx(AdvancedSection, {}) })), visibleSections.length === 0 && (_jsx(SectionCard, { id: "settings-empty", title: t("settingsview.NoMatchingSettings"), description: t("settings.noMatchingSettingsDescription"), className: "p-4 sm:p-5 lg:p-6", children: _jsx("button", { type: "button", className: "settings-button inline-flex items-center rounded-lg border border-border text-sm font-medium text-txt transition-colors hover:bg-bg-hover", onClick: () => setSearchQuery(""), children: t("settingsview.ClearSearch") }) }))] }));
+    return (_jsxs("div", { ref: shellRef, className: `settings-shell flex min-h-full min-w-0 w-full flex-row items-start ${inModal ? "h-full min-h-0 overflow-y-auto bg-transparent" : "bg-bg"}`, children: [_jsx(SettingsSidebar, { sections: visibleSections, activeSection: activeSection, onSectionChange: handleSectionChange }), _jsx("div", { className: `settings-page-content flex-1 min-w-0 scroll-smooth ${inModal ? "px-4 py-4 sm:px-6 sm:py-5 lg:px-8 lg:py-6" : "px-4 py-5 sm:px-6 sm:py-6 lg:px-8 lg:py-8"}`, children: _jsxs("div", { className: "mx-auto max-w-5xl", children: [_jsx("div", { className: "sticky top-0 z-20 mb-5 rounded-[1.35rem] border border-border/50 bg-bg/80 px-3 py-3 shadow-[0_18px_40px_rgba(0,0,0,0.2)] backdrop-blur-xl", children: _jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [_jsxs("div", { className: "flex min-h-11 min-w-0 flex-1 items-center gap-3 rounded-xl border border-border/60 bg-card/70 px-3 focus-within:ring-2 focus-within:ring-accent/40 focus-within:border-accent/50", children: [_jsx(Search, { className: "h-4 w-4 shrink-0 text-muted", "aria-hidden": true }), _jsx(Input, { type: "text", placeholder: t("settings.searchPlaceholder"), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "h-9 min-w-0 flex-1 border-0 bg-transparent py-0 pr-0 pl-0 text-sm shadow-none focus-visible:ring-0 focus-visible:ring-offset-0" })] }), _jsx("button", { type: "button", className: "settings-icon-button inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border bg-card text-muted transition-all hover:border-accent hover:text-txt hover:shadow-sm", onClick: handleClose, "aria-label": "Close settings", title: t("settingsview.CloseSettings"), children: _jsx(X, { className: "w-4 h-4" }) })] }) }), _jsx("div", { className: "space-y-6 pb-20 pt-1 sm:space-y-8 sm:pt-2", children: sectionsContent })] }) })] }));
+}

package/components/ShellOverlays.d.ts

@@ -0,0 +1,8 @@
+export interface ActionNotice {
+    text: string;
+    tone: string;
+}
+export declare function ShellOverlays({ actionNotice, }: {
+    actionNotice: ActionNotice | null;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ShellOverlays.d.ts.map

package/components/ShellOverlays.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellOverlays.d.ts","sourceRoot":"","sources":["../../src/components/ShellOverlays.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,EAC5B,YAAY,GACb,EAAE;IACD,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC,2CAuBA"}

package/components/ShellOverlays.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { GlobalEmoteOverlay } from "./GlobalEmoteOverlay";
+import { BugReportModal, CommandPalette, RestartBanner, ShortcutsOverlay, } from "./index";
+export function ShellOverlays({ actionNotice, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(CommandPalette, {}), _jsx(RestartBanner, {}), _jsx(BugReportModal, {}), _jsx(ShortcutsOverlay, {}), _jsx(GlobalEmoteOverlay, {}), actionNotice && (_jsx("div", { className: `fixed bottom-6 left-1/2 -translate-x-1/2 px-5 py-2 rounded-lg text-[13px] font-medium z-[10000] text-white ${actionNotice.tone === "error"
+                    ? "bg-danger"
+                    : actionNotice.tone === "success"
+                        ? "bg-ok"
+                        : "bg-accent"}`, children: actionNotice.text }))] }));
+}

package/components/ShortcutsOverlay.d.ts

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

package/components/ShortcutsOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutsOverlay.d.ts","sourceRoot":"","sources":["../../src/components/ShortcutsOverlay.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,gBAAgB,mDA+H/B"}

package/components/ShortcutsOverlay.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { COMMON_SHORTCUTS } from "../hooks";
+import { useApp } from "../state";
+function formatKey(shortcut) {
+    const isMac = typeof navigator !== "undefined" && navigator.platform?.includes("Mac");
+    const parts = [];
+    if (shortcut.ctrl) {
+        parts.push(isMac ? "\u2318" : "Ctrl");
+    }
+    if (shortcut.shift) {
+        parts.push(isMac ? "\u21E7" : "Shift");
+    }
+    if (shortcut.alt) {
+        parts.push(isMac ? "\u2325" : "Alt");
+    }
+    if (shortcut.meta) {
+        parts.push(isMac ? "\u2318" : "Win");
+    }
+    parts.push(shortcut.key.length === 1 ? shortcut.key.toUpperCase() : shortcut.key);
+    return parts.join(isMac ? "" : "+");
+}
+export function ShortcutsOverlay() {
+    const { t } = useApp();
+    const [open, setOpen] = useState(false);
+    useEffect(() => {
+        const handler = (event) => {
+            if (event.shiftKey && event.key === "?") {
+                const tag = event.target?.tagName;
+                if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
+                    return;
+                }
+                event.preventDefault();
+                setOpen((value) => !value);
+            }
+            if (event.key === "Escape" && open) {
+                event.preventDefault();
+                setOpen(false);
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [open]);
+    if (!open) {
+        return null;
+    }
+    const grouped = {};
+    for (const shortcut of COMMON_SHORTCUTS) {
+        const scope = shortcut.scope ?? "global";
+        if (!grouped[scope]) {
+            grouped[scope] = [];
+        }
+        grouped[scope].push(shortcut);
+    }
+    return (_jsx("div", { className: "fixed inset-0 z-[10000] flex items-center justify-center", style: {
+            background: "color-mix(in srgb, var(--bg) 50%, transparent)",
+            backdropFilter: "blur(4px)",
+        }, onClick: (event) => {
+            if (event.target === event.currentTarget) {
+                setOpen(false);
+            }
+        }, onKeyDown: (event) => {
+            if (event.target === event.currentTarget &&
+                (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                setOpen(false);
+            }
+        }, role: "dialog", "aria-modal": "true", "aria-label": "Keyboard shortcuts", tabIndex: -1, children: _jsxs("div", { className: "rounded-xl max-w-lg w-full mx-4 max-h-[80vh] overflow-y-auto", style: {
+                background: "color-mix(in srgb, var(--bg) 96%, transparent)",
+                border: "1px solid color-mix(in srgb, var(--accent) 18%, transparent)",
+                backdropFilter: "blur(24px)",
+                boxShadow: "var(--shadow-lg)",
+            }, children: [_jsxs("div", { className: "flex items-center justify-between px-5 py-4", style: { borderBottom: "1px solid var(--border)" }, children: [_jsx("h2", { className: "text-base font-bold", style: { color: "var(--text)" }, children: t("shortcutsoverlay.KeyboardShortcuts") }), _jsx("button", { type: "button", onClick: () => setOpen(false), className: "p-1 rounded transition-colors", style: { color: "var(--muted)" }, "aria-label": "Close", children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "p-5 space-y-5", children: Object.entries(grouped).map(([scope, shortcuts]) => (_jsxs("div", { children: [_jsx("h3", { className: "text-[11px] uppercase tracking-wide font-medium mb-2", style: { color: "var(--muted)" }, children: scope }), _jsx("div", { className: "space-y-1", children: shortcuts.map((shortcut) => (_jsxs("div", { className: "flex items-center justify-between py-1.5 px-2 rounded", children: [_jsx("span", { className: "text-sm", style: { color: "var(--text)" }, children: shortcut.description }), _jsx("kbd", { className: "inline-flex items-center gap-0.5 px-2 py-0.5 text-[11px] font-mono rounded", style: {
+                                                background: "var(--bg-hover)",
+                                                border: "1px solid var(--border)",
+                                                color: "var(--muted)",
+                                            }, children: formatKey(shortcut) })] }, `${shortcut.key}-${shortcut.description}`))) })] }, scope))) })] }) }));
+}

package/components/SkillsView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Skills management view — create, enable/disable, and install skills.
+ *
+ * Professional card-grid layout with search, stats, polished toggle switches,
+ * and a structured install modal. Follows the CSS variable design system used
+ * throughout the app (--bg, --card, --border, --accent, --muted, --txt, etc.).
+ */
+export declare function SkillsView({ inModal }?: {
+    inModal?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SkillsView.d.ts.map

package/components/SkillsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsView.d.ts","sourceRoot":"","sources":["../../src/components/SkillsView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA84BH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,2CAGjE"}