@tangle-network/ui 11.39.0 → 11.40.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @tangle-network/ui
 
+## 11.40.0
+
+### Minor Changes
+
+- 63e1e7e: Add the settings atoms to `@tangle-network/ui/primitives`, so every product's settings page draws from one owner:
+  
+  - `Field` and `fieldMessageId`, promoted from Agent App's profile form with the same API. The info tip is a bare `Button` with a 44px hit area on coarse pointers.
+  - `SettingsRow`: `inline`, `compact` and `stacked` layouts; a save status after the label, announced politely; an error (with optional Retry) or a lock reason that replaces the description, describes the control and marks it invalid. No className sizing hooks.
+  - `SettingsSection`: a `Card` with a 16px title, an anchor `id`, a `danger` tone, top-right actions and a footer on the muted plane.
+  - `SettingsList` and `SettingsListItem`: subgrid-aligned leading, state, action and menu columns. The item's one at-rest `action` is an outline button, so it never reads as the state; with a `disabledReason` it stays focusable, does nothing and shows the reason under the meta. Destructive actions go in the ⋯ menu, where an unavailable item stays focusable with its reason.
+  
+  `Button` gains `variant="destructive-outline"` for a destructive action at rest, such as a danger section's "Delete project…". `Avatar` gains `size` (`sm` 32px, `md` 40px by default). `Switch` keeps its 36 x 20 track and gets a 44px hit area on coarse pointers, like the info tip.
+  
+  Rows and lists answer to their card's width: below 34rem rows stack and list items become two lines with the state under the title.
+  
+  `PageShell` gains `measure="settings"` and a `header` slot. The settings measure is a 48rem column of cards with a sticky 13rem section column once its frame is 60rem wide, and a sticky 56px tab strip below that which keeps the current tab in view by scrolling the strip only, including when the links are replaced or the web font swaps. Without navigation it is the 48rem column alone. Its `className` goes on the frame, so a `max-w-*` bounds the width the layout answers to.
+  
+  The reading layout adds its 13rem navigation track only when it has a navigation, so an article with a header or an outline but no navigation no longer drops into that track. Every existing export is unchanged.
+
 ## 11.39.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -62,7 +62,7 @@ import { Calendar, CalendarDate, CalendarProps, formatCalendarDate, localToday,
 import { DatePicker, DatePickerProps } from "./primitives/date-picker.js";
 import { TimeSelect, TimeSelectProps } from "./primitives/time-select.js";
 import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
-import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
+import { Avatar, AvatarFallback, AvatarImage, AvatarProps } from "./primitives/avatar.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableProps, TableRow } from "./primitives/table.js";
@@ -90,6 +90,8 @@ import { InlineCode, InlineCodeProps } from "./primitives/code-block.js";
 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 { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
@@ -135,4 +137,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, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, 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, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, 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, 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, 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, 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, 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, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, 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, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, 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, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, 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, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, 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, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, 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, 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, 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, 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, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, 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, StatCard, type StatCardProps, 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, 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, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, 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

@@ -46,6 +46,8 @@ import { CodeBlock, CopyButton } from "./markdown/code-block.js";
 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 { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
@@ -119,4 +121,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, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, 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, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, 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, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, 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, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, 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, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, 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, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, 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, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, 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, 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, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, 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/presentation.d.ts

@@ -3,7 +3,7 @@ import { controlHeight, controlRadius, controlSizes, controlText, fieldPresentat
 import { ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 //#region src/presentation.d.ts
 export declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "sandbox" | "secondary" | null | undefined;
+  variant?: "default" | "destructive" | "destructive-outline" | "ghost" | "link" | "outline" | "sandbox" | "secondary" | null | undefined;
   size?: "compact" | "default" | "display" | "icon" | "icon-lg" | "icon-sm" | "lg" | "md" | "sm" | "touch" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const inputVariants: (props?: ({

package/dist/presentation.js

@@ -12,6 +12,7 @@ const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whites
 			default: `bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] ${ixControl}`,
 			destructive: `bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] ${ixControl}`,
 			outline: `border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground ${ixControl}`,
+			"destructive-outline": `border border-[var(--surface-danger-border)] bg-card hover:bg-[var(--surface-danger-bg)] active:scale-[0.97] text-[var(--surface-danger-text)] ${ixControl}`,
 			secondary: `bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] ${ixControl}`,
 			ghost: `hover:text-foreground text-muted-foreground border border-transparent ${ixControlSoft}`,
 			link: `text-[var(--accent-text)] underline-offset-4 hover:underline ${ixControlSoft}`,

package/dist/primitives/avatar.d.ts

@@ -1,7 +1,15 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 //#region src/primitives/avatar.d.ts
-declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AVATAR_SIZES: {
+  readonly sm: "h-8 w-8";
+  readonly md: "h-10 w-10";
+};
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  /** sm 32px (a list row beside a two-line name), md 40px (default). */
+  size?: keyof typeof AVATAR_SIZES;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 //#endregion

package/dist/primitives/avatar.js

@@ -3,9 +3,13 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 //#region src/primitives/avatar.tsx
-const Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+const AVATAR_SIZES = {
+	sm: "h-8 w-8",
+	md: "h-10 w-10"
+};
+const Avatar = React.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
 	ref,
-	className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
+	className: cn("relative flex shrink-0 overflow-hidden rounded-full", AVATAR_SIZES[size], className),
 	...props
 }));
 Avatar.displayName = AvatarPrimitive.Root.displayName;

package/dist/primitives/button.d.ts

@@ -2,7 +2,8 @@ import { buttonVariants } from "../presentation.js";
 import * as React from "react";
 //#region src/primitives/button.d.ts
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
+  /** `destructive-outline` is a destructive action at rest, such as "Delete project…", whose confirmation uses `destructive`. */
+  variant?: "default" | "destructive" | "destructive-outline" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
   /** sm 32px, default/md 36px (`--control-height`), lg 44px; icon sizes are squares on the same heights. */
   size?: "default" | "md" | "sm" | "lg" | "xl" | "display" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
   asChild?: boolean;

package/dist/primitives/field.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+//#region src/primitives/field.d.ts
+export interface FieldProps {
+  label: string;
+  /** The control's id; the label targets it. */
+  htmlFor: string;
+  /** Help that explains what the setting does, shown from an info button. */
+  info?: React.ReactNode;
+  /** One short sentence the person needs to fill the field in. */
+  hint?: React.ReactNode;
+  /** A validation error. The control should set `aria-invalid` and reference {@link fieldMessageId}. */
+  error?: React.ReactNode;
+  /** A non-error status, such as a check that passed. */
+  status?: React.ReactNode;
+  /** Trailing content in the label row, such as a "Use default" action. */
+  aside?: React.ReactNode;
+  children: React.ReactNode;
+}
+/** The id of a field's hint, error, or status line, for the control's `aria-describedby`. */
+export declare function fieldMessageId(htmlFor: string): string;
+/**
+ * A labelled form field: the label (with an optional info tip and a trailing
+ * aside) above the control, and one message line under it. Every line is
+ * 14px; an error replaces the status and the hint and is announced.
+ */
+export declare function Field({ label, htmlFor, info, hint, error, status, aside, children }: FieldProps): React.JSX.Element;
+//#endregion

package/dist/primitives/field.js

@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
+import { InfoTip } from "./info-tip.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlert } from "lucide-react";
+//#region src/primitives/field.tsx
+/** The id of a field's hint, error, or status line, for the control's `aria-describedby`. */
+function fieldMessageId(htmlFor) {
+	return `${htmlFor}-message`;
+}
+/**
+* A labelled form field: the label (with an optional info tip and a trailing
+* aside) above the control, and one message line under it. Every line is
+* 14px; an error replaces the status and the hint and is announced.
+*/
+function Field({ label, htmlFor, info, hint, error, status, aside, children }) {
+	const message = error ?? status ?? hint;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 space-y-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-6 items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(Label, {
+						htmlFor,
+						className: "leading-6 text-foreground",
+						children: label
+					}), info && /* @__PURE__ */ jsx(InfoTip, {
+						label,
+						children: info
+					})]
+				}), aside]
+			}),
+			children,
+			message && /* @__PURE__ */ jsxs("div", {
+				id: fieldMessageId(htmlFor),
+				role: error ? "alert" : void 0,
+				className: cn("text-sm leading-6 [overflow-wrap:anywhere]", error ? "flex items-start gap-1.5 text-[var(--surface-danger-text)]" : "text-muted-foreground"),
+				children: [error && /* @__PURE__ */ jsx(CircleAlert, {
+					"aria-hidden": "true",
+					className: "mt-1 size-4 shrink-0"
+				}), error ? /* @__PURE__ */ jsx("span", {
+					className: "min-w-0",
+					children: message
+				}) : message]
+			})
+		]
+	});
+}
+//#endregion
+export { Field, fieldMessageId };

package/dist/primitives/info-tip.js

@@ -0,0 +1,50 @@
+"use client";
+import { Button } from "./button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info } from "lucide-react";
+//#region src/primitives/info-tip.tsx
+/**
+* An info button beside a label, for help that explains a setting. It opens
+* on hover and keyboard focus and toggles on tap. The glyph stays 20px; on a
+* coarse pointer a transparent 44px hit area surrounds it. It brings its own
+* provider, so a row or field works in an app that never mounted one.
+*/
+function InfoTip({ label, children }) {
+	const [open, setOpen] = React.useState(false);
+	const openAtPress = React.useRef(false);
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		delayDuration: 150,
+		children: /* @__PURE__ */ jsxs(Tooltip, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "bare",
+					"aria-label": `About ${label}`,
+					onPointerDown: () => {
+						openAtPress.current = open;
+					},
+					onClick: (event) => {
+						event.preventDefault();
+						setOpen(event.detail === 0 ? !open : !openAtPress.current);
+					},
+					className: "relative inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground pointer-coarse:before:absolute pointer-coarse:before:-inset-3 pointer-coarse:before:content-['']",
+					children: /* @__PURE__ */ jsx(Info, {
+						"aria-hidden": "true",
+						className: "size-4"
+					})
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side: "top",
+				className: "max-w-72 text-sm leading-5",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { InfoTip };

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { ReactNode } from "react";
 //#region src/primitives/page-shell.d.ts
 export interface PageShellProps {
@@ -6,6 +7,18 @@ export interface PageShellProps {
   navigation?: ReactNode;
   article?: ReactNode;
   outline?: ReactNode;
+  /** Spans the reading layout above navigation and article, such as the page's `PageHeader`. */
+  header?: ReactNode;
+  /**
+   * The reading layout's measure. `reading` (default) is the 42rem document
+   * 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.
+   */
+  measure?: "reading" | "settings";
   navigationLabel?: string;
   outlineLabel?: string;
   className?: string;
@@ -13,8 +26,11 @@ export interface PageShellProps {
 /**
  * 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. Use
- * className to override the bound/gutters, or omit it for a workbench layout.
+ * The caller owns landmarks, routing, auth, navigation and data state.
+ * Without slots, className overrides the bound/gutters, or omit it for a
+ * workbench layout. With slots it goes on the reading grid. With
+ * `measure="settings"` it goes on the frame, the width the layout answers to,
+ * so a `max-w-*` there bounds the measure and a narrow frame gets the strip.
  */
-export declare function PageShell({ children, className, navigation, article, outline, navigationLabel, outlineLabel }: PageShellProps): import("react").JSX.Element;
+export declare function PageShell({ children, className, navigation, article, outline, header, measure, navigationLabel, outlineLabel }: PageShellProps): React.JSX.Element;
 //#endregion

package/dist/primitives/page-shell.js

@@ -1,32 +1,90 @@
+"use client";
 import { cn } from "../lib/utils.js";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region 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.
+*/
+function useCurrentLinkInView(ref, enabled) {
+	React.useEffect(() => {
+		const nav = ref.current;
+		if (!enabled || !nav) return;
+		const reveal = () => {
+			if (nav.scrollWidth <= nav.clientWidth) return;
+			const current = nav.querySelector("[aria-current=\"page\"]");
+			if (!current) return;
+			const strip = nav.getBoundingClientRect();
+			const link = current.getBoundingClientRect();
+			nav.scrollLeft += link.left + link.width / 2 - (strip.left + strip.width / 2);
+		};
+		let live = true;
+		reveal();
+		document.fonts?.ready.then(() => {
+			if (live) reveal();
+		});
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(reveal);
+		resize?.observe(nav);
+		const links = new MutationObserver(reveal);
+		links.observe(nav, {
+			subtree: true,
+			childList: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: ["aria-current"]
+		});
+		return () => {
+			live = false;
+			resize?.disconnect();
+			links.disconnect();
+		};
+	}, [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. Use
-* className to override the bound/gutters, or omit it for a workbench layout.
+* The caller owns landmarks, routing, auth, navigation and data state.
+* Without slots, className overrides the bound/gutters, or omit it for a
+* workbench layout. With slots it goes on the reading grid. With
+* `measure="settings"` it goes on the frame, the width the layout answers to,
+* so a `max-w-*` there bounds the measure and a narrow frame gets the strip.
 */
-function PageShell({ children, className, navigation, article, outline, navigationLabel = "Sections", outlineLabel = "On this page" }) {
-	if (navigation || article || outline) return /* @__PURE__ */ jsxs("div", {
-		className: cn("tangle-reading-shell", className),
-		children: [
-			navigation && /* @__PURE__ */ jsx("nav", {
-				"aria-label": navigationLabel,
-				className: "tangle-reading-nav",
-				children: navigation
-			}),
-			/* @__PURE__ */ jsx("article", {
-				className: "tangle-reading-article",
-				children: article ?? children
-			}),
-			outline && /* @__PURE__ */ jsx("aside", {
-				"aria-label": outlineLabel,
-				className: "tangle-reading-outline",
-				children: outline
-			})
-		]
-	});
+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));
+	if (navigation || article || outline || header || settings) {
+		const shell = /* @__PURE__ */ jsxs("div", {
+			className: cn("tangle-reading-shell", !settings && className),
+			"data-measure": settings ? "settings" : void 0,
+			children: [
+				header && /* @__PURE__ */ jsx("div", {
+					className: "tangle-reading-header",
+					children: header
+				}),
+				navigation && /* @__PURE__ */ jsx("nav", {
+					ref: navRef,
+					"aria-label": navigationLabel,
+					className: "tangle-reading-nav",
+					children: navigation
+				}),
+				/* @__PURE__ */ jsx("article", {
+					className: "tangle-reading-article",
+					children: article ?? children
+				}),
+				outline && /* @__PURE__ */ jsx("aside", {
+					"aria-label": outlineLabel,
+					className: "tangle-reading-outline",
+					children: outline
+				})
+			]
+		});
+		return settings ? /* @__PURE__ */ jsx("div", {
+			className: cn("tangle-settings-frame", className),
+			children: shell
+		}) : shell;
+	}
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("mx-auto min-w-0 w-full max-w-6xl space-y-8 px-6 py-8 lg:px-8", className),
 		children

package/dist/primitives/settings.d.ts

@@ -0,0 +1,125 @@
+import * as React from "react";
+//#region src/primitives/settings.d.ts
+export type SettingsRowLayout = "inline" | "compact" | "stacked";
+export interface SettingsRowProps {
+  /** The row's id, for a deep link such as `#timezone`. */
+  id?: string;
+  label: string;
+  /** One line that states a consequence the person needs to act. Most rows need none. */
+  description?: React.ReactNode;
+  /** Help that explains the setting, shown from an info button beside the label. */
+  info?: React.ReactNode;
+  /**
+   * The control's id. The label targets it, and the row's description, error
+   * or lock reason renders at {@link fieldMessageId}. When the row's only child
+   * carries this id, the row adds that message to its `aria-describedby` and
+   * marks it invalid on error; otherwise point the control there yourself.
+   */
+  htmlFor?: string;
+  /** A save state after the label, such as "Saving…" or "Saved". It is announced politely. */
+  status?: React.ReactNode;
+  /** Replaces the description in danger text and is announced. */
+  error?: React.ReactNode;
+  /** Shows a Retry action after the error. */
+  onRetry?: () => void;
+  /**
+   * `inline` (default): text left, control right, stacked below 34rem.
+   * `compact`: the control keeps its own width and stays on the line (switches, single buttons).
+   * `stacked`: the control spans the row under the text (textareas, lists).
+   */
+  layout?: SettingsRowLayout;
+  /** Why the control is unavailable, naming who can change it. Replaces the description after a lock glyph. */
+  disabledReason?: React.ReactNode;
+  children?: React.ReactNode;
+}
+/**
+ * One setting: its label, an optional consequence line and its control. The
+ * label carries the save status after it; an error or a lock reason replaces
+ * the description. Rows inside a {@link SettingsSection} are divided by a
+ * hairline and stack when the card is narrower than 34rem.
+ */
+export declare function SettingsRow({ id, label, description, info, htmlFor, status, error, onRetry, layout, disabledReason, children }: SettingsRowProps): React.JSX.Element;
+export interface SettingsSectionProps {
+  /** The section's anchor: `#id` scrolls to it. The title's id is `${id}-title`. */
+  id: string;
+  title: string;
+  /** One short line, at most about twelve words. Leave it out when the title says enough. */
+  description?: React.ReactNode;
+  /** Help that explains the section, shown from an info button beside the title. */
+  info?: React.ReactNode;
+  /** Section actions, top right, such as "Edit brief" or "Add source". */
+  actions?: React.ReactNode;
+  /** `danger` draws the card's edge and title in the danger tone. */
+  tone?: "default" | "danger";
+  /** The card's footer on the muted plane, such as the one save bar a section may have. */
+  footer?: React.ReactNode;
+  /** Rows, lists and any other blocks of the section. */
+  children?: React.ReactNode;
+}
+/**
+ * One settings card: a 16px title with optional description, info tip and
+ * actions, then its rows and lists, then an optional footer. The card is the
+ * width container its rows and lists respond to.
+ */
+export declare function SettingsSection({ id, title, description, info, actions, tone, footer, children }: SettingsSectionProps): 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"`. */
+  leading?: string;
+  /** The title column; `minmax(0,1fr)` by default. */
+  main?: string;
+  /** A fixed state column, such as `"8rem"`. Below 34rem the state moves under the title, full width. */
+  status?: string;
+  /** A fixed column for the at-rest action, such as `"9rem"`. Below 34rem it shrinks to its content. */
+  action?: string;
+  /** A column for the ⋯ menu, such as `"36px"`. Without it the menu ends the action cell. */
+  menu?: string;
+}
+export interface SettingsListProps {
+  columns: SettingsListColumns;
+  "aria-label"?: string;
+  children?: React.ReactNode;
+}
+/**
+ * Comparable rows whose status and action columns line up across items (CSS
+ * subgrid). Below 34rem each item becomes two lines: the title and meta with
+ * its action on the right, then the state under them at full width.
+ */
+export declare function SettingsList({ columns, children, "aria-label": ariaLabel }: SettingsListProps): React.JSX.Element;
+export interface SettingsListMenuItem {
+  label: string;
+  onSelect: () => void;
+  /** Destructive actions (delete, remove, revoke) belong here, in the danger tone. */
+  tone?: "danger";
+  /** Shown under the label; the item stays focusable so the reason is read, and selecting it does nothing. */
+  disabledReason?: React.ReactNode;
+}
+export interface SettingsListAction {
+  label: string;
+  onSelect: () => void;
+  /** Why the action is unavailable, naming who can take it. The button stays focusable, does nothing, and the reason shows under the meta. */
+  disabledReason?: React.ReactNode;
+}
+export interface SettingsListItemProps {
+  /** A logo or avatar, in the list's `leading` column. */
+  leading?: React.ReactNode;
+  /** The item's name. Make it the link to the item's detail. */
+  title: React.ReactNode;
+  /** One line under the title, such as an address or a schedule. */
+  meta?: React.ReactNode;
+  /** The item's state as plain text, or a control that sets it (a role select). */
+  status?: React.ReactNode;
+  /** 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. */
+  action?: SettingsListAction;
+  /** Everything else, including destructive actions, behind a ⋯ button. */
+  menu?: SettingsListMenuItem[];
+}
+/**
+ * One item in a {@link SettingsList}; each slot goes to the list's column of
+ * 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;
+//#endregion