@tangle-network/ui 11.41.0 → 11.42.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/dist/index.d.ts

@@ -102,6 +102,9 @@ import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/w
 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";
@@ -139,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, 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, 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, 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

@@ -60,6 +60,9 @@ import { HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, Hov
 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";
@@ -123,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, 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, 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/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 };

package/dist/primitives/metric-chart.js

@@ -0,0 +1,155 @@
+import { cn } from "../lib/utils.js";
+import { chartPresentation } from "../presentation.js";
+import { normalizeSeries, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale } from "../lib/series.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/metric-chart.tsx
+const defaultTimeLabel = (at) => new Date(at).toLocaleDateString(void 0, {
+	month: "short",
+	day: "numeric"
+});
+const defaultValueLabel = (decimals) => (value) => value.toLocaleString(void 0, decimals === void 0 ? { maximumFractionDigits: 2 } : {
+	minimumFractionDigits: decimals,
+	maximumFractionDigits: decimals
+});
+/**
+* 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.
+*/
+const MetricChart = React.forwardRef(({ points, title, unit, decimals, referenceLines, description, formatValue, formatTime, className, ...props }, ref) => {
+	const series = normalizeSeries(points);
+	const width = 680;
+	const height = 260;
+	const padX = 46;
+	const padY = 16;
+	const dual = series.some((point) => point.value2 !== void 0);
+	const lines = (referenceLines ?? []).filter((line) => line.series !== "secondary" || dual);
+	const extent = seriesExtent(series, { include: lines.map((line) => line.value) });
+	const plot = seriesScale(extent, 626, height, padY);
+	const xAt = (at) => padX + plot.x(at);
+	const yAt = plot.y;
+	const { lo, hi, tLo, tHi } = extent;
+	const primary = series.map((point) => ({
+		x: xAt(point.at),
+		y: yAt(point.value)
+	}));
+	const secondary = series.filter((point) => point.value2 !== void 0).map((point) => ({
+		x: xAt(point.at),
+		y: yAt(point.value2)
+	}));
+	const ticks = Array.from({ length: 4 }, (_, index) => lo + (hi - lo) * (index + 1) / 5);
+	const xTicks = [
+		tLo,
+		tLo + (tHi - tLo) / 2,
+		tHi
+	];
+	const lastPrimary = primary[primary.length - 1];
+	const valueLabel = formatValue ?? defaultValueLabel(decimals);
+	const timeLabel = formatTime ?? defaultTimeLabel;
+	const values = series.map((point) => point.value);
+	const describe = description ?? `${title}: ${series.length} readings from ${timeLabel(tLo)} to ${timeLabel(tHi)}, min ${valueLabel(series.length > 0 ? Math.min(...values) : 0)}, max ${valueLabel(series.length > 0 ? Math.max(...values) : 0)}, average ${valueLabel(seriesMean(values) ?? 0)}${unit ? ` ${unit}` : ""}.`;
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		viewBox: `0 0 ${width} ${height}`,
+		role: "img",
+		"aria-label": title,
+		className: cn(chartPresentation.root, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("title", { children: title }),
+			/* @__PURE__ */ jsx("desc", { children: describe }),
+			series.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				ticks.map((tick) => /* @__PURE__ */ jsxs("g", {
+					className: chartPresentation.axis,
+					children: [/* @__PURE__ */ jsx("line", {
+						x1: padX,
+						x2: 672,
+						y1: yAt(tick),
+						y2: yAt(tick),
+						stroke: "currentColor",
+						strokeWidth: "1",
+						className: chartPresentation.gridLine
+					}), /* @__PURE__ */ jsx("text", {
+						x: 38,
+						y: yAt(tick) + 4,
+						textAnchor: "end",
+						fontSize: "11",
+						fill: "currentColor",
+						children: valueLabel(tick)
+					})]
+				}, tick)),
+				xTicks.map((tick, index) => /* @__PURE__ */ jsx("text", {
+					className: chartPresentation.axis,
+					fontSize: "11",
+					fill: "currentColor",
+					x: xAt(tick),
+					y: 256,
+					textAnchor: index === 0 ? "start" : index === xTicks.length - 1 ? "end" : "middle",
+					children: timeLabel(tick)
+				}, tick)),
+				lines.map((line, index) => /* @__PURE__ */ jsxs("g", {
+					className: chartPresentation.axis,
+					children: [/* @__PURE__ */ jsx("line", {
+						x1: padX,
+						x2: 672,
+						y1: yAt(line.value),
+						y2: yAt(line.value),
+						stroke: "currentColor",
+						strokeWidth: "1.25",
+						strokeDasharray: "5 4",
+						className: chartPresentation.referenceLine
+					}), line.label && /* @__PURE__ */ jsx("text", {
+						x: 668,
+						y: yAt(line.value) - 5,
+						textAnchor: "end",
+						fontSize: "11",
+						fill: "currentColor",
+						children: line.label
+					})]
+				}, line.label ?? index)),
+				primary.length > 1 && /* @__PURE__ */ jsx("path", {
+					d: seriesAreaPath(primary, yAt(lo)),
+					fill: "currentColor",
+					stroke: "none",
+					className: cn(chartPresentation.primarySeries, chartPresentation.area)
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: seriesLinePath(primary),
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinejoin: "round",
+					strokeLinecap: "round",
+					className: chartPresentation.primarySeries
+				}),
+				secondary.length > 0 && /* @__PURE__ */ jsx("path", {
+					d: seriesLinePath(secondary),
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinejoin: "round",
+					strokeLinecap: "round",
+					strokeDasharray: "2 5",
+					className: chartPresentation.secondarySeries
+				}),
+				primary.length === 1 ? /* @__PURE__ */ jsx("circle", {
+					cx: primary[0].x,
+					cy: primary[0].y,
+					r: "4",
+					fill: "currentColor",
+					className: chartPresentation.primarySeries
+				}) : lastPrimary && /* @__PURE__ */ jsx("circle", {
+					cx: lastPrimary.x,
+					cy: lastPrimary.y,
+					r: "3.5",
+					fill: "currentColor",
+					className: chartPresentation.primarySeries
+				})
+			] })
+		]
+	});
+});
+MetricChart.displayName = "MetricChart";
+//#endregion
+export { MetricChart };

package/dist/primitives/series-sparkline.d.ts

@@ -0,0 +1,16 @@
+import { SeriesPointInput } from "../lib/series.js";
+import * as React from "react";
+//#region src/primitives/series-sparkline.d.ts
+export type SeriesSparklineProps = Omit<React.SVGAttributes<SVGSVGElement>, "points"> & {
+  points: SeriesPointInput[];
+  /** Accessible name; also rendered as the svg title. */
+  label: string;
+};
+/** Inline trend glyph: viewBox-scaled, currentColor against `text-primary`. */
+declare const SeriesSparkline: React.ForwardRefExoticComponent<Omit<React.SVGAttributes<SVGSVGElement>, "points"> & {
+  points: SeriesPointInput[];
+  /** Accessible name; also rendered as the svg title. */
+  label: string;
+} & React.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { SeriesSparkline };

package/dist/primitives/series-sparkline.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import { chartPresentation } from "../presentation.js";
+import { normalizeSeries, seriesAreaPath, seriesExtent, seriesLinePath, seriesScale } from "../lib/series.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/series-sparkline.tsx
+/** Inline trend glyph: viewBox-scaled, currentColor against `text-primary`. */
+const SeriesSparkline = React.forwardRef(({ points, label, className, ...props }, ref) => {
+	const series = normalizeSeries(points);
+	const width = 120;
+	const height = 36;
+	const scale = seriesScale(seriesExtent(series), width, height, 3);
+	const placed = series.map((point) => ({
+		x: scale.x(point.at),
+		y: scale.y(point.value)
+	}));
+	const last = placed[placed.length - 1];
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		viewBox: `0 0 ${width} ${height}`,
+		preserveAspectRatio: "none",
+		role: "img",
+		"aria-label": label,
+		className: cn(chartPresentation.sparkline, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("title", { children: label }),
+			placed.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", {
+				d: seriesAreaPath(placed, 33),
+				fill: "currentColor",
+				className: chartPresentation.area,
+				stroke: "none"
+			}), /* @__PURE__ */ jsx("path", {
+				d: seriesLinePath(placed),
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinejoin: "round",
+				strokeLinecap: "round",
+				vectorEffect: "non-scaling-stroke"
+			})] }),
+			last && /* @__PURE__ */ jsx("circle", {
+				cx: last.x,
+				cy: last.y,
+				r: "2",
+				fill: "currentColor"
+			})
+		]
+	});
+});
+SeriesSparkline.displayName = "SeriesSparkline";
+//#endregion
+export { SeriesSparkline };

package/dist/primitives.d.ts

@@ -56,6 +56,9 @@ import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/w
 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 "@tangle-network/brand";
-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, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, 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, DatePicker, type DatePickerProps, 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, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, 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, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, 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, 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, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, parseCalendarDate, 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, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, 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, DatePicker, type DatePickerProps, 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, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, 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, 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, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };