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

package/cloud/shell/StewardProviderRuntime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StewardProviderRuntime.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/shell/StewardProviderRuntime.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,OAAO,EAAE,KAAK,SAAS,EAA8B,MAAM,OAAO,CAAC;AAsNnE,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EACjD,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,2CA8BA"}
+{"version":3,"file":"StewardProviderRuntime.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/shell/StewardProviderRuntime.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAkOf,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EACjD,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,2CA2BA"}

package/cloud/shell/StewardProviderRuntime.js

@@ -14,8 +14,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { writeStoredStewardToken } from "@elizaos/shared/steward-session-client";
 import { StewardProvider, useAuth as useStewardAuth } from "@stwd/react";
 import { StewardClient } from "@stwd/sdk";
-import { useEffect, useMemo, useRef } from "react";
-import { clearServerStewardSessionCookies, clearStaleStewardSession, configuredRefreshEndpoint, configuredSessionEndpoint, isPlaceholderValue, LocalStewardAuthContext, readStoredToken, tokenIsExpired, tokenSecsRemaining, } from "./StewardProvider.js";
+import { useEffect, useMemo, useRef, } from "react";
+import { scrubPersistedAgentProfileTokens } from "../../state/agent-profiles.js";
+import { scrubPersistedActiveServerToken } from "../../state/persistence.js";
+import { clearServerStewardSessionCookies, clearStaleStewardSession, configuredRefreshEndpoint, configuredSessionEndpoint, isPlaceholderValue, LocalStewardAuthContext, readStoredToken, tokenIsExpired, tokenSecsRemaining, } from "./StewardProviderShared.js";
 const REFRESH_CHECK_INTERVAL_MS = 60_000;
 const REFRESH_AHEAD_SECS = 120;
 function AuthTokenSync({ children }) {
@@ -172,7 +174,16 @@ function AuthTokenSync({ children }) {
             }
             : null,
         session: auth.session,
-        signOut: () => auth.signOut(),
+        signOut: () => {
+            // Drop the at-rest JWT from the persisted active server before the SDK
+            // sign-out — leaving it in localStorage is an at-rest token leak. Keeps
+            // the backend selection (kind/apiBase) so re-auth lands on the same one.
+            // The same JWT is also copied into the per-agent profile records, so
+            // scrub those too — otherwise the token survives at rest there.
+            scrubPersistedActiveServerToken();
+            scrubPersistedAgentProfileTokens();
+            auth.signOut();
+        },
         getToken: () => auth.getToken(),
         verifyEmailCallback: async (token, email) => {
             const result = await auth.verifyEmailCallback(token, email);
@@ -185,15 +196,14 @@ function AuthTokenSync({ children }) {
     return (_jsx(LocalStewardAuthContext.Provider, { value: localAuth, children: children }));
 }
 export default function StewardAuthRuntimeProvider({ apiUrl, children, tenantId, }) {
-    // @stwd/react bundles an older @stwd/sdk than the one pinned here. The
-    // StewardClient classes are public-API-identical and differ only by added
-    // private fields, so the cast bridges the nominal mismatch; StewardProvider
-    // only calls the public `client.getBaseUrl()` at runtime.
     const client = useMemo(() => new StewardClient({
         baseUrl: apiUrl,
         ...(tenantId && !isPlaceholderValue(tenantId) ? { tenantId } : {}),
     }), [apiUrl, tenantId]);
     const authConfig = useMemo(() => ({ baseUrl: apiUrl }), [apiUrl]);
+    // @stwd/react bundles an older @stwd/sdk than the one pinned here. The
+    // client classes are runtime-compatible, but TypeScript treats them as
+    // nominally different because both versions declare private fields.
     const providerClient = client;
     return (_jsx(StewardProvider, { client: providerClient, agentId: "eliza-cloud", auth: authConfig, tenantId: tenantId && !isPlaceholderValue(tenantId) ? tenantId : undefined, children: _jsx(AuthTokenSync, { children: children }) }));
 }

package/cloud/shell/StewardProviderShared.d.ts

@@ -0,0 +1,27 @@
+export declare function isPlaceholderValue(value: string | undefined): boolean;
+export type LocalStewardAuthValue = {
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    user: {
+        id: string;
+        email?: string | null;
+        walletAddress?: string;
+        wallet_address?: string;
+    } | null;
+    session: unknown;
+    signOut: () => unknown;
+    getToken: () => unknown;
+    verifyEmailCallback: (token: string, email: string) => Promise<{
+        token: string;
+        refreshToken?: string;
+    }>;
+};
+export declare const LocalStewardAuthContext: import("react").Context<LocalStewardAuthValue | null>;
+export declare function configuredSessionEndpoint(): string;
+export declare function configuredRefreshEndpoint(): string;
+export declare function clearServerStewardSessionCookies(): void;
+export declare function readStoredToken(): string | null;
+export declare function tokenIsExpired(token: string): boolean;
+export declare function tokenSecsRemaining(token: string): number | null;
+export declare function clearStaleStewardSession(): void;
+//# sourceMappingURL=StewardProviderShared.d.ts.map

package/cloud/shell/StewardProviderShared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StewardProviderShared.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/shell/StewardProviderShared.ts"],"names":[],"mappings":"AASA,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAUrE;AAgBD,MAAM,MAAM,qBAAqB,GAAG;IAClC,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,GAAG,IAAI,CAAC;IACT,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,mBAAmB,EAAE,CACnB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,KACV,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,uDACe,CAAC;AAyBpD,wBAAgB,yBAAyB,IAAI,MAAM,CAWlD;AAED,wBAAgB,yBAAyB,IAAI,MAAM,CAWlD;AAWD,wBAAgB,gCAAgC,IAAI,IAAI,CAIvD;AAED,wBAAgB,eAAe,IAAI,MAAM,GAAG,IAAI,CAO/C;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAKrD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAI/D;AAED,wBAAgB,wBAAwB,IAAI,IAAI,CAS/C"}

package/cloud/shell/StewardProviderShared.js

@@ -0,0 +1,112 @@
+import { clearStoredStewardToken, STEWARD_REFRESH_ENDPOINT, STEWARD_SESSION_ENDPOINT, STEWARD_TOKEN_KEY, } from "@elizaos/shared/steward-session-client";
+import { createContext } from "react";
+import { decodeJwtPayload } from "../lib/jwt.js";
+export function isPlaceholderValue(value) {
+    if (!value)
+        return true;
+    const normalized = value.trim().toLowerCase();
+    return (normalized.length === 0 ||
+        normalized.includes("your_steward_") ||
+        normalized.includes("your-steward-") ||
+        normalized.includes("replace_with") ||
+        normalized.includes("placeholder"));
+}
+function trimTrailingSlash(value) {
+    return value.replace(/\/+$/, "");
+}
+const ELIZA_CLOUD_COOKIE_HOSTS = new Set([
+    "elizacloud.ai",
+    "www.elizacloud.ai",
+    "dev.elizacloud.ai",
+]);
+const ELIZA_CLOUD_DIRECT_SESSION_ENDPOINT = "https://api.elizacloud.ai/api/auth/steward-session";
+const ELIZA_CLOUD_DIRECT_REFRESH_ENDPOINT = "https://api.elizacloud.ai/api/auth/steward-refresh";
+export const LocalStewardAuthContext = createContext(null);
+function isLocalhostApiBase(value) {
+    return /^https?:\/\/(localhost|127\.0\.0\.1|0\.0\.0\.0)(?::\d+)?(?:\/|$)/i.test(value.trim());
+}
+function isBrowserOnElizaHost() {
+    return (typeof window !== "undefined" &&
+        ELIZA_CLOUD_COOKIE_HOSTS.has(window.location.hostname.toLowerCase()));
+}
+function configuredApiBase() {
+    return (import.meta.env?.VITE_API_URL ||
+        import.meta.env?.NEXT_PUBLIC_API_URL ||
+        (typeof process !== "undefined"
+            ? process.env.NEXT_PUBLIC_API_URL
+            : undefined));
+}
+export function configuredSessionEndpoint() {
+    const apiBase = configuredApiBase();
+    if (apiBase && !isPlaceholderValue(apiBase)) {
+        if (!(isBrowserOnElizaHost() && isLocalhostApiBase(apiBase))) {
+            return `${trimTrailingSlash(apiBase)}${STEWARD_SESSION_ENDPOINT}`;
+        }
+    }
+    if (isBrowserOnElizaHost()) {
+        return ELIZA_CLOUD_DIRECT_SESSION_ENDPOINT;
+    }
+    return STEWARD_SESSION_ENDPOINT;
+}
+export function configuredRefreshEndpoint() {
+    const apiBase = configuredApiBase();
+    if (apiBase && !isPlaceholderValue(apiBase)) {
+        if (!(isBrowserOnElizaHost() && isLocalhostApiBase(apiBase))) {
+            return `${trimTrailingSlash(apiBase)}${STEWARD_REFRESH_ENDPOINT}`;
+        }
+    }
+    if (isBrowserOnElizaHost()) {
+        return ELIZA_CLOUD_DIRECT_REFRESH_ENDPOINT;
+    }
+    return STEWARD_REFRESH_ENDPOINT;
+}
+function stewardSessionClearUrls() {
+    if (typeof window === "undefined")
+        return [configuredSessionEndpoint()];
+    const urls = new Set([STEWARD_SESSION_ENDPOINT, configuredSessionEndpoint()]);
+    if (isBrowserOnElizaHost()) {
+        urls.add(ELIZA_CLOUD_DIRECT_SESSION_ENDPOINT);
+    }
+    return [...urls];
+}
+export function clearServerStewardSessionCookies() {
+    for (const url of stewardSessionClearUrls()) {
+        fetch(url, { method: "DELETE", credentials: "include" }).catch(() => { });
+    }
+}
+export function readStoredToken() {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        return localStorage.getItem(STEWARD_TOKEN_KEY);
+    }
+    catch {
+        return null;
+    }
+}
+export function tokenIsExpired(token) {
+    const payload = decodeJwtPayload(token);
+    if (!payload)
+        return true;
+    if (!payload.exp)
+        return false;
+    return payload.exp * 1000 < Date.now();
+}
+export function tokenSecsRemaining(token) {
+    const payload = decodeJwtPayload(token);
+    if (!payload?.exp)
+        return null;
+    return payload.exp - Date.now() / 1000;
+}
+export function clearStaleStewardSession() {
+    if (typeof window === "undefined")
+        return;
+    clearStoredStewardToken();
+    clearServerStewardSessionCookies();
+    try {
+        window.dispatchEvent(new CustomEvent("steward-token-sync"));
+    }
+    catch {
+        // ignore
+    }
+}

package/cloud-ui/components/ai-elements/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./eliza-avatar";
-export * from "./hooks/use-typewriter-text";
-export * from "./memoized-chat-message";
+export * from "./eliza-avatar.js";
+export * from "./hooks/use-typewriter-text.js";
+export * from "./memoized-chat-message.js";
 //# sourceMappingURL=index.d.ts.map

package/cloud-ui/components/ai-elements/memoized-chat-message.d.ts

@@ -2,7 +2,7 @@
  * Memoized chat message component for performance optimization.
  * Prevents re-renders of messages that haven't changed.
  */
-import { type ChatMediaAttachment } from "../../types/chat-media";
+import { type ChatMediaAttachment } from "../../types/chat-media.js";
 export interface MemoizedChatMessageMessage {
     id: string;
     content: {

package/cloud-ui/components/ai-elements/memoized-chat-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"memoized-chat-message.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/ai-elements/memoized-chat-message.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,EAAE,KAAK,mBAAmB,EAAe,MAAM,wBAAwB,CAAC;AA6B/E,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;KACrC,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,0BAA0B,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,MAAM,EAAE,CACN,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,KAC/D,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iEAAiE;IACjE,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI,CAAC;IAC5D,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAsBD,iBAAS,oBAAoB,CAAC,KAAK,EAAE,wBAAwB,2CAkZ5D;AAGD,eAAO,MAAM,mBAAmB,kEAoB/B,CAAC"}
+{"version":3,"file":"memoized-chat-message.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/ai-elements/memoized-chat-message.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,EAAE,KAAK,mBAAmB,EAAe,MAAM,wBAAwB,CAAC;AAiM/E,MAAM,WAAW,0BAA0B;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,mBAAmB,EAAE,CAAC;KACrC,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,0BAA0B,CAAC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,MAAM,EAAE,CACN,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,KAC/D,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iEAAiE;IACjE,cAAc,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,IAAI,CAAC;IAC5D,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAsBD,iBAAS,oBAAoB,CAAC,KAAK,EAAE,wBAAwB,2CA2Q5D;AAGD,eAAO,MAAM,mBAAmB,kEAoB/B,CAAC"}

package/cloud-ui/components/ai-elements/memoized-chat-message.js

@@ -5,7 +5,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Check, Copy, Loader2, Square, Volume2 } from "lucide-react";
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { Streamdown } from "streamdown";
 import { Button } from "../../../components/ui/button.js";
 import Image from "../../runtime/image.js";
@@ -30,6 +30,162 @@ function normalizeMarkdownLists(text) {
     result = result.replace(/^\*\*(\d+)\.\*\*\s*[\r\n]+\s*/gm, "$1. ");
     return result;
 }
+// Static keyframe/class definitions shared by every chat message. These were
+// previously rendered as an inline <style> inside each message, duplicating the
+// same CSS once per message in a conversation. They are fully static, so we
+// inject each stylesheet into the document head exactly once.
+const REASONING_ANIMATION_CSS = `
+  @keyframes reasoningFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes reasoningTextAppear {
+    from {
+      opacity: 0.3;
+    }
+    to {
+      opacity: 0.65;
+    }
+  }
+
+  @keyframes pulseGlow {
+    0%,
+    100% {
+      box-shadow: 0 0 0 0 rgba(255, 88, 0, 0);
+      border-color: rgba(255, 88, 0, 0.15);
+    }
+    50% {
+      box-shadow: 0 0 8px 2px rgba(255, 88, 0, 0.1);
+      border-color: rgba(255, 88, 0, 0.25);
+    }
+  }
+
+  @keyframes dotPulse {
+    0%,
+    80%,
+    100% {
+      transform: scale(0.8);
+      opacity: 0.4;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .reasoning-container {
+    animation: reasoningFadeIn 300ms ease-out forwards;
+  }
+
+  .reasoning-border {
+    animation: pulseGlow 2s ease-in-out infinite;
+  }
+
+  .reasoning-text {
+    animation: reasoningTextAppear 200ms ease-out forwards;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .thinking-dots span {
+    display: inline-block;
+    animation: dotPulse 1.4s ease-in-out infinite;
+  }
+  .thinking-dots span:nth-child(1) {
+    animation-delay: 0ms;
+  }
+  .thinking-dots span:nth-child(2) {
+    animation-delay: 200ms;
+  }
+  .thinking-dots span:nth-child(3) {
+    animation-delay: 400ms;
+  }
+`;
+const STREAMING_ANIMATION_CSS = `
+  @keyframes streamTextFadeIn {
+    0% {
+      opacity: 0.4;
+      filter: blur(1px);
+    }
+    100% {
+      opacity: 1;
+      filter: blur(0);
+    }
+  }
+
+  @keyframes cursorBlink {
+    0%,
+    50% {
+      opacity: 1;
+    }
+    51%,
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes cursorPulse {
+    0%,
+    100% {
+      opacity: 0.9;
+      transform: scaleY(1);
+    }
+    50% {
+      opacity: 0.5;
+      transform: scaleY(0.85);
+    }
+  }
+
+  .streaming-text-wrapper {
+    /* Smooth text rendering for animation */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  .streaming-text-content {
+    animation: streamTextFadeIn 200ms ease-out forwards;
+  }
+
+  /* Smooth transitions for text changes */
+  .streaming-text-content p,
+  .streaming-text-content span,
+  .streaming-text-content div {
+    transition: opacity 150ms ease-out;
+  }
+
+  .streaming-cursor {
+    animation: cursorPulse 800ms ease-in-out infinite;
+    will-change: opacity, transform;
+  }
+
+  /* Non-streaming messages - subtle entrance */
+  .message-text-complete {
+    animation: streamTextFadeIn 300ms ease-out forwards;
+  }
+`;
+function ensureStyleInjected(id, css) {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+}
+function useChatMessageAnimationStyles() {
+    useEffect(() => {
+        ensureStyleInjected("eliza-chat-reasoning-animations", REASONING_ANIMATION_CSS);
+        ensureStyleInjected("eliza-chat-streaming-animations", STREAMING_ANIMATION_CSS);
+    }, []);
+}
 function getAttachmentSignature(attachments) {
     return (attachments
         ?.map((attachment) => [
@@ -46,6 +202,7 @@ function getAttachmentSignature(attachments) {
 function ChatMessageComponent(props) {
     const { message, characterName, characterAvatarUrl, copiedMessageId, currentPlayingId, isPlaying, hasAudioUrl, isStreaming = false, formatTimestamp, onCopy, onPlayAudio, onImageLoad, reasoningText, reasoningPhase, onTextReveal, } = props;
     const isThinking = message.id.startsWith("thinking-");
+    useChatMessageAnimationStyles();
     // Detect streaming from message id if not explicitly passed
     const isStreamingMessage = isStreaming || message.id.startsWith("streaming-");
     // Show reasoning for thinking messages OR streaming messages with "response" phase reasoning
@@ -63,144 +220,10 @@ function ChatMessageComponent(props) {
     });
     // Typewriter effect for reasoning/CoT text - active for thinking OR streaming with response phase
     const displayReasoningText = useReasoningTypewriter(reasoningText || "", hasReasoning, onTextReveal);
-    return (_jsx("div", { className: `flex ${message.isAgent ? "justify-start" : "justify-end"}`, children: message.isAgent ? (_jsxs("div", { className: "flex flex-col gap-0.5 max-w-[85%] sm:max-w-[75%] group/message", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ElizaAvatar, { avatarUrl: characterAvatarUrl, name: characterName, className: "flex-shrink-0 w-5 h-5", iconClassName: "h-3 w-3", animate: isThinking }), _jsx("span", { className: "text-sm font-medium text-white/50", children: characterName })] }), _jsx("div", { className: "flex flex-col gap-0.5", children: isThinking ? (_jsxs("div", { className: "py-2.5 px-3.5 bg-white/[0.02] border border-white/[0.05] rounded-sm", children: [_jsx("style", { children: `
-                  @keyframes reasoningFadeIn {
-                    from {
-                      opacity: 0;
-                      transform: translateY(2px);
-                    }
-                    to {
-                      opacity: 1;
-                      transform: translateY(0);
-                    }
-                  }
-
-                  @keyframes reasoningTextAppear {
-                    from {
-                      opacity: 0.3;
-                    }
-                    to {
-                      opacity: 0.65;
-                    }
-                  }
-
-                  @keyframes pulseGlow {
-                    0%,
-                    100% {
-                      box-shadow: 0 0 0 0 rgba(255, 88, 0, 0);
-                      border-color: rgba(255, 88, 0, 0.15);
-                    }
-                    50% {
-                      box-shadow: 0 0 8px 2px rgba(255, 88, 0, 0.1);
-                      border-color: rgba(255, 88, 0, 0.25);
-                    }
-                  }
-
-                  @keyframes dotPulse {
-                    0%,
-                    80%,
-                    100% {
-                      transform: scale(0.8);
-                      opacity: 0.4;
-                    }
-                    40% {
-                      transform: scale(1);
-                      opacity: 1;
-                    }
-                  }
-
-                  .reasoning-container {
-                    animation: reasoningFadeIn 300ms ease-out forwards;
-                  }
-
-                  .reasoning-border {
-                    animation: pulseGlow 2s ease-in-out infinite;
-                  }
-
-                  .reasoning-text {
-                    animation: reasoningTextAppear 200ms ease-out forwards;
-                    -webkit-font-smoothing: antialiased;
-                  }
-
-                  .thinking-dots span {
-                    display: inline-block;
-                    animation: dotPulse 1.4s ease-in-out infinite;
-                  }
-                  .thinking-dots span:nth-child(1) {
-                    animation-delay: 0ms;
-                  }
-                  .thinking-dots span:nth-child(2) {
-                    animation-delay: 200ms;
-                  }
-                  .thinking-dots span:nth-child(3) {
-                    animation-delay: 400ms;
-                  }
-                ` }), hasReasoning ? (_jsxs("div", { className: "reasoning-container space-y-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-[#FF5800]/70" }), _jsx("div", { className: "absolute inset-0 h-3.5 w-3.5 animate-ping opacity-20 rounded-full bg-[#FF5800]" })] }), _jsxs("span", { className: "text-xs font-medium text-[#FF5800]/70 uppercase tracking-wider", children: [reasoningPhase === "planning" && "Planning", reasoningPhase === "actions" && "Executing", reasoningPhase === "response" && "Composing", !reasoningPhase && "Thinking"] })] }), _jsxs("div", { className: "reasoning-text reasoning-border text-sm text-white/85 italic leading-relaxed border-l-2 border-[#FF5800]/30 pl-3 ml-1 py-0.5", children: [displayReasoningText, _jsx("span", { className: "streaming-cursor inline-block w-[2px] h-[0.9em] bg-[#FF5800]/50 ml-0.5 rounded-sm align-text-bottom", style: { verticalAlign: "text-bottom" } })] })] })) : (_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin text-white/50" }), _jsxs("span", { className: "text-sm text-white/50", children: ["thinking", _jsxs("span", { className: "thinking-dots", children: [_jsx("span", { children: "." }), _jsx("span", { children: "." }), _jsx("span", { children: "." })] })] })] }))] })) : (_jsxs(_Fragment, { children: [hasStreamingReasoning && (_jsxs("div", { className: "mb-2 py-2 px-3 bg-white/[0.02] border border-white/[0.05] rounded-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "relative", children: _jsx(Loader2, { className: "h-3 w-3 animate-spin text-[#FF5800]/60" }) }), _jsx("span", { className: "text-[10px] font-medium text-[#FF5800]/60 uppercase tracking-wider", children: "Composing" })] }), _jsx("div", { className: "text-xs text-white/70 italic leading-relaxed border-l-2 border-[#FF5800]/20 pl-2 mt-1.5 line-clamp-2", children: displayReasoningText })] })), _jsxs("div", { className: "overflow-hidden", children: [_jsx("style", { children: `
-                    @keyframes streamTextFadeIn {
-                      0% {
-                        opacity: 0.4;
-                        filter: blur(1px);
-                      }
-                      100% {
-                        opacity: 1;
-                        filter: blur(0);
-                      }
-                    }
-
-                    @keyframes cursorBlink {
-                      0%,
-                      50% {
-                        opacity: 1;
-                      }
-                      51%,
-                      100% {
-                        opacity: 0;
-                      }
-                    }
-
-                    @keyframes cursorPulse {
-                      0%,
-                      100% {
-                        opacity: 0.9;
-                        transform: scaleY(1);
-                      }
-                      50% {
-                        opacity: 0.5;
-                        transform: scaleY(0.85);
-                      }
-                    }
-
-                    .streaming-text-wrapper {
-                      /* Smooth text rendering for animation */
-                      -webkit-font-smoothing: antialiased;
-                      -moz-osx-font-smoothing: grayscale;
-                      text-rendering: optimizeLegibility;
-                    }
-
-                    .streaming-text-content {
-                      animation: streamTextFadeIn 200ms ease-out forwards;
-                    }
-
-                    /* Smooth transitions for text changes */
-                    .streaming-text-content p,
-                    .streaming-text-content span,
-                    .streaming-text-content div {
-                      transition: opacity 150ms ease-out;
-                    }
-
-                    .streaming-cursor {
-                      animation: cursorPulse 800ms ease-in-out infinite;
-                      will-change: opacity, transform;
-                    }
-
-                    /* Non-streaming messages - subtle entrance */
-                    .message-text-complete {
-                      animation: streamTextFadeIn 300ms ease-out forwards;
-                    }
-                  ` }), _jsxs("div", { className: `streaming-text-wrapper text-[15px] leading-relaxed text-white/90 prose prose-invert prose-sm max-w-none prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 prose-headings:my-3 prose-pre:my-2 break-words [&_pre]:overflow-x-auto [&_pre_code]:whitespace-pre-wrap [&_pre_code]:break-words ${isStreamingMessage ? "streaming-text-content" : "message-text-complete"}`, children: [_jsx(Streamdown, { children: normalizeMarkdownLists(isStreamingMessage ? displayText : message.content.text) }), isStreamingMessage && (_jsx("span", { className: "streaming-cursor inline-block w-[3px] h-[1.1em] bg-[#FF5800] ml-0.5 rounded-sm align-text-bottom", style: {
-                                                    verticalAlign: "text-bottom",
-                                                    marginBottom: "2px",
-                                                } }))] })] }), message.content.attachments &&
+    return (_jsx("div", { className: `flex ${message.isAgent ? "justify-start" : "justify-end"}`, children: message.isAgent ? (_jsxs("div", { className: "flex flex-col gap-0.5 max-w-[85%] sm:max-w-[75%] group/message", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ElizaAvatar, { avatarUrl: characterAvatarUrl, name: characterName, className: "flex-shrink-0 w-5 h-5", iconClassName: "h-3 w-3", animate: isThinking }), _jsx("span", { className: "text-sm font-medium text-white/50", children: characterName })] }), _jsx("div", { className: "flex flex-col gap-0.5", children: isThinking ? (_jsx("div", { className: "py-2.5 px-3.5 bg-white/[0.02] border border-white/[0.05] rounded-sm", children: hasReasoning ? (_jsxs("div", { className: "reasoning-container space-y-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-[#FF5800]/70" }), _jsx("div", { className: "absolute inset-0 h-3.5 w-3.5 animate-ping opacity-20 rounded-full bg-[#FF5800]" })] }), _jsxs("span", { className: "text-xs font-medium text-[#FF5800]/70 uppercase tracking-wider", children: [reasoningPhase === "planning" && "Planning", reasoningPhase === "actions" && "Executing", reasoningPhase === "response" && "Composing", !reasoningPhase && "Thinking"] })] }), _jsxs("div", { className: "reasoning-text reasoning-border text-sm text-white/85 italic leading-relaxed border-l-2 border-[#FF5800]/30 pl-3 ml-1 py-0.5", children: [displayReasoningText, _jsx("span", { className: "streaming-cursor inline-block w-[2px] h-[0.9em] bg-[#FF5800]/50 ml-0.5 rounded-sm align-text-bottom", style: { verticalAlign: "text-bottom" } })] })] })) : (_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin text-white/50" }), _jsxs("span", { className: "text-sm text-white/50", children: ["thinking", _jsxs("span", { className: "thinking-dots", children: [_jsx("span", { children: "." }), _jsx("span", { children: "." }), _jsx("span", { children: "." })] })] })] })) })) : (_jsxs(_Fragment, { children: [hasStreamingReasoning && (_jsxs("div", { className: "mb-2 py-2 px-3 bg-white/[0.02] border border-white/[0.05] rounded-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "relative", children: _jsx(Loader2, { className: "h-3 w-3 animate-spin text-[#FF5800]/60" }) }), _jsx("span", { className: "text-[10px] font-medium text-[#FF5800]/60 uppercase tracking-wider", children: "Composing" })] }), _jsx("div", { className: "text-xs text-white/70 italic leading-relaxed border-l-2 border-[#FF5800]/20 pl-2 mt-1.5 line-clamp-2", children: displayReasoningText })] })), _jsx("div", { className: "overflow-hidden", children: _jsxs("div", { className: `streaming-text-wrapper text-[15px] leading-relaxed text-white/90 prose prose-invert prose-sm max-w-none prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 prose-headings:my-3 prose-pre:my-2 break-words [&_pre]:overflow-x-auto [&_pre_code]:whitespace-pre-wrap [&_pre_code]:break-words ${isStreamingMessage ? "streaming-text-content" : "message-text-complete"}`, children: [_jsx(Streamdown, { children: normalizeMarkdownLists(isStreamingMessage ? displayText : message.content.text) }), isStreamingMessage && (_jsx("span", { className: "streaming-cursor inline-block w-[3px] h-[1.1em] bg-[#FF5800] ml-0.5 rounded-sm align-text-bottom", style: {
+                                                verticalAlign: "text-bottom",
+                                                marginBottom: "2px",
+                                            } }))] }) }), message.content.attachments &&
                                 message.content.attachments.length > 0 && (_jsx("div", { className: "mt-2 space-y-2", children: message.content.attachments.map((attachment) => {
                                     if (attachment.contentType === ContentType.IMAGE) {
                                         return (_jsx("div", { className: "inline-block rounded-sm overflow-hidden border border-white/10 max-w-md", children: _jsx(Image, { src: attachment.url, alt: attachment.title || "Generated image", width: 512, height: 512, className: "w-full h-auto", style: { display: "block" }, onLoad: onImageLoad }) }, attachment.id));

package/cloud-ui/components/analytics/cost-alerts.d.ts

@@ -1,4 +1,4 @@
-import type { AnalyticsCostTrendingDto } from "../../types/cloud-api";
+import type { AnalyticsCostTrendingDto } from "../../types/cloud-api.js";
 type CostAlertsTrending = AnalyticsCostTrendingDto;
 interface CostAlertsProps {
     costTrending: CostAlertsTrending;

package/cloud-ui/components/analytics/cost-insights-card.d.ts

@@ -1,4 +1,4 @@
-import { type CostAlertsTrending } from "./cost-alerts";
+import { type CostAlertsTrending } from "./cost-alerts.js";
 interface CostInsightsCardProps {
     costTrending: CostAlertsTrending;
     creditBalance: number;

package/cloud-ui/components/analytics/index.d.ts

@@ -1,4 +1,4 @@
-export { CostAlerts, type CostAlertsProps, type CostAlertsTrending, } from "./cost-alerts";
-export { CostInsightsCard, type CostInsightsCardProps, } from "./cost-insights-card";
-export { type AnalyticsExportFormat, type AnalyticsExportType, ExportButton, type ExportButtonProps, } from "./export-button";
+export { CostAlerts, type CostAlertsProps, type CostAlertsTrending, } from "./cost-alerts.js";
+export { CostInsightsCard, type CostInsightsCardProps, } from "./cost-insights-card.js";
+export { type AnalyticsExportFormat, type AnalyticsExportType, ExportButton, type ExportButtonProps, } from "./export-button.js";
 //# sourceMappingURL=index.d.ts.map

package/cloud-ui/components/auth/authorize-content.js

@@ -165,7 +165,7 @@ function Frame({ children }) {
     // remounted the tree and prevented validateApp's effect from completing.
     // Consent screens are also better off header-less (Google/GitHub do the
     // same): single-purpose, not a navigable location.
-    return (_jsxs("div", { className: "relative flex min-h-screen w-full flex-col overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-black via-zinc-900 to-black" }), _jsx("div", { className: "relative z-10 flex flex-1 items-center justify-center p-4", children: _jsxs(BrandCard, { className: "w-full max-w-md backdrop-blur-sm bg-black/60", children: [_jsx(CornerBrackets, { size: "md", className: "opacity-50" }), _jsx("div", { className: "relative z-10 flex flex-col items-center gap-6 py-8 px-2", children: children })] }) })] }));
+    return (_jsxs("div", { className: "relative flex min-h-screen w-full flex-col overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-black via-zinc-900 to-black" }), _jsx("div", { className: "relative z-10 flex flex-1 items-center justify-center p-4", children: _jsxs(BrandCard, { className: "w-full max-w-md bg-black/85", children: [_jsx(CornerBrackets, { size: "md", className: "opacity-50" }), _jsx("div", { className: "relative z-10 flex flex-col items-center gap-6 py-8 px-2", children: children })] }) })] }));
 }
 function AppHeader({ appInfo }) {
     return (_jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [appInfo.logo_url ? (_jsx(Image, { src: appInfo.logo_url, alt: appInfo.name, width: 64, height: 64, className: "h-16 w-16 rounded-sm object-cover", unoptimized: true })) : (_jsx("div", { className: "h-16 w-16 rounded-sm bg-gradient-to-br from-[#FF5800] to-[#FF8800] flex items-center justify-center", children: _jsx("span", { className: "text-2xl font-bold text-white", children: appInfo.name.charAt(0) }) })), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold text-white", children: appInfo.name }), appInfo.website_url && (_jsx("p", { className: "text-sm text-white/50 mt-1", children: new URL(appInfo.website_url).hostname }))] })] }));

package/cloud-ui/components/brand/brand-button.d.ts

@@ -6,7 +6,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const brandButtonVariants: (props?: ({
-    variant?: "outline" | "ghost" | "icon" | "primary" | "icon-primary" | null | undefined;
+    variant?: "primary" | "outline" | "ghost" | "icon" | "icon-primary" | null | undefined;
     size?: "sm" | "lg" | "icon" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BrandButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof brandButtonVariants> {

package/cloud-ui/components/brand/brand-button.js

@@ -8,7 +8,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const brandButtonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/30 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer", {
+const brandButtonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-colors    disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer", {
     variants: {
         variant: {
             primary: "bg-accent text-accent-foreground hover:bg-background hover:text-foreground active:bg-background/90",

package/cloud-ui/components/brand/brand-tabs-responsive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"brand-tabs-responsive.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/brand/brand-tabs-responsive.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,wBAAwB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,EAAE,EACF,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,wBAAwB,kDAmG1B"}
+{"version":3,"file":"brand-tabs-responsive.d.ts","sourceRoot":"","sources":["../../../../../../../src/cloud-ui/components/brand/brand-tabs-responsive.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,wBAAwB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,EAAE,EACF,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,wBAAwB,kDAkG1B"}

package/cloud-ui/components/brand/brand-tabs-responsive.js

@@ -34,5 +34,5 @@ export function BrandTabsResponsive({ id, tabs, value, defaultValue, onValueChan
     if (!isMounted) {
         return null;
     }
-    return (_jsxs(TabsPrimitive.Root, { id: id, value: value, defaultValue: defaultValue, onValueChange: onValueChange, className: cn("w-full", className), children: [_jsx("div", { className: cn("block", breakpoint === "sm" && "sm:hidden", breakpoint === "md" && "md:hidden", breakpoint === "lg" && "lg:hidden"), children: _jsxs(Select, { value: value || defaultValue, onValueChange: onValueChange, children: [_jsx(SelectTrigger, { className: cn("w-full h-8 rounded-sm border border-border bg-bg-elevated", "text-txt text-xs px-3 py-1", "hover:bg-bg-hover transition-colors"), children: _jsx(SelectValue, { children: tabs.find((tab) => tab.value === (value || defaultValue))?.label }) }), _jsx(SelectContent, { className: "bg-bg-elevated border-border", children: tabs.map((tab) => (_jsx(SelectItem, { value: tab.value, disabled: tab.disabled, className: cn("text-txt text-xs cursor-pointer", "hover:bg-bg-hover focus:bg-bg-hover", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"), children: _jsxs("div", { className: "flex items-center gap-2", children: [tab.icon, tab.label] }) }, tab.value))) })] }) }), _jsx(TabsPrimitive.List, { className: cn("hidden", breakpoint === "sm" && "sm:inline-flex", breakpoint === "md" && "md:inline-flex", breakpoint === "lg" && "lg:inline-flex", "h-8 lg:h-9 items-center justify-center rounded-sm bg-bg-elevated border border-border p-0"), children: tabs.map((tab) => (_jsxs(TabsPrimitive.Trigger, { value: tab.value, disabled: tab.disabled, className: cn("inline-flex items-center gap-1.5 lg:gap-2 rounded-sm px-2.5 lg:px-4 xl:px-6 py-1 lg:py-1.5 text-xs lg:text-sm font-medium transition-colors whitespace-nowrap", "border-b-2 border-transparent", "text-txt/70 hover:text-txt", "data-[state=active]:border-txt data-[state=active]:bg-bg-hover data-[state=active]:text-txt", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50"), children: [_jsx("span", { className: "[&>svg]:h-3.5 [&>svg]:w-3.5 lg:[&>svg]:h-4 lg:[&>svg]:w-4", children: tab.icon }), _jsx("span", { className: "hidden lg:inline", children: tab.label })] }, tab.value))) }), children] }));
+    return (_jsxs(TabsPrimitive.Root, { id: id, value: value, defaultValue: defaultValue, onValueChange: onValueChange, className: cn("w-full", className), children: [_jsx("div", { className: cn("block", breakpoint === "sm" && "sm:hidden", breakpoint === "md" && "md:hidden", breakpoint === "lg" && "lg:hidden"), children: _jsxs(Select, { value: value || defaultValue, onValueChange: onValueChange, children: [_jsx(SelectTrigger, { className: cn("w-full h-8 rounded-sm border border-border bg-bg-elevated", "text-txt text-xs px-3 py-1", "hover:bg-bg-hover transition-colors"), children: _jsx(SelectValue, { children: tabs.find((tab) => tab.value === (value || defaultValue))?.label }) }), _jsx(SelectContent, { className: "bg-bg-elevated border-border", children: tabs.map((tab) => (_jsx(SelectItem, { value: tab.value, disabled: tab.disabled, className: cn("text-txt text-xs cursor-pointer", "hover:bg-bg-hover ", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"), children: _jsxs("div", { className: "flex items-center gap-2", children: [tab.icon, tab.label] }) }, tab.value))) })] }) }), _jsx(TabsPrimitive.List, { className: cn("hidden", breakpoint === "sm" && "sm:inline-flex", breakpoint === "md" && "md:inline-flex", breakpoint === "lg" && "lg:inline-flex", "h-8 lg:h-9 items-center justify-center rounded-sm bg-bg-elevated border border-border p-0"), children: tabs.map((tab) => (_jsxs(TabsPrimitive.Trigger, { value: tab.value, disabled: tab.disabled, className: cn("inline-flex items-center gap-1.5 lg:gap-2 rounded-sm px-2.5 lg:px-4 xl:px-6 py-1 lg:py-1.5 text-xs lg:text-sm font-medium transition-colors whitespace-nowrap", "border-b-2 border-transparent", "text-txt/70 hover:text-txt", "data-[state=active]:border-txt data-[state=active]:bg-bg-hover data-[state=active]:text-txt", "disabled:pointer-events-none disabled:opacity-50"), children: [_jsx("span", { className: "[&>svg]:h-3.5 [&>svg]:w-3.5 lg:[&>svg]:h-4 lg:[&>svg]:w-4", children: tab.icon }), _jsx("span", { className: "hidden lg:inline", children: tab.label })] }, tab.value))) }), children] }));
 }