@tangle-network/ui 11.16.11 → 11.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.17.0
+
+### Minor Changes
+
+- ff1cb8b: Add `Tag`, `Chip` and `IconTile` on brand's categorical tones, plus `toneFor`, `CATEGORY_TONES` and `TONE_CLASSES`.
+  
+  - `Tag`: a static label (tone, `soft` or `outline` emphasis, `sm` or `md`), squared off so a category never shares the status pill's round silhouette. `onRemove` adds a native, named remove button.
+  - `Chip`: a native button. Without `selected` it is an action chip; with `selected` it is a filter or toggle with `aria-pressed`, and a selected chip shows a check, a stronger border and a deeper fill, never colour alone.
+  - `IconTile`: a square identity mark that falls back from an image to a glyph to initials, with a stable tone derived from the name. Decorative unless `label` is given.
+  
+  `StatusPill` remains the one status primitive. `Badge`'s sandbox lifecycle variants (`running`, `creating`, `stopped`, `warm`, `cold`, `deleted`) are deprecated compatibility over the status triples: `running` now paints success (was teal), `creating` info (was violet) and `warm` warning (was orange). No export is removed.
+
 ## 11.16.11
 
 ### Patch Changes

package/dist/index.d.ts

@@ -67,6 +67,10 @@ import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
+import { Tag, TagProps } from "./primitives/tag.js";
+import { Chip, ChipProps } from "./primitives/chip.js";
+import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "./primitives.js";
@@ -99,4 +103,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, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, CodeBlock, type CodeBlockProps, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, 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, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Chip, type ChipProps, CodeBlock, type CodeBlockProps, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -31,6 +31,10 @@ import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { PageHeader } from "./primitives/page-header.js";
 import { StatusPill } from "./primitives/status-pill.js";
+import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
+import { Tag } from "./primitives/tag.js";
+import { Chip } from "./primitives/chip.js";
+import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "./primitives.js";
@@ -83,4 +87,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, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, CodeBlock, CommandPreview, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Progress, QuestionPreview, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatusPill, Switch, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, 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, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Chip, CodeBlock, CommandPreview, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Progress, QuestionPreview, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/primitives/badge.d.ts

@@ -4,6 +4,13 @@ import * as React from "react";
 declare const badgeVariants: (props?: ({
   variant?: "cold" | "creating" | "default" | "deleted" | "destructive" | "error" | "info" | "outline" | "running" | "sandbox" | "secondary" | "stopped" | "success" | "warm" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * `success`, `warning`, `error` and `info` paint the same triples as
+ * `StatusPill`; for a status, prefer `StatusPill`, which adds the glyph that
+ * survives greyscale. The lifecycle variants (`running`, `creating`,
+ * `stopped`, `warm`, `cold`, `deleted`) are deprecated: use sandbox-ui's
+ * lifecycle adapter.
+ */
 export type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "error" | "info" | "sandbox" | "running" | "creating" | "stopped" | "warm" | "cold" | "deleted" | null;
 export interface BadgeProps extends VariantProps<typeof badgeVariants> {
   variant?: BadgeVariant;

package/dist/primitives/badge.js

@@ -14,10 +14,10 @@ const badgeVariants = cva(`inline-flex items-center gap-1.5 rounded-full border
 		error: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
 		info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
 		sandbox: "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]",
-		running: "border-[var(--surface-teal-border)] bg-[var(--surface-teal-bg)] text-[var(--surface-teal-text)]",
-		creating: "border-[var(--surface-violet-border)] bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]",
+		running: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+		creating: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
 		stopped: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
-		warm: "border-[var(--surface-orange-border)] bg-[var(--surface-orange-bg)] text-[var(--surface-orange-text)]",
+		warm: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
 		cold: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
 		deleted: "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--surface-neutral-text)]"
 	} },

package/dist/primitives/chip.d.ts

@@ -0,0 +1,38 @@
+import { Tone } from "./tone.js";
+import * as React from "react";
+//#region src/primitives/chip.d.ts
+/**
+ * A label the user presses: a native `<button>` shaped like a `Tag`.
+ *
+ * Two kinds, chosen by whether `selected` is passed:
+ *
+ * - **Action** (`selected` omitted): runs `onClick` — a suggested prompt, an
+ *   "add filter" entry point.
+ * - **Filter / toggle** (`selected` is a boolean): a toggle button with
+ *   `aria-pressed`. Pressing it calls `onSelectedChange(!selected)`; the caller
+ *   owns the state. Use it for a set of filters (each independently on or off)
+ *   or a single on/off option such as "Plan first".
+ *
+ * Selection is never shown by colour alone: a selected chip gains a check in
+ * place of its icon, a stronger border and a deeper fill, and assistive tech
+ * reads it from `aria-pressed`.
+ *
+ * For a removable label, use `Tag` with `onRemove`; a button cannot contain a
+ * second button.
+ */
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  children: React.ReactNode;
+  /** Categorical tone, or `neutral` (the default). */
+  tone?: Tone;
+  /** `soft` fills the chip; `outline` keeps only the border until selected. */
+  emphasis?: "soft" | "outline";
+  size?: "sm" | "md";
+  /** Leading glyph, drawn in the tone's icon colour. A selected chip shows a check instead. */
+  icon?: React.ReactNode;
+  /** Makes the chip a toggle button; omit for an action chip. */
+  selected?: boolean;
+  onSelectedChange?: (selected: boolean) => void;
+}
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Chip };

package/dist/primitives/chip.js

@@ -0,0 +1,41 @@
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { TONE_CLASSES } from "./tone.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+//#region src/primitives/chip.tsx
+const SIZE = {
+	sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3",
+	md: "h-8 gap-1.5 px-3 text-sm [&_svg]:size-3.5"
+};
+const Chip = React.forwardRef(({ className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, selected, onSelectedChange, onClick, type = "button", disabled, ...props }, ref) => {
+	const classes = TONE_CLASSES[tone];
+	const toggle = selected !== void 0;
+	const on = selected === true;
+	const glyph = on ? /* @__PURE__ */ jsx(Check, {}) : icon;
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		disabled,
+		"aria-pressed": toggle ? on : void 0,
+		onClick: (event) => {
+			onClick?.(event);
+			if (toggle && !event.defaultPrevented) onSelectedChange?.(!on);
+		},
+		className: cn("relative inline-flex min-w-0 max-w-full shrink-0 cursor-pointer select-none items-center rounded-md border font-medium transition-[background-color,border-color,color] duration-150 ease-out before:absolute before:inset-x-0 before:-inset-y-1 before:content-[''] pointer-coarse:before:-inset-y-2.5", SIZE[size], emphasis === "outline" && !on ? classes.outline : classes.surface, !disabled && !on && classes.hover, on && classes.selected, disabled && "cursor-not-allowed opacity-50", focusRing, className),
+		...props,
+		children: [glyph ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("inline-flex shrink-0", classes.icon),
+			children: glyph
+		}) : null, /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			title: typeof children === "string" ? children : void 0,
+			children
+		})]
+	});
+});
+Chip.displayName = "Chip";
+//#endregion
+export { Chip };

package/dist/primitives/icon-tile.d.ts

@@ -0,0 +1,32 @@
+import { CategoryTone } from "./tone.js";
+import * as React from "react";
+//#region src/primitives/icon-tile.d.ts
+/**
+ * A square identity mark for a row or card: a project, a channel, an account,
+ * a file kind. It shows the first of these that is available:
+ *
+ * 1. `src` — an image (a logo or favicon). If it fails to load, the tile falls
+ *    through to the next option instead of showing a broken image.
+ * 2. `icon` — a glyph, drawn in the tone's icon colour.
+ * 3. `name` — up to two initials.
+ *
+ * The tone is categorical. Omit it to derive a stable one from `name`, so the
+ * same project gets the same colour on every screen. A tile is decorative
+ * unless `label` is given: next to a visible name it would only repeat it.
+ */
+export interface IconTileProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Defaults to a tone derived from `name`, or violet when there is no name. */
+  tone?: CategoryTone;
+  size?: "xs" | "sm" | "md" | "lg";
+  src?: string;
+  icon?: React.ReactNode;
+  /** The thing's name. Supplies the initials and the derived tone. */
+  name?: string;
+  /** Accessible name. Give it only when no visible label names the thing. */
+  label?: string;
+}
+/** Up to two initials: the first letters of the first two words, or of the one word. */
+export declare function initialsOf(name: string): string;
+declare const IconTile: React.ForwardRefExoticComponent<IconTileProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { IconTile };

package/dist/primitives/icon-tile.js

@@ -0,0 +1,49 @@
+import { cn } from "../lib/utils.js";
+import { TONE_CLASSES, toneFor } from "./tone.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/icon-tile.tsx
+const SIZE = {
+	xs: "size-5 rounded-[5px] text-[10px] [&_svg]:size-3",
+	sm: "size-6 rounded-md text-[11px] [&_svg]:size-3.5",
+	md: "size-8 rounded-md text-xs [&_svg]:size-4",
+	lg: "size-10 rounded-lg text-sm [&_svg]:size-5"
+};
+/** Up to two initials: the first letters of the first two words, or of the one word. */
+function initialsOf(name) {
+	const words = name.trim().split(/[\s._-]+/u).filter(Boolean);
+	if (words.length === 0) return "";
+	const first = (word) => Array.from(word)[0] ?? "";
+	return (words.length === 1 ? Array.from(words[0]).slice(0, 2).join("") : first(words[0]) + first(words[1])).toLocaleUpperCase();
+}
+const IconTile = React.forwardRef(({ className, tone, size = "md", src, icon, name, label, ...props }, ref) => {
+	const [failedSrc, setFailedSrc] = React.useState(null);
+	const imgRef = React.useRef(null);
+	React.useEffect(() => {
+		const img = imgRef.current;
+		if (img?.complete && img.naturalWidth === 0 && src) setFailedSrc(src);
+	}, [src]);
+	const resolvedTone = tone ?? (name ? toneFor(name) : "violet");
+	const classes = TONE_CLASSES[resolvedTone];
+	const showImage = Boolean(src) && failedSrc !== src;
+	const initials = name ? initialsOf(name) : "";
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		role: label ? "img" : void 0,
+		"aria-label": label,
+		"aria-hidden": label ? void 0 : true,
+		className: cn("inline-flex shrink-0 select-none items-center justify-center overflow-hidden border font-semibold", SIZE[size], showImage ? "border-[var(--border-subtle)] bg-[var(--surface-neutral-bg)]" : classes.surface, !showImage && icon ? classes.icon : null, className),
+		...props,
+		children: showImage ? /* @__PURE__ */ jsx("img", {
+			ref: imgRef,
+			src,
+			alt: "",
+			className: "size-full object-cover",
+			onError: () => setFailedSrc(src ?? null),
+			draggable: false
+		}) : icon ? icon : initials
+	});
+});
+IconTile.displayName = "IconTile";
+//#endregion
+export { IconTile, initialsOf };

package/dist/primitives/tag.d.ts

@@ -0,0 +1,36 @@
+import { Tone } from "./tone.js";
+import * as React from "react";
+//#region src/primitives/tag.d.ts
+/**
+ * A static label for what something IS: a category, a kind, a named value.
+ *
+ * Tags are squared-off (`rounded-md`) where `StatusPill` is fully round, so a
+ * category and a state never share a silhouette even before colour is read.
+ * For a state, use `StatusPill`. For a label the user presses, use `Chip`.
+ *
+ * `onRemove` adds a native remove button after the label — the removable
+ * variant, for a recipient, an applied filter or an attached item. The tag
+ * itself stays non-interactive, so the remove button is the only tab stop.
+ * Removing a tag unmounts its focused button; move focus to the next tag or
+ * the input that adds tags, or keyboard focus falls to the page.
+ */
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  children: React.ReactNode;
+  /** Categorical tone, or `neutral` (the default) for an uncategorised label. */
+  tone?: Tone;
+  /** `soft` fills the tag; `outline` keeps only the border, for dense rows. */
+  emphasis?: "soft" | "outline";
+  size?: "sm" | "md";
+  /** A leading glyph, drawn in the tone's icon colour. Decorative. */
+  icon?: React.ReactNode;
+  /** Shows a remove button; called when it is pressed. */
+  onRemove?: () => void;
+  /**
+   * Accessible name of the remove button. Defaults to "Remove <label>" when
+   * the label is a string; pass it when the label is not plain text.
+   */
+  removeLabel?: string;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Tag };

package/dist/primitives/tag.js

@@ -0,0 +1,42 @@
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { TONE_CLASSES } from "./tone.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/primitives/tag.tsx
+const SIZE = {
+	sm: "h-6 gap-1 px-2 text-xs [&_svg]:size-3",
+	md: "h-7 gap-1.5 px-2.5 text-sm [&_svg]:size-3.5"
+};
+const Tag = React.forwardRef(({ className, children, tone = "neutral", emphasis = "soft", size = "sm", icon, onRemove, removeLabel, ...props }, ref) => {
+	const classes = TONE_CLASSES[tone];
+	const label = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cn("inline-flex min-w-0 max-w-full shrink-0 items-center rounded-md border font-medium", SIZE[size], emphasis === "outline" ? classes.outline : classes.surface, onRemove && (size === "sm" ? "pr-0.5" : "pr-1"), className),
+		...props,
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("inline-flex shrink-0", classes.icon),
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				title: typeof children === "string" ? children : void 0,
+				children
+			}),
+			onRemove ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": label,
+				onClick: onRemove,
+				className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm opacity-70 transition-[opacity,background-color] duration-150 ease-out hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)] hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']", size === "sm" ? "size-5" : "size-6", focusRing),
+				children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+			}) : null
+		]
+	});
+});
+Tag.displayName = "Tag";
+//#endregion
+export { Tag };

package/dist/primitives/tone.d.ts

@@ -0,0 +1,40 @@
+//#region src/primitives/tone.d.ts
+/**
+ * Categorical tones: the colours that tell KINDS of things apart — an entity,
+ * a file type, a channel, a capability. A category never reports a state; that
+ * is `StatusPill`'s job, on its own success / warning / danger / info / neutral
+ * triples. See "Color Roles" in the brand guidelines.
+ *
+ * Each tone reads one matched family from `@tangle-network/brand`
+ * (`--tone-<name>-{bg,bg-hover,bg-selected,border,border-selected,text,icon}`),
+ * solved so the text and icon clear their floors on every fill in both themes.
+ *
+ * Every class below is written out in full: Tailwind and the sandbox-ui style
+ * bundle read this file statically, so an interpolated class name would never
+ * be generated.
+ */
+export declare const CATEGORY_TONES: readonly ["violet", "orange", "teal", "blue", "pink", "brown", "cyan", "lime"];
+export type CategoryTone = (typeof CATEGORY_TONES)[number];
+/** A categorical tone, or `neutral` for a label that is not a category. */
+export type Tone = CategoryTone | "neutral";
+export interface ToneClasses {
+  /** Resting fill, border and label colour. */
+  surface: string;
+  /** Border only; the label keeps the tone's text colour. */
+  outline: string;
+  /** Hover fill for an interactive surface. */
+  hover: string;
+  /** Fill and border of a selected chip. */
+  selected: string;
+  /** The glyph colour, for an icon beside a label or inside a tile. */
+  icon: string;
+}
+export declare const TONE_CLASSES: Record<Tone, ToneClasses>;
+/**
+ * A stable categorical tone for a key — an account id, a channel, a project
+ * name — for things that need telling apart but have no category of their own.
+ * The same key always gets the same tone, in every product and session.
+ * Distinct keys can share a tone, so the label or glyph must still name it.
+ */
+export declare function toneFor(key: string): CategoryTone;
+//#endregion

package/dist/primitives/tone.js

@@ -0,0 +1,106 @@
+//#region src/primitives/tone.ts
+/**
+* Categorical tones: the colours that tell KINDS of things apart — an entity,
+* a file type, a channel, a capability. A category never reports a state; that
+* is `StatusPill`'s job, on its own success / warning / danger / info / neutral
+* triples. See "Color Roles" in the brand guidelines.
+*
+* Each tone reads one matched family from `@tangle-network/brand`
+* (`--tone-<name>-{bg,bg-hover,bg-selected,border,border-selected,text,icon}`),
+* solved so the text and icon clear their floors on every fill in both themes.
+*
+* Every class below is written out in full: Tailwind and the sandbox-ui style
+* bundle read this file statically, so an interpolated class name would never
+* be generated.
+*/
+const CATEGORY_TONES = [
+	"violet",
+	"orange",
+	"teal",
+	"blue",
+	"pink",
+	"brown",
+	"cyan",
+	"lime"
+];
+const TONE_CLASSES = {
+	violet: {
+		surface: "border-[var(--tone-violet-border)] bg-[var(--tone-violet-bg)] text-[var(--tone-violet-text)]",
+		outline: "border-[var(--tone-violet-border)] bg-transparent text-[var(--tone-violet-text)]",
+		hover: "hover:bg-[var(--tone-violet-bg-hover)]",
+		selected: "border-[var(--tone-violet-border-selected)] bg-[var(--tone-violet-bg-selected)]",
+		icon: "text-[var(--tone-violet-icon)]"
+	},
+	orange: {
+		surface: "border-[var(--tone-orange-border)] bg-[var(--tone-orange-bg)] text-[var(--tone-orange-text)]",
+		outline: "border-[var(--tone-orange-border)] bg-transparent text-[var(--tone-orange-text)]",
+		hover: "hover:bg-[var(--tone-orange-bg-hover)]",
+		selected: "border-[var(--tone-orange-border-selected)] bg-[var(--tone-orange-bg-selected)]",
+		icon: "text-[var(--tone-orange-icon)]"
+	},
+	teal: {
+		surface: "border-[var(--tone-teal-border)] bg-[var(--tone-teal-bg)] text-[var(--tone-teal-text)]",
+		outline: "border-[var(--tone-teal-border)] bg-transparent text-[var(--tone-teal-text)]",
+		hover: "hover:bg-[var(--tone-teal-bg-hover)]",
+		selected: "border-[var(--tone-teal-border-selected)] bg-[var(--tone-teal-bg-selected)]",
+		icon: "text-[var(--tone-teal-icon)]"
+	},
+	blue: {
+		surface: "border-[var(--tone-blue-border)] bg-[var(--tone-blue-bg)] text-[var(--tone-blue-text)]",
+		outline: "border-[var(--tone-blue-border)] bg-transparent text-[var(--tone-blue-text)]",
+		hover: "hover:bg-[var(--tone-blue-bg-hover)]",
+		selected: "border-[var(--tone-blue-border-selected)] bg-[var(--tone-blue-bg-selected)]",
+		icon: "text-[var(--tone-blue-icon)]"
+	},
+	pink: {
+		surface: "border-[var(--tone-pink-border)] bg-[var(--tone-pink-bg)] text-[var(--tone-pink-text)]",
+		outline: "border-[var(--tone-pink-border)] bg-transparent text-[var(--tone-pink-text)]",
+		hover: "hover:bg-[var(--tone-pink-bg-hover)]",
+		selected: "border-[var(--tone-pink-border-selected)] bg-[var(--tone-pink-bg-selected)]",
+		icon: "text-[var(--tone-pink-icon)]"
+	},
+	brown: {
+		surface: "border-[var(--tone-brown-border)] bg-[var(--tone-brown-bg)] text-[var(--tone-brown-text)]",
+		outline: "border-[var(--tone-brown-border)] bg-transparent text-[var(--tone-brown-text)]",
+		hover: "hover:bg-[var(--tone-brown-bg-hover)]",
+		selected: "border-[var(--tone-brown-border-selected)] bg-[var(--tone-brown-bg-selected)]",
+		icon: "text-[var(--tone-brown-icon)]"
+	},
+	cyan: {
+		surface: "border-[var(--tone-cyan-border)] bg-[var(--tone-cyan-bg)] text-[var(--tone-cyan-text)]",
+		outline: "border-[var(--tone-cyan-border)] bg-transparent text-[var(--tone-cyan-text)]",
+		hover: "hover:bg-[var(--tone-cyan-bg-hover)]",
+		selected: "border-[var(--tone-cyan-border-selected)] bg-[var(--tone-cyan-bg-selected)]",
+		icon: "text-[var(--tone-cyan-icon)]"
+	},
+	lime: {
+		surface: "border-[var(--tone-lime-border)] bg-[var(--tone-lime-bg)] text-[var(--tone-lime-text)]",
+		outline: "border-[var(--tone-lime-border)] bg-transparent text-[var(--tone-lime-text)]",
+		hover: "hover:bg-[var(--tone-lime-bg-hover)]",
+		selected: "border-[var(--tone-lime-border-selected)] bg-[var(--tone-lime-bg-selected)]",
+		icon: "text-[var(--tone-lime-icon)]"
+	},
+	neutral: {
+		surface: "border-[var(--surface-neutral-border)] bg-[var(--surface-neutral-bg)] text-[var(--text-secondary)]",
+		outline: "border-[var(--border-default)] bg-transparent text-[var(--text-secondary)]",
+		hover: "hover:bg-[color-mix(in_srgb,var(--surface-neutral-bg),var(--text-primary)_6%)]",
+		selected: "border-[var(--text-dim)] bg-[color-mix(in_srgb,var(--surface-neutral-bg),var(--text-primary)_12%)] text-[var(--text-primary)]",
+		icon: "text-[var(--text-dim)]"
+	}
+};
+/**
+* A stable categorical tone for a key — an account id, a channel, a project
+* name — for things that need telling apart but have no category of their own.
+* The same key always gets the same tone, in every product and session.
+* Distinct keys can share a tone, so the label or glyph must still name it.
+*/
+function toneFor(key) {
+	let hash = 2166136261;
+	for (let i = 0; i < key.length; i++) {
+		hash ^= key.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return CATEGORY_TONES[(hash >>> 0) % CATEGORY_TONES.length];
+}
+//#endregion
+export { CATEGORY_TONES, TONE_CLASSES, toneFor };

package/dist/primitives.d.ts

@@ -29,7 +29,11 @@ import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
+import { Tag, TagProps } from "./primitives/tag.js";
+import { Chip, ChipProps } from "./primitives/chip.js";
+import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, CodeBlock, type CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast };
+export { ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, Chip, type ChipProps, CodeBlock, type CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -29,7 +29,11 @@ import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { PageHeader } from "./primitives/page-header.js";
 import { StatusPill } from "./primitives/status-pill.js";
+import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
+import { Tag } from "./primitives/tag.js";
+import { Chip } from "./primitives/chip.js";
+import { IconTile, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricStrip } from "./primitives/metric-strip.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatusPill, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, UploadProgress, badgeVariants, buttonVariants, useTheme, useToast };
+export { ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chip, CodeBlock, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FilterField, Heading, IconTile, InlineCode, Input, Label, Logo, Metric, MetricStrip, PageHeader, PageShell, Progress, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ToastContainer, ToastProvider, Toolbar, UploadProgress, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme, useToast };

package/package.json

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

@@ -22,15 +22,21 @@ const badgeVariants = cva(
           "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
         sandbox:
           "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]",
-        /* Operational status variants */
+        /* Sandbox lifecycle variants: compatibility only, painted with the
+         * status triples. A lifecycle state is domain meaning, so its mapping
+         * lives in sandbox-ui's lifecycle adapter over `StatusPill`; these
+         * stay until consumers move. Running is up and healthy (success);
+         * creating is still in progress (info, as StatusPill's `running`);
+         * stopped and warm can be resumed (warning); cold is archived (info);
+         * deleted is gone (neutral). */
         running:
-          "border-[var(--surface-teal-border)] bg-[var(--surface-teal-bg)] text-[var(--surface-teal-text)]",
+          "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
         creating:
-          "border-[var(--surface-violet-border)] bg-[var(--surface-violet-bg)] text-[var(--surface-violet-text)]",
+          "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
         stopped:
           "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
         warm:
-          "border-[var(--surface-orange-border)] bg-[var(--surface-orange-bg)] text-[var(--surface-orange-text)]",
+          "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
         cold:
           "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]",
         deleted:
@@ -43,6 +49,13 @@ const badgeVariants = cva(
   },
 );
 
+/**
+ * `success`, `warning`, `error` and `info` paint the same triples as
+ * `StatusPill`; for a status, prefer `StatusPill`, which adds the glyph that
+ * survives greyscale. The lifecycle variants (`running`, `creating`,
+ * `stopped`, `warm`, `cold`, `deleted`) are deprecated: use sandbox-ui's
+ * lifecycle adapter.
+ */
 export type BadgeVariant =
   | "default"
   | "secondary"