@tangle-network/ui 11.39.0 → 11.40.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @tangle-network/ui
 
+## 11.40.1
+
+### Patch Changes
+
+- af0c788: Give Button, Input and SelectTrigger a shared 44px minimum in both dimensions on coarse primary pointers, including compact density. Icon buttons keep a square 44px touch target. Fine-pointer sizes and the existing field text floor are unchanged.
+  
+  Name UploadProgress retry and remove actions after their file, and render them with the shared ghost icon Button for consistent focus and hit areas. Actions remain non-submitting buttons; retry is available only for failed files.
+
+## 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/lib/control-presentation.d.ts

@@ -35,7 +35,7 @@ export declare const fieldSizes: {
   readonly lg: string;
 };
 export declare const controlSizes: {
-  readonly compact: "h-[var(--control-height)] px-3 py-1 text-sm";
+  readonly compact: "h-[var(--control-height)] px-3 py-1 text-sm pointer-coarse:min-h-11 pointer-coarse:min-w-11";
   readonly touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base";
 };
 export declare const fieldPresentation: string;

package/dist/lib/control-presentation.js

@@ -30,18 +30,20 @@ const controlSquare = {
 */
 const fieldTouchText = "pointer-coarse:text-base";
 /**
-* A control that is shorter than 44px on a fine pointer still gets a 44px hit
-* height on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+* A control smaller than 44px on a fine pointer still gets a 44px target
+* in both dimensions on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+* Follow the primary pointer, matching SegmentedControl; a secondary touch
+* input alone does not inflate a fine-pointer desktop layout.
 */
-const touchTarget = "pointer-coarse:min-h-11";
+const touchTarget = "pointer-coarse:min-h-11 pointer-coarse:min-w-11";
 /** Field sizes: the control scale with field padding. */
 const fieldSizes = {
-	sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, "px-2.5"),
-	md: cn(controlHeight.md, controlText.md, controlRadius.md, "px-3"),
-	lg: cn(controlHeight.lg, controlText.lg, controlRadius.lg, "px-4")
+	sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, touchTarget, "px-2.5"),
+	md: cn(controlHeight.md, controlText.md, controlRadius.md, touchTarget, "px-3"),
+	lg: cn(controlHeight.lg, controlText.lg, controlRadius.lg, touchTarget, "px-4")
 };
 const controlSizes = {
-	compact: "h-[var(--control-height)] px-3 py-1 text-sm",
+	compact: `h-[var(--control-height)] px-3 py-1 text-sm ${touchTarget}`,
 	touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base"
 };
 const fieldPresentation = cn(focusField, ixField, controlMotion, "min-w-0 text-foreground", "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]", "autofill:shadow-[inset_0_0_0_1000px_var(--field-surface,var(--well))] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");

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

@@ -2,7 +2,7 @@ import { controlMotion, surfaceMotion } from "./lib/motion.js";
 import { ixControl, ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { focusFieldInvalid, focusRing } from "./lib/focus.js";
 import { cn } from "./lib/utils.js";
-import { controlHeight, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation.js";
+import { controlHeight, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText, touchTarget } from "./lib/control-presentation.js";
 import { cva } from "class-variance-authority";
 //#region src/presentation.ts
 /** React-free presentation. Consumers scan this published source with Tailwind. */
@@ -12,21 +12,22 @@ 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}`,
 			sandbox: `bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] ${ixControl}`
 		},
 		size: {
-			default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
-			md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
-			sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} px-3`,
-			lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} px-7`,
+			default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} ${touchTarget} px-4 py-2`,
+			md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} ${touchTarget} px-4 py-2`,
+			sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} ${touchTarget} px-3`,
+			lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} ${touchTarget} px-7`,
 			display: "tangle-control-display",
 			xl: "h-13 rounded-xl px-9 text-base",
-			icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md}`,
-			"icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm}`,
-			"icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg}`,
+			icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md} ${touchTarget}`,
+			"icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm} ${touchTarget}`,
+			"icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg} ${touchTarget}`,
 			...controlSizes
 		}
 	},

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/segmented-control.js

@@ -152,7 +152,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 						"aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]"
 					], variant === "tabs" && [
 						"shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2",
-						"pointer-coarse:min-h-11",
+						"pointer-coarse:min-h-11 pointer-coarse:min-w-11",
 						focusRingInset,
 						"hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]"
 					], active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground"),