@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.3

package/components/character/CharacterEditor.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getStylePresets } from "@elizaos/shared";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/client.js";
 import { APP_EMOTE_EVENT, dispatchWindowEvent, VOICE_CONFIG_UPDATED_EVENT, } from "../../events/index.js";
 import { useChatAvatarVoiceBridge, useVoiceChat } from "../../hooks/index.js";
-import { useApp } from "../../state/useApp.js";
+import { useRenderGuard } from "../../hooks/useRenderGuard.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { normalizeCharacterMessageExamples } from "../../utils/character-message-examples.js";
 import { hasConfiguredApiKey, PREMADE_VOICES, sanitizeApiKey, } from "../../voice/types.js";
 import { DocumentsView } from "../pages/DocumentsView.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 import { CharacterExamplesPanel, CharacterIdentityPanel, CharacterStylePanel, } from "./CharacterEditorPanels.js";
 import { CharacterHubView } from "./CharacterHubView.js";
-import { CharacterRoster, createCustomPackRosterEntry, resolveRosterEntries, } from "./CharacterRoster.js";
-import { buildCharacterDraftFromPreset, getOnboardingPresetStyles, shouldApplyPresetDefaults, } from "./character-editor-helpers.js";
+import { CharacterRoster } from "./CharacterRoster.js";
+import { createCustomPackRosterEntry, resolveRosterEntries, } from "./CharacterRoster.helpers.js";
+import { buildCharacterDraftFromPreset, getFirstRunPresetStyles, shouldApplyPresetDefaults, } from "./character-editor-helpers.js";
 import { resolveCharacterGreetingAnimation } from "./character-greeting.js";
 import { buildVoiceConfigForCharacterEntry, DEFAULT_ELEVEN_FAST_MODEL, } from "./character-voice-config.js";
 /* Inline SVG icon helpers – avoids adding lucide-react as a dependency. */
@@ -28,22 +32,20 @@ const svgBase = {
 const Icon = ({ className, d }) => (_jsx("svg", { ...svgBase, className: className, "aria-hidden": "true", children: _jsx("path", { d: d }) }));
 const DownloadIcon = ({ className }) => (_jsx(Icon, { className: className, d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" }));
 const UploadIcon = ({ className }) => (_jsx(Icon, { className: className, d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" }));
-import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@elizaos/ui";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../ui/dialog.js";
 /* ── Shared accent styles ────────────────────────────────────────── */
 const accentGradientStyle = {
     background: "linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 8%) 0%, var(--accent) 100%)",
     color: "var(--accent-foreground, #1a1f26)",
     borderColor: "rgba(var(--accent-rgb, 240, 185, 11), 0.5)",
-    boxShadow: "0 0 14px rgba(var(--accent-rgb, 240, 185, 11), 0.16), inset 0 1px 0 var(--soft-white-glow)",
 };
 const idleSaveBtnStyle = {
     background: "linear-gradient(180deg, rgba(var(--accent-rgb,240,185,11),0.16) 0%, rgba(var(--accent-rgb,240,185,11),0.1) 100%)",
     color: "rgba(var(--accent-rgb, 240, 185, 11), 0.78)",
     borderColor: "rgba(var(--accent-rgb, 240, 185, 11), 0.22)",
-    boxShadow: "none",
 };
-const pageTabsBoxShadow = "0 10px 26px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05)";
 /* ── Constants ─────────────────────────────────────────────────────── */
 const CHARACTER_EDITOR_PAGES = [
     "personality",
@@ -78,9 +80,83 @@ function hasValidMessageExamplesShape(value) {
         });
     });
 }
+/* ── Agent-surface control wrappers ────────────────────────────────── */
+/**
+ * Wraps a tab button so the agent can select editor pages by id. Mirrors the
+ * SettingsNavButton pattern: the hook lives at the top level of a tiny child
+ * component (never inside the parent's `.map()`), and activation routes through
+ * the same `onActivate` handler the click uses.
+ */
+function CharacterPageTabButton({ page, label, isActive, agentLabel, onSelect, children, className, style, onKeyDown, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `tab-${page}`,
+        role: "tab",
+        label: agentLabel,
+        group: "character-pages",
+        status: isActive ? "active" : "inactive",
+        description: `Open the ${label} editor section`,
+        onActivate: () => onSelect(page),
+    });
+    return (_jsx("button", { ref: ref, type: "button", id: `character-editor-tab-${page}`, role: "tab", "aria-selected": isActive, "aria-current": isActive ? "page" : undefined, "aria-controls": `character-editor-panel-${page}`, tabIndex: isActive ? 0 : -1, className: className, style: style, onClick: () => onSelect(page), onKeyDown: onKeyDown, ...agentProps, children: children }));
+}
+/**
+ * Wraps a composite `<Button>` action so the agent can activate it by id. The
+ * hook runs at the top level here (not inside the parent render function that
+ * conditionally emits the button row), and activation reuses the same handler
+ * as the click.
+ */
+function CharacterAgentButton({ agentId, agentLabel, agentGroup, agentDescription, agentStatus, onActivate, ...buttonProps }) {
+    const { agentProps } = useAgentElement({
+        id: agentId,
+        role: "button",
+        label: agentLabel,
+        group: agentGroup,
+        description: agentDescription,
+        status: agentStatus,
+        onActivate,
+    });
+    return _jsx(Button, { ...buttonProps, ...agentProps });
+}
 /* ── Component ─────────────────────────────────────────────────────── */
-export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = false, onHeaderActionsChange, } = {}) {
-    const { tab, setTab, characterData, characterDraft, characterLoading, characterSaving, characterSaveSuccess, chatAgentVoiceMuted: _chatAgentVoiceMuted, characterSaveError, handleCharacterFieldInput, handleCharacterStyleInput, handleSaveCharacter, loadCharacter, setState, onboardingOptions, selectedVrmIndex, customVrmUrl: _customVrmUrl, customVrmPreviewUrl, customCatchphrase, customVoicePresetId, activePackId, t, uiLanguage, registryStatus: _registryStatus, registryLoading: _registryLoading, registryRegistering: _registryRegistering, registryError: _registryError, dropStatus: _dropStatus, loadRegistryStatus, registerOnChain: _registerOnChain, syncRegistryProfile: _syncRegistryProfile, loadDropStatus, walletConfig: _walletConfig, elizaCloudConnected, elizaCloudVoiceProxyAvailable, } = useApp();
+export function CharacterEditor({ initialPage, sceneOverlay = false, inModal: _inModal = false, onHeaderActionsChange, } = {}) {
+    useRenderGuard("CharacterEditor");
+    const { tab, setTab, characterData, characterDraft, characterLoading, characterSaving, characterSaveSuccess, chatAgentVoiceMuted: _chatAgentVoiceMuted, characterSaveError, handleCharacterFieldInput, handleCharacterStyleInput, handleSaveCharacter, loadCharacter, setState, firstRunOptions, selectedVrmIndex, customVrmUrl: _customVrmUrl, customVrmPreviewUrl, customCatchphrase, customVoicePresetId, activePackId, t, uiLanguage, registryStatus: _registryStatus, registryLoading: _registryLoading, registryRegistering: _registryRegistering, registryError: _registryError, dropStatus: _dropStatus, loadRegistryStatus, registerOnChain: _registerOnChain, syncRegistryProfile: _syncRegistryProfile, loadDropStatus, walletConfig: _walletConfig, elizaCloudConnected, elizaCloudVoiceProxyAvailable, } = useAppSelectorShallow((s) => ({
+        tab: s.tab,
+        setTab: s.setTab,
+        characterData: s.characterData,
+        characterDraft: s.characterDraft,
+        characterLoading: s.characterLoading,
+        characterSaving: s.characterSaving,
+        characterSaveSuccess: s.characterSaveSuccess,
+        chatAgentVoiceMuted: s.chatAgentVoiceMuted,
+        characterSaveError: s.characterSaveError,
+        handleCharacterFieldInput: s.handleCharacterFieldInput,
+        handleCharacterStyleInput: s.handleCharacterStyleInput,
+        handleSaveCharacter: s.handleSaveCharacter,
+        loadCharacter: s.loadCharacter,
+        setState: s.setState,
+        firstRunOptions: s.firstRunOptions,
+        selectedVrmIndex: s.selectedVrmIndex,
+        customVrmUrl: s.customVrmUrl,
+        customVrmPreviewUrl: s.customVrmPreviewUrl,
+        customCatchphrase: s.customCatchphrase,
+        customVoicePresetId: s.customVoicePresetId,
+        activePackId: s.activePackId,
+        t: s.t,
+        uiLanguage: s.uiLanguage,
+        registryStatus: s.registryStatus,
+        registryLoading: s.registryLoading,
+        registryRegistering: s.registryRegistering,
+        registryError: s.registryError,
+        dropStatus: s.dropStatus,
+        loadRegistryStatus: s.loadRegistryStatus,
+        registerOnChain: s.registerOnChain,
+        syncRegistryProfile: s.syncRegistryProfile,
+        loadDropStatus: s.loadDropStatus,
+        walletConfig: s.walletConfig,
+        elizaCloudConnected: s.elizaCloudConnected,
+        elizaCloudVoiceProxyAvailable: s.elizaCloudVoiceProxyAvailable,
+    }));
     /** ElevenLabs voices are available only when direct key or cloud voice routing is active. */
     const useElevenLabs = elizaCloudConnected || elizaCloudVoiceProxyAvailable;
     useEffect(() => {
@@ -98,7 +174,7 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
             setFieldsEdited(true);
         handleCharacterStyleInput(key, value);
     }, [handleCharacterStyleInput]);
-    const [activePage, setActivePage] = useState(tab === "documents" ? "documents" : "personality");
+    const [activePage, setActivePage] = useState(initialPage ?? (tab === "documents" ? "documents" : "personality"));
     const [rightTab, setRightTab] = useState("style");
     const [customizing, setCustomizing] = useState(false);
     const [pendingNavigation, setPendingNavigation] = useState(null);
@@ -110,12 +186,17 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
         else if (activePage === "examples")
             setRightTab("examples");
     }, [activePage]);
-    // Sync activePage when tab changes externally (e.g. nav to /documents)
+    // Sync activePage when tab changes externally (e.g. nav to /documents) or
+    // when an embedded router renders a specific built-in subpage in split view.
     useEffect(() => {
+        if (initialPage && activePage !== initialPage) {
+            setActivePage(initialPage);
+            return;
+        }
         if (tab === "documents" && activePage !== "documents") {
             setActivePage("documents");
         }
-    }, [tab, activePage]);
+    }, [initialPage, tab, activePage]);
     /* ── Style entry state ──────────────────────────────────────────── */
     const [pendingStyleEntries, setPendingStyleEntries] = useState({ all: "", chat: "", post: "" });
     const [styleEntryDrafts, setStyleEntryDrafts] = useState({ all: [], chat: [], post: [] });
@@ -129,9 +210,9 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
     const suppressDirtyRef = useRef(false);
     /** Queued greeting to play after VRM teleport-in dissolve finishes. */
     const pendingGreetingRef = useRef(null);
-    const onboardingPresetStyles = useMemo(() => getOnboardingPresetStyles(onboardingOptions), [onboardingOptions]);
+    const firstRunPresetStyles = useMemo(() => getFirstRunPresetStyles(firstRunOptions), [firstRunOptions]);
     const [rosterStyles, setRosterStyles] = useState([
-        ...onboardingPresetStyles,
+        ...firstRunPresetStyles,
     ]);
     /* ── Voice config state ─────────────────────────────────────────── */
     const [voiceConfig, setVoiceConfig] = useState({});
@@ -148,7 +229,6 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
     useChatAvatarVoiceBridge({
         mouthOpen: voice.mouthOpen,
         isSpeaking: voice.isSpeaking,
-        usingAudioAnalysis: voice.usingAudioAnalysis,
         onSpeakingChange: handleChatAvatarSpeakingChange,
     });
     const [, setVoiceLoading] = useState(false);
@@ -159,11 +239,11 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
     const activeCharacterIdRef = useRef(null);
     /* ── Load roster ────────────────────────────────────────────────── */
     // Use static STYLE_PRESETS shipped in the frontend bundle — no API call
-    // needed. If the server provides styles via onboardingOptions, prefer those.
+    // needed. If the server provides styles via firstRunOptions, prefer those.
     useEffect(() => {
         const localizedPresets = getStylePresets(uiLanguage);
-        if (onboardingPresetStyles.length) {
-            const merged = onboardingPresetStyles.map((serverPreset) => {
+        if (firstRunPresetStyles.length) {
+            const merged = firstRunPresetStyles.map((serverPreset) => {
                 const localMeta = localizedPresets.find((p) => p.id === serverPreset.id ||
                     p.name === serverPreset.name ||
                     p.avatarIndex === serverPreset.avatarIndex);
@@ -181,16 +261,16 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
         else {
             setRosterStyles(localizedPresets);
         }
-    }, [onboardingPresetStyles, uiLanguage]);
+    }, [firstRunPresetStyles, uiLanguage]);
     const baseRosterEntries = useMemo(() => {
         const base = resolveRosterEntries(rosterStyles);
         if (activePackId && _customVrmUrl) {
-            const customOnboardingName = typeof characterData?.name === "string" && characterData.name.trim()
+            const customFirstRunName = typeof characterData?.name === "string" && characterData.name.trim()
                 ? characterData.name
                 : "Custom";
             base.unshift(createCustomPackRosterEntry({
                 id: activePackId,
-                name: customOnboardingName,
+                name: customFirstRunName,
                 previewUrl: customVrmPreviewUrl || undefined,
                 catchphrase: customCatchphrase || undefined,
                 voicePresetId: customVoicePresetId || undefined,
@@ -347,8 +427,8 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
                     }
                 }
             }
-            catch (err) {
-                console.warn("[CharacterEditor] Failed to load voice config:", err);
+            catch {
+                // non-fatal: voice config load failure leaves voice section empty
             }
             setVoiceLoading(false);
         })();
@@ -693,20 +773,22 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
             onHeaderActionsChange?.(null);
         };
     }, [onHeaderActionsChange]);
-    const renderContentActionButtons = (uploadInputId) => (_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-9 w-9 rounded-xl", onClick: () => document.getElementById(uploadInputId)?.click(), title: t("aria.upload", {
+    const renderContentActionButtons = (uploadInputId) => (_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(CharacterAgentButton, { agentId: "action-upload-vrm", agentLabel: t("aria.upload", { defaultValue: "Upload VRM" }), agentGroup: "character-actions", agentDescription: "Upload a custom VRM avatar file", type: "button", variant: "outline", size: "icon", className: "h-9 w-9 rounded-sm", onActivate: () => document.getElementById(uploadInputId)?.click(), onClick: () => document.getElementById(uploadInputId)?.click(), title: t("aria.upload", {
                     defaultValue: "Upload VRM",
                 }), "aria-label": t("aria.upload", {
                     defaultValue: "Upload VRM",
-                }), children: _jsx(UploadIcon, { className: "h-4 w-4" }) }), _jsx(Button, { type: "button", variant: "outline", size: "icon", className: "h-9 w-9 rounded-xl", onClick: handleExportCharacter, disabled: !currentCharacter, title: t("charactereditor.ExportJSON", {
+                }), children: _jsx(UploadIcon, { className: "h-4 w-4" }) }), _jsx(CharacterAgentButton, { agentId: "action-export-json", agentLabel: t("charactereditor.ExportJSON", {
+                    defaultValue: "Export JSON",
+                }), agentGroup: "character-actions", agentDescription: "Download the current character as a JSON file", type: "button", variant: "outline", size: "icon", className: "h-9 w-9 rounded-sm", onActivate: handleExportCharacter, onClick: handleExportCharacter, disabled: !currentCharacter, title: t("charactereditor.ExportJSON", {
                     defaultValue: "Export JSON",
                 }), "aria-label": t("charactereditor.ExportJSON", {
                     defaultValue: "Export JSON",
-                }), children: _jsx(DownloadIcon, { className: "h-4 w-4" }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "h-9 rounded-xl px-4 text-xs-tight font-semibold", onClick: handleResetToDefaults, disabled: !activeCharacterRosterEntry || !currentCharacter, title: t("charactereditor.ResetToDefaults", {
+                }), children: _jsx(DownloadIcon, { className: "h-4 w-4" }) }), _jsx(CharacterAgentButton, { agentId: "action-reset", agentLabel: t("common.reset", { defaultValue: "Reset" }), agentGroup: "character-actions", agentDescription: "Reset this character to its default values", type: "button", variant: "outline", size: "sm", className: "h-9 rounded-sm px-4 text-xs-tight font-semibold", onActivate: handleResetToDefaults, onClick: handleResetToDefaults, disabled: !activeCharacterRosterEntry || !currentCharacter, title: t("charactereditor.ResetToDefaults", {
                     defaultValue: "Reset to Defaults",
-                }), children: t("common.reset", { defaultValue: "Reset" }) }), _jsx(Button, { size: "sm", className: "h-9 rounded-xl px-6 text-sm font-bold tracking-[0.05em] transition-[background-color,border-color,color,box-shadow,transform] duration-200 disabled:opacity-50", style: hasPendingChanges ? accentGradientStyle : idleSaveBtnStyle, disabled: characterSaving ||
+                }), children: t("common.reset", { defaultValue: "Reset" }) }), _jsx(CharacterAgentButton, { agentId: "action-save", agentLabel: t("common.save", { defaultValue: "Save" }), agentGroup: "character-actions", agentDescription: "Save character and voice settings", agentStatus: hasPendingChanges ? "active" : "inactive", size: "sm", className: "h-9 rounded-sm px-6 text-sm font-bold tracking-[0.05em] transition-[background-color,border-color,color,box-shadow,transform] duration-200 disabled:opacity-50", style: hasPendingChanges ? accentGradientStyle : idleSaveBtnStyle, disabled: characterSaving ||
                     voiceSaving ||
                     !hasPendingChanges ||
-                    !currentCharacter, onClick: () => void handleSaveAll(), children: characterSaving || voiceSaving
+                    !currentCharacter, onActivate: () => void handleSaveAll(), onClick: () => void handleSaveAll(), children: characterSaving || voiceSaving
                     ? t("charactereditor.Saving", { defaultValue: "saving..." })
                     : t("common.save", { defaultValue: "Save" }) })] }));
     /* ── Style entry handlers ───────────────────────────────────────── */
@@ -756,127 +838,147 @@ export function CharacterEditor({ sceneOverlay = false, inModal: _inModal = fals
     if (characterLoading && !characterData) {
         return (_jsx("div", { className: sceneOverlay
                 ? "relative flex flex-col justify-end w-full flex-1 gap-2 overflow-hidden select-none transition-[width,margin-left] duration-[400ms] ease-in-out [-webkit-tap-highlight-color:transparent] max-[600px]:overflow-visible"
-                : "flex flex-col w-full flex-1 items-center justify-center", children: _jsx("div", { className: "text-muted text-sm", children: t("charactereditor.LoadingCharacterData", {
+                : "flex flex-col w-full flex-1 items-center justify-center", "data-no-camera-zoom": sceneOverlay ? "true" : undefined, "data-no-camera-drag": sceneOverlay ? "true" : undefined, "data-testid": sceneOverlay ? "companion-character-editor" : undefined, children: _jsx("div", { className: "text-muted text-sm", children: t("charactereditor.LoadingCharacterData", {
                     defaultValue: "Loading character data...",
                 }) }) }));
     }
     /* ── Render ─────────────────────────────────────────────────────── */
-    return (_jsxs("div", { className: sceneOverlay
-            ? "absolute inset-0 z-10 flex flex-col pointer-events-none pt-[4.5rem] px-6 pb-3 max-md:px-3 max-md:pb-2 max-md:pt-[4.5rem] [&>*]:pointer-events-auto"
-            : "flex flex-col w-full flex-1 min-h-0 gap-4", "data-no-camera-zoom": sceneOverlay ? "true" : undefined, "data-no-camera-drag": sceneOverlay ? "true" : undefined, onWheel: sceneOverlay ? (e) => e.stopPropagation() : undefined, children: [_jsxs("div", { className: sceneOverlay
-                    ? `relative flex flex-col justify-end w-full flex-1 gap-2 overflow-hidden select-none transition-[width,margin-left] duration-[400ms] ease-in-out [-webkit-tap-highlight-color:transparent] max-[600px]:overflow-visible [&_input]:select-text [&_textarea]:select-text [&_*:focus-visible:not(input):not(textarea)]:outline-none [&_*:focus-visible:not(input):not(textarea)]:shadow-none [&_button:focus-visible]:outline-none [&_button:focus-visible]:shadow-none${customizing ? " md:w-[40%] md:ml-auto" : ""}`
-                    : "relative flex min-h-0 w-full flex-1 flex-col select-none [&_input]:select-text [&_textarea]:select-text", children: [sceneOverlay && !customizing && (_jsx("div", { className: "shrink min-h-0 overflow-hidden flex flex-col items-center justify-end w-full relative max-[600px]:!overflow-visible pointer-events-auto", children: _jsx(CharacterRoster, { entries: characterRoster, selectedId: selectedCharacterId ?? activeCharacterRosterEntry?.id ?? null, onSelect: handleSelectCharacter }) })), sceneOverlay && customizing && (_jsxs("div", { className: "flex flex-col flex-1 min-h-0 gap-2 overflow-hidden", role: "region", "aria-label": t("charactereditor.TabbedEditorGroupLabel", {
-                            defaultValue: "Character editor — tabbed sections",
-                        }), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 shrink-0", children: [_jsx("div", { className: "flex shrink-0 items-center gap-1 rounded-lg border border-border bg-elevated p-1", style: { boxShadow: pageTabsBoxShadow }, role: "tablist", "aria-label": t("charactereditor.TabbedEditorGroupLabel", {
-                                            defaultValue: "Character editor sections",
-                                        }), children: CHARACTER_EDITOR_PAGES.map((page) => (_jsx("button", { type: "button", id: `character-editor-tab-${page}`, role: "tab", "aria-selected": activePage === page, "aria-controls": `character-editor-panel-${page}`, tabIndex: activePage === page ? 0 : -1, className: "flex-initial cursor-pointer rounded-md border border-transparent bg-transparent px-[0.6rem] py-1.5 text-center text-2xs font-bold uppercase tracking-[0.1em] text-txt transition-[background,border-color,color,box-shadow] duration-150 hover:border-border hover:bg-bg-hover hover:text-txt-strong", style: activePage === page ? accentGradientStyle : undefined, onClick: () => requestPageChange(page), onKeyDown: (event) => {
-                                                if (event.key !== "ArrowRight" &&
-                                                    event.key !== "ArrowLeft" &&
-                                                    event.key !== "Home" &&
-                                                    event.key !== "End") {
-                                                    return;
-                                                }
-                                                event.preventDefault();
-                                                const currentIndex = CHARACTER_EDITOR_PAGES.indexOf(activePage);
-                                                const nextIndex = event.key === "Home"
-                                                    ? 0
-                                                    : event.key === "End"
-                                                        ? CHARACTER_EDITOR_PAGES.length - 1
-                                                        : event.key === "ArrowRight"
-                                                            ? (currentIndex + 1) %
-                                                                CHARACTER_EDITOR_PAGES.length
-                                                            : (currentIndex -
-                                                                1 +
-                                                                CHARACTER_EDITOR_PAGES.length) %
-                                                                CHARACTER_EDITOR_PAGES.length;
-                                                const nextPage = CHARACTER_EDITOR_PAGES[nextIndex];
-                                                requestPageChange(nextPage);
-                                                requestAnimationFrame(() => {
-                                                    globalThis.document
-                                                        ?.getElementById(`character-editor-tab-${nextPage}`)
-                                                        ?.focus();
-                                                });
-                                            }, children: page === "personality"
-                                                ? t("charactereditor.TabPersonality", {
-                                                    defaultValue: "Personality",
-                                                })
-                                                : page === "style"
-                                                    ? t("charactereditor.TabStyles", {
-                                                        defaultValue: "Styles",
+    return (_jsx(ShellViewAgentSurface, { viewId: "character", children: _jsxs("div", { className: sceneOverlay
+                ? "absolute inset-0 z-10 flex flex-col pointer-events-none pt-[4.5rem] px-6 pb-3 max-md:px-3 max-md:pb-2 max-md:pt-[4.5rem] [&>*]:pointer-events-auto"
+                : "flex flex-col w-full flex-1 min-h-0 gap-4", "data-no-camera-zoom": sceneOverlay ? "true" : undefined, "data-no-camera-drag": sceneOverlay ? "true" : undefined, "data-testid": sceneOverlay ? "companion-character-editor" : undefined, onWheel: sceneOverlay ? (e) => e.stopPropagation() : undefined, children: [_jsxs("div", { className: sceneOverlay
+                        ? `relative flex flex-col justify-end w-full flex-1 gap-2 overflow-hidden select-none transition-[width,margin-left] duration-[400ms] ease-in-out [-webkit-tap-highlight-color:transparent] max-[600px]:overflow-visible [&_input]:select-text [&_textarea]:select-text${customizing ? " md:w-[40%] md:ml-auto" : ""}`
+                        : "relative flex min-h-0 w-full flex-1 flex-col select-none [&_input]:select-text [&_textarea]:select-text", children: [sceneOverlay && !customizing && (_jsx("div", { className: "shrink min-h-0 overflow-hidden flex flex-col items-center justify-end w-full relative max-[600px]:!overflow-visible pointer-events-auto", children: _jsx(CharacterRoster, { entries: characterRoster, selectedId: selectedCharacterId ?? activeCharacterRosterEntry?.id ?? null, onSelect: handleSelectCharacter }) })), sceneOverlay && customizing && (_jsxs("section", { className: "flex flex-col flex-1 min-h-0 gap-2 overflow-hidden", "aria-label": t("charactereditor.TabbedEditorGroupLabel", {
+                                defaultValue: "Character editor — tabbed sections",
+                            }), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 shrink-0", children: [_jsx("div", { className: "flex shrink-0 items-center gap-1 rounded-sm border border-border bg-elevated p-1", role: "tablist", "aria-label": t("charactereditor.TabbedEditorGroupLabel", {
+                                                defaultValue: "Character editor sections",
+                                            }), children: CHARACTER_EDITOR_PAGES.map((page) => {
+                                                const pageLabel = page === "personality"
+                                                    ? t("charactereditor.TabPersonality", {
+                                                        defaultValue: "Personality",
                                                     })
-                                                    : page === "examples"
-                                                        ? t("charactereditor.TabExamples", {
-                                                            defaultValue: "Examples",
+                                                    : page === "style"
+                                                        ? t("charactereditor.TabStyles", {
+                                                            defaultValue: "Styles",
                                                         })
-                                                        : t("nav.documents", {
-                                                            defaultValue: "Knowledge",
-                                                        }) }, page))) }), activePage !== "documents" && (_jsx("div", { className: "ml-auto", children: renderContentActionButtons("ce-vrm-upload") }))] }), _jsxs("div", { id: `character-editor-panel-${activePage}`, role: "tabpanel", "aria-labelledby": `character-editor-tab-${activePage}`, className: "flex flex-col flex-1 min-h-0 overflow-hidden", children: [_jsx("div", { className: `custom-scrollbar flex flex-col flex-1 gap-3 min-h-0 overflow-y-auto pr-1 [scrollbar-gutter:stable]${activePage !== "personality" ? " hidden" : ""}`, children: _jsx(CharacterIdentityPanel, { bioText: bioText, handleFieldEdit: handleFieldEdit, t: t }) }), _jsxs("div", { className: `custom-scrollbar flex flex-col flex-1 gap-3 min-h-0 overflow-y-auto pr-1 [scrollbar-gutter:stable]${activePage !== "style" && activePage !== "examples" ? " hidden" : ""}`, children: [_jsx("div", { style: { display: rightTab === "style" ? undefined : "none" }, children: _jsx(CharacterStylePanel, { d: d, pendingStyleEntries: pendingStyleEntries, styleEntryDrafts: styleEntryDrafts, handlePendingStyleEntryChange: handlePendingStyleEntryChange, handleAddStyleEntry: handleAddStyleEntry, handleRemoveStyleEntry: handleRemoveStyleEntry, handleStyleEntryDraftChange: handleStyleEntryDraftChange, handleCommitStyleEntry: handleCommitStyleEntry, handleReorderStyleEntries: handleReorderStyleEntries, t: t }) }), _jsx("div", { style: {
-                                                    display: rightTab === "examples" ? undefined : "none",
-                                                }, children: _jsx(CharacterExamplesPanel, { d: d, normalizedMessageExamples: normalizedMessageExamples, handleFieldEdit: handleFieldEdit, t: t }) })] }), _jsx("div", { className: `flex flex-col flex-1 min-h-0 overflow-hidden${activePage !== "documents" ? " hidden" : ""}`, children: _jsx(DocumentsView, { inModal: true }) })] })] })), !sceneOverlay && (_jsx(CharacterHubView, { d: d, bioText: bioText, normalizedMessageExamples: normalizedMessageExamples, pendingStyleEntries: pendingStyleEntries, styleEntryDrafts: styleEntryDrafts, handleFieldEdit: handleFieldEdit, applyFieldEdit: (field, value) => {
-                            handleCharacterFieldInput(field, value);
-                        }, handlePendingStyleEntryChange: handlePendingStyleEntryChange, applyStyleEdit: handleCharacterStyleInput, handleStyleEntryDraftChange: handleStyleEntryDraftChange, characterSaving: characterSaving, characterSaveSuccess: characterSaveSuccess, characterSaveError: characterSaveError, hasPendingChanges: hasPendingChanges, onSave: handleSaveCharacter }))] }), sceneOverlay && (_jsxs("div", { className: "flex flex-col gap-2 pt-2 shrink-0 pointer-events-auto", children: [(characterSaveSuccess || combinedSaveError) && (_jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [characterSaveSuccess && (_jsx("span", { className: "rounded-lg border border-status-success/20 bg-status-success-bg px-3 py-1 text-xs font-bold text-status-success", children: characterSaveSuccess })), combinedSaveError && (_jsx("span", { className: "rounded-lg border border-status-danger/20 bg-status-danger-bg px-3 py-1 text-xs font-medium text-status-danger", children: combinedSaveError }))] })), _jsxs("div", { className: "flex min-h-9 items-center justify-end", children: [_jsx("input", { type: "file", id: "ce-vrm-upload", accept: ".vrm", className: "hidden", style: { display: "none" }, onChange: (e) => {
-                                    const file = e.target.files?.[0];
-                                    if (file) {
-                                        setState("selectedVrmIndex", 0);
-                                    }
-                                    e.target.value = "";
-                                } }), _jsx(Button, { type: "button", variant: "default", size: "sm", className: "h-9 rounded-xl px-6 text-sm font-bold tracking-[0.05em] transition-[background-color,border-color,color,box-shadow,transform] duration-200 disabled:opacity-50", style: accentGradientStyle, onClick: () => {
-                                    if (customizing) {
-                                        setCustomizing(false);
-                                        setTab("character-select");
-                                    }
-                                    else {
-                                        setCustomizing(true);
-                                        setTab("character");
-                                    }
-                                }, children: customizing
-                                    ? t("charactereditor.SelectBtn", { defaultValue: "Select" })
-                                    : t("charactereditor.CustomizeBtn", {
-                                        defaultValue: "Customize",
-                                    }) })] })] })), _jsx(Dialog, { open: pendingNavigation !== null, onOpenChange: (open) => {
-                    if (!open)
-                        setPendingNavigation(null);
-                }, children: _jsxs(DialogContent, { className: "max-w-md rounded-2xl border-border/60 bg-bg shadow-[var(--shadow-lg)] backdrop-blur-xl", children: [_jsxs(DialogHeader, { className: "gap-3", children: [_jsx(DialogTitle, { children: t("charactereditor.UnsavedChangesTitle", {
-                                        defaultValue: "Unsaved changes",
-                                    }) }), _jsxs(DialogDescription, { className: "whitespace-pre-line text-muted-strong", children: [t("charactereditor.UnsavedChangesBody", {
-                                            defaultValue: "You have unsaved changes. Save before switching?",
-                                        }), pendingNavigation?.kind === "character"
-                                            ? `\n${t("charactereditor.SwitchCharacterPrompt", {
-                                                defaultValue: "Switch to {{name}}?",
-                                                name: pendingNavigation.entry.name,
-                                            })}`
-                                            : pendingNavigation?.kind === "page"
-                                                ? `\n${t("charactereditor.SwitchSectionPrompt", {
+                                                        : page === "examples"
+                                                            ? t("charactereditor.TabExamples", {
+                                                                defaultValue: "Examples",
+                                                            })
+                                                            : t("nav.documents", {
+                                                                defaultValue: "Knowledge",
+                                                            });
+                                                return (_jsx(CharacterPageTabButton, { page: page, label: pageLabel, agentLabel: pageLabel, isActive: activePage === page, onSelect: requestPageChange, className: "flex-initial cursor-pointer rounded-sm border border-transparent bg-transparent px-[0.6rem] py-1.5 text-center text-2xs font-bold uppercase tracking-[0.1em] text-txt transition-[background,border-color,color,box-shadow] duration-150 hover:border-border hover:bg-bg-hover hover:text-txt-strong", style: activePage === page ? accentGradientStyle : undefined, onKeyDown: (event) => {
+                                                        if (event.key !== "ArrowRight" &&
+                                                            event.key !== "ArrowLeft" &&
+                                                            event.key !== "Home" &&
+                                                            event.key !== "End") {
+                                                            return;
+                                                        }
+                                                        event.preventDefault();
+                                                        const currentIndex = CHARACTER_EDITOR_PAGES.indexOf(activePage);
+                                                        const nextIndex = event.key === "Home"
+                                                            ? 0
+                                                            : event.key === "End"
+                                                                ? CHARACTER_EDITOR_PAGES.length - 1
+                                                                : event.key === "ArrowRight"
+                                                                    ? (currentIndex + 1) %
+                                                                        CHARACTER_EDITOR_PAGES.length
+                                                                    : (currentIndex -
+                                                                        1 +
+                                                                        CHARACTER_EDITOR_PAGES.length) %
+                                                                        CHARACTER_EDITOR_PAGES.length;
+                                                        const nextPage = CHARACTER_EDITOR_PAGES[nextIndex];
+                                                        requestPageChange(nextPage);
+                                                        requestAnimationFrame(() => {
+                                                            globalThis.document
+                                                                ?.getElementById(`character-editor-tab-${nextPage}`)
+                                                                ?.focus();
+                                                        });
+                                                    }, children: pageLabel }, page));
+                                            }) }), activePage !== "documents" && (_jsx("div", { className: "ml-auto", children: renderContentActionButtons("ce-vrm-upload") }))] }), _jsxs("div", { id: `character-editor-panel-${activePage}`, role: "tabpanel", "aria-labelledby": `character-editor-tab-${activePage}`, className: "flex flex-col flex-1 min-h-0 overflow-hidden", children: [_jsx("div", { className: `custom-scrollbar flex flex-col flex-1 gap-3 min-h-0 overflow-y-auto pr-1 [scrollbar-gutter:stable]${activePage !== "personality" ? " hidden" : ""}`, children: _jsx(CharacterIdentityPanel, { bioText: bioText, handleFieldEdit: handleFieldEdit, t: t }) }), _jsxs("div", { className: `custom-scrollbar flex flex-col flex-1 gap-3 min-h-0 overflow-y-auto pr-1 [scrollbar-gutter:stable]${activePage !== "style" && activePage !== "examples" ? " hidden" : ""}`, children: [_jsx("div", { style: {
+                                                        display: rightTab === "style" ? undefined : "none",
+                                                    }, children: _jsx(CharacterStylePanel, { d: d, pendingStyleEntries: pendingStyleEntries, styleEntryDrafts: styleEntryDrafts, handlePendingStyleEntryChange: handlePendingStyleEntryChange, handleAddStyleEntry: handleAddStyleEntry, handleRemoveStyleEntry: handleRemoveStyleEntry, handleStyleEntryDraftChange: handleStyleEntryDraftChange, handleCommitStyleEntry: handleCommitStyleEntry, handleReorderStyleEntries: handleReorderStyleEntries, t: t }) }), _jsx("div", { style: {
+                                                        display: rightTab === "examples" ? undefined : "none",
+                                                    }, children: _jsx(CharacterExamplesPanel, { d: d, normalizedMessageExamples: normalizedMessageExamples, handleFieldEdit: handleFieldEdit, t: t }) })] }), _jsx("div", { className: `flex flex-col flex-1 min-h-0 overflow-hidden${activePage !== "documents" ? " hidden" : ""}`, children: _jsx(DocumentsView, { inModal: true }) })] })] })), !sceneOverlay && (_jsx(CharacterHubView, { initialSection: initialPage === "documents" || initialPage === "personality"
+                                ? initialPage
+                                : undefined, d: d, bioText: bioText, normalizedMessageExamples: normalizedMessageExamples, pendingStyleEntries: pendingStyleEntries, styleEntryDrafts: styleEntryDrafts, handleFieldEdit: handleFieldEdit, applyFieldEdit: (field, value) => {
+                                handleCharacterFieldInput(field, value);
+                            }, handlePendingStyleEntryChange: handlePendingStyleEntryChange, applyStyleEdit: handleCharacterStyleInput, handleStyleEntryDraftChange: handleStyleEntryDraftChange, characterSaving: characterSaving, characterSaveSuccess: characterSaveSuccess, characterSaveError: characterSaveError, hasPendingChanges: hasPendingChanges, onSave: handleSaveCharacter }))] }), sceneOverlay && (_jsxs("div", { className: "flex flex-col gap-2 pt-2 shrink-0 pointer-events-auto", children: [(characterSaveSuccess || combinedSaveError) && (_jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [characterSaveSuccess && (_jsx("span", { className: "rounded-sm border border-status-success/20 bg-status-success-bg px-3 py-1 text-xs font-bold text-status-success", children: characterSaveSuccess })), combinedSaveError && (_jsx("span", { className: "rounded-sm border border-status-danger/20 bg-status-danger-bg px-3 py-1 text-xs font-medium text-status-danger", children: combinedSaveError }))] })), _jsxs("div", { className: "flex min-h-9 items-center justify-end", children: [_jsx("input", { type: "file", id: "ce-vrm-upload", accept: ".vrm", className: "hidden", style: { display: "none" }, onChange: (e) => {
+                                        const file = e.target.files?.[0];
+                                        if (file) {
+                                            setState("selectedVrmIndex", 0);
+                                        }
+                                        e.target.value = "";
+                                    } }), _jsx(CharacterAgentButton, { agentId: "action-toggle-customize", agentLabel: customizing
+                                        ? t("charactereditor.SelectBtn", { defaultValue: "Select" })
+                                        : t("charactereditor.CustomizeBtn", {
+                                            defaultValue: "Customize",
+                                        }), agentGroup: "character-actions", agentDescription: "Toggle between the character roster and the customize editor", agentStatus: customizing ? "active" : "inactive", type: "button", variant: "default", size: "sm", className: "h-9 rounded-sm px-6 text-sm font-bold tracking-[0.05em] transition-[background-color,border-color,color,box-shadow,transform] duration-200 disabled:opacity-50", style: accentGradientStyle, onActivate: () => {
+                                        if (customizing) {
+                                            setCustomizing(false);
+                                            setTab("character-select");
+                                        }
+                                        else {
+                                            setCustomizing(true);
+                                            setTab("character");
+                                        }
+                                    }, onClick: () => {
+                                        if (customizing) {
+                                            setCustomizing(false);
+                                            setTab("character-select");
+                                        }
+                                        else {
+                                            setCustomizing(true);
+                                            setTab("character");
+                                        }
+                                    }, children: customizing
+                                        ? t("charactereditor.SelectBtn", { defaultValue: "Select" })
+                                        : t("charactereditor.CustomizeBtn", {
+                                            defaultValue: "Customize",
+                                        }) })] })] })), _jsx(Dialog, { open: pendingNavigation !== null, onOpenChange: (open) => {
+                        if (!open)
+                            setPendingNavigation(null);
+                    }, children: _jsxs(DialogContent, { className: "max-w-md rounded-sm border-border/60 bg-bg", children: [_jsxs(DialogHeader, { className: "gap-3", children: [_jsx(DialogTitle, { children: t("charactereditor.UnsavedChangesTitle", {
+                                            defaultValue: "Unsaved changes",
+                                        }) }), _jsxs(DialogDescription, { className: "whitespace-pre-line text-muted-strong", children: [t("charactereditor.UnsavedChangesBody", {
+                                                defaultValue: "You have unsaved changes. Save before switching?",
+                                            }), pendingNavigation?.kind === "character"
+                                                ? `\n${t("charactereditor.SwitchCharacterPrompt", {
                                                     defaultValue: "Switch to {{name}}?",
-                                                    name: pendingNavigation.page === "personality"
-                                                        ? t("charactereditor.TabPersonality", {
-                                                            defaultValue: "Personality",
-                                                        })
-                                                        : pendingNavigation.page === "style"
-                                                            ? t("charactereditor.TabStyles", {
-                                                                defaultValue: "Style",
+                                                    name: pendingNavigation.entry.name,
+                                                })}`
+                                                : pendingNavigation?.kind === "page"
+                                                    ? `\n${t("charactereditor.SwitchSectionPrompt", {
+                                                        defaultValue: "Switch to {{name}}?",
+                                                        name: pendingNavigation.page === "personality"
+                                                            ? t("charactereditor.TabPersonality", {
+                                                                defaultValue: "Personality",
                                                             })
-                                                            : pendingNavigation.page === "examples"
-                                                                ? t("charactereditor.TabExamples", {
-                                                                    defaultValue: "Examples",
+                                                            : pendingNavigation.page === "style"
+                                                                ? t("charactereditor.TabStyles", {
+                                                                    defaultValue: "Style",
                                                                 })
-                                                                : t("nav.documents", {
-                                                                    defaultValue: "Knowledge",
-                                                                }),
-                                                })}`
-                                                : ""] })] }), _jsxs(DialogFooter, { className: "gap-2 sm:gap-2", children: [_jsx(Button, { type: "button", className: "border-accent/55 bg-accent/22 text-accent-fg hover:border-accent/75 hover:bg-accent/32", onClick: () => void resolvePendingNavigation(true), disabled: characterSaving || voiceSaving, children: t("common.save", { defaultValue: "Save" }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => void resolvePendingNavigation(false), children: t("charactereditor.DontSave", {
-                                        defaultValue: "Don't save",
-                                    }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setPendingNavigation(null), children: t("common.cancel") })] })] }) }), _jsx(Dialog, { open: resetConfirmOpen, onOpenChange: (open) => {
-                    if (!open)
-                        setResetConfirmOpen(false);
-                }, children: _jsxs(DialogContent, { className: "max-w-md rounded-2xl border-border/60 bg-bg shadow-[var(--shadow-lg)] backdrop-blur-xl", children: [_jsxs(DialogHeader, { className: "gap-3", children: [_jsx(DialogTitle, { children: t("charactereditor.ResetToDefaults", {
-                                        defaultValue: "Reset to defaults?",
-                                    }) }), _jsx(DialogDescription, { className: "text-muted-strong", children: t("charactereditor.ResetConfirmBody", {
-                                        defaultValue: "This will discard all unsaved changes and restore this character to its default values.",
-                                    }) })] }), _jsxs(DialogFooter, { className: "gap-2 sm:gap-2", children: [_jsx(Button, { type: "button", variant: "destructive", onClick: () => {
-                                        handleResetToDefaults();
-                                        setResetConfirmOpen(false);
-                                    }, children: t("common.reset", { defaultValue: "Reset" }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setResetConfirmOpen(false), children: t("common.cancel") })] })] }) })] }));
+                                                                : pendingNavigation.page === "examples"
+                                                                    ? t("charactereditor.TabExamples", {
+                                                                        defaultValue: "Examples",
+                                                                    })
+                                                                    : t("nav.documents", {
+                                                                        defaultValue: "Knowledge",
+                                                                    }),
+                                                    })}`
+                                                    : ""] })] }), _jsxs(DialogFooter, { className: "gap-2 sm:gap-2", children: [_jsx(Button, { type: "button", className: "border-accent/55 bg-accent/22 text-accent-fg hover:border-accent/75 hover:bg-accent/32", onClick: () => void resolvePendingNavigation(true), disabled: characterSaving || voiceSaving, children: t("common.save", { defaultValue: "Save" }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => void resolvePendingNavigation(false), children: t("charactereditor.DontSave", {
+                                            defaultValue: "Don't save",
+                                        }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setPendingNavigation(null), children: t("common.cancel") })] })] }) }), _jsx(Dialog, { open: resetConfirmOpen, onOpenChange: (open) => {
+                        if (!open)
+                            setResetConfirmOpen(false);
+                    }, children: _jsxs(DialogContent, { className: "max-w-md rounded-sm border-border/60 bg-bg", children: [_jsxs(DialogHeader, { className: "gap-3", children: [_jsx(DialogTitle, { children: t("charactereditor.ResetToDefaults", {
+                                            defaultValue: "Reset to defaults?",
+                                        }) }), _jsx(DialogDescription, { className: "text-muted-strong", children: t("charactereditor.ResetConfirmBody", {
+                                            defaultValue: "This will discard all unsaved changes and restore this character to its default values.",
+                                        }) })] }), _jsxs(DialogFooter, { className: "gap-2 sm:gap-2", children: [_jsx(Button, { type: "button", variant: "destructive", onClick: () => {
+                                            handleResetToDefaults();
+                                            setResetConfirmOpen(false);
+                                        }, children: t("common.reset", { defaultValue: "Reset" }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setResetConfirmOpen(false), children: t("common.cancel") })] })] }) })] }) }));
 }
 /**
  * Re-export as CharacterView so the upstream App.tsx import resolves here

package/components/character/CharacterEditorPanels.d.ts

@@ -1,5 +1,5 @@
 import type { MessageExampleGroup } from "@elizaos/core";
-import type { CharacterData } from "../../api/client-types-config";
+import type { CharacterData } from "../../api/client-types-config.js";
 export interface CharacterIdentityPanelProps {
     bioText: string;
     handleFieldEdit: (field: string, value: unknown) => void;

package/components/character/CharacterEditorPanels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CharacterEditorPanels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterEditorPanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAQzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAkGnE,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAED,MAAM,WAAW,wBAAwB;IACvC,CAAC,EAAE,aAAa,CAAC;IACjB,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC3C,6BAA6B,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,mBAAmB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,2BAA2B,EAAE,CAC3B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,yBAAyB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAED,MAAM,WAAW,2BAA2B;IAC1C,CAAC,EAAE,aAAa,CAAC;IACjB,yBAAyB,EAAE,mBAAmB,EAAE,CAAC;IACjD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAID,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,eAAe,EACf,CAAC,GACF,EAAE,2BAA2B,2CAqB7B;AAID,wBAAgB,mBAAmB,CAAC,EAClC,CAAC,EACD,mBAAmB,EACnB,gBAAgB,EAChB,6BAA6B,EAC7B,mBAAmB,EACnB,sBAAsB,EACtB,2BAA2B,EAC3B,sBAAsB,EACtB,yBAAyB,EACzB,CAAC,GACF,EAAE,wBAAwB,2CAgN1B;AAID,wBAAgB,sBAAsB,CAAC,EACrC,CAAC,EACD,yBAAyB,EACzB,eAAe,EACf,CAAC,GACF,EAAE,2BAA2B,2CAmU7B"}
+{"version":3,"file":"CharacterEditorPanels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterEditorPanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAQzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAqGnE,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAED,MAAM,WAAW,wBAAwB;IACvC,CAAC,EAAE,aAAa,CAAC;IACjB,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC3C,6BAA6B,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,mBAAmB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,2BAA2B,EAAE,CAC3B,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,yBAAyB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAED,MAAM,WAAW,2BAA2B;IAC1C,CAAC,EAAE,aAAa,CAAC;IACjB,yBAAyB,EAAE,mBAAmB,EAAE,CAAC;IACjD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CAC9D;AAID,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,eAAe,EACf,CAAC,GACF,EAAE,2BAA2B,2CAiC7B;AA8LD,wBAAgB,mBAAmB,CAAC,EAClC,CAAC,EACD,mBAAmB,EACnB,gBAAgB,EAChB,6BAA6B,EAC7B,mBAAmB,EACnB,sBAAsB,EACtB,2BAA2B,EAC3B,sBAAsB,EACtB,yBAAyB,EACzB,CAAC,GACF,EAAE,wBAAwB,2CAoI1B;AA0ND,wBAAgB,sBAAsB,CAAC,EACrC,CAAC,EACD,yBAAyB,EACzB,eAAe,EACf,CAAC,GACF,EAAE,2BAA2B,2CAwQ7B"}