@tangle-network/ui 11.49.0 → 11.50.2

package/dist/primitives/settings.js

@@ -6,19 +6,20 @@ import { Label } from "./label.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { InfoTip } from "./info-tip.js";
 import { fieldMessageId } from "./field.js";
+import { StatusGlyph } from "./status-pill.js";
 import * as React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CircleAlert, Ellipsis, Lock } from "lucide-react";
+import { CircleAlert, Ellipsis, Lock, TriangleAlert } from "lucide-react";
 // src/primitives/settings.tsx
 const SCROLL_OFFSET = "scroll-mt-[calc(var(--shell-header-height)_+_1rem)]";
+const GUTTER = "px-5 py-4 @max-[34rem]/settings-section:px-4";
 const DIVIDED = "not-first:border-t not-first:border-[color:var(--border-subtle)]";
 const ERROR_TEXT = "text-[color:var(--surface-danger-text)]";
-function ErrorLine({ id, className, children }) {
+function GlyphLine({ icon: Icon, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
-		id,
-		role: "alert",
-		className: cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", ERROR_TEXT, className),
-		children: [/* @__PURE__ */ jsx(CircleAlert, {
+		...props,
+		className: cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", className),
+		children: [/* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": "true",
 			className: "mt-0.5 size-4 shrink-0"
 		}), /* @__PURE__ */ jsx("div", {
@@ -27,18 +28,32 @@ function ErrorLine({ id, className, children }) {
 		})]
 	});
 }
-function LockLine({ id, className, children }) {
-	return /* @__PURE__ */ jsxs("div", {
-		id,
-		className: cn("flex items-start gap-1.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]", className),
-		children: [/* @__PURE__ */ jsx(Lock, {
-			"aria-hidden": "true",
-			className: "mt-0.5 size-4 shrink-0"
-		}), /* @__PURE__ */ jsx("div", {
-			className: "min-w-0",
-			children
-		})]
-	});
+const ErrorLine = ({ className, ...props }) => /* @__PURE__ */ jsx(GlyphLine, {
+	icon: CircleAlert,
+	role: "alert",
+	className: cn(ERROR_TEXT, className),
+	...props
+});
+const LockLine = ({ className, ...props }) => /* @__PURE__ */ jsx(GlyphLine, {
+	icon: Lock,
+	className: cn("text-muted-foreground", className),
+	...props
+});
+const TOKEN_BREAK = /(?<=[/@])(?=[^/])|(?<=[\p{L}\p{N}])(?=[.\-_?#&=][\p{L}\p{N}])/u;
+function breakTokens(node) {
+	if (typeof node === "string") {
+		if (!TOKEN_BREAK.test(node)) return node;
+		return node.split(/(\s+)/).map((word, index) => {
+			const parts = word.split(TOKEN_BREAK);
+			return parts.length < 2 ? word : /* @__PURE__ */ jsx("span", {
+				className: "inline-block max-w-full [text-decoration:inherit]",
+				children: parts.map((part, at) => /* @__PURE__ */ jsxs(React.Fragment, { children: [at > 0 && /* @__PURE__ */ jsx("wbr", {}), part] }, at))
+			}, index);
+		});
+	}
+	if (Array.isArray(node)) return React.Children.map(node, breakTokens);
+	if (React.isValidElement(node) && node.props.children != null && typeof node.props.children !== "function") return React.cloneElement(node, void 0, breakTokens(node.props.children));
+	return node;
 }
 const ROW_COLUMNS = {
 	inline: "grid-cols-[minmax(0,1fr)_minmax(13rem,20rem)] @max-[34rem]/settings-section:grid-cols-1",
@@ -73,7 +88,7 @@ function SettingsRow(props) {
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		"data-layout": layout,
-		className: cn("grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4", SCROLL_OFFSET, DIVIDED, ROW_COLUMNS[hasValue && layout === "compact" ? "inline" : layout]),
+		className: cn("grid min-w-0 items-center gap-x-8 gap-y-3", GUTTER, SCROLL_OFFSET, DIVIDED, ROW_COLUMNS[hasValue && layout === "compact" ? "inline" : layout]),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -121,7 +136,7 @@ function SettingsRow(props) {
 			children: [hasValue && /* @__PURE__ */ jsx("span", {
 				"data-slot": "settings-value",
 				className: cn("min-w-0 text-foreground text-sm [overflow-wrap:anywhere] @min-[34rem]/settings-section:text-right", mono && "font-mono"),
-				children: value
+				children: breakTokens(value)
 			}), control]
 		})]
 	});
@@ -142,7 +157,7 @@ function SettingsSection({ id, title, description, info, actions, tone = "defaul
 		className: cn("@container/settings-section min-w-0", SCROLL_OFFSET, danger && "border-[color:var(--surface-danger-border)]"),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between gap-4 px-5 py-4 @max-[34rem]/settings-section:flex-wrap @max-[34rem]/settings-section:px-4",
+				className: cn("flex items-start justify-between gap-4 @max-[34rem]/settings-section:flex-wrap", GUTTER),
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -173,6 +188,35 @@ function SettingsSection({ id, title, description, info, actions, tone = "defaul
 		]
 	});
 }
+const NOTE_TONE = {
+	default: "text-foreground",
+	muted: "text-muted-foreground",
+	warning: "text-[color:var(--surface-warning-text)]",
+	danger: ERROR_TEXT
+};
+const NOTE_GLYPH = {
+	warning: TriangleAlert,
+	danger: CircleAlert
+};
+/**
+* A line or block of a {@link SettingsSection} that is not a row: an empty list, a loading line,
+* a notice, a refusal or a figure. It takes the rows' gutters and divider, so it lines up with
+* the rows and lists around it.
+*/
+function SettingsNote({ tone = "default", role, children }) {
+	const className = cn("min-w-0", GUTTER, DIVIDED, NOTE_TONE[tone]);
+	const glyph = NOTE_GLYPH[tone];
+	return glyph ? /* @__PURE__ */ jsx(GlyphLine, {
+		icon: glyph,
+		role,
+		className,
+		children
+	}) : /* @__PURE__ */ jsx("div", {
+		role,
+		className: cn("text-sm leading-5 [overflow-wrap:anywhere]", className),
+		children
+	});
+}
 const LIST_SLOTS = [
 	"leading",
 	"main",
@@ -251,7 +295,7 @@ const NARROW_STATUS = "@max-[34rem]/settings-section:col-start-[main] @max-[34re
 * that name. Without a status column the state follows the meta, and without
 * a menu column the ⋯ menu ends the action cell.
 */
-function SettingsListItem({ leading, title, meta, status, error, action, menu }) {
+function SettingsListItem({ leading, title, meta, status, tone, error, action, menu }) {
 	const columns = React.useContext(SettingsListContext);
 	const titleId = React.useId();
 	const reasonId = `${titleId}-reason`;
@@ -268,6 +312,11 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 		onClick: locked ? void 0 : action.onSelect,
 		children: action.label
 	});
+	const state = tone && status != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StatusGlyph, { tone }), /* @__PURE__ */ jsx("span", {
+		className: "min-w-0",
+		children: status
+	})] }) : status;
+	const toned = tone && "flex items-center gap-1.5";
 	const actionCell = (actionButton || menuNode && !columns.menu) && /* @__PURE__ */ jsxs(Fragment$1, { children: [actionButton, !columns.menu && menuNode] });
 	return /* @__PURE__ */ jsxs("li", {
 		className: cn("col-span-full grid grid-cols-subgrid items-center px-5 py-3 @max-[34rem]/settings-section:px-4", DIVIDED),
@@ -282,15 +331,15 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 					/* @__PURE__ */ jsx("div", {
 						id: titleId,
 						className: "font-medium text-sm leading-5 text-foreground [overflow-wrap:anywhere] [&_a]:rounded-sm [&_a]:text-foreground [&_a]:underline-offset-4 [&_a:hover]:underline [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[var(--focus-border)]",
-						children: title
+						children: breakTokens(title)
 					}),
 					meta != null && /* @__PURE__ */ jsx("div", {
 						className: "text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
-						children: meta
+						children: breakTokens(meta)
 					}),
 					status != null && !columns.status && /* @__PURE__ */ jsx("div", {
-						className: "mt-1 text-sm leading-5 text-muted-foreground",
-						children: status
+						className: cn("mt-1 text-sm leading-5 text-muted-foreground", toned),
+						children: state
 					}),
 					locked && /* @__PURE__ */ jsx(LockLine, {
 						id: reasonId,
@@ -304,8 +353,8 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 				children: error
 			}),
 			status != null && columns.status && /* @__PURE__ */ jsx("div", {
-				className: cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", NARROW_STATUS),
-				children: status
+				className: cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", toned, NARROW_STATUS),
+				children: state
 			}),
 			actionCell && /* @__PURE__ */ jsx("div", {
 				className: "col-start-[action] row-start-1 flex min-w-0 items-center justify-end gap-1",
@@ -318,4 +367,4 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 		]
 	});
 }
-export { SettingsList, SettingsListItem, SettingsRow, SettingsSection };
+export { SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection };

package/dist/primitives/status-pill.js

@@ -107,15 +107,24 @@ function ToneGlyph({ tone }) {
 		});
 	}
 }
+const GLYPH = "inline-flex [&>svg]:size-3 [&>svg]:shrink-0";
+/** The tone's glyph in the tone's ink, before a label that keeps its own colour, as `bare` draws it. */
+function StatusGlyph({ tone }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn(GLYPH, TONE_TEXT[tone]),
+		children: /* @__PURE__ */ jsx(ToneGlyph, { tone })
+	});
+}
 const StatusPill = React.forwardRef(({ className, tone, children, icon, bare = false, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs("span", {
 	ref,
 	className: cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-full font-medium", size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm", bare ? "border border-transparent bg-transparent px-0" : cn("border", TONE_SURFACE[tone]), className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cn("inline-flex [&>svg]:size-3 [&>svg]:shrink-0", bare && TONE_TEXT[tone]),
+		className: cn(GLYPH, bare && TONE_TEXT[tone]),
 		children: icon ?? /* @__PURE__ */ jsx(ToneGlyph, { tone })
 	}), children]
 }));
 StatusPill.displayName = "StatusPill";
-export { StatusPill };
+export { StatusGlyph, StatusPill };

package/dist/primitives.d.ts

@@ -45,11 +45,11 @@ import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { Field, FieldProps, fieldMessageId } from "./primitives/field.js";
-import { SettingsList, SettingsListAction, SettingsListColumns, SettingsListItem, SettingsListItemProps, SettingsListMenuItem, SettingsListProps, SettingsRow, SettingsRowLayout, SettingsRowProps, SettingsSection, SettingsSectionProps } from "./primitives/settings.js";
+import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { SettingsList, SettingsListAction, SettingsListColumns, SettingsListItem, SettingsListItemProps, SettingsListMenuItem, SettingsListProps, SettingsNote, SettingsNoteProps, SettingsRow, SettingsRowLayout, SettingsRowProps, SettingsSection, SettingsSectionProps } from "./primitives/settings.js";
 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";
@@ -62,4 +62,4 @@ import { SeriesSparkline, SeriesSparklineProps } from "./primitives/series-spark
 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, 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 };
+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, SettingsNote, type SettingsNoteProps, 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

@@ -43,11 +43,11 @@ import { InlineCode } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { Field, fieldMessageId } from "./primitives/field.js";
-import { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./primitives/settings.js";
+import { StatusPill } from "./primitives/status-pill.js";
+import { SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection } from "./primitives/settings.js";
 import { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
-import { StatusPill } from "./primitives/status-pill.js";
 import { ComplianceBadge } from "./primitives/compliance-badge.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
@@ -62,4 +62,4 @@ 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, 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 };
+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, SettingsNote, 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.49.0",
+  "version": "11.50.2",
   "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.30.0",
+    "@tangle-network/brand": "^1.31.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/chat/agent-timeline.test.tsx

@@ -307,3 +307,12 @@ describe("transcript type scale", () => {
     expect(textClasses(agent)).toEqual(textClasses(user))
   })
 })
+
+describe("AgentTimeline status cards", () => {
+  it("marks a failed card with the failed glyph and keeps the triangle for warnings", () => {
+    const glyph = (tone: "error" | "warning") =>
+      render(<AgentTimeline items={[{ id: tone, kind: "status", label: tone, tone }]} />).container.querySelector("svg")?.getAttribute("class")
+    expect(glyph("error")).toContain("lucide-circle-x")
+    expect(glyph("warning")).toContain("lucide-triangle-alert")
+  })
+})

package/src/chat/agent-timeline.tsx

@@ -2,7 +2,6 @@ import { TRANSCRIPT_TEXT } from "./transcript-text";
 import { useState, type KeyboardEvent, type ReactNode } from "react";
 import {
   AlertTriangle,
-  CheckCircle2,
   CircleDot,
   FileText,
   Info,
@@ -16,6 +15,7 @@ import { Markdown } from "../markdown/markdown";
 import { ThinkingIndicator } from "./thinking-indicator";
 import { type ToolCallData } from "../run/tool-call-feed";
 import { ToolCallGroup, ToolCallStep } from "../run/tool-call-step";
+import { statusMeta } from "../run/status-meta";
 import type { ChatAuthor } from "../types/message";
 import type { ToolPart } from "../types/parts";
 
@@ -132,7 +132,7 @@ const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; suppo
     card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
     text: "text-[var(--surface-success-text)]",
     supportingText: "text-[var(--surface-success-text)]",
-    icon: CheckCircle2,
+    icon: statusMeta("done").icon,
   },
   warning: {
     card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
@@ -144,7 +144,8 @@ const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; suppo
     card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
     text: "text-[var(--surface-danger-text)]",
     supportingText: "text-[var(--surface-danger-text)]",
-    icon: AlertTriangle,
+    // Failed is always the failed glyph; the triangle is for warnings.
+    icon: statusMeta("failed").icon,
   },
 };
 

package/src/chat/speaker.test.tsx

@@ -52,6 +52,7 @@ describe("SpeakerHeader", () => {
     expect(screen.getByText("@writer")).toBeInTheDocument()
     expect(screen.getByText("Answering")).toBeInTheDocument()
     expect(container.querySelector("[data-speaker-state]")?.getAttribute("data-speaker-state")).toBe("answering")
+    expect(container.querySelector("[data-run-status]")?.getAttribute("data-run-status")).toBe("running")
   })
 
   it("says nothing more once the responder has ended, even while others answer", () => {
@@ -62,8 +63,9 @@ describe("SpeakerHeader", () => {
   })
 
   it("shows a failed responder as failed while the turn still runs", () => {
-    render(<SpeakerHeader speaker={{ id: "ap_research", name: "Research Lead", state: "failed" }} live />)
+    const { container } = render(<SpeakerHeader speaker={{ id: "ap_research", name: "Research Lead", state: "failed" }} live />)
     expect(screen.getByText("Failed")).toBeInTheDocument()
+    expect(container.querySelector("[data-run-status]")?.getAttribute("data-run-status")).toBe("failed")
     expect(screen.queryByText("Answering")).not.toBeInTheDocument()
   })
 

package/src/chat/speaker.tsx

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "react";
-import { StatusPill } from "../primitives/status-pill";
+import { RunStatusIcon } from "../run/status-meta";
 import { MessageAuthor } from "./message-author";
 
 /** Where one responder is in its answer. */
@@ -79,9 +79,9 @@ export interface SpeakerHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * gets, then the handle a person types to address the agent, then its state.
  *
  * The state comes from the speaker's own end state, else from `live`. An
- * answering responder shows the status grammar's open ring with the word, a
- * failed one its cross with the word, and a finished one nothing, as a settled
- * run row does. `data-speaker-state` carries all three.
+ * answering responder shows the running glyph with the word, a failed one the
+ * failed glyph with the word, both from `RunStatusIcon`, and a finished one
+ * nothing, as a settled run row does. `data-speaker-state` carries all three.
  */
 export function SpeakerHeader({ speaker, live = false, ...props }: SpeakerHeaderProps) {
   const state: SpeakerState = speaker.state ?? (live ? "answering" : "done");
@@ -92,19 +92,18 @@ export function SpeakerHeader({ speaker, live = false, ...props }: SpeakerHeader
       {...props}
     >
       {speaker.handle ? (
-        <span className="min-w-0 truncate text-muted-foreground text-sm" title={`@${speaker.handle}`}>
+        // A person reads the name first. The handle has no base width and grows only into the space
+        // the name and state leave, up to its own width, so it gives way before the name loses a pixel.
+        <span className="min-w-0 max-w-fit flex-1 truncate text-muted-foreground text-sm" title={`@${speaker.handle}`}>
           @{speaker.handle}
         </span>
       ) : null}
-      {state === "answering" ? (
-        <StatusPill tone="running" bare size="md" className="shrink-0 py-0">
-          Answering
-        </StatusPill>
-      ) : state === "failed" ? (
-        <StatusPill tone="danger" bare size="md" className="shrink-0 py-0">
-          Failed
-        </StatusPill>
-      ) : null}
+      {state === "done" ? null : (
+        <span className="inline-flex shrink-0 items-center gap-1.5 font-medium text-sm">
+          <RunStatusIcon status={state === "failed" ? "failed" : "running"} aria-hidden />
+          {state === "failed" ? "Failed" : "Answering"}
+        </span>
+      )}
     </MessageAuthor>
   );
 }

package/src/lib/code-presentation.ts

@@ -142,7 +142,7 @@ export const codePresentation = {
   tabs: `tangle-code-tabs ${tabsPresentation.list.underline}`,
   tab: tabsPresentation.trigger.underline,
   root: "group relative min-w-0 overflow-hidden rounded-lg border font-mono bg-card border-border",
-  header: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-3 py-1.5 bg-[var(--code-header-bg,hsl(var(--background)))]",
+  header: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-3 py-1.5 font-sans text-sm bg-[var(--code-header-bg,hsl(var(--background)))]",
   copy: "flex items-center justify-center min-w-8 min-h-8 pointer-coarse:min-w-11 pointer-coarse:min-h-11 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors data-[copy-loading=true]:after:content-['…'] data-[copy-loading=true]:gap-1",
   copyStatus: "sr-only data-[copy-long-work=true]:not-sr-only data-[copy-long-work=true]:text-xs data-[copy-long-work=true]:text-muted-foreground",
 };

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

@@ -188,12 +188,6 @@ describe("CodeBlock", () => {
     expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
   });
 
-  it("renders the header label at the 14px text-sm step", () => {
-    const { getByText } = render(<CodeBlock code={"x"} label="YAML" />);
-    expect(getByText("YAML").className).toContain("text-sm");
-    expect(getByText("YAML").className).not.toContain("calc(");
-  });
-
   it("announces a failed copy", async () => {
     const writeText = vi.fn().mockRejectedValue(new Error("denied"));
     Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });

package/src/markdown/code-block.tsx

@@ -83,13 +83,13 @@ export const CodeBlock = memo(
           <div className={codePresentation.header}>
             {metadata && <span className="tangle-api-meta">{apiMetadataText(metadata)}</span>}
             {filename ? (
-              <span className="flex min-w-0 items-center gap-2 font-sans text-sm">
+              <span className="flex min-w-0 items-center gap-2">
                 <FileCode2 aria-hidden className="size-4 shrink-0 text-muted-foreground" />
                 <span className="min-w-0 truncate font-mono font-medium text-foreground" title={filename}>{filename}</span>
                 {languageName && <span className="shrink-0 text-muted-foreground">{languageName}</span>}
               </span>
             ) : (
-              <span className="font-sans text-sm font-medium text-muted-foreground">{headerLabel}</span>
+              <span className="font-medium text-muted-foreground">{headerLabel}</span>
             )}
             {children}
             {examples?.length ? <CopyButton text={code}/> : null}
@@ -169,7 +169,8 @@ export const CopyButton = memo(({ text, label: actionLabel, copiedLabel="Copied"
         onClick={handleCopy}
         className={cn(
           codePresentation.copy,
-          actionLabel && "gap-2 px-3",
+          // The header's type, not the code font the block sets.
+          actionLabel && "gap-2 px-3 font-sans text-sm",
           focusRing,
           className,
         )}

package/src/markdown/markdown.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Markdown } from './markdown'
 import { CodeBlock, CopyButton } from './code-block'
+import { codePresentation } from '../lib/code-presentation'
 
 // ─── Markdown ────────────────────────────────────────────────────────────────
 
@@ -221,6 +222,25 @@ export const CodeBlockOnly: Story = {
   ),
 }
 
+export const CodeBlockLabelledCopy: Story = {
+  name: 'CodeBlock — labelled copy action',
+  render: () => (
+    <div className="w-full max-w-[680px] p-6 rounded-xl bg-card">
+      <CodeBlock code={`<script src="https://embed.tangle.tools/agent.js" data-agent="support"></script>`} language="html" label="HTML">
+        <CopyButton text={`<script src="https://embed.tangle.tools/agent.js" data-agent="support"></script>`} label="Copy embed code" />
+      </CodeBlock>
+      {/* A server-rendered host (tangle-router) builds the same header from codePresentation alone. */}
+      <div className={`${codePresentation.root} mt-4`}>
+        <div className={codePresentation.header}>
+          <span>bash</span>
+          <button type="button" className={codePresentation.copy}>Copy</button>
+        </div>
+        <pre className="p-3"><code>export TANGLE_API_KEY="sk-tan-..."</code></pre>
+      </div>
+    </div>
+  ),
+}
+
 export const CodeBlockNoLanguage: Story = {
   name: 'CodeBlock — no language',
   render: () => (

package/src/presentation.ts

@@ -110,6 +110,7 @@ export const metricPresentation = {
 } as const;
 
 export const metricLayouts = {
+  2: "grid-cols-1 sm:grid-cols-2 max-sm:[&>div+div]:border-t sm:[&>div:not(:nth-child(2n+1))]:border-l",
   3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l",
   4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l",
   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",
@@ -180,6 +181,73 @@ export function bindDialog(dialog: HTMLDialogElement, trigger: HTMLElement): ()
   return () => {trigger.removeEventListener("click",show);dialog.removeEventListener("close",close);dialog.removeEventListener("click",click);dialog.removeEventListener("keydown",key);};
 }
 
+/**
+ * The settings section links of PageShell `measure="settings"`, for any host: PageShell binds its
+ * nav with it, and a server-rendered host binds the same markup. On the tab strip the current link
+ * (`aria-current="page"`) is centred by scrolling the strip only, never the page. It centres when
+ * the current link changes or first becomes reachable, never on scroll or on a change that keeps
+ * the same current link, so a user who scrolled to the first or last section stays there; resize
+ * and font swaps re-centre only until the user first scrolls the strip. A plain click on a link to
+ * another document makes it current at once, while that document loads, and a page restored from
+ * the back-forward cache shows the link it left.
+ */
+export function bindSettingsNav(nav: HTMLElement): () => void {
+  let centredKey: string | null = null;
+  let userScrolled = false;
+  let left: { from: Element | null; to: Element } | null = null;
+  const current = () => nav.querySelector<HTMLElement>('[aria-current="page"]');
+  const reveal = (layoutOnly: boolean) => {
+    const link = current();
+    if (nav.scrollWidth <= nav.clientWidth || !link) return;
+    const key = link.getAttribute("href") ?? link.textContent ?? "";
+    if (key !== centredKey) userScrolled = false;
+    else if (!layoutOnly || userScrolled) return;
+    centredKey = key;
+    const strip = nav.getBoundingClientRect(), box = link.getBoundingClientRect();
+    nav.scrollLeft += box.left + box.width / 2 - (strip.left + strip.width / 2);
+  };
+  const mark = (from: Element | null, to: Element | null) => { from?.removeAttribute("aria-current"); to?.setAttribute("aria-current", "page"); };
+  // On window, so it runs after the page's own handlers: a client router that took the click
+  // (preventDefault) sets the current link itself.
+  const click = (event: MouseEvent) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+    if (!(link instanceof HTMLAnchorElement) || !nav.contains(link) || (link.target && link.target !== "_self") || link.hasAttribute("download")) return;
+    if (link.origin !== location.origin || link.pathname + link.search === location.pathname + location.search) return;
+    const from = current();
+    if (from === link) return;
+    left = { from, to: link };
+    mark(from, link);
+  };
+  const restore = (event: PageTransitionEvent) => {
+    if (!event.persisted || !left) return;
+    mark(left.to, left.from);
+    left = null;
+  };
+  const onUser = () => { userScrolled = true; };
+  const userEvents = ["pointerdown", "touchstart", "wheel", "keydown"] as const;
+  for (const type of userEvents) nav.addEventListener(type, onUser, { passive: true });
+  window.addEventListener("click", click);
+  window.addEventListener("pageshow", restore);
+  let live = true;
+  reveal(false);
+  // A web font swap widens the tabs without resizing the strip.
+  void document.fonts?.ready.then(() => { if (live) reveal(true); });
+  const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => reveal(true));
+  resize?.observe(nav);
+  // Links a host replaces (sections loaded later, a new aria-current) can change the current link.
+  const links = new MutationObserver(() => reveal(false));
+  links.observe(nav, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["aria-current"] });
+  return () => {
+    live = false;
+    resize?.disconnect();
+    links.disconnect();
+    for (const type of userEvents) nav.removeEventListener(type, onUser);
+    window.removeEventListener("click", click);
+    window.removeEventListener("pageshow", restore);
+  };
+}
+
 export const labelVariants = cva(
   "font-medium text-[length:var(--font-size-label,0.875rem)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );

package/src/primitives/index.ts

@@ -203,13 +203,14 @@ export type { PageShellProps } from "./page-shell";
 export { Field, fieldMessageId } from "./field";
 export type { FieldProps } from "./field";
 
-export { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./settings";
+export { SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection } from "./settings";
 export type {
   SettingsListAction,
   SettingsListColumns,
   SettingsListItemProps,
   SettingsListMenuItem,
   SettingsListProps,
+  SettingsNoteProps,
   SettingsRowLayout,
   SettingsRowProps,
   SettingsSectionProps,

package/src/primitives/metric-strip.tsx

@@ -8,8 +8,8 @@ export interface MetricStripProps
   extends React.HTMLAttributes<HTMLDListElement> {
   children: React.ReactNode;
   /** Desktop columns. Default retains the existing two / sm:four layout.
-   * Five and six use three columns between sm and lg. Never inferred from data. */
-  columns?: 3 | 4 | 5 | 6;
+   * Two stack below sm; five and six use three columns between sm and lg. Never inferred from data. */
+  columns?: 2 | 3 | 4 | 5 | 6;
 }
 
 const MetricStrip = React.forwardRef<HTMLDListElement, MetricStripProps>(