@tangle-network/ui 11.42.0 → 11.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tangle-network/ui
2
2
 
3
+ ## 11.43.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 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.
8
+
3
9
  ## 11.42.0
4
10
 
5
11
  ### Minor Changes
package/dist/index.d.ts CHANGED
@@ -96,6 +96,7 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
96
96
  import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
97
97
  import { Pagination, PaginationProps } from "./primitives/pagination.js";
98
98
  import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
99
+ import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
99
100
  import { Tag, TagProps } from "./primitives/tag.js";
100
101
  import { Chip, ChipProps } from "./primitives/chip.js";
101
102
  import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/wizard.js";
@@ -142,4 +143,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
142
143
  import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
143
144
  import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
144
145
  import "./redaction.js";
145
- 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 };
146
+ 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 CHANGED
@@ -52,6 +52,7 @@ import { PageHeader } from "./primitives/page-header.js";
52
52
  import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
53
53
  import { Pagination } from "./primitives/pagination.js";
54
54
  import { StatusPill } from "./primitives/status-pill.js";
55
+ import { ComplianceBadge } from "./primitives/compliance-badge.js";
55
56
  import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
56
57
  import { Tag } from "./primitives/tag.js";
57
58
  import { Chip } from "./primitives/chip.js";
@@ -126,4 +127,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
126
127
  import { copyText } from "./utils/copy-text.js";
127
128
  import { timeAgo } from "./utils/time-ago.js";
128
129
  import { RedactedDocument } from "./redaction/redacted-document.js";
129
- 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 };
130
+ 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 };
@@ -0,0 +1,62 @@
1
+ import * as React from "react";
2
+ //#region src/primitives/compliance-badge.d.ts
3
+ /**
4
+ * The one compliance badge every public surface uses, so the claim a page
5
+ * makes is chosen here and nowhere else.
6
+ *
7
+ * Copy discipline is the point of the component. There is NO official HIPAA
8
+ * certification a product can hold, so the badge never says "certified", and
9
+ * it renders "HIPAA Compliant" ONLY when a caller passes `status="compliant"`
10
+ * explicitly. The default — and the only HIPAA state surfaces may ship
11
+ * today — is `status="ready"`, which renders "HIPAA-Ready".
12
+ *
13
+ * For HIPAA, `status="compliant"` is reserved for use AFTER the company's
14
+ * documented launch gate closes: business associate agreements executed AND
15
+ * the infrastructure blockers resolved, per
16
+ * compliance/policies/hipaa-security-program.md. Do not pass it before that
17
+ * gate is confirmed closed in the policy record, whatever a page design
18
+ * suggests.
19
+ *
20
+ * That gate is HIPAA's. SOC 2 Type II is an ATTAINED audit, not a pending
21
+ * one — the final report is on file at
22
+ * compliance/evidence/2026-09-01-final-audit — so for `product="soc2"` the
23
+ * filled `status="compliant"` form, "SOC 2 Type II", is legitimate to render
24
+ * today.
25
+ *
26
+ * The claim is told three ways, matching StatusPill's doctrine: the LABEL
27
+ * text itself ("HIPAA-Ready" vs "HIPAA Compliant"), the FILL (outlined vs
28
+ * filled), and the TONE (the info triple while the gate is open, the success
29
+ * triple once it closes). Each status paints from one matched `--surface-*`
30
+ * token triple, so the text colour is solved against a known plane; the
31
+ * outlined "ready" form keeps the triple's text and border, which clear the
32
+ * 4.5:1 body floor on the page canvas, on a transparent fill.
33
+ *
34
+ * The Tangle mark is decorative: the label already carries the whole claim,
35
+ * so the mark is hidden from the accessibility tree and the badge's own
36
+ * `aria-label` states the claim.
37
+ */
38
+ export type ComplianceStatus = "ready" | "compliant";
39
+ /**
40
+ * The record is keyed by product so each framework's claim is reviewed copy
41
+ * in one place, not string interpolation at call sites. ISO 27001 slots in
42
+ * the same way when its audit lands.
43
+ */
44
+ export type ComplianceProduct = "hipaa" | "soc2";
45
+ export interface ComplianceBadgeProps {
46
+ /**
47
+ * Defaults to "ready". For HIPAA, pass "compliant" only after the launch
48
+ * gate closes; for SOC 2 the Type II audit is already attained, so
49
+ * "compliant" is legitimate today.
50
+ */
51
+ status?: ComplianceStatus;
52
+ product?: ComplianceProduct;
53
+ size?: "sm" | "md";
54
+ /** Renders the badge as a link, e.g. to the trust or compliance page. */
55
+ href?: string;
56
+ className?: string;
57
+ id?: string;
58
+ title?: string;
59
+ }
60
+ declare function ComplianceBadge({ status, product, size, href, className, ...props }: ComplianceBadgeProps): React.JSX.Element;
61
+ //#endregion
62
+ export { ComplianceBadge };
@@ -0,0 +1,58 @@
1
+ import { focusRing } from "../lib/focus.js";
2
+ import { cn } from "../lib/utils.js";
3
+ import "react";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { TangleKnot } from "@tangle-network/brand";
6
+ //#region src/primitives/compliance-badge.tsx
7
+ const PRODUCT_COPY = {
8
+ hipaa: {
9
+ ready: "HIPAA-Ready",
10
+ compliant: "HIPAA Compliant"
11
+ },
12
+ soc2: {
13
+ ready: "SOC 2",
14
+ compliant: "SOC 2 Type II"
15
+ }
16
+ };
17
+ /**
18
+ * Outlined while a claim is still being earned (info: still moving), filled
19
+ * once it is attained (success: settled). Both draw from ONE matched token
20
+ * triple — no hardcoded colours — so themes repaint the badge like any other
21
+ * surface.
22
+ */
23
+ const STATUS_SURFACE = {
24
+ ready: "border-[var(--surface-info-border)] bg-transparent text-[var(--surface-info-text)]",
25
+ compliant: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]"
26
+ };
27
+ const SIZE_CLASSES = {
28
+ sm: "px-2 py-0.5 text-xs",
29
+ md: "px-2.5 py-1 text-sm"
30
+ };
31
+ const MARK_SIZE = {
32
+ sm: 12,
33
+ md: 14
34
+ };
35
+ function ComplianceBadge({ status = "ready", product = "hipaa", size = "sm", href, className, ...props }) {
36
+ const label = PRODUCT_COPY[product][status];
37
+ 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);
38
+ const mark = /* @__PURE__ */ jsx("span", {
39
+ className: "inline-flex shrink-0",
40
+ "aria-hidden": "true",
41
+ children: /* @__PURE__ */ jsx(TangleKnot, { size: MARK_SIZE[size] })
42
+ });
43
+ if (href) return /* @__PURE__ */ jsxs("a", {
44
+ href,
45
+ "aria-label": label,
46
+ className: classes,
47
+ ...props,
48
+ children: [mark, label]
49
+ });
50
+ return /* @__PURE__ */ jsxs("span", {
51
+ "aria-label": label,
52
+ className: classes,
53
+ ...props,
54
+ children: [mark, label]
55
+ });
56
+ }
57
+ //#endregion
58
+ export { ComplianceBadge };
@@ -50,6 +50,7 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
50
50
  import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
51
51
  import { Pagination, PaginationProps } from "./primitives/pagination.js";
52
52
  import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
53
+ import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
53
54
  import { Tag, TagProps } from "./primitives/tag.js";
54
55
  import { Chip, ChipProps } from "./primitives/chip.js";
55
56
  import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/wizard.js";
@@ -61,4 +62,4 @@ import { SeriesSparkline, SeriesSparklineProps } from "./primitives/series-spark
61
62
  import { ChartReferenceLine, MetricChart, MetricChartProps } from "./primitives/metric-chart.js";
62
63
  import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
63
64
  import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
64
- 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 };
65
+ 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 };
@@ -48,6 +48,7 @@ import { PageHeader } from "./primitives/page-header.js";
48
48
  import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
49
49
  import { Pagination } from "./primitives/pagination.js";
50
50
  import { StatusPill } from "./primitives/status-pill.js";
51
+ import { ComplianceBadge } from "./primitives/compliance-badge.js";
51
52
  import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
52
53
  import { Tag } from "./primitives/tag.js";
53
54
  import { Chip } from "./primitives/chip.js";
@@ -61,4 +62,4 @@ import { SeriesSparkline } from "./primitives/series-sparkline.js";
61
62
  import { MetricChart } from "./primitives/metric-chart.js";
62
63
  import { FilterField, Toolbar } from "./primitives/toolbar.js";
63
64
  import { Logo, TangleKnot } from "@tangle-network/brand";
64
- 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 };
65
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/ui",
3
- "version": "11.42.0",
3
+ "version": "11.43.0",
4
4
  "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -166,7 +166,7 @@
166
166
  "peerDependencies": {
167
167
  "@hocuspocus/provider": ">=2.15.0 <5.0.0",
168
168
  "@nanostores/react": ">=0.8.4 <3.0.0",
169
- "@tangle-network/brand": "^1.26.2",
169
+ "@tangle-network/brand": "^1.27.0",
170
170
  "@tiptap/core": ">=3.20.4 <4.0.0",
171
171
  "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
172
172
  "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",
@@ -0,0 +1,76 @@
1
+ import type { Meta, StoryObj } from '@storybook/react'
2
+ import { ComplianceBadge } from './compliance-badge'
3
+
4
+ const meta: Meta<typeof ComplianceBadge> = {
5
+ title: 'Primitives/ComplianceBadge',
6
+ component: ComplianceBadge,
7
+ parameters: { layout: 'centered' },
8
+ }
9
+
10
+ export default meta
11
+ type Story = StoryObj<typeof ComplianceBadge>
12
+
13
+ /**
14
+ * The default and the only HIPAA state surfaces may ship before the
15
+ * documented launch gate closes. Renders "HIPAA-Ready", outlined, on the
16
+ * info triple.
17
+ */
18
+ export const Ready: Story = { args: { status: 'ready' } }
19
+
20
+ /**
21
+ * Reserved for after HIPAA's launch gate closes (BAAs executed +
22
+ * infrastructure blockers resolved, per
23
+ * compliance/policies/hipaa-security-program.md). Renders "HIPAA Compliant",
24
+ * filled, on the success triple.
25
+ */
26
+ export const Compliant: Story = { args: { status: 'compliant' } }
27
+
28
+ export const ReadyMedium: Story = { args: { status: 'ready', size: 'md' } }
29
+ export const CompliantMedium: Story = { args: { status: 'compliant', size: 'md' } }
30
+
31
+ /**
32
+ * SOC 2 before an attestation: plain "SOC 2", outlined.
33
+ */
34
+ export const Soc2Ready: Story = { args: { product: 'soc2', status: 'ready' } }
35
+
36
+ /**
37
+ * SOC 2 Type II is an ATTAINED audit (final report on file at
38
+ * compliance/evidence/2026-09-01-final-audit), so unlike HIPAA's "compliant"
39
+ * this filled form is legitimate to ship today. Renders "SOC 2 Type II".
40
+ */
41
+ export const Soc2TypeII: Story = { args: { product: 'soc2', status: 'compliant' } }
42
+
43
+ export const Soc2TypeIIMedium: Story = {
44
+ args: { product: 'soc2', status: 'compliant', size: 'md' },
45
+ }
46
+
47
+ export const Linked: Story = {
48
+ args: { status: 'ready', href: '/trust' },
49
+ }
50
+
51
+ export const AllStates: Story = {
52
+ name: 'All States',
53
+ render: () => (
54
+ <div className="flex flex-col gap-4 p-6">
55
+ <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">HIPAA</div>
56
+ <div className="flex flex-wrap items-center gap-2">
57
+ <ComplianceBadge status="ready" />
58
+ <ComplianceBadge status="compliant" />
59
+ <ComplianceBadge status="ready" size="md" />
60
+ <ComplianceBadge status="compliant" size="md" />
61
+ </div>
62
+ <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">SOC 2</div>
63
+ <div className="flex flex-wrap items-center gap-2">
64
+ <ComplianceBadge product="soc2" status="ready" />
65
+ <ComplianceBadge product="soc2" status="compliant" />
66
+ <ComplianceBadge product="soc2" status="ready" size="md" />
67
+ <ComplianceBadge product="soc2" status="compliant" size="md" />
68
+ </div>
69
+ <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Linked</div>
70
+ <div className="flex flex-wrap items-center gap-2">
71
+ <ComplianceBadge status="ready" href="/trust" />
72
+ <ComplianceBadge product="soc2" status="compliant" href="/trust" />
73
+ </div>
74
+ </div>
75
+ ),
76
+ }
@@ -0,0 +1,104 @@
1
+ import { render, screen } from "@testing-library/react";
2
+ import { describe, expect, it } from "vitest";
3
+ import { ComplianceBadge } from "./compliance-badge";
4
+
5
+ describe("ComplianceBadge", () => {
6
+ // The copy rule the component exists to enforce: there is no official HIPAA
7
+ // certification and the launch gate has not closed, so the unqualified claim
8
+ // must never render unless a caller asks for it explicitly.
9
+ it("defaults to HIPAA-Ready", () => {
10
+ render(<ComplianceBadge />);
11
+ expect(screen.getByLabelText("HIPAA-Ready")).toBeInTheDocument();
12
+ expect(screen.queryByText("HIPAA Compliant")).not.toBeInTheDocument();
13
+ });
14
+
15
+ it("renders HIPAA Compliant only with an explicit compliant status", () => {
16
+ render(<ComplianceBadge status="compliant" />);
17
+ expect(screen.getByLabelText("HIPAA Compliant")).toBeInTheDocument();
18
+ });
19
+
20
+ it("keeps the HIPAA copy exact when a product is given", () => {
21
+ render(<ComplianceBadge product="hipaa" status="ready" />);
22
+ expect(screen.getByLabelText("HIPAA-Ready")).toBeInTheDocument();
23
+ });
24
+
25
+ // SOC 2 Type II is an attained audit (compliance/evidence/2026-09-01-final-audit),
26
+ // so unlike HIPAA the filled claim is legitimate to render today — but still
27
+ // only under an explicit status, with plain "SOC 2" as the default.
28
+ it("defaults soc2 to plain SOC 2", () => {
29
+ render(<ComplianceBadge product="soc2" />);
30
+ expect(screen.getByLabelText("SOC 2")).toBeInTheDocument();
31
+ expect(screen.queryByText("SOC 2 Type II")).not.toBeInTheDocument();
32
+ });
33
+
34
+ it("renders SOC 2 Type II with an explicit compliant status", () => {
35
+ render(<ComplianceBadge product="soc2" status="compliant" />);
36
+ expect(screen.getByLabelText("SOC 2 Type II")).toBeInTheDocument();
37
+ });
38
+
39
+ it("fills the attained SOC 2 claim like any compliant status", () => {
40
+ const { container } = render(
41
+ <ComplianceBadge product="soc2" status="compliant" />,
42
+ );
43
+ const badge = container.firstElementChild as HTMLElement;
44
+ expect(badge.className).toContain("bg-[var(--surface-success-bg)]");
45
+ });
46
+
47
+ it("never says certified", () => {
48
+ const { container } = render(<ComplianceBadge status="compliant" />);
49
+ expect(container.textContent).not.toMatch(/certif/i);
50
+ });
51
+
52
+ it("outlines ready and fills compliant, each from one surface token triple", () => {
53
+ const { container: ready } = render(<ComplianceBadge status="ready" />);
54
+ const readyBadge = ready.firstElementChild as HTMLElement;
55
+ expect(readyBadge.className).toContain("bg-transparent");
56
+ expect(readyBadge.className).toContain("border-[var(--surface-info-border)]");
57
+ expect(readyBadge.className).toContain("text-[var(--surface-info-text)]");
58
+
59
+ const { container: compliant } = render(
60
+ <ComplianceBadge status="compliant" />,
61
+ );
62
+ const compliantBadge = compliant.firstElementChild as HTMLElement;
63
+ expect(compliantBadge.className).toContain(
64
+ "bg-[var(--surface-success-bg)]",
65
+ );
66
+ expect(compliantBadge.className).toContain(
67
+ "text-[var(--surface-success-text)]",
68
+ );
69
+ });
70
+
71
+ it("paints no hardcoded colours", () => {
72
+ const { container } = render(<ComplianceBadge status="compliant" />);
73
+ const badge = container.firstElementChild as HTMLElement;
74
+ expect(badge.className).not.toMatch(
75
+ /(?:bg|text|border)-(?:green|blue|red|amber|emerald)-/,
76
+ );
77
+ });
78
+
79
+ // The mark is decorative; the label carries the whole claim, so announcing
80
+ // both would say the same thing twice.
81
+ it("hides the brand mark from the accessibility tree", () => {
82
+ const { container } = render(<ComplianceBadge />);
83
+ const mark = container.querySelector("svg");
84
+ expect(mark).not.toBeNull();
85
+ expect(mark?.closest('[aria-hidden="true"]')).not.toBeNull();
86
+ });
87
+
88
+ it("renders as a link when href is given", () => {
89
+ render(<ComplianceBadge href="/trust" />);
90
+ const link = screen.getByRole("link", { name: "HIPAA-Ready" });
91
+ expect(link).toHaveAttribute("href", "/trust");
92
+ });
93
+
94
+ it("renders as a span without href", () => {
95
+ const { container } = render(<ComplianceBadge />);
96
+ expect(container.firstElementChild?.tagName).toBe("SPAN");
97
+ });
98
+
99
+ it.each(["sm", "md"] as const)("takes the %s size", (size) => {
100
+ const { container } = render(<ComplianceBadge size={size} />);
101
+ const badge = container.firstElementChild as HTMLElement;
102
+ expect(badge.className).toContain(size === "sm" ? "text-xs" : "text-sm");
103
+ });
104
+ });
@@ -0,0 +1,139 @@
1
+ import * as React from "react";
2
+ import { TangleKnot } from "@tangle-network/brand";
3
+ import { focusRing } from "../lib/focus";
4
+ import { cn } from "../lib/utils";
5
+
6
+ /**
7
+ * The one compliance badge every public surface uses, so the claim a page
8
+ * makes is chosen here and nowhere else.
9
+ *
10
+ * Copy discipline is the point of the component. There is NO official HIPAA
11
+ * certification a product can hold, so the badge never says "certified", and
12
+ * it renders "HIPAA Compliant" ONLY when a caller passes `status="compliant"`
13
+ * explicitly. The default — and the only HIPAA state surfaces may ship
14
+ * today — is `status="ready"`, which renders "HIPAA-Ready".
15
+ *
16
+ * For HIPAA, `status="compliant"` is reserved for use AFTER the company's
17
+ * documented launch gate closes: business associate agreements executed AND
18
+ * the infrastructure blockers resolved, per
19
+ * compliance/policies/hipaa-security-program.md. Do not pass it before that
20
+ * gate is confirmed closed in the policy record, whatever a page design
21
+ * suggests.
22
+ *
23
+ * That gate is HIPAA's. SOC 2 Type II is an ATTAINED audit, not a pending
24
+ * one — the final report is on file at
25
+ * compliance/evidence/2026-09-01-final-audit — so for `product="soc2"` the
26
+ * filled `status="compliant"` form, "SOC 2 Type II", is legitimate to render
27
+ * today.
28
+ *
29
+ * The claim is told three ways, matching StatusPill's doctrine: the LABEL
30
+ * text itself ("HIPAA-Ready" vs "HIPAA Compliant"), the FILL (outlined vs
31
+ * filled), and the TONE (the info triple while the gate is open, the success
32
+ * triple once it closes). Each status paints from one matched `--surface-*`
33
+ * token triple, so the text colour is solved against a known plane; the
34
+ * outlined "ready" form keeps the triple's text and border, which clear the
35
+ * 4.5:1 body floor on the page canvas, on a transparent fill.
36
+ *
37
+ * The Tangle mark is decorative: the label already carries the whole claim,
38
+ * so the mark is hidden from the accessibility tree and the badge's own
39
+ * `aria-label` states the claim.
40
+ */
41
+ export type ComplianceStatus = "ready" | "compliant";
42
+
43
+ /**
44
+ * The record is keyed by product so each framework's claim is reviewed copy
45
+ * in one place, not string interpolation at call sites. ISO 27001 slots in
46
+ * the same way when its audit lands.
47
+ */
48
+ export type ComplianceProduct = "hipaa" | "soc2";
49
+
50
+ export interface ComplianceBadgeProps {
51
+ /**
52
+ * Defaults to "ready". For HIPAA, pass "compliant" only after the launch
53
+ * gate closes; for SOC 2 the Type II audit is already attained, so
54
+ * "compliant" is legitimate today.
55
+ */
56
+ status?: ComplianceStatus;
57
+ product?: ComplianceProduct;
58
+ size?: "sm" | "md";
59
+ /** Renders the badge as a link, e.g. to the trust or compliance page. */
60
+ href?: string;
61
+ className?: string;
62
+ id?: string;
63
+ title?: string;
64
+ }
65
+
66
+ const PRODUCT_COPY: Record<
67
+ ComplianceProduct,
68
+ Record<ComplianceStatus, string>
69
+ > = {
70
+ hipaa: {
71
+ ready: "HIPAA-Ready",
72
+ compliant: "HIPAA Compliant",
73
+ },
74
+ soc2: {
75
+ ready: "SOC 2",
76
+ compliant: "SOC 2 Type II",
77
+ },
78
+ };
79
+
80
+ /**
81
+ * Outlined while a claim is still being earned (info: still moving), filled
82
+ * once it is attained (success: settled). Both draw from ONE matched token
83
+ * triple — no hardcoded colours — so themes repaint the badge like any other
84
+ * surface.
85
+ */
86
+ const STATUS_SURFACE: Record<ComplianceStatus, string> = {
87
+ ready:
88
+ "border-[var(--surface-info-border)] bg-transparent text-[var(--surface-info-text)]",
89
+ compliant:
90
+ "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
91
+ };
92
+
93
+ const SIZE_CLASSES = {
94
+ sm: "px-2 py-0.5 text-xs",
95
+ md: "px-2.5 py-1 text-sm",
96
+ } as const;
97
+
98
+ const MARK_SIZE = { sm: 12, md: 14 } as const;
99
+
100
+ function ComplianceBadge({
101
+ status = "ready",
102
+ product = "hipaa",
103
+ size = "sm",
104
+ href,
105
+ className,
106
+ ...props
107
+ }: ComplianceBadgeProps) {
108
+ const label = PRODUCT_COPY[product][status];
109
+ const classes = cn(
110
+ "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border font-medium",
111
+ SIZE_CLASSES[size],
112
+ STATUS_SURFACE[status],
113
+ href && focusRing,
114
+ className,
115
+ );
116
+ const mark = (
117
+ <span className="inline-flex shrink-0" aria-hidden="true">
118
+ <TangleKnot size={MARK_SIZE[size]} />
119
+ </span>
120
+ );
121
+
122
+ if (href) {
123
+ return (
124
+ <a href={href} aria-label={label} className={classes} {...props}>
125
+ {mark}
126
+ {label}
127
+ </a>
128
+ );
129
+ }
130
+
131
+ return (
132
+ <span aria-label={label} className={classes} {...props}>
133
+ {mark}
134
+ {label}
135
+ </span>
136
+ );
137
+ }
138
+
139
+ export { ComplianceBadge };
@@ -227,6 +227,13 @@ export type { PaginationProps } from "./pagination";
227
227
  export { StatusPill } from "./status-pill";
228
228
  export type { StatusPillProps, StatusTone } from "./status-pill";
229
229
 
230
+ export { ComplianceBadge } from "./compliance-badge";
231
+ export type {
232
+ ComplianceBadgeProps,
233
+ ComplianceProduct,
234
+ ComplianceStatus,
235
+ } from "./compliance-badge";
236
+
230
237
  export { Tag } from "./tag";
231
238
  export type { TagProps } from "./tag";
232
239