@datalayer/agent-runtimes 0.0.11 → 1.0.0

package/lib/components/chat/components/base/InputPrompt.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Props for the InputPrompt component.
+ */
+export interface InputPromptProps {
+    /** Placeholder text for the textarea */
+    placeholder?: string;
+    /** Whether the input is in a loading/sending state */
+    isLoading?: boolean;
+    /** Callback when a message is submitted */
+    onSend: (message: string) => void;
+    /** Callback when the stop button is clicked */
+    onStop?: () => void;
+    /** Auto-focus the input on mount */
+    autoFocus?: boolean;
+    /** Trigger value change to refocus input */
+    focusTrigger?: number;
+    /** Whether to show a border on top */
+    showBorderTop?: boolean;
+    /** Whether to use subtle background */
+    showBackground?: boolean;
+    /** Custom padding (default: 3) */
+    padding?: number;
+    /** Whether the prompt is disabled */
+    disabled?: boolean;
+    /** Additional sx props for the outer container */
+    sx?: Record<string, unknown>;
+    /** Controlled input value (external state) */
+    value?: string;
+    /** Controlled input onChange (external state) */
+    onChange?: (value: string) => void;
+}
+/**
+ * InputPrompt — A standalone chat input with send button.
+ *
+ * Features:
+ * - Auto-resizing textarea (min 40px, max 120px)
+ * - Enter to send, Shift+Enter for newline
+ * - Send / Stop toggle based on loading state
+ * - Auto-focus support
+ */
+export declare function InputPrompt({ placeholder, isLoading, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, sx, value: controlledValue, onChange: controlledOnChange, }: InputPromptProps): import("react/jsx-runtime").JSX.Element;
+export default InputPrompt;

package/lib/components/chat/components/base/InputPrompt.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * InputPrompt - Standalone input prompt component extracted from ChatBase.
+ *
+ * Provides a textarea with a send/stop button, auto-resize behavior,
+ * and keyboard shortcuts (Enter to send, Shift+Enter for newline).
+ *
+ * Can be used independently of ChatBase for embedding a prompt input
+ * in any context (e.g. landing pages, home screens).
+ *
+ * @module components/chat/components/base/InputPrompt
+ */
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { Textarea, IconButton } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { PaperAirplaneIcon, SquareCircleIcon } from '@primer/octicons-react';
+/**
+ * InputPrompt — A standalone chat input with send button.
+ *
+ * Features:
+ * - Auto-resizing textarea (min 40px, max 120px)
+ * - Enter to send, Shift+Enter for newline
+ * - Send / Stop toggle based on loading state
+ * - Auto-focus support
+ */
+export function InputPrompt({ placeholder = 'Type a message...', isLoading = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, sx, value: controlledValue, onChange: controlledOnChange, }) {
+    // Internal state (used when not controlled)
+    const [internalInput, setInternalInput] = useState('');
+    const input = controlledValue !== undefined ? controlledValue : internalInput;
+    const setInput = controlledOnChange !== undefined ? controlledOnChange : setInternalInput;
+    const inputRef = useRef(null);
+    // Auto-focus on mount
+    useEffect(() => {
+        if (autoFocus && inputRef.current) {
+            const timeoutId = setTimeout(() => {
+                inputRef.current?.focus();
+            }, 100);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [autoFocus]);
+    // Refocus when focusTrigger changes
+    useEffect(() => {
+        if (focusTrigger !== undefined && focusTrigger > 0 && inputRef.current) {
+            const timeoutId = setTimeout(() => {
+                inputRef.current?.focus();
+            }, 150);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [focusTrigger]);
+    // Track previous loading state to detect when loading completes
+    const wasLoadingRef = useRef(false);
+    // Refocus input when loading completes
+    useEffect(() => {
+        if (wasLoadingRef.current && !isLoading && inputRef.current) {
+            const timeoutId = setTimeout(() => {
+                inputRef.current?.focus();
+            }, 50);
+            return () => clearTimeout(timeoutId);
+        }
+        wasLoadingRef.current = isLoading;
+    }, [isLoading]);
+    // Auto-resize textarea based on content
+    const adjustTextareaHeight = useCallback(() => {
+        const textarea = inputRef.current;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            const maxHeight = 120;
+            const minHeight = 40;
+            const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+            textarea.style.height = `${newHeight}px`;
+            textarea.style.overflowY =
+                textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
+        }
+    }, []);
+    // Adjust textarea height when input changes
+    useEffect(() => {
+        adjustTextareaHeight();
+    }, [input, adjustTextareaHeight]);
+    // Ensure textarea has a minimum height on mount
+    useEffect(() => {
+        const timer = setTimeout(adjustTextareaHeight, 0);
+        return () => clearTimeout(timer);
+    }, [adjustTextareaHeight]);
+    // Send handler
+    const handleSend = useCallback(() => {
+        if (!input.trim() || isLoading || disabled)
+            return;
+        const message = input.trim();
+        // Only clear input if not controlled externally
+        if (controlledValue === undefined) {
+            setInput('');
+        }
+        onSend(message);
+    }, [input, isLoading, disabled, onSend, setInput, controlledValue]);
+    // Stop handler
+    const handleStop = useCallback(() => {
+        onStop?.();
+    }, [onStop]);
+    // Keyboard handler
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    }, [handleSend]);
+    return (_jsx(Box, { sx: sx, children: _jsx(Box, { sx: {
+                p: padding,
+                ...(showBorderTop && {
+                    borderTop: '1px solid',
+                    borderColor: 'border.default',
+                }),
+                ...(showBackground && {
+                    bg: 'canvas.subtle',
+                }),
+            }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-end' }, children: [_jsx(Textarea, { ref: inputRef, value: input, onChange: e => {
+                            setInput(e.target.value);
+                        }, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isLoading || disabled, sx: {
+                            flex: 1,
+                            resize: 'none',
+                            minHeight: '40px',
+                            maxHeight: '120px',
+                            overflow: 'hidden',
+                            transition: 'height 0.1s ease-out',
+                            py: '2px',
+                        }, rows: 1 }), isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: handleStop, sx: { alignSelf: 'flex-end' } })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: handleSend, disabled: !input.trim() || disabled, sx: { alignSelf: 'flex-end' } }))] }) }) }));
+}
+export default InputPrompt;

package/lib/components/chat/components/index.d.ts

@@ -4,10 +4,10 @@
  * @module components/chat/components
  */
 export { ChatMessages, type ChatMessagesProps } from './elements/ChatMessages';
-export { ChatInputPrompt, type ChatInputPromptProps, } from './elements/ChatInputPrompt';
 export { ChatSidebar, type ChatSidebarProps } from './ChatSidebar';
 export { ChatStandalone, type ChatStandaloneProps, type MessageHandler, } from './ChatStandalone';
-export { ChatBase, type ChatBaseProps, type ProtocolConfig, type AgentRuntimeConfig, type AvatarConfig, type EmptyStateConfig, type HeaderButtonsConfig, type StreamingMessageOptions, } from './base/ChatBase';
+export { ChatBase, type ChatBaseProps, type ProtocolConfig, type AgentRuntimeConfig, type AvatarConfig, type EmptyStateConfig, type HeaderButtonsConfig, type StreamingMessageOptions, type ChatViewMode, } from './base/ChatBase';
+export { InputPrompt, type InputPromptProps } from './base/InputPrompt';
 export { AgentDetails, type AgentDetailsProps } from './AgentDetails';
 export { AgentIdentity, IdentityCard, getTokenStatus, formatDuration, formatExpirationStatus, type AgentIdentityProps, type IdentityCardProps, type TokenStatus, } from './AgentIdentity';
 export { ContextUsage, type ContextUsageProps, type ContextDetailsResponse, } from './ContextUsage';
@@ -22,5 +22,5 @@ export { MessagePart, type MessagePartProps } from './elements/MessagePart';
 export { TextPart, type TextPartProps, ReasoningPart, type ReasoningPartProps, ToolPart, type ToolPartProps, DynamicToolPart, type DynamicToolPartProps, } from './parts';
 export { ToolCallDisplay, type ToolCallDisplayProps } from './display';
 export { Chat, type ChatProps, type Transport, type Extension } from './Chat';
-export { ChatFloating, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool, } from './ChatFloating';
+export { ChatFloating, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool, type ChatViewMode as ChatFloatingViewMode, } from './ChatFloating';
 export { ChatInline, type ChatInlineProps, type ChatInlineProtocolConfig, } from './ChatInline';

package/lib/components/chat/components/index.js

@@ -8,10 +8,10 @@
  * @module components/chat/components
  */
 export { ChatMessages } from './elements/ChatMessages';
-export { ChatInputPrompt, } from './elements/ChatInputPrompt';
 export { ChatSidebar } from './ChatSidebar';
 export { ChatStandalone, } from './ChatStandalone';
 export { ChatBase, } from './base/ChatBase';
+export { InputPrompt } from './base/InputPrompt';
 export { AgentDetails } from './AgentDetails';
 export { AgentIdentity, IdentityCard, getTokenStatus, formatDuration, formatExpirationStatus, } from './AgentIdentity';
 export { ContextUsage, } from './ContextUsage';

package/lib/components/chat/components/parts/ReasoningPart.js

@@ -14,6 +14,7 @@ import { Text, Button } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ChevronDownIcon } from '@primer/octicons-react';
 import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles } from '../styles/streamdownStyles';
 /**
  * ReasoningPart component for displaying AI reasoning/thinking.
  *
@@ -59,11 +60,8 @@ export function ReasoningPart({ text, isStreaming }) {
                     borderRadius: 2,
                     border: '1px solid',
                     borderColor: 'border.default',
-                    fontSize: 1,
-                    lineHeight: 1.6,
                     color: 'fg.muted',
-                    '& > *:first-child': { marginTop: 0 },
-                    '& > *:last-child': { marginBottom: 0 },
+                    ...streamdownMarkdownStyles,
                 }, children: _jsx(Streamdown, { children: text }) }))] }));
 }
 export default ReasoningPart;

package/lib/components/chat/components/parts/TextPart.js

@@ -3,6 +3,7 @@ import { Text, IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { CopyIcon, SyncIcon } from '@primer/octicons-react';
 import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles } from '../styles/streamdownStyles';
 /**
  * TextPart component for rendering text content with markdown support.
  *
@@ -33,75 +34,6 @@ export function TextPart({ text, message, isLastPart, onRegenerate, }) {
                             fontSize: 1,
                             color: 'fg.muted',
                             textTransform: 'uppercase',
-                        }, children: message.role === 'user' ? 'You' : 'Assistant' }), message.role === 'assistant' && isLastPart && (_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(IconButton, { icon: SyncIcon, "aria-label": "Regenerate", size: "small", variant: "invisible", onClick: () => onRegenerate(message.id) }), _jsx(IconButton, { icon: CopyIcon, "aria-label": "Copy", size: "small", variant: "invisible", onClick: () => copy(text) })] }))] }), _jsx(Box, { sx: {
-                    fontSize: 1,
-                    lineHeight: 1.6,
-                    '& > *:first-child': { marginTop: 0 },
-                    '& > *:last-child': { marginBottom: 0 },
-                    '& p': { marginTop: 0, marginBottom: '1em' },
-                    '& h1, & h2, & h3, & h4, & h5, & h6': {
-                        marginTop: '1em',
-                        marginBottom: '0.5em',
-                        fontWeight: 'bold',
-                    },
-                    '& ul, & ol': {
-                        marginTop: '0.5em',
-                        marginBottom: '0.5em',
-                        paddingLeft: '1.2em',
-                        marginLeft: '0.3em',
-                    },
-                    '& li': {
-                        listStylePosition: 'inside',
-                    },
-                    '& code': {
-                        backgroundColor: 'neutral.muted',
-                        padding: '2px 4px',
-                        borderRadius: 1,
-                        fontSize: '0.9em',
-                        fontFamily: 'mono',
-                    },
-                    '& pre': {
-                        backgroundColor: 'canvas.inset',
-                        padding: 3,
-                        borderRadius: 2,
-                        overflow: 'auto',
-                        marginTop: '1em',
-                        marginBottom: '1em',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                    },
-                    '& pre code': {
-                        backgroundColor: 'transparent',
-                        padding: 0,
-                        fontSize: '0.875em',
-                    },
-                    '& blockquote': {
-                        borderLeft: '3px solid',
-                        borderColor: 'border.default',
-                        paddingLeft: 3,
-                        marginLeft: 0,
-                        color: 'fg.muted',
-                    },
-                    '& a': {
-                        color: 'accent.fg',
-                        textDecoration: 'underline',
-                    },
-                    '& table': {
-                        width: '100%',
-                        borderCollapse: 'collapse',
-                        marginTop: '1em',
-                        marginBottom: '1em',
-                    },
-                    '& th, & td': {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        padding: 2,
-                        textAlign: 'left',
-                    },
-                    '& th': {
-                        backgroundColor: 'canvas.subtle',
-                        fontWeight: 'bold',
-                    },
-                }, children: _jsx(Streamdown, { children: text }) })] }));
+                        }, children: message.role === 'user' ? 'You' : 'Assistant' }), message.role === 'assistant' && isLastPart && (_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(IconButton, { icon: SyncIcon, "aria-label": "Regenerate", size: "small", variant: "invisible", onClick: () => onRegenerate(message.id) }), _jsx(IconButton, { icon: CopyIcon, "aria-label": "Copy", size: "small", variant: "invisible", onClick: () => copy(text) })] }))] }), _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: text }) })] }));
 }
 export default TextPart;

package/lib/components/chat/components/styles/streamdownStyles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared CSS-in-js styles for Streamdown markdown rendering.
+ *
+ * Streamdown outputs HTML with Tailwind CSS classes (flex, gap-1, p-1, etc.).
+ * Since we don't load Tailwind CSS, we provide equivalent styles via
+ * Primer's sx prop targeting the Tailwind class names.
+ *
+ * @module components/chat/components/styles/streamdownStyles
+ */
+/** Style object compatible with Primer's sx prop */
+type SxStyles = Record<string, unknown>;
+/**
+ * Markdown element styles for Streamdown content.
+ * Provides proper formatting for headings, lists, tables, code, etc.
+ * Uses Primer theme tokens for colors and spacing.
+ */
+export declare const streamdownMarkdownStyles: SxStyles;
+/**
+ * Code block specific styles for Streamdown's data-streamdown attributes.
+ * These target Streamdown's code block structure.
+ */
+export declare const streamdownCodeBlockStyles: SxStyles;
+export {};

package/lib/components/chat/components/styles/streamdownStyles.js

@@ -0,0 +1,319 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Tailwind utility class equivalents for Streamdown output.
+ * Maps Tailwind class names to CSS properties.
+ */
+const tailwindUtilities = {
+    // ── Display / Flexbox ──
+    '& .flex': { display: 'flex' },
+    '& .inline-block': { display: 'inline-block' },
+    '& .block': { display: 'block' },
+    '& .hidden': { display: 'none' },
+    '& .flex-col': { flexDirection: 'column' },
+    '& .items-center': { alignItems: 'center' },
+    '& .items-start': { alignItems: 'flex-start' },
+    '& .justify-center': { justifyContent: 'center' },
+    '& .justify-end': { justifyContent: 'flex-end' },
+    '& .justify-between': { justifyContent: 'space-between' },
+    '& .flex-shrink-0': { flexShrink: 0 },
+    // ── Gap / Spacing ──
+    '& .gap-1': { gap: '0.25rem' },
+    '& .gap-2': { gap: '0.5rem' },
+    '& .space-x-2 > * + *': { marginLeft: '0.5rem' },
+    '& .space-y-2 > * + *': { marginTop: '0.5rem' },
+    '& .space-y-4 > * + *': { marginTop: '1rem' },
+    // ── Padding ──
+    '& .p-1': { padding: '0.25rem' },
+    '& .p-2': { padding: '0.5rem' },
+    '& .p-4': { padding: '1rem' },
+    '& .px-1': { paddingLeft: '0.25rem', paddingRight: '0.25rem' },
+    '& .px-1\\.5': { paddingLeft: '0.375rem', paddingRight: '0.375rem' },
+    '& .px-4': { paddingLeft: '1rem', paddingRight: '1rem' },
+    '& .py-0\\.5': { paddingTop: '0.125rem', paddingBottom: '0.125rem' },
+    '& .py-1': { paddingTop: '0.25rem', paddingBottom: '0.25rem' },
+    '& .py-2': { paddingTop: '0.5rem', paddingBottom: '0.5rem' },
+    '& .pl-4': { paddingLeft: '1rem' },
+    '& .\\!p-0': { padding: '0 !important' },
+    '& .p-1\\.5': { padding: '0.375rem' },
+    // ── Margin ──
+    '& .mt-1': { marginTop: '0.25rem' },
+    '& .mt-2': { marginTop: '0.5rem' },
+    '& .mt-6': { marginTop: '1.5rem' },
+    '& .mb-2': { marginBottom: '0.5rem' },
+    '& .my-4': { marginTop: '1rem', marginBottom: '1rem' },
+    '& .my-6': { marginTop: '1.5rem', marginBottom: '1.5rem' },
+    '& .mr-2': { marginRight: '0.5rem' },
+    // ── Sizing ──
+    '& .w-full': { width: '100%' },
+    '& .h-full': { height: '100%' },
+    '& .h-4': { height: '1rem' },
+    '& .w-4': { width: '1rem' },
+    '& .h-8': { height: '2rem' },
+    '& .w-8': { width: '2rem' },
+    '& .size-4': { width: '1rem', height: '1rem' },
+    '& .max-w-full': { maxWidth: '100%' },
+    '& .min-w-\\[120px\\]': { minWidth: '120px' },
+    // ── Typography ──
+    '& .text-sm': { fontSize: '0.875rem', lineHeight: '1.25rem' },
+    '& .text-xs': { fontSize: '0.75rem', lineHeight: '1rem' },
+    '& .text-base': { fontSize: '1rem', lineHeight: '1.5rem' },
+    '& .text-lg': { fontSize: '1.125rem', lineHeight: '1.75rem' },
+    '& .text-xl': { fontSize: '1.25rem', lineHeight: '1.75rem' },
+    '& .text-2xl': { fontSize: '1.5rem', lineHeight: '2rem' },
+    '& .text-3xl': { fontSize: '1.875rem', lineHeight: '2.25rem' },
+    '& .font-semibold': { fontWeight: 600 },
+    '& .font-mono': {
+        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    },
+    '& .italic': { fontStyle: 'italic' },
+    '& .whitespace-normal': { whiteSpace: 'normal' },
+    '& .whitespace-pre-wrap': { whiteSpace: 'pre-wrap' },
+    // ── Colors (mapped to Primer theme tokens) ──
+    '& .text-muted-foreground': { color: 'fg.muted' },
+    '& .text-foreground': { color: 'fg.default' },
+    '& .text-red-600': { color: '#dc2626' },
+    '& .text-red-700': { color: '#b91c1c' },
+    '& .text-red-800': { color: '#991b1b' },
+    '& .bg-muted': { backgroundColor: 'neutral.muted' },
+    '& .bg-red-50': { backgroundColor: '#fef2f2' },
+    '& .bg-red-100': { backgroundColor: '#fee2e2' },
+    '& .bg-background': { backgroundColor: 'canvas.default' },
+    // ── Background opacity variants ──
+    '& .bg-muted\\/80': { backgroundColor: 'neutral.muted' },
+    '& .bg-muted\\/40': { backgroundColor: 'neutral.muted' },
+    '& .bg-background\\/90': { backgroundColor: 'canvas.default' },
+    '& .bg-background\\/95': { backgroundColor: 'canvas.default' },
+    '& .bg-black\\/10': { backgroundColor: 'rgba(0,0,0,0.1)' },
+    // ── Borders ──
+    '& .border': { border: '1px solid', borderColor: 'border.default' },
+    '& .border-border': { borderColor: 'border.default' },
+    '& .border-b': {
+        borderBottom: '1px solid',
+        borderBottomColor: 'border.default',
+    },
+    '& .border-t': { borderTop: '1px solid', borderTopColor: 'border.default' },
+    '& .border-l-4': {
+        borderLeft: '4px solid',
+        borderLeftColor: 'border.default',
+    },
+    '& .border-red-200': { borderColor: '#fecaca' },
+    '& .divide-y > * + *': {
+        borderTop: '1px solid',
+        borderTopColor: 'border.default',
+    },
+    '& .divide-border > * + *': { borderColor: 'border.default' },
+    // ── Border radius ──
+    '& .rounded': { borderRadius: '0.25rem' },
+    '& .rounded-md': { borderRadius: '0.375rem' },
+    '& .rounded-lg': { borderRadius: '0.5rem' },
+    '& .rounded-xl': { borderRadius: '0.75rem' },
+    '& .rounded-full': { borderRadius: '9999px' },
+    // ── Overflow ──
+    '& .overflow-hidden': { overflow: 'hidden' },
+    '& .overflow-x-auto': { overflowX: 'auto' },
+    '& .overflow-auto': { overflow: 'auto' },
+    // ── List styles ──
+    '& .list-disc': { listStyleType: 'disc' },
+    '& .list-decimal': { listStyleType: 'decimal' },
+    '& .list-inside': { listStylePosition: 'inside' },
+    // ── Cursor ──
+    '& .cursor-pointer': { cursor: 'pointer' },
+    // ── Position ──
+    '& .relative': { position: 'relative' },
+    '& .absolute': { position: 'absolute' },
+    '& .fixed': { position: 'fixed' },
+    '& .inset-0': { top: 0, right: 0, bottom: 0, left: 0 },
+    '& .top-4': { top: '1rem' },
+    '& .right-0': { right: 0 },
+    '& .right-2': { right: '0.5rem' },
+    '& .right-4': { right: '1rem' },
+    '& .bottom-2': { bottom: '0.5rem' },
+    '& .z-10': { zIndex: 10 },
+    '& .z-50': { zIndex: 50 },
+    // ── Shadow ──
+    '& .shadow-sm': { boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)' },
+    '& .shadow-lg': {
+        boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+    },
+    // ── Transitions ──
+    '& .transition-all': { transition: 'all 150ms ease' },
+    '& .transition-colors': {
+        transition: 'color 150ms ease, background-color 150ms ease, border-color 150ms ease',
+    },
+    '& .transition-transform': { transition: 'transform 150ms ease' },
+    '& .duration-150': { transitionDuration: '150ms' },
+    '& .duration-200': { transitionDuration: '200ms' },
+    '& .ease-out': { transitionTimingFunction: 'ease-out' },
+    // ── Opacity ──
+    '& .opacity-50': { opacity: 0.5 },
+    // ── Animation ──
+    '& .animate-spin': {
+        animation: 'spin 1s linear infinite',
+    },
+    // ── Hover states ──
+    '& .hover\\:text-foreground:hover': { color: 'fg.default' },
+    '& .hover\\:bg-muted:hover': { backgroundColor: 'neutral.muted' },
+    '& .hover\\:bg-background:hover': { backgroundColor: 'canvas.default' },
+    '& .hover\\:block:hover': { display: 'block' },
+    '& .group:hover .group-hover\\:block': { display: 'block' },
+    // ── Disabled ──
+    '& .disabled\\:cursor-not-allowed:disabled': { cursor: 'not-allowed' },
+    '& .disabled\\:opacity-50:disabled': { opacity: 0.5 },
+    // ── Backdrop ──
+    '& .backdrop-blur-sm': { backdropFilter: 'blur(4px)' },
+    // ── Misc ──
+    '& .pointer-events-none': { pointerEvents: 'none' },
+    '& .origin-center': { transformOrigin: 'center' },
+};
+/**
+ * Markdown element styles for Streamdown content.
+ * Provides proper formatting for headings, lists, tables, code, etc.
+ * Uses Primer theme tokens for colors and spacing.
+ */
+export const streamdownMarkdownStyles = {
+    fontSize: 1,
+    lineHeight: 1.5,
+    '& > *:first-child': { marginTop: 0 },
+    '& > *:last-child': { marginBottom: 0 },
+    '& p': { marginTop: 0, marginBottom: '0.75em' },
+    '& h1, & h2, & h3, & h4, & h5, & h6': {
+        marginTop: '1em',
+        marginBottom: '0.5em',
+        fontWeight: 'bold',
+    },
+    '& h1': { fontSize: '1.5em' },
+    '& h2': { fontSize: '1.3em' },
+    '& h3': { fontSize: '1.15em' },
+    '& ul, & ol': {
+        marginTop: '0.5em',
+        marginBottom: '0.5em',
+        paddingInlineStart: '1.25em',
+    },
+    '& li': {
+        paddingInlineStart: '0.25em',
+        marginBottom: '0.25em',
+    },
+    '& code': {
+        backgroundColor: 'neutral.muted',
+        padding: '2px 4px',
+        borderRadius: '4px',
+        fontSize: '0.9em',
+        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    },
+    '& pre code': {
+        backgroundColor: 'transparent',
+        padding: 0,
+    },
+    '& blockquote': {
+        borderLeft: '3px solid',
+        borderColor: 'border.default',
+        paddingLeft: '12px',
+        marginLeft: 0,
+        marginRight: 0,
+        color: 'fg.muted',
+    },
+    '& a': {
+        color: 'accent.fg',
+        textDecoration: 'underline',
+    },
+    '& table': {
+        width: '100%',
+        borderCollapse: 'collapse',
+        marginTop: '0.75em',
+        marginBottom: '0.75em',
+        fontSize: '0.9em',
+    },
+    '& th, & td': {
+        border: '1px solid',
+        borderColor: 'border.default',
+        padding: '6px 12px',
+        textAlign: 'left',
+    },
+    '& th': {
+        backgroundColor: 'canvas.inset',
+        fontWeight: 'bold',
+    },
+    '& tr:nth-of-type(even)': {
+        backgroundColor: 'canvas.inset',
+    },
+    '& img': {
+        maxWidth: '100%',
+        borderRadius: '8px',
+    },
+    '& hr': {
+        border: 'none',
+        borderTop: '1px solid',
+        borderColor: 'border.default',
+        marginTop: '1em',
+        marginBottom: '1em',
+    },
+    // Include Tailwind utilities for Streamdown output
+    ...tailwindUtilities,
+};
+/**
+ * Code block specific styles for Streamdown's data-streamdown attributes.
+ * These target Streamdown's code block structure.
+ */
+export const streamdownCodeBlockStyles = {
+    '& [data-streamdown="code-block"]': {
+        borderRadius: '8px',
+        border: '1px solid',
+        borderColor: 'border.default',
+        overflow: 'hidden',
+        my: 2,
+    },
+    '& [data-streamdown="code-block-header"]': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: 'canvas.subtle',
+        padding: '8px 12px',
+        fontSize: '12px',
+        color: 'fg.muted',
+    },
+    '& [data-streamdown="code-block-header"] button': {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '4px',
+        color: 'fg.muted',
+        borderRadius: '4px',
+        '&:hover': {
+            backgroundColor: 'neutral.muted',
+            color: 'fg.default',
+        },
+    },
+    '& [data-streamdown="code-block-body"]': {
+        backgroundColor: 'canvas.subtle',
+        padding: '12px',
+        margin: 0,
+        overflow: 'auto',
+        fontSize: '13px',
+        lineHeight: 1.5,
+    },
+    '& [data-streamdown="code-block-body"] code': {
+        display: 'block',
+        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    },
+    '& [data-streamdown="code-block-body"] code > span.block': {
+        display: 'block',
+    },
+    '& [data-streamdown="code-block-body"] code > span': {
+        display: 'block',
+    },
+    '& pre': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        overflowX: 'auto',
+        margin: 0,
+    },
+    '& pre code': {
+        whiteSpace: 'pre-wrap',
+    },
+    '& code': {
+        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    },
+};