@deepseek-ai/dsh-client-ui-primitives 0.1.7-alpha.1 → 0.1.7-alpha.2

package/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-primitives/README.md
-README.md: df8c96e9fa4572b6371f8406ecd385b1eb80078e
-README.zh.md: ef3cdeb70bbb7619f9e95bd24b5a1b97e9c159da
+README.md: 332845471056e718d49d79a077b76a02c79bafe2
+README.zh.md: 598b561e79e4a935f7f033002e68b91c3a3d84de

package/README.md

@@ -77,17 +77,21 @@ Writing your own component in your own package is fine when the need is genuinel
 
 ### Controls and icons
 
-The catalog above lists what each export is for; this section covers the behavior that props alone do not show. Product icon names omit artboard sizes and end in `Regular` for the supplied one-pixel artwork or `Medium` for the same geometry at a 1.3px stroke; the `size` prop controls rendered dimensions ([decision](../../../.agents/notes/implemented/architecture/2026-09-16-size-neutral-product-icon-weights.md)). Each product, reference, link, and permission glyph intentionally keeps both weight exports even when the current product uses only one, so callers can choose emphasis without adding another API later; fill-only pairs render identically. `IconWarningOutlineRegular`/`Medium` use a circle; `IconWarningTriangleOutlineRegular`/`Medium` use a rounded triangle. `FishLogo` and `BrandWordmark` fill brand slots. `FileTypeIcon` renders the traditional 28px spreadsheet, folder, HTML, image, Markdown, generic, PDF, PPT, video, and Word glyphs, and uses the imported square technology artwork for the established 48 code and configuration categories. The import replaces artwork only: archive-only categories do not extend `CodeFileType`. `classifyFileType` applies exact filename, prefix, suffix, optional project-context, and extension rules in that order; React names win over TypeScript/JavaScript, Angular suffixes win over their base extension, and a Dart file becomes Flutter only when the supplied project files contain a `pubspec.yaml` with `flutter:`. Markdown and SVG remain traditional Markdown and image files. Spreadsheet mappings include CSV, TSV, Excel workbooks and templates, OpenDocument spreadsheets, and Numbers; KEY maps to slides, while RTF/ODT/Pages map to documents. `fileExtension` exposes the same basename and final-dot parsing for adjacent metadata labels. Traditional glyphs use a solid category-colored sheet with a white mark and translucent white corner; the generic file uses a grey sheet and darker grey corner. Callers may override the sheet color through `--dsh-file-type-icon-color`. The full-color technology artwork is the deliberate exception and retains its embedded palette. All glyphs are decorative and carry no label. `LinkIconMedium` is the leading glyph for clickable artifact links — globe, folder, code, image, document, or plain paper, and for a `url` link the mark of a well-known site named by its `href` — the developer sites a transcript usually cites (GitHub, GitLab, npm, PyPI, Stack Overflow, MDN, Wikipedia, Hacker News, YouTube, X, Bilibili, Zhihu, Juejin, CSDN) and mainstream search, video, social, shopping, and reference sites (Google, Baidu, DuckDuckGo, TikTok, Netflix, Spotify, Facebook, Instagram, Reddit, Telegram, WhatsApp, WeChat, QQ, Weibo, Taobao, AliExpress, eBay, Quora, V2EX, Apple) — while `classifyLinkPath` folds the shared file types into that existing six-category vocabulary. `ConnectionIndicator` renders a warning-colored disconnected action whose permanent retry glyph marks the retry action beside the owner-supplied outage label, the shared ongoing loader beside a label whose one-to-three dots advance every 500ms independently of retry timing, or a success-colored recovered status. Clicking either warning state requests an immediate reconnect; no hover interaction changes the copy. The pill fades in on appearance, fades out for 150ms before unmounting, and sizes to its current label. Its owner supplies visibility, the recovery hold, localized labels, and the immediate-reconnect callback; the primitive uses no native title tooltip. `useAnchoredPosition` and `useAnchoredMaxHeight` keep floating panels and bottom-anchored overlays clamped to the viewport and following their anchor; `useAnchoredMaxHeight` and portalled `Menu` widen their 12px top viewport margin to the frame's published `--dsh-frame-top-clearance`. `HoverCard` keeps its portaled preview reachable across the anchor gap and can expose a copy button through the `copyText` prop. Its `preview` variant uses the anchor or `widthAnchorRef` element’s width minus 48px, centers the panel with 24px side insets, and places it above or below the row within the viewport. The panel keeps the frame’s top clearance, caps its height at 420px, and follows content and anchor resizing; Escape or pointer and keyboard activation of the anchor dismisses it. The whole preview fades in and out over 100ms; a closing preview stops receiving pointer input and unmounts after the fade. Re-entering the anchor during the fade restores it. Reduced-motion preferences suppress the transition. Copy labels are required only when copying is enabled. `Toast` uses the owner's `holdMs` for both the fade delay and its hold-and-fade lifetime. Rerenders with unchanged `holdMs` do not restart that lifetime; completion uses the latest callback, and fully faded actions cannot receive input. A new component key restarts the banner. `rankByName` is the `/` menu's shared candidate ranker for the command and skill sources: the query must be a case-insensitive ordered subsequence of the name; prefix hits rank first, then alignment score, then source order. `Menu.autoFocus` focuses its first enabled item, supports Arrow Up/Down and Home/End navigation, and focuses the first button in the anchor on Escape; it is opt-in for action menus.
+The catalog above lists what each export is for; this section covers the behavior that props alone do not show. Product icon names omit artboard sizes and end in `Regular` for the supplied one-pixel artwork or `Medium` for the same geometry at a 1.3px stroke; the `size` prop controls rendered dimensions ([decision](../../../.agents/notes/implemented/architecture/2026-09-16-size-neutral-product-icon-weights.md)). Each product, reference, link, and permission glyph intentionally keeps both weight exports even when the current product uses only one, so callers can choose emphasis without adding another API later; fill-only pairs render identically. `IconWarningOutlineRegular`/`Medium` use a circle; `IconWarningTriangleOutlineRegular`/`Medium` use a rounded triangle. `FishLogo` and `BrandWordmark` fill brand slots. `FileTypeIcon` renders the traditional 28px spreadsheet, folder, HTML, image, Markdown, generic, PDF, PPT, video, and Word glyphs, and uses the imported square technology artwork for the established 48 code and configuration categories. The import replaces artwork only: archive-only categories do not extend `CodeFileType`. `classifyFileType` applies exact filename, prefix, suffix, optional project-context, and extension rules in that order; React names win over TypeScript/JavaScript, Angular suffixes win over their base extension, and a Dart file becomes Flutter only when the supplied project files contain a `pubspec.yaml` with `flutter:`. Markdown and SVG remain traditional Markdown and image files. Spreadsheet mappings include CSV, TSV, Excel workbooks and templates, OpenDocument spreadsheets, and Numbers; KEY maps to slides, while RTF/ODT/Pages map to documents. `fileExtension` exposes the same basename and final-dot parsing for adjacent metadata labels. Traditional glyphs use a solid category-colored sheet with a white mark and translucent white corner; the generic file uses a grey sheet and darker grey corner. Callers may override the sheet color through `--dsh-file-type-icon-color`. The full-color technology artwork is the deliberate exception and retains its embedded palette. All glyphs are decorative and carry no label. `LinkIconMedium` is the leading glyph for clickable artifact links — globe, folder, code, image, document, or plain paper, and for a `url` link the mark of a well-known site named by its `href` — the developer sites a transcript usually cites (GitHub, GitLab, npm, PyPI, Stack Overflow, MDN, Wikipedia, Hacker News, YouTube, X, Bilibili, Zhihu, Juejin, CSDN) and mainstream search, video, social, shopping, and reference sites (Google, Baidu, DuckDuckGo, TikTok, Netflix, Spotify, Facebook, Instagram, Reddit, Telegram, WhatsApp, WeChat, QQ, Weibo, Taobao, AliExpress, eBay, Quora, V2EX, Apple) — while `classifyLinkPath` folds the shared file types into that existing six-category vocabulary. `ConnectionIndicator` renders a warning-colored disconnected action whose permanent retry glyph marks the retry action beside the owner-supplied outage label, the shared ongoing loader beside a label whose one-to-three dots advance every 500ms independently of retry timing, or a success-colored recovered status. Clicking either warning state requests an immediate reconnect; no hover interaction changes the copy. The pill fades in on appearance, fades out for 150ms before unmounting, and sizes to its current label. Its owner supplies visibility, the recovery hold, localized labels, and the immediate-reconnect callback; the primitive uses no native title tooltip. `useAnchoredPosition` and `useAnchoredMaxHeight` keep floating panels and bottom-anchored overlays clamped to the viewport and following their anchor; `useAnchoredMaxHeight` and portalled `Menu` widen their 12px top viewport margin to the frame's published `--dsh-frame-top-clearance`. `HoverCard` keeps its portaled preview reachable across the anchor gap and can expose a copy button through the `copyText` prop. Its `preview` variant uses the anchor or `widthAnchorRef` element’s width minus 48px, centers the panel with 24px side insets, and places it above or below the row within the viewport. The panel keeps the frame’s top clearance, caps its height at 420px, and follows content and anchor resizing; Escape or pointer and keyboard activation of the anchor dismisses it. The whole preview fades in and out over 100ms; a closing preview stops receiving pointer input and unmounts after the fade. Re-entering the anchor during the fade restores it. Reduced-motion preferences suppress the transition. Copy labels are required only when copying is enabled. `Toast` uses the owner's `holdMs` for both the fade delay and its hold-and-fade lifetime. Rerenders with unchanged `holdMs` do not restart that lifetime; completion uses the latest callback, and fully faded actions cannot receive input. A new component key restarts the banner. `rankByName` is the `/` menu's shared candidate ranker for the command and skill sources: the query must be a case-insensitive ordered subsequence of the name; prefix hits rank first, then alignment score, then source order. Portalled `Menu` lists follow their anchor during dragging and CSS transforms, and stop tracking when closed. `Menu.autoFocus` focuses its first enabled item, supports Arrow Up/Down and Home/End navigation, and focuses the first button in the anchor on Escape; it is opt-in for action menus.
+
+`Tooltip` reads the anchor on hover or keyboard focus and fits its bubble from `ResizeObserver` border-box sizes. The bubble stays hidden until its first fit, slides inside the horizontal viewport margin, and flips above or below only when the opposite side fits. Label-size and viewport changes reuse the anchor coordinates; fitting does not synchronously measure the bubble or trigger a React render.
 
 ### Rendering agent output
 
 The nearest `MarkdownDelegateProvider` supplies optional `openExternalLink` and `openFile` navigation callbacks. Nested providers replace the enclosing capabilities, and callback changes reach already-rendered links without rebuilding Markdown. Its `openFile` makes local Markdown links clickable after settlement. Absolute and workspace-relative paths support percent escapes and `#L24` / `#L24-L30` fragments; ranges open at their first line. Literal `?` and `#` in filenames must be percent-encoded. The tooltip uses the decoded path and supplies the accessible name when the label is empty. The callback receives the decoded path and optional line, while the renderer preserves the label and displays a file icon. Without a callback, local links remain text. URL schemes, queries, unsupported fragments, and malformed destinations never reach the file opener.
 
-`MarkdownText` renders untrusted GFM and TeX math, blocks unsafe links and images, and can turn resolved file mentions into explicit controls. A surrounding `MarkdownDelegateProvider` receives sanitized HTTP(S) URLs from ordinary clicks; modified clicks and links outside a provider retain native external-anchor behavior. When the owner passes a `pathImages` vocabulary, image destinations that are local media paths rewrite to displayable URLs on settled renders only (the same streaming gate as file mentions); without a vocabulary, local destinations remain inert alt text. A load or decode failure replaces the image with its authored alt text, or the original destination when alt is empty. Changing the image source permits a fresh load. While a reply streams, it freezes completed blocks, advances a top-level open fence by completed lines, and highlights that fence from saved Shiki grammar state. Completed token lines enter fixed-size React groups, so later chunks reconcile only the growing group; an unchanged fence retains that DOM when the final full parse resolves cross-document syntax. `TerminalBlock`, `ReadBlock`, `DiffBlock`, `SearchBlock`, and `WebBlock` render the matching tool-result intent with copy controls, overflow handling, and ANSI processing where applicable. `JsonTree` and `JsonBlock` inspect JSON values read-only, while `projectUserText` projects sent user text into inline plain runs and reference chips for the message bubble and queue rows. When supplied with `UserTextReferences`, file and skill references become keyboard-accessible preview buttons using the same hover and focus styling as prose file links; the first pointer click can open a preview, while subsequent clicks and existing text selections retain native selection handling. Keyboard activation opens previews even when text is selected.
+`MarkdownText` renders untrusted GFM and TeX math, blocks unsafe links and images, and can turn resolved file mentions into explicit controls. A surrounding `MarkdownDelegateProvider` receives sanitized HTTP(S) URLs from ordinary clicks; modified clicks and links outside a provider retain native external-anchor behavior. When the owner passes a `pathImages` vocabulary, image destinations that are local media paths rewrite to displayable URLs on settled renders only (the same streaming gate as file mentions); without a vocabulary, local destinations remain inert alt text. A load or decode failure replaces the image with its authored alt text, or the original destination when alt is empty. Changing the image source permits a fresh load. While a reply streams, it freezes completed blocks, advances a top-level open fence by completed lines, and highlights that fence from saved Shiki grammar state. Completed token lines enter fixed-size React groups, so later chunks reconcile only the growing group; an unchanged fence retains that DOM when the final full parse resolves cross-document syntax. `TerminalBlock`, `ReadBlock`, `DiffBlock`, `SearchBlock`, and `WebBlock` render the matching tool-result intent with copy controls, overflow handling, and ANSI processing where applicable. `JsonTree` and `JsonBlock` inspect JSON values read-only, while `projectUserText` projects sent user text into inline plain runs and reference chips for the message bubble and queue rows. Reference labels inherit the consumer’s wrapping policy: long names wrap within a bubble, while queue previews retain their single-line layout. When supplied with `UserTextReferences`, file and skill references become keyboard-accessible preview buttons using the same hover and focus styling as prose file links; the first pointer click can open a preview, while subsequent clicks and existing text selections retain native selection handling. Keyboard activation opens previews even when text is selected.
 
 `MarkdownText` defaults to `variant="body"`. Use `variant="compact"` for secondary content: its 13px text and 20px line height follow the content-size setting, all heading levels use the same size with weight 600, and paragraphs and lists use tighter spacing. Text, links, and code keep the tertiary color; dotted underlines distinguish links. Code headers scroll with their blocks. Tables and math stay enabled at the surrounding text size and scroll horizontally within the available width. Both variants share the parser and streaming cache.
 
-`DiffBlock` compares the old and new content by line. It shows actual additions and deletions with up to three neutral context lines on each side, separates distant changes with `⋯`, and excludes shared context from both summary and footer totals. Search stops beyond 256 line additions/deletions per fragment; those fragments display and count the complete old and new contents as a coarse replacement, including shared lines. Copy includes the full displayed diff with its prefixes. A final newline is treated as a terminator; differences only in the presence of a final newline are not displayed.
+`CodeBlock.toolbarLabels` enables the shared code-card header and spacing. `ReadBlock` and `DiffBlock` use the same header: tertiary-colored language and filename text, secondary-colored copy and wrap icons, and hover or keyboard-focus tooltips. Missing or unsupported languages use the owner’s localized code-block title; mixed-language diffs use that title too. Code cards share typography and content insets; their headers and bodies use the same background in both themes. Read gutters fit the largest returned line number, and diff fills cover the full scrollable row. The wrap toggle keeps a fixed accessible name and exposes its state through `aria-pressed`; its tooltip describes the next action. Wrapping is local to each mounted card and never changes copied text; code fences start wrapped, while reads and diffs preserve source columns until wrapping is enabled. Compact Markdown shares this toolbar, spacing, and code typography while retaining monochrome text. With `toolbarLabels`, source previews can pass `wrap` to follow their owner’s preference and show only the language and copy icon; owner CSS retains the source layout.
+
+`DiffBlock` compares the old and new content by line. It shows actual additions and deletions with up to three neutral context lines on each side, separates distant changes with `⋯`, and excludes shared context from tool-summary totals. The card ends after the diff body. Search stops beyond 256 line additions/deletions per fragment; those fragments display and count the complete old and new contents as a coarse replacement, including shared lines. Copy includes the full displayed diff with its prefixes. A final newline is treated as a terminator; differences only in the presence of a final newline are not displayed.
 
 `JsonTree` clamps collapsed strings to `collapsedStringLines` (three by default). Expanded strings show raw text, retain sibling commas, and fit within the window and outer scrolling containers. Resize and ancestor-scroll events update that limit. Row copy feedback updates independently of JSON value rendering; pending clipboard writes cannot update a different row or an unmounted tree.
 

package/README.zh.md

@@ -77,17 +77,21 @@ kind: "package-library"
 
 ### 控件与图标
 
-上面的目录说明每个导出的用途；本节讲 props 本身看不出来的行为。产品图标名称不含画板尺寸，以 `Regular` 表示原始 1px 图形，以 `Medium` 表示同一几何的 1.3px 描边；`size` prop 控制渲染尺寸（[决定](../../../.agents/notes/implemented/architecture/2026-09-16-size-neutral-product-icon-weights.zh.md)）。每个产品、引用、链接与权限图形都会有意保留两种线重导出，即使当前产品只使用其中一种，也让调用方无需再次扩展 API 就能选择强调程度；仅填充的成对图形外观相同。`IconWarningOutlineRegular`/`Medium` 使用圆形；`IconWarningTriangleOutlineRegular`/`Medium` 使用圆角三角形。`FishLogo` 与 `BrandWordmark` 填充品牌 slot。`FileTypeIcon` 渲染传统的 28px spreadsheet、folder、HTML、image、Markdown、generic、PDF、PPT、video 与 Word 图形，并为现有 48 个代码和配置类别使用导入的方形技术图形。该导入只替换图形：资源包中额外的类别不会扩展 `CodeFileType`。`classifyFileType` 按完整文件名、前缀、后缀、可选项目上下文、扩展名的顺序匹配；React 文件名优先于 TypeScript/JavaScript，Angular 后缀优先于基础扩展名，只有传入的项目文件包含带 `flutter:` 的 `pubspec.yaml` 时 Dart 文件才使用 Flutter。Markdown 与 SVG 仍分别使用传统 Markdown 与图片图形。表格映射包括 CSV、TSV、Excel 工作簿与模板、OpenDocument 表格和 Numbers；KEY 映射为幻灯片，RTF/ODT/Pages 映射为文档。`fileExtension` 为相邻元数据 label 暴露同一套 basename 与最终点号解析。传统图形使用实色分类底板、白色标记和半透明白色折角；通用文件使用灰色底板与较深灰色折角。调用方可通过 `--dsh-file-type-icon-color` 覆盖底板颜色。全彩技术图形是明确例外，会保留其内嵌调色板。所有图形都是装饰性的，不自带 label。`LinkIconMedium` 是可点击产物链接的前置图形——地球、文件夹、代码、图片、文档或纸张，`url` 链接的 `href` 指向已知站点时则改用该站点自己的标记——转写内容常引用的开发者站点（GitHub、GitLab、npm、PyPI、Stack Overflow、MDN、Wikipedia、Hacker News、YouTube、X、Bilibili、知乎、掘金、CSDN），以及主流搜索、视频、社交、购物与参考资料站点（Google、百度、DuckDuckGo、TikTok、Netflix、Spotify、Facebook、Instagram、Reddit、Telegram、WhatsApp、微信、QQ、微博、淘宝、速卖通、eBay、Quora、V2EX、Apple）——`classifyLinkPath` 把共享文件类型折叠进原有六类词汇。`ConnectionIndicator` 可渲染警告色的断联操作（常驻重试图形指明重试动作，断联文案由持有方提供）、共享 ongoing loading 加一至三个点以独立于 retry 时序的 500ms 节奏推进的连接中状态，或成功色的恢复状态。点击任一警告状态都会请求立即重连；没有任何悬停交互会改变文案。药丸出现时淡入、卸载前淡出 150ms，宽度随当前 label 自适应。它的持有方提供可见性、恢复驻留时间、本地化 label 与立即重连回调；该原语不使用原生 title tooltip。`useAnchoredPosition` 与 `useAnchoredMaxHeight` 让浮动面板与底部锚定浮层始终钳制在视口内并跟随锚点；`useAnchoredMaxHeight` 与 portal 模式的 `Menu` 会把 12px 的视口顶部边距加宽到框架发布的 `--dsh-frame-top-clearance`。`HoverCard` 通过指针离开宽限期让采用 portal 的预览在跨过锚点间隙时仍可触及，并可通过 `copyText` prop 提供复制按钮。其 `preview` 变体使用 anchor 或 `widthAnchorRef` 元素的宽度减去 48px，左右各内缩 24px，并在视口内放置于行的上方或下方。浮层避开框架顶部保留区，高度最多 420px，会跟随内容及 anchor 尺寸变化；Escape 或通过鼠标和键盘激活锚点可将其关闭。整个浮层的淡入和淡出各持续 100ms；关闭中的浮层停止接收指针输入，淡出后卸载。在淡出期间移回锚点可恢复显示。减少动态效果偏好会禁用过渡动画。只有启用复制时才必须提供复制标签。`Toast` 使用调用方的 `holdMs` 同时控制淡出延迟与停留加淡出的总时长。`holdMs` 未变时，父组件重渲染不会重启该生命周期；完成时调用最新回调，完全淡出的操作不能接收输入。新的组件 key 会重新开始横幅周期。`rankByName` 是 `/` 菜单命令源与 skill（技能）源共享的候选排序器：查询必须是名字的不区分大小写的有序子序列；前缀命中排最前，其次按对齐分数，再按来源顺序。 `Menu.autoFocus` 聚焦首个启用项，支持上下方向键与 Home/End 导航，并在 Escape 时聚焦 anchor 内的第一个按钮；操作菜单可显式启用。
+上面的目录说明每个导出的用途；本节讲 props 本身看不出来的行为。产品图标名称不含画板尺寸，以 `Regular` 表示原始 1px 图形，以 `Medium` 表示同一几何的 1.3px 描边；`size` prop 控制渲染尺寸（[决定](../../../.agents/notes/implemented/architecture/2026-09-16-size-neutral-product-icon-weights.zh.md)）。每个产品、引用、链接与权限图形都会有意保留两种线重导出，即使当前产品只使用其中一种，也让调用方无需再次扩展 API 就能选择强调程度；仅填充的成对图形外观相同。`IconWarningOutlineRegular`/`Medium` 使用圆形；`IconWarningTriangleOutlineRegular`/`Medium` 使用圆角三角形。`FishLogo` 与 `BrandWordmark` 填充品牌 slot。`FileTypeIcon` 渲染传统的 28px spreadsheet、folder、HTML、image、Markdown、generic、PDF、PPT、video 与 Word 图形，并为现有 48 个代码和配置类别使用导入的方形技术图形。该导入只替换图形：资源包中额外的类别不会扩展 `CodeFileType`。`classifyFileType` 按完整文件名、前缀、后缀、可选项目上下文、扩展名的顺序匹配；React 文件名优先于 TypeScript/JavaScript，Angular 后缀优先于基础扩展名，只有传入的项目文件包含带 `flutter:` 的 `pubspec.yaml` 时 Dart 文件才使用 Flutter。Markdown 与 SVG 仍分别使用传统 Markdown 与图片图形。表格映射包括 CSV、TSV、Excel 工作簿与模板、OpenDocument 表格和 Numbers；KEY 映射为幻灯片，RTF/ODT/Pages 映射为文档。`fileExtension` 为相邻元数据 label 暴露同一套 basename 与最终点号解析。传统图形使用实色分类底板、白色标记和半透明白色折角；通用文件使用灰色底板与较深灰色折角。调用方可通过 `--dsh-file-type-icon-color` 覆盖底板颜色。全彩技术图形是明确例外，会保留其内嵌调色板。所有图形都是装饰性的，不自带 label。`LinkIconMedium` 是可点击产物链接的前置图形——地球、文件夹、代码、图片、文档或纸张，`url` 链接的 `href` 指向已知站点时则改用该站点自己的标记——转写内容常引用的开发者站点（GitHub、GitLab、npm、PyPI、Stack Overflow、MDN、Wikipedia、Hacker News、YouTube、X、Bilibili、知乎、掘金、CSDN），以及主流搜索、视频、社交、购物与参考资料站点（Google、百度、DuckDuckGo、TikTok、Netflix、Spotify、Facebook、Instagram、Reddit、Telegram、WhatsApp、微信、QQ、微博、淘宝、速卖通、eBay、Quora、V2EX、Apple）——`classifyLinkPath` 把共享文件类型折叠进原有六类词汇。`ConnectionIndicator` 可渲染警告色的断联操作（常驻重试图形指明重试动作，断联文案由持有方提供）、共享 ongoing loading 加一至三个点以独立于 retry 时序的 500ms 节奏推进的连接中状态，或成功色的恢复状态。点击任一警告状态都会请求立即重连；没有任何悬停交互会改变文案。药丸出现时淡入、卸载前淡出 150ms，宽度随当前 label 自适应。它的持有方提供可见性、恢复驻留时间、本地化 label 与立即重连回调；该原语不使用原生 title tooltip。`useAnchoredPosition` 与 `useAnchoredMaxHeight` 让浮动面板与底部锚定浮层始终钳制在视口内并跟随锚点；`useAnchoredMaxHeight` 与 portal 模式的 `Menu` 会把 12px 的视口顶部边距加宽到框架发布的 `--dsh-frame-top-clearance`。`HoverCard` 通过指针离开宽限期让采用 portal 的预览在跨过锚点间隙时仍可触及，并可通过 `copyText` prop 提供复制按钮。其 `preview` 变体使用 anchor 或 `widthAnchorRef` 元素的宽度减去 48px，左右各内缩 24px，并在视口内放置于行的上方或下方。浮层避开框架顶部保留区，高度最多 420px，会跟随内容及 anchor 尺寸变化；Escape 或通过鼠标和键盘激活锚点可将其关闭。整个浮层的淡入和淡出各持续 100ms；关闭中的浮层停止接收指针输入，淡出后卸载。在淡出期间移回锚点可恢复显示。减少动态效果偏好会禁用过渡动画。只有启用复制时才必须提供复制标签。`Toast` 使用调用方的 `holdMs` 同时控制淡出延迟与停留加淡出的总时长。`holdMs` 未变时，父组件重渲染不会重启该生命周期；完成时调用最新回调，完全淡出的操作不能接收输入。新的组件 key 会重新开始横幅周期。`rankByName` 是 `/` 菜单命令源与 skill（技能）源共享的候选排序器：查询必须是名字的不区分大小写的有序子序列；前缀命中排最前，其次按对齐分数，再按来源顺序。 portal 模式的 `Menu` 列表会在拖动和 CSS 变换期间跟随锚点，并在关闭时停止跟踪。`Menu.autoFocus` 聚焦首个启用项，支持上下方向键与 Home/End 导航，并在 Escape 时聚焦 anchor 内的第一个按钮；操作菜单可显式启用。
+
+`Tooltip` 在悬停或键盘聚焦时读取锚点位置，再根据 `ResizeObserver` 提供的边框盒尺寸调整气泡。首次定位前气泡保持隐藏；横向移入视口留白，仅在另一侧容得下时上下翻转。标签尺寸与视口变化复用锚点坐标；定位不会同步测量气泡，也不会触发 React 渲染。
 
 ### 渲染 agent 输出
 
 最近的 `MarkdownDelegateProvider` 提供可选的 `openExternalLink` 和 `openFile` 导航回调。嵌套 Provider 替换外层能力，回调变化无需重新构建 Markdown 即可到达已渲染链接。其 `openFile` 使本地 Markdown 链接在落定后可点击。绝对路径和工作区相对路径支持百分号转义以及 `#L24` / `#L24-L30` 片段；范围定位到起始行。文件名中的字面 `?` 和 `#` 必须百分号编码。悬停提示使用解码后的路径，并在标签为空时提供可访问名称。回调接收解码后的路径和可选行号，渲染器保留标签并显示文件图标。不传回调时，本地链接仍为文本。URL 协议、查询串、不支持的片段及格式错误的目标不会传给文件打开器。
 
-`MarkdownText` 渲染不可信的 GFM 与 TeX 公式、阻止不安全的链接与图片，并可把已解析的文件提及转换为显式控件。外层 `MarkdownDelegateProvider` 会接收普通点击产生的已净化 HTTP(S) URL；带修饰键的点击和 Provider 外的链接保留原生外部 anchor 行为。当 owner 传入 `pathImages` 词表时，本地媒体路径的图片目标只在落定渲染阶段重写为可展示 URL（与 file mentions 相同的流式门）；不传词表时本地目标保持惰性 alt 文本。加载或解码失败后，图片替换为作者的 alt 文本；alt 为空时显示原始目标路径。图片源变化后可重新加载。回复流式输出时，它冻结已完成的块、按已完成行推进顶层未闭合 fence，并从保存的 Shiki grammar state 为该 fence 增量高亮。已完成的 token 行进入固定大小的 React 分组，后续分片只 reconcile 正在增长的分组；最终全量解析解决跨文档语法时，未变化的 fence 会保留该 DOM。`TerminalBlock`、`ReadBlock`、`DiffBlock`、`SearchBlock` 与 `WebBlock` 把对应的工具结果意图渲染为带复制控件、溢出处理及适用时 ANSI 处理的卡片。`JsonTree` 与 `JsonBlock` 以只读方式检查 JSON 值；`projectUserText` 把已发送的用户文本投影为行内普通文本段与引用 chip，供消息气泡和排队行使用。 传入 `UserTextReferences` 时，文件和 skill 引用成为支持键盘操作的预览按钮，复用正文文件链接的悬停和聚焦样式；第一次指针点击可以打开预览，后续点击和已有选区保留原生选择行为。键盘激活在存在选区时仍可打开预览。
+`MarkdownText` 渲染不可信的 GFM 与 TeX 公式、阻止不安全的链接与图片，并可把已解析的文件提及转换为显式控件。外层 `MarkdownDelegateProvider` 会接收普通点击产生的已净化 HTTP(S) URL；带修饰键的点击和 Provider 外的链接保留原生外部 anchor 行为。当 owner 传入 `pathImages` 词表时，本地媒体路径的图片目标只在落定渲染阶段重写为可展示 URL（与 file mentions 相同的流式门）；不传词表时本地目标保持惰性 alt 文本。加载或解码失败后，图片替换为作者的 alt 文本；alt 为空时显示原始目标路径。图片源变化后可重新加载。回复流式输出时，它冻结已完成的块、按已完成行推进顶层未闭合 fence，并从保存的 Shiki grammar state 为该 fence 增量高亮。已完成的 token 行进入固定大小的 React 分组，后续分片只 reconcile 正在增长的分组；最终全量解析解决跨文档语法时，未变化的 fence 会保留该 DOM。`TerminalBlock`、`ReadBlock`、`DiffBlock`、`SearchBlock` 与 `WebBlock` 把对应的工具结果意图渲染为带复制控件、溢出处理及适用时 ANSI 处理的卡片。`JsonTree` 与 `JsonBlock` 以只读方式检查 JSON 值；`projectUserText` 把已发送的用户文本投影为行内普通文本段与引用 chip，供消息气泡和排队行使用。引用名称继承调用方的换行规则：长名称在气泡内换行，排队预览保持单行布局。传入 `UserTextReferences` 时，文件和 skill 引用成为支持键盘操作的预览按钮，复用正文文件链接的悬停和聚焦样式；第一次指针点击可以打开预览，后续点击和已有选区保留原生选择行为。键盘激活在存在选区时仍可打开预览。
 
 `MarkdownText` 默认为 `variant="body"`。次级内容使用 `variant="compact"`：其 13px 字号与 20px 行高跟随内容字号设置，各级标题保持同一字号并使用 600 字重，段落与列表采用更紧凑的间距。正文、链接和代码均保持 tertiary 颜色，以点状下划线区分链接。代码标题栏随代码块滚动。表格和公式仍然启用，使用周围文字的字号，并在可用宽度内横向滚动。两个变体共享解析器与流式缓存。
 
-`DiffBlock` 按行比较新旧内容。它显示实际增删行及两侧最多三行中性上下文，用 `⋯` 分隔远距离改动，摘要和底部统计都不计入共享上下文。若一个片段需要超过 256 次行新增或删除，则停止精确比较；该片段按完整新旧内容显示和统计为粗粒度替换，包含共享行。复制包含完整显示 diff 及其前缀。末尾换行视为行终止符；仅末尾换行不同不会显示为改动。
+`CodeBlock.toolbarLabels` 启用共享代码卡片的标题栏和间距。`ReadBlock` 与 `DiffBlock` 使用相同的标题栏：tertiary 色的语言名称与文件名、secondary 色的复制与换行图标，以及悬停或键盘聚焦时的提示。语言缺失或不受支持时显示调用方提供的本地化代码块标题；混合语言的 Diff 也使用该标题。代码卡片共用字体和内容内边距；在两种主题下，标题栏和正文都使用相同背景。读取卡片的行号栏容纳返回窗口中的最大行号，Diff 底色覆盖完整可滚动行。换行按钮保留固定的无障碍名称，以 `aria-pressed` 表达状态；提示文本说明下一步操作。换行设置仅属于当前挂载的卡片，不改变复制的文本；代码围栏默认换行，读取和差异卡片则在启用换行前保留源码列位置。紧凑 Markdown 共用此工具栏、间距和代码字体排版，同时保留单色文本。源码预览传入 `toolbarLabels` 后，可用 `wrap` 跟随所属视图的换行设置，仅显示语言和复制图标；所属视图的 CSS 保留源码布局。
+
+`DiffBlock` 按行比较新旧内容。它显示实际增删行及两侧最多三行中性上下文，用 `⋯` 分隔远距离改动，工具摘要的统计不计入共享上下文。卡片在差异正文后结束。若一个片段需要超过 256 次行新增或删除，则停止精确比较；该片段按完整新旧内容显示和统计为粗粒度替换，包含共享行。复制包含完整显示 diff 及其前缀。末尾换行视为行终止符；仅末尾换行不同不会显示为改动。
 
 `JsonTree` 把折叠字符串限制为 `collapsedStringLines` 行（默认三行）。展开后显示原始文本、保留同级逗号，并限制在窗口与外层滚动容器内；尺寸变化和祖先滚动事件会更新此限制。行复制反馈独立于 JSON 值渲染更新；尚未完成的剪贴板写入不会更新另一行或已卸载的树。
 

package/lib/CodeCard.module.css

@@ -0,0 +1,83 @@
+.card {
+  position: relative;
+  margin: 16px 0;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-markdown-code-block);
+  border-radius: 12px;
+  font: var(--dsw-font-markdown-code-block);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 18px 8px 22px;
+  background: var(--dsl-code-block-background, var(--dsw-alias-markdown-code-block));
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  color: var(--dsw-alias-label-secondary);
+  font: 11px/18px var(--dsw-font-family);
+}
+
+.heading {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-width: 0;
+}
+
+.language {
+  color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  font-family: var(--ds-font-family-code);
+}
+
+.title {
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+}
+
+.status {
+  margin-right: 8px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+.action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  color: var(--dsw-alias-label-secondary);
+  background: transparent;
+  cursor: pointer;
+}
+
+.action:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.action:focus-visible {
+  outline: 1px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+.body {
+  padding: 6px 22px 20px;
+  font: var(--dsw-font-markdown-code-block);
+  overflow-x: auto;
+}

package/lib/DiffBlock.module.css

@@ -1,79 +1,58 @@
 .block {
-  --dsl-diff-radius: 12px;
-  --dsl-diff-line-height: 22px;
-
-  position: relative;
-  margin: 16px 0;
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-markdown-code-block);
-  border-radius: var(--dsl-diff-radius);
-}
-
-/* The copy control floats in the top-right corner over the body, so the card
-   has no empty banner row above its first diff line (the TUI diff card has no
-   banner either — only the footer). The block is position: relative, so this
-   anchors to the card. */
-.copyButton {
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  z-index: 1;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  font: var(--dsw-font-xs-13);
+  overflow: hidden;
 }
 
 .body {
-  padding: 12px 14px;
+  display: grid;
+  grid-template-columns: minmax(max-content, 1fr);
+  padding: 6px 0 20px;
   font: var(--dsw-font-markdown-code-block);
   overflow-x: auto;
-  overflow-y: hidden;
 }
 
-/* No wrapping, no word-break: a diff is read by its indentation. */
 .line {
-  min-height: var(--dsl-diff-line-height);
+  box-sizing: border-box;
+  min-height: 1lh;
+  padding: 0 22px;
   white-space: pre;
 }
 
-/* A file header: the path in the primary tone, set apart by weight. The copy
-   button floats over this first row's top-right corner, so reserve space at the
-   line's end for it — a long path scrolls under the button otherwise, and the
-   button's hit area would eat clicks on the path's tail. */
+.block[data-code-wrap='true'] .body {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.block[data-code-wrap='true'] .line {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 .path {
-  color: var(--dsw-alias-label-primary);
-  font-weight: 600;
-  padding-right: 56px;
+  color: var(--dsw-alias-label-secondary);
+  font-weight: 500;
 }
 
-/* A same-file second hunk's separator (a scattered edit), in the dim tone. */
 .gap {
   color: var(--dsw-alias-label-tertiary);
 }
 
-/* The diff's own meaning-carrying colors: removed on the error token, added on
-   the success token. A `- `/`+ ` prefix is drawn here so a copied line and the
-   shown line agree, and so the sign reads without relying on color alone. */
 .del::before {
   content: '- ';
-  color: var(--dsw-alias-state-error-primary);
 }
 
 .del {
   color: var(--dsw-alias-state-error-primary);
+  background: var(--dsw-alias-code-diff-deleted);
+  box-shadow: inset 3px 0 0 var(--dsw-alias-state-error-primary);
 }
 
 .add::before {
   content: '+ ';
-  color: var(--dsw-alias-state-success-primary);
 }
 
 .add {
   color: var(--dsw-alias-state-success-primary);
+  background: var(--dsw-alias-code-diff-added);
+  box-shadow: inset 3px 0 0 var(--dsw-alias-state-success-primary);
 }
 
 .context {
@@ -87,9 +66,9 @@
 .expand {
   display: block;
   width: 100%;
-  padding: 0;
+  padding: 0 22px;
   border: none;
-  background-color: transparent;
+  background: transparent;
   color: var(--dsw-alias-label-tertiary);
   cursor: pointer;
   font: inherit;
@@ -99,11 +78,3 @@
 .expand:hover {
   color: var(--dsw-alias-label-secondary);
 }
-
-/* The change summary, dim under the body: `└ +A -R · N file(s)`, the same
-   footer the TUI transcript's diff card draws. */
-.footer {
-  padding: 0 14px 12px;
-  font: var(--dsw-font-markdown-code-block);
-  color: var(--dsw-alias-label-tertiary);
-}

package/lib/ReadBlock.module.css

@@ -1,105 +1,37 @@
-.block {
-  --dsl-read-radius: 12px;
-  --dsl-read-line-height: 22px;
-  /* Fixed-width gutter column for the line numbers, so the content edge stays
-     put down the whole window regardless of how wide the numbers grow. */
-  --dsl-read-gutter: 48px;
-
-  position: relative;
-  margin: 16px 0;
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-markdown-code-block);
-  border-radius: var(--dsl-read-radius);
-}
-
-.banner {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding: 9px 14px;
-  background: var(--dsw-alias-markdown-code-block-banner);
-  border-top-left-radius: var(--dsl-read-radius);
-  border-top-right-radius: var(--dsl-read-radius);
-}
-
-.label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--dsw-alias-label-primary);
-  font-family: var(--ds-font-family-code);
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.action {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  gap: 12px;
-}
-
-.count {
-  color: var(--dsw-alias-label-tertiary);
-  font: var(--dsw-font-xs-13);
-}
-
-.lang {
-  color: var(--dsw-alias-label-tertiary);
-  font-family: var(--ds-font-family-code);
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.copyButton {
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  font: var(--dsw-font-xs-13);
-}
-
-.body {
-  padding: 12px 0;
-  font: var(--dsw-font-markdown-code-block);
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-/* One row per file line: a fixed gutter column, then the content. No wrapping —
-   a source line's leading whitespace is meaningful and scrolls sideways. */
 .line {
   display: flex;
-  min-height: var(--dsl-read-line-height);
-  line-height: var(--dsl-read-line-height);
+  min-height: 1lh;
   white-space: pre;
 }
 
 .gutter {
   flex: none;
   width: var(--dsl-read-gutter);
-  padding-right: 14px;
+  margin-right: 12px;
   text-align: right;
   color: var(--dsw-alias-label-tertiary);
-  /* The gutter is chrome, not content: keep it out of a text selection so a
-     copy of the visible rows carries the source, not the line numbers. */
   user-select: none;
 }
 
 .content {
+  min-width: 0;
   color: var(--dsw-alias-label-primary);
 }
 
+.block[data-code-wrap='true'] .line {
+  white-space: pre-wrap;
+}
+
+.block[data-code-wrap='true'] .content {
+  overflow-wrap: anywhere;
+}
+
 .expand {
   display: block;
   width: 100%;
-  padding: 0 0 0 var(--dsl-read-gutter);
+  padding: 0 0 0 calc(var(--dsl-read-gutter) + 12px);
   border: none;
-  background-color: transparent;
+  background: transparent;
   color: var(--dsw-alias-label-tertiary);
   cursor: pointer;
   font: inherit;

package/lib/index.js

@@ -38,6 +38,7 @@ import langJson from "@shikijs/langs/json";
 import css$24 from "./JsonTree.module.css";
 import Anser from "anser";
 import css$25 from "./TerminalBlock.module.css";
+import cardCss from "./CodeCard.module.css";
 import css$26 from "./ReadBlock.module.css";
 import { structuredPatch } from "diff";
 import css$27 from "./DiffBlock.module.css";
@@ -3500,7 +3501,7 @@ const MEASURE_STYLE = {
 * @param props.align - list alignment against the anchor (default 'start').
 * @param props.side - open below (`bottom`, default) or above (`top`) the anchor.
 * @param props.portal - render the list into document.body, fixed-positioned
-* from the anchor rect (repositions on scroll/resize while open). Use when an
+* from the anchor rect (follows movement and resizing while open). Use when an
 * ancestor's overflow clipping would crop the in-place list; default false
 * keeps the pure-CSS in-place behavior.
 * @param props.closeOnPointerLeave - close the list once the pointer has left
@@ -3513,8 +3514,8 @@ const MEASURE_STYLE = {
 * directly (e.g. from a host-owned trigger button) instead of measuring the
 * Menu's own wrapper span. Required when the wrapper isn't itself laid out at
 * the trigger (render-prop anchors, effect-positioned proxies — measuring the
-* wrapper there races the host's layout effects). Called on open and on every
-* scroll/resize; return null to skip placement for that frame.
+* wrapper there races the host's layout effects). Called on open, each animation
+* frame, and scroll/resize; return null to skip placement for that frame.
 * @param props.footer - rows pinned below the scrolling items area, separated
 * by a hairline; they stay visible while the items above scroll.
 * @param props.children - component rows rendered after `items` in the same
@@ -3607,15 +3608,21 @@ function Menu({ open, anchor, items = [], children, selectedId, selectedIds, onS
 			}
 			if (lw > 0) x = Math.min(Math.max(x, MARGIN), vw - lw - MARGIN);
 			if (lh > 0) y = Math.min(Math.max(y, overlayTopMargin(MARGIN)), vh - lh - MARGIN);
-			setFixedPos({
+			setFixedPos((current) => current?.left === x && current.top === y ? current : {
 				left: x,
 				top: y
 			});
 		};
 		place();
+		const track = () => {
+			place();
+			frame = requestAnimationFrame(track);
+		};
+		let frame = requestAnimationFrame(track);
 		window.addEventListener("scroll", place, true);
 		window.addEventListener("resize", place);
 		return () => {
+			cancelAnimationFrame(frame);
 			window.removeEventListener("scroll", place, true);
 			window.removeEventListener("resize", place);
 		};
@@ -5919,7 +5926,8 @@ if (typeof window !== "undefined") {
 * @param props.maxWidth - bubble width cap in pixels, for labels long enough that the default
 * half-viewport cap would render a slab wider than the surface the anchor sits on.
 * @param props.children - a single anchor element; its own ref (callback or object) is forwarded alongside the tooltip's.
-* @returns the cloned anchor plus a fixed-position bubble, optionally portaled to the body; clicking the
+* @returns the cloned anchor plus a fixed-position bubble, optionally portaled to the body.
+* The bubble stays hidden until ResizeObserver supplies its size for viewport fitting; clicking the
 * anchor dismisses the bubble until the next trigger, and focus arriving after a pointer
 * interaction (a closing menu refocusing its trigger) never raises it.
 */
@@ -5932,40 +5940,9 @@ function Tooltip({ label, side = "right", align = "center", delayMs = 0, disable
 		else if (childRef != null) childRef.current = el;
 	}, [childRef]);
 	const [pos, setPos] = useState(null);
-	const [placement, setPlacement] = useState(side);
 	const bubble = useRef(null);
 	const resolvedLabel = pos === null ? null : typeof label === "function" ? label() : label;
-	const y = pos === null ? 0 : placement === "right" ? pos.top + (pos.bottom - pos.top) / 2 : placement === "top" ? pos.top - 8 : pos.bottom + 8;
-	const EDGE_MARGIN = 12;
-	useLayoutEffect(() => {
-		if (pos === null) return;
-		const fit = () => {
-			const el = bubble.current;
-			/* v8 ignore next -- pos is set only while the bubble is mounted. */
-			if (el === null) return;
-			el.style.left = `${pos.x}px`;
-			const r = el.getBoundingClientRect();
-			let dx = 0;
-			if (r.right > window.innerWidth - EDGE_MARGIN) dx = window.innerWidth - EDGE_MARGIN - r.right;
-			if (r.left + dx < EDGE_MARGIN) dx = EDGE_MARGIN - r.left;
-			el.style.left = `${pos.x + dx}px`;
-			if (side === "right") return;
-			const fitsBelow = pos.bottom + 8 + r.height <= window.innerHeight - EDGE_MARGIN;
-			const fitsAbove = pos.top - 8 - r.height >= EDGE_MARGIN;
-			if (placement === "bottom" && !fitsBelow && fitsAbove) setPlacement("top");
-			if (placement === "top" && !fitsAbove && fitsBelow) setPlacement("bottom");
-		};
-		fit();
-		window.addEventListener("resize", fit);
-		return () => {
-			window.removeEventListener("resize", fit);
-		};
-	}, [
-		placement,
-		pos,
-		resolvedLabel,
-		side
-	]);
+	const y = pos === null ? 0 : side === "right" ? pos.top + (pos.bottom - pos.top) / 2 : side === "top" ? pos.top - 8 : pos.bottom + 8;
 	const showTimer = useRef(null);
 	const triggers = useRef({
 		hover: false,
@@ -5977,6 +5954,43 @@ function Tooltip({ label, side = "right", align = "center", delayMs = 0, disable
 		suppressAncestors?.(active);
 	}, [suppressAncestors]);
 	const visible = pos !== null && !disabled;
+	useEffect(() => {
+		const el = bubble.current;
+		if (pos === null || !visible || suppressed || el === null) return;
+		const edgeMargin = 12;
+		let size;
+		let placement = side;
+		const fit = () => {
+			if (size === void 0) return;
+			const { inlineSize: width, blockSize: height } = size;
+			const offset = side === "right" ? 0 : align === "end" ? width : width / 2;
+			const left = Math.max(edgeMargin, Math.min(pos.x - offset, window.innerWidth - edgeMargin - width));
+			const fitsBelow = pos.bottom + 8 + height <= window.innerHeight - edgeMargin;
+			const fitsAbove = pos.top - 8 - height >= edgeMargin;
+			if (placement === "bottom" && !fitsBelow && fitsAbove) placement = "top";
+			else if (placement === "top" && !fitsAbove && fitsBelow) placement = "bottom";
+			el.style.left = `${left + offset}px`;
+			el.style.top = `${placement === "right" ? (pos.top + pos.bottom) / 2 : placement === "top" ? pos.top - 8 : pos.bottom + 8}px`;
+			el.dataset.side = placement;
+			el.style.visibility = "visible";
+		};
+		const observer = new ResizeObserver((entries) => {
+			size = entries[0]?.borderBoxSize[0];
+			fit();
+		});
+		observer.observe(el, { box: "border-box" });
+		window.addEventListener("resize", fit);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", fit);
+		};
+	}, [
+		align,
+		pos,
+		side,
+		suppressed,
+		visible
+	]);
 	useEffect(() => {
 		announce(visible);
 		return () => {
@@ -6005,7 +6019,6 @@ function Tooltip({ label, side = "right", align = "center", delayMs = 0, disable
 		/* v8 ignore next -- the ref is attached by event time: events fire on the cloned anchor. */
 		if (el === null) return;
 		const r = el.getBoundingClientRect();
-		setPlacement(side);
 		setPos({
 			x: side === "right" ? r.right + 10 : align === "end" ? r.right : r.left + r.width / 2,
 			top: r.top,
@@ -6035,12 +6048,13 @@ function Tooltip({ label, side = "right", align = "center", delayMs = 0, disable
 	const content = visible && !suppressed && jsx("span", {
 		ref: bubble,
 		className: css$20.bubble,
-		"data-side": placement,
+		"data-side": side,
 		"data-portal": portal || void 0,
 		"data-align": align,
 		style: {
 			left: pos.x,
 			top: y,
+			visibility: "hidden",
 			...maxWidth === void 0 ? {} : { maxWidth }
 		},
 		role: "tooltip",
@@ -8719,6 +8733,66 @@ function FoldToggle({ className, expanded, hidden, labels, onToggle }) {
 	});
 }
 //#endregion
+//#region lib/types/CodeToolbar.js
+/** Shared language, wrapping, and clipboard controls for code cards. */
+/**
+* Render a language label and keyboard-accessible icon actions with tooltips.
+* @param props - Localized labels, current state, and card-owned actions.
+* @returns The shared code-card header.
+*/
+function CodeToolbar({ lang, title, status, labels, copyLabel, copiedLabel, copied, wrapped, onCopy, onWrap }) {
+	const wrapLabel = wrapped ? labels.unwrapLabel : labels.wrapLabel;
+	const clipboardLabel = copied ? copiedLabel : copyLabel;
+	return jsxs("div", {
+		className: cardCss.header,
+		"data-code-block-banner": true,
+		children: [jsxs("div", {
+			className: cardCss.heading,
+			children: [jsx("span", {
+				className: cardCss.language,
+				children: supportsHighlighting(lang) ? lang : labels.codeLabel
+			}), title !== void 0 && jsx("span", {
+				className: cardCss.title,
+				title,
+				children: title
+			})]
+		}), jsxs("div", {
+			className: cardCss.actions,
+			children: [
+				status !== void 0 && jsx("span", {
+					className: cardCss.status,
+					children: status
+				}),
+				onWrap !== void 0 && jsx(Tooltip, {
+					label: wrapLabel,
+					side: "top",
+					portal: true,
+					children: jsx("button", {
+						type: "button",
+						className: cardCss.action,
+						"aria-label": labels.wrapLabel,
+						"aria-pressed": wrapped,
+						onClick: onWrap,
+						children: wrapped ? jsx(IconNowrapFillRegular, { size: 14 }) : jsx(IconWrapFillRegular, { size: 14 })
+					})
+				}),
+				onCopy !== void 0 && jsx(Tooltip, {
+					label: clipboardLabel,
+					side: "top",
+					portal: true,
+					children: jsx("button", {
+						type: "button",
+						className: cardCss.action,
+						"aria-label": clipboardLabel,
+						onClick: onCopy,
+						children: copied ? jsx(IconCheckOutlineRegular, { size: 14 }) : jsx(IconCopyOutlineRegular, { size: 14 })
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
 //#region lib/types/markdown/useViewportHighlighting.js
 const noop = () => {};
 /** One document-wide observer; activated elements leave it permanently. */
@@ -8817,6 +8891,7 @@ function ReadBlock({ label, labels, lines, totalLines, lang, maxLines = 16, clas
 	]);
 	const [expanded, setExpanded] = useState(false);
 	const [copied, setCopied] = useState(false);
+	const [wrapped, setWrapped] = useState(false);
 	const onCopy = useCallback(() => {
 		if (copied) return;
 		writeClipboard(raw).then((ok) => {
@@ -8846,37 +8921,29 @@ function ReadBlock({ label, labels, lines, totalLines, lang, maxLines = 16, clas
 			children: spans === void 0 ? line.text : renderSpans(spans)
 		})]
 	}, line.number));
+	const gutterStyle = { "--dsl-read-gutter": `${lines.reduce((digits, line) => Math.max(digits, String(line.number).length), 3)}ch` };
 	const paired = lines.map((line, index) => [line, highlighted?.[index]]);
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$26.block, className),
+		className: clsx(cardCss.card, css$26.block, className),
 		"data-read": "",
-		children: [jsxs("div", {
-			className: css$26.banner,
-			children: [jsx("div", {
-				className: css$26.label,
-				children: label ?? ""
-			}), jsxs("div", {
-				className: css$26.action,
-				children: [
-					windowed && jsx("span", {
-						className: css$26.count,
-						children: labels.window(lines.length, totalLines)
-					}),
-					jsx("span", {
-						className: css$26.lang,
-						children: lang ?? ""
-					}),
-					lines.length > 0 && jsx("button", {
-						type: "button",
-						className: css$26.copyButton,
-						onClick: onCopy,
-						children: copied ? labels.copied : labels.copy
-					})
-				]
-			})]
+		"data-code-wrap": wrapped,
+		style: gutterStyle,
+		children: [jsx(CodeToolbar, {
+			lang,
+			title: label,
+			status: windowed ? labels.window(lines.length, totalLines) : void 0,
+			labels,
+			copyLabel: labels.copy,
+			copiedLabel: labels.copied,
+			copied,
+			wrapped,
+			onCopy: lines.length > 0 ? onCopy : void 0,
+			onWrap: () => {
+				setWrapped((value) => !value);
+			}
 		}), jsxs("div", {
-			className: css$26.body,
+			className: cardCss.body,
 			children: [
 				rows(capped ? paired.slice(0, headLines) : paired),
 				hidden > 0 && jsx(FoldToggle, {
@@ -8925,7 +8992,7 @@ function localHunks(diff) {
 * comparisons exceeding the edit limit count both complete fragments as replaced.
 * Text follows {@link contentLines}'s terminator rule.
 * @param diffs - the hunks to count.
-* @returns the +/- totals for summaries and the card footer.
+* @returns the +/- totals for tool summaries.
 */
 function diffTotals(diffs) {
 	let added = 0;
@@ -8940,18 +9007,16 @@ function diffTotals(diffs) {
 	};
 }
 /**
-* Flatten local patches into rows and count only added and removed lines.
+* Flatten local patches into rows.
 * A path header opens each new file. A `⋯` gap separates consecutive same-file
-* fragments and distant patches within a fragment. File counts use distinct paths.
+* fragments and distant patches within a fragment.
 * @param diffs - the hunks to render.
-* @returns the body rows, the +/- totals, and the distinct-file count.
+* @returns the body rows.
 */
 function buildRows(diffs) {
 	const rows = [];
-	const paths = /* @__PURE__ */ new Set();
 	let prevPath;
 	for (const diff of diffs) {
-		paths.add(diff.path);
 		if (diff.path !== prevPath) rows.push({
 			kind: "path",
 			text: diff.path
@@ -8975,12 +9040,7 @@ function buildRows(diffs) {
 			}
 		}
 	}
-	return {
-		rows,
-		added: rows.filter((row) => row.kind === "add").length,
-		removed: rows.filter((row) => row.kind === "del").length,
-		files: paths.size
-	};
+	return rows;
 }
 /**
 * Split a side's text into its content lines. Empty text is zero lines (a full
@@ -9020,9 +9080,12 @@ function copyText$1(rows) {
 * @returns the diff block element.
 */
 function DiffBlock({ diffs, labels, maxLines = 16, className }) {
-	const { rows, added, removed, files } = useMemo(() => buildRows(diffs), [diffs]);
+	const rows = useMemo(() => buildRows(diffs), [diffs]);
 	const [expanded, setExpanded] = useState(false);
 	const [copied, setCopied] = useState(false);
+	const [wrapped, setWrapped] = useState(false);
+	const firstLanguage = diffs[0] === void 0 ? void 0 : languageForPath(diffs[0].path);
+	const language = diffs.every((diff) => languageForPath(diff.path) === firstLanguage) ? firstLanguage : void 0;
 	const onCopy = useCallback(() => {
 		if (copied) return;
 		writeClipboard(copyText$1(rows)).then((ok) => {
@@ -9044,47 +9107,40 @@ function DiffBlock({ diffs, labels, maxLines = 16, className }) {
 	const head = capped ? rows.slice(0, headLines) : rows;
 	const tail = capped ? rows.slice(rows.length - tailLines) : [];
 	return jsxs("div", {
-		className: clsx(css$27.block, className),
+		className: clsx(cardCss.card, css$27.block, className),
 		"data-diff": "",
-		children: [
-			jsx("button", {
-				type: "button",
-				className: css$27.copyButton,
-				onClick: onCopy,
-				children: copied ? labels.copied : labels.copy
-			}),
-			jsxs("div", {
-				className: css$27.body,
-				children: [
-					head.map((row, index) => jsx("div", {
-						className: clsx(css$27.line, ROW_CLASS[row.kind]),
-						children: row.text
-					}, index)),
-					hidden > 0 && jsx(FoldToggle, {
-						className: css$27.expand,
-						expanded,
-						hidden,
-						labels,
-						onToggle
-					}),
-					tail.map((row, index) => jsx("div", {
-						className: clsx(css$27.line, ROW_CLASS[row.kind]),
-						children: row.text
-					}, index))
-				]
-			}),
-			jsxs("div", {
-				className: css$27.footer,
-				children: [
-					"└ +",
-					added,
-					" -",
-					removed,
-					" · ",
-					labels.files(files)
-				]
-			})
-		]
+		"data-code-wrap": wrapped,
+		children: [jsx(CodeToolbar, {
+			lang: language,
+			labels,
+			copyLabel: labels.copy,
+			copiedLabel: labels.copied,
+			copied,
+			wrapped,
+			onCopy,
+			onWrap: () => {
+				setWrapped((value) => !value);
+			}
+		}), jsxs("div", {
+			className: css$27.body,
+			children: [
+				head.map((row, index) => jsx("div", {
+					className: clsx(css$27.line, ROW_CLASS[row.kind]),
+					children: row.text
+				}, index)),
+				hidden > 0 && jsx(FoldToggle, {
+					className: css$27.expand,
+					expanded,
+					hidden,
+					labels,
+					onToggle
+				}),
+				tail.map((row, index) => jsx("div", {
+					className: clsx(css$27.line, ROW_CLASS[row.kind]),
+					children: row.text
+				}, index))
+			]
+		})]
 	});
 }
 //#endregion
@@ -9965,7 +10021,7 @@ function renderLine(line, index) {
 		}, spanIndex))
 	})] }, index);
 }
-function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers = false, showHeader = true, copyLabel, copiedLabel }) {
+function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers = false, showHeader = true, copyLabel, copiedLabel, toolbarLabels, wrap }) {
 	const trimmed = code.endsWith("\n") ? code.slice(0, -1) : code;
 	const sourceLines = lineNumbers ? trimmed.split("\n") : void 0;
 	const rootRef = useRef(null);
@@ -10050,6 +10106,8 @@ function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers =
 		loaded
 	]);
 	const [copied, setCopied] = useState(false);
+	const [localWrapped, setWrapped] = useState(true);
+	const wrapped = wrap ?? localWrapped;
 	const onCopy = useCallback(() => {
 		if (copied) return;
 		writeClipboard(rootRef.current?.querySelector("pre")?.textContent ?? trimmed).then((ok) => {
@@ -10069,12 +10127,24 @@ function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers =
 	}) : jsx("div", { dangerouslySetInnerHTML: { __html: html } });
 	return jsxs("div", {
 		ref: rootRef,
-		className: clsx(css$29.block, "md-code-block", lineNumbers && css$29.numbered, className),
+		className: clsx(css$29.block, "md-code-block", lineNumbers && css$29.numbered, toolbarLabels !== void 0 && css$29.card, className),
 		"data-line-numbers": lineNumbers || void 0,
+		"data-code-wrap": toolbarLabels === void 0 ? void 0 : wrapped,
 		style: sourceLines === void 0 ? void 0 : { "--dsl-code-block-line-number-width": `${Math.max(2, String(sourceLines.length).length)}ch` },
 		children: [showHeader && jsx("div", {
 			className: css$29.bannerWrap,
-			children: jsxs("div", {
+			children: toolbarLabels !== void 0 ? jsx(CodeToolbar, {
+				lang,
+				labels: toolbarLabels,
+				copyLabel,
+				copiedLabel,
+				copied,
+				wrapped,
+				onCopy,
+				onWrap: wrap === void 0 ? () => {
+					setWrapped((value) => !value);
+				} : void 0
+			}) : jsxs("div", {
 				className: css$29.banner,
 				"data-code-block-banner": true,
 				children: [jsx("div", {
@@ -10434,7 +10504,8 @@ function renderCode(node, key, context) {
 		lang,
 		streaming: context.streaming,
 		copyLabel: context.labels.code.copyLabel,
-		copiedLabel: context.labels.code.copiedLabel
+		copiedLabel: context.labels.code.copiedLabel,
+		toolbarLabels: context.labels.code.toolbarLabels
 	}, key);
 }
 /** A list is loose when it or any of its items is spread; every item then keeps its paragraphs. */

package/lib/markdown/CodeBlock.module.css

@@ -104,6 +104,21 @@
   color: var(--dsw-alias-label-primary);
 }
 
+.card :where(pre) {
+  padding: 6px 22px 20px;
+  word-break: normal;
+  overflow-wrap: anywhere;
+}
+
+.card[data-code-wrap='false'] {
+  --dsl-code-block-line-white-space: pre;
+}
+
+.card[data-code-wrap='false'] :where(pre) {
+  white-space: pre;
+  overflow-wrap: normal;
+}
+
 .numbered :where(pre) code {
   display: block;
   counter-reset: source-line;

package/lib/markdown/MarkdownText.module.css

@@ -401,24 +401,6 @@
   z-index: auto;
 }
 
-.compact [data-code-block-banner] {
-  padding: 4px 8px;
-  font: inherit;
-}
-
-.compact [data-code-block-banner] > :first-child {
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-}
-
-.compact pre {
-  margin: 4px 0;
-  padding: 8px;
-  font-size: inherit;
-  line-height: inherit;
-}
-
 /* Shiki writes token colors inline; compact code uses the surrounding text color. */
 .compact pre,
 .compact pre :is(code, span) {

package/lib/types/CodeToolbar.d.ts

@@ -0,0 +1,30 @@
+/** Localized language fallback and wrapping actions supplied by the card owner. */
+export interface CodeToolbarLabels {
+    /** Title for an absent or unsupported language. */
+    codeLabel: string;
+    /** Action that enables wrapping. */
+    wrapLabel: string;
+    /** Action that preserves source columns with horizontal scrolling. */
+    unwrapLabel: string;
+}
+/** Display state and callbacks for a code card's toolbar. */
+interface CodeToolbarProps {
+    lang?: string | undefined;
+    title?: string | undefined;
+    status?: string | undefined;
+    labels: CodeToolbarLabels;
+    copyLabel: string;
+    copiedLabel: string;
+    copied: boolean;
+    wrapped: boolean;
+    onCopy?: (() => void) | undefined;
+    onWrap?: (() => void) | undefined;
+}
+/**
+ * Render a language label and keyboard-accessible icon actions with tooltips.
+ * @param props - Localized labels, current state, and card-owned actions.
+ * @returns The shared code-card header.
+ */
+export declare function CodeToolbar({ lang, title, status, labels, copyLabel, copiedLabel, copied, wrapped, onCopy, onWrap }: CodeToolbarProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CodeToolbar.d.ts.map

package/lib/types/DiffBlock.d.ts

@@ -1,3 +1,4 @@
+import { type CodeToolbarLabels } from './CodeToolbar.tsx';
 /** Output lines shown before the height cap collapses the middle. */
 export declare const DEFAULT_DIFF_MAX_LINES = 16;
 /**
@@ -23,21 +24,20 @@ export interface DiffBlockProps {
     className?: string | undefined;
 }
 /** Localized chrome for {@link DiffBlock}. */
-export interface DiffBlockLabels {
+export interface DiffBlockLabels extends CodeToolbarLabels {
     copy: string;
     copied: string;
     collapseAria: string;
     expandAria: (hidden: number) => string;
     collapse: string;
     expand: (hidden: number) => string;
-    files: (count: number) => string;
 }
 /**
  * Count displayed additions and deletions. Exact patches exclude shared context;
  * comparisons exceeding the edit limit count both complete fragments as replaced.
  * Text follows {@link contentLines}'s terminator rule.
  * @param diffs - the hunks to count.
- * @returns the +/- totals for summaries and the card footer.
+ * @returns the +/- totals for tool summaries.
  */
 export declare function diffTotals(diffs: DiffHunk[]): {
     added: number;

package/lib/types/Menu.d.ts

@@ -79,7 +79,7 @@ export declare function MenuItemButton({ children, icon, disabled, danger, separ
  * @param props.align - list alignment against the anchor (default 'start').
  * @param props.side - open below (`bottom`, default) or above (`top`) the anchor.
  * @param props.portal - render the list into document.body, fixed-positioned
- * from the anchor rect (repositions on scroll/resize while open). Use when an
+ * from the anchor rect (follows movement and resizing while open). Use when an
  * ancestor's overflow clipping would crop the in-place list; default false
  * keeps the pure-CSS in-place behavior.
  * @param props.closeOnPointerLeave - close the list once the pointer has left
@@ -92,8 +92,8 @@ export declare function MenuItemButton({ children, icon, disabled, danger, separ
  * directly (e.g. from a host-owned trigger button) instead of measuring the
  * Menu's own wrapper span. Required when the wrapper isn't itself laid out at
  * the trigger (render-prop anchors, effect-positioned proxies — measuring the
- * wrapper there races the host's layout effects). Called on open and on every
- * scroll/resize; return null to skip placement for that frame.
+ * wrapper there races the host's layout effects). Called on open, each animation
+ * frame, and scroll/resize; return null to skip placement for that frame.
  * @param props.footer - rows pinned below the scrolling items area, separated
  * by a hairline; they stay visible while the items above scroll.
  * @param props.children - component rows rendered after `items` in the same

package/lib/types/ReadBlock.d.ts

@@ -1,3 +1,4 @@
+import { type CodeToolbarLabels } from './CodeToolbar.tsx';
 /**
  * Content lines shown before the height cap collapses the middle. Matches
  * TerminalBlock's default so a long read and a long command output cut at the
@@ -28,7 +29,7 @@ export interface ReadBlockProps {
     className?: string | undefined;
 }
 /** Localized chrome for {@link ReadBlock}. */
-export interface ReadBlockLabels {
+export interface ReadBlockLabels extends CodeToolbarLabels {
     window: (shown: number, total: number) => string;
     copy: string;
     copied: string;

package/lib/types/Tooltip.d.ts

@@ -26,7 +26,8 @@ type TooltipLabel = string | (() => string);
  * @param props.maxWidth - bubble width cap in pixels, for labels long enough that the default
  * half-viewport cap would render a slab wider than the surface the anchor sits on.
  * @param props.children - a single anchor element; its own ref (callback or object) is forwarded alongside the tooltip's.
- * @returns the cloned anchor plus a fixed-position bubble, optionally portaled to the body; clicking the
+ * @returns the cloned anchor plus a fixed-position bubble, optionally portaled to the body.
+ * The bubble stays hidden until ResizeObserver supplies its size for viewport fitting; clicking the
  * anchor dismisses the bubble until the next trigger, and focus arriving after a pointer
  * interaction (a closing menu refocusing its trigger) never raises it.
  */

package/lib/types/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * Cordis-free React primitives styled only through `--dsw-*` tokens.
  */
+export type { CodeToolbarLabels } from './CodeToolbar.tsx';
 export { StateDot } from './StateDot.tsx';
 export type { StateDotState } from './StateDot.tsx';
 export { DisclosureRow } from './DisclosureRow.tsx';

package/lib/types/markdown/CodeBlock.d.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'react';
+import { type CodeToolbarLabels } from '../CodeToolbar.tsx';
 export interface CodeBlockProps {
     /** The source text, rendered verbatim (trailing newline trimmed for display). */
     code: string;
@@ -25,6 +26,10 @@ export interface CodeBlockProps {
     copyLabel: string;
     /** Copy-button label during the post-copy confirmation window. */
     copiedLabel: string;
+    /** Enable the shared card toolbar and spacing; omit for custom toolbar layouts. */
+    toolbarLabels?: CodeToolbarLabels | undefined;
+    /** With toolbarLabels, use the owner's wrapping preference and omit the toolbar's local wrap action. */
+    wrap?: boolean | undefined;
 }
-export declare function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers, showHeader, copyLabel, copiedLabel, }: CodeBlockProps): import("react").JSX.Element;
+export declare function CodeBlock({ code, lang, streaming, className, contentRef, lineNumbers, showHeader, copyLabel, copiedLabel, toolbarLabels, wrap, }: CodeBlockProps): import("react").JSX.Element;
 //# sourceMappingURL=CodeBlock.d.ts.map

package/lib/types/markdown/render.d.ts

@@ -17,6 +17,7 @@
  */
 import type { ReactNode } from 'react';
 import type * as Md from 'mdast';
+import type { CodeToolbarLabels } from '../CodeToolbar.tsx';
 import type { PositionedBlock } from './incremental.ts';
 /** Copy-button labels forwarded to fence CodeBlocks (this package is cordis-free, so copy arrives via props). */
 export interface MarkdownCodeLabels {
@@ -24,6 +25,8 @@ export interface MarkdownCodeLabels {
     copyLabel: string;
     /** Copy-button label during the post-copy confirmation window. */
     copiedLabel: string;
+    /** Shared card controls; omitted for custom toolbar layouts. */
+    toolbarLabels?: CodeToolbarLabels | undefined;
 }
 /** Localized chrome for a Markdown document. */
 export interface MarkdownLabels {

package/lib/types/user-text.d.ts

@@ -1,8 +1,8 @@
 /**
  * Display projection of reference forms in sent user text (bubble and queue
  * rows). The logged model text remains the single truth; this is presentation
- * only, and every part renders inline so a single-line message never breaks
- * across lines. Four decoration sources, by precedence: the wire session form
+ * only. Inline references follow the consumer's wrapping policy and keep long
+ * labels within its width. Four decoration sources, by precedence: the wire session form
  * `@[label](dsh-session:...)` folds to its label; exact session labels
  * supplied by an adjacent recall decorate their bare `@label` mention; plain
  * `@name` word-boundary tokens decorate by shape alone; and a plain `/name`

package/lib/user-text.module.css

@@ -14,10 +14,13 @@
      chip's label rode ~3px above the surrounding text in both surfaces. An
      inline chip shares the consumer's baseline by construction. */
   display: inline;
+  max-width: 100%;
   margin: 0 2px;
   color: var(--dsw-alias-state-business-primary);
   font-weight: 500;
-  white-space: nowrap;
+  white-space: inherit;
+  overflow-wrap: anywhere;
+  text-align: inherit;
 }
 
 /* Skill and command tokens read as code: the theme's code family at the

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deepseek-ai/dsh-client-ui-primitives",
   "description": "Pure React atoms for the dsh web UI: controls, icons, markdown, and JSON inspectors (zero cordis)",
-  "version": "0.1.7-alpha.1",
+  "version": "0.1.7-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -47,9 +47,9 @@
     "micromark-extension-gfm": "^3.0.0",
     "micromark-util-sanitize-uri": "^2.0.1",
     "simple-icons": "16.31.0",
-    "@deepseek-ai/dsh-client-store": "^0.1.7-alpha.1",
-    "@deepseek-ai/cordis": "^4.0.3",
-    "@deepseek-ai/dsh-util-workspace-path": "^0.1.7-alpha.1"
+    "@deepseek-ai/cordis": "~4.0.4",
+    "@deepseek-ai/dsh-util-workspace-path": "0.1.7-alpha.2",
+    "@deepseek-ai/dsh-client-store": "0.1.7-alpha.2"
   },
   "files": [
     "lib/index.js",
@@ -57,6 +57,6 @@
     "lib/types/**/*.d.ts"
   ],
   "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.3"
+    "@deepseek-ai/cordis": "~4.0.4"
   }
 }