@tangle-network/ui 11.51.20 → 11.51.22

package/dist/primitives/theme-toggle.js

@@ -25,7 +25,6 @@ const namedModes = [
 		light: "agents-light"
 	}
 ];
-let preference;
 function isTheme(value) {
 	return value === "light" || value === "dark" || value === "system";
 }
@@ -33,88 +32,129 @@ function getSystemTheme() {
 	if (typeof window === "undefined" || !window.matchMedia) return "dark";
 	return window.matchMedia(systemQuery).matches ? "dark" : "light";
 }
-function getServerTheme() {
-	return "system";
-}
-function getServerMode() {
-	return "dark";
-}
-function readInitialTheme() {
-	try {
-		const stored = window.localStorage.getItem("theme");
-		if (isTheme(stored)) return stored;
-	} catch {}
-	const root = document.documentElement;
-	const named = root.getAttribute("data-theme");
-	if (named === "light" || named === "dark") return named;
-	for (const pair of namedModes) {
-		if (named === pair.light) return "light";
-		if (named === pair.dark) return "dark";
-	}
-	if (root.classList.contains("light")) return "light";
-	if (root.classList.contains("dark")) return "dark";
-	const legacy = root.getAttribute("data-sandbox-theme");
-	if (legacy === "vault" || legacy === "dawn") return "light";
-	return "system";
-}
-function getTheme() {
-	if (typeof window === "undefined") return "system";
-	return preference ??= readInitialTheme();
-}
-function applyMode(mode) {
-	const root = document.documentElement;
-	root.classList.toggle("dark", mode === "dark");
-	root.classList.toggle("light", mode === "light");
-	const named = root.getAttribute("data-theme");
-	if (named === "dark" || named === "light") root.setAttribute("data-theme", mode);
-	else {
-		const pair = namedModes.find((pair) => named === pair.dark || named === pair.light);
-		if (pair) root.setAttribute("data-theme", pair[mode]);
-	}
-}
-function setTheme(next) {
-	if (!isTheme(next) || typeof window === "undefined") return;
-	preference = next;
-	try {
-		if (next === "system") window.localStorage.removeItem("theme");
-		else window.localStorage.setItem("theme", next);
-	} catch {}
-	applyMode(next === "system" ? getSystemTheme() : next);
-	window.dispatchEvent(new Event(preferenceEvent));
-}
-function subscribeTheme(notify) {
-	const onStorage = (event) => {
-		if (event.key !== "theme" && event.key !== null) return;
-		preference = isTheme(event.newValue) ? event.newValue : "system";
-		notify();
-	};
-	window.addEventListener(preferenceEvent, notify);
-	window.addEventListener("storage", onStorage);
-	return () => {
-		window.removeEventListener(preferenceEvent, notify);
-		window.removeEventListener("storage", onStorage);
-	};
-}
 function subscribeSystem(notify) {
 	if (!window.matchMedia) return () => {};
 	const media = window.matchMedia(systemQuery);
 	media.addEventListener("change", notify);
 	return () => media.removeEventListener("change", notify);
 }
-function useTheme() {
-	const theme = useSyncExternalStore(subscribeTheme, getTheme, getServerTheme);
-	const system = useSyncExternalStore(subscribeSystem, getSystemTheme, getServerMode);
-	const resolvedTheme = theme === "system" ? system : theme;
-	useEffect(() => {
-		const selected = getTheme();
-		applyMode(selected === "system" ? getSystemTheme() : selected);
-	}, [resolvedTheme]);
+/** Create once at module scope. Each product owns its persisted names, not a second theme engine. */
+function createThemeController({ storageKey = "theme", defaultTheme = "system", storageValues, attribute } = {}) {
+	const values = {
+		light: "light",
+		dark: "dark",
+		system: null,
+		...storageValues
+	};
+	const eventName = `${preferenceEvent}:${storageKey}`;
+	let preference;
+	let persisted;
+	const decode = (value) => Object.keys(values).find((theme) => value !== null && values[theme] === value) ?? (value === "system" && values.system === null ? "system" : defaultTheme);
+	const serverTheme = () => defaultTheme;
+	const serverMode = () => defaultTheme === "system" ? "dark" : defaultTheme;
+	function readInitialTheme() {
+		try {
+			const stored = window.localStorage.getItem(storageKey);
+			persisted = stored;
+			if (stored !== null && (Object.values(values).includes(stored) || stored === "system" && values.system === null)) return decode(stored);
+		} catch {}
+		if (attribute || defaultTheme !== "system") return defaultTheme;
+		const root = document.documentElement;
+		const named = root.getAttribute("data-theme");
+		if (named === "light" || named === "dark") return named;
+		for (const pair of namedModes) {
+			if (named === pair.light) return "light";
+			if (named === pair.dark) return "dark";
+		}
+		if (root.classList.contains("light")) return "light";
+		if (root.classList.contains("dark")) return "dark";
+		const legacy = root.getAttribute("data-sandbox-theme");
+		return legacy === "vault" || legacy === "dawn" ? "light" : defaultTheme;
+	}
+	function getTheme() {
+		if (typeof window === "undefined") return defaultTheme;
+		if (preference === void 0) return preference = readInitialTheme();
+		try {
+			const stored = window.localStorage.getItem(storageKey);
+			if (stored !== persisted) {
+				persisted = stored;
+				preference = decode(stored);
+			}
+		} catch {}
+		return preference;
+	}
+	/** Apply a temporary page mode without overwriting the user's preference. */
+	function applyTheme(theme = getTheme()) {
+		if (typeof document === "undefined") return;
+		const mode = theme === "system" ? getSystemTheme() : theme;
+		const root = document.documentElement;
+		root.classList.toggle("dark", mode === "dark");
+		root.classList.toggle("light", !attribute && mode === "light");
+		if (attribute) {
+			const value = attribute[mode];
+			if (value === void 0) root.removeAttribute(attribute.name);
+			else root.setAttribute(attribute.name, value);
+		} else {
+			const named = root.getAttribute("data-theme");
+			if (named === "dark" || named === "light") root.setAttribute("data-theme", mode);
+			else {
+				const pair = namedModes.find((pair) => named === pair.dark || named === pair.light);
+				if (pair) root.setAttribute("data-theme", pair[mode]);
+			}
+		}
+	}
+	function setTheme(next) {
+		if (!isTheme(next) || typeof window === "undefined") return;
+		preference = next;
+		try {
+			const value = values[next];
+			if (value === null) window.localStorage.removeItem(storageKey);
+			else window.localStorage.setItem(storageKey, value);
+			persisted = value;
+		} catch {}
+		applyTheme(next);
+		window.dispatchEvent(new CustomEvent(eventName, { detail: next }));
+	}
+	function subscribeTheme(notify) {
+		const onStorage = (event) => {
+			if (event.key !== storageKey && event.key !== null) return;
+			persisted = event.newValue;
+			preference = decode(event.newValue);
+			notify();
+		};
+		const onPreference = (event) => {
+			const next = event.detail;
+			if (isTheme(next)) preference = next;
+			notify();
+		};
+		window.addEventListener(eventName, onPreference);
+		window.addEventListener("storage", onStorage);
+		return () => {
+			window.removeEventListener(eventName, onPreference);
+			window.removeEventListener("storage", onStorage);
+		};
+	}
+	function useTheme() {
+		const theme = useSyncExternalStore(subscribeTheme, getTheme, serverTheme);
+		const system = useSyncExternalStore(subscribeSystem, getSystemTheme, serverMode);
+		const resolvedTheme = theme === "system" ? system : theme;
+		useEffect(() => {
+			applyTheme(getTheme());
+		}, [resolvedTheme]);
+		return {
+			theme,
+			setTheme,
+			resolvedTheme
+		};
+	}
 	return {
-		theme,
+		useTheme,
+		getTheme,
 		setTheme,
-		resolvedTheme
+		applyTheme
 	};
 }
+const { useTheme } = createThemeController();
 const iconClass = "h-4 w-4";
 function SunIcon() {
 	return /* @__PURE__ */ jsxs("svg", {
@@ -158,4 +198,4 @@ function ThemeToggle() {
 		children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {})
 	});
 }
-export { ThemeToggle, useTheme };
+export { ThemeToggle, createThemeController, useTheme };

package/dist/primitives.d.ts

@@ -19,7 +19,7 @@ import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
 import { Avatar, AvatarFallback, AvatarImage, AvatarProps } from "./primitives/avatar.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
-import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableProps, TableRow } from "./primitives/table.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeadProps, TableHeader, TableProps, TableRow } from "./primitives/table.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
 import { SegmentedControl, SegmentedControlOption, SegmentedControlProps } from "./primitives/segmented-control.js";
 import { Progress } from "./primitives/progress.js";
@@ -41,7 +41,7 @@ import { UploadFile, UploadProgress, UploadProgressProps } from "./primitives/up
 import { SidebarDropZone, SidebarDropZoneProps } from "./primitives/sidebar-drop-zone.js";
 import { CodeBlock, CodeBlockProps, CopyButton } from "./markdown/code-block.js";
 import { InlineCode, InlineCodeProps } from "./primitives/code-block.js";
-import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
+import { ThemeControllerOptions, ThemeToggle, createThemeController, 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";
@@ -63,4 +63,4 @@ import { ChartReferenceLine, MetricChart, MetricChartProps } from "./primitives/
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { ExpandablePanel, ExpandablePanelProps } from "./primitives/expandable-panel.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, ExpandablePanel, type ExpandablePanelProps, 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 };
+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, ExpandablePanel, type ExpandablePanelProps, 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, type TableHeadProps, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type ThemeControllerOptions, 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, createThemeController, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -40,7 +40,7 @@ import { SidebarDropZone } from "./primitives/sidebar-drop-zone.js";
 import { ArtifactPane } from "./primitives/artifact-pane.js";
 import { CodeBlock, CopyButton } from "./markdown/code-block.js";
 import { InlineCode } from "./primitives/code-block.js";
-import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
+import { ThemeToggle, createThemeController, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { Field, fieldMessageId } from "./primitives/field.js";
 import { StatusPill } from "./primitives/status-pill.js";
@@ -63,4 +63,4 @@ import { MetricChart } from "./primitives/metric-chart.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { ExpandablePanel } from "./primitives/expandable-panel.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, ExpandablePanel, 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 };
+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, ExpandablePanel, 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, createThemeController, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };

package/dist/utils/token-milliseconds.d.ts

@@ -0,0 +1,2 @@
+/** Resolve a scoped CSS time, including calc(); absent tokens remain unknown. */
+export declare function tokenMilliseconds(token: string, element?: Element | null): number | undefined;

package/dist/utils/token-milliseconds.js

@@ -0,0 +1,17 @@
+// src/utils/token-milliseconds.ts
+/** Resolve a scoped CSS time, including calc(); absent tokens remain unknown. */
+function tokenMilliseconds(token, element) {
+	const scope = element ?? (typeof document === "undefined" ? void 0 : document.documentElement), view = scope?.ownerDocument.defaultView;
+	if (!scope || !view || !view.getComputedStyle(scope).getPropertyValue(token).trim()) return void 0;
+	const probe = scope.ownerDocument.createElement("i");
+	probe.hidden = true;
+	scope.append(probe);
+	try {
+		probe.style.animationDuration = `var(${token})`;
+		const time = /^(\d+(?:\.\d+)?)(ms|s)$/.exec(view.getComputedStyle(probe).animationDuration);
+		return time ? Number(time[1]) * (time[2] === "s" ? 1e3 : 1) : void 0;
+	} finally {
+		probe.remove();
+	}
+}
+export { tokenMilliseconds };

package/dist/utils.d.ts

@@ -2,7 +2,8 @@ import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, i
 import { copyText } from "./utils/copy-text.js";
 import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration as formatSpanDuration, formatUtcTime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { timeAgo } from "./utils/time-ago.js";
+import { tokenMilliseconds } from "./utils/token-milliseconds.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { cn } from "./lib/utils.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, tokenMilliseconds, truncateText };

package/dist/utils.js

@@ -2,7 +2,8 @@ import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, i
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
 import { cn } from "./lib/utils.js";
 import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration as formatSpanDuration, formatUtcTime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
+import { tokenMilliseconds } from "./utils/token-milliseconds.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, tokenMilliseconds, truncateText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.20",
+  "version": "11.51.22",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -216,7 +216,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.31.8",
+    "@tangle-network/brand": "^1.31.11",
     "@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/hooks/index.ts

@@ -9,6 +9,6 @@ export * from "./use-realtime-session";
 export * from "./use-sdk-session";
 export * from "./use-sse-stream";
 
-export { useEventStream, type EventStreamHandlers, type EventStreamSource, type EventStreamOpener } from "./use-event-stream";
+export { openNativeStream, useEventStream, type EventStreamHandlers, type EventStreamSource, type EventStreamOpener } from "./use-event-stream";
 export { useFollowTail } from "./use-follow-tail";
 export { usePhone, PHONE_MEDIA } from "./use-phone";

package/src/hooks/use-event-stream.ts

@@ -15,7 +15,6 @@ export interface EventStreamHandlers {
   onLiveChange?: (live: boolean) => void
 }
 
-/** Internal policy preserves the buffered hook's existing bounded exponential retries. */
 type NativePolicy = EventStreamHandlers & { terminalEvent?: string; onConnecting?: (attempt: number) => void; retryDelay?: (attempt: number) => number | undefined }
 
 /** The sole native EventSource lifecycle, shared by buffered and producer-owned streams. */
@@ -42,7 +41,7 @@ export function openNativeStream(url: string | (() => string), handlers: NativeP
         connection.close()
         if (stopped || source !== connection) return
         live(false)
-        const delay = handlers.retryDelay ? handlers.retryDelay(attempt++) : 1_000
+        const delay = handlers.retryDelay ? handlers.retryDelay(attempt++) : [1_000, 2_000, 5_000, 10_000][Math.min(attempt++, 3)]
         if (delay !== undefined) retry = setTimeout(open, delay)
       }
     }

package/src/lib/code-presentation.ts

@@ -1,3 +1,4 @@
+import { tokenMilliseconds } from "../utils/token-milliseconds";
 import { tabsPresentation } from "../presentation";
 import type { HighlighterCore, LanguageRegistration, ThemedToken } from "shiki/core";
 // Leave variables unresolved: the browser resolves them on each token span,
@@ -171,17 +172,8 @@ const COPY_FEEDBACK_MS=2000;
 export interface InteractionBudgets { feedback?:number; pending?:number; longWork?:number; mutation?:number; }
 /** Resolve scoped Brand times, including calc(), without duplicating token values. */
 export function interactionBudgets(scope:HTMLElement):InteractionBudgets {
- const view=scope.ownerDocument.defaultView;if(!view)return {};
- const probe=scope.ownerDocument.createElement("i");probe.hidden=true;scope.append(probe);
- const read=(role:string)=>{
-  const name=`--interaction-${role}`;
-  if(!view.getComputedStyle(scope).getPropertyValue(name).trim())return undefined;
-  probe.style.animationDuration=`var(${name})`;
-  const time=/^(\d+(?:\.\d+)?)(ms|s)$/.exec(view.getComputedStyle(probe).animationDuration);
-  return time?Number(time[1])*(time[2]==="s"?1000:1):undefined;
- };
- try{return {feedback:read("feedback-budget"),pending:read("pending-delay"),longWork:read("long-work-delay"),mutation:read("mutation-budget")};}
- finally{probe.remove();}
+ const read=(role:string)=>tokenMilliseconds(`--interaction-${role}`,scope);
+ return scope.ownerDocument.defaultView?{feedback:read("feedback-budget"),pending:read("pending-delay"),longWork:read("long-work-delay"),mutation:read("mutation-budget")} : {};
 }
 export interface CopyFeedback {
  copied:boolean;status:string;pending:boolean;loading?:boolean;longRunning?:boolean;elapsedMs?:number;

package/src/primitives/hover-card.tsx

@@ -2,8 +2,9 @@ import { cn } from "../lib/utils";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { Popover, PopoverAnchor, PopoverContent } from "./popover";
+import { tokenMilliseconds } from "../utils/token-milliseconds";
 
-const HoverIntent = React.createContext({ enter: (_target: Element) => {}, leave: () => {}, restore: () => {}, press: () => {} });
+const HoverIntent = React.createContext({ content: { current: null as HTMLDivElement | null }, enter: (_target: Element) => {}, leave: (_event?: { relatedTarget: EventTarget | null }) => {}, restore: () => {}, press: () => {}, owns: (_target: EventTarget | null) => false });
 type HoverCardProps = React.ComponentProps<typeof Popover> & {
   /** Existing DOM trigger for delegated canvas or virtual-list previews. */
   anchor?: HTMLElement | { getBoundingClientRect: () => DOMRect; contextElement: HTMLElement } | null;
@@ -11,31 +12,29 @@ type HoverCardProps = React.ComponentProps<typeof Popover> & {
   closeDelay?: number;
 };
 
-/** One hover policy and Popover's keyboard/focus behavior; delays follow the trigger's fast token. */
 export function HoverCard({ anchor, open: controlled, defaultOpen = false, onOpenChange, openDelay, closeDelay, children, ...props }: HoverCardProps) {
   const element = anchor && ("contextElement" in anchor ? anchor.contextElement : anchor);
   const [own, setOwn] = React.useState({ anchor: element, open: defaultOpen });
-  const intent = React.useRef<{ timer?: ReturnType<typeof setTimeout>; target?: Element; restoring?: boolean; pressed?: boolean }>({});
+  const intent = React.useRef<{ timer?: ReturnType<typeof setTimeout>; target?: Element; content: { current: HTMLDivElement | null }; restoring?: boolean; pressed?: boolean; onOpenChange?: HoverCardProps["onOpenChange"] }>({ content: { current: null } });
+  intent.current.onOpenChange = onOpenChange;
   if (element) intent.current.target = element;
-  const change = React.useCallback((next: boolean) => { clearTimeout(intent.current.timer); if (controlled === undefined) setOwn({ anchor: element, open: next }); onOpenChange?.(next); }, [controlled, onOpenChange, element]);
-  const delay = (target: Element | null | undefined) => {
-    const value = getComputedStyle(target ?? document.documentElement).getPropertyValue("--duration-fast").trim();
-    return (parseFloat(value) || 0) * (value.endsWith("ms") ? 1 : 1000);
-  };
-  const enter = React.useCallback((target: Element) => { if (intent.current.restoring || (intent.current.pressed && target.closest("[data-hover-card]"))) return; intent.current.pressed = false; if (!target.closest("[data-hover-card]")) intent.current.target = target; clearTimeout(intent.current.timer); intent.current.timer = setTimeout(() => change(true), openDelay ?? delay(target)); }, [change, openDelay]);
-  const leave = React.useCallback(() => { clearTimeout(intent.current.timer); intent.current.timer = setTimeout(() => change(false), closeDelay ?? delay(element ?? intent.current.target)); }, [change, closeDelay, element]);
+  const change = React.useCallback((next: boolean) => { clearTimeout(intent.current.timer); if (controlled === undefined) setOwn(current => current.anchor === element && current.open === next ? current : { anchor: element, open: next }); intent.current.onOpenChange?.(next); }, [controlled, element]);
+  const owns = React.useCallback((target: EventTarget | null) => target instanceof Node && (!!(element ?? intent.current.target)?.contains(target) || !!intent.current.content.current?.contains(target)), [element]);
+  const enter = React.useCallback((target: Element) => { if (intent.current.restoring || (intent.current.pressed && target === intent.current.content.current)) return; intent.current.pressed = false; if (target !== intent.current.content.current) intent.current.target = target; clearTimeout(intent.current.timer); intent.current.timer = setTimeout(() => change(true), openDelay ?? tokenMilliseconds("--duration-fast", target)); }, [change, openDelay]);
+  const leave = React.useCallback((event?: { relatedTarget: EventTarget | null }) => { if (owns(event?.relatedTarget ?? null)) return; clearTimeout(intent.current.timer); intent.current.timer = setTimeout(() => { if (!owns(document.activeElement) || (!intent.current.content.current?.contains(document.activeElement) && !document.activeElement?.matches(":focus-visible"))) change(false); }, closeDelay ?? tokenMilliseconds("--duration-fast", element ?? intent.current.target)); }, [change, closeDelay, element, owns]);
   React.useEffect(() => {
-    if (!element) return () => clearTimeout(intent.current.timer);
-    const show = () => enter(element), blur = (event: FocusEvent) => { if (!(event.relatedTarget instanceof Element && event.relatedTarget.closest("[data-hover-card]"))) leave(); };
+    if (!element) { if (anchor === null) setOwn(current => current.open ? { anchor: element, open: false } : current); return () => clearTimeout(intent.current.timer); }
+    const show = () => enter(element), blur = (event: FocusEvent) => leave(event);
     element.addEventListener("pointerenter", show); element.addEventListener("pointerleave", leave); element.addEventListener("focusin", show); element.addEventListener("focusout", blur);
+    if (element.matches(":hover,:focus-within")) show();
     return () => { clearTimeout(intent.current.timer); element.removeEventListener("pointerenter", show); element.removeEventListener("pointerleave", leave); element.removeEventListener("focusin", show); element.removeEventListener("focusout", blur); };
-  }, [anchor, element, enter, leave]);
+  }, [element, enter, leave]);
   const restore = () => {
     intent.current.restoring = true;
     if (document.activeElement === document.body && intent.current.target instanceof HTMLElement) intent.current.target.focus({ preventScroll: true });
     queueMicrotask(() => { intent.current.restoring = false; });
   };
-  return <HoverIntent.Provider value={{ enter, leave, restore, press: () => { intent.current.pressed = true; change(false); } }}><Popover {...props} open={anchor === null ? false : controlled ?? (own.anchor === element && own.open)} onOpenChange={change}>
+  return <HoverIntent.Provider value={{ content: intent.current.content, enter, leave, restore, press: () => { intent.current.pressed = true; change(false); }, owns }}><Popover {...props} open={anchor === null ? false : controlled ?? (own.anchor === element && own.open)} onOpenChange={change}>
     {anchor && <PopoverAnchor virtualRef={{ current: anchor }} />}{children}
   </Popover></HoverIntent.Provider>;
 }
@@ -46,22 +45,23 @@ export const HoverCardTrigger = React.forwardRef<HTMLAnchorElement, React.Anchor
     const Trigger = asChild ? Slot : "a";
     return <PopoverAnchor asChild><Trigger ref={ref} tabIndex={0} className={cn("cursor-pointer underline-offset-4 hover:underline", className)}
       onPointerEnter={event => { onPointerEnter?.(event); if (!event.defaultPrevented && event.pointerType !== "touch") intent.enter(event.currentTarget); }}
-      onPointerLeave={event => { onPointerLeave?.(event); if (!event.defaultPrevented) intent.leave(); }}
+      onPointerLeave={event => { onPointerLeave?.(event); if (!event.defaultPrevented) intent.leave(event); }}
       onFocus={event => { onFocus?.(event); if (!event.defaultPrevented && event.target.matches(":focus-visible")) intent.enter(event.currentTarget); }}
       onClickCapture={event => { onClickCapture?.(event); const action = event.target instanceof Element ? event.target.closest('a,button,input,select,textarea,[role="button"]') : null; if (!event.defaultPrevented && action && action !== event.currentTarget) intent.press(); }}
-      onBlur={event => { onBlur?.(event); if (!event.defaultPrevented && !(event.relatedTarget instanceof Element && event.relatedTarget.closest("[data-hover-card]"))) intent.leave(); }} {...props} /></PopoverAnchor>;
+      onBlur={event => { onBlur?.(event); if (!event.defaultPrevented) intent.leave(event); }} {...props} /></PopoverAnchor>;
   },
 );
 HoverCardTrigger.displayName = "HoverCardTrigger";
 
 export const HoverCardContent = React.forwardRef<React.ElementRef<typeof PopoverContent>, React.ComponentPropsWithoutRef<typeof PopoverContent>>(
-  ({ className, onPointerEnter, onPointerLeave, onOpenAutoFocus, onCloseAutoFocus, ...props }, ref) => {
+  ({ className, onPointerEnter, onPointerLeave, onOpenAutoFocus, onCloseAutoFocus, onFocusOutside, ...props }, ref) => {
     const intent = React.useContext(HoverIntent);
-    return <PopoverContent ref={ref} data-hover-card className={cn("w-64", className)}
+    return <Slot ref={intent.content}><PopoverContent ref={ref} data-hover-card className={cn("w-64", className)}
       onOpenAutoFocus={event => { onOpenAutoFocus?.(event); event.preventDefault(); }}
       onCloseAutoFocus={event => { onCloseAutoFocus?.(event); if (!event.defaultPrevented) { event.preventDefault(); intent.restore(); } }}
+      onFocusOutside={event => { onFocusOutside?.(event); if (intent.owns(event.detail.originalEvent.target)) event.preventDefault(); }}
       onPointerEnter={event => { onPointerEnter?.(event); if (!event.defaultPrevented) intent.enter(event.currentTarget); }}
-      onPointerLeave={event => { onPointerLeave?.(event); if (!event.defaultPrevented) intent.leave(); }} {...props} />;
+      onPointerLeave={event => { onPointerLeave?.(event); if (!event.defaultPrevented) intent.leave(event); }} {...props} /></Slot>;
   },
 );
 HoverCardContent.displayName = "HoverCardContent";

package/src/primitives/index.ts

@@ -192,7 +192,7 @@ export type { ArtifactPaneProps } from "./artifact-pane";
 export { CodeBlock, CopyButton, InlineCode } from "./code-block";
 export type { CodeBlockProps, InlineCodeProps } from "./code-block";
 
-export { ThemeToggle, useTheme } from "./theme-toggle";
+export { ThemeToggle, useTheme, createThemeController } from "./theme-toggle";
 
 export { Heading } from "./heading";
 export type { HeadingProps, HeadingVariant } from "./heading";
@@ -282,3 +282,6 @@ export type { ToolbarProps, FilterFieldProps } from "./toolbar";
 
 export { ExpandablePanel } from "./expandable-panel";
 export type { ExpandablePanelProps } from "./expandable-panel";
+
+export type { ThemeControllerOptions } from "./theme-toggle";
+export type { TableHeadProps } from "./table";

package/src/primitives/table.tsx

@@ -87,19 +87,38 @@ const TableRow = React.forwardRef<
 ));
 TableRow.displayName = "TableRow";
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      tablePresentation.columnHeader,
-      className,
-    )}
-    {...props}
-  />
-));
+export interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /** Controlled sort affordance. The caller retains row order and sort policy. */
+  sort?: {
+    direction?: "asc" | "desc";
+    onSort: () => void;
+    label?: string;
+    buttonClassName?: string;
+  };
+}
+
+const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+  ({ className, children, sort, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(tablePresentation.columnHeader, className)}
+      {...props}
+      aria-sort={sort ? (sort.direction === "asc" ? "ascending" : sort.direction === "desc" ? "descending" : "none") : props["aria-sort"]}
+    >
+      {sort ? (
+        <button
+          type="button"
+          onClick={sort.onSort}
+          aria-label={sort.label ?? (typeof children === "string" ? `Sort by ${children}` : undefined)}
+          className={cn("inline-flex cursor-pointer items-center gap-1 rounded-sm font-inherit text-inherit hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2", sort.buttonClassName)}
+        >
+          {children}
+          <span aria-hidden="true" className="text-xs">{sort.direction === "asc" ? "↑" : sort.direction === "desc" ? "↓" : "↕"}</span>
+        </button>
+      ) : children}
+    </th>
+  ),
+);
 TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<