@tangle-network/ui 11.49.0 → 11.50.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @tangle-network/ui
 
+## 11.50.2
+
+### Patch Changes
+
+- 035f031: `codePresentation.header` carries the header's type (`font-sans text-sm`), so a server-rendered code block header built from it shows its label and a text copy button in the header type, not the code font. The React `CodeBlock` label takes it from the header.
+
+## 11.50.1
+
+### Patch Changes
+
+- 22512f2: `SpeakerHeader` keeps the responder's name whole on a narrow row: the `@handle` truncates first.
+- d9ad4c2: `SpeakerHeader` draws its Answering and Failed glyphs with `RunStatusIcon`, and an `AgentTimeline` status card with tone `error` shows the failed glyph (`statusMeta("failed")`, CircleX) instead of the warning triangle. On a narrow row a speaker's handle now takes only the space its name and state leave, so the name never shows an ellipsis while the handle can still give way.
+
+## 11.50.0
+
+### Minor Changes
+
+- dec4a5b: Settings gaps found while adopting the settings system (#414, #415, #422):
+  
+  - `SettingsNote`: a line or block of a `SettingsSection` that is not a row (an empty list, a loading line, a notice, a refusal, or a figure such as a `MetricStrip`), on the rows' gutters and divider, with `tone` (`default`, `muted`, `warning`, `danger`) and `role`. Warning and danger lead with a glyph.
+  - `SettingsListItem` takes `tone` (a `StatusTone`): the state leads with the tone's glyph in its ink, and its text keeps its colour.
+  - List titles and meta, and row values, keep a URL, address or event name whole: it moves to the next line, and one wider than its column breaks only at its punctuation.
+  - `MetricStrip columns={2}`, one column below `sm`.
+  - `bindSettingsNav` in `@tangle-network/ui/presentation` binds PageShell's settings nav in any host, React or server-rendered. A plain click on a link to another document marks it current at once; a back-forward restore shows the link the page left.
+  - A host whose page scrolls under its own sticky header sets `--tangle-settings-sticky-top`, and the settings nav sticks below it.
+  - A labelled `CopyButton` uses the header's sans 14px type instead of the code font.
+  - `Progress` takes `tone` (`neutral`, `success`, `warning`, `danger`), filled with that status ink.
+
 ## 11.49.0
 
 ### Minor Changes

package/dist/chat/agent-timeline.js

@@ -1,5 +1,6 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { statusMeta } from "../run/status-meta.js";
 import { Markdown } from "../markdown/markdown.js";
 import "./transcript-text.js";
 import { MessageAuthor } from "./message-author.js";
@@ -8,7 +9,7 @@ import { ThinkingIndicator } from "./thinking-indicator.js";
 import { ToolCallGroup, ToolCallStep } from "../run/tool-call-step.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AlertTriangle, CheckCircle2, CircleDot, FileText, Info } from "lucide-react";
+import { AlertTriangle, CircleDot, FileText, Info } from "lucide-react";
 // src/chat/agent-timeline.tsx
 const TONE_STYLES = {
 	default: {
@@ -27,7 +28,7 @@ const TONE_STYLES = {
 		card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
 		text: "text-[var(--surface-success-text)]",
 		supportingText: "text-[var(--surface-success-text)]",
-		icon: CheckCircle2
+		icon: statusMeta("done").icon
 	},
 	warning: {
 		card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
@@ -39,7 +40,7 @@ const TONE_STYLES = {
 		card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
 		text: "text-[var(--surface-danger-text)]",
 		supportingText: "text-[var(--surface-danger-text)]",
-		icon: AlertTriangle
+		icon: statusMeta("failed").icon
 	}
 };
 /** What a row is, for the gap above the next one. */

package/dist/chat/speaker.d.ts

@@ -50,8 +50,8 @@ export interface SpeakerHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * gets, then the handle a person types to address the agent, then its state.
  *
  * The state comes from the speaker's own end state, else from `live`. An
- * answering responder shows the status grammar's open ring with the word, a
- * failed one its cross with the word, and a finished one nothing, as a settled
- * run row does. `data-speaker-state` carries all three.
+ * answering responder shows the running glyph with the word, a failed one the
+ * failed glyph with the word, both from `RunStatusIcon`, and a finished one
+ * nothing, as a settled run row does. `data-speaker-state` carries all three.
  */
 export declare function SpeakerHeader({ speaker, live, ...props }: SpeakerHeaderProps): import("react").JSX.Element;

package/dist/chat/speaker.js

@@ -1,4 +1,4 @@
-import { StatusPill } from "../primitives/status-pill.js";
+import { RunStatusIcon } from "../run/status-meta.js";
 import { MessageAuthor } from "./message-author.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/chat/speaker.tsx
@@ -49,9 +49,9 @@ function partitionBySpeaker(parts) {
 * gets, then the handle a person types to address the agent, then its state.
 *
 * The state comes from the speaker's own end state, else from `live`. An
-* answering responder shows the status grammar's open ring with the word, a
-* failed one its cross with the word, and a finished one nothing, as a settled
-* run row does. `data-speaker-state` carries all three.
+* answering responder shows the running glyph with the word, a failed one the
+* failed glyph with the word, both from `RunStatusIcon`, and a finished one
+* nothing, as a settled run row does. `data-speaker-state` carries all three.
 */
 function SpeakerHeader({ speaker, live = false, ...props }) {
 	const state = speaker.state ?? (live ? "answering" : "done");
@@ -63,22 +63,16 @@ function SpeakerHeader({ speaker, live = false, ...props }) {
 		"data-speaker-state": state,
 		...props,
 		children: [speaker.handle ? /* @__PURE__ */ jsxs("span", {
-			className: "min-w-0 truncate text-muted-foreground text-sm",
+			className: "min-w-0 max-w-fit flex-1 truncate text-muted-foreground text-sm",
 			title: `@${speaker.handle}`,
 			children: ["@", speaker.handle]
-		}) : null, state === "answering" ? /* @__PURE__ */ jsx(StatusPill, {
-			tone: "running",
-			bare: true,
-			size: "md",
-			className: "shrink-0 py-0",
-			children: "Answering"
-		}) : state === "failed" ? /* @__PURE__ */ jsx(StatusPill, {
-			tone: "danger",
-			bare: true,
-			size: "md",
-			className: "shrink-0 py-0",
-			children: "Failed"
-		}) : null]
+		}) : null, state === "done" ? null : /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex shrink-0 items-center gap-1.5 font-medium text-sm",
+			children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+				status: state === "failed" ? "failed" : "running",
+				"aria-hidden": true
+			}), state === "failed" ? "Failed" : "Answering"]
+		})]
 	});
 }
 export { SpeakerHeader, partitionBySpeaker };

package/dist/index.d.ts

@@ -92,11 +92,11 @@ import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { Field, FieldProps, fieldMessageId } from "./primitives/field.js";
-import { SettingsList, SettingsListAction, SettingsListColumns, SettingsListItem, SettingsListItemProps, SettingsListMenuItem, SettingsListProps, SettingsRow, SettingsRowLayout, SettingsRowProps, SettingsSection, SettingsSectionProps } from "./primitives/settings.js";
+import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { SettingsList, SettingsListAction, SettingsListColumns, SettingsListItem, SettingsListItemProps, SettingsListMenuItem, SettingsListProps, SettingsNote, SettingsNoteProps, SettingsRow, SettingsRowLayout, SettingsRowProps, SettingsSection, SettingsSectionProps } from "./primitives/settings.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
-import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
 import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
@@ -145,4 +145,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 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, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, 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, 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, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, 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, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, 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, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, 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, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, 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, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -47,11 +47,11 @@ import { InlineCode } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { Field, fieldMessageId } from "./primitives/field.js";
-import { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./primitives/settings.js";
+import { StatusPill } from "./primitives/status-pill.js";
+import { SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection } from "./primitives/settings.js";
 import { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
-import { StatusPill } from "./primitives/status-pill.js";
 import { ComplianceBadge } from "./primitives/compliance-badge.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
@@ -129,4 +129,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { RedactedDocument } from "./redaction/redacted-document.js";
-export { AgentTimeline, 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, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, 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, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, 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, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, 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, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, 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, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/lib/code-presentation.js

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

package/dist/markdown/code-block.js

@@ -58,7 +58,7 @@ const CodeBlock = memo(({ code: defaultCode, language: defaultLanguage, label, f
 						children: apiMetadataText(metadata)
 					}),
 					filename ? /* @__PURE__ */ jsxs("span", {
-						className: "flex min-w-0 items-center gap-2 font-sans text-sm",
+						className: "flex min-w-0 items-center gap-2",
 						children: [
 							/* @__PURE__ */ jsx(FileCode2, {
 								"aria-hidden": true,
@@ -75,7 +75,7 @@ const CodeBlock = memo(({ code: defaultCode, language: defaultLanguage, label, f
 							})
 						]
 					}) : /* @__PURE__ */ jsx("span", {
-						className: "font-sans text-sm font-medium text-muted-foreground",
+						className: "font-medium text-muted-foreground",
 						children: headerLabel
 					}),
 					children,
@@ -165,7 +165,7 @@ const CopyButton = memo(({ text, label: actionLabel, copiedLabel = "Copied", fai
 		"data-copy-loading": !!loading,
 		type: "button",
 		onClick: handleCopy,
-		className: cn(codePresentation.copy, actionLabel && "gap-2 px-3", focusRing, className),
+		className: cn(codePresentation.copy, actionLabel && "gap-2 px-3 font-sans text-sm", focusRing, className),
 		"aria-label": pending ? "Copying to clipboard" : label,
 		"aria-busy": pending || props["aria-busy"],
 		"aria-disabled": pending || props["aria-disabled"],

package/dist/presentation.d.ts

@@ -36,6 +36,7 @@ export declare const metricPresentation: {
   readonly hint: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs";
 };
 export declare const metricLayouts: {
+  readonly 2: "grid-cols-1 sm:grid-cols-2 max-sm:[&>div+div]:border-t sm:[&>div:not(:nth-child(2n+1))]:border-l";
   readonly 3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l";
   readonly 4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l";
   readonly 5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l";
@@ -67,6 +68,17 @@ export declare const dialogPresentation: {
 };
 /** Native-dialog adapter for Hono/static markup. Radix remains the React Dialog/Sheet owner. */
 export declare function bindDialog(dialog: HTMLDialogElement, trigger: HTMLElement): () => void;
+/**
+ * The settings section links of PageShell `measure="settings"`, for any host: PageShell binds its
+ * nav with it, and a server-rendered host binds the same markup. On the tab strip the current link
+ * (`aria-current="page"`) is centred by scrolling the strip only, never the page. It centres when
+ * the current link changes or first becomes reachable, never on scroll or on a change that keeps
+ * the same current link, so a user who scrolled to the first or last section stays there; resize
+ * and font swaps re-centre only until the user first scrolls the strip. A plain click on a link to
+ * another document makes it current at once, while that document loads, and a page restored from
+ * the back-forward cache shows the link it left.
+ */
+export declare function bindSettingsNav(nav: HTMLElement): () => void;
 export declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const helpPresentation: {
   root: string;

package/dist/presentation.js

@@ -84,6 +84,7 @@ const metricPresentation = {
 	hint: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs"
 };
 const metricLayouts = {
+	2: "grid-cols-1 sm:grid-cols-2 max-sm:[&>div+div]:border-t sm:[&>div:not(:nth-child(2n+1))]:border-l",
 	3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l",
 	4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l",
 	5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l",
@@ -164,6 +165,89 @@ function bindDialog(dialog, trigger) {
 		dialog.removeEventListener("keydown", key);
 	};
 }
+/**
+* The settings section links of PageShell `measure="settings"`, for any host: PageShell binds its
+* nav with it, and a server-rendered host binds the same markup. On the tab strip the current link
+* (`aria-current="page"`) is centred by scrolling the strip only, never the page. It centres when
+* the current link changes or first becomes reachable, never on scroll or on a change that keeps
+* the same current link, so a user who scrolled to the first or last section stays there; resize
+* and font swaps re-centre only until the user first scrolls the strip. A plain click on a link to
+* another document makes it current at once, while that document loads, and a page restored from
+* the back-forward cache shows the link it left.
+*/
+function bindSettingsNav(nav) {
+	let centredKey = null;
+	let userScrolled = false;
+	let left = null;
+	const current = () => nav.querySelector("[aria-current=\"page\"]");
+	const reveal = (layoutOnly) => {
+		const link = current();
+		if (nav.scrollWidth <= nav.clientWidth || !link) return;
+		const key = link.getAttribute("href") ?? link.textContent ?? "";
+		if (key !== centredKey) userScrolled = false;
+		else if (!layoutOnly || userScrolled) return;
+		centredKey = key;
+		const strip = nav.getBoundingClientRect(), box = link.getBoundingClientRect();
+		nav.scrollLeft += box.left + box.width / 2 - (strip.left + strip.width / 2);
+	};
+	const mark = (from, to) => {
+		from?.removeAttribute("aria-current");
+		to?.setAttribute("aria-current", "page");
+	};
+	const click = (event) => {
+		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+		if (!(link instanceof HTMLAnchorElement) || !nav.contains(link) || link.target && link.target !== "_self" || link.hasAttribute("download")) return;
+		if (link.origin !== location.origin || link.pathname + link.search === location.pathname + location.search) return;
+		const from = current();
+		if (from === link) return;
+		left = {
+			from,
+			to: link
+		};
+		mark(from, link);
+	};
+	const restore = (event) => {
+		if (!event.persisted || !left) return;
+		mark(left.to, left.from);
+		left = null;
+	};
+	const onUser = () => {
+		userScrolled = true;
+	};
+	const userEvents = [
+		"pointerdown",
+		"touchstart",
+		"wheel",
+		"keydown"
+	];
+	for (const type of userEvents) nav.addEventListener(type, onUser, { passive: true });
+	window.addEventListener("click", click);
+	window.addEventListener("pageshow", restore);
+	let live = true;
+	reveal(false);
+	document.fonts?.ready.then(() => {
+		if (live) reveal(true);
+	});
+	const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => reveal(true));
+	resize?.observe(nav);
+	const links = new MutationObserver(() => reveal(false));
+	links.observe(nav, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: ["aria-current"]
+	});
+	return () => {
+		live = false;
+		resize?.disconnect();
+		links.disconnect();
+		for (const type of userEvents) nav.removeEventListener(type, onUser);
+		window.removeEventListener("click", click);
+		window.removeEventListener("pageshow", restore);
+	};
+}
 const labelVariants = cva("font-medium text-[length:var(--font-size-label,0.875rem)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
 const helpPresentation = {
 	root: "text-[length:var(--font-size-help,0.75rem)] leading-4",
@@ -193,4 +277,4 @@ const tabsPresentation = {
 		underline: `inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=inactive]:text-muted-foreground ${ixTabUnderline}`
 	}
 };
-export { bindDialog, buttonVariants, cardPresentation, chartPresentation, controlHeight, controlMotion, controlRadius, controlSizes, controlText, dialogPresentation, emptyStatePresentation, fieldPresentation, fieldSizes, fieldTouchText, helpPresentation, inputVariants, ixControlSoft, ixSelected, ixTabUnderline, labelVariants, metricLayouts, metricPresentation, tablePresentation, tabsPresentation };
+export { bindDialog, bindSettingsNav, buttonVariants, cardPresentation, chartPresentation, controlHeight, controlMotion, controlRadius, controlSizes, controlText, dialogPresentation, emptyStatePresentation, fieldPresentation, fieldSizes, fieldTouchText, helpPresentation, inputVariants, ixControlSoft, ixSelected, ixTabUnderline, labelVariants, metricLayouts, metricPresentation, tablePresentation, tabsPresentation };

package/dist/primitives/metric-strip.d.ts

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

package/dist/primitives/page-shell.d.ts

@@ -13,9 +13,12 @@ export interface PageShellProps {
    * column. `settings` is a 48rem column of cards whose navigation is a sticky
    * 13rem column of rows when its frame is at least 60rem wide, and a sticky
    * 56px tab strip under the header below that; the current link
-   * (`aria-current="page"`) is centred by scrolling the strip only. Put
-   * links (or a list of links) in `navigation`; an `svg` in a link shows only
-   * in the column, and an element with `data-count` sits at its end.
+   * (`aria-current="page"`) is centred by scrolling the strip only
+   * ({@link bindSettingsNav}). Put links (or a list of links) in `navigation`;
+   * an `svg` in a link shows only in the column, and an element with
+   * `data-count` sits at its end. A host whose page scrolls under its own
+   * sticky header sets `--tangle-settings-sticky-top` on the frame or an
+   * ancestor, such as `var(--shell-header-height)`, and the nav sticks below it.
    */
   measure?: "reading" | "settings";
   navigationLabel?: string;

package/dist/primitives/page-shell.js

@@ -1,68 +1,10 @@
 "use client";
 import { cn } from "../lib/utils.js";
+import { bindSettingsNav } from "../presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/primitives/page-shell.tsx
 /**
-* Centre the current link of a horizontally scrolling nav, so the links on
-* both sides show that the strip scrolls. It moves the strip, never the page.
-* It centres when the current link changes (or first becomes reachable), never
-* on scroll, arrow taps or re-renders that keep the same current link, so a
-* user who scrolls to the first or last section stays there. Resize and font
-* swaps re-centre only until the user first scrolls the strip.
-*/
-function useCurrentLinkInView(ref, enabled) {
-	React.useEffect(() => {
-		const nav = ref.current;
-		if (!enabled || !nav) return;
-		let centredKey = null;
-		let userScrolled = false;
-		const reveal = (layoutOnly) => {
-			if (nav.scrollWidth <= nav.clientWidth) return;
-			const current = nav.querySelector("[aria-current=\"page\"]");
-			if (!current) return;
-			const key = current.getAttribute("href") ?? current.textContent ?? "";
-			if (key !== centredKey) userScrolled = false;
-			else if (!layoutOnly || userScrolled) return;
-			centredKey = key;
-			const strip = nav.getBoundingClientRect();
-			const link = current.getBoundingClientRect();
-			nav.scrollLeft += link.left + link.width / 2 - (strip.left + strip.width / 2);
-		};
-		const onUser = () => {
-			userScrolled = true;
-		};
-		nav.addEventListener("pointerdown", onUser, { passive: true });
-		nav.addEventListener("touchstart", onUser, { passive: true });
-		nav.addEventListener("wheel", onUser, { passive: true });
-		nav.addEventListener("keydown", onUser);
-		let live = true;
-		reveal(false);
-		document.fonts?.ready.then(() => {
-			if (live) reveal(true);
-		});
-		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => reveal(true));
-		resize?.observe(nav);
-		const links = new MutationObserver(() => reveal(false));
-		links.observe(nav, {
-			subtree: true,
-			childList: true,
-			characterData: true,
-			attributes: true,
-			attributeFilter: ["aria-current"]
-		});
-		return () => {
-			live = false;
-			resize?.disconnect();
-			links.disconnect();
-			nav.removeEventListener("pointerdown", onUser);
-			nav.removeEventListener("touchstart", onUser);
-			nav.removeEventListener("wheel", onUser);
-			nav.removeEventListener("keydown", onUser);
-		};
-	}, [ref, enabled]);
-}
-/**
 * Ported from sandbox-ui/src/primitives/page-shell.tsx. An optional bounded
 * width, gutter and vertical rhythm, not an application shell or a card grid.
 * The caller owns landmarks, routing, auth, navigation and data state.
@@ -74,7 +16,8 @@ function useCurrentLinkInView(ref, enabled) {
 function PageShell({ children, className, navigation, article, outline, header, measure = "reading", navigationLabel = "Sections", outlineLabel = "On this page" }) {
 	const navRef = React.useRef(null);
 	const settings = measure === "settings";
-	useCurrentLinkInView(navRef, settings && Boolean(navigation));
+	const hasNavigation = Boolean(navigation);
+	React.useEffect(() => settings && hasNavigation && navRef.current ? bindSettingsNav(navRef.current) : void 0, [settings, hasNavigation]);
 	if (navigation || article || outline || header || settings) {
 		const shell = /* @__PURE__ */ jsxs("div", {
 			className: cn("tangle-reading-shell", !settings && className),

package/dist/primitives/progress.d.ts

@@ -1,7 +1,15 @@
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
+declare const TONE_FILL: {
+  neutral: string;
+  success: string;
+  warning: string;
+  danger: string;
+};
 declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
   variant?: "default" | "sandbox";
+  /** A state the reading is in, such as `danger` at a limit; it replaces the variant's fill. */
+  tone?: keyof typeof TONE_FILL;
   showValue?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export { Progress };

package/dist/primitives/progress.js

@@ -3,7 +3,13 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 // src/primitives/progress.tsx
-const Progress = React.forwardRef(({ className, value, variant = "default", showValue = false, ...props }, ref) => {
+const TONE_FILL = {
+	neutral: "bg-[var(--surface-neutral-text)]",
+	success: "bg-[var(--surface-success-text)]",
+	warning: "bg-[var(--surface-warning-text)]",
+	danger: "bg-[var(--surface-danger-text)]"
+};
+const Progress = React.forwardRef(({ className, value, variant = "default", tone, showValue = false, ...props }, ref) => {
 	const indicatorVariants = {
 		default: "bg-primary",
 		sandbox: "bg-[image:var(--accent-gradient-strong)]"
@@ -15,7 +21,7 @@ const Progress = React.forwardRef(({ className, value, variant = "default", show
 			className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
 			...props,
 			children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
-				className: cn("h-full w-full flex-1 transition-all duration-300 ease-out", indicatorVariants[variant]),
+				className: cn("h-full w-full flex-1 transition-all duration-300 ease-out", tone ? TONE_FILL[tone] : indicatorVariants[variant]),
 				style: { transform: `translateX(-${100 - (value || 0)}%)` }
 			})
 		}), showValue && /* @__PURE__ */ jsxs("span", {

package/dist/primitives/settings.d.ts

@@ -1,3 +1,4 @@
+import { StatusTone } from "./status-pill.js";
 import * as React from "react";
 export type SettingsRowLayout = "inline" | "compact" | "stacked";
 export interface SettingsRowProps {
@@ -65,6 +66,29 @@ export interface SettingsSectionProps {
  * width container its rows and lists respond to.
  */
 export declare function SettingsSection({ id, title, description, info, actions, tone, footer, children }: SettingsSectionProps): React.JSX.Element;
+declare const NOTE_TONE: {
+  readonly default: "text-foreground";
+  readonly muted: "text-muted-foreground";
+  readonly warning: "text-[color:var(--surface-warning-text)]";
+  readonly danger: "text-[color:var(--surface-danger-text)]";
+};
+export interface SettingsNoteProps {
+  /**
+   * `default` keeps the body ink, for a figure such as a MetricStrip or an inline form.
+   * `muted` is an empty list or a loading line. `warning` (a notice) and `danger` (a refusal)
+   * lead with a glyph, so the tone is not carried by colour alone.
+   */
+  tone?: keyof typeof NOTE_TONE;
+  /** `status` announces a change politely; `alert` announces a refusal at once. */
+  role?: "status" | "alert";
+  children?: React.ReactNode;
+}
+/**
+ * A line or block of a {@link SettingsSection} that is not a row: an empty list, a loading line,
+ * a notice, a refusal or a figure. It takes the rows' gutters and divider, so it lines up with
+ * the rows and lists around it.
+ */
+export declare function SettingsNote({ tone, role, children }: SettingsNoteProps): React.JSX.Element;
 /** Track widths for a {@link SettingsList}. Every slot its items use needs a column, except status and menu, which have fallbacks. */
 export interface SettingsListColumns {
   /** A logo or avatar column, such as `"36px"`. */
@@ -112,6 +136,8 @@ export interface SettingsListItemProps {
   meta?: React.ReactNode;
   /** The item's state as plain text, or a control that sets it (a role select). */
   status?: React.ReactNode;
+  /** The state's tone, drawn as a glyph before it in the tone's ink; the state's text keeps its colour. */
+  tone?: StatusTone;
   /** Shown under the meta in danger text and announced. */
   error?: React.ReactNode;
   /** The one verb the item needs at rest. It is drawn as an outline button, so it never reads as the state beside it. */
@@ -124,4 +150,5 @@ export interface SettingsListItemProps {
  * that name. Without a status column the state follows the meta, and without
  * a menu column the ⋯ menu ends the action cell.
  */
-export declare function SettingsListItem({ leading, title, meta, status, error, action, menu }: SettingsListItemProps): React.JSX.Element;
+export declare function SettingsListItem({ leading, title, meta, status, tone, error, action, menu }: SettingsListItemProps): React.JSX.Element;
+export {};