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

package/components/EmotePicker.d.ts

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

package/components/EmotePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmotePicker.d.ts","sourceRoot":"","sources":["../../src/components/EmotePicker.tsx"],"names":[],"mappings":"AA6MA,wBAAgB,WAAW,mDAmU1B"}

package/components/EmotePicker.js

@@ -0,0 +1,343 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { client } from "../api";
+import { dispatchMiladyEvent, EMOTE_PICKER_EVENT, STOP_EMOTE_EVENT, } from "../events";
+import { useTimeout } from "../hooks";
+import { useApp } from "../state";
+// Category icons
+const CATEGORY_ICONS = {
+    greeting: "\u{1F44B}",
+    emotion: "\u{1F622}",
+    dance: "\u{1F57A}",
+    combat: "\u{2694}",
+    idle: "\u{1F9D8}",
+    movement: "\u{1F3C3}",
+    other: "\u{2728}",
+};
+// Emote icons
+const EMOTE_ICONS = {
+    wave: "\u{1F44B}",
+    kiss: "\u{1F48B}",
+    crying: "\u{1F62D}",
+    sorrow: "\u{1F614}",
+    "rude-gesture": "\u{1F595}",
+    "looking-around": "\u{1F440}",
+    "dance-happy": "\u{1F483}",
+    "dance-breaking": "\u{1F938}",
+    "dance-hiphop": "\u{1F57A}",
+    "dance-popping": "\u{1FAA9}",
+    "hook-punch": "\u{1F44A}",
+    punching: "\u{1F94A}",
+    "firing-gun": "\u{1F52B}",
+    "sword-swing": "\u{2694}",
+    chopping: "\u{1FA93}",
+    "spell-cast": "\u{1FA84}",
+    range: "\u{1F3F9}",
+    death: "\u{1F480}",
+    idle: "\u{1F9D8}",
+    talk: "\u{1F5E3}",
+    squat: "\u{1F9CE}",
+    fishing: "\u{1F3A3}",
+    float: "\u{1F54A}",
+    jump: "\u{1F4A8}",
+    flip: "\u{1F938}",
+    run: "\u{1F3C3}",
+    walk: "\u{1F6B6}",
+    crawling: "\u{1F40D}",
+    fall: "\u{1F4A5}",
+};
+// All emotes
+const ALL_EMOTES = [
+    // Greeting
+    { id: "wave", name: "Wave", category: "greeting", icon: EMOTE_ICONS.wave },
+    { id: "kiss", name: "Kiss", category: "greeting", icon: EMOTE_ICONS.kiss },
+    // Emotion
+    {
+        id: "crying",
+        name: "Crying",
+        category: "emotion",
+        icon: EMOTE_ICONS.crying,
+    },
+    {
+        id: "sorrow",
+        name: "Sorrow",
+        category: "emotion",
+        icon: EMOTE_ICONS.sorrow,
+    },
+    {
+        id: "rude-gesture",
+        name: "Rude Gesture",
+        category: "emotion",
+        icon: EMOTE_ICONS["rude-gesture"],
+    },
+    {
+        id: "looking-around",
+        name: "Looking Around",
+        category: "emotion",
+        icon: EMOTE_ICONS["looking-around"],
+    },
+    // Dance
+    {
+        id: "dance-happy",
+        name: "Dance Happy",
+        category: "dance",
+        icon: EMOTE_ICONS["dance-happy"],
+    },
+    {
+        id: "dance-breaking",
+        name: "Dance Breaking",
+        category: "dance",
+        icon: EMOTE_ICONS["dance-breaking"],
+    },
+    {
+        id: "dance-hiphop",
+        name: "Dance Hip Hop",
+        category: "dance",
+        icon: EMOTE_ICONS["dance-hiphop"],
+    },
+    {
+        id: "dance-popping",
+        name: "Dance Popping",
+        category: "dance",
+        icon: EMOTE_ICONS["dance-popping"],
+    },
+    // Combat
+    {
+        id: "hook-punch",
+        name: "Hook Punch",
+        category: "combat",
+        icon: EMOTE_ICONS["hook-punch"],
+    },
+    {
+        id: "punching",
+        name: "Punching",
+        category: "combat",
+        icon: EMOTE_ICONS.punching,
+    },
+    {
+        id: "firing-gun",
+        name: "Firing Gun",
+        category: "combat",
+        icon: EMOTE_ICONS["firing-gun"],
+    },
+    {
+        id: "sword-swing",
+        name: "Sword Swing",
+        category: "combat",
+        icon: EMOTE_ICONS["sword-swing"],
+    },
+    {
+        id: "chopping",
+        name: "Chopping",
+        category: "combat",
+        icon: EMOTE_ICONS.chopping,
+    },
+    {
+        id: "spell-cast",
+        name: "Spell Cast",
+        category: "combat",
+        icon: EMOTE_ICONS["spell-cast"],
+    },
+    { id: "range", name: "Range", category: "combat", icon: EMOTE_ICONS.range },
+    { id: "death", name: "Death", category: "combat", icon: EMOTE_ICONS.death },
+    // Idle
+    { id: "idle", name: "Idle", category: "idle", icon: EMOTE_ICONS.idle },
+    { id: "talk", name: "Talk", category: "idle", icon: EMOTE_ICONS.talk },
+    { id: "squat", name: "Squat", category: "idle", icon: EMOTE_ICONS.squat },
+    {
+        id: "fishing",
+        name: "Fishing",
+        category: "idle",
+        icon: EMOTE_ICONS.fishing,
+    },
+    // Movement
+    { id: "float", name: "Float", category: "movement", icon: EMOTE_ICONS.float },
+    { id: "jump", name: "Jump", category: "movement", icon: EMOTE_ICONS.jump },
+    { id: "flip", name: "Flip", category: "movement", icon: EMOTE_ICONS.flip },
+    { id: "run", name: "Run", category: "movement", icon: EMOTE_ICONS.run },
+    { id: "walk", name: "Walk", category: "movement", icon: EMOTE_ICONS.walk },
+    {
+        id: "crawling",
+        name: "Crawling",
+        category: "movement",
+        icon: EMOTE_ICONS.crawling,
+    },
+    { id: "fall", name: "Fall", category: "movement", icon: EMOTE_ICONS.fall },
+];
+const CATEGORIES = [
+    "greeting",
+    "emotion",
+    "dance",
+    "combat",
+    "idle",
+    "movement",
+];
+const CATEGORY_LABELS = {
+    greeting: "Greeting",
+    emotion: "Emotion",
+    dance: "Dance",
+    combat: "Combat",
+    idle: "Idle",
+    movement: "Movement",
+};
+export function EmotePicker() {
+    const { setTimeout } = useTimeout();
+    const { emotePickerOpen, openEmotePicker, closeEmotePicker, t } = useApp();
+    const [search, setSearch] = useState("");
+    const [playing, setPlaying] = useState(null);
+    const [activeCategory, setActiveCategory] = useState(null);
+    const inputRef = useRef(null);
+    const panelRef = useRef(null);
+    const posRef = useRef({ x: 0, y: 0 });
+    const dragOrigin = useRef(null);
+    // Apply position to panel
+    const applyPosition = useCallback((x, y) => {
+        const el = panelRef.current;
+        if (!el)
+            return;
+        el.style.left = `${x}px`;
+        el.style.top = `${y}px`;
+        el.style.bottom = "auto";
+        el.style.right = "auto";
+        posRef.current = { x, y };
+    }, []);
+    // Drag handlers
+    const onPointerDown = useCallback((e) => {
+        const el = panelRef.current;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        dragOrigin.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            rect,
+        };
+        const onPointerMove = (moveEvent) => {
+            if (!dragOrigin.current)
+                return;
+            const dx = moveEvent.clientX - dragOrigin.current.startX;
+            const dy = moveEvent.clientY - dragOrigin.current.startY;
+            let newX = dragOrigin.current.rect.left + dx;
+            let newY = dragOrigin.current.rect.top + dy;
+            // Clamp to viewport
+            const maxX = window.innerWidth - dragOrigin.current.rect.width;
+            const maxY = window.innerHeight - dragOrigin.current.rect.height;
+            newX = Math.max(0, Math.min(newX, maxX));
+            newY = Math.max(0, Math.min(newY, maxY));
+            applyPosition(newX, newY);
+        };
+        const onPointerUp = () => {
+            dragOrigin.current = null;
+            window.removeEventListener("pointermove", onPointerMove);
+            window.removeEventListener("pointerup", onPointerUp);
+        };
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+    }, [applyPosition]);
+    // Reset position on open
+    useEffect(() => {
+        if (emotePickerOpen && panelRef.current) {
+            panelRef.current.style.left = "";
+            panelRef.current.style.top = "";
+            panelRef.current.style.bottom = "";
+            panelRef.current.style.right = "";
+            posRef.current = { x: 0, y: 0 };
+        }
+    }, [emotePickerOpen]);
+    // Filter emotes
+    const filteredEmotes = useMemo(() => {
+        let emotes = ALL_EMOTES;
+        if (activeCategory) {
+            emotes = emotes.filter((e) => e.category === activeCategory);
+        }
+        if (search.trim()) {
+            const query = search.toLowerCase();
+            emotes = emotes.filter((e) => e.name.toLowerCase().includes(query) ||
+                e.id.toLowerCase().includes(query));
+        }
+        return emotes;
+    }, [search, activeCategory]);
+    // Play emote
+    const playEmote = useCallback(async (emoteId) => {
+        setPlaying(emoteId);
+        try {
+            await client.playEmote(emoteId);
+        }
+        catch (err) {
+            console.error("Failed to play emote:", err);
+        }
+        finally {
+            setTimeout(() => setPlaying(null), 1000);
+        }
+    }, [setTimeout]);
+    // Stop emote
+    const stopEmote = useCallback(() => {
+        dispatchMiladyEvent(STOP_EMOTE_EVENT);
+        setPlaying(null);
+    }, []);
+    // Keyboard shortcuts
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Cmd+E toggle
+            if ((e.metaKey || e.ctrlKey) && e.key === "e") {
+                e.preventDefault();
+                if (emotePickerOpen) {
+                    closeEmotePicker();
+                }
+                else {
+                    openEmotePicker();
+                }
+            }
+            // Escape to close
+            if (e.key === "Escape" && emotePickerOpen) {
+                closeEmotePicker();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [emotePickerOpen, openEmotePicker, closeEmotePicker]);
+    // Desktop bridge listener
+    useEffect(() => {
+        const handleDesktopToggle = () => {
+            if (emotePickerOpen) {
+                closeEmotePicker();
+            }
+            else {
+                openEmotePicker();
+            }
+        };
+        document.addEventListener(EMOTE_PICKER_EVENT, handleDesktopToggle);
+        return () => document.removeEventListener(EMOTE_PICKER_EVENT, handleDesktopToggle);
+    }, [emotePickerOpen, openEmotePicker, closeEmotePicker]);
+    // Focus search input on open
+    useEffect(() => {
+        if (emotePickerOpen && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [emotePickerOpen]);
+    if (!emotePickerOpen)
+        return null;
+    return (_jsxs("div", { ref: panelRef, className: "fixed bottom-4 left-4 z-[9999] w-[320px] rounded-xl shadow-2xl", style: {
+            background: "rgba(18, 22, 32, 0.96)",
+            border: "1px solid rgba(240, 178, 50, 0.18)",
+            backdropFilter: "blur(24px)",
+            boxShadow: "0 8px 60px rgba(0,0,0,0.6), 0 0 40px rgba(240,178,50,0.06)",
+        }, children: [_jsxs("div", { className: "flex cursor-move items-center justify-between px-3 py-2", style: { borderBottom: "1px solid rgba(255,255,255,0.08)" }, onPointerDown: onPointerDown, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Menu, { className: "w-4 h-4", style: { color: "rgba(255,255,255,0.45)" } }), _jsx("span", { className: "text-sm font-semibold", style: { color: "rgba(240,238,250,0.92)" }, children: t("emotepicker.Emotes") })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: stopEmote, className: "rounded px-2 py-1 text-xs font-medium transition-colors", style: { background: "#ef4444", color: "#fff" }, children: t("game.stop") }), _jsx("span", { className: "text-xs", style: { color: "rgba(255,255,255,0.45)" }, children: "\u2318E" }), _jsx("button", { type: "button", onClick: closeEmotePicker, style: { color: "rgba(255,255,255,0.45)" }, onMouseEnter: (e) => {
+                                    e.currentTarget.style.color = "rgba(240,238,250,0.92)";
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.color = "rgba(255,255,255,0.45)";
+                                }, children: _jsx(X, { className: "w-4 h-4" }) })] })] }), _jsx("div", { className: "px-3 py-2", style: { borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: _jsx("input", { ref: inputRef, type: "text", value: search, onChange: (e) => setSearch(e.target.value), placeholder: t("emotepicker.SearchEmotes"), className: "w-full rounded px-2 py-1 text-sm focus:outline-none focus:ring-1", style: {
+                        background: "rgba(255,255,255,0.06)",
+                        color: "rgba(240,238,250,0.92)",
+                        border: "1px solid rgba(255,255,255,0.1)",
+                    } }) }), _jsxs("div", { className: "flex gap-1 overflow-x-auto px-3 py-2", style: { borderBottom: "1px solid rgba(255,255,255,0.08)" }, children: [_jsx("button", { type: "button", onClick: () => setActiveCategory(null), className: "shrink-0 rounded px-2 py-1 text-xs font-medium transition-colors", style: {
+                            background: activeCategory === null ? "#f0b232" : "rgba(255,255,255,0.06)",
+                            color: activeCategory === null ? "#000" : "rgba(255,255,255,0.6)",
+                        }, children: t("wallet.all") }), CATEGORIES.map((cat) => (_jsxs("button", { type: "button", onClick: () => setActiveCategory(cat), className: "shrink-0 rounded px-2 py-1 text-xs font-medium transition-colors", style: {
+                            background: activeCategory === cat ? "#f0b232" : "rgba(255,255,255,0.06)",
+                            color: activeCategory === cat ? "#000" : "rgba(255,255,255,0.6)",
+                        }, children: [_jsx("span", { className: "mr-1", children: CATEGORY_ICONS[cat] }), CATEGORY_LABELS[cat]] }, cat)))] }), _jsxs("div", { className: "max-h-[400px] overflow-y-auto p-3", children: [_jsx("div", { className: "grid grid-cols-5 gap-2", children: filteredEmotes.map((emote) => (_jsx("button", { type: "button", onClick: () => playEmote(emote.id), disabled: playing === emote.id, title: emote.name, className: "flex aspect-square items-center justify-center rounded text-2xl transition-colors", style: {
+                                background: playing === emote.id ? "#f0b232" : "rgba(255,255,255,0.06)",
+                            }, children: emote.icon }, emote.id))) }), filteredEmotes.length === 0 && (_jsx("div", { className: "py-8 text-center text-sm", style: { color: "rgba(255,255,255,0.3)" }, children: t("emotepicker.NoEmotesFound") }))] })] }));
+}

package/components/ErrorBoundary.d.ts

@@ -0,0 +1,22 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+interface Props {
+    children: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Catches React render errors and shows a recovery UI instead of a white screen.
+ * Wrap route content or the entire app shell with this boundary.
+ */
+export declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    handleReload: () => void;
+    handleDismiss: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/components/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC5C,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAIpD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS;IAI/C,YAAY,aAGV;IAEF,aAAa,aAEX;IAEF,MAAM;CAqCP"}

package/components/ErrorBoundary.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+/**
+ * Catches React render errors and shows a recovery UI instead of a white screen.
+ * Wrap route content or the entire app shell with this boundary.
+ */
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, info) {
+        console.error("[ErrorBoundary] Uncaught render error:", error, info);
+    }
+    handleReload = () => {
+        this.setState({ hasError: false, error: null });
+        window.location.reload();
+    };
+    handleDismiss = () => {
+        this.setState({ hasError: false, error: null });
+    };
+    render() {
+        if (this.state.hasError) {
+            return (_jsx("div", { className: "flex items-center justify-center h-full w-full min-h-[200px] bg-bg text-txt", children: _jsxs("div", { className: "text-center max-w-md p-8", children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Something went wrong" }), _jsx("p", { className: "text-sm text-muted mb-1", children: "An unexpected error occurred." }), this.state.error && (_jsx("p", { className: "text-xs text-muted font-mono bg-card rounded px-3 py-2 mb-4 break-all", children: this.state.error.message })), _jsxs("div", { className: "flex gap-3 justify-center", children: [_jsx("button", { type: "button", onClick: this.handleDismiss, className: "px-4 py-2 text-sm font-medium border border-border rounded-md hover:bg-card cursor-pointer", children: "Dismiss" }), _jsx("button", { type: "button", onClick: this.handleReload, className: "px-4 py-2 text-sm font-medium bg-accent text-accent-fg rounded-md hover:opacity-90 cursor-pointer", children: "Reload Page" })] })] }) }));
+        }
+        return this.props.children;
+    }
+}

package/components/FineTuningView.d.ts

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

package/components/FineTuningView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FineTuningView.d.ts","sourceRoot":"","sources":["../../src/components/FineTuningView.tsx"],"names":[],"mappings":"AAkFA,wBAAgB,cAAc,4CAq+B7B"}