@tangle-network/ui 11.31.3 → 11.32.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @tangle-network/ui
 
+## 11.32.1
+
+### Patch Changes
+
+- c94bde7: Fix shared defects from the Hospitality design audit.
+  
+  Brand: dark `--destructive` is now a light red carrying dark ink (`0 90% 77%` on `0 60% 10%`), so `text-destructive` clears AA (at least 4.5:1) on the canvas, card, popover and muted planes of every dark theme; it measured 2.5:1 on Hospitality's dark card. Destructive fills keep their foreground at 8:1. The `--font-sans` and `--font-display` stacks name `"Inter Variable"` ahead of `"Inter"`, and the README now recommends `@fontsource-variable/inter` so apps render every weight the scale uses. Brand still loads no fonts itself.
+  
+  UI: the `tabs` SegmentedControl scrolls the selected tab into view inside the strip (never the page) and fades the edge that has more tabs past it; tab items take a 44px hit height on coarse pointers; labels keep one weight in both variants, so changing the selection no longer shifts the row. SelectTrigger values end in an ellipsis with a gap before the chevron instead of clipping mid-glyph. Plain-text code fences (`text`, `txt`, `plain`, `plaintext`) show no language label.
+
+## 11.32.0
+
+### Minor Changes
+
+- 02b2d30: One shell header height and one transcript type scale. Brand adds `--shell-header-height` (56px, utility `h-shell-header`) and `--shell-inset-gutter` so every shell header row shares one bottom divider, and `--transcript-font-size` / `--transcript-line-height` with the `tangle-transcript-text` rule. UI's `AgentTimeline`, `UserMessage` and `ChatMessage` set the person's and the agent's message text with the same `TRANSCRIPT_TEXT` treatment (exported), so they differ only by alignment and surface; an agent message no longer renders at a different leading from the person's. `tangle-drift` gates two new metrics: `header_height_literal` (a header row given its own height) and `transcript_type_override` (product CSS restyling transcript text).
+
 ## 11.31.3
 
 ### Patch Changes

package/dist/chat/agent-timeline.js

@@ -1,6 +1,7 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { Markdown } from "../markdown/markdown.js";
+import "./transcript-text.js";
 import { MessageAuthor } from "./message-author.js";
 import { UserMessage } from "./user-message.js";
 import { ThinkingIndicator } from "./thinking-indicator.js";
@@ -62,7 +63,7 @@ function AssistantMessage({ item, author }) {
 			className: "mb-1.5"
 		}),
 		item.content && /* @__PURE__ */ jsx(Markdown, {
-			className: cn("tangle-prose text-[length:var(--font-size-base)] leading-[1.5]", item.isStreaming && STREAMING_CARET),
+			className: cn("tangle-prose", "tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]", item.isStreaming && STREAMING_CARET),
 			children: item.content
 		}),
 		item.isStreaming && !item.content && /* @__PURE__ */ jsx("span", {

package/dist/chat/chat-message.js

@@ -1,8 +1,18 @@
 import { cn } from "../lib/utils.js";
 import { Markdown } from "../markdown/markdown.js";
+import { TRANSCRIPT_TEXT } from "./transcript-text.js";
 import { MessageAuthor, isViewerMessage } from "./message-author.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-message.tsx
+/**
+* ChatMessage — one message in the conversation.
+*
+* Supports user messages (plain text) and assistant messages
+* (rich markdown with inline tool call activity). With `author` and
+* `viewerId` it renders a transcript shared by several people: the reader's
+* own messages stay at the end, everyone else's sit at the start under
+* their author.
+*/
 function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel = "You", assistantLabel = "Agent", hideRoleLabel, author, viewerId }) {
 	const isUser = role === "user";
 	const isAssistant = role === "assistant";
@@ -23,10 +33,10 @@ function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, classNa
 		}), /* @__PURE__ */ jsxs("div", {
 			className: cn("min-w-0 max-w-[85%] space-y-1", fromViewer ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background" : fromOtherPerson ? "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-foreground" : isAssistant ? "text-foreground" : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"),
 			children: [isUser ? /* @__PURE__ */ jsx("div", {
-				className: "whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[var(--line-height-base)]",
+				className: cn("whitespace-pre-wrap", TRANSCRIPT_TEXT),
 				children: content
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [content && /* @__PURE__ */ jsx(Markdown, {
-				className: "tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]",
+				className: cn("tangle-prose", "tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"),
 				children: content
 			}), isStreaming && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" })] }), toolCalls]
 		})]

package/dist/chat/transcript-text.d.ts

@@ -0,0 +1,11 @@
+//#region src/chat/transcript-text.d.ts
+/**
+ * The one text treatment for every chat message body, the person's and the
+ * agent's alike, so the two differ only by alignment and surface.
+ * `tangle-transcript-text` (brand globals.css) reads `--transcript-font-size`
+ * and `--transcript-line-height`; the utilities repeat the same tokens for a
+ * host that has not loaded brand's globals. `length:` types the token: a bare
+ * `text-[var(--x)]` compiles to a color.
+ */
+export declare const TRANSCRIPT_TEXT = "tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]";
+//#endregion

package/dist/chat/transcript-text.js

@@ -0,0 +1,12 @@
+//#region src/chat/transcript-text.ts
+/**
+* The one text treatment for every chat message body, the person's and the
+* agent's alike, so the two differ only by alignment and surface.
+* `tangle-transcript-text` (brand globals.css) reads `--transcript-font-size`
+* and `--transcript-line-height`; the utilities repeat the same tokens for a
+* host that has not loaded brand's globals. `length:` types the token: a bare
+* `text-[var(--x)]` compiles to a color.
+*/
+const TRANSCRIPT_TEXT = "tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]";
+//#endregion
+export { TRANSCRIPT_TEXT };

package/dist/chat/user-message.js

@@ -1,4 +1,5 @@
 import { SyntheticText, userTextSegments } from "./synthetic-text.js";
+import { TRANSCRIPT_TEXT } from "./transcript-text.js";
 import { MessageAuthor, isViewerMessage } from "./message-author.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ function UserBubble({ text, timestamp, actions }) {
 					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
 					children: formatTime(timestamp)
 				}) : null, /* @__PURE__ */ jsx("div", {
-					className: "break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]",
+					className: `break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`,
 					children: text
 				})]
 			}), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
@@ -53,7 +54,7 @@ function OtherPersonBubble({ text, timestamp, actions, author }) {
 						className: "pointer-events-none absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
 						children: formatTime(timestamp)
 					}) : null, /* @__PURE__ */ jsx("div", {
-						className: "break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]",
+						className: `break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`,
 						children: text
 					})]
 				}),

package/dist/chat.d.ts

@@ -6,4 +6,5 @@ import { ChatMessage, ChatMessageProps, MessageRole } from "./chat/chat-message.
 import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/message-author.js";
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
 import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem } from "./chat/agent-timeline.js";
-export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, isViewerMessage };
+import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
+export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, TRANSCRIPT_TEXT, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, isViewerMessage };

package/dist/chat.js

@@ -1,3 +1,4 @@
+import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
 import { MessageAuthor, isViewerMessage } from "./chat/message-author.js";
 import { UserMessage } from "./chat/user-message.js";
 import { MessageList } from "./chat/message-list.js";
@@ -5,4 +6,4 @@ import { ThinkingIndicator } from "./chat/thinking-indicator.js";
 import { AgentTimeline } from "./chat/agent-timeline.js";
 import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
-export { AgentTimeline, ChatContainer, ChatMessage, MessageAuthor, MessageList, ThinkingIndicator, UserMessage, isViewerMessage };
+export { AgentTimeline, ChatContainer, ChatMessage, MessageAuthor, MessageList, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, isViewerMessage };

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indic
 import { ToolCallStatus, ToolCallType } from "./run/tool-call-step.js";
 import { FeedSegment, ToolCallData, ToolCallFeed, ToolCallFeedProps, parseToolEvent } from "./run/tool-call-feed.js";
 import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem } from "./chat/agent-timeline.js";
+import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
 import "./chat.js";
 import { ArtifactPane, ArtifactPaneProps } from "./primitives/artifact-pane.js";
 import { FileNode, FileTree, FileTreeProps, FileTreeVisibilityOptions, filterFileTree } from "./files/file-tree.js";
@@ -129,4 +130,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, 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 };
+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, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, 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

@@ -78,6 +78,7 @@ import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES } from "./openui/schema-data
 import { findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui-schema.js";
 import { OpenUIArtifactRenderer } from "./openui/openui-artifact-renderer.js";
 import { RunGroup } from "./run/run-group.js";
+import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
 import { MessageAuthor, isViewerMessage } from "./chat/message-author.js";
 import { UserMessage } from "./chat/user-message.js";
 import { MessageList } from "./chat/message-list.js";
@@ -113,4 +114,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, 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 };
+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, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, 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/lib/control-presentation.js

@@ -28,6 +28,11 @@ const controlSquare = {
 * page on focus for anything smaller.
 */
 const fieldTouchText = "pointer-coarse:text-base";
+/**
+* A control that is shorter than 44px on a fine pointer still gets a 44px hit
+* height on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+*/
+const touchTarget = "pointer-coarse:min-h-11";
 /** Field sizes: the control scale with field padding. */
 const fieldSizes = {
 	sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, "px-2.5"),
@@ -40,4 +45,4 @@ const controlSizes = {
 };
 const fieldPresentation = cn(focusField, controlMotion, "min-w-0 bg-[var(--field-surface,var(--bg-input))] text-foreground", "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]", "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");
 //#endregion
-export { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText };
+export { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText, touchTarget };

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

@@ -1,6 +1,5 @@
 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;

package/dist/markdown/code-block.js

@@ -123,6 +123,12 @@ const LANGUAGE_NAMES = {
 	dockerfile: "Dockerfile"
 };
 /** The Shiki grammar for a fence language, or undefined for plain text. */
+const PLAIN_TEXT = /* @__PURE__ */ new Set([
+	"text",
+	"txt",
+	"plain",
+	"plaintext"
+]);
 function codeBlockGrammar(language) {
 	if (!language) return void 0;
 	const id = language.toLowerCase();
@@ -191,7 +197,7 @@ const CodeBlock = memo(({ code, language, label, filename, showLineNumbers = fal
 			active = false;
 		};
 	}, [code, grammar]);
-	const languageName = grammar ? LANGUAGE_NAMES[grammar] : language;
+	const languageName = grammar ? LANGUAGE_NAMES[grammar] : PLAIN_TEXT.has(language?.toLowerCase() ?? "") ? void 0 : language;
 	const headerLabel = label ?? (filename ? void 0 : languageName);
 	const hasHeader = Boolean(filename || headerLabel);
 	const mode = light === void 0 ? {} : { "data-theme": light ? "light" : "dark" };

package/dist/primitives/segmented-control.d.ts

@@ -17,6 +17,12 @@ import * as React from "react";
  *     that darken on hover. This keeps the selected segment as the
  *     single visual anchor instead of the whole group competing with
  *     itself.
+ *   - Every label keeps one weight. Selection is colour plus surface or
+ *     underline, so changing the value never reflows the row.
+ *
+ * The tabs variant scrolls sideways when its options outgrow the row: the
+ * selected tab is kept in view, and a faded edge shows that more tabs sit
+ * past it.
  */
 export interface SegmentedControlOption<T extends string = string> {
   value: T;

package/dist/primitives/segmented-control.js

@@ -1,12 +1,61 @@
 "use client";
 import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import "../lib/control-presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/segmented-control.tsx
+/** Width of the faded edge that marks more tabs past the strip, in px. */
+const TAB_EDGE_FADE = 24;
+const tabEdgeFade = [
+	"data-[overflow-start]:[mask-image:linear-gradient(to_right,transparent,#000_24px)]",
+	"data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]",
+	"data-[overflow-start]:data-[overflow-end]:[mask-image:linear-gradient(to_right,transparent,#000_24px,#000_calc(100%-24px),transparent)]"
+];
 function SegmentedControl({ value, onValueChange, options, variant = "row", className, ...rest }) {
 	if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production" && !rest["aria-label"] && !rest["aria-labelledby"]) console.warn("[SegmentedControl] role=\"radiogroup\" requires either aria-label or aria-labelledby for accessibility.");
 	const optionRefs = React.useRef(/* @__PURE__ */ new Map());
+	const stripRef = React.useRef(null);
+	const [overflow, setOverflow] = React.useState({
+		start: false,
+		end: false
+	});
+	const tabs = variant === "tabs";
+	const measureOverflow = React.useCallback(() => {
+		const strip = stripRef.current;
+		if (!strip) return;
+		const start = strip.scrollLeft > 1;
+		const end = strip.scrollLeft + strip.clientWidth < strip.scrollWidth - 1;
+		setOverflow((prev) => prev.start === start && prev.end === end ? prev : {
+			start,
+			end
+		});
+	}, []);
+	React.useLayoutEffect(() => {
+		if (!tabs) return;
+		const strip = stripRef.current;
+		const option = optionRefs.current.get(value);
+		if (strip && option) {
+			const start = option.offsetLeft;
+			const end = start + option.offsetWidth;
+			if (start < strip.scrollLeft + TAB_EDGE_FADE) strip.scrollLeft = Math.max(0, start - TAB_EDGE_FADE);
+			else if (end > strip.scrollLeft + strip.clientWidth - TAB_EDGE_FADE) strip.scrollLeft = end - strip.clientWidth + TAB_EDGE_FADE;
+		}
+		measureOverflow();
+	}, [
+		tabs,
+		value,
+		options.length,
+		measureOverflow
+	]);
+	React.useEffect(() => {
+		if (!tabs || typeof ResizeObserver === "undefined") return;
+		const strip = stripRef.current;
+		if (!strip) return;
+		const observer = new ResizeObserver(measureOverflow);
+		observer.observe(strip);
+		return () => observer.disconnect();
+	}, [tabs, measureOverflow]);
 	const hasMatch = options.some((o) => o.value === value);
 	const handleKeyDown = (e) => {
 		if (options.length === 0) return;
@@ -29,8 +78,12 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		"aria-label": rest["aria-label"],
 		"aria-labelledby": rest["aria-labelledby"],
 		"data-testid": rest["data-testid"],
+		"data-overflow-start": overflow.start || void 0,
+		"data-overflow-end": overflow.end || void 0,
+		ref: stripRef,
 		onKeyDown: handleKeyDown,
-		className: cn("flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
+		onScroll: tabs ? measureOverflow : void 0,
+		className: cn("flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1", variant === "tabs" && ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade], className),
 		children: options.map((option, i) => {
 			const active = option.value === value;
 			const focusable = active || !hasMatch && i === 0;
@@ -47,7 +100,11 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 				onClick: () => {
 					if (!active) onValueChange(option.value);
 				},
-				className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-[color,background-color,border-color,box-shadow]", variant === "row" && ["rounded-md px-3 py-1.5", focusRing], variant === "tabs" && ["rounded-none border-b-2 -mb-px px-4 py-2", focusRingInset], active ? variant === "row" ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold" : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold" : variant === "row" ? "border border-transparent text-muted-foreground hover:text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
+				className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]", variant === "row" && ["rounded-md px-3 py-1.5", focusRing], variant === "tabs" && [
+					"shrink-0 rounded-none border-b-2 -mb-px px-4 py-2",
+					"pointer-coarse:min-h-11",
+					focusRingInset
+				], active ? variant === "row" ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)]" : "border-[var(--accent-text)] text-[var(--accent-text)]" : variant === "row" ? "border border-transparent text-muted-foreground hover:text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
 				children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.adornment && /* @__PURE__ */ jsx("span", {
 					className: cn("text-xs", active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"),
 					children: option.adornment

package/dist/primitives/select.js

@@ -11,7 +11,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("flex w-full items-center justify-between whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, fieldTouchText, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size], className),
+	className: cn("flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, fieldTouchText, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:truncate [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size], className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.31.3",
+  "version": "11.32.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -150,7 +150,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.20.0",
+    "@tangle-network/brand": "^1.22.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/chat/agent-timeline.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event"
 import { describe, expect, it, vi } from "vitest"
 import type { ToolPart } from "../types/parts"
 import { AgentTimeline, type AgentTimelineItem } from "./agent-timeline"
+import { TRANSCRIPT_TEXT } from "./transcript-text"
 
 const editPart: ToolPart = {
   type: "tool",
@@ -287,3 +288,22 @@ describe("AgentTimeline tool actions", () => {
     expect(screen.getByText("Output")).toBeInTheDocument()
   })
 })
+
+describe("transcript type scale", () => {
+  it("sets the person's and the agent's message text in one family, size and leading", () => {
+    render(
+      <AgentTimeline
+        items={[
+          { id: "u", kind: "message", role: "user", content: "Can Luz take the 3 pm massage?" },
+          { id: "a", kind: "message", role: "assistant", content: "Yes, Luz is free at 3 pm." },
+        ]}
+      />,
+    )
+    const user = screen.getByText("Can Luz take the 3 pm massage?")
+    const agent = screen.getByText("Yes, Luz is free at 3 pm.").closest(".tangle-prose")
+    const textClasses = (element: Element | null) =>
+      [...(element?.classList ?? [])].filter((name) => /^(tangle-transcript-text|text-|leading-|font-)/.test(name)).sort()
+    expect(textClasses(user)).toEqual(TRANSCRIPT_TEXT.split(" ").sort())
+    expect(textClasses(agent)).toEqual(textClasses(user))
+  })
+})

package/src/chat/agent-timeline.tsx

@@ -1,3 +1,4 @@
+import { TRANSCRIPT_TEXT } from "./transcript-text";
 import { useState, type KeyboardEvent, type ReactNode } from "react";
 import {
   AlertTriangle,
@@ -188,10 +189,9 @@ function AssistantMessage({ item, author }: { item: AgentTimelineMessageItem; au
       {author && <MessageAuthor author={author} className="mb-1.5" />}
       {item.content && (
         <Markdown
-          // `length:` types the token: a bare `text-[var(--x)]` compiles to a
-          // color, which left the reading size at the Markdown default.
           className={cn(
-            "tangle-prose text-[length:var(--font-size-base)] leading-[1.5]",
+            "tangle-prose",
+            TRANSCRIPT_TEXT,
             item.isStreaming && STREAMING_CARET,
           )}
         >

package/src/chat/chat-message.tsx

@@ -8,6 +8,7 @@
  * their author.
  */
 
+import { TRANSCRIPT_TEXT } from "./transcript-text";
 import { type ReactNode } from "react";
 import { cn } from "../lib/utils";
 import { Markdown } from "../markdown/markdown";
@@ -102,12 +103,12 @@ export function ChatMessage({
         )}
       >
         {isUser ? (
-          <div className="whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[var(--line-height-base)]">
+          <div className={cn("whitespace-pre-wrap", TRANSCRIPT_TEXT)}>
             {content}
           </div>
         ) : (
           <>
-            {content && <Markdown className="tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]">{content}</Markdown>}
+            {content && <Markdown className={cn("tangle-prose", TRANSCRIPT_TEXT)}>{content}</Markdown>}
             {isStreaming && (
               <span className="ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" />
             )}

package/src/chat/index.ts

@@ -17,3 +17,4 @@ export {
   type AgentTimelineCustomItem,
   type AgentTimelineTone,
 } from "./agent-timeline";
+export { TRANSCRIPT_TEXT } from "./transcript-text";

package/src/chat/message-author.test.tsx

@@ -22,18 +22,18 @@ const segmentedParts: SessionPart[] = [
 // existed. A transcript that names no author must keep that exact markup.
 describe("a transcript without authors", () => {
   it("renders ChatMessage as before", () => {
-    expect(html(<ChatMessage role="user" content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-end"><div class="flex items-center gap-2 px-1 flex-row-reverse"><span class="font-medium text-foreground text-xs">You</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background"><div class="whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[var(--line-height-base)]">Can I break my lease early?</div></div></div>"`)
-    expect(html(<ChatMessage role="assistant" content="It depends on the lease terms." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 text-foreground"><div class="tangle-prose max-w-none tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]"><p>It depends on the lease terms.</p></div></div></div>"`)
-    expect(html(<ChatMessage role="system" content="Session started." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"><div class="tangle-prose max-w-none tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]"><p>Session started.</p></div></div></div>"`)
+    expect(html(<ChatMessage role="user" content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-end"><div class="flex items-center gap-2 px-1 flex-row-reverse"><span class="font-medium text-foreground text-xs">You</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background"><div class="whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div>"`)
+    expect(html(<ChatMessage role="assistant" content="It depends on the lease terms." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 text-foreground"><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>It depends on the lease terms.</p></div></div></div>"`)
+    expect(html(<ChatMessage role="system" content="Session started." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>Session started.</p></div></div></div>"`)
   })
 
   it("renders UserMessage actions and application notes as before", () => {
-    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
-    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div>"`)
+    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
+    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div>"`)
   })
 
   it("renders UserMessage as before", () => {
-    expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">Can I break my lease early?</div></div></div></div>"`)
+    expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div>"`)
   })
 
   it("renders AgentTimeline messages as before", () => {
@@ -46,7 +46,7 @@ describe("a transcript without authors", () => {
           ]}
         />,
       ),
-    ).toMatchInlineSnapshot(`"<div class="mx-auto flex w-full max-w-5xl flex-col px-4 py-4"><div data-timeline-step="user" class=""><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">Can I break my lease early?</div></div></div></div></div><div data-timeline-step="prose" class="mt-4"><div><div class="tangle-prose max-w-none tangle-prose text-[length:var(--font-size-base)] leading-[1.5]"><p>It depends on the lease terms.</p></div></div></div></div>"`)
+    ).toMatchInlineSnapshot(`"<div class="mx-auto flex w-full max-w-5xl flex-col px-4 py-4"><div data-timeline-step="user" class=""><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div></div><div data-timeline-step="prose" class="mt-4"><div><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>It depends on the lease terms.</p></div></div></div></div>"`)
   })
 })
 

package/src/chat/transcript-text.ts

@@ -0,0 +1,10 @@
+/**
+ * The one text treatment for every chat message body, the person's and the
+ * agent's alike, so the two differ only by alignment and surface.
+ * `tangle-transcript-text` (brand globals.css) reads `--transcript-font-size`
+ * and `--transcript-line-height`; the utilities repeat the same tokens for a
+ * host that has not loaded brand's globals. `length:` types the token: a bare
+ * `text-[var(--x)]` compiles to a color.
+ */
+export const TRANSCRIPT_TEXT =
+  "tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]";

package/src/chat/user-message.tsx

@@ -1,3 +1,4 @@
+import { TRANSCRIPT_TEXT } from "./transcript-text";
 import { memo, type ReactNode } from "react";
 import type { ChatAuthor, SessionMessage } from "../types/message";
 import type { SessionPart } from "../types/parts";
@@ -53,7 +54,7 @@ function UserBubble({ text, timestamp, actions }: {
               {formatTime(timestamp)}
             </span>
           ) : null}
-          <div className="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">
+          <div className={`break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`}>
             {text}
           </div>
         </div>
@@ -88,7 +89,7 @@ function OtherPersonBubble({ text, timestamp, actions, author }: {
               {formatTime(timestamp)}
             </span>
           ) : null}
-          <div className="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">
+          <div className={`break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`}>
             {text}
           </div>
         </div>

package/src/lib/control-presentation.ts

@@ -46,6 +46,12 @@ export const controlSquare = {
  */
 export const fieldTouchText = "pointer-coarse:text-base";
 
+/**
+ * A control that is shorter than 44px on a fine pointer still gets a 44px hit
+ * height on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+ */
+export const touchTarget = "pointer-coarse:min-h-11";
+
 /** Field sizes: the control scale with field padding. */
 export const fieldSizes = {
   sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, "px-2.5"),

package/src/markdown/code-block.test.tsx

@@ -14,6 +14,13 @@ afterEach(() => {
 
 describe("CodeBlock scoped semantic colors", () => {
   it("keeps code readable before the renderer loads, then applies live semantic colors and line numbers", async () => {
+    // Shiki stops tokenizing a line after 500ms and paints the rest in the last
+    // token's color. The first pass over a cold grammar also compiles its
+    // patterns, which on a loaded host can take longer than that. Warm the
+    // grammar first: this test checks the color mapping, not cold-start time.
+    const warm = render(<CodeBlock code={'const message = "hello";'} language="javascript" />);
+    await waitFor(() => expect(warm.container.querySelector("[data-highlighted]")).not.toBeNull(), { timeout: 10_000 });
+    warm.unmount();
     const { container } = render(<CodeBlock code={'const message = "hello";'} language="javascript" showLineNumbers />);
     // Plain code already carries its line numbers, so highlighting shifts no layout.
     expect(container.querySelector("pre code")?.textContent?.replace(/^1/, "")).toBe('const message = "hello";');
@@ -116,6 +123,17 @@ describe("CodeBlock", () => {
     expect(getByText("Python")).toBeInTheDocument();
   });
 
+  it.each(["text", "TXT", "plain", "plaintext"])("shows no %s label on a plain-text fence, only its copy control", (language) => {
+    const { container, queryByText } = render(
+      <CodeBlock code={"x"} language={language}>
+        <CopyButton text="x" />
+      </CodeBlock>,
+    );
+    expect(container.querySelector(".border-b")).toBeNull();
+    expect(queryByText(language)).toBeNull();
+    expect(container.querySelector('button[title="Copy to clipboard"]')).not.toBeNull();
+  });
+
   it("renders no header when neither label nor language is set", () => {
     const { container } = render(<CodeBlock code={"x"} />);
     // The header is the only element carrying a bottom border.

package/src/markdown/code-block.tsx

@@ -94,6 +94,8 @@ const LANGUAGE_NAMES: Record<string, string> = {
 };
 
 /** The Shiki grammar for a fence language, or undefined for plain text. */
+const PLAIN_TEXT = new Set(["text", "txt", "plain", "plaintext"]);
+
 export function codeBlockGrammar(language: string | undefined): string | undefined {
   if (!language) return undefined;
   const id = language.toLowerCase();
@@ -177,7 +179,8 @@ export const CodeBlock = memo(
       return () => { active = false; };
     }, [code, grammar]);
 
-    const languageName = grammar ? LANGUAGE_NAMES[grammar] : language;
+    // A plain-text fence names no language worth showing; it keeps its copy control.
+    const languageName = grammar ? LANGUAGE_NAMES[grammar] : PLAIN_TEXT.has(language?.toLowerCase() ?? "") ? undefined : language;
     const headerLabel = label ?? (filename ? undefined : languageName);
     const hasHeader = Boolean(filename || headerLabel);
     const mode = light === undefined ? {} : { "data-theme": light ? "light" : "dark" };

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

@@ -117,3 +117,19 @@ describe("shared control presentation", () => {
     expect(buttonVariants()).toContain("motion-reduce:active:scale-100");
   });
 });
+
+describe("SelectTrigger with a value longer than the trigger", () => {
+  it("ends the value in an ellipsis with a gap before the chevron", () => {
+    const value = "Luna — ReCenter Guest Concierge & Practitioner Desk";
+    render(<Select value="concierge"><SelectTrigger aria-label="Agent" className="w-40"><SelectValue>{value}</SelectValue></SelectTrigger></Select>);
+    const trigger = screen.getByLabelText("Agent");
+    const classes = trigger.className.split(" ");
+    // line-clamp cannot ellipsize a nowrap line: it clipped mid-glyph under the chevron.
+    expect(trigger.className).not.toContain("line-clamp");
+    expect(classes).toContain("[&>span]:truncate");
+    expect(classes).toContain("[&>span]:min-w-0");
+    expect(classes).toContain("gap-2");
+    // The rule targets the value span, which Radix renders as the trigger's direct child.
+    expect(trigger.querySelector(":scope > span")?.textContent).toBe(value);
+  });
+});

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

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from "vitest"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { SegmentedControl, type SegmentedControlOption } from "./segmented-control"
@@ -346,3 +346,90 @@ describe("SegmentedControl test ids", () => {
     expect(screen.getByTestId("workbench-tab-code")).toHaveAttribute("aria-checked", "true")
   })
 })
+
+describe("SegmentedControl tabs on a narrow strip", () => {
+  // jsdom has no layout. Model a 250px strip holding six 100px tabs, so the
+  // strip scrolls and some tabs sit past its edges.
+  const STRIP = 250
+  const TAB = 100
+  const scroll = new WeakMap<Element, number>()
+  const overrides: Array<[object, string, PropertyDescriptor | undefined]> = []
+  const define = (proto: object, key: string, descriptor: PropertyDescriptor) => {
+    overrides.push([proto, key, Object.getOwnPropertyDescriptor(proto, key)])
+    Object.defineProperty(proto, key, { configurable: true, ...descriptor })
+  }
+  const isStrip = (el: Element) => el.getAttribute("role") === "radiogroup"
+  const index = (el: Element) => Array.from(el.parentElement?.children ?? []).indexOf(el)
+
+  beforeEach(() => {
+    define(HTMLElement.prototype, "offsetLeft", { get(this: HTMLElement) { return isStrip(this) ? 0 : index(this) * TAB } })
+    define(HTMLElement.prototype, "offsetWidth", { get(this: HTMLElement) { return isStrip(this) ? STRIP : TAB } })
+    define(Element.prototype, "clientWidth", { get(this: Element) { return isStrip(this) ? STRIP : TAB } })
+    define(Element.prototype, "scrollWidth", { get(this: Element) { return isStrip(this) ? this.children.length * TAB : TAB } })
+    define(Element.prototype, "scrollLeft", {
+      get(this: Element) { return scroll.get(this) ?? 0 },
+      set(this: Element, v: number) { scroll.set(this, v) },
+    })
+  })
+  afterEach(() => {
+    for (const [proto, key, original] of overrides.reverse()) {
+      if (original) Object.defineProperty(proto, key, original)
+      else delete (proto as Record<string, unknown>)[key]
+    }
+    overrides.length = 0
+  })
+
+  const work: SegmentedControlOption[] = ["Today", "Messages", "Tasks", "Operations", "Payments", "People"].map(
+    (label) => ({ value: label.toLowerCase(), label }),
+  )
+
+  it("scrolls the strip, not the page, so the selected tab is in view", () => {
+    const { rerender } = render(
+      <SegmentedControl aria-label="Work" variant="tabs" value="payments" onValueChange={vi.fn()} options={work} />,
+    )
+    const strip = screen.getByRole("radiogroup")
+    // Payments spans 400-500px: its right edge plus the 24px fade fits the 250px view.
+    expect(strip.scrollLeft).toBe(500 - STRIP + 24)
+
+    rerender(<SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />)
+    expect(strip.scrollLeft).toBe(0)
+  })
+
+  it("fades the edge that has more tabs past it", () => {
+    const { rerender } = render(
+      <SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />,
+    )
+    const strip = screen.getByRole("radiogroup")
+    expect(strip).toHaveAttribute("data-overflow-end", "true")
+    expect(strip).not.toHaveAttribute("data-overflow-start")
+    expect(strip.className).toContain("data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]")
+
+    rerender(<SegmentedControl aria-label="Work" variant="tabs" value="people" onValueChange={vi.fn()} options={work} />)
+    expect(strip).toHaveAttribute("data-overflow-start", "true")
+    expect(strip).not.toHaveAttribute("data-overflow-end")
+  })
+
+  it("leaves a strip that fits unmasked", () => {
+    render(<SegmentedControl aria-label="Work" variant="tabs" value="all" onValueChange={vi.fn()} options={options.slice(0, 2)} />)
+    const strip = screen.getByRole("radiogroup")
+    expect(strip).not.toHaveAttribute("data-overflow-start")
+    expect(strip).not.toHaveAttribute("data-overflow-end")
+  })
+})
+
+describe("SegmentedControl stable labels and touch targets", () => {
+  it.each(["row", "tabs"] as const)("keeps one label weight whichever %s option is selected", (variant) => {
+    render(<SegmentedControl aria-label="Scope" variant={variant} value="personal" onValueChange={vi.fn()} options={options} />)
+    for (const radio of screen.getAllByRole("radio")) {
+      expect(radio.className).toContain("font-medium")
+      expect(radio.className).not.toMatch(/font-(semibold|bold)/)
+    }
+  })
+
+  it("gives each tab a 44px hit height on a coarse pointer", () => {
+    render(<SegmentedControl aria-label="Scope" variant="tabs" value="all" onValueChange={vi.fn()} options={options} />)
+    for (const radio of screen.getAllByRole("radio")) {
+      expect(radio.className).toContain("pointer-coarse:min-h-11")
+    }
+  })
+})

package/src/primitives/segmented-control.tsx

@@ -3,6 +3,7 @@
 declare const process: { env: { NODE_ENV?: string } } | undefined
 
 import * as React from "react"
+import { touchTarget } from "../lib/control-presentation"
 import { focusRing, focusRingInset } from "../lib/focus"
 import { cn } from "../lib/utils"
 
@@ -23,6 +24,12 @@ import { cn } from "../lib/utils"
  *     that darken on hover. This keeps the selected segment as the
  *     single visual anchor instead of the whole group competing with
  *     itself.
+ *   - Every label keeps one weight. Selection is colour plus surface or
+ *     underline, so changing the value never reflows the row.
+ *
+ * The tabs variant scrolls sideways when its options outgrow the row: the
+ * selected tab is kept in view, and a faded edge shows that more tabs sit
+ * past it.
  */
 export interface SegmentedControlOption<T extends string = string> {
   value: T
@@ -49,6 +56,15 @@ export interface SegmentedControlProps<T extends string = string>
   "data-testid"?: string
 }
 
+/** Width of the faded edge that marks more tabs past the strip, in px. */
+const TAB_EDGE_FADE = 24
+// Fade whichever edge has tabs past it; the two-attribute rule wins on specificity.
+const tabEdgeFade = [
+  "data-[overflow-start]:[mask-image:linear-gradient(to_right,transparent,#000_24px)]",
+  "data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]",
+  "data-[overflow-start]:data-[overflow-end]:[mask-image:linear-gradient(to_right,transparent,#000_24px,#000_calc(100%-24px),transparent)]",
+]
+
 export function SegmentedControl<T extends string = string>({
   value,
   onValueChange,
@@ -69,6 +85,44 @@ export function SegmentedControl<T extends string = string>({
   }
 
   const optionRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map())
+  const stripRef = React.useRef<HTMLDivElement>(null)
+  const [overflow, setOverflow] = React.useState({ start: false, end: false })
+  const tabs = variant === "tabs"
+
+  const measureOverflow = React.useCallback(() => {
+    const strip = stripRef.current
+    if (!strip) return
+    const start = strip.scrollLeft > 1
+    const end = strip.scrollLeft + strip.clientWidth < strip.scrollWidth - 1
+    setOverflow((prev) => (prev.start === start && prev.end === end ? prev : { start, end }))
+  }, [])
+
+  // Keep the selected tab inside the strip. Only the strip scrolls: the page
+  // never moves, which scrollIntoView cannot promise.
+  React.useLayoutEffect(() => {
+    if (!tabs) return
+    const strip = stripRef.current
+    const option = optionRefs.current.get(value)
+    if (strip && option) {
+      const start = option.offsetLeft
+      const end = start + option.offsetWidth
+      if (start < strip.scrollLeft + TAB_EDGE_FADE) {
+        strip.scrollLeft = Math.max(0, start - TAB_EDGE_FADE)
+      } else if (end > strip.scrollLeft + strip.clientWidth - TAB_EDGE_FADE) {
+        strip.scrollLeft = end - strip.clientWidth + TAB_EDGE_FADE
+      }
+    }
+    measureOverflow()
+  }, [tabs, value, options.length, measureOverflow])
+
+  React.useEffect(() => {
+    if (!tabs || typeof ResizeObserver === "undefined") return
+    const strip = stripRef.current
+    if (!strip) return
+    const observer = new ResizeObserver(measureOverflow)
+    observer.observe(strip)
+    return () => observer.disconnect()
+  }, [tabs, measureOverflow])
 
   const hasMatch = options.some((o) => o.value === value)
 
@@ -98,13 +152,17 @@ export function SegmentedControl<T extends string = string>({
       aria-label={rest["aria-label"]}
       aria-labelledby={rest["aria-labelledby"]}
       data-testid={rest["data-testid"]}
+      data-overflow-start={overflow.start || undefined}
+      data-overflow-end={overflow.end || undefined}
+      ref={stripRef}
       onKeyDown={handleKeyDown}
+      onScroll={tabs ? measureOverflow : undefined}
       className={cn(
         "flex gap-1",
         variant === "row" &&
           "flex-wrap items-center rounded-lg border border-border bg-card p-1",
         variant === "tabs" &&
-          "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
+          ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade],
         className,
       )}
     >
@@ -127,17 +185,17 @@ export function SegmentedControl<T extends string = string>({
               if (!active) onValueChange(option.value)
             }}
             className={cn(
-              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-[color,background-color,border-color,box-shadow]",
+              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]",
               variant === "row" && ["rounded-md px-3 py-1.5", focusRing],
               // The strip scrolls horizontally, which would clip an outer ring.
-              variant === "tabs" && ["rounded-none border-b-2 -mb-px px-4 py-2", focusRingInset],
+              variant === "tabs" && ["shrink-0 rounded-none border-b-2 -mb-px px-4 py-2", touchTarget, focusRingInset],
               // Active styling is the ONLY styled state — unselected
               // segments stay transparent on purpose so they don't
               // compete visually with the selection.
               active
                 ? variant === "row"
-                  ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold"
-                  : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold"
+                  ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)]"
+                  : "border-[var(--accent-text)] text-[var(--accent-text)]"
                 : variant === "row"
                   ? "border border-transparent text-muted-foreground hover:text-foreground"
                   : "border-transparent text-muted-foreground hover:text-foreground",

package/src/primitives/select.stories.tsx

@@ -162,3 +162,18 @@ export const Overview: Story = {
     </div>
   ),
 }
+
+/** A value longer than its trigger ends in an ellipsis before the chevron. */
+export const LongValue: Story = {
+  render: () => (
+    <Select defaultValue="concierge">
+      <SelectTrigger className="w-48">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="concierge">Luna — ReCenter Guest Concierge</SelectItem>
+        <SelectItem value="practitioner">Luna — ReCenter Wellness &amp; Practitioner Desk</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}

package/src/primitives/select.tsx

@@ -22,10 +22,12 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex w-full items-center justify-between whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50",
       fieldPresentation,
       fieldTouchText,
-      "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left",
+      // A long value ends in an ellipsis before the chevron: line-clamp cannot
+      // ellipsize a nowrap line, so it clipped mid-glyph under the icon.
+      "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:truncate [&>span]:text-left",
       // The designed open state: accent border and surface while the menu is up.
       "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
       size === "compact" || size === "touch" ? cn(fieldSizes.md, controlSizes[size]) : fieldSizes[size === "default" ? "md" : size],