@tangle-network/ui 11.27.0 → 11.28.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.28.0
+
+### Minor Changes
+
+- 5f50a1b: Put `Button`, `Input`, `Textarea` and `SelectTrigger` on one control scale: `sm` 32px/12px text, `md` (default) 36px/14px, `lg` 44px/16px, read from Brand's control tokens with pixel fallbacks. Visible changes: a default `Input` is now 36px (was 44px) with 12px side padding (was 16px), matching the default `Button` and `SelectTrigger`; `Input` `sm` is 32px (was 36px) and `lg` 44px (was 48px); `SelectTrigger` uses the `rounded-lg` corner at md and gains `sm|md|lg`; `Button` `lg` text is 16px (was 14px); fields render 16px text on a coarse pointer so iOS does not zoom on focus. `Button` adds `md`, `icon-sm` (32px) and `icon-lg` (44px). New `HelpText` (`tone="hint" | "error"`, 12px) renders `Input` and `Textarea` hints and errors (were 14px); `Label` reads `--font-size-label`. `compact`, `touch` and `xl` are unchanged.
+
 ## 11.27.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -53,6 +53,7 @@ import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGr
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
 import { Slider } from "./primitives/slider.js";
 import { Input, InputProps, Textarea, TextareaProps } from "./primitives/input.js";
+import { HelpText, HelpTextProps } from "./primitives/help-text.js";
 import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
 import { Avatar, AvatarFallback, AvatarImage } 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";
@@ -119,4 +120,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, AppendUserMessageOptions, ApplySdkEventOptions, 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, 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, CustomToolRenderer, 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, 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 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, 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, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, 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, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, 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, AppendUserMessageOptions, ApplySdkEventOptions, 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, 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, CustomToolRenderer, 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 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, 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, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, 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, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, 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

@@ -9,6 +9,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitive
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./primitives/context-menu.js";
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
 import { Slider } from "./primitives/slider.js";
+import { HelpText } from "./primitives/help-text.js";
 import { Label } from "./primitives/label.js";
 import { Input, Textarea } from "./primitives/input.js";
 import { Badge, badgeVariants } from "./primitives/badge.js";
@@ -103,4 +104,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, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, 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, 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, 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, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, 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, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, 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, 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, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, 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.js

@@ -2,10 +2,42 @@ import { focusField } from "./focus.js";
 import { cn } from "./utils.js";
 //#region src/lib/control-presentation.ts
 const controlMotion = "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
+const controlHeight = {
+	sm: "h-[var(--control-height-sm,2rem)]",
+	md: "h-[var(--control-height,2.25rem)]",
+	lg: "h-[var(--control-height-lg,2.75rem)]"
+};
+const controlText = {
+	sm: "text-[length:var(--control-text-sm,0.75rem)]",
+	md: "text-[length:var(--control-text-md,0.875rem)]",
+	lg: "text-[length:var(--control-text-lg,1rem)]"
+};
+const controlRadius = {
+	sm: "rounded-md",
+	md: "rounded-lg",
+	lg: "rounded-lg"
+};
+/** Square icon-only controls on the same heights. */
+const controlSquare = {
+	sm: "size-[var(--control-height-sm,2rem)]",
+	md: "size-[var(--control-height,2.25rem)]",
+	lg: "size-[var(--control-height-lg,2.75rem)]"
+};
+/**
+* Field text never drops below 16px on a coarse pointer: iOS Safari zooms the
+* page on focus for anything smaller.
+*/
+const fieldTouchText = "pointer-coarse:text-base";
+/** 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")
+};
 const controlSizes = {
 	compact: "h-[var(--control-height)] px-3 py-1 text-sm",
 	touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base"
 };
 const fieldPresentation = cn(focusField, controlMotion, "min-w-0 bg-[var(--bg-input)] 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(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");
 //#endregion
-export { controlMotion, controlSizes, fieldPresentation };
+export { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText };

package/dist/primitives/button.d.ts

@@ -2,11 +2,12 @@ import * as React from "react";
 //#region src/primitives/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "sandbox" | "secondary" | null | undefined;
-  size?: "compact" | "default" | "icon" | "lg" | "sm" | "touch" | "xl" | null | undefined;
+  size?: "compact" | "default" | "icon" | "icon-lg" | "icon-sm" | "lg" | "md" | "sm" | "touch" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
-  size?: "default" | "sm" | "lg" | "xl" | "icon" | "compact" | "touch" | null;
+  /** sm 32px, default/md 36px (`--control-height`), lg 44px; icon sizes are squares on the same heights. */
+  size?: "default" | "md" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
   asChild?: boolean;
   loading?: boolean;
   children?: React.ReactNode;

package/dist/primitives/button.js

@@ -1,12 +1,12 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { controlMotion, controlSizes } from "../lib/control-presentation.js";
+import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText } from "../lib/control-presentation.js";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/button.tsx
-const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
+const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97]",
@@ -18,11 +18,14 @@ const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whites
 			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]"
 		},
 		size: {
-			default: "h-[var(--control-height)] px-4 py-2",
-			sm: "h-8 rounded-md px-3 text-xs",
-			lg: "h-11 rounded-lg px-7 text-sm",
+			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`,
 			xl: "h-13 rounded-xl px-9 text-base",
-			icon: "h-[var(--control-height)] w-[var(--control-height)]",
+			icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md}`,
+			"icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm}`,
+			"icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg}`,
 			...controlSizes
 		}
 	},

package/dist/primitives/help-text.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+//#region src/primitives/help-text.d.ts
+export interface HelpTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** `hint` describes a field; `error` reports what is wrong with its value. */
+  tone?: "hint" | "error";
+}
+/**
+ * Text under a field. One size (`--font-size-help`, 12px) for every field, so
+ * forms across products read the same. Point the field's `aria-describedby` at
+ * its `id`; Input and Textarea do this for their `hint` and `error` props.
+ */
+declare const HelpText: React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { HelpText };

package/dist/primitives/help-text.js

@@ -0,0 +1,18 @@
+import { cn } from "../lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/help-text.tsx
+/**
+* Text under a field. One size (`--font-size-help`, 12px) for every field, so
+* forms across products read the same. Point the field's `aria-describedby` at
+* its `id`; Input and Textarea do this for their `hint` and `error` props.
+*/
+const HelpText = React.forwardRef(({ className, tone = "hint", ...props }, ref) => /* @__PURE__ */ jsx("p", {
+	ref,
+	"data-tone": tone,
+	className: cn("text-[length:var(--font-size-help,0.75rem)] leading-4", tone === "error" ? "font-medium text-[var(--surface-danger-text)]" : "text-[var(--text-dim)]", className),
+	...props
+}));
+HelpText.displayName = "HelpText";
+//#endregion
+export { HelpText };

package/dist/primitives/input.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 //#region src/primitives/input.d.ts
 declare const inputVariants: (props?: ({
   variant?: "default" | "error" | "sandbox" | null | undefined;
-  size?: "compact" | "default" | "lg" | "sm" | "touch" | null | undefined;
+  size?: "compact" | "default" | "lg" | "md" | "sm" | "touch" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
   label?: string;
@@ -14,8 +14,8 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Both values render the same field. */
   variant?: "default" | "sandbox";
-  /** Opt in to density/typing presentation without changing the default 120px well. */
-  size?: "default" | "compact" | "touch";
+  /** Text, padding and corner from the control scale; the 120px well is unchanged. compact and touch remain. */
+  size?: "default" | "sm" | "md" | "lg" | "compact" | "touch";
   label?: string;
   error?: string;
   hint?: string;

package/dist/primitives/input.js

@@ -1,13 +1,14 @@
 "use client";
 import { focusFieldInvalid } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
-import { controlSizes, fieldPresentation } from "../lib/control-presentation.js";
+import { controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation.js";
+import { HelpText } from "./help-text.js";
 import { Label } from "./label.js";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/input.tsx
-const inputVariants = cva(cn("flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation), {
+const inputVariants = cva(cn("flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation, fieldTouchText), {
 	variants: {
 		variant: {
 			default: "",
@@ -15,10 +16,12 @@ const inputVariants = cva(cn("flex w-full rounded-lg border px-4 py-2 text-sm pl
 			error: focusFieldInvalid
 		},
 		size: {
-			default: "h-11",
-			sm: "h-9 px-3",
-			lg: "h-12 px-5",
-			...controlSizes
+			default: fieldSizes.md,
+			md: fieldSizes.md,
+			sm: fieldSizes.sm,
+			lg: fieldSizes.lg,
+			compact: cn(fieldSizes.md, controlSizes.compact),
+			touch: cn(fieldSizes.md, controlSizes.touch)
 		}
 	},
 	defaultVariants: {
@@ -57,14 +60,13 @@ const Input = React.forwardRef(({ className, type, variant, size, label, error,
 				children: label
 			}),
 			input,
-			error && /* @__PURE__ */ jsx("p", {
+			error && /* @__PURE__ */ jsx(HelpText, {
 				id: errorId,
-				className: "text-[var(--surface-danger-text)] text-sm font-medium",
+				tone: "error",
 				children: error
 			}),
-			hint && /* @__PURE__ */ jsx("p", {
+			hint && /* @__PURE__ */ jsx(HelpText, {
 				id: hintId,
-				className: "text-[var(--text-dim)] text-sm",
 				children: hint
 			})
 		]
@@ -78,7 +80,7 @@ const Textarea = React.forwardRef(({ className, variant: _variant, size = "defau
 	const errorId = error ? `${textareaId}-error` : void 0;
 	const textarea = /* @__PURE__ */ jsx("textarea", {
 		id: textareaId,
-		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm", "placeholder:text-[var(--text-dim)]", "disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", size === "compact" && "min-h-24 px-3 py-2", size === "touch" && "text-base", className),
+		className: cn("flex min-h-[120px] w-full resize-y border px-3 py-2", "placeholder:text-[var(--text-dim)]", "disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, fieldTouchText, size === "sm" ? cn(controlText.sm, controlRadius.sm, "px-2.5") : size === "lg" ? cn(controlText.lg, controlRadius.lg, "px-4 py-3") : cn(controlText.md, controlRadius.md), error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", size === "compact" && "min-h-24 px-3 py-2", size === "touch" && "text-base", className),
 		ref,
 		...props,
 		"aria-describedby": descriptionIds(describedBy, hintId, errorId),
@@ -94,14 +96,13 @@ const Textarea = React.forwardRef(({ className, variant: _variant, size = "defau
 				children: label
 			}),
 			textarea,
-			error && /* @__PURE__ */ jsx("p", {
+			error && /* @__PURE__ */ jsx(HelpText, {
 				id: errorId,
-				className: "text-[var(--surface-danger-text)] text-sm",
+				tone: "error",
 				children: error
 			}),
-			hint && /* @__PURE__ */ jsx("p", {
+			hint && /* @__PURE__ */ jsx(HelpText, {
 				id: hintId,
-				className: "text-[var(--text-dim)] text-sm",
 				children: hint
 			})
 		]

package/dist/primitives/label.js

@@ -5,7 +5,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import * as LabelPrimitive from "@radix-ui/react-label";
 //#region src/primitives/label.tsx
-const labelVariants = cva("font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const labelVariants = cva("font-medium text-[length:var(--font-size-label,0.875rem)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
 const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
 	ref,
 	className: cn(labelVariants(), className),

package/dist/primitives/select.d.ts

@@ -5,8 +5,8 @@ declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-  /** Default remains 36px; compact follows density, touch is at least 44px. */
-  size?: "default" | "compact" | "touch";
+  /** The shared control scale: sm 32px, default/md 36px, lg 44px. compact follows density, touch is at least 44px. */
+  size?: "default" | "sm" | "md" | "lg" | "compact" | "touch";
 } & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/select.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { controlSizes, fieldPresentation } from "../lib/control-presentation.js";
+import { controlSizes, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
@@ -11,7 +11,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size !== "default" && controlSizes[size], className),
+	className: cn("flex w-full items-center justify-between whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, fieldTouchText, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size], className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,

package/dist/primitives.d.ts

@@ -10,6 +10,7 @@ import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGr
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
 import { Slider } from "./primitives/slider.js";
 import { Input, InputProps, Textarea, TextareaProps } from "./primitives/input.js";
+import { HelpText, HelpTextProps } from "./primitives/help-text.js";
 import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
 import { Avatar, AvatarFallback, AvatarImage } 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";
@@ -47,4 +48,4 @@ import { Chip, ChipProps } from "./primitives/chip.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -7,6 +7,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitive
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./primitives/context-menu.js";
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
 import { Slider } from "./primitives/slider.js";
+import { HelpText } from "./primitives/help-text.js";
 import { Label } from "./primitives/label.js";
 import { Input, Textarea } from "./primitives/input.js";
 import { Badge, badgeVariants } from "./primitives/badge.js";
@@ -47,4 +48,4 @@ import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, HelpText, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.27.0",
+  "version": "11.28.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.17.1",
+    "@tangle-network/brand": "^1.18.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/lib/control-presentation.ts

@@ -6,8 +6,55 @@ import { cn } from "./utils";
 export const controlMotion =
   "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
 
-// Explicit opt-in sizes. Legacy defaults and sm/lg/icon sizes stay unchanged.
-// Compact follows the consumer's density token; touch does not shrink with it.
+/**
+ * The control scale. Button, Input, Textarea and SelectTrigger take the same
+ * `sm | md | lg` sizes and read the same Brand tokens, so any row of controls
+ * at one size shares a height, a text size and a corner. md follows the
+ * `--control-height` density knob. The fallbacks keep an app on an older
+ * Brand stylesheet at the same pixels.
+ */
+export type ControlSize = "sm" | "md" | "lg";
+
+export const controlHeight = {
+  sm: "h-[var(--control-height-sm,2rem)]",
+  md: "h-[var(--control-height,2.25rem)]",
+  lg: "h-[var(--control-height-lg,2.75rem)]",
+} as const satisfies Record<ControlSize, string>;
+
+export const controlText = {
+  sm: "text-[length:var(--control-text-sm,0.75rem)]",
+  md: "text-[length:var(--control-text-md,0.875rem)]",
+  lg: "text-[length:var(--control-text-lg,1rem)]",
+} as const satisfies Record<ControlSize, string>;
+
+export const controlRadius = {
+  sm: "rounded-md",
+  md: "rounded-lg",
+  lg: "rounded-lg",
+} as const satisfies Record<ControlSize, string>;
+
+/** Square icon-only controls on the same heights. */
+export const controlSquare = {
+  sm: "size-[var(--control-height-sm,2rem)]",
+  md: "size-[var(--control-height,2.25rem)]",
+  lg: "size-[var(--control-height-lg,2.75rem)]",
+} as const satisfies Record<ControlSize, string>;
+
+/**
+ * Field text never drops below 16px on a coarse pointer: iOS Safari zooms the
+ * page on focus for anything smaller.
+ */
+export const fieldTouchText = "pointer-coarse:text-base";
+
+/** Field sizes: the control scale with field padding. */
+export 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"),
+} as const satisfies Record<ControlSize, string>;
+
+// Explicit opt-in sizes kept for existing callers. Compact follows the
+// consumer's density token (md); touch is lg with a guaranteed 44px minimum.
 export const controlSizes = {
   compact: "h-[var(--control-height)] px-3 py-1 text-sm",
   touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base",

package/src/primitives/button.tsx

@@ -1,12 +1,15 @@
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-import { controlMotion, controlSizes } from "../lib/control-presentation";
+import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText } from "../lib/control-presentation";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 
+// Sizes follow the shared control scale (control-presentation.ts): sm, md and
+// lg match Input, Textarea and SelectTrigger at the same size. xl is a display
+// call to action outside that scale.
 const buttonVariants = cva(
-  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
   {
     variants: {
       variant: {
@@ -25,11 +28,14 @@ const buttonVariants = cva(
           "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]",
       },
       size: {
-        default: "h-[var(--control-height)] px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-11 rounded-lg px-7 text-sm",
+        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`,
         xl: "h-13 rounded-xl px-9 text-base",
-        icon: "h-[var(--control-height)] w-[var(--control-height)]",
+        icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md}`,
+        "icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm}`,
+        "icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg}`,
         ...controlSizes,
       },
     },
@@ -43,7 +49,8 @@ const buttonVariants = cva(
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
-  size?: "default" | "sm" | "lg" | "xl" | "icon" | "compact" | "touch" | null;
+  /** sm 32px, default/md 36px (`--control-height`), lg 44px; icon sizes are squares on the same heights. */
+  size?: "default" | "md" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
   asChild?: boolean;
   loading?: boolean;
   children?: React.ReactNode;

package/src/primitives/control-presentation.stories.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./button";
+import { HelpText } from "./help-text";
 import { Input, Textarea } from "./input";
+import { Label } from "./label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 import { Metric, MetricStrip } from "./metric-strip";
 
@@ -11,7 +13,7 @@ function Contract() {
   return (
     <main className="mx-auto max-w-5xl space-y-6 bg-background p-4 text-foreground" data-presentation-contract>
       <h1 className="text-xl font-semibold">Field and metric presentation</h1>
-      {(["default", "compact", "touch"] as const).map((size) => (
+      {(["sm", "md", "lg", "compact", "touch"] as const).map((size) => (
         <section key={size} data-size-row={size} className="space-y-2">
           <h2 className="font-semibold">{size}</h2>
           <div className="flex flex-wrap items-end gap-3">
@@ -24,10 +26,17 @@ function Contract() {
               </SelectContent>
             </Select>
             <Button size={size} onClick={() => setActions((value) => value + 1)}>Save</Button>
+            <Button size={size} variant="outline">Cancel</Button>
           </div>
           <Textarea size={size} aria-label={`${size} notes`} placeholder="Details" />
         </section>
       ))}
+      <section className="max-w-sm space-y-1.5" data-form-text>
+        <Label htmlFor="workspace-name">Workspace name</Label>
+        <Input id="workspace-name" aria-describedby="workspace-name-hint" placeholder="Acme" />
+        <HelpText id="workspace-name-hint">Shown to everyone you invite.</HelpText>
+        <HelpText tone="error">This name is already taken.</HelpText>
+      </section>
       <section className="space-y-2" data-state-controls>
         <h2 className="font-semibold">States and actions</h2>
         <Input label="Email" autoComplete="email" name="email" defaultValue="reader@example.test" />

package/src/primitives/control-presentation.test.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import { controlMotion, fieldPresentation } from "../lib/control-presentation";
+import { controlHeight, controlText, controlMotion, fieldPresentation } from "../lib/control-presentation";
+import { HelpText } from "./help-text";
+import { Label } from "./label";
 import { Button, buttonVariants } from "./button";
 import { Input, Textarea } from "./input";
 import { Select, SelectTrigger, SelectValue } from "./select";
@@ -21,16 +23,39 @@ describe("shared control presentation", () => {
     expect(controlMotion).toContain("motion-reduce:duration-0");
   });
 
-  it("keeps original defaults and aligns only explicit compact/touch sizes", () => {
-    const { rerender } = render(<><Input aria-label="Input" /><Textarea aria-label="Textarea" /><Button>Action</Button><Select><SelectTrigger aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-    expect(screen.getByLabelText("Input").className.split(" ")).toContain("h-11");
+  it("puts Button, Input, Textarea and SelectTrigger on one height and text scale", () => {
+    const classes = (name: string) => screen.getByLabelText(name).className.split(" ");
+    const { rerender } = render(<><Input aria-label="Input" /><Textarea aria-label="Textarea" /><Button aria-label="Action">Action</Button><Select><SelectTrigger aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
+    // The default is md for every control: one 36px height, one 14px text size, one corner.
+    for (const name of ["Input", "Action", "Select"]) {
+      expect(classes(name)).toContain(controlHeight.md);
+      expect(classes(name)).toContain(controlText.md);
+      expect(classes(name)).toContain("rounded-lg");
+    }
+    expect(classes("Textarea")).toContain(controlText.md);
     expect(screen.getByLabelText("Textarea").className).toContain("min-h-[120px]");
-    expect(screen.getByLabelText("Select").className.split(" ")).toContain("h-9");
-    expect(screen.getByText("Action").className).toContain("h-[var(--control-height)]");
+    for (const size of ["sm", "md", "lg"] as const) {
+      rerender(<><Input size={size} aria-label="Input" /><Textarea size={size} aria-label="Textarea" /><Button size={size} aria-label="Action">Action</Button><Select><SelectTrigger size={size} aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
+      for (const name of ["Input", "Action", "Select"]) {
+        expect(classes(name), `${name} ${size}`).toContain(controlHeight[size]);
+        expect(classes(name), `${name} ${size}`).toContain(controlText[size]);
+        expect(classes(name), `${name} ${size}`).toContain(size === "sm" ? "rounded-md" : "rounded-lg");
+        expect(screen.getByLabelText(name)).not.toHaveAttribute("size");
+      }
+      expect(classes("Textarea")).toContain(controlText[size]);
+    }
+    // Fields never drop below 16px on a coarse pointer (iOS zooms on focus otherwise).
+    for (const name of ["Input", "Textarea", "Select"]) expect(classes(name)).toContain("pointer-coarse:text-base");
+    expect(classes("Action")).not.toContain("pointer-coarse:text-base");
+  });
+
+  it("keeps the explicit compact and touch sizes", () => {
+    const { rerender } = render(<><Input size="compact" aria-label="Input" /><Button size="compact">Action</Button><Select><SelectTrigger size="compact" aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
     for (const size of ["compact", "touch"] as const) {
       rerender(<><Input size={size} aria-label="Input" /><Textarea size={size} aria-label="Textarea" /><Button size={size}>Action</Button><Select><SelectTrigger size={size} aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
       for (const name of ["Input", "Select"]) {
         expect(screen.getByLabelText(name).className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
+        expect(screen.getByLabelText(name).className.split(" ")).toContain("rounded-lg");
         expect(screen.getByLabelText(name)).not.toHaveAttribute("size");
       }
       expect(screen.getByText("Action").className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
@@ -38,6 +63,26 @@ describe("shared control presentation", () => {
     }
   });
 
+  it("gives icon buttons squares on the same heights", () => {
+    render(<><Button size="icon-sm" aria-label="Small" /><Button size="icon" aria-label="Medium" /><Button size="icon-lg" aria-label="Large" /></>);
+    expect(screen.getByLabelText("Small").className).toContain("size-[var(--control-height-sm,2rem)]");
+    expect(screen.getByLabelText("Medium").className).toContain("size-[var(--control-height,2.25rem)]");
+    expect(screen.getByLabelText("Large").className).toContain("size-[var(--control-height-lg,2.75rem)]");
+  });
+
+  it("renders labels and help text at one size each, and wires hint and error to the field", () => {
+    render(<><Label htmlFor="x">Name</Label><HelpText>Plain</HelpText><Input label="Email" hint="We never share it" error="Enter an address" /></>);
+    expect(screen.getByText("Name").className).toContain("text-[length:var(--font-size-label,0.875rem)]");
+    for (const text of ["Plain", "We never share it", "Enter an address"]) {
+      expect(screen.getByText(text).className).toContain("text-[length:var(--font-size-help,0.75rem)]");
+    }
+    expect(screen.getByText("Enter an address")).toHaveAttribute("data-tone", "error");
+    const field = screen.getByLabelText("Email");
+    const described = field.getAttribute("aria-describedby")!.split(" ");
+    expect(described).toContain(screen.getByText("We never share it").id);
+    expect(described).toContain(screen.getByText("Enter an address").id);
+  });
+
   it("preserves field and trigger refs, caller overrides, invalid/disabled and autofill attributes", () => {
     const input = React.createRef<HTMLInputElement>();
     const textarea = React.createRef<HTMLTextAreaElement>();

package/src/primitives/help-text.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+export interface HelpTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** `hint` describes a field; `error` reports what is wrong with its value. */
+  tone?: "hint" | "error";
+}
+
+/**
+ * Text under a field. One size (`--font-size-help`, 12px) for every field, so
+ * forms across products read the same. Point the field's `aria-describedby` at
+ * its `id`; Input and Textarea do this for their `hint` and `error` props.
+ */
+const HelpText = React.forwardRef<HTMLParagraphElement, HelpTextProps>(
+  ({ className, tone = "hint", ...props }, ref) => (
+    <p
+      ref={ref}
+      data-tone={tone}
+      className={cn(
+        "text-[length:var(--font-size-help,0.75rem)] leading-4",
+        tone === "error" ? "font-medium text-[var(--surface-danger-text)]" : "text-[var(--text-dim)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+HelpText.displayName = "HelpText";
+
+export { HelpText };

package/src/primitives/index.ts

@@ -65,6 +65,9 @@ export { Slider } from "./slider";
 export { Input, Textarea } from "./input";
 export type { InputProps, TextareaProps } from "./input";
 
+export { HelpText } from "./help-text";
+export type { HelpTextProps } from "./help-text";
+
 export { Badge, badgeVariants } from "./badge";
 export type { BadgeProps } from "./badge";
 

package/src/primitives/input.tsx

@@ -1,17 +1,21 @@
 "use client";
 
 import * as React from "react";
-import { controlSizes, fieldPresentation } from "../lib/control-presentation";
+import { controlRadius, controlSizes, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation";
 import { focusFieldInvalid } from "../lib/focus";
 import { cn } from "../lib/utils";
+import { HelpText } from "./help-text";
 import { Label } from "./label";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
+// Sizes follow the shared control scale (control-presentation.ts), so an Input
+// and a Button at the same size share a height, text size and corner.
 const inputVariants = cva(
   cn(
-    "flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+    "flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
     fieldPresentation,
+    fieldTouchText,
   ),
   {
     variants: {
@@ -22,10 +26,12 @@ const inputVariants = cva(
         error: focusFieldInvalid,
       },
       size: {
-        default: "h-11",
-        sm: "h-9 px-3",
-        lg: "h-12 px-5",
-        ...controlSizes,
+        default: fieldSizes.md,
+        md: fieldSizes.md,
+        sm: fieldSizes.sm,
+        lg: fieldSizes.lg,
+        compact: cn(fieldSizes.md, controlSizes.compact),
+        touch: cn(fieldSizes.md, controlSizes.touch),
       }
     },
     defaultVariants: {
@@ -79,8 +85,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <div className="w-full space-y-1.5">
         {label && <Label htmlFor={inputId} className="block">{label}</Label>}
         {input}
-        {error && <p id={errorId} className="text-[var(--surface-danger-text)] text-sm font-medium">{error}</p>}
-        {hint && <p id={hintId} className="text-[var(--text-dim)] text-sm">{hint}</p>}
+        {error && <HelpText id={errorId} tone="error">{error}</HelpText>}
+        {hint && <HelpText id={hintId}>{hint}</HelpText>}
       </div>
     );
   },
@@ -91,8 +97,8 @@ export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Both values render the same field. */
   variant?: "default" | "sandbox";
-  /** Opt in to density/typing presentation without changing the default 120px well. */
-  size?: "default" | "compact" | "touch";
+  /** Text, padding and corner from the control scale; the 120px well is unchanged. compact and touch remain. */
+  size?: "default" | "sm" | "md" | "lg" | "compact" | "touch";
   label?: string;
   error?: string;
   hint?: string;
@@ -116,10 +122,12 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         id={textareaId}
         className={cn(
-          "flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm",
+          "flex min-h-[120px] w-full resize-y border px-3 py-2",
           "placeholder:text-[var(--text-dim)]",
           "disabled:cursor-not-allowed disabled:opacity-50",
           fieldPresentation,
+          fieldTouchText,
+          size === "sm" ? cn(controlText.sm, controlRadius.sm, "px-2.5") : size === "lg" ? cn(controlText.lg, controlRadius.lg, "px-4 py-3") : cn(controlText.md, controlRadius.md),
           error && focusFieldInvalid,
           size === "compact" && "min-h-24 px-3 py-2",
           size === "touch" && "text-base",
@@ -138,8 +146,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div className="w-full space-y-1.5">
         {label && <Label htmlFor={textareaId} className="block">{label}</Label>}
         {textarea}
-        {error && <p id={errorId} className="text-[var(--surface-danger-text)] text-sm">{error}</p>}
-        {hint && <p id={hintId} className="text-[var(--text-dim)] text-sm">{hint}</p>}
+        {error && <HelpText id={errorId} tone="error">{error}</HelpText>}
+        {hint && <HelpText id={hintId}>{hint}</HelpText>}
       </div>
     );
   },

package/src/primitives/label.tsx

@@ -5,8 +5,9 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../lib/utils";
 
+// One label size (`--font-size-label`, 14px) for every field size.
 const labelVariants = cva(
-  "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "font-medium text-[length:var(--font-size-label,0.875rem)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<

package/src/primitives/select.tsx

@@ -3,7 +3,7 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
-import { controlSizes, fieldPresentation } from "../lib/control-presentation";
+import { controlSizes, fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation";
 import { cn } from "../lib/utils";
 
 const Select = SelectPrimitive.Root;
@@ -15,19 +15,20 @@ const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
-    /** Default remains 36px; compact follows density, touch is at least 44px. */
-    size?: "default" | "compact" | "touch";
+    /** The shared control scale: sm 32px, default/md 36px, lg 44px. compact follows density, touch is at least 44px. */
+    size?: "default" | "sm" | "md" | "lg" | "compact" | "touch";
   }
 >(({ className, children, size = "default", ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex w-full items-center justify-between whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       fieldPresentation,
+      fieldTouchText,
       "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left",
       // The designed open state: accent border and surface while the menu is up.
       "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
-      size !== "default" && controlSizes[size],
+      size === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size],
       className,
     )}
     {...props}