@tangle-network/sandbox-ui 0.2.2 → 0.3.3

package/dist/primitives.js

@@ -12,14 +12,6 @@ import {
   SelectValue,
   StatCard,
   Switch,
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
   TerminalCursor,
   TerminalDisplay,
   TerminalInput,
@@ -27,7 +19,7 @@ import {
   ToastContainer,
   ToastProvider,
   useToast
-} from "./chunk-SOT2V7TX.js";
+} from "./chunk-TXI4MZAZ.js";
 import {
   Avatar,
   AvatarFallback,
@@ -44,14 +36,26 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-  EmptyState,
-  Input,
   Tabs,
   TabsContent,
   TabsList,
-  TabsTrigger,
+  TabsTrigger
+} from "./chunk-PDV7W4NY.js";
+import {
+  EmptyState,
+  Input,
   Textarea
-} from "./chunk-NI2EI43H.js";
+} from "./chunk-MUOL44AE.js";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-TQN3VR4F.js";
 import {
   Logo,
   TangleKnot
@@ -73,6 +77,12 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from "./chunk-MCGKDCOR.js";
+import {
+  Progress,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable
+} from "./chunk-FRGMMANX.js";
 import {
   Badge,
   Card,
@@ -81,16 +91,12 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  Progress,
-  Skeleton,
-  SkeletonCard,
-  SkeletonTable,
   badgeVariants
-} from "./chunk-2UHPE5T7.js";
+} from "./chunk-MXCSSOGH.js";
 import {
   Button,
   buttonVariants
-} from "./chunk-E6FS7R4X.js";
+} from "./chunk-HWLX5NME.js";
 import "./chunk-RQHJBTEU.js";
 export {
   Avatar,

package/dist/run.d.ts

@@ -1,11 +1,11 @@
-export { E as ExpandedToolDetail, a as ExpandedToolDetailProps, I as InlineThinkingItem, b as InlineThinkingItemProps, c as InlineToolItem, d as InlineToolItemProps, R as RunGroup, e as RunGroupProps } from './expanded-tool-detail-OkXGqTHe.js';
+export { E as ExpandedToolDetail, a as ExpandedToolDetailProps, I as InlineThinkingItem, b as InlineThinkingItemProps, c as InlineToolItem, d as InlineToolItemProps, R as RunGroup, e as RunGroupProps } from './expanded-tool-detail-BDi_h_dZ.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-D5Ume-Pt.js';
 import 'react';
 import './run-CtFZ6s-D.js';
 import './parts-CyGkM6Fp.js';
 import './branding-DCi5VEik.js';
-import './tool-display-BvsVW_Ur.js';
+import './tool-display-Ct9nFAzJ.js';
 
 declare function LiveDuration({ startTime }: {
     startTime: number;

package/dist/run.js

@@ -1,20 +1,21 @@
 import {
   ToolCallFeed,
-  ToolCallGroup,
-  ToolCallStep,
   parseToolEvent
-} from "./chunk-M6VLC32S.js";
+} from "./chunk-CCKNIAS7.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-6MQIDUPA.js";
-import "./chunk-LTFK464G.js";
-import "./chunk-M34OA6PQ.js";
+} from "./chunk-WUR652Y3.js";
 import "./chunk-HRMUF35V.js";
-import "./chunk-QSQBDR3N.js";
+import {
+  ToolCallGroup,
+  ToolCallStep
+} from "./chunk-CJ2RYVZH.js";
+import "./chunk-BX6AQMUS.js";
+import "./chunk-LTFK464G.js";
 import "./chunk-RQHJBTEU.js";
 export {
   ExpandedToolDetail,

package/dist/{use-sidecar-auth-Bb0-w3lX.d.ts → sdk-hooks.d.ts}

@@ -1,8 +1,9 @@
-import { F as FeedSegment } from './tool-call-feed-D5Ume-Pt.js';
-import { S as SessionMessage, a as SessionPart } from './parts-CyGkM6Fp.js';
-import { G as GroupedMessage, R as Run } from './run-CtFZ6s-D.js';
 import * as React from 'react';
 import { RefObject } from 'react';
+import { G as GroupedMessage, R as Run } from './run-CtFZ6s-D.js';
+import { S as SessionMessage, a as SessionPart } from './parts-CyGkM6Fp.js';
+import { F as FeedSegment } from './tool-call-feed-D5Ume-Pt.js';
+import 'react/jsx-runtime';
 
 /**
  * useToolCallStream — parses SSE events into ToolCallFeed segments.
@@ -32,45 +33,6 @@ interface UseToolCallStreamReturn {
 }
 declare function useToolCallStream(): UseToolCallStreamReturn;
 
-interface AuthUser {
-    customer_id: string;
-    email: string;
-    name?: string;
-    tier: string;
-    github?: {
-        login: string;
-        connected: boolean;
-    } | null;
-    session_expires_at?: string;
-}
-interface UseAuthOptions {
-    apiBaseUrl: string;
-    revalidateOnFocus?: boolean;
-    shouldRetryOnError?: boolean;
-}
-interface UseAuthResult {
-    user: AuthUser | null;
-    isLoading: boolean;
-    isError: boolean;
-    error: Error | null;
-    mutate: () => Promise<void>;
-}
-/**
- * Hook for managing authentication state.
- * Fetches user session from the API and provides loading/error states.
- */
-declare function useAuth({ apiBaseUrl, revalidateOnFocus, shouldRetryOnError, }: UseAuthOptions): UseAuthResult;
-/**
- * Creates a fetcher function that includes auth credentials.
- * Uses both cookie-based session and localStorage API key for backwards compatibility.
- */
-declare function createAuthFetcher(_apiBaseUrl: string): <T = unknown>(url: string, options?: RequestInit) => Promise<T>;
-/**
- * Hook to get the API key from localStorage.
- * For backwards compatibility with API key-based auth.
- */
-declare function useApiKey(): string | null;
-
 /**
  * SSE Event data structure
  */
@@ -194,6 +156,62 @@ interface BotStreamEvent {
     timestamp: number;
 }
 
+interface SdkSessionAttachment {
+    name: string;
+    size?: number;
+}
+interface SdkSessionSeed {
+    id: string;
+    role: SessionMessage["role"];
+    createdAt?: number | string | Date;
+    content?: string;
+    attachments?: SdkSessionAttachment[];
+    parts?: SessionPart[];
+}
+interface SdkSessionEvent {
+    type: string;
+    data?: Record<string, unknown>;
+}
+interface BeginAssistantMessageOptions {
+    id?: string;
+    role?: Extract<SessionMessage["role"], "assistant" | "system">;
+    createdAt?: number | string | Date;
+}
+interface AppendUserMessageOptions {
+    id?: string;
+    role?: Extract<SessionMessage["role"], "user" | "system">;
+    content: string;
+    createdAt?: number | string | Date;
+    attachments?: SdkSessionAttachment[];
+}
+interface CompleteAssistantMessageOptions {
+    messageId?: string;
+    finalText?: string;
+}
+interface ApplySdkEventOptions {
+    messageId?: string;
+}
+interface UseSdkSessionOptions {
+    initialMessages?: SdkSessionSeed[];
+}
+interface UseSdkSessionReturn {
+    messages: SessionMessage[];
+    partMap: Record<string, SessionPart[]>;
+    isStreaming: boolean;
+    activeAssistantMessageId: string | null;
+    replaceHistory: (messages: SdkSessionSeed[]) => void;
+    appendUserMessage: (message: AppendUserMessageOptions) => string;
+    beginAssistantMessage: (options?: BeginAssistantMessageOptions) => string;
+    applySdkEvent: (event: SdkSessionEvent, options?: ApplySdkEventOptions) => void;
+    completeAssistantMessage: (options?: CompleteAssistantMessageOptions) => void;
+    failAssistantMessage: (error: string, options?: {
+        messageId?: string;
+    }) => void;
+    setStreaming: (value: boolean) => void;
+    reset: () => void;
+}
+declare function useSdkSession({ initialMessages, }?: UseSdkSessionOptions): UseSdkSessionReturn;
+
 interface UseRunGroupsOptions {
     messages: SessionMessage[];
     partMap: Record<string, SessionPart[]>;
@@ -276,35 +294,6 @@ declare function useDropdownMenu(options?: UseDropdownMenuOptions): {
     close: () => void;
 };
 
-interface UsePtySessionOptions {
-    /** Base URL of the sidecar (e.g. "http://localhost:9100"). */
-    apiUrl: string;
-    /** Bearer token for authentication. */
-    token: string;
-    /** Called with raw PTY output (may contain ANSI escape codes). */
-    onData: (data: string) => void;
-}
-interface UsePtySessionReturn {
-    /** Whether the SSE stream is connected and receiving data. */
-    isConnected: boolean;
-    /** Connection or API error, if any. */
-    error: string | null;
-    /** Send a command to the PTY session. */
-    sendCommand: (command: string) => Promise<void>;
-    /** Tear down and reconnect. */
-    reconnect: () => void;
-}
-/**
- * Manages a PTY session against the sidecar terminal API.
- *
- * Protocol:
- * - POST /terminals              → create session → { data: { sessionId } }
- * - GET  /terminals/{id}/stream  → SSE output (raw PTY with ANSI codes)
- * - POST /terminals/{id}/execute → send command   { command: "..." }
- * - DELETE /terminals/{id}       → close session
- */
-declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
-
 interface UseSidecarAuthOptions {
     /** Scoping key for token storage (e.g. botId, sandboxId). */
     resourceId: string;
@@ -336,4 +325,4 @@ interface SidecarAuth {
  */
 declare function useSidecarAuth({ resourceId, apiUrl, signMessage }: UseSidecarAuthOptions): SidecarAuth;
 
-export { type AgentStreamEvent as A, type BotStreamEvent as B, type ConnectionState as C, useToolCallStream as D, type SSEEvent as S, type TaskStreamEvent as T, type UseAuthOptions as U, type AuthUser as a, type AutomationStreamEvent as b, type SessionInfo as c, type SidecarAuth as d, type TerminalStreamEvent as e, type UseAuthResult as f, type UsePtySessionOptions as g, type UsePtySessionReturn as h, type UseRunGroupsOptions as i, type UseSSEStreamOptions as j, type UseSSEStreamResult as k, type UseSessionStreamOptions as l, type UseSessionStreamResult as m, type UseSidecarAuthOptions as n, type UseToolCallStreamReturn as o, createAuthFetcher as p, useAuth as q, useAutoScroll as r, useDropdownMenu as s, usePtySession as t, useApiKey as u, useRunCollapseState as v, useRunGroups as w, useSSEStream as x, useSessionStream as y, useSidecarAuth as z };
+export { type AgentStreamEvent, type AppendUserMessageOptions, type ApplySdkEventOptions, type AutomationStreamEvent, type BeginAssistantMessageOptions, type BotStreamEvent, type CompleteAssistantMessageOptions, type ConnectionState, type SSEEvent, type SdkSessionAttachment, type SdkSessionEvent, type SdkSessionSeed, type SessionInfo, type SidecarAuth, type TaskStreamEvent, type TerminalStreamEvent, type UseRunGroupsOptions, type UseSSEStreamOptions, type UseSSEStreamResult, type UseSdkSessionOptions, type UseSdkSessionReturn, type UseSessionStreamOptions, type UseSessionStreamResult, type UseSidecarAuthOptions, type UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream };

package/dist/sdk-hooks.js

@@ -0,0 +1,29 @@
+import {
+  useDropdownMenu,
+  useSSEStream,
+  useSdkSession,
+  useSessionStream,
+  useSidecarAuth,
+  useToolCallStream
+} from "./chunk-5LV6DZZF.js";
+import "./chunk-CCKNIAS7.js";
+import {
+  useAutoScroll,
+  useRunCollapseState,
+  useRunGroups
+} from "./chunk-CNWVHQFY.js";
+import "./chunk-CJ2RYVZH.js";
+import "./chunk-BX6AQMUS.js";
+import "./chunk-LTFK464G.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  useAutoScroll,
+  useDropdownMenu,
+  useRunCollapseState,
+  useRunGroups,
+  useSSEStream,
+  useSdkSession,
+  useSessionStream,
+  useSidecarAuth,
+  useToolCallStream
+};

package/dist/styles.css

@@ -0,0 +1,179 @@
+@import "./tokens.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --sandbox: var(--primary);
+    --sandbox-glow: var(--info);
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    @apply antialiased;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-border rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-muted-foreground/50;
+  }
+}
+
+@layer utilities {
+  /* Gradient text -- Tangle default accent */
+  .text-gradient-sandbox {
+    background-image: var(--tangle-gradient);
+    @apply bg-clip-text text-transparent;
+  }
+
+  /* Glow effects */
+  .glow-sandbox {
+    box-shadow: 0 0 40px -10px hsl(var(--sandbox) / 0.4);
+  }
+
+  /* Glass effect */
+  .glass {
+    backdrop-filter: blur(24px);
+    background-color: hsl(var(--card) / 0.8);
+    border: 1px solid hsl(var(--border) / 0.5);
+  }
+
+  /* Subtle noise texture */
+  .noise {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    opacity: 0.02;
+  }
+
+  /* Terminal styling */
+  .terminal-cursor {
+    @apply inline-block w-2 h-5 bg-foreground animate-pulse;
+  }
+
+  /* Shimmer animation */
+  .shimmer {
+    background: linear-gradient(
+      90deg,
+      hsl(var(--muted)) 0%,
+      hsl(var(--accent)) 50%,
+      hsl(var(--muted)) 100%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  /* Fade in animation */
+  .animate-in {
+    animation: fade-in 0.3s ease-out;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Pulse ring animation */
+  .pulse-ring {
+    @apply relative;
+  }
+
+  .pulse-ring::before {
+    content: "";
+    @apply absolute inset-0 rounded-full;
+    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes pulse-ring {
+    0%,
+    100% {
+      box-shadow: 0 0 0 0 currentColor;
+      opacity: 0.4;
+    }
+    50% {
+      box-shadow: 0 0 0 8px currentColor;
+      opacity: 0;
+    }
+  }
+}
+
+/* Fonts -- Inter (UI) + JetBrains Mono (code). */
+@font-face {
+  font-family: "Inter";
+  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI2fAZ9hiA.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYAZ9hiA.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOV.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/tokens.css

@@ -0,0 +1,165 @@
+/* Tangle Sandbox UI design tokens */
+
+:root,
+[data-sandbox-ui] {
+  /* Semantic HSL bridge for shadcn/radix primitives */
+  --hsl-background: 245 18% 7%;
+  --hsl-foreground: 220 20% 96%;
+  --hsl-card: 246 21% 10%;
+  --hsl-card-foreground: 220 20% 96%;
+  --hsl-popover: 246 21% 10%;
+  --hsl-popover-foreground: 220 20% 96%;
+  --hsl-primary: 226 84% 66%;
+  --hsl-primary-foreground: 220 20% 98%;
+  --hsl-secondary: 243 18% 16%;
+  --hsl-secondary-foreground: 220 18% 92%;
+  --hsl-muted: 243 18% 14%;
+  --hsl-muted-foreground: 230 16% 68%;
+  --hsl-accent: 243 18% 18%;
+  --hsl-accent-foreground: 220 18% 94%;
+  --hsl-destructive: 0 82% 63%;
+  --hsl-destructive-foreground: 220 20% 98%;
+  --hsl-border: 242 17% 20%;
+  --hsl-input: 243 18% 16%;
+  --hsl-ring: 226 84% 66%;
+  --hsl-success: 142 70% 48%;
+  --hsl-warning: 41 96% 58%;
+  --hsl-info: 199 89% 60%;
+
+  /* Tailwind/shadcn variable aliases */
+  --background: var(--hsl-background);
+  --foreground: var(--hsl-foreground);
+  --card: var(--hsl-card);
+  --card-foreground: var(--hsl-card-foreground);
+  --popover: var(--hsl-popover);
+  --popover-foreground: var(--hsl-popover-foreground);
+  --primary: var(--hsl-primary);
+  --primary-foreground: var(--hsl-primary-foreground);
+  --secondary: var(--hsl-secondary);
+  --secondary-foreground: var(--hsl-secondary-foreground);
+  --muted: var(--hsl-muted);
+  --muted-foreground: var(--hsl-muted-foreground);
+  --accent: var(--hsl-accent);
+  --accent-foreground: var(--hsl-accent-foreground);
+  --destructive: var(--hsl-destructive);
+  --destructive-foreground: var(--hsl-destructive-foreground);
+  --border: var(--hsl-border);
+  --input: var(--hsl-input);
+  --ring: var(--hsl-ring);
+  --success: var(--hsl-success);
+  --warning: var(--hsl-warning);
+  --error: var(--hsl-destructive);
+  --info: var(--hsl-info);
+
+  /* Brand gradients */
+  --tangle-gradient: linear-gradient(135deg, hsl(226 84% 66%), hsl(199 89% 60%));
+  --tangle-gradient-text: linear-gradient(45deg, hsl(226 84% 72%), hsl(199 89% 66%));
+  --accent-gradient-strong: linear-gradient(135deg, hsl(var(--hsl-primary)), var(--brand-glow));
+  --accent-surface-soft: hsl(var(--hsl-primary) / 0.12);
+  --accent-surface-strong: hsl(var(--hsl-primary) / 0.18);
+  --accent-text: var(--brand-cool);
+
+  /* Surfaces */
+  --bg-root: hsl(var(--hsl-background));
+  --bg-dark: hsl(246 19% 9%);
+  --bg-card: hsl(var(--hsl-card));
+  --bg-elevated: hsl(245 20% 12%);
+  --bg-section: hsl(246 18% 8%);
+  --bg-input: hsl(var(--hsl-input));
+  --bg-hover: hsl(243 18% 18%);
+  --bg-selection: hsl(226 84% 66% / 0.15);
+
+  /* Text */
+  --text-primary: hsl(var(--hsl-foreground));
+  --text-secondary: hsl(220 18% 88%);
+  --text-muted: hsl(var(--hsl-muted-foreground));
+
+  /* Brand accents */
+  --brand-primary: hsl(var(--hsl-primary));
+  --brand-strong: hsl(226 80% 60%);
+  --brand-cool: hsl(220 88% 70%);
+  --brand-glow: hsl(199 89% 66%);
+  --brand-purple: hsl(254 84% 72%);
+  --brand-vibrant: hsl(214 90% 63%);
+
+  /* Borders */
+  --border-subtle: hsl(var(--hsl-border) / 0.55);
+  --border-default: hsl(var(--hsl-border) / 0.8);
+  --border-hover: hsl(var(--hsl-border) / 1);
+  --border-accent: hsl(var(--hsl-primary) / 0.35);
+  --border-accent-hover: hsl(var(--hsl-primary) / 0.55);
+
+  /* Buttons */
+  --btn-primary-bg: hsl(var(--hsl-primary));
+  --btn-primary-hover: hsl(226 84% 72%);
+  --btn-cta-bg: hsl(220 20% 98%);
+  --btn-cta-text: hsl(245 18% 10%);
+
+  /* Code / runtime syntax */
+  --code-keyword: hsl(254 88% 76%);
+  --code-string: hsl(199 89% 72%);
+  --code-function: hsl(214 90% 72%);
+  --code-number: hsl(41 96% 66%);
+  --code-success: hsl(var(--hsl-success));
+  --code-comment: hsl(230 14% 60%);
+  --code-error: hsl(var(--hsl-destructive));
+
+  /* Shadows */
+  --shadow-card: 0 18px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(118, 146, 255, 0.08);
+  --shadow-dropdown: 0 24px 80px rgba(0, 0, 0, 0.45);
+  --shadow-glow: 0 0 40px rgba(96, 165, 250, 0.14);
+  --shadow-accent: 0 18px 48px rgba(0, 0, 0, 0.24), 0 0 0 1px hsl(var(--hsl-primary) / 0.12);
+
+  /* Radii */
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+  --radius-full: 999px;
+  --radius: 0.875rem;
+
+  /* Density-aware metrics */
+  --control-height: 2.5rem;
+  --panel-padding: 1rem;
+  --content-max-width: 80rem;
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-default: 0.2s ease;
+  --transition-medium: 0.3s ease;
+
+  /* Fonts */
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+}
+
+[data-sandbox-theme="builder"] {
+  --hsl-primary: 214 90% 63%;
+  --hsl-ring: 214 90% 63%;
+  --brand-cool: hsl(214 90% 68%);
+  --brand-glow: hsl(190 92% 62%);
+  --tangle-gradient: linear-gradient(135deg, hsl(214 90% 63%), hsl(190 92% 62%));
+  --accent-gradient-strong: linear-gradient(135deg, hsl(214 90% 63%), hsl(190 92% 62%));
+}
+
+[data-sandbox-theme="consumer"] {
+  --hsl-background: 222 16% 10%;
+  --hsl-card: 223 18% 13%;
+  --hsl-input: 223 18% 15%;
+  --hsl-primary: 187 75% 48%;
+  --hsl-ring: 187 75% 48%;
+  --brand-cool: hsl(187 75% 54%);
+  --brand-glow: hsl(164 74% 56%);
+  --tangle-gradient: linear-gradient(135deg, hsl(187 75% 48%), hsl(164 74% 56%));
+  --accent-gradient-strong: linear-gradient(135deg, hsl(187 75% 48%), hsl(164 74% 56%));
+}
+
+[data-density="compact"] {
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --control-height: 2.25rem;
+  --panel-padding: 0.75rem;
+}

package/dist/{tool-display-BvsVW_Ur.d.ts → tool-display-Ct9nFAzJ.d.ts}

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
  * Variant-specific rendering instructions for tool output.
  * Maps directly to specialised preview components.
  */
-type DisplayVariant = "command" | "write-file" | "question" | "web-search" | "grep" | "glob" | "default";
+type DisplayVariant = "command" | "write-file" | "read-file" | "diff" | "question" | "web-search" | "grep" | "glob" | "default";
 /**
  * Custom renderer for tool details. Return a ReactNode to override the
  * default ExpandedToolDetail, or null to fall back to the built-in renderer.

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, b as ToolPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
 export { F as FinalTextPart, G as GroupedMessage, M as MessageRun, a as MessageUser, R as Run, b as RunStats, T as ToolCategory } from './run-CtFZ6s-D.js';
 export { S as Session } from './sidecar-CFU2W9j1.js';
-export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-BvsVW_Ur.js';
+export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-Ct9nFAzJ.js';
 export { A as AgentBranding } from './branding-DCi5VEik.js';
 import 'react';