@tangle-network/ui 11.40.2 → 11.42.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @tangle-network/ui
 
+## 11.42.0
+
+### Minor Changes
+
+- 1160d59: Add hand-rolled SVG chart primitives. `SeriesSparkline` and `MetricChart` (exported from `@tangle-network/ui/primitives`) draw viewBox-scaled line charts with `currentColor` against theme token classes — no chart dependency, no hardcoded hues, dark-mode correct. `MetricChart` adds y gridlines, x date ticks, dual-series (`value2`) support and dashed reference lines. The React-free series math (`normalizeSeries`, `seriesExtent`, `seriesScale`, `periodDelta`, `seriesMean`, path builders) lives in `src/lib/series.ts` and is re-exported from primitives; `chartPresentation` joins the shared presentation map. Period deltas are measured relative to the latest measurement, never the wall clock. Named `SeriesSparkline` to stay distinct from the sample-index `Sparkline` already exported by `@tangle-network/charts`.
+
+## 11.41.0
+
+### Minor Changes
+
+- 13f5880: HoverCard and Breadcrumb: two high-value shadcn-convention components our products needed.
+  
+  HoverCard: a rich hover preview (person, product, record) on the L4 overlay surface, lazy-mounted, Radix-backed. The face of every @mention, vendor name, and staff reference in a chat thread.
+  
+  Breadcrumb: workspace navigation depth as one scrollable line — each crumb is a link except the last, which is the page. Fade-masked on narrow viewports, not wrapped.
+
 ## 11.40.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -99,7 +99,12 @@ import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pil
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
 import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/wizard.js";
+import { HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger } from "./primitives/hover-card.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./primitives/breadcrumb.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
+import { PeriodDelta, SeriesExtent, SeriesPoint, SeriesPointInput, SeriesScale, normalizeSeries, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale } from "./lib/series.js";
+import { SeriesSparkline, SeriesSparklineProps } from "./primitives/series-sparkline.js";
+import { ChartReferenceLine, MetricChart, MetricChartProps } from "./primitives/metric-chart.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "./primitives.js";
 import { RunGroup, RunGroupProps } from "./run/run-group.js";
@@ -137,4 +142,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, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatAuthor, 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, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, 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, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, 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 MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, 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, PdfViewer, type PdfViewerConfig, type PdfViewerProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, 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, type RunPhase, RunPhaseList, 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, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, 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, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, 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, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, 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, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, 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, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, 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, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, 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 MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, 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, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, 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, type RunPhase, RunPhaseList, 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, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, 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, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, 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, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, 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

@@ -56,8 +56,13 @@ import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
 import { Chip } from "./primitives/chip.js";
 import { Wizard, WizardStep } from "./primitives/wizard.js";
+import { HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger } from "./primitives/hover-card.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./primitives/breadcrumb.js";
 import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
+import { normalizeSeries, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale } from "./lib/series.js";
+import { SeriesSparkline } from "./primitives/series-sparkline.js";
+import { MetricChart } from "./primitives/metric-chart.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "./primitives.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
@@ -121,4 +126,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, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, 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, DatePicker, 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, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, 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, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, 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, DatePicker, 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, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, 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/lib/series.d.ts

@@ -0,0 +1,74 @@
+//#region src/lib/series.d.ts
+/**
+ * src/lib/series.ts — pure time-series math shared by the chart primitives.
+ * No React, no DOM: unit-tested directly. All periods are relative to the
+ * LATEST measurement in the series, never to the wall clock, so a seeded
+ * demo or a backfilled import never goes stale.
+ */
+/** A point as callers supply it: `at` accepts epoch ms, ISO text or a Date. */
+export interface SeriesPointInput {
+  at: number | string | Date;
+  value: number;
+  /** Second reading for dual series (diastolic next to systolic). */
+  value2?: number;
+}
+/** A normalized point: finite numbers, epoch-ms time, ascending order. */
+export interface SeriesPoint {
+  at: number;
+  value: number;
+  value2?: number;
+}
+/** Drop non-finite readings and sort by measurement time. */
+export declare function normalizeSeries(points: readonly SeriesPointInput[]): SeriesPoint[];
+export interface SeriesExtent {
+  /** Padded value domain. */
+  lo: number;
+  hi: number;
+  /** Time domain, never degenerate. */
+  tLo: number;
+  tHi: number;
+}
+/**
+ * Value and time extents across both readings of every point. The value
+ * domain is padded by `padding` (fraction of the span, default 0.12) and
+ * widened to cover `include`d values (reference lines). Degenerate spans
+ * open up so a flat or single-reading series still centres.
+ */
+export declare function seriesExtent(points: readonly SeriesPoint[], options?: {
+  padding?: number;
+  include?: readonly number[];
+}): SeriesExtent;
+export interface SeriesScale {
+  x: (at: number) => number;
+  y: (value: number) => number;
+  extent: SeriesExtent;
+}
+/** Project an extent into a `width` × `height` box with `pad` inset. */
+export declare function seriesScale(extent: SeriesExtent, width: number, height: number, pad: number): SeriesScale;
+export interface PeriodDelta {
+  /** Mean of the latest `windowMs` of data, ending at the last measurement. */
+  current: number;
+  /** Mean of the window before that, when such data exists. */
+  previous: number | null;
+  /** `current - previous`, or null without a populated prior window. */
+  delta: number | null;
+}
+/** Mean of finite values, or null when there is nothing to average. */
+export declare function seriesMean(values: readonly number[]): number | null;
+/**
+ * Compare the latest `windowMs` of primary readings against the window
+ * before it. Both windows end at the LATEST measurement, never the wall
+ * clock. Returns null for an empty series.
+ */
+export declare function periodDelta(points: readonly SeriesPoint[], windowMs: number): PeriodDelta | null;
+/** Polyline path data for already-projected points. */
+export declare function seriesLinePath(points: ReadonlyArray<{
+  x: number;
+  y: number;
+}>): string;
+/** Closed area path down to `baseline`, empty for fewer than two points. */
+export declare function seriesAreaPath(points: ReadonlyArray<{
+  x: number;
+  y: number;
+}>, baseline: number): string;
+//#endregion

package/dist/lib/series.js

@@ -0,0 +1,100 @@
+//#region src/lib/series.ts
+const asTime = (at) => {
+	const time = at instanceof Date ? at.getTime() : typeof at === "number" ? at : Date.parse(at);
+	return Number.isFinite(time) ? time : null;
+};
+/** Drop non-finite readings and sort by measurement time. */
+function normalizeSeries(points) {
+	const normalized = [];
+	for (const point of points) {
+		const at = asTime(point.at);
+		if (at === null || !Number.isFinite(point.value)) continue;
+		const { value2 } = point;
+		normalized.push(value2 !== void 0 && Number.isFinite(value2) ? {
+			at,
+			value: point.value,
+			value2
+		} : {
+			at,
+			value: point.value
+		});
+	}
+	return normalized.sort((a, b) => a.at - b.at);
+}
+const TWELVE_HOURS_MS = 432e5;
+/**
+* Value and time extents across both readings of every point. The value
+* domain is padded by `padding` (fraction of the span, default 0.12) and
+* widened to cover `include`d values (reference lines). Degenerate spans
+* open up so a flat or single-reading series still centres.
+*/
+function seriesExtent(points, options = {}) {
+	const values = [...points.flatMap((point) => point.value2 === void 0 ? [point.value] : [point.value, point.value2]), ...options.include ?? []];
+	let lo = values.length > 0 ? Math.min(...values) : 0;
+	let hi = values.length > 0 ? Math.max(...values) : 1;
+	if (lo === hi) {
+		lo -= 1;
+		hi += 1;
+	}
+	const pad = (hi - lo) * (options.padding ?? .12);
+	lo -= pad;
+	hi += pad;
+	let tLo = points.length > 0 ? points[0].at : 0;
+	let tHi = points.length > 0 ? points[points.length - 1].at : 1;
+	if (tLo === tHi) {
+		tLo -= TWELVE_HOURS_MS;
+		tHi += TWELVE_HOURS_MS;
+	}
+	return {
+		lo,
+		hi,
+		tLo,
+		tHi
+	};
+}
+/** Project an extent into a `width` × `height` box with `pad` inset. */
+function seriesScale(extent, width, height, pad) {
+	const { lo, hi, tLo, tHi } = extent;
+	return {
+		extent,
+		x: (at) => pad + (at - tLo) / (tHi - tLo) * (width - 2 * pad),
+		y: (value) => height - pad - (value - lo) / (hi - lo) * (height - 2 * pad)
+	};
+}
+/** Mean of finite values, or null when there is nothing to average. */
+function seriesMean(values) {
+	const finite = values.filter((value) => Number.isFinite(value));
+	if (finite.length === 0) return null;
+	return finite.reduce((sum, value) => sum + value, 0) / finite.length;
+}
+/**
+* Compare the latest `windowMs` of primary readings against the window
+* before it. Both windows end at the LATEST measurement, never the wall
+* clock. Returns null for an empty series.
+*/
+function periodDelta(points, windowMs) {
+	if (points.length === 0) return null;
+	const latest = points[points.length - 1].at;
+	const recentStart = latest - windowMs;
+	const previousStart = latest - 2 * windowMs;
+	const recent = points.filter((point) => point.at > recentStart).map((point) => point.value);
+	const previous = points.filter((point) => point.at > previousStart && point.at <= recentStart).map((point) => point.value);
+	const current = seriesMean(recent);
+	const previousMean = seriesMean(previous);
+	return {
+		current,
+		previous: previousMean,
+		delta: previousMean !== null ? current - previousMean : null
+	};
+}
+/** Polyline path data for already-projected points. */
+function seriesLinePath(points) {
+	return points.map((point, index) => `${index === 0 ? "M" : "L"}${point.x.toFixed(2)},${point.y.toFixed(2)}`).join(" ");
+}
+/** Closed area path down to `baseline`, empty for fewer than two points. */
+function seriesAreaPath(points, baseline) {
+	if (points.length < 2) return "";
+	return `${seriesLinePath(points)}L${points[points.length - 1].x.toFixed(2)},${baseline}L${points[0].x.toFixed(2)},${baseline}Z`;
+}
+//#endregion
+export { normalizeSeries, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale };

package/dist/presentation.d.ts

@@ -42,6 +42,19 @@ export declare const metricLayouts: {
   readonly 5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l";
   readonly 6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l";
 };
+/** Hand-rolled SVG charts: every stroke and fill is currentColor against a
+ * token class, so ink stays theme-aware with no hardcoded hues. Charts draw
+ * lines and text only; the grouping plane (border, surface) is caller-owned. */
+export declare const chartPresentation: {
+  readonly sparkline: "h-9 w-full text-primary";
+  readonly root: "h-auto w-full";
+  readonly axis: "text-muted-foreground";
+  readonly gridLine: "opacity-20";
+  readonly referenceLine: "opacity-60";
+  readonly primarySeries: "text-primary";
+  readonly secondarySeries: "text-muted-foreground";
+  readonly area: "opacity-10";
+};
 export declare const dialogPresentation: {
   readonly overlay: "fixed inset-0 z-50 bg-black/40";
   readonly transition: "data-[state=open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=delayed-open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=instant-open]:[animation:tangle-surface-present_var(--motion-surface)_both] data-[state=closed]:[animation:tangle-surface-absent_var(--motion-dismiss)_both] motion-reduce:animate-none!";

package/dist/presentation.js

@@ -89,6 +89,19 @@ const metricLayouts = {
 	5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l",
 	6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l"
 };
+/** Hand-rolled SVG charts: every stroke and fill is currentColor against a
+* token class, so ink stays theme-aware with no hardcoded hues. Charts draw
+* lines and text only; the grouping plane (border, surface) is caller-owned. */
+const chartPresentation = {
+	sparkline: "h-9 w-full text-primary",
+	root: "h-auto w-full",
+	axis: "text-muted-foreground",
+	gridLine: "opacity-20",
+	referenceLine: "opacity-60",
+	primarySeries: "text-primary",
+	secondarySeries: "text-muted-foreground",
+	area: "opacity-10"
+};
 const dialogPresentation = {
 	overlay: "fixed inset-0 z-50 bg-black/40",
 	transition: surfaceMotion,
@@ -181,4 +194,4 @@ const tabsPresentation = {
 	}
 };
 //#endregion
-export { bindDialog, buttonVariants, cardPresentation, controlHeight, controlMotion, controlRadius, controlSizes, controlText, dialogPresentation, emptyStatePresentation, fieldPresentation, fieldSizes, fieldTouchText, helpPresentation, inputVariants, ixControlSoft, ixSelected, ixTabUnderline, labelVariants, metricLayouts, metricPresentation, tablePresentation, tabsPresentation };
+export { bindDialog, buttonVariants, cardPresentation, chartPresentation, controlHeight, controlMotion, controlRadius, controlSizes, controlText, dialogPresentation, emptyStatePresentation, fieldPresentation, fieldSizes, fieldTouchText, helpPresentation, inputVariants, ixControlSoft, ixSelected, ixTabUnderline, labelVariants, metricLayouts, metricPresentation, tablePresentation, tabsPresentation };

package/dist/primitives/breadcrumb.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+//#region src/primitives/breadcrumb.d.ts
+/**
+ * Where you are inside a nested surface — the workspace, its settings, the
+ * section you're in. Each crumb is a link except the last, which is the page.
+ *
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><BreadcrumbLink href="/workspaces/ws-1">Recenter demo</BreadcrumbLink></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><BreadcrumbLink href="/workspaces/ws-1/settings">Settings</BreadcrumbLink></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><BreadcrumbPage>Connections</BreadcrumbPage></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * On narrow viewports the list scrolls horizontally with a fade mask rather
+ * than wrapping — a crumb trail reads as one line, not a paragraph.
+ */
+declare const Breadcrumb: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+  separator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<React.OlHTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/primitives/breadcrumb.js

@@ -0,0 +1,87 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/primitives/breadcrumb.tsx
+/**
+* Where you are inside a nested surface — the workspace, its settings, the
+* section you're in. Each crumb is a link except the last, which is the page.
+*
+* ```tsx
+* <Breadcrumb>
+*   <BreadcrumbList>
+*     <BreadcrumbItem><BreadcrumbLink href="/workspaces/ws-1">Recenter demo</BreadcrumbLink></BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem><BreadcrumbLink href="/workspaces/ws-1/settings">Settings</BreadcrumbLink></BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem><BreadcrumbPage>Connections</BreadcrumbPage></BreadcrumbItem>
+*   </BreadcrumbList>
+* </Breadcrumb>
+* ```
+*
+* On narrow viewports the list scrolls horizontally with a fade mask rather
+* than wrapping — a crumb trail reads as one line, not a paragraph.
+*/
+const Breadcrumb = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+	ref,
+	"aria-label": "Breadcrumb",
+	className: cn("relative", className),
+	...props
+}));
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("ol", {
+	ref,
+	className: cn("flex items-center gap-1.5 text-sm text-muted-foreground overflow-x-auto", "[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-16px),transparent)]", "[-webkit-mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-16px),transparent)]", "scrollbar-none", className),
+	...props
+}));
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", {
+	ref,
+	className: cn("inline-flex items-center gap-1.5 shrink-0", className),
+	...props
+}));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("a", {
+	ref,
+	className: cn("transition-colors hover:text-foreground", className),
+	...props
+}));
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	role: "link",
+	"aria-disabled": "true",
+	"aria-current": "page",
+	className: cn("font-normal text-foreground", className),
+	...props
+}));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	role: "presentation",
+	"aria-hidden": "true",
+	className: cn("shrink-0 text-muted-foreground/60", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(ChevronRight, {
+		className: "size-3.5",
+		"aria-hidden": true
+	})
+}));
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("span", {
+	ref,
+	role: "presentation",
+	"aria-hidden": "true",
+	className: cn("flex size-6 items-center justify-center", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "…"
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More"
+	})]
+}));
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/primitives/hover-card.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+//#region src/primitives/hover-card.d.ts
+declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
+declare const HoverCardTrigger: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+  /** Which edge the card prefers. Defaults to bottom. */
+  side?: "top" | "right" | "bottom" | "left";
+  /** Pixel gap from the trigger. Defaults to 6. */
+  alignOffset?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function HoverCardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function HoverCardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function HoverCardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger };

package/dist/primitives/hover-card.js

@@ -0,0 +1,63 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+//#region src/primitives/hover-card.tsx
+/**
+* A rich hover preview: the face of a person, product, or record that appears
+* when you pause on its trigger. Radix HoverCard under the hood, styled on the
+* md3 surface ladder — the card sits on `--md3-surface-container-highest`
+* (L4, the overlay plane) so it reads as a floating layer above the page.
+*
+* ```tsx
+* <HoverCard>
+*   <HoverCardTrigger>@noa</HoverCardTrigger>
+*   <HoverCardContent>
+*     <HoverCardHeader>
+*       <HoverCardTitle>Noa</HoverCardTitle>
+*       <HoverCardDescription>Housekeeping · es</HoverCardDescription>
+*     </HoverCardHeader>
+*     <p>3 rooms today · 1 pending</p>
+*   </HoverCardContent>
+* </HoverCard>
+* ```
+*
+* The content is **lazy** — it mounts only when hovered, so a page of 50
+* triggers costs nothing until the person pauses on one.
+*/
+const HoverCard = HoverCardPrimitive.Root;
+const HoverCardTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Trigger, {
+	ref,
+	className: cn("cursor-pointer underline-offset-4 hover:underline", className),
+	...props
+}));
+HoverCardTrigger.displayName = HoverCardPrimitive.Trigger.displayName;
+const HoverCardContent = React.forwardRef(({ className, side = "bottom", alignOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+	ref,
+	side,
+	alignOffset,
+	sideOffset: 6,
+	className: cn("z-50 w-64 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", className),
+	...props
+}) }));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+function HoverCardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-1 pb-2", className),
+		...props
+	});
+}
+function HoverCardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h4", {
+		className: cn("text-sm font-semibold leading-none", className),
+		...props
+	});
+}
+function HoverCardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger };

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

@@ -0,0 +1,47 @@
+import { SeriesPointInput } from "../lib/series.js";
+import * as React from "react";
+//#region src/primitives/metric-chart.d.ts
+export interface ChartReferenceLine {
+  value: number;
+  label?: string;
+  /** Which reading the line applies to for a dual series. A secondary line
+   * on a single-reading series is not drawn. */
+  series?: "primary" | "secondary";
+}
+export type MetricChartProps = Omit<React.SVGAttributes<SVGSVGElement>, "points"> & {
+  points: SeriesPointInput[];
+  /** Accessible name; also rendered as the svg title. */
+  title: string;
+  /** Unit noun for the generated description ("bpm", "ms"). */
+  unit?: string;
+  /** Fraction digits for tick labels and the description. Defaults to a
+   * maximum of two. */
+  decimals?: number;
+  referenceLines?: ChartReferenceLine[];
+  /** Overrides the generated <desc> summary. */
+  description?: string;
+  formatValue?: (value: number) => string;
+  formatTime?: (at: number) => string;
+};
+/**
+ * A labelled line chart: y gridlines, x date ticks, optional dashed
+ * reference lines and a dotted secondary series for dual readings
+ * (`value2`). Hand-rolled SVG, viewBox-scaled, currentColor throughout.
+ */
+declare const MetricChart: React.ForwardRefExoticComponent<Omit<React.SVGAttributes<SVGSVGElement>, "points"> & {
+  points: SeriesPointInput[];
+  /** Accessible name; also rendered as the svg title. */
+  title: string;
+  /** Unit noun for the generated description ("bpm", "ms"). */
+  unit?: string;
+  /** Fraction digits for tick labels and the description. Defaults to a
+   * maximum of two. */
+  decimals?: number;
+  referenceLines?: ChartReferenceLine[];
+  /** Overrides the generated <desc> summary. */
+  description?: string;
+  formatValue?: (value: number) => string;
+  formatTime?: (at: number) => string;
+} & React.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { MetricChart };