@tangle-network/ui 11.19.0 → 11.21.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 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
+
+- 24ea445: IconTile gains `xl` (64px) and `2xl` (80px) sizes for page and profile headers, so an app can show an entity's face at header scale without a local avatar component.
+
 ## 11.19.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/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/icon-tile.d.ts

@@ -17,7 +17,12 @@ import * as React from "react";
 export interface IconTileProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
   /** Defaults to a tone derived from `name`, or violet when there is no name. */
   tone?: CategoryTone;
-  size?: "xs" | "sm" | "md" | "lg";
+  /**
+   * `xs` to `lg` (20 to 40px) sit in rows and cards. `xl` (64px) and `2xl`
+   * (80px) are for a page or profile header, where the tile is the thing's
+   * face rather than a list marker.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
   src?: string;
   icon?: React.ReactNode;
   /** The thing's name. Supplies the initials and the derived tone. */

package/dist/primitives/icon-tile.js

@@ -7,7 +7,9 @@ const SIZE = {
 	xs: "size-5 rounded-[5px] text-[10px] [&_svg]:size-3",
 	sm: "size-6 rounded-md text-[11px] [&_svg]:size-3.5",
 	md: "size-8 rounded-md text-xs [&_svg]:size-4",
-	lg: "size-10 rounded-lg text-sm [&_svg]:size-5"
+	lg: "size-10 rounded-lg text-sm [&_svg]:size-5",
+	xl: "size-16 rounded-2xl text-xl [&_svg]:size-8",
+	"2xl": "size-20 rounded-2xl text-2xl [&_svg]:size-10"
 };
 /** Up to two initials: the first letters of the first two words, or of the one word. */
 function initialsOf(name) {

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.19.0",
+  "version": "11.21.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.13.0",
+    "@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/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/icon-tile.stories.tsx

@@ -62,10 +62,10 @@ export const Sizes: Story = {
   render: () => (
     <BothThemes>
       <div className="flex items-end gap-3">
-        {(["xs", "sm", "md", "lg"] as const).map((size) => (
+        {(["xs", "sm", "md", "lg", "xl", "2xl"] as const).map((size) => (
           <IconTile key={size} size={size} name="Tangle Network" />
         ))}
-        {(["xs", "sm", "md", "lg"] as const).map((size) => (
+        {(["xs", "sm", "md", "lg", "xl", "2xl"] as const).map((size) => (
           <IconTile key={`g-${size}`} size={size} tone="cyan" icon={<Globe />} />
         ))}
       </div>

package/src/primitives/icon-tile.test.tsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import { Globe } from "lucide-react";
+import { describe, expect, it } from "vitest";
+import { IconTile, initialsOf } from "./icon-tile";
+
+describe("IconTile", () => {
+  it.each([
+    ["xs", "size-5"],
+    ["sm", "size-6"],
+    ["md", "size-8"],
+    ["lg", "size-10"],
+    ["xl", "size-16"],
+    ["2xl", "size-20"],
+  ] as const)("renders size %s as %s", (size, cls) => {
+    const { container } = render(<IconTile size={size} name="Tangle Network" />);
+    expect(container.firstElementChild).toHaveClass(cls);
+  });
+
+  it("scales the glyph with the large sizes", () => {
+    const { container } = render(<IconTile size="2xl" tone="cyan" icon={<Globe />} />);
+    expect(container.firstElementChild?.className).toContain("[&_svg]:size-10");
+  });
+
+  it("shows initials and is decorative without a label", () => {
+    const { container } = render(<IconTile size="xl" name="Acme Robotics" />);
+    const tile = container.firstElementChild;
+    expect(tile).toHaveTextContent("AR");
+    expect(tile).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("is an image with an accessible name when labelled", () => {
+    const { getByRole } = render(<IconTile size="xl" name="Acme" label="Acme" />);
+    expect(getByRole("img", { name: "Acme" })).toBeInTheDocument();
+  });
+
+  it("keeps an emoji whole in the initials", () => {
+    expect(initialsOf("🦊")).toBe("🦊");
+  });
+});

package/src/primitives/icon-tile.tsx

@@ -18,7 +18,12 @@ import { type CategoryTone, TONE_CLASSES, toneFor } from "./tone";
 export interface IconTileProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
   /** Defaults to a tone derived from `name`, or violet when there is no name. */
   tone?: CategoryTone;
-  size?: "xs" | "sm" | "md" | "lg";
+  /**
+   * `xs` to `lg` (20 to 40px) sit in rows and cards. `xl` (64px) and `2xl`
+   * (80px) are for a page or profile header, where the tile is the thing's
+   * face rather than a list marker.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
   src?: string;
   icon?: React.ReactNode;
   /** The thing's name. Supplies the initials and the derived tone. */
@@ -32,6 +37,8 @@ const SIZE = {
   sm: "size-6 rounded-md text-[11px] [&_svg]:size-3.5",
   md: "size-8 rounded-md text-xs [&_svg]:size-4",
   lg: "size-10 rounded-lg text-sm [&_svg]:size-5",
+  xl: "size-16 rounded-2xl text-xl [&_svg]:size-8",
+  "2xl": "size-20 rounded-2xl text-2xl [&_svg]:size-10",
 } as const;
 
 /** Up to two initials: the first letters of the first two words, or of the one word. */

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/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)