@tangle-network/ui 11.42.0 → 11.44.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.44.0
+
+### Minor Changes
+
+- e19c28a: Add read-only `value` and optional `mono` presentation to SettingsRow while preserving children, the public props interface, and control message wiring. Value rows use the inline layout and stack in narrow cards; rows without a value keep their existing layout.
+
+## 11.43.0
+
+### Minor Changes
+
+- aa8a429: Add `ComplianceBadge`, the single compliance claim every public surface renders. It defaults to `status="ready"` ("HIPAA-Ready", outlined); HIPAA's `status="compliant"` ("HIPAA Compliant", filled) is reserved for after the documented launch gate closes per compliance/policies/hipaa-security-program.md. `product="soc2"` consolidates the website's bespoke badge: SOC 2 Type II is an attained audit (compliance/evidence/2026-09-01-final-audit), so its `status="compliant"` copy "SOC 2 Type II" is legitimate to render today, with plain "SOC 2" as the ready form.
+
 ## 11.42.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -96,6 +96,7 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
 import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/wizard.js";
@@ -142,4 +143,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, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, 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, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, 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

@@ -52,6 +52,7 @@ import { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
 import { StatusPill } from "./primitives/status-pill.js";
+import { ComplianceBadge } from "./primitives/compliance-badge.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
 import { Chip } from "./primitives/chip.js";
@@ -126,4 +127,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, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, 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, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, 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/primitives/compliance-badge.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+//#region src/primitives/compliance-badge.d.ts
+/**
+ * The one compliance badge every public surface uses, so the claim a page
+ * makes is chosen here and nowhere else.
+ *
+ * Copy discipline is the point of the component. There is NO official HIPAA
+ * certification a product can hold, so the badge never says "certified", and
+ * it renders "HIPAA Compliant" ONLY when a caller passes `status="compliant"`
+ * explicitly. The default — and the only HIPAA state surfaces may ship
+ * today — is `status="ready"`, which renders "HIPAA-Ready".
+ *
+ * For HIPAA, `status="compliant"` is reserved for use AFTER the company's
+ * documented launch gate closes: business associate agreements executed AND
+ * the infrastructure blockers resolved, per
+ * compliance/policies/hipaa-security-program.md. Do not pass it before that
+ * gate is confirmed closed in the policy record, whatever a page design
+ * suggests.
+ *
+ * That gate is HIPAA's. SOC 2 Type II is an ATTAINED audit, not a pending
+ * one — the final report is on file at
+ * compliance/evidence/2026-09-01-final-audit — so for `product="soc2"` the
+ * filled `status="compliant"` form, "SOC 2 Type II", is legitimate to render
+ * today.
+ *
+ * The claim is told three ways, matching StatusPill's doctrine: the LABEL
+ * text itself ("HIPAA-Ready" vs "HIPAA Compliant"), the FILL (outlined vs
+ * filled), and the TONE (the info triple while the gate is open, the success
+ * triple once it closes). Each status paints from one matched `--surface-*`
+ * token triple, so the text colour is solved against a known plane; the
+ * outlined "ready" form keeps the triple's text and border, which clear the
+ * 4.5:1 body floor on the page canvas, on a transparent fill.
+ *
+ * The Tangle mark is decorative: the label already carries the whole claim,
+ * so the mark is hidden from the accessibility tree and the badge's own
+ * `aria-label` states the claim.
+ */
+export type ComplianceStatus = "ready" | "compliant";
+/**
+ * The record is keyed by product so each framework's claim is reviewed copy
+ * in one place, not string interpolation at call sites. ISO 27001 slots in
+ * the same way when its audit lands.
+ */
+export type ComplianceProduct = "hipaa" | "soc2";
+export interface ComplianceBadgeProps {
+  /**
+   * Defaults to "ready". For HIPAA, pass "compliant" only after the launch
+   * gate closes; for SOC 2 the Type II audit is already attained, so
+   * "compliant" is legitimate today.
+   */
+  status?: ComplianceStatus;
+  product?: ComplianceProduct;
+  size?: "sm" | "md";
+  /** Renders the badge as a link, e.g. to the trust or compliance page. */
+  href?: string;
+  className?: string;
+  id?: string;
+  title?: string;
+}
+declare function ComplianceBadge({ status, product, size, href, className, ...props }: ComplianceBadgeProps): React.JSX.Element;
+//#endregion
+export { ComplianceBadge };

package/dist/primitives/compliance-badge.js

@@ -0,0 +1,58 @@
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TangleKnot } from "@tangle-network/brand";
+//#region src/primitives/compliance-badge.tsx
+const PRODUCT_COPY = {
+	hipaa: {
+		ready: "HIPAA-Ready",
+		compliant: "HIPAA Compliant"
+	},
+	soc2: {
+		ready: "SOC 2",
+		compliant: "SOC 2 Type II"
+	}
+};
+/**
+* Outlined while a claim is still being earned (info: still moving), filled
+* once it is attained (success: settled). Both draw from ONE matched token
+* triple — no hardcoded colours — so themes repaint the badge like any other
+* surface.
+*/
+const STATUS_SURFACE = {
+	ready: "border-[var(--surface-info-border)] bg-transparent text-[var(--surface-info-text)]",
+	compliant: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]"
+};
+const SIZE_CLASSES = {
+	sm: "px-2 py-0.5 text-xs",
+	md: "px-2.5 py-1 text-sm"
+};
+const MARK_SIZE = {
+	sm: 12,
+	md: 14
+};
+function ComplianceBadge({ status = "ready", product = "hipaa", size = "sm", href, className, ...props }) {
+	const label = PRODUCT_COPY[product][status];
+	const classes = cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border font-medium", SIZE_CLASSES[size], STATUS_SURFACE[status], href && focusRing, className);
+	const mark = /* @__PURE__ */ jsx("span", {
+		className: "inline-flex shrink-0",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(TangleKnot, { size: MARK_SIZE[size] })
+	});
+	if (href) return /* @__PURE__ */ jsxs("a", {
+		href,
+		"aria-label": label,
+		className: classes,
+		...props,
+		children: [mark, label]
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-label": label,
+		className: classes,
+		...props,
+		children: [mark, label]
+	});
+}
+//#endregion
+export { ComplianceBadge };

package/dist/primitives/settings.d.ts

@@ -24,21 +24,25 @@ export interface SettingsRowProps {
   onRetry?: () => void;
   /**
    * `inline` (default): text left, control right, stacked below 34rem.
-   * `compact`: the control keeps its own width and stays on the line (switches, single buttons).
+   * `compact`: the control keeps its own width and stays on the line (switches, single buttons); a row with a value uses `inline`.
    * `stacked`: the control spans the row under the text (textareas, lists).
    */
   layout?: SettingsRowLayout;
   /** Why the control is unavailable, naming who can change it. Replaces the description after a lock glyph. */
   disabledReason?: React.ReactNode;
+  /** A read-only value before any children; supplying even an empty value keeps its span. */
+  value?: React.ReactNode;
+  /** Use mono for the value, such as an identifier; children keep their own font. */
+  mono?: boolean;
   children?: React.ReactNode;
 }
 /**
- * One setting: its label, an optional consequence line and its control. The
+ * One setting: its label, an optional consequence line, read-only value and control. The
  * label carries the save status after it; an error or a lock reason replaces
  * the description. Rows inside a {@link SettingsSection} are divided by a
  * hairline and stack when the card is narrower than 34rem.
  */
-export declare function SettingsRow({ id, label, description, info, htmlFor, status, error, onRetry, layout, disabledReason, children }: SettingsRowProps): React.JSX.Element;
+export declare function SettingsRow(props: SettingsRowProps): React.JSX.Element;
 export interface SettingsSectionProps {
   /** The section's anchor: `#id` scrolls to it. The title's id is `${id}-title`. */
   id: string;

package/dist/primitives/settings.js

@@ -60,18 +60,20 @@ function describeControl(children, htmlFor, messageId, invalid) {
 	});
 }
 /**
-* One setting: its label, an optional consequence line and its control. The
+* One setting: its label, an optional consequence line, read-only value and control. The
 * label carries the save status after it; an error or a lock reason replaces
 * the description. Rows inside a {@link SettingsSection} are divided by a
 * hairline and stack when the card is narrower than 34rem.
 */
-function SettingsRow({ id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, children }) {
+function SettingsRow(props) {
+	const { id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, value, mono, children } = props;
+	const hasValue = Object.hasOwn(props, "value");
 	const messageId = htmlFor ? fieldMessageId(htmlFor) : void 0;
 	const control = describeControl(children, htmlFor, error != null || disabledReason != null || description != null ? messageId : void 0, error != null);
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		"data-layout": layout,
-		className: cn("grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4", SCROLL_OFFSET, DIVIDED, ROW_COLUMNS[layout]),
+		className: cn("grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4", SCROLL_OFFSET, DIVIDED, ROW_COLUMNS[hasValue && layout === "compact" ? "inline" : layout]),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -114,9 +116,13 @@ function SettingsRow({ id, label, description, info, htmlFor, status, error, onR
 				className: "mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
 				children: description
 			})]
-		}), control != null && control !== false && /* @__PURE__ */ jsx("div", {
-			className: cn("flex min-w-0 items-center gap-2", ROW_CONTROL[layout]),
-			children: control
+		}), (hasValue || control != null && control !== false) && /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 items-center gap-2", ROW_CONTROL[hasValue && layout === "compact" ? "inline" : layout]),
+			children: [hasValue && /* @__PURE__ */ jsx("span", {
+				"data-slot": "settings-value",
+				className: cn("min-w-0 text-foreground text-sm [overflow-wrap:anywhere] @min-[34rem]/settings-section:text-right", mono && "font-mono"),
+				children: value
+			}), control]
 		})]
 	});
 }

package/dist/primitives.d.ts

@@ -50,6 +50,7 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
 import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/wizard.js";
@@ -61,4 +62,4 @@ import { SeriesSparkline, SeriesSparklineProps } from "./primitives/series-spark
 import { ChartReferenceLine, MetricChart, MetricChartProps } from "./primitives/metric-chart.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, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, 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, DatePicker, type DatePickerProps, 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, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, 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, 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, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, 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, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, 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, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, 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, 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, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -48,6 +48,7 @@ import { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
 import { StatusPill } from "./primitives/status-pill.js";
+import { ComplianceBadge } from "./primitives/compliance-badge.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
 import { Chip } from "./primitives/chip.js";
@@ -61,4 +62,4 @@ import { SeriesSparkline } from "./primitives/series-sparkline.js";
 import { MetricChart } from "./primitives/metric-chart.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, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, Calendar, 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, DatePicker, 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, Field, FilterField, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, Input, Label, Logo, Metric, MetricChart, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FilterField, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, Input, Label, Logo, Metric, MetricChart, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.42.0",
+  "version": "11.44.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -166,7 +166,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.26.2",
+    "@tangle-network/brand": "^1.27.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/primitives/compliance-badge.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ComplianceBadge } from './compliance-badge'
+
+const meta: Meta<typeof ComplianceBadge> = {
+  title: 'Primitives/ComplianceBadge',
+  component: ComplianceBadge,
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+type Story = StoryObj<typeof ComplianceBadge>
+
+/**
+ * The default and the only HIPAA state surfaces may ship before the
+ * documented launch gate closes. Renders "HIPAA-Ready", outlined, on the
+ * info triple.
+ */
+export const Ready: Story = { args: { status: 'ready' } }
+
+/**
+ * Reserved for after HIPAA's launch gate closes (BAAs executed +
+ * infrastructure blockers resolved, per
+ * compliance/policies/hipaa-security-program.md). Renders "HIPAA Compliant",
+ * filled, on the success triple.
+ */
+export const Compliant: Story = { args: { status: 'compliant' } }
+
+export const ReadyMedium: Story = { args: { status: 'ready', size: 'md' } }
+export const CompliantMedium: Story = { args: { status: 'compliant', size: 'md' } }
+
+/**
+ * SOC 2 before an attestation: plain "SOC 2", outlined.
+ */
+export const Soc2Ready: Story = { args: { product: 'soc2', status: 'ready' } }
+
+/**
+ * SOC 2 Type II is an ATTAINED audit (final report on file at
+ * compliance/evidence/2026-09-01-final-audit), so unlike HIPAA's "compliant"
+ * this filled form is legitimate to ship today. Renders "SOC 2 Type II".
+ */
+export const Soc2TypeII: Story = { args: { product: 'soc2', status: 'compliant' } }
+
+export const Soc2TypeIIMedium: Story = {
+  args: { product: 'soc2', status: 'compliant', size: 'md' },
+}
+
+export const Linked: Story = {
+  args: { status: 'ready', href: '/trust' },
+}
+
+export const AllStates: Story = {
+  name: 'All States',
+  render: () => (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">HIPAA</div>
+      <div className="flex flex-wrap items-center gap-2">
+        <ComplianceBadge status="ready" />
+        <ComplianceBadge status="compliant" />
+        <ComplianceBadge status="ready" size="md" />
+        <ComplianceBadge status="compliant" size="md" />
+      </div>
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">SOC 2</div>
+      <div className="flex flex-wrap items-center gap-2">
+        <ComplianceBadge product="soc2" status="ready" />
+        <ComplianceBadge product="soc2" status="compliant" />
+        <ComplianceBadge product="soc2" status="ready" size="md" />
+        <ComplianceBadge product="soc2" status="compliant" size="md" />
+      </div>
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Linked</div>
+      <div className="flex flex-wrap items-center gap-2">
+        <ComplianceBadge status="ready" href="/trust" />
+        <ComplianceBadge product="soc2" status="compliant" href="/trust" />
+      </div>
+    </div>
+  ),
+}

package/src/primitives/compliance-badge.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ComplianceBadge } from "./compliance-badge";
+
+describe("ComplianceBadge", () => {
+  // The copy rule the component exists to enforce: there is no official HIPAA
+  // certification and the launch gate has not closed, so the unqualified claim
+  // must never render unless a caller asks for it explicitly.
+  it("defaults to HIPAA-Ready", () => {
+    render(<ComplianceBadge />);
+    expect(screen.getByLabelText("HIPAA-Ready")).toBeInTheDocument();
+    expect(screen.queryByText("HIPAA Compliant")).not.toBeInTheDocument();
+  });
+
+  it("renders HIPAA Compliant only with an explicit compliant status", () => {
+    render(<ComplianceBadge status="compliant" />);
+    expect(screen.getByLabelText("HIPAA Compliant")).toBeInTheDocument();
+  });
+
+  it("keeps the HIPAA copy exact when a product is given", () => {
+    render(<ComplianceBadge product="hipaa" status="ready" />);
+    expect(screen.getByLabelText("HIPAA-Ready")).toBeInTheDocument();
+  });
+
+  // SOC 2 Type II is an attained audit (compliance/evidence/2026-09-01-final-audit),
+  // so unlike HIPAA the filled claim is legitimate to render today — but still
+  // only under an explicit status, with plain "SOC 2" as the default.
+  it("defaults soc2 to plain SOC 2", () => {
+    render(<ComplianceBadge product="soc2" />);
+    expect(screen.getByLabelText("SOC 2")).toBeInTheDocument();
+    expect(screen.queryByText("SOC 2 Type II")).not.toBeInTheDocument();
+  });
+
+  it("renders SOC 2 Type II with an explicit compliant status", () => {
+    render(<ComplianceBadge product="soc2" status="compliant" />);
+    expect(screen.getByLabelText("SOC 2 Type II")).toBeInTheDocument();
+  });
+
+  it("fills the attained SOC 2 claim like any compliant status", () => {
+    const { container } = render(
+      <ComplianceBadge product="soc2" status="compliant" />,
+    );
+    const badge = container.firstElementChild as HTMLElement;
+    expect(badge.className).toContain("bg-[var(--surface-success-bg)]");
+  });
+
+  it("never says certified", () => {
+    const { container } = render(<ComplianceBadge status="compliant" />);
+    expect(container.textContent).not.toMatch(/certif/i);
+  });
+
+  it("outlines ready and fills compliant, each from one surface token triple", () => {
+    const { container: ready } = render(<ComplianceBadge status="ready" />);
+    const readyBadge = ready.firstElementChild as HTMLElement;
+    expect(readyBadge.className).toContain("bg-transparent");
+    expect(readyBadge.className).toContain("border-[var(--surface-info-border)]");
+    expect(readyBadge.className).toContain("text-[var(--surface-info-text)]");
+
+    const { container: compliant } = render(
+      <ComplianceBadge status="compliant" />,
+    );
+    const compliantBadge = compliant.firstElementChild as HTMLElement;
+    expect(compliantBadge.className).toContain(
+      "bg-[var(--surface-success-bg)]",
+    );
+    expect(compliantBadge.className).toContain(
+      "text-[var(--surface-success-text)]",
+    );
+  });
+
+  it("paints no hardcoded colours", () => {
+    const { container } = render(<ComplianceBadge status="compliant" />);
+    const badge = container.firstElementChild as HTMLElement;
+    expect(badge.className).not.toMatch(
+      /(?:bg|text|border)-(?:green|blue|red|amber|emerald)-/,
+    );
+  });
+
+  // The mark is decorative; the label carries the whole claim, so announcing
+  // both would say the same thing twice.
+  it("hides the brand mark from the accessibility tree", () => {
+    const { container } = render(<ComplianceBadge />);
+    const mark = container.querySelector("svg");
+    expect(mark).not.toBeNull();
+    expect(mark?.closest('[aria-hidden="true"]')).not.toBeNull();
+  });
+
+  it("renders as a link when href is given", () => {
+    render(<ComplianceBadge href="/trust" />);
+    const link = screen.getByRole("link", { name: "HIPAA-Ready" });
+    expect(link).toHaveAttribute("href", "/trust");
+  });
+
+  it("renders as a span without href", () => {
+    const { container } = render(<ComplianceBadge />);
+    expect(container.firstElementChild?.tagName).toBe("SPAN");
+  });
+
+  it.each(["sm", "md"] as const)("takes the %s size", (size) => {
+    const { container } = render(<ComplianceBadge size={size} />);
+    const badge = container.firstElementChild as HTMLElement;
+    expect(badge.className).toContain(size === "sm" ? "text-xs" : "text-sm");
+  });
+});

package/src/primitives/compliance-badge.tsx

@@ -0,0 +1,139 @@
+import * as React from "react";
+import { TangleKnot } from "@tangle-network/brand";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/**
+ * The one compliance badge every public surface uses, so the claim a page
+ * makes is chosen here and nowhere else.
+ *
+ * Copy discipline is the point of the component. There is NO official HIPAA
+ * certification a product can hold, so the badge never says "certified", and
+ * it renders "HIPAA Compliant" ONLY when a caller passes `status="compliant"`
+ * explicitly. The default — and the only HIPAA state surfaces may ship
+ * today — is `status="ready"`, which renders "HIPAA-Ready".
+ *
+ * For HIPAA, `status="compliant"` is reserved for use AFTER the company's
+ * documented launch gate closes: business associate agreements executed AND
+ * the infrastructure blockers resolved, per
+ * compliance/policies/hipaa-security-program.md. Do not pass it before that
+ * gate is confirmed closed in the policy record, whatever a page design
+ * suggests.
+ *
+ * That gate is HIPAA's. SOC 2 Type II is an ATTAINED audit, not a pending
+ * one — the final report is on file at
+ * compliance/evidence/2026-09-01-final-audit — so for `product="soc2"` the
+ * filled `status="compliant"` form, "SOC 2 Type II", is legitimate to render
+ * today.
+ *
+ * The claim is told three ways, matching StatusPill's doctrine: the LABEL
+ * text itself ("HIPAA-Ready" vs "HIPAA Compliant"), the FILL (outlined vs
+ * filled), and the TONE (the info triple while the gate is open, the success
+ * triple once it closes). Each status paints from one matched `--surface-*`
+ * token triple, so the text colour is solved against a known plane; the
+ * outlined "ready" form keeps the triple's text and border, which clear the
+ * 4.5:1 body floor on the page canvas, on a transparent fill.
+ *
+ * The Tangle mark is decorative: the label already carries the whole claim,
+ * so the mark is hidden from the accessibility tree and the badge's own
+ * `aria-label` states the claim.
+ */
+export type ComplianceStatus = "ready" | "compliant";
+
+/**
+ * The record is keyed by product so each framework's claim is reviewed copy
+ * in one place, not string interpolation at call sites. ISO 27001 slots in
+ * the same way when its audit lands.
+ */
+export type ComplianceProduct = "hipaa" | "soc2";
+
+export interface ComplianceBadgeProps {
+  /**
+   * Defaults to "ready". For HIPAA, pass "compliant" only after the launch
+   * gate closes; for SOC 2 the Type II audit is already attained, so
+   * "compliant" is legitimate today.
+   */
+  status?: ComplianceStatus;
+  product?: ComplianceProduct;
+  size?: "sm" | "md";
+  /** Renders the badge as a link, e.g. to the trust or compliance page. */
+  href?: string;
+  className?: string;
+  id?: string;
+  title?: string;
+}
+
+const PRODUCT_COPY: Record<
+  ComplianceProduct,
+  Record<ComplianceStatus, string>
+> = {
+  hipaa: {
+    ready: "HIPAA-Ready",
+    compliant: "HIPAA Compliant",
+  },
+  soc2: {
+    ready: "SOC 2",
+    compliant: "SOC 2 Type II",
+  },
+};
+
+/**
+ * Outlined while a claim is still being earned (info: still moving), filled
+ * once it is attained (success: settled). Both draw from ONE matched token
+ * triple — no hardcoded colours — so themes repaint the badge like any other
+ * surface.
+ */
+const STATUS_SURFACE: Record<ComplianceStatus, string> = {
+  ready:
+    "border-[var(--surface-info-border)] bg-transparent text-[var(--surface-info-text)]",
+  compliant:
+    "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+};
+
+const SIZE_CLASSES = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-sm",
+} as const;
+
+const MARK_SIZE = { sm: 12, md: 14 } as const;
+
+function ComplianceBadge({
+  status = "ready",
+  product = "hipaa",
+  size = "sm",
+  href,
+  className,
+  ...props
+}: ComplianceBadgeProps) {
+  const label = PRODUCT_COPY[product][status];
+  const classes = cn(
+    "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border font-medium",
+    SIZE_CLASSES[size],
+    STATUS_SURFACE[status],
+    href && focusRing,
+    className,
+  );
+  const mark = (
+    <span className="inline-flex shrink-0" aria-hidden="true">
+      <TangleKnot size={MARK_SIZE[size]} />
+    </span>
+  );
+
+  if (href) {
+    return (
+      <a href={href} aria-label={label} className={classes} {...props}>
+        {mark}
+        {label}
+      </a>
+    );
+  }
+
+  return (
+    <span aria-label={label} className={classes} {...props}>
+      {mark}
+      {label}
+    </span>
+  );
+}
+
+export { ComplianceBadge };

package/src/primitives/index.ts

@@ -227,6 +227,13 @@ export type { PaginationProps } from "./pagination";
 export { StatusPill } from "./status-pill";
 export type { StatusPillProps, StatusTone } from "./status-pill";
 
+export { ComplianceBadge } from "./compliance-badge";
+export type {
+  ComplianceBadgeProps,
+  ComplianceProduct,
+  ComplianceStatus,
+} from "./compliance-badge";
+
 export { Tag } from "./tag";
 export type { TagProps } from "./tag";
 

package/src/primitives/settings.stories.tsx

@@ -243,6 +243,40 @@ function FieldsExample() {
   );
 }
 
+/** Read-only product data beside existing controls; all values here are sample data. */
+function SettingsValuesExample() {
+  const [details, setDetails] = useState(false);
+  return (
+    <div className="mx-auto max-w-4xl space-y-6 p-6">
+      <SettingsSection id="read-only-values" title="Account values">
+        <SettingsRow id="value-zero" label="Active sessions" value={0} layout="compact" />
+        <SettingsRow id="value-empty" label="Empty value" value="" layout="compact" />
+        <SettingsRow id="value-false" label="False value" value={false} layout="compact" />
+        <SettingsRow id="value-null" label="Null value" value={null} layout="compact" />
+        <SettingsRow id="value-undefined" label="Undefined value" value={undefined} layout="compact" />
+        <SettingsRow id="value-mixed" label="Projected monthly cost" value={<>$0.00 <span className="text-muted-foreground">/month</span></>} layout="compact" />
+        <SettingsRow id="value-long" label="Session identifier" value="session_with_a_long_unbroken_identifier_that_must_wrap_inside_its_settings_card_without_hiding_the_label_or_overflowing" mono layout="compact" />
+        <SettingsRow id="value-agent" label="Agent identifier" value="research-agent" mono layout="compact" />
+        <SettingsRow id="value-model" label="Model identifier" value="workspace-model" mono layout="compact" />
+        <SettingsRow id="value-provider" label="Provider identifier" value="workspace-provider" mono layout="compact" />
+        <SettingsRow id="value-stacked" label="Stacked summary" value="Workspace summary" layout="stacked" />
+        <SettingsRow id="value-action" label="Value with action" value="workspace-provider" status={details ? "Details shown" : undefined} layout="compact">
+          <Button type="button" variant="outline" onClick={() => setDetails((shown) => !shown)}>{details ? "Hide details" : "Show details"}</Button>
+        </SettingsRow>
+        <SettingsRow id="value-control" label="Value with input" value="UTC" htmlFor="value-timezone" description="The original input keeps its message wiring.">
+          <Input id="value-timezone" defaultValue="UTC" />
+        </SettingsRow>
+      </SettingsSection>
+      <div className="max-w-sm">
+        <SettingsSection id="narrow-values" title="Narrow card in any window">
+          <SettingsRow id="narrow-value" label="Account email" value="reader@workspace.example" layout="compact" />
+          <SettingsRow id="legacy-compact" label="Daily digest" htmlFor="value-digest" layout="compact"><Switch id="value-digest" defaultChecked /></SettingsRow>
+        </SettingsSection>
+      </div>
+    </div>
+  );
+}
+
 const meta = {
   title: "Primitives/Settings",
   component: SettingsSection,
@@ -265,3 +299,6 @@ export const Bounded: Story = { render: () => <SettingsPage className="mx-auto m
 
 /** The promoted Field: hint, info tip with an aside action, a live error, and a status. */
 export const Fields: Story = { render: () => <FieldsExample /> };
+
+/** Values preserve ReactNode content and coexist with controls; only value rows stack in a narrow compact layout. */
+export const Values: Story = { render: () => <SettingsValuesExample /> };

package/src/primitives/settings.tsx

@@ -67,12 +67,16 @@ export interface SettingsRowProps {
   onRetry?: () => void;
   /**
    * `inline` (default): text left, control right, stacked below 34rem.
-   * `compact`: the control keeps its own width and stays on the line (switches, single buttons).
+   * `compact`: the control keeps its own width and stays on the line (switches, single buttons); a row with a value uses `inline`.
    * `stacked`: the control spans the row under the text (textareas, lists).
    */
   layout?: SettingsRowLayout;
   /** Why the control is unavailable, naming who can change it. Replaces the description after a lock glyph. */
   disabledReason?: React.ReactNode;
+  /** A read-only value before any children; supplying even an empty value keeps its span. */
+  value?: React.ReactNode;
+  /** Use mono for the value, such as an identifier; children keep their own font. */
+  mono?: boolean;
   children?: React.ReactNode;
 }
 
@@ -101,14 +105,16 @@ function describeControl(children: React.ReactNode, htmlFor: string | undefined,
 }
 
 /**
- * One setting: its label, an optional consequence line and its control. The
+ * One setting: its label, an optional consequence line, read-only value and control. The
  * label carries the save status after it; an error or a lock reason replaces
  * the description. Rows inside a {@link SettingsSection} are divided by a
  * hairline and stack when the card is narrower than 34rem.
  */
-export function SettingsRow({
-  id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, children,
-}: SettingsRowProps) {
+export function SettingsRow(props: SettingsRowProps) {
+  const {
+    id, label, description, info, htmlFor, status, error, onRetry, layout = "inline", disabledReason, value, mono, children,
+  } = props;
+  const hasValue = Object.hasOwn(props, "value");
   const messageId = htmlFor ? fieldMessageId(htmlFor) : undefined;
   const hasMessage = error != null || disabledReason != null || description != null;
   const control = describeControl(children, htmlFor, hasMessage ? messageId : undefined, error != null);
@@ -120,7 +126,7 @@ export function SettingsRow({
         "grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4",
         SCROLL_OFFSET,
         DIVIDED,
-        ROW_COLUMNS[layout],
+        ROW_COLUMNS[hasValue && layout === "compact" ? "inline" : layout],
       )}
     >
       <div className="min-w-0">
@@ -142,8 +148,11 @@ export function SettingsRow({
               <div id={messageId} className="mt-0.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]">{description}</div>
             )}
       </div>
-      {control != null && control !== false && (
-        <div className={cn("flex min-w-0 items-center gap-2", ROW_CONTROL[layout])}>{control}</div>
+      {(hasValue || (control != null && control !== false)) && (
+        <div className={cn("flex min-w-0 items-center gap-2", ROW_CONTROL[hasValue && layout === "compact" ? "inline" : layout])}>
+          {hasValue && <span data-slot="settings-value" className={cn("min-w-0 text-foreground text-sm [overflow-wrap:anywhere] @min-[34rem]/settings-section:text-right", mono && "font-mono")}>{value}</span>}
+          {control}
+        </div>
       )}
     </div>
   );