@tangle-network/ui 11.30.2 → 11.31.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @tangle-network/ui
 
+## 11.31.1
+
+### Patch Changes
+
+- 05857b3: The `.tangle-prose` table rules (`display: block`, a sideways scroll on the table itself, and cell borders) now skip the Markdown table card, which marks its table `data-markdown-table` and scrolls inside its card. The prose link color and underline skip link chips (`data-link-chip`).
+
+## 11.31.0
+
+### Minor Changes
+
+- f09ecc4: Chat-grade components:
+  
+  - **Markdown tables** render as cards with a header row, subtle row lines, right-aligned tabular figures, a Copy CSV control, and horizontal scrolling inside the card on narrow screens.
+  - **Code blocks** highlight with Shiki in Brand's syntax colors, name their file from the fence (`title="src/x.ts"`, `ts:src/x.ts`, or a bare path), and render single-line fences as blocks. react-syntax-highlighter is no longer a dependency.
+  - **Link chips:** a host can render links to known objects as icon chips with `Markdown`'s new `linkChip` resolver.
+  - **Run components:** `ui/run` adds `TaskList` (status pills, with priority shown only when tasks differ), `ApprovalCard` with `ApprovalDiffSummary` (plain-language title, plan step, files with +/− lines, raw input behind Details), and `RunPhaseList` (tool runs grouped by step, one line each).
+
 ## 11.30.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { ReasoningPart, SessionPart, TextPart, ToolPart, ToolState, ToolStatus,
 import { AgentBranding } from "./types/branding.js";
 import { CustomToolRenderer, DisplayVariant, ToolDisplayMetadata } from "./types/tool-display.js";
 import { FinalTextPart, GroupedMessage, MessageRun, MessageUser, Run, RunStats, ToolCategory } from "./types/run.js";
-import { Markdown, MarkdownProps, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
+import { Markdown, MarkdownLinkChip, MarkdownLinkChipResolver, MarkdownProps, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
 import { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from "./openui/openui-artifact-renderer.js";
 import { ChatContainer, ChatContainerProps } from "./chat/chat-container.js";
 import { MessageList, MessageListProps } from "./chat/message-list.js";
@@ -81,7 +81,7 @@ import { TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine } from "./
 import { DropZone, DropZoneProps } from "./primitives/drop-zone.js";
 import { UploadFile, UploadProgress, UploadProgressProps } from "./primitives/upload-progress.js";
 import { SidebarDropZone, SidebarDropZoneProps } from "./primitives/sidebar-drop-zone.js";
-import { CodeBlock, CodeBlockProps, CopyButton } from "./markdown/code-block.js";
+import { CodeBlock, CodeBlockProps, CopyButton, codeBlockGrammar } from "./markdown/code-block.js";
 import { InlineCode, InlineCodeProps } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
@@ -101,10 +101,15 @@ import { InlineToolItem, InlineToolItemProps } from "./run/inline-tool-item.js";
 import { InlineThinkingItem, InlineThinkingItemProps } from "./run/inline-thinking-item.js";
 import { ExpandedToolDetail, ExpandedToolDetailProps } from "./run/expanded-tool-detail.js";
 import { LiveDuration } from "./run/run-item-primitives.js";
+import { TaskList, TaskListItem, TaskListProps, TaskStatus, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
+import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep } from "./run/approval-card.js";
+import { RunPhase, RunPhaseList } from "./run/run-phase-list.js";
 import "./run.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES } from "./openui/schema-data.js";
 import { OpenUISchemaIssue, OpenUISchemaValidation, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui-schema.js";
 import "./openui.js";
+import { fenceInfo } from "./markdown/code-meta.js";
+import { numericColumns, tableCsv } from "./markdown/markdown-table.js";
 import "./markdown.js";
 import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMapAtom, updatePart } from "./stores/chat-store.js";
 import "./types.js";
@@ -124,4 +129,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
 import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
 import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
 import "./redaction.js";
-export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, 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, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, 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, localToday, messagesAtom, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, 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, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, localToday, messagesAtom, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -39,7 +39,7 @@ import { DropZone } from "./primitives/drop-zone.js";
 import { UploadProgress } from "./primitives/upload-progress.js";
 import { SidebarDropZone } from "./primitives/sidebar-drop-zone.js";
 import { ArtifactPane } from "./primitives/artifact-pane.js";
-import { CodeBlock, CopyButton } from "./markdown/code-block.js";
+import { CodeBlock, CopyButton, codeBlockGrammar } from "./markdown/code-block.js";
 import { InlineCode } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
@@ -70,6 +70,8 @@ import { DiffPreview } from "./tool-previews/diff-preview.js";
 import { ExpandedToolDetail } from "./run/expanded-tool-detail.js";
 import { RunRowShell, RunRowStatusDot } from "./run/run-row-shell.js";
 import { InlineToolItem } from "./run/inline-tool-item.js";
+import { fenceInfo } from "./markdown/code-meta.js";
+import { numericColumns, tableCsv } from "./markdown/markdown-table.js";
 import { Markdown, getSanitizedMarkdownHeadingIdFromRawFragment } from "./markdown/markdown.js";
 import { InlineThinkingItem } from "./run/inline-thinking-item.js";
 import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES } from "./openui/schema-data.js";
@@ -85,6 +87,9 @@ import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { LiveDuration } from "./run/run-item-primitives.js";
 import { ToolCallFeed, parseToolEvent } from "./run/tool-call-feed.js";
+import { TaskList, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
+import { ApprovalCard, ApprovalDiffSummary } from "./run/approval-card.js";
+import { RunPhaseList } from "./run/run-phase-list.js";
 import { FileTree, filterFileTree } from "./files/file-tree.js";
 import { RichFileTree } from "./files/rich-file-tree.js";
 import { FileCard } from "./files/file-card.js";
@@ -108,4 +113,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { RedactedDocument } from "./redaction/redacted-document.js";
-export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, localToday, messagesAtom, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, 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, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, localToday, messagesAtom, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/markdown/code-block.d.ts

@@ -1,20 +1,27 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/markdown/code-block.d.ts
+/** The Shiki grammar for a fence language, or undefined for plain text. */
+export declare function codeBlockGrammar(language: string | undefined): string | undefined;
 export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   code: string;
   language?: string;
   /**
-   * Header text. Defaults to `language`. Set this when the display name differs
-   * from the highlight.js language id — e.g. a file extension ("BASHRC") whose
-   * content highlights as a known language, or none.
+   * Header text. Defaults to the language's name. Set this when the display
+   * name differs from the language id, e.g. a file extension ("BASHRC").
    */
   label?: string;
+  /** The file the code belongs to, shown in the header with the language. */
+  filename?: string;
   showLineNumbers?: boolean;
   /** Force light (true) or dark (false); omitted inherits the nearest theme. */
   light?: boolean;
   children?: ReactNode;
 }
-export declare const CodeBlock: import("react").MemoExoticComponent<({ code, language, label, showLineNumbers, light, className, children, ...props }: CodeBlockProps) => import("react").JSX.Element>;
+/**
+ * Code with Shiki highlighting in Brand's syntax colors. It renders readable
+ * plain code first (and on the server), then highlights once its grammar loads.
+ */
+export declare const CodeBlock: import("react").MemoExoticComponent<({ code, language, label, filename, showLineNumbers, light, className, children, ...props }: CodeBlockProps) => import("react").JSX.Element>;
 /** Copy-to-clipboard button for use inside CodeBlock. */
 export declare const CopyButton: import("react").MemoExoticComponent<({ text }: {
   text: string;

package/dist/markdown/code-block.js

@@ -2,145 +2,277 @@ import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Check, Copy } from "lucide-react";
+import { Check, Copy, FileCode2 } from "lucide-react";
 //#region src/markdown/code-block.tsx
-const syntaxTheme = (() => {
-	const comment = "var(--syntax-comment, currentColor)";
-	const keyword = "var(--syntax-keyword, currentColor)";
-	const string = "var(--syntax-string, currentColor)";
-	const fn = "var(--syntax-function, currentColor)";
-	const number = "var(--syntax-number, currentColor)";
-	const meta = "var(--syntax-meta, currentColor)";
-	const error = "var(--syntax-error, currentColor)";
-	const variable = "var(--syntax-variable, currentColor)";
-	return {
-		"hljs-comment": {
-			color: comment,
-			fontStyle: "italic"
-		},
-		"hljs-quote": {
-			color: comment,
-			fontStyle: "italic"
-		},
-		"hljs-doctag": { color: comment },
-		"hljs-keyword": { color: keyword },
-		"hljs-selector-tag": { color: keyword },
-		"hljs-literal": { color: keyword },
-		"hljs-type": { color: keyword },
-		"hljs-class": { color: keyword },
-		"hljs-string": { color: string },
-		"hljs-template-tag": { color: string },
-		"hljs-template-variable": { color: string },
-		"hljs-addition": { color: string },
-		"hljs-regexp": { color: string },
-		"hljs-title": { color: fn },
-		"hljs-section": { color: fn },
-		"hljs-built_in": { color: fn },
-		"hljs-name": { color: fn },
-		"hljs-function": { color: fn },
-		"hljs-selector-id": { color: fn },
-		"hljs-selector-class": { color: fn },
-		"hljs-attribute": { color: fn },
-		"hljs-number": { color: number },
-		"hljs-symbol": { color: number },
-		"hljs-bullet": { color: number },
-		"hljs-link": {
-			color: number,
-			textDecoration: "underline"
-		},
-		"hljs-meta": { color: meta },
-		"hljs-selector-pseudo": { color: meta },
-		"hljs-deletion": { color: error },
-		"hljs-params": { color: variable },
-		"hljs-variable": { color: variable },
-		"hljs-tag": { color: variable },
-		"hljs-attr": { color: variable },
-		"hljs-subst": { color: variable },
-		"hljs-strong": { fontWeight: "bold" },
-		"hljs-emphasis": { fontStyle: "italic" },
-		"hljs": {
-			color: "var(--syntax-foreground, currentColor)",
-			background: "transparent"
-		}
-	};
-})();
+const SYNTAX = {
+	comment: "var(--syntax-comment, currentColor)",
+	keyword: "var(--syntax-keyword, currentColor)",
+	string: "var(--syntax-string, currentColor)",
+	function: "var(--syntax-function, currentColor)",
+	number: "var(--syntax-number, currentColor)",
+	variable: "var(--syntax-variable, currentColor)",
+	foreground: "var(--syntax-foreground, currentColor)"
+};
+const SHIKI_THEME = "tangle-syntax";
+const BRAND_COLOR_FOR_SHIKI = {
+	"var(--shiki-foreground)": SYNTAX.foreground,
+	"var(--shiki-token-comment)": SYNTAX.comment,
+	"var(--shiki-token-keyword)": SYNTAX.keyword,
+	"var(--shiki-token-string)": SYNTAX.string,
+	"var(--shiki-token-string-expression)": SYNTAX.string,
+	"var(--shiki-token-function)": SYNTAX.function,
+	"var(--shiki-token-constant)": SYNTAX.number,
+	"var(--shiki-token-link)": SYNTAX.number,
+	"var(--shiki-token-parameter)": SYNTAX.variable,
+	"var(--shiki-token-punctuation)": SYNTAX.foreground
+};
+const GRAMMARS = {
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	tsx: () => import("shiki/langs/tsx.mjs"),
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	jsx: () => import("shiki/langs/jsx.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	jsonc: () => import("shiki/langs/jsonc.mjs"),
+	bash: () => import("shiki/langs/bash.mjs"),
+	python: () => import("shiki/langs/python.mjs"),
+	html: () => import("shiki/langs/html.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	scss: () => import("shiki/langs/scss.mjs"),
+	markdown: () => import("shiki/langs/markdown.mjs"),
+	mdx: () => import("shiki/langs/mdx.mjs"),
+	yaml: () => import("shiki/langs/yaml.mjs"),
+	toml: () => import("shiki/langs/toml.mjs"),
+	sql: () => import("shiki/langs/sql.mjs"),
+	diff: () => import("shiki/langs/diff.mjs"),
+	go: () => import("shiki/langs/go.mjs"),
+	rust: () => import("shiki/langs/rust.mjs"),
+	solidity: () => import("shiki/langs/solidity.mjs"),
+	ruby: () => import("shiki/langs/ruby.mjs"),
+	java: () => import("shiki/langs/java.mjs"),
+	kotlin: () => import("shiki/langs/kotlin.mjs"),
+	swift: () => import("shiki/langs/swift.mjs"),
+	php: () => import("shiki/langs/php.mjs"),
+	c: () => import("shiki/langs/c.mjs"),
+	cpp: () => import("shiki/langs/cpp.mjs"),
+	csharp: () => import("shiki/langs/csharp.mjs"),
+	graphql: () => import("shiki/langs/graphql.mjs"),
+	xml: () => import("shiki/langs/xml.mjs"),
+	dockerfile: () => import("shiki/langs/dockerfile.mjs")
+};
+const LANGUAGE_ALIASES = {
+	ts: "typescript",
+	mts: "typescript",
+	cts: "typescript",
+	js: "javascript",
+	mjs: "javascript",
+	cjs: "javascript",
+	node: "javascript",
+	sh: "bash",
+	shell: "bash",
+	zsh: "bash",
+	console: "bash",
+	shellscript: "bash",
+	py: "python",
+	python3: "python",
+	yml: "yaml",
+	md: "markdown",
+	rs: "rust",
+	sol: "solidity",
+	rb: "ruby",
+	kt: "kotlin",
+	cs: "csharp",
+	"c#": "csharp",
+	"c++": "cpp",
+	gql: "graphql",
+	svg: "xml",
+	docker: "dockerfile",
+	patch: "diff",
+	htm: "html"
+};
+const LANGUAGE_NAMES = {
+	typescript: "TypeScript",
+	tsx: "TSX",
+	javascript: "JavaScript",
+	jsx: "JSX",
+	json: "JSON",
+	jsonc: "JSONC",
+	bash: "Bash",
+	python: "Python",
+	html: "HTML",
+	css: "CSS",
+	scss: "SCSS",
+	markdown: "Markdown",
+	mdx: "MDX",
+	yaml: "YAML",
+	toml: "TOML",
+	sql: "SQL",
+	diff: "Diff",
+	go: "Go",
+	rust: "Rust",
+	solidity: "Solidity",
+	ruby: "Ruby",
+	java: "Java",
+	kotlin: "Kotlin",
+	swift: "Swift",
+	php: "PHP",
+	c: "C",
+	cpp: "C++",
+	csharp: "C#",
+	graphql: "GraphQL",
+	xml: "XML",
+	dockerfile: "Dockerfile"
+};
+/** The Shiki grammar for a fence language, or undefined for plain text. */
+function codeBlockGrammar(language) {
+	if (!language) return void 0;
+	const id = language.toLowerCase();
+	const resolved = LANGUAGE_ALIASES[id] ?? id;
+	return GRAMMARS[resolved] ? resolved : void 0;
+}
 let highlighterPromise;
+const grammarLoads = /* @__PURE__ */ new Map();
 function loadHighlighter() {
-	return highlighterPromise ??= import("react-syntax-highlighter/dist/esm/default-highlight").then((module) => module.default).catch((error) => {
+	return highlighterPromise ??= Promise.all([import("shiki/core"), import("shiki/engine/javascript")]).then(([core, engine]) => core.createHighlighterCore({
+		themes: [core.createCssVariablesTheme({
+			name: SHIKI_THEME,
+			variablePrefix: "--shiki-",
+			fontStyle: true
+		})],
+		langs: [],
+		engine: engine.createJavaScriptRegexEngine()
+	})).catch((error) => {
 		highlighterPromise = void 0;
 		throw error;
 	});
 }
-const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light, className, children, ...props }) => {
-	const [Highlighter, setHighlighter] = useState(null);
+async function tokenize(code, grammar) {
+	const highlighter = await loadHighlighter();
+	let load = grammarLoads.get(grammar);
+	if (!load) {
+		load = GRAMMARS[grammar]().then((module) => highlighter.loadLanguage(module.default));
+		load.catch(() => grammarLoads.delete(grammar));
+		grammarLoads.set(grammar, load);
+	}
+	await load;
+	return highlighter.codeToTokensBase(code, {
+		lang: grammar,
+		theme: SHIKI_THEME
+	});
+}
+function tokenStyle(token) {
+	const color = token.color ? BRAND_COLOR_FOR_SHIKI[token.color] ?? SYNTAX.foreground : void 0;
+	const style = token.fontStyle ?? 0;
+	if (!color && !style) return void 0;
+	return {
+		...color ? { color } : {},
+		...style & 1 ? { fontStyle: "italic" } : {},
+		...style & 2 ? { fontWeight: "bold" } : {},
+		...style & 4 ? { textDecoration: "underline" } : {}
+	};
+}
+/**
+* Code with Shiki highlighting in Brand's syntax colors. It renders readable
+* plain code first (and on the server), then highlights once its grammar loads.
+*/
+const CodeBlock = memo(({ code, language, label, filename, showLineNumbers = false, light, className, children, ...props }) => {
+	const grammar = codeBlockGrammar(language);
+	const [highlighted, setHighlighted] = useState(null);
 	useEffect(() => {
+		if (!grammar) return;
 		let active = true;
-		loadHighlighter().then((component) => {
-			if (active) setHighlighter(() => component);
+		tokenize(code, grammar).then((lines) => {
+			if (active) setHighlighted({
+				code,
+				grammar,
+				lines
+			});
 		}).catch(() => {});
 		return () => {
 			active = false;
 		};
-	}, []);
-	const headerLabel = label ?? language;
+	}, [code, grammar]);
+	const languageName = grammar ? LANGUAGE_NAMES[grammar] : language;
+	const headerLabel = label ?? (filename ? void 0 : languageName);
+	const hasHeader = Boolean(filename || headerLabel);
 	const mode = light === void 0 ? {} : { "data-theme": light ? "light" : "dark" };
-	const customStyle = {
+	const preStyle = {
 		margin: 0,
 		padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
 		background: "transparent",
+		color: SYNTAX.foreground,
 		fontSize: "var(--code-font-size, 0.8125rem)",
 		lineHeight: "var(--code-line-height, 1.5)",
 		overflowX: "auto"
 	};
-	const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
-	const scrollRegion = {
-		tabIndex: 0,
-		role: "region",
-		"aria-label": headerLabel ? `${headerLabel} code` : "Code",
-		className: focusRingInset
+	const codeStyle = {
+		fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)",
+		whiteSpace: "pre"
 	};
+	const isHighlighted = Boolean(highlighted && highlighted.code === code && highlighted.grammar === grammar);
+	const lines = isHighlighted ? highlighted.lines.map((line) => line.map((token) => ({
+		content: token.content,
+		style: tokenStyle(token)
+	}))) : code.split("\n").map((line) => [{ content: line }]);
+	const regionName = filename ?? headerLabel;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className),
+		"data-highlighted": isHighlighted ? "true" : void 0,
 		...props,
 		...mode,
 		children: [
-			headerLabel && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between border-b border-border px-3 py-1 bg-[var(--code-header-bg,hsl(var(--background)))]",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-xs font-mono font-medium uppercase tracking-widest text-muted-foreground",
+			hasHeader && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3 border-b border-border px-3 py-1.5 bg-[var(--code-header-bg,hsl(var(--background)))]",
+				children: [filename ? /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-2 font-sans text-sm",
+					children: [
+						/* @__PURE__ */ jsx(FileCode2, {
+							"aria-hidden": true,
+							className: "size-4 shrink-0 text-muted-foreground"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate font-mono font-medium text-foreground",
+							title: filename,
+							children: filename
+						}),
+						languageName && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-muted-foreground",
+							children: languageName
+						})
+					]
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "font-sans text-sm font-medium text-muted-foreground",
 					children: headerLabel
 				}), children]
 			}),
-			!headerLabel && children && /* @__PURE__ */ jsx("div", {
-				className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100",
+			!hasHeader && children && /* @__PURE__ */ jsx("div", {
+				className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
 				children
 			}),
-			Highlighter ? /* @__PURE__ */ jsx(Highlighter, {
-				language: language ?? "text",
-				style: syntaxTheme,
-				showLineNumbers,
-				lineNumberStyle: {
-					color: "var(--syntax-comment, currentColor)",
-					minWidth: "2.5em",
-					paddingRight: "1em"
-				},
-				customStyle,
-				codeTagProps,
-				wrapLines: false,
-				...scrollRegion,
-				children: code
-			}) : /* @__PURE__ */ jsx("pre", {
-				...scrollRegion,
-				style: {
-					...syntaxTheme.hljs,
-					...customStyle
-				},
+			/* @__PURE__ */ jsx("pre", {
+				tabIndex: 0,
+				role: "region",
+				"aria-label": regionName ? `${regionName} code` : "Code",
+				className: focusRingInset,
+				style: preStyle,
 				children: /* @__PURE__ */ jsx("code", {
-					style: {
-						...codeTagProps.style,
-						whiteSpace: "pre"
-					},
-					children: code
+					style: codeStyle,
+					children: !isHighlighted && !showLineNumbers ? code : lines.map((line, index) => /* @__PURE__ */ jsxs("span", { children: [
+						showLineNumbers && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							"data-line-number": true,
+							className: "inline-block select-none pr-4 text-right",
+							style: {
+								color: SYNTAX.comment,
+								minWidth: "2.5em"
+							},
+							children: index + 1
+						}),
+						line.map((token, tokenIndex) => /* @__PURE__ */ jsx("span", {
+							style: token.style,
+							children: token.content
+						}, tokenIndex)),
+						index < lines.length - 1 ? "\n" : null
+					] }, index))
 				})
 			})
 		]
@@ -197,4 +329,4 @@ const CopyButton = memo(({ text }) => {
 });
 CopyButton.displayName = "CopyButton";
 //#endregion
-export { CodeBlock, CopyButton };
+export { CodeBlock, CopyButton, codeBlockGrammar };

package/dist/markdown/code-meta.d.ts

@@ -0,0 +1,11 @@
+//#region src/markdown/code-meta.d.ts
+/**
+ * The language and file name of a fenced block, from its class and info
+ * string: ```ts title="src/x.ts"```, ```ts filename=src/x.ts```,
+ * ```ts src/x.ts```, ```ts:src/x.ts``` and ```src/x.ts``` all name the file.
+ */
+export declare function fenceInfo(className: string | undefined, meta: unknown): {
+  language?: string;
+  filename?: string;
+};
+//#endregion