@tangle-network/ui 11.20.0 → 11.22.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.22.0
+
+### Minor Changes
+
+- 17162d7: Metric accepts an optional decorative `icon` before its label. EmptyState accepts `titleAs` (h2, h3 or h4) so the title follows the page outline. CopyButton is a `type="button"` with an `aria-label` and a polite status announcement when the copy succeeds, and its check icon uses the success text token. The CodeBlock header label renders at `text-xs` (12px) instead of one pixel below it.
+
+## 11.21.0
+
+### Minor Changes
+
+- a69c72f: Add `Pagination` (zero-based `page`, `pageCount`, `onPageChange`; a constant number of page slots with first and last always reachable) and `Alert` with `AlertTitle` and `AlertDescription` (Brand status tones plus `neutral`). `SegmentedControl` options take `testId`, and the group takes `data-testid`.
+
 ## 11.20.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -76,6 +76,8 @@ import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
+import { Pagination, PaginationProps } from "./primitives/pagination.js";
 import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
@@ -112,4 +114,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
 import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
 import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
 import "./redaction.js";
-export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -39,6 +39,8 @@ import { InlineCode } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { PageHeader } from "./primitives/page-header.js";
+import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
+import { Pagination } from "./primitives/pagination.js";
 import { StatusPill } from "./primitives/status-pill.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
@@ -96,4 +98,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { RedactedDocument } from "./redaction/redacted-document.js";
-export { AgentTimeline, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/markdown/code-block.js

@@ -1,7 +1,7 @@
 import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
 //#region src/markdown/code-block.tsx
 const syntaxTheme = (() => {
@@ -107,7 +107,7 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 			headerLabel && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between border-b border-border px-3 py-1 bg-[var(--code-header-bg,hsl(var(--background)))]",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest text-muted-foreground",
+					className: "text-xs font-mono font-medium uppercase tracking-widest text-muted-foreground",
 					children: headerLabel
 				}), children]
 			}),
@@ -150,6 +150,7 @@ CodeBlock.displayName = "CodeBlock";
 /** Copy-to-clipboard button for use inside CodeBlock. */
 const CopyButton = memo(({ text }) => {
 	const [copied, setCopied] = useState(false);
+	const [status, setStatus] = useState("");
 	const timerRef = useRef(null);
 	useEffect(() => {
 		return () => {
@@ -157,21 +158,42 @@ const CopyButton = memo(({ text }) => {
 		};
 	}, []);
 	const handleCopy = useCallback(async () => {
+		setStatus("");
+		if (timerRef.current) clearTimeout(timerRef.current);
 		try {
 			await navigator.clipboard.writeText(text);
 			setCopied(true);
-			if (timerRef.current) clearTimeout(timerRef.current);
-			timerRef.current = setTimeout(() => setCopied(false), 2e3);
+			setStatus("Copied to clipboard");
 		} catch (err) {
 			console.warn("Clipboard write failed:", err);
+			setCopied(false);
+			setStatus("Copy failed");
 		}
+		timerRef.current = setTimeout(() => {
+			setCopied(false);
+			setStatus("");
+		}, 2e3);
 	}, [text]);
-	return /* @__PURE__ */ jsx("button", {
+	const label = copied ? "Copied" : "Copy to clipboard";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
 		onClick: handleCopy,
 		className: cn("flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors", focusRing),
-		title: "Copy to clipboard",
-		children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-muted-foreground" })
-	});
+		"aria-label": label,
+		title: label,
+		children: copied ? /* @__PURE__ */ jsx(Check, {
+			"aria-hidden": "true",
+			className: "w-3.5 h-3.5 text-[var(--surface-success-text)]"
+		}) : /* @__PURE__ */ jsx(Copy, {
+			"aria-hidden": "true",
+			className: "w-3.5 h-3.5 text-muted-foreground"
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		role: "status",
+		"aria-live": "polite",
+		children: status
+	})] });
 });
 CopyButton.displayName = "CopyButton";
 //#endregion

package/dist/primitives/alert.d.ts

@@ -0,0 +1,35 @@
+import { StatusTone } from "./status-pill.js";
+import * as React from "react";
+//#region src/primitives/alert.d.ts
+/**
+ * An inline message that stays on the page: a policy note above a form, a
+ * failed save beside the field it concerns. For a message that interrupts, use
+ * `AlertDialog`; for one that goes away by itself, use a toast.
+ *
+ * Each tone paints its fill, border and text from Brand's matched status
+ * triple, the same one `StatusPill` uses, so the text is solved against its
+ * own background on every plane. `neutral` is a card with body text.
+ *
+ * `danger` and `warning` announce themselves (`role="alert"`); the quieter
+ * tones are `role="status"` so a screen reader is not interrupted by a note.
+ */
+export type AlertTone = Exclude<StatusTone, "running">;
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  tone?: AlertTone;
+  /** A leading icon. It takes the tone's colour and sits beside the title. */
+  icon?: React.ReactNode;
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export declare function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+export declare namespace AlertTitle {
+  var displayName: string;
+}
+/**
+ * Body text. Under a toned alert it keeps the tone's ink, which is the colour
+ * tested against the tone's fill; under `neutral` it is the muted tier.
+ */
+export declare function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace AlertDescription {
+  var displayName: string;
+}
+//#endregion

package/dist/primitives/alert.js

@@ -0,0 +1,47 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/alert.tsx
+const TONE = {
+	neutral: "border-border bg-card text-card-foreground",
+	info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
+	success: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+	warning: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+	danger: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
+};
+const Alert = React.forwardRef(({ tone = "neutral", icon, className, children, role, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	ref,
+	role: role ?? (tone === "danger" || tone === "warning" ? "alert" : "status"),
+	"data-tone": tone,
+	className: cn("flex w-full min-w-0 gap-3 rounded-lg border px-4 py-3 text-sm", TONE[tone], className),
+	...props,
+	children: [icon ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "mt-0.5 flex shrink-0 [&_svg]:size-4",
+		children: icon
+	}) : null, /* @__PURE__ */ jsx("div", {
+		className: "grid min-w-0 flex-1 gap-1",
+		children
+	})]
+}));
+Alert.displayName = "Alert";
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("font-medium leading-snug [overflow-wrap:anywhere]", className),
+		...props
+	});
+}
+AlertTitle.displayName = "AlertTitle";
+/**
+* Body text. Under a toned alert it keeps the tone's ink, which is the colour
+* tested against the tone's fill; under `neutral` it is the muted tier.
+*/
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("leading-relaxed [overflow-wrap:anywhere] [[data-tone=neutral]_&]:text-muted-foreground", className),
+		...props
+	});
+}
+AlertDescription.displayName = "AlertDescription";
+//#endregion
+export { Alert, AlertDescription, AlertTitle };

package/dist/primitives/empty-state.d.ts

@@ -5,6 +5,9 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   description?: string;
   action?: React.ReactNode;
+  /** Heading element for the title. Pick the level that follows the page's
+   * outline, e.g. h2 directly under a page h1. Defaults to h3. */
+  titleAs?: "h2" | "h3" | "h4";
 }
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/primitives/empty-state.js

@@ -2,7 +2,7 @@ import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/empty-state.tsx
-const EmptyState = React.forwardRef(({ className, icon, title, description, action, ...props }, ref) => {
+const EmptyState = React.forwardRef(({ className, icon, title, description, action, titleAs: Title = "h3", ...props }, ref) => {
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cn("flex flex-col items-center justify-center px-4 py-16 text-center", className),
@@ -12,7 +12,7 @@ const EmptyState = React.forwardRef(({ className, icon, title, description, acti
 				className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground",
 				children: icon
 			}),
-			/* @__PURE__ */ jsx("h3", {
+			/* @__PURE__ */ jsx(Title, {
 				className: "font-semibold text-lg",
 				children: title
 			}),

package/dist/primitives/metric-strip.d.ts

@@ -19,6 +19,9 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     tone: StatusTone;
     label: string;
   };
+  /** Decorative glyph before the label; the label carries the meaning. A
+   * direct svg child is sized to 16px; wrap other content to size it yourself. */
+  icon?: React.ReactNode;
 }
 /** A described term; the strip, not this item, decides where separators belong. */
 declare const Metric: React.ForwardRefExoticComponent<MetricProps & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/metric-strip.js

@@ -17,20 +17,28 @@ const MetricStrip = React.forwardRef(({ className, children, columns = 4, ...pro
 }));
 MetricStrip.displayName = "MetricStrip";
 /** A described term; the strip, not this item, decides where separators belong. */
-const Metric = React.forwardRef(({ className, label, value, hint, attention, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const Metric = React.forwardRef(({ className, label, value, hint, attention, icon, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	ref,
 	className: cn("min-w-0 border-border p-4 sm:p-5", className),
 	...props,
 	children: [
 		/* @__PURE__ */ jsxs("dt", {
 			className: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
-				children: label
-			}), attention && /* @__PURE__ */ jsx(StatusPill, {
-				tone: attention.tone,
-				children: attention.label
-			})]
+			children: [
+				icon != null && icon !== false && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "inline-flex shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4",
+					children: icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+					children: label
+				}),
+				attention && /* @__PURE__ */ jsx(StatusPill, {
+					tone: attention.tone,
+					children: attention.label
+				})
+			]
 		}),
 		/* @__PURE__ */ jsx("dd", {
 			className: cn("mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),

package/dist/primitives/pagination.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+//#region src/primitives/pagination.d.ts
+/**
+ * Page controls for a paged list or table: previous, the page numbers around
+ * the current one with the first and last always reachable, and next.
+ *
+ * Pages are zero-based in the API and one-based on screen. With one page or
+ * none there is nothing to choose, so it renders nothing.
+ */
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange" | "children"> {
+  /** The current page, zero-based. */
+  page: number;
+  pageCount: number;
+  onPageChange: (page: number) => void;
+  /** Pages shown on each side of the current one before an ellipsis. */
+  siblings?: number;
+}
+export declare function Pagination({ page, pageCount, onPageChange, siblings, className, "aria-label": ariaLabel, ...rest }: PaginationProps): React.JSX.Element | null;
+//#endregion

package/dist/primitives/pagination.js

@@ -0,0 +1,81 @@
+import { cn } from "../lib/utils.js";
+import { buttonVariants } from "./button.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/primitives/pagination.tsx
+/**
+* The visible slots for `page` of `pageCount`. The number of slots stays the
+* same as the current page moves, so the controls do not shift under the
+* pointer while a person clicks through.
+*/
+function pageSlots(page, pageCount, siblings = 1) {
+	const last = pageCount - 1;
+	if (pageCount <= siblings * 2 + 5) return Array.from({ length: pageCount }, (_, i) => i);
+	const current = Math.min(Math.max(page, 0), last);
+	const start = Math.max(Math.min(current - siblings, last - siblings * 2 - 2), 2);
+	const end = Math.min(Math.max(current + siblings, siblings * 2 + 2), last - 2);
+	const slots = [0, start > 2 ? "gap-start" : 1];
+	for (let i = start; i <= end; i++) slots.push(i);
+	slots.push(end < last - 2 ? "gap-end" : last - 1, last);
+	return slots;
+}
+const pageButton = cn(buttonVariants({
+	variant: "ghost",
+	size: "sm"
+}), "min-w-8 px-2 tabular-nums");
+function Pagination({ page, pageCount, onPageChange, siblings = 1, className, "aria-label": ariaLabel = "Pagination", ...rest }) {
+	if (pageCount <= 1) return null;
+	const last = pageCount - 1;
+	const current = Math.min(Math.max(page, 0), last);
+	const go = (next) => {
+		const target = Math.min(Math.max(next, 0), last);
+		if (target !== current) onPageChange(target);
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: cn("flex items-center", className),
+		...rest,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: "flex flex-wrap items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": "Previous page",
+					disabled: current === 0,
+					onClick: () => go(current - 1),
+					className: cn(pageButton, "gap-1 pl-1.5"),
+					children: [/* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+						className: "hidden sm:inline",
+						children: "Previous"
+					})]
+				}) }),
+				pageSlots(current, pageCount, siblings).map((slot) => typeof slot === "number" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Page ${slot + 1}`,
+					"aria-current": slot === current ? "page" : void 0,
+					onClick: () => go(slot),
+					className: cn(pageButton, slot === current && "border-border bg-card font-semibold text-foreground hover:bg-card"),
+					children: slot + 1
+				}) }, slot) : /* @__PURE__ */ jsx("li", {
+					"aria-hidden": "true",
+					className: "flex min-w-8 justify-center text-sm text-muted-foreground",
+					children: "…"
+				}, slot)),
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": "Next page",
+					disabled: current === last,
+					onClick: () => go(current + 1),
+					className: cn(pageButton, "gap-1 pr-1.5"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "hidden sm:inline",
+						children: "Next"
+					}), /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })]
+				}) })
+			]
+		})
+	});
+}
+//#endregion
+export { Pagination, pageSlots };

package/dist/primitives/segmented-control.d.ts

@@ -23,6 +23,8 @@ export interface SegmentedControlOption<T extends string = string> {
   label: React.ReactNode;
   /** Rendered right of the label, typically a count or status pill. */
   adornment?: React.ReactNode;
+  /** Rendered as the option button's `data-testid`, for end-to-end selectors. */
+  testId?: string;
 }
 export interface SegmentedControlProps<T extends string = string> extends Pick<React.HTMLAttributes<HTMLDivElement>, "id" | "className" | "aria-label" | "aria-labelledby"> {
   value: T;
@@ -35,6 +37,8 @@ export interface SegmentedControlProps<T extends string = string> extends Pick<R
    *              reads as a classic tab (used on the Team page)
    */
   variant?: "row" | "tabs";
+  /** Rendered as the group's `data-testid`. */
+  "data-testid"?: string;
 }
 export declare function SegmentedControl<T extends string = string>({ value, onValueChange, options, variant, className, ...rest }: SegmentedControlProps<T>): React.JSX.Element;
 //#endregion

package/dist/primitives/segmented-control.js

@@ -28,10 +28,12 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		id: rest.id,
 		"aria-label": rest["aria-label"],
 		"aria-labelledby": rest["aria-labelledby"],
+		"data-testid": rest["data-testid"],
 		onKeyDown: handleKeyDown,
 		className: cn("flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
 		children: options.map((option, i) => {
 			const active = option.value === value;
+			const focusable = active || !hasMatch && i === 0;
 			return /* @__PURE__ */ jsxs("button", {
 				ref: (el) => {
 					if (el) optionRefs.current.set(option.value, el);
@@ -40,7 +42,8 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 				type: "button",
 				role: "radio",
 				"aria-checked": active,
-				tabIndex: active || !hasMatch && i === 0 ? 0 : -1,
+				"data-testid": option.testId,
+				tabIndex: focusable ? 0 : -1,
 				onClick: () => {
 					if (!active) onValueChange(option.value);
 				},

package/dist/primitives.d.ts

@@ -38,6 +38,8 @@ import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
+import { Pagination, PaginationProps } from "./primitives/pagination.js";
 import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
@@ -45,4 +47,4 @@ import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -37,6 +37,8 @@ import { InlineCode } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { PageHeader } from "./primitives/page-header.js";
+import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
+import { Pagination } from "./primitives/pagination.js";
 import { StatusPill } from "./primitives/status-pill.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
@@ -45,4 +47,4 @@ import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.20.0",
+  "version": "11.22.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.15.1",
+    "@tangle-network/brand": "^1.15.2",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/markdown/code-block.test.tsx

@@ -1,10 +1,17 @@
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { renderToString } from "react-dom/server";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { CodeBlock, CopyButton } from "./code-block";
 
-afterEach(cleanup);
+const originalClipboard = Object.getOwnPropertyDescriptor(navigator, "clipboard");
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  if (originalClipboard) Object.defineProperty(navigator, "clipboard", originalClipboard);
+  else delete (navigator as { clipboard?: unknown }).clipboard;
+});
 
 describe("CodeBlock scoped semantic colors", () => {
   it("keeps code readable before the renderer loads, then applies live semantic colors and line numbers", async () => {
@@ -137,4 +144,36 @@ describe("CodeBlock", () => {
     expect(copyButton?.closest(".absolute")).not.toBeNull();
     expect(copyButton?.closest(".border-b")).toBeNull();
   });
+
+  it("names the copy button, keeps it out of forms, and announces the copy", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+    render(<CopyButton text="secret" />);
+    const button = screen.getByRole("button", { name: "Copy to clipboard" });
+    expect(button.getAttribute("type")).toBe("button");
+    const status = screen.getByRole("status");
+    expect(status.getAttribute("aria-live")).toBe("polite");
+    expect(status.textContent).toBe("");
+    fireEvent.click(button);
+    await waitFor(() => expect(status.textContent).toBe("Copied to clipboard"));
+    expect(writeText).toHaveBeenCalledWith("secret");
+    expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
+  });
+
+  it("renders the header label at the 12px text-xs step", () => {
+    const { getByText } = render(<CodeBlock code={"x"} label="YAML" />);
+    expect(getByText("YAML").className).toContain("text-xs");
+    expect(getByText("YAML").className).not.toContain("calc(");
+  });
+
+  it("announces a failed copy", async () => {
+    const writeText = vi.fn().mockRejectedValue(new Error("denied"));
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    render(<CopyButton text="secret" />);
+    fireEvent.click(screen.getByRole("button", { name: "Copy to clipboard" }));
+    await waitFor(() => expect(screen.getByRole("status").textContent).toBe("Copy failed"));
+    expect(screen.getByRole("button", { name: "Copy to clipboard" })).toBeTruthy();
+    warn.mockRestore();
+  });
 });

package/src/markdown/code-block.tsx

@@ -138,7 +138,7 @@ export const CodeBlock = memo(
       >
         {headerLabel && (
           <div className="flex items-center justify-between border-b border-border px-3 py-1 bg-[var(--code-header-bg,hsl(var(--background)))]">
-            <span className="text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest text-muted-foreground">
+            <span className="text-xs font-mono font-medium uppercase tracking-widest text-muted-foreground">
               {headerLabel}
             </span>
             {children}
@@ -180,6 +180,9 @@ CodeBlock.displayName = "CodeBlock";
 /** Copy-to-clipboard button for use inside CodeBlock. */
 export const CopyButton = memo(({ text }: { text: string }) => {
   const [copied, setCopied] = useState(false);
+  // Status text for the live region. Cleared before each attempt so a repeat
+  // copy or a failure is announced again.
+  const [status, setStatus] = useState("");
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
@@ -187,31 +190,47 @@ export const CopyButton = memo(({ text }: { text: string }) => {
   }, []);
 
   const handleCopy = useCallback(async () => {
+    setStatus("");
+    if (timerRef.current) clearTimeout(timerRef.current);
     try {
       await navigator.clipboard.writeText(text);
       setCopied(true);
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => setCopied(false), 2000);
+      setStatus("Copied to clipboard");
     } catch (err) {
       console.warn("Clipboard write failed:", err);
+      setCopied(false);
+      setStatus("Copy failed");
     }
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+      setStatus("");
+    }, 2000);
   }, [text]);
 
+  const label = copied ? "Copied" : "Copy to clipboard";
   return (
-    <button
-      onClick={handleCopy}
-      className={cn(
-        "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors",
-        focusRing,
-      )}
-      title="Copy to clipboard"
-    >
-      {copied ? (
-        <Check className="w-3.5 h-3.5 text-emerald-500" />
-      ) : (
-        <Copy className="w-3.5 h-3.5 text-muted-foreground" />
-      )}
-    </button>
+    <>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={cn(
+          "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors",
+          focusRing,
+        )}
+        aria-label={label}
+        title={label}
+      >
+        {copied ? (
+          <Check aria-hidden="true" className="w-3.5 h-3.5 text-[var(--surface-success-text)]" />
+        ) : (
+          <Copy aria-hidden="true" className="w-3.5 h-3.5 text-muted-foreground" />
+        )}
+      </button>
+      {/* Announce the result; the icon swap alone is silent to screen readers. */}
+      <span className="sr-only" role="status" aria-live="polite">
+        {status}
+      </span>
+    </>
   );
 });
 CopyButton.displayName = "CopyButton";

package/src/primitives/alert.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import type { StatusTone } from "./status-pill";
+
+/**
+ * An inline message that stays on the page: a policy note above a form, a
+ * failed save beside the field it concerns. For a message that interrupts, use
+ * `AlertDialog`; for one that goes away by itself, use a toast.
+ *
+ * Each tone paints its fill, border and text from Brand's matched status
+ * triple, the same one `StatusPill` uses, so the text is solved against its
+ * own background on every plane. `neutral` is a card with body text.
+ *
+ * `danger` and `warning` announce themselves (`role="alert"`); the quieter
+ * tones are `role="status"` so a screen reader is not interrupted by a note.
+ */
+export type AlertTone = Exclude<StatusTone, "running">;
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  tone?: AlertTone;
+  /** A leading icon. It takes the tone's colour and sits beside the title. */
+  icon?: React.ReactNode;
+}
+
+const TONE: Record<AlertTone, string> = {
+  neutral: "border-border bg-card text-card-foreground",
+  info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
+  success:
+    "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+  warning:
+    "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+  danger:
+    "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+};
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ tone = "neutral", icon, className, children, role, ...props }, ref) => (
+    <div
+      ref={ref}
+      role={role ?? (tone === "danger" || tone === "warning" ? "alert" : "status")}
+      data-tone={tone}
+      className={cn(
+        "flex w-full min-w-0 gap-3 rounded-lg border px-4 py-3 text-sm",
+        TONE[tone],
+        className,
+      )}
+      {...props}
+    >
+      {icon ? (
+        <span aria-hidden="true" className="mt-0.5 flex shrink-0 [&_svg]:size-4">
+          {icon}
+        </span>
+      ) : null}
+      <div className="grid min-w-0 flex-1 gap-1">{children}</div>
+    </div>
+  ),
+);
+Alert.displayName = "Alert";
+
+export function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("font-medium leading-snug [overflow-wrap:anywhere]", className)} {...props} />;
+}
+AlertTitle.displayName = "AlertTitle";
+
+/**
+ * Body text. Under a toned alert it keeps the tone's ink, which is the colour
+ * tested against the tone's fill; under `neutral` it is the muted tier.
+ */
+export function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "leading-relaxed [overflow-wrap:anywhere] [[data-tone=neutral]_&]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+AlertDescription.displayName = "AlertDescription";

package/src/primitives/empty-state.test.tsx

@@ -0,0 +1,18 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { EmptyState } from "./empty-state";
+
+afterEach(cleanup);
+
+describe("EmptyState", () => {
+  it("renders the title as h3 by default", () => {
+    render(<EmptyState title="No runs yet" />);
+    expect(screen.getByRole("heading", { level: 3, name: "No runs yet" })).toBeTruthy();
+  });
+
+  it("uses the requested heading level", () => {
+    render(<EmptyState title="No suites yet" titleAs="h2" description="Add one." />);
+    expect(screen.getByRole("heading", { level: 2, name: "No suites yet" })).toBeTruthy();
+    expect(screen.queryByRole("heading", { level: 3 })).toBeNull();
+  });
+});

package/src/primitives/empty-state.tsx

@@ -6,10 +6,13 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   description?: string;
   action?: React.ReactNode;
+  /** Heading element for the title. Pick the level that follows the page's
+   * outline, e.g. h2 directly under a page h1. Defaults to h3. */
+  titleAs?: "h2" | "h3" | "h4";
 }
 
 const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
-  ({ className, icon, title, description, action, ...props }, ref) => {
+  ({ className, icon, title, description, action, titleAs: Title = "h3", ...props }, ref) => {
     return (
       <div
         ref={ref}
@@ -24,7 +27,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
             {icon}
           </div>
         )}
-        <h3 className="font-semibold text-lg">{title}</h3>
+        <Title className="font-semibold text-lg">{title}</Title>
         {description && (
           <p className="mt-2 max-w-sm text-muted-foreground text-sm">
             {description}

package/src/primitives/index.ts

@@ -190,6 +190,12 @@ export type { PageShellProps } from "./page-shell";
 export { PageHeader } from "./page-header";
 export type { PageHeaderProps } from "./page-header";
 
+export { Alert, AlertDescription, AlertTitle } from "./alert";
+export type { AlertProps, AlertTone } from "./alert";
+
+export { Pagination } from "./pagination";
+export type { PaginationProps } from "./pagination";
+
 export { StatusPill } from "./status-pill";
 export type { StatusPillProps, StatusTone } from "./status-pill";
 

package/src/primitives/metric-strip.test.tsx

@@ -116,4 +116,19 @@ describe("MetricStrip", () => {
     expect(strip.current!.className).not.toContain("sm:grid-cols-4");
     expect(Array.from(strip.current!.querySelectorAll("dt")).map((node) => node.textContent)).toEqual(["Spend", "Calls", "Average"]);
   });
+
+  it("renders an optional icon before the label without naming the term", () => {
+    render(
+      <MetricStrip>
+        <Metric label="Steps" value="4/5" icon={<svg data-testid="steps-icon" />} />
+        <Metric label="Cost" value="$0.12" />
+      </MetricStrip>,
+    );
+    const icon = screen.getByTestId("steps-icon");
+    const dt = screen.getByText("Steps").closest("dt")!;
+    expect(dt.contains(icon)).toBe(true);
+    expect(icon.parentElement!.getAttribute("aria-hidden")).toBe("true");
+    expect(dt.firstElementChild).toBe(icon.parentElement);
+    expect(screen.getByText("Cost").closest("dt")!.querySelector('[aria-hidden="true"]')).toBeNull();
+  });
 });

package/src/primitives/metric-strip.tsx

@@ -45,17 +45,28 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
   hint?: React.ReactNode;
   /** Attention is a caller-owned action requirement, never inferred from zero. */
   attention?: { tone: StatusTone; label: string };
+  /** Decorative glyph before the label; the label carries the meaning. A
+   * direct svg child is sized to 16px; wrap other content to size it yourself. */
+  icon?: React.ReactNode;
 }
 
 /** A described term; the strip, not this item, decides where separators belong. */
 const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
-  ({ className, label, value, hint, attention, ...props }, ref) => (
+  ({ className, label, value, hint, attention, icon, ...props }, ref) => (
     <div
       ref={ref}
       className={cn("min-w-0 border-border p-4 sm:p-5", className)}
       {...props}
     >
       <dt className="flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm">
+        {icon != null && icon !== false && (
+          <span
+            aria-hidden="true"
+            className="inline-flex shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4"
+          >
+            {icon}
+          </span>
+        )}
         <span className="min-w-0 whitespace-normal [overflow-wrap:anywhere]">{label}</span>
         {attention && (
           <StatusPill tone={attention.tone}>{attention.label}</StatusPill>

package/src/primitives/pagination-alert.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Info, TriangleAlert } from 'lucide-react'
+import * as React from 'react'
+import { Alert, AlertDescription, AlertTitle } from './alert'
+import { Pagination } from './pagination'
+
+const meta: Meta = {
+  title: 'Primitives/Pagination and Alert',
+}
+export default meta
+
+function PagedTable({ pageCount }: { pageCount: number }) {
+  const [page, setPage] = React.useState(0)
+  return <Pagination page={page} pageCount={pageCount} onPageChange={setPage} />
+}
+
+export const PaginationLengths: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-6 bg-background p-6 text-foreground">
+      <PagedTable pageCount={1} />
+      <PagedTable pageCount={4} />
+      <PagedTable pageCount={48} />
+      <PagedTable pageCount={1200} />
+    </div>
+  ),
+}
+
+export const AlertTones: StoryObj = {
+  render: () => (
+    <div className="flex max-w-xl flex-col gap-3 bg-background p-6 text-foreground">
+      <Alert icon={<Info />}>
+        <AlertTitle>Public events</AlertTitle>
+        <AlertDescription>Anyone with the link can join a public event.</AlertDescription>
+      </Alert>
+      <Alert tone="info" icon={<Info />}>
+        <AlertTitle>Applies from the next billing cycle</AlertTitle>
+      </Alert>
+      <Alert tone="success">
+        <AlertDescription>Changes saved.</AlertDescription>
+      </Alert>
+      <Alert tone="warning" icon={<TriangleAlert />}>
+        <AlertTitle>A_very_long_policy_identifier_without_any_spaces_that_has_to_wrap_inside_the_alert</AlertTitle>
+        <AlertDescription>Seats above the limit are removed when the cycle closes.</AlertDescription>
+      </Alert>
+      <Alert tone="danger" icon={<TriangleAlert />}>
+        <AlertTitle>Could not save the policy</AlertTitle>
+        <AlertDescription>The server refused the change. Try again.</AlertDescription>
+      </Alert>
+    </div>
+  ),
+}

package/src/primitives/pagination-alert.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Alert, AlertDescription, AlertTitle } from "./alert";
+import { Pagination, pageSlots } from "./pagination";
+
+const PALETTE = /\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald|black|white)(?:-\d|\b)/;
+
+describe("pageSlots", () => {
+  it("lists every page when they fit", () => {
+    expect(pageSlots(0, 1)).toEqual([0]);
+    expect(pageSlots(3, 7)).toEqual([0, 1, 2, 3, 4, 5, 6]);
+  });
+
+  it("keeps the same number of slots as the current page moves", () => {
+    expect(pageSlots(0, 10)).toEqual([0, 1, 2, 3, 4, "gap-end", 9]);
+    expect(pageSlots(5, 10)).toEqual([0, "gap-start", 4, 5, 6, "gap-end", 9]);
+    expect(pageSlots(9, 10)).toEqual([0, "gap-start", 5, 6, 7, 8, 9]);
+    for (let page = 0; page < 40; page++) expect(pageSlots(page, 40)).toHaveLength(7);
+  });
+
+  it("clamps a page outside the range", () => {
+    expect(pageSlots(-3, 10)).toEqual(pageSlots(0, 10));
+    expect(pageSlots(99, 10)).toEqual(pageSlots(9, 10));
+  });
+});
+
+describe("Pagination", () => {
+  it("renders nothing for a single page", () => {
+    const { container } = render(<Pagination page={0} pageCount={1} onPageChange={vi.fn()} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("marks the current page and moves with previous, next and a number", async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    render(<Pagination page={4} pageCount={12} onPageChange={onPageChange} />);
+
+    expect(screen.getByRole("navigation", { name: "Pagination" })).toBeInTheDocument();
+    const current = screen.getByRole("button", { name: "Page 5" });
+    expect(current).toHaveAttribute("aria-current", "page");
+    expect(current.className).not.toMatch(PALETTE);
+
+    await user.click(screen.getByRole("button", { name: "Previous page" }));
+    await user.click(screen.getByRole("button", { name: "Next page" }));
+    await user.click(screen.getByRole("button", { name: "Page 12" }));
+    expect(onPageChange.mock.calls).toEqual([[3], [5], [11]]);
+  });
+
+  it("disables previous on the first page and next on the last", () => {
+    const { rerender } = render(<Pagination page={0} pageCount={3} onPageChange={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+    rerender(<Pagination page={2} pageCount={3} onPageChange={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
+  });
+
+  it("does not report the page that is already current", async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    render(<Pagination page={1} pageCount={3} onPageChange={onPageChange} />);
+    await user.click(screen.getByRole("button", { name: "Page 2" }));
+    expect(onPageChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("Alert", () => {
+  it("paints a tone from the matched Brand status triple", () => {
+    render(
+      <Alert tone="warning">
+        <AlertTitle>Policy is changing</AlertTitle>
+        <AlertDescription>Seats above the limit are removed next cycle.</AlertDescription>
+      </Alert>,
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert.className).toContain("bg-[var(--surface-warning-bg)]");
+    expect(alert.className).toContain("text-[var(--surface-warning-text)]");
+    expect(alert.className).not.toMatch(PALETTE);
+  });
+
+  it("uses role status for quiet tones and keeps an explicit role", () => {
+    const { rerender } = render(<Alert tone="info">Saved</Alert>);
+    expect(screen.getByRole("status")).toHaveTextContent("Saved");
+    rerender(
+      <Alert tone="neutral" role="note">
+        Note
+      </Alert>,
+    );
+    expect(screen.getByRole("note")).toHaveAttribute("data-tone", "neutral");
+  });
+});

package/src/primitives/pagination.tsx

@@ -0,0 +1,117 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+
+/**
+ * Page controls for a paged list or table: previous, the page numbers around
+ * the current one with the first and last always reachable, and next.
+ *
+ * Pages are zero-based in the API and one-based on screen. With one page or
+ * none there is nothing to choose, so it renders nothing.
+ */
+export interface PaginationProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "onChange" | "children"> {
+  /** The current page, zero-based. */
+  page: number;
+  pageCount: number;
+  onPageChange: (page: number) => void;
+  /** Pages shown on each side of the current one before an ellipsis. */
+  siblings?: number;
+}
+
+type PageSlot = number | "gap-start" | "gap-end";
+
+/**
+ * The visible slots for `page` of `pageCount`. The number of slots stays the
+ * same as the current page moves, so the controls do not shift under the
+ * pointer while a person clicks through.
+ */
+export function pageSlots(page: number, pageCount: number, siblings = 1): PageSlot[] {
+  const last = pageCount - 1;
+  if (pageCount <= siblings * 2 + 5) return Array.from({ length: pageCount }, (_, i) => i);
+
+  const current = Math.min(Math.max(page, 0), last);
+  const start = Math.max(Math.min(current - siblings, last - siblings * 2 - 2), 2);
+  const end = Math.min(Math.max(current + siblings, siblings * 2 + 2), last - 2);
+
+  const slots: PageSlot[] = [0, start > 2 ? "gap-start" : 1];
+  for (let i = start; i <= end; i++) slots.push(i);
+  slots.push(end < last - 2 ? "gap-end" : last - 1, last);
+  return slots;
+}
+
+const pageButton = cn(buttonVariants({ variant: "ghost", size: "sm" }), "min-w-8 px-2 tabular-nums");
+
+export function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblings = 1,
+  className,
+  "aria-label": ariaLabel = "Pagination",
+  ...rest
+}: PaginationProps) {
+  if (pageCount <= 1) return null;
+
+  const last = pageCount - 1;
+  const current = Math.min(Math.max(page, 0), last);
+  const go = (next: number) => {
+    const target = Math.min(Math.max(next, 0), last);
+    if (target !== current) onPageChange(target);
+  };
+
+  return (
+    <nav aria-label={ariaLabel} className={cn("flex items-center", className)} {...rest}>
+      <ul className="flex flex-wrap items-center gap-1">
+        <li>
+          <button
+            type="button"
+            aria-label="Previous page"
+            disabled={current === 0}
+            onClick={() => go(current - 1)}
+            className={cn(pageButton, "gap-1 pl-1.5")}
+          >
+            <ChevronLeft aria-hidden="true" />
+            <span className="hidden sm:inline">Previous</span>
+          </button>
+        </li>
+        {pageSlots(current, pageCount, siblings).map((slot) =>
+          typeof slot === "number" ? (
+            <li key={slot}>
+              <button
+                type="button"
+                aria-label={`Page ${slot + 1}`}
+                aria-current={slot === current ? "page" : undefined}
+                onClick={() => go(slot)}
+                className={cn(
+                  pageButton,
+                  slot === current &&
+                    "border-border bg-card font-semibold text-foreground hover:bg-card",
+                )}
+              >
+                {slot + 1}
+              </button>
+            </li>
+          ) : (
+            <li key={slot} aria-hidden="true" className="flex min-w-8 justify-center text-sm text-muted-foreground">
+              …
+            </li>
+          ),
+        )}
+        <li>
+          <button
+            type="button"
+            aria-label="Next page"
+            disabled={current === last}
+            onClick={() => go(current + 1)}
+            className={cn(pageButton, "gap-1 pr-1.5")}
+          >
+            <span className="hidden sm:inline">Next</span>
+            <ChevronRight aria-hidden="true" />
+          </button>
+        </li>
+      </ul>
+    </nav>
+  );
+}

package/src/primitives/segmented-control.test.tsx

@@ -326,3 +326,23 @@ describe("SegmentedControl", () => {
     expect(screen.getByRole("radiogroup")).toHaveAttribute("id", "scope-control")
   })
 })
+
+describe("SegmentedControl test ids", () => {
+  it("renders option and group test ids for end-to-end selectors", () => {
+    render(
+      <SegmentedControl
+        aria-label="Workbench view"
+        data-testid="workbench-tabs"
+        value="code"
+        onValueChange={vi.fn()}
+        options={[
+          { value: "code", label: "Code", testId: "workbench-tab-code" },
+          { value: "preview", label: "Preview", testId: "workbench-tab-preview" },
+        ]}
+      />,
+    )
+    expect(screen.getByTestId("workbench-tabs")).toHaveAttribute("role", "radiogroup")
+    expect(screen.getByTestId("workbench-tab-preview")).toHaveAttribute("aria-checked", "false")
+    expect(screen.getByTestId("workbench-tab-code")).toHaveAttribute("aria-checked", "true")
+  })
+})

package/src/primitives/segmented-control.tsx

@@ -29,6 +29,8 @@ export interface SegmentedControlOption<T extends string = string> {
   label: React.ReactNode
   /** Rendered right of the label, typically a count or status pill. */
   adornment?: React.ReactNode
+  /** Rendered as the option button's `data-testid`, for end-to-end selectors. */
+  testId?: string
 }
 
 export interface SegmentedControlProps<T extends string = string>
@@ -43,6 +45,8 @@ export interface SegmentedControlProps<T extends string = string>
    *              reads as a classic tab (used on the Team page)
    */
   variant?: "row" | "tabs"
+  /** Rendered as the group's `data-testid`. */
+  "data-testid"?: string
 }
 
 export function SegmentedControl<T extends string = string>({
@@ -93,6 +97,7 @@ export function SegmentedControl<T extends string = string>({
       id={rest.id}
       aria-label={rest["aria-label"]}
       aria-labelledby={rest["aria-labelledby"]}
+      data-testid={rest["data-testid"]}
       onKeyDown={handleKeyDown}
       className={cn(
         "flex gap-1",
@@ -116,6 +121,7 @@ export function SegmentedControl<T extends string = string>({
             type="button"
             role="radio"
             aria-checked={active}
+            data-testid={option.testId}
             tabIndex={focusable ? 0 : -1}
             onClick={() => {
               if (!active) onValueChange(option.value)