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

package/components/shared/AppPageSidebar.d.ts

@@ -0,0 +1,12 @@
+import { type SidebarProps } from "@elizaos/ui";
+import * as React from "react";
+export interface AppPageSidebarProps extends Omit<SidebarProps, "defaultCollapsed" | "footer" | "width"> {
+    bottomAction?: React.ReactNode;
+    defaultCollapsed?: boolean;
+    defaultWidth?: number;
+    footer?: React.ReactNode;
+    width?: number;
+    widthStorageKey?: string;
+}
+export declare const AppPageSidebar: React.ForwardRefExoticComponent<AppPageSidebarProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=AppPageSidebar.d.ts.map

package/components/shared/AppPageSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppPageSidebar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/AppPageSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoF/B,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,YAAY,EAAE,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,yFA8KzB,CAAC"}

package/components/shared/AppPageSidebar.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar } from "@elizaos/ui";
+import { PanelLeftClose } from "lucide-react";
+import * as React from "react";
+import { useCallback, useMemo, useState } from "react";
+const DEFAULT_PAGE_SIDEBAR_WIDTH = 240;
+const DEFAULT_PAGE_SIDEBAR_MIN_WIDTH = 200;
+const DEFAULT_PAGE_SIDEBAR_MAX_WIDTH = 520;
+const SIDEBAR_SYNC_STORAGE_PREFIX = "elizaos:ui:sidebar:";
+const PAGE_SIDEBAR_WIDTH_STORAGE_PREFIX = "eliza:page-sidebar:";
+const PAGE_SIDEBAR_ROOT_CLASS = "!mt-0 !h-full !bg-none !bg-transparent !rounded-none !border-0 !border-r !border-r-border/30 !shadow-none !backdrop-blur-none !ring-0";
+const PAGE_SIDEBAR_FOOTER_CLASS = "!justify-stretch !px-2 !pt-1.5 !pb-2";
+const PAGE_SIDEBAR_COLLAPSE_BUTTON_CLASS = "!border-0 !bg-transparent !shadow-none hover:!bg-transparent hover:!text-txt";
+function joinClassNames(...values) {
+    const className = values.filter(Boolean).join(" ").trim();
+    return className.length > 0 ? className : undefined;
+}
+function clampSidebarWidth(value, minWidth, maxWidth) {
+    return Math.min(Math.max(value, minWidth), maxWidth);
+}
+function buildPageSidebarWidthStorageKey(identity) {
+    return `${PAGE_SIDEBAR_WIDTH_STORAGE_PREFIX}${identity}:width`;
+}
+function buildSidebarCollapsedStorageKey(syncId) {
+    return `${SIDEBAR_SYNC_STORAGE_PREFIX}${syncId}:collapsed`;
+}
+function readStoredSidebarWidth(storageKey, defaultWidth, minWidth, maxWidth) {
+    if (!storageKey || typeof window === "undefined") {
+        return clampSidebarWidth(defaultWidth, minWidth, maxWidth);
+    }
+    try {
+        const raw = window.localStorage.getItem(storageKey);
+        const parsed = raw ? Number.parseInt(raw, 10) : Number.NaN;
+        if (Number.isFinite(parsed)) {
+            return clampSidebarWidth(parsed, minWidth, maxWidth);
+        }
+    }
+    catch {
+        /* ignore sandboxed storage */
+    }
+    return clampSidebarWidth(defaultWidth, minWidth, maxWidth);
+}
+function persistSidebarWidth(storageKey, width) {
+    if (!storageKey || typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(storageKey, String(width));
+    }
+    catch {
+        /* ignore sandboxed storage */
+    }
+}
+function readStoredSidebarCollapsed(syncId, fallbackValue) {
+    if (!syncId || typeof window === "undefined")
+        return fallbackValue;
+    try {
+        const raw = window.localStorage.getItem(buildSidebarCollapsedStorageKey(syncId));
+        return raw == null ? fallbackValue : raw === "true";
+    }
+    catch {
+        return fallbackValue;
+    }
+}
+export const AppPageSidebar = React.forwardRef(function AppPageSidebar({ bottomAction, className, collapseButtonAriaLabel = "Collapse sidebar", collapseButtonClassName, collapsible = false, collapsed: collapsedProp, contentIdentity, defaultCollapsed = false, defaultWidth = DEFAULT_PAGE_SIDEBAR_WIDTH, expandButtonAriaLabel = "Expand sidebar", footer, footerClassName, header, headerClassName, maxWidth = DEFAULT_PAGE_SIDEBAR_MAX_WIDTH, minWidth = DEFAULT_PAGE_SIDEBAR_MIN_WIDTH, onCollapseRequest, onCollapsedChange, onWidthChange, resizable, showExpandedCollapseButton = false, syncId, testId, variant = "default", width: widthProp, widthStorageKey, ...props }, ref) {
+    const desktopDefaultVariant = variant === "default";
+    const effectiveResizable = resizable ?? desktopDefaultVariant;
+    const resolvedSyncId = syncId ??
+        (desktopDefaultVariant && collapsible
+            ? `eliza:page-sidebar:${contentIdentity ?? testId ?? "default"}`
+            : undefined);
+    const [internalCollapsed, setInternalCollapsed] = useState(() => readStoredSidebarCollapsed(resolvedSyncId, defaultCollapsed));
+    const controlledCollapsed = collapsedProp !== undefined;
+    const collapsed = controlledCollapsed ? collapsedProp : internalCollapsed;
+    const handleCollapsedChange = useCallback((next) => {
+        if (!controlledCollapsed) {
+            setInternalCollapsed(next);
+        }
+        onCollapsedChange?.(next);
+    }, [controlledCollapsed, onCollapsedChange]);
+    const resolvedWidthStorageKey = useMemo(() => {
+        if (widthStorageKey)
+            return widthStorageKey;
+        if (!desktopDefaultVariant || !effectiveResizable || !contentIdentity) {
+            return null;
+        }
+        return buildPageSidebarWidthStorageKey(contentIdentity);
+    }, [
+        contentIdentity,
+        desktopDefaultVariant,
+        effectiveResizable,
+        widthStorageKey,
+    ]);
+    const [internalWidth, setInternalWidth] = useState(() => readStoredSidebarWidth(resolvedWidthStorageKey, defaultWidth, minWidth, maxWidth));
+    const controlledWidth = widthProp !== undefined;
+    const width = controlledWidth ? widthProp : internalWidth;
+    const handleWidthChange = useCallback((next) => {
+        const clamped = clampSidebarWidth(next, minWidth, maxWidth);
+        if (!controlledWidth) {
+            setInternalWidth(clamped);
+            persistSidebarWidth(resolvedWidthStorageKey, clamped);
+        }
+        onWidthChange?.(clamped);
+    }, [
+        controlledWidth,
+        maxWidth,
+        minWidth,
+        onWidthChange,
+        resolvedWidthStorageKey,
+    ]);
+    const defaultFooter = footer ??
+        (desktopDefaultVariant && (collapsible || bottomAction) ? (_jsxs("div", { className: joinClassNames("flex w-full items-center gap-2", collapsible ? "justify-between" : "justify-end"), children: [collapsible ? (_jsx("button", { type: "button", onClick: () => handleCollapsedChange(true), "aria-label": collapseButtonAriaLabel, "data-testid": testId
+                        ? `${testId}-collapse-inline`
+                        : "page-sidebar-collapse-inline", className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] bg-transparent text-muted transition-colors hover:text-txt", children: _jsx(PanelLeftClose, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null, bottomAction] })) : undefined);
+    return (_jsx(Sidebar, { ...props, ref: ref, testId: testId, variant: variant, collapsible: collapsible, collapsed: collapsed, onCollapsedChange: handleCollapsedChange, contentIdentity: contentIdentity, syncId: resolvedSyncId, header: header, footer: defaultFooter, showExpandedCollapseButton: showExpandedCollapseButton, collapseButtonAriaLabel: collapseButtonAriaLabel, expandButtonAriaLabel: expandButtonAriaLabel, className: joinClassNames(desktopDefaultVariant ? PAGE_SIDEBAR_ROOT_CLASS : undefined, className), headerClassName: joinClassNames(desktopDefaultVariant && header == null
+            ? "!h-0 !min-h-0 !p-0 !m-0 !overflow-hidden"
+            : undefined, headerClassName), footerClassName: joinClassNames(defaultFooter && desktopDefaultVariant
+            ? PAGE_SIDEBAR_FOOTER_CLASS
+            : undefined, footerClassName), collapseButtonClassName: joinClassNames(desktopDefaultVariant ? PAGE_SIDEBAR_COLLAPSE_BUTTON_CLASS : undefined, collapseButtonClassName), resizable: effectiveResizable, width: effectiveResizable ? width : widthProp, onWidthChange: effectiveResizable ? handleWidthChange : onWidthChange, minWidth: minWidth, maxWidth: maxWidth, onCollapseRequest: onCollapseRequest ?? (() => handleCollapsedChange(true)) }));
+});

package/components/shared/CollapsibleSidebarSection.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface CollapsibleSidebarSectionProps {
+    addLabel?: string;
+    bodyClassName?: string;
+    children?: React.ReactNode;
+    collapsed: boolean;
+    emptyClassName?: string;
+    emptyLabel?: string;
+    hoverActionsOnDesktop?: boolean;
+    icon?: React.ReactNode;
+    indicator?: React.ReactNode;
+    label: React.ReactNode;
+    onAdd?: () => void;
+    onToggleCollapsed: (key: string) => void;
+    sectionKey: string;
+    testIdPrefix?: string;
+}
+export declare function CollapsibleSidebarSection({ addLabel, bodyClassName, children, collapsed, emptyClassName, emptyLabel, hoverActionsOnDesktop, icon, indicator, label, onAdd, onToggleCollapsed, sectionKey, testIdPrefix, }: CollapsibleSidebarSectionProps): React.JSX.Element;
+//# sourceMappingURL=CollapsibleSidebarSection.d.ts.map

package/components/shared/CollapsibleSidebarSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleSidebarSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/CollapsibleSidebarSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,EACV,qBAA4B,EAC5B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,UAAU,EACV,YAAgC,GACjC,EAAE,8BAA8B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8DpD"}

package/components/shared/CollapsibleSidebarSection.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, Plus } from "lucide-react";
+import * as React from "react";
+export function CollapsibleSidebarSection({ addLabel, bodyClassName, children, collapsed, emptyClassName, emptyLabel, hoverActionsOnDesktop = true, icon, indicator, label, onAdd, onToggleCollapsed, sectionKey, testIdPrefix = "sidebar-section", }) {
+    const Chevron = collapsed ? ChevronRight : ChevronDown;
+    const hoverHideClass = hoverActionsOnDesktop
+        ? " opacity-0 transition-opacity group-hover/section:opacity-100 focus-visible:opacity-100"
+        : "";
+    const bodyId = `${testIdPrefix}-body-${sectionKey}`;
+    const hasChildren = React.Children.count(children) > 0;
+    return (_jsxs("section", { "data-testid": `${testIdPrefix}-${sectionKey}`, className: "group/section space-y-0", children: [_jsxs("div", { className: "flex items-center gap-1 pr-1", children: [_jsxs("button", { type: "button", onClick: () => onToggleCollapsed(sectionKey), "aria-expanded": !collapsed, "aria-controls": bodyId, "data-testid": `${testIdPrefix}-toggle-${sectionKey}`, className: "inline-flex min-w-0 flex-1 items-center gap-1.5 rounded-[var(--radius-sm)] bg-transparent px-1.5 py-1 text-left text-[11px] leading-none font-semibold uppercase tracking-[0.16em] text-muted transition-colors hover:text-txt", children: [icon ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center text-muted", children: icon })) : null, _jsx("span", { className: "truncate", children: label }), indicator ? (_jsx("span", { className: "ml-0.5 inline-flex shrink-0 items-center", children: indicator })) : null, _jsx(Chevron, { "aria-hidden": true, className: `ml-0.5 h-3 w-3 shrink-0 text-muted${hoverHideClass}` })] }), onAdd ? (_jsx("button", { type: "button", onClick: onAdd, "aria-label": addLabel ?? "Add", title: addLabel, "data-testid": `${testIdPrefix}-add-${sectionKey}`, className: `inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] bg-transparent text-muted transition-colors hover:text-txt${hoverHideClass}`, children: _jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : null] }), collapsed ? null : hasChildren ? (_jsx("div", { id: bodyId, className: bodyClassName, children: children })) : emptyLabel ? (_jsx("div", { id: bodyId, className: emptyClassName, children: emptyLabel })) : null] }));
+}

package/components/shared/LanguageDropdown.d.ts

@@ -0,0 +1,24 @@
+import type { UiLanguage } from "../../i18n/messages";
+/** Minimal translator function type. Receive key, return string. */
+export type TranslatorFn = (key: string) => string;
+/** Language metadata with flag emoji and native label. */
+export declare const LANGUAGES: {
+    id: UiLanguage;
+    flag: string;
+    label: string;
+}[];
+export declare const LANGUAGE_DROPDOWN_TRIGGER_CLASSNAME = "!h-11 !min-h-11 !rounded-xl !px-3.5";
+export interface LanguageDropdownProps {
+    uiLanguage: UiLanguage;
+    setUiLanguage: (language: UiLanguage) => void;
+    /** Optional translator for ARIA labels */
+    t?: TranslatorFn;
+    /** Optional extra className on the root */
+    className?: string;
+    /** Optional extra className on the trigger button */
+    triggerClassName?: string;
+    variant?: "native" | "companion" | "titlebar";
+    menuPlacement?: "bottom-end" | "top-end";
+}
+export declare function LanguageDropdown({ uiLanguage, setUiLanguage, t, className, triggerClassName, variant, menuPlacement, }: LanguageDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LanguageDropdown.d.ts.map

package/components/shared/LanguageDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageDropdown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/LanguageDropdown.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,oEAAoE;AACpE,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAEnD,0DAA0D;AAC1D,eAAO,MAAM,SAAS,EAAE;IAAE,EAAE,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAQtE,CAAC;AAEF,eAAO,MAAM,mCAAmC,wCACT,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0CAA0C;IAC1C,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;IAC9C,aAAa,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,CAAC,EACD,SAAS,EACT,gBAAgB,EAChB,OAAkB,EAClB,aAA4B,GAC7B,EAAE,qBAAqB,2CAmFvB"}

package/components/shared/LanguageDropdown.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@elizaos/ui";
+import { Check, ChevronDown } from "lucide-react";
+import { useState } from "react";
+/** Language metadata with flag emoji and native label. */
+export const LANGUAGES = [
+    { id: "en", flag: "\u{1F1FA}\u{1F1F8}", label: "English" },
+    { id: "zh-CN", flag: "\u{1F1E8}\u{1F1F3}", label: "\u4E2D\u6587" },
+    { id: "ko", flag: "\u{1F1F0}\u{1F1F7}", label: "\uD55C\uAD6D\uC5B4" },
+    { id: "es", flag: "\u{1F1EA}\u{1F1F8}", label: "Espa\u00F1ol" },
+    { id: "pt", flag: "\u{1F1E7}\u{1F1F7}", label: "Portugu\u00EAs" },
+    { id: "vi", flag: "\u{1F1FB}\u{1F1F3}", label: "Ti\u1EBFng Vi\u1EC7t" },
+    { id: "tl", flag: "\u{1F1F5}\u{1F1ED}", label: "Tagalog" },
+];
+export const LANGUAGE_DROPDOWN_TRIGGER_CLASSNAME = "!h-11 !min-h-11 !rounded-xl !px-3.5";
+export function LanguageDropdown({ uiLanguage, setUiLanguage, t, className, triggerClassName, variant = "native", menuPlacement = "bottom-end", }) {
+    const [open, setOpen] = useState(false);
+    const current = LANGUAGES.find((l) => l.id === uiLanguage) ?? LANGUAGES[0];
+    const triggerClassNameResolved = variant === "titlebar"
+        ? `inline-flex h-[2.375rem] min-h-[2.375rem] min-w-0 items-center justify-center rounded-md border border-transparent !bg-transparent px-2.5 py-0 text-[11px] font-medium text-muted shadow-none ring-0 transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent data-[state=open]:!bg-transparent ${open ? "text-accent" : ""} ${triggerClassName ?? ""}`
+        : `inline-flex h-11 min-h-touch min-w-touch items-center justify-center rounded-xl px-3.5 py-0 border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_14px_32px_rgba(3,5,10,0.14)] ring-1 ring-inset ring-white/6 backdrop-blur-xl supports-[backdrop-filter]:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_62%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.22),0_18px_36px_rgba(3,5,10,0.18)] active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt gap-1.5 text-xs font-medium ${open ? "border-accent/80 bg-accent/12 text-txt shadow-md" : ""} ${triggerClassName ?? ""}`;
+    const contentClassName = variant === "titlebar"
+        ? "w-40 overflow-hidden rounded-xl border border-border/70 bg-card/96 py-1 shadow-[0_18px_36px_rgba(2,8,23,0.24)] backdrop-blur-xl"
+        : "w-40 overflow-hidden rounded-xl border border-border/60 bg-card/95 py-1 shadow-xl backdrop-blur-xl";
+    return (_jsx("div", { className: `relative inline-flex shrink-0 ${className ?? ""}`, "data-testid": "language-dropdown", "data-no-camera-drag": "true", children: _jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: triggerClassNameResolved, onPointerDown: (event) => event.stopPropagation(), "aria-label": t?.("settings.language") ?? "Language", "data-testid": "language-dropdown-trigger", children: [_jsx("span", { className: "text-sm leading-none", children: current.flag }), _jsx("span", { className: variant === "titlebar"
+                                    ? "uppercase tracking-[0.14em] opacity-80"
+                                    : "hidden sm:inline uppercase tracking-widest opacity-80", children: current.id }), _jsx(ChevronDown, { className: `w-3.5 h-3.5 opacity-60 transition-transform ${open ? "rotate-180" : ""}` })] }) }), _jsx(DropdownMenuContent, { align: "end", side: menuPlacement === "top-end" ? "top" : "bottom", sideOffset: 4, className: contentClassName, style: variant === "companion"
+                        ? {
+                            zIndex: 10001,
+                            backdropFilter: "blur(24px)",
+                            WebkitBackdropFilter: "blur(24px)",
+                            boxShadow: "var(--shadow-lg)",
+                        }
+                        : undefined, "data-no-camera-drag": "true", children: LANGUAGES.map((lang) => (_jsxs(DropdownMenuItem, { className: `flex min-h-[40px] items-center justify-between px-3 py-2 text-sm transition-colors cursor-pointer ${lang.id === uiLanguage ? "bg-accent/10 text-txt font-medium" : "text-txt"}`, onPointerDown: (event) => event.stopPropagation(), onSelect: () => {
+                            setUiLanguage(lang.id);
+                        }, "data-testid": `language-option-${lang.id}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: lang.flag }), _jsx("span", { children: lang.label })] }), lang.id === uiLanguage && _jsx(Check, { className: "w-4 h-4" })] }, lang.id))) })] }) }));
+}

package/components/shared/ThemeToggle.d.ts

@@ -0,0 +1,14 @@
+import type { UiTheme } from "../../state/persistence";
+/** Minimal translator function type. */
+export type ThemeTranslatorFn = (key: string) => string;
+export interface ThemeToggleProps {
+    uiTheme: UiTheme;
+    setUiTheme: (theme: UiTheme) => void;
+    /** Optional translator for ARIA labels */
+    t?: ThemeTranslatorFn;
+    /** Optional extra className on the root */
+    className?: string;
+    variant?: "native" | "companion" | "titlebar";
+}
+export declare function ThemeToggle({ uiTheme, setUiTheme, t: _t, className, variant: _variant, }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

package/components/shared/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/ThemeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvD,wCAAwC;AACxC,MAAM,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0CAA0C;IAC1C,CAAC,CAAC,EAAE,iBAAiB,CAAC;IACtB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;CAC/C;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,UAAU,EACV,CAAC,EAAE,EAAE,EACL,SAAS,EACT,OAAO,EAAE,QAAmB,GAC7B,EAAE,gBAAgB,2CA6BlB"}

package/components/shared/ThemeToggle.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Moon, Sun } from "lucide-react";
+import { useCallback } from "react";
+import { Button } from "../ui/button.js";
+export function ThemeToggle({ uiTheme, setUiTheme, t: _t, className, variant: _variant = "native", }) {
+    const isDark = uiTheme === "dark";
+    const handleToggle = useCallback(() => {
+        setUiTheme(isDark ? "light" : "dark");
+    }, [isDark, setUiTheme]);
+    const resolvedClassName = _variant === "titlebar"
+        ? `inline-flex h-[2.375rem] w-[2.375rem] min-h-[2.375rem] min-w-[2.375rem] items-center justify-center rounded-md border border-transparent !bg-transparent text-muted shadow-none ring-0 transition-colors duration-150 hover:!bg-transparent hover:text-txt active:!bg-transparent ${className ?? ""}`
+        : `inline-flex h-11 w-11 min-h-touch min-w-touch items-center justify-center rounded-xl border border-border/42 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] text-txt shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_14px_32px_rgba(3,5,10,0.14)] ring-1 ring-inset ring-white/6 backdrop-blur-xl supports-[backdrop-filter]:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_62%,transparent),color-mix(in_srgb,var(--bg)_34%,transparent))] transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-accent/55 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_78%,transparent),color-mix(in_srgb,var(--bg-hover)_52%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.22),0_18px_36px_rgba(3,5,10,0.18)] active:scale-[0.98] disabled:active:scale-100 disabled:hover:border-border/42 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_72%,transparent),color-mix(in_srgb,var(--bg)_44%,transparent))] disabled:hover:text-txt text-sm leading-none ${className ?? ""}`;
+    return (_jsx(Button, { size: "icon", variant: "outline", "aria-label": _t ? _t("aria.toggleTheme") : "Toggle theme", onClick: handleToggle, onPointerDown: (event) => event.stopPropagation(), className: resolvedClassName, "data-testid": "theme-toggle", "data-no-camera-drag": "true", children: isDark ? (_jsx(Moon, { className: "w-5 h-5", "aria-hidden": true })) : (_jsx(Sun, { className: "w-5 h-5", "aria-hidden": true })) }));
+}

package/components/shared/confirm-delete-control.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+type ConfirmDeleteControlProps = {
+    onConfirm: () => void;
+    disabled?: boolean;
+    triggerLabel?: string | ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    busyLabel?: string;
+    promptText?: string;
+    triggerClassName: string;
+    confirmClassName: string;
+    cancelClassName: string;
+    promptClassName?: string;
+    triggerTitle?: string;
+    triggerVariant?: "destructive" | "outline" | "ghost";
+};
+export declare function ConfirmDeleteControl({ onConfirm, disabled, triggerLabel, confirmLabel, cancelLabel, busyLabel, promptText, triggerClassName, confirmClassName, cancelClassName, promptClassName, triggerTitle, triggerVariant, }: ConfirmDeleteControlProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=confirm-delete-control.d.ts.map

package/components/shared/confirm-delete-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-delete-control.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/confirm-delete-control.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,KAAK,yBAAyB,GAAG;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;CACtD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,eAAqD,EACrD,YAAY,EACZ,cAA8B,GAC/B,EAAE,yBAAyB,2CAyD3B"}

package/components/shared/confirm-delete-control.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@elizaos/ui";
+import { useState } from "react";
+import { useApp } from "../../state/index.js";
+export function ConfirmDeleteControl({ onConfirm, disabled = false, triggerLabel, confirmLabel, cancelLabel, busyLabel, promptText, triggerClassName, confirmClassName, cancelClassName, promptClassName = "text-xs-tight text-[#e74c3c] ml-1", triggerTitle, triggerVariant = "destructive", }) {
+    const { t } = useApp();
+    const [confirming, setConfirming] = useState(false);
+    const resolvedTriggerLabel = triggerLabel ?? t("common.delete", { defaultValue: "Delete" });
+    const resolvedConfirmLabel = confirmLabel ?? t("common.confirm", { defaultValue: "Confirm" });
+    const resolvedCancelLabel = cancelLabel ?? t("common.cancel", { defaultValue: "Cancel" });
+    const resolvedPromptText = promptText ?? t("conversations.deleteConfirm", { defaultValue: "Delete?" });
+    if (!confirming) {
+        return (_jsx(Button, { variant: triggerVariant, size: "sm", type: "button", className: triggerClassName, onClick: () => setConfirming(true), disabled: disabled, title: triggerTitle, "aria-label": triggerTitle, children: resolvedTriggerLabel }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: promptClassName, children: resolvedPromptText }), _jsx(Button, { variant: "destructive", size: "sm", type: "button", className: confirmClassName, onClick: () => {
+                    onConfirm();
+                    setConfirming(false);
+                }, disabled: disabled, children: disabled && busyLabel ? busyLabel : resolvedConfirmLabel }), _jsx(Button, { variant: "outline", size: "sm", type: "button", className: cancelClassName, onClick: () => setConfirming(false), disabled: disabled, children: resolvedCancelLabel })] }));
+}

package/components/shell/BugReportModal.d.ts

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

package/components/shell/BugReportModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BugReportModal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shell/BugReportModal.tsx"],"names":[],"mappings":"AA4FA,wBAAgB,cAAc,mDAsqB7B"}