@tangle-network/ui 11.41.0 → 11.43.0

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

@@ -50,12 +50,16 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
 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 "@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, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, 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 };

package/dist/primitives.js

@@ -48,6 +48,7 @@ import { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
 import { StatusPill } from "./primitives/status-pill.js";
+import { ComplianceBadge } from "./primitives/compliance-badge.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
 import { Chip } from "./primitives/chip.js";
@@ -56,6 +57,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 "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FilterField, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, parseCalendarDate, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ComplianceBadge, 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, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FilterField, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, Input, Label, Logo, Metric, MetricChart, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };

package/package.json

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

package/src/lib/series.test.ts

@@ -0,0 +1,172 @@
+import { describe, expect, it } from "vitest";
+import {
+  normalizeSeries,
+  periodDelta,
+  seriesAreaPath,
+  seriesExtent,
+  seriesLinePath,
+  seriesMean,
+  seriesScale,
+  type SeriesPoint,
+} from "./series";
+
+const DAY = 86_400_000;
+
+describe("normalizeSeries", () => {
+  it("parses epoch, ISO and Date times, drops non-finite readings and sorts", () => {
+    const points = normalizeSeries([
+      { at: "2026-10-21T07:00:00.000Z", value: 63 },
+      { at: 1_000, value: 61 },
+      { at: new Date("2026-10-20T07:00:00.000Z"), value: 62, value2: 40 },
+      { at: "not a date", value: 99 },
+      { at: 2_000, value: Number.NaN },
+      { at: 3_000, value: 65, value2: Number.POSITIVE_INFINITY },
+    ]);
+    expect(points.map((point) => point.value)).toEqual([61, 65, 62, 63]);
+    expect(points[0]!.at).toBe(1_000);
+    // A non-finite second reading drops value2, not the point.
+    expect(points[1]!.value2).toBeUndefined();
+    expect(points[2]!.value2).toBe(40);
+    for (let i = 1; i < points.length; i += 1) {
+      expect(points[i]!.at).toBeGreaterThanOrEqual(points[i - 1]!.at);
+    }
+  });
+
+  it("returns an empty series for empty input", () => {
+    expect(normalizeSeries([])).toEqual([]);
+  });
+});
+
+describe("seriesExtent", () => {
+  const points: SeriesPoint[] = [
+    { at: 10 * DAY, value: 60 },
+    { at: 20 * DAY, value: 80 },
+    { at: 30 * DAY, value: 70, value2: 45 },
+  ];
+
+  it("spans both readings with twelve percent padding by default", () => {
+    const extent = seriesExtent(points);
+    const span = 80 - 45;
+    expect(extent.lo).toBeCloseTo(45 - span * 0.12);
+    expect(extent.hi).toBeCloseTo(80 + span * 0.12);
+    expect(extent.tLo).toBe(10 * DAY);
+    expect(extent.tHi).toBe(30 * DAY);
+  });
+
+  it("widens the domain to cover included reference values", () => {
+    const extent = seriesExtent(points, { include: [95, 30] });
+    expect(extent.hi).toBeGreaterThanOrEqual(95);
+    expect(extent.lo).toBeLessThanOrEqual(30);
+  });
+
+  it("honours an explicit padding of zero", () => {
+    const extent = seriesExtent(points, { padding: 0 });
+    expect(extent.lo).toBe(45);
+    expect(extent.hi).toBe(80);
+  });
+
+  it("opens up a degenerate value span so a flat series still centres", () => {
+    const extent = seriesExtent([
+      { at: DAY, value: 50 },
+      { at: 2 * DAY, value: 50 },
+    ]);
+    expect(extent.lo).toBeLessThan(50);
+    expect(extent.hi).toBeGreaterThan(50);
+  });
+
+  it("opens up a degenerate time span for a single reading", () => {
+    const extent = seriesExtent([{ at: DAY, value: 50 }]);
+    expect(extent.tHi - extent.tLo).toBe(24 * 3_600_000);
+    expect((extent.tLo + extent.tHi) / 2).toBe(DAY);
+  });
+
+  it("returns a usable default extent for an empty series", () => {
+    const extent = seriesExtent([]);
+    expect(extent.lo).toBeLessThan(extent.hi);
+    expect(extent.tLo).toBeLessThan(extent.tHi);
+  });
+});
+
+describe("seriesScale", () => {
+  it("maps extent corners to the padded box corners", () => {
+    const extent = { lo: 0, hi: 10, tLo: 0, tHi: 100 };
+    const scale = seriesScale(extent, 200, 100, 10);
+    expect(scale.x(0)).toBe(10);
+    expect(scale.x(100)).toBe(190);
+    expect(scale.y(0)).toBe(90);
+    expect(scale.y(10)).toBe(10);
+    expect(scale.x(50)).toBeCloseTo(100);
+    expect(scale.y(5)).toBeCloseTo(50);
+  });
+});
+
+describe("seriesMean", () => {
+  it("averages finite values and ignores non-finite ones", () => {
+    expect(seriesMean([2, 4, 6])).toBe(4);
+    expect(seriesMean([2, Number.NaN, 4])).toBe(3);
+  });
+
+  it("returns null when there is nothing to average", () => {
+    expect(seriesMean([])).toBeNull();
+  });
+});
+
+describe("periodDelta", () => {
+  const latest = 60 * DAY;
+  const points: SeriesPoint[] = [
+    { at: latest - 45 * DAY, value: 80 }, // prior window
+    { at: latest - 40 * DAY, value: 60 }, // prior window
+    { at: latest - 10 * DAY, value: 50 }, // recent window
+    { at: latest, value: 70 }, // recent window
+  ];
+
+  it("measures both windows back from the latest measurement, not the wall clock", () => {
+    const result = periodDelta(points, 30 * DAY)!;
+    expect(result.current).toBe(60);
+    expect(result.previous).toBe(70);
+    expect(result.delta).toBe(-10);
+  });
+
+  it("reports a null delta when the prior window has no data", () => {
+    const result = periodDelta(points.slice(2), 30 * DAY)!;
+    expect(result.current).toBe(60);
+    expect(result.previous).toBeNull();
+    expect(result.delta).toBeNull();
+  });
+
+  it("excludes readings exactly on the window boundary from the recent window", () => {
+    const boundary: SeriesPoint[] = [
+      { at: latest - 30 * DAY, value: 100 },
+      { at: latest, value: 50 },
+    ];
+    const result = periodDelta(boundary, 30 * DAY)!;
+    expect(result.current).toBe(50);
+    expect(result.previous).toBe(100);
+  });
+
+  it("returns null for an empty series", () => {
+    expect(periodDelta([], 30 * DAY)).toBeNull();
+  });
+});
+
+describe("seriesLinePath / seriesAreaPath", () => {
+  const placed = [
+    { x: 0, y: 10 },
+    { x: 5, y: 0 },
+    { x: 10, y: 10 },
+  ];
+
+  it("builds a move/line path", () => {
+    expect(seriesLinePath(placed)).toBe("M0.00,10.00 L5.00,0.00 L10.00,10.00");
+  });
+
+  it("closes the area path along the baseline", () => {
+    expect(seriesAreaPath(placed, 12)).toBe(
+      "M0.00,10.00 L5.00,0.00 L10.00,10.00L10.00,12L0.00,12Z",
+    );
+  });
+
+  it("draws no area for fewer than two points", () => {
+    expect(seriesAreaPath([{ x: 0, y: 0 }], 12)).toBe("");
+  });
+});

package/src/lib/series.ts

@@ -0,0 +1,174 @@
+/**
+ * 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;
+}
+
+const asTime = (at: number | string | Date): number | null => {
+  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. */
+export function normalizeSeries(
+  points: readonly SeriesPointInput[],
+): SeriesPoint[] {
+  const normalized: SeriesPoint[] = [];
+  for (const point of points) {
+    const at = asTime(point.at);
+    if (at === null || !Number.isFinite(point.value)) continue;
+    const { value2 } = point;
+    normalized.push(
+      value2 !== undefined && Number.isFinite(value2)
+        ? { at, value: point.value, value2 }
+        : { at, value: point.value },
+    );
+  }
+  return normalized.sort((a, b) => a.at - b.at);
+}
+
+export interface SeriesExtent {
+  /** Padded value domain. */
+  lo: number;
+  hi: number;
+  /** Time domain, never degenerate. */
+  tLo: number;
+  tHi: number;
+}
+
+const TWELVE_HOURS_MS = 12 * 3_600_000;
+
+/**
+ * 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 function seriesExtent(
+  points: readonly SeriesPoint[],
+  options: { padding?: number; include?: readonly number[] } = {},
+): SeriesExtent {
+  const values = [
+    ...points.flatMap((point) =>
+      point.value2 === undefined ? [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 ?? 0.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 };
+}
+
+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 function seriesScale(
+  extent: SeriesExtent,
+  width: number,
+  height: number,
+  pad: number,
+): SeriesScale {
+  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),
+  };
+}
+
+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 function seriesMean(values: readonly number[]): number | null {
+  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.
+ */
+export function periodDelta(
+  points: readonly SeriesPoint[],
+  windowMs: number,
+): PeriodDelta | null {
+  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. */
+export function seriesLinePath(points: ReadonlyArray<{ x: number; y: number }>): string {
+  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. */
+export function seriesAreaPath(
+  points: ReadonlyArray<{ x: number; y: number }>,
+  baseline: number,
+): string {
+  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`;
+}

package/src/presentation.ts

@@ -116,6 +116,20 @@ export const metricLayouts = {
   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",
 } as const;
 
+/** 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 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",
+} as const;
+
 export const dialogPresentation = {
   overlay: "fixed inset-0 z-50 bg-black/40",
   transition: surfaceMotion,