@tangle-network/ui 11.51.21 → 11.51.22

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 11.51.22
+
+### Patch Changes
+
+- df08ce7: Keep delegated previews readable across their own anchor, content and focused actions. Share the existing scoped CSS time reader with previews, canvas consumers and clipboard feedback; preserve zero and missing budgets and resolve scoped calc() values.
+- 5219d82: Export the existing native event-stream lifecycle from hooks so imperative adapters share the hook's cursor, reconnect, terminal-event and cleanup behavior. Native retries now back off during outages; buffered streams retain their configured policy.
+  
+  Delegated hover anchors that attach after pointer entry now open through the same token delay as direct triggers.
+
 ## 11.51.21
 
 ### Patch Changes

package/dist/hooks/use-event-stream.d.ts

@@ -11,5 +11,15 @@ export interface EventStreamHandlers {
   onStart?: () => void;
   onLiveChange?: (live: boolean) => void;
 }
+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. */
+export declare function openNativeStream(url: string | (() => string), handlers: NativePolicy): {
+  close(): void;
+};
 /** Producer-owned named events; host transports keep their authenticated reconnect lifecycle. */
-export declare function useEventStream(url: string | (() => string) | undefined, handlers: EventStreamHandlers): void;
+export declare function useEventStream(url: string | (() => string) | undefined, handlers: EventStreamHandlers): void;
+export {};

package/dist/hooks/use-event-stream.js

@@ -34,7 +34,12 @@ function openNativeStream(url, handlers) {
 				connection.close();
 				if (stopped || source !== connection) return;
 				live(false);
-				const delay = handlers.retryDelay ? handlers.retryDelay(attempt++) : 1e3;
+				const delay = handlers.retryDelay ? handlers.retryDelay(attempt++) : [
+					1e3,
+					2e3,
+					5e3,
+					1e4
+				][Math.min(attempt++, 3)];
 				if (delay !== void 0) retry = setTimeout(open, delay);
 			};
 		}

package/dist/hooks.d.ts

@@ -8,7 +8,7 @@ import { AuthUser, UseAuthOptions, UseAuthResult, createAuthFetcher, useApiKey,
 import { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOptions, CompleteAssistantMessageOptions, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, UseSdkSessionOptions, UseSdkSessionReturn, useSdkSession } from "./hooks/use-sdk-session.js";
 import { RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, useRealtimeSession } from "./hooks/use-realtime-session.js";
 import { AgentStreamEvent, AutomationStreamEvent, BotStreamEvent, ConnectionState, SSEEvent, TaskStreamEvent, TerminalStreamEvent, UseSSEStreamOptions, UseSSEStreamResult, useSSEStream } from "./hooks/use-sse-stream.js";
-import { EventStreamHandlers, EventStreamOpener, EventStreamSource, useEventStream } from "./hooks/use-event-stream.js";
+import { EventStreamHandlers, EventStreamOpener, EventStreamSource, openNativeStream, useEventStream } from "./hooks/use-event-stream.js";
 import { useFollowTail } from "./hooks/use-follow-tail.js";
 import { PHONE_MEDIA, usePhone } from "./hooks/use-phone.js";
-export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, type EventStreamHandlers, type EventStreamOpener, type EventStreamSource, PHONE_MEDIA, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useLiveTime, usePhone, useRealtimeSession, useRunCollapseState, useRunGroups, useRunNow, useSSEStream, useSdkSession, useToolCallStream };
+export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, type EventStreamHandlers, type EventStreamOpener, type EventStreamSource, PHONE_MEDIA, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, openNativeStream, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useLiveTime, usePhone, useRealtimeSession, useRunCollapseState, useRunGroups, useRunNow, useSSEStream, useSdkSession, useToolCallStream };

package/dist/hooks.js

@@ -8,7 +8,7 @@ import { useToolCallStream } from "./hooks/use-tool-call-stream.js";
 import { createAuthFetcher, useApiKey, useAuth } from "./hooks/use-auth.js";
 import { RealtimeSessionRegistry, useRealtimeSession } from "./hooks/use-realtime-session.js";
 import { useSdkSession } from "./hooks/use-sdk-session.js";
-import { useEventStream } from "./hooks/use-event-stream.js";
+import { openNativeStream, useEventStream } from "./hooks/use-event-stream.js";
 import { useSSEStream } from "./hooks/use-sse-stream.js";
 import { PHONE_MEDIA, usePhone } from "./hooks/use-phone.js";
-export { PHONE_MEDIA, RealtimeSessionRegistry, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useLiveTime, usePhone, useRealtimeSession, useRunCollapseState, useRunGroups, useRunNow, useSSEStream, useSdkSession, useToolCallStream };
+export { PHONE_MEDIA, RealtimeSessionRegistry, createAuthFetcher, openNativeStream, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useLiveTime, usePhone, useRealtimeSession, useRunCollapseState, useRunGroups, useRunNow, useSSEStream, useSdkSession, useToolCallStream };

package/dist/index.d.ts

@@ -49,7 +49,7 @@ import { AppendUserMessageOptions, ApplySdkEventOptions, BeginAssistantMessageOp
 import { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, RegisterActiveSessionOptions, SessionProjectKey, activeSessionsAtom, bumpActiveSessionActivity, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, registerActiveSession, resetActiveSessions, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from "./stores/active-sessions-store.js";
 import { RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, useRealtimeSession } from "./hooks/use-realtime-session.js";
 import { AgentStreamEvent, AutomationStreamEvent, BotStreamEvent, ConnectionState, SSEEvent, TaskStreamEvent, TerminalStreamEvent, UseSSEStreamOptions, UseSSEStreamResult, useSSEStream } from "./hooks/use-sse-stream.js";
-import { EventStreamHandlers, EventStreamOpener, EventStreamSource, useEventStream } from "./hooks/use-event-stream.js";
+import { EventStreamHandlers, EventStreamOpener, EventStreamSource, openNativeStream, useEventStream } from "./hooks/use-event-stream.js";
 import { useFollowTail } from "./hooks/use-follow-tail.js";
 import { PHONE_MEDIA, usePhone } from "./hooks/use-phone.js";
 import "./hooks.js";
@@ -136,6 +136,7 @@ import "./types.js";
 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";
@@ -149,4 +150,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
 import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
 import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
 import "./redaction.js";
-export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineFoldItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EventStreamHandlers, type EventStreamOpener, type EventStreamSource, ExpandablePanel, type ExpandablePanelProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PHONE_MEDIA, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, type RunStatus, RunStatusIcon, type RunStatusIconProps, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, 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, type Speaker, SpeakerHeader, type SpeakerHeaderProps, type SpeakerPart, type SpeakerSection, type SpeakerState, StatCard, type StatCardProps, type StatusMeta, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type ThemeControllerOptions, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, createThemeController, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, foldSummary, formatAxisDuration, formatBytes, formatCalendarDate, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isOpen, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, usePhone, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useRunNow, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineFoldItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type EventStreamHandlers, type EventStreamOpener, type EventStreamSource, ExpandablePanel, type ExpandablePanelProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PHONE_MEDIA, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, type RunStatus, RunStatusIcon, type RunStatusIconProps, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, 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, type Speaker, SpeakerHeader, type SpeakerHeaderProps, type SpeakerPart, type SpeakerSection, type SpeakerState, StatCard, type StatCardProps, type StatusMeta, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type ThemeControllerOptions, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, createThemeController, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, foldSummary, formatAxisDuration, formatBytes, formatCalendarDate, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isOpen, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, openNativeStream, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, tokenMilliseconds, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, usePhone, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useRunNow, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -42,6 +42,7 @@ import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost
 import { UploadProgress } from "./primitives/upload-progress.js";
 import { SidebarDropZone } from "./primitives/sidebar-drop-zone.js";
 import { ArtifactPane } from "./primitives/artifact-pane.js";
+import { tokenMilliseconds } from "./utils/token-milliseconds.js";
 import { codeBlockGrammar } from "./lib/code-presentation.js";
 import { CodeBlock, CopyButton } from "./markdown/code-block.js";
 import { InlineCode } from "./primitives/code-block.js";
@@ -126,11 +127,11 @@ import { createAuthFetcher, useApiKey, useAuth } from "./hooks/use-auth.js";
 import { activeSessionsAtom, bumpActiveSessionActivity, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, registerActiveSession, resetActiveSessions, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from "./stores/active-sessions-store.js";
 import { RealtimeSessionRegistry, useRealtimeSession } from "./hooks/use-realtime-session.js";
 import { useSdkSession } from "./hooks/use-sdk-session.js";
-import { useEventStream } from "./hooks/use-event-stream.js";
+import { openNativeStream, useEventStream } from "./hooks/use-event-stream.js";
 import { useSSEStream } from "./hooks/use-sse-stream.js";
 import { PHONE_MEDIA, usePhone } from "./hooks/use-phone.js";
 import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMapAtom, updatePart } from "./stores/chat-store.js";
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { RedactedDocument } from "./redaction/redacted-document.js";
-export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, 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, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandablePanel, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PHONE_MEDIA, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, 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, SpeakerHeader, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, createThemeController, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, foldSummary, formatAxisDuration, formatBytes, formatCalendarDate, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isOpen, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, usePhone, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useRunNow, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, 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, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandablePanel, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PHONE_MEDIA, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, 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, SpeakerHeader, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, createThemeController, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, foldSummary, formatAxisDuration, formatBytes, formatCalendarDate, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isOpen, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, openNativeStream, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, tokenMilliseconds, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useEventStream, useFollowTail, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, usePhone, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useRunNow, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/lib/code-presentation.js

@@ -1,4 +1,5 @@
 import { tabsPresentation } from "../presentation.js";
+import { tokenMilliseconds } from "../utils/token-milliseconds.js";
 // src/lib/code-presentation.ts
 const SYNTAX = {
 	comment: "var(--syntax-comment, currentColor)",
@@ -242,28 +243,13 @@ async function writeClipboard(text) {
 const COPY_FEEDBACK_MS = 2e3;
 /** Resolve scoped Brand times, including calc(), without duplicating token values. */
 function interactionBudgets(scope) {
-	const view = scope.ownerDocument.defaultView;
-	if (!view) return {};
-	const probe = scope.ownerDocument.createElement("i");
-	probe.hidden = true;
-	scope.append(probe);
-	const read = (role) => {
-		const name = `--interaction-${role}`;
-		if (!view.getComputedStyle(scope).getPropertyValue(name).trim()) return void 0;
-		probe.style.animationDuration = `var(${name})`;
-		const time = /^(\d+(?:\.\d+)?)(ms|s)$/.exec(view.getComputedStyle(probe).animationDuration);
-		return time ? Number(time[1]) * (time[2] === "s" ? 1e3 : 1) : void 0;
-	};
-	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) => 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")
+	} : {};
 }
 /** Owns one accepted write, scoped delays and cleanup for both renderers. */
 function createCopyFeedback(change, write = writeClipboard, scope) {

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

@@ -9,7 +9,6 @@ type HoverCardProps = React.ComponentProps<typeof Popover> & {
   openDelay?: number;
   closeDelay?: number;
 };
-/** One hover policy and Popover's keyboard/focus behavior; delays follow the trigger's fast token. */
 export declare function HoverCard({ anchor, open: controlled, defaultOpen, onOpenChange, openDelay, closeDelay, children, ...props }: HoverCardProps): React.JSX.Element;
 export declare const HoverCardTrigger: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   asChild?: boolean;

package/dist/primitives/hover-card.js

@@ -1,64 +1,69 @@
 import { cn } from "../lib/utils.js";
 import { Popover, PopoverAnchor, PopoverContent } from "./popover.js";
+import { tokenMilliseconds } from "../utils/token-milliseconds.js";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/primitives/hover-card.tsx
 const HoverIntent = React.createContext({
+	content: { current: null },
 	enter: (_target) => {},
-	leave: () => {},
+	leave: (_event) => {},
 	restore: () => {},
-	press: () => {}
+	press: () => {},
+	owns: (_target) => false
 });
-/** One hover policy and Popover's keyboard/focus behavior; delays follow the trigger's fast token. */
 function HoverCard({ anchor, open: controlled, defaultOpen = false, onOpenChange, openDelay, closeDelay, children, ...props }) {
 	const element = anchor && ("contextElement" in anchor ? anchor.contextElement : anchor);
 	const [own, setOwn] = React.useState({
 		anchor: element,
 		open: defaultOpen
 	});
-	const intent = React.useRef({});
+	const intent = React.useRef({ content: { current: null } });
+	intent.current.onOpenChange = onOpenChange;
 	if (element) intent.current.target = element;
 	const change = React.useCallback((next) => {
 		clearTimeout(intent.current.timer);
-		if (controlled === void 0) setOwn({
+		if (controlled === void 0) setOwn((current) => current.anchor === element && current.open === next ? current : {
 			anchor: element,
 			open: next
 		});
-		onOpenChange?.(next);
-	}, [
-		controlled,
-		onOpenChange,
-		element
-	]);
-	const delay = (target) => {
-		const value = getComputedStyle(target ?? document.documentElement).getPropertyValue("--duration-fast").trim();
-		return (parseFloat(value) || 0) * (value.endsWith("ms") ? 1 : 1e3);
-	};
+		intent.current.onOpenChange?.(next);
+	}, [controlled, element]);
+	const owns = React.useCallback((target) => target instanceof Node && (!!(element ?? intent.current.target)?.contains(target) || !!intent.current.content.current?.contains(target)), [element]);
 	const enter = React.useCallback((target) => {
-		if (intent.current.restoring || intent.current.pressed && target.closest("[data-hover-card]")) return;
+		if (intent.current.restoring || intent.current.pressed && target === intent.current.content.current) return;
 		intent.current.pressed = false;
-		if (!target.closest("[data-hover-card]")) intent.current.target = target;
+		if (target !== intent.current.content.current) intent.current.target = target;
 		clearTimeout(intent.current.timer);
-		intent.current.timer = setTimeout(() => change(true), openDelay ?? delay(target));
+		intent.current.timer = setTimeout(() => change(true), openDelay ?? tokenMilliseconds("--duration-fast", target));
 	}, [change, openDelay]);
-	const leave = React.useCallback(() => {
+	const leave = React.useCallback((event) => {
+		if (owns(event?.relatedTarget ?? null)) return;
 		clearTimeout(intent.current.timer);
-		intent.current.timer = setTimeout(() => change(false), closeDelay ?? delay(element ?? intent.current.target));
+		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
+		element,
+		owns
 	]);
 	React.useEffect(() => {
-		if (!element) return () => clearTimeout(intent.current.timer);
-		const show = () => enter(element), blur = (event) => {
-			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) => 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);
@@ -67,7 +72,6 @@ function HoverCard({ anchor, open: controlled, defaultOpen = false, onOpenChange
 			element.removeEventListener("focusout", blur);
 		};
 	}, [
-		anchor,
 		element,
 		enter,
 		leave
@@ -81,13 +85,15 @@ function HoverCard({ anchor, open: controlled, defaultOpen = false, onOpenChange
 	};
 	return /* @__PURE__ */ jsx(HoverIntent.Provider, {
 		value: {
+			content: intent.current.content,
 			enter,
 			leave,
 			restore,
 			press: () => {
 				intent.current.pressed = true;
 				change(false);
-			}
+			},
+			owns
 		},
 		children: /* @__PURE__ */ jsxs(Popover, {
 			...props,
@@ -111,7 +117,7 @@ const HoverCardTrigger = React.forwardRef(({ className, onPointerEnter, onPointe
 			},
 			onPointerLeave: (event) => {
 				onPointerLeave?.(event);
-				if (!event.defaultPrevented) intent.leave();
+				if (!event.defaultPrevented) intent.leave(event);
 			},
 			onFocus: (event) => {
 				onFocus?.(event);
@@ -124,39 +130,46 @@ const HoverCardTrigger = React.forwardRef(({ className, onPointerEnter, onPointe
 			},
 			onBlur: (event) => {
 				onBlur?.(event);
-				if (!event.defaultPrevented && !(event.relatedTarget instanceof Element && event.relatedTarget.closest("[data-hover-card]"))) intent.leave();
+				if (!event.defaultPrevented) intent.leave(event);
 			},
 			...props
 		})
 	});
 });
 HoverCardTrigger.displayName = "HoverCardTrigger";
-const HoverCardContent = React.forwardRef(({ className, onPointerEnter, onPointerLeave, onOpenAutoFocus, onCloseAutoFocus, ...props }, ref) => {
+const HoverCardContent = React.forwardRef(({ className, onPointerEnter, onPointerLeave, onOpenAutoFocus, onCloseAutoFocus, onFocusOutside, ...props }, ref) => {
 	const intent = React.useContext(HoverIntent);
-	return /* @__PURE__ */ jsx(PopoverContent, {
-		ref,
-		"data-hover-card": true,
-		className: cn("w-64", className),
-		onOpenAutoFocus: (event) => {
-			onOpenAutoFocus?.(event);
-			event.preventDefault();
-		},
-		onCloseAutoFocus: (event) => {
-			onCloseAutoFocus?.(event);
-			if (!event.defaultPrevented) {
+	return /* @__PURE__ */ jsx(Slot, {
+		ref: intent.content,
+		children: /* @__PURE__ */ jsx(PopoverContent, {
+			ref,
+			"data-hover-card": true,
+			className: cn("w-64", className),
+			onOpenAutoFocus: (event) => {
+				onOpenAutoFocus?.(event);
 				event.preventDefault();
-				intent.restore();
-			}
-		},
-		onPointerEnter: (event) => {
-			onPointerEnter?.(event);
-			if (!event.defaultPrevented) intent.enter(event.currentTarget);
-		},
-		onPointerLeave: (event) => {
-			onPointerLeave?.(event);
-			if (!event.defaultPrevented) intent.leave();
-		},
-		...props
+			},
+			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(event);
+			},
+			...props
+		})
 	});
 });
 HoverCardContent.displayName = "HoverCardContent";

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.21",
+  "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/utils/index.ts

@@ -1,6 +1,7 @@
 export { copyText } from './copy-text';
 export * from './format';
 export { timeAgo } from './time-ago';
+export { tokenMilliseconds } from './token-milliseconds';
 export {
   getToolCategory,
   getToolDisplayMetadata,

package/src/utils/token-milliseconds.ts

@@ -0,0 +1,11 @@
+/** Resolve a scoped CSS time, including calc(); absent tokens remain unknown. */
+export function tokenMilliseconds(token: string, element?: Element | null) {
+  const scope = element ?? (typeof document === 'undefined' ? undefined : document.documentElement), view = scope?.ownerDocument.defaultView
+  if (!scope || !view || !view.getComputedStyle(scope).getPropertyValue(token).trim()) return undefined
+  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' ? 1000 : 1) : undefined
+  } finally { probe.remove() }
+}