+
+ )
+}
diff --git a/packages/client/ui-primitives/src/DiffBlock.module.css b/packages/client/ui-primitives/src/DiffBlock.module.css
index dd1d621aeb..3b8c641d8b 100644
--- a/packages/client/ui-primitives/src/DiffBlock.module.css
+++ b/packages/client/ui-primitives/src/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);
-}
diff --git a/packages/client/ui-primitives/src/DiffBlock.tsx b/packages/client/ui-primitives/src/DiffBlock.tsx
index 339c4a4af1..87ef5131ae 100644
--- a/packages/client/ui-primitives/src/DiffBlock.tsx
+++ b/packages/client/ui-primitives/src/DiffBlock.tsx
@@ -3,6 +3,9 @@ import clsx from 'clsx'
import { structuredPatch } from 'diff'
import { FoldToggle } from './FoldToggle.tsx'
import { writeClipboard } from './clipboard.ts'
+import { CodeToolbar, type CodeToolbarLabels } from './CodeToolbar.tsx'
+import { languageForPath } from './code-highlighting.ts'
+import cardCss from './CodeCard.module.css'
import css from './DiffBlock.module.css'
/** Output lines shown before the height cap collapses the middle. */
@@ -33,14 +36,13 @@ export interface DiffBlockProps {
}
/** 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
}
/** A single rendered body line and its role, so the height cap slices a flat list. */
@@ -82,7 +84,7 @@ function localHunks(diff: DiffHunk) {
* 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 function diffTotals(diffs: DiffHunk[]): { added: number; removed: number } {
let added = 0
@@ -99,18 +101,16 @@ export function diffTotals(diffs: DiffHunk[]): { added: number; removed: number
}
/**
- * 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: DiffHunk[]): { rows: DiffRow[]; added: number; removed: number; files: number } {
+function buildRows(diffs: DiffHunk[]): DiffRow[] {
const rows: DiffRow[] = []
- const paths = new Set
+ {supportsHighlighting(lang) ? lang : labels.codeLabel}
+ {title !== undefined && {title}}
+
+
+ {status !== undefined && {status}}
+ {onWrap !== undefined &&
+
+ }
+ {onCopy !== undefined &&
+
+ }
+
+
-
+
))
+ const gutterDigits = lines.reduce((digits, line) => Math.max(digits, String(line.number).length), 3)
+ const gutterStyle = { '--dsl-read-gutter': `${gutterDigits}ch` } as CSSProperties
+
const paired = lines.map((line, index): readonly [ReadBlockLine, readonly HighlightSpan[] | undefined] =>
[line, highlighted?.[index]])
return (
-
+ { setWrapped(value => !value) }} />
)
}
diff --git a/packages/client/ui-primitives/src/ReadBlock.module.css b/packages/client/ui-primitives/src/ReadBlock.module.css
index 2c4cf0370d..601bb29f48 100644
--- a/packages/client/ui-primitives/src/ReadBlock.module.css
+++ b/packages/client/ui-primitives/src/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;
diff --git a/packages/client/ui-primitives/src/ReadBlock.tsx b/packages/client/ui-primitives/src/ReadBlock.tsx
index 6c1b2eaec9..0eaf96374f 100644
--- a/packages/client/ui-primitives/src/ReadBlock.tsx
+++ b/packages/client/ui-primitives/src/ReadBlock.tsx
@@ -1,7 +1,9 @@
-import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { useCallback, useMemo, useRef, useState, useSyncExternalStore, type CSSProperties } from 'react'
import clsx from 'clsx'
import { FoldToggle } from './FoldToggle.tsx'
import { writeClipboard } from './clipboard.ts'
+import { CodeToolbar, type CodeToolbarLabels } from './CodeToolbar.tsx'
+import cardCss from './CodeCard.module.css'
import {
grammarLoadCount,
highlightLines,
@@ -44,7 +46,7 @@ export interface ReadBlockProps {
}
/** Localized chrome for {@link ReadBlock}. */
-export interface ReadBlockLabels {
+export interface ReadBlockLabels extends CodeToolbarLabels {
window: (shown: number, total: number) => string
copy: string
copied: string
@@ -88,6 +90,7 @@ export function ReadBlock({
)
const [expanded, setExpanded] = useState(false)
const [copied, setCopied] = useState(false)
+ const [wrapped, setWrapped] = useState(false)
const onCopy = useCallback(() => {
if (copied) return
@@ -116,27 +119,21 @@ export function ReadBlock({
{head.map((row, index) => (
- {row.text}
@@ -219,7 +216,6 @@ export function DiffBlock({ diffs, labels, maxLines = DEFAULT_DIFF_MAX_LINES, cl
{row.text}
))}
└ +{added} -{removed} · {labels.files(files)}
-
-
- {label ?? ''}
-
- {windowed && (
- {labels.window(lines.length, totalLines)}
- )}
- {lang ?? ''}
- {/* Empty files omit Copy to avoid replacing the clipboard with an empty string. */}
- {lines.length > 0 && (
-
- )}
-
-
+
+ 0 ? onCopy : undefined} onWrap={() => { setWrapped(value => !value) }}
+ />
+ ()
const [attempt, setAttempt] = useState(0)
+ const workbookRef = useRef(null)
useEffect(() => {
if (data === undefined) return
const controller = new AbortController()
@@ -31,6 +33,14 @@ export function ExcelBody({ content, format, limits, t }: LoadedExcelBodyProps):
)
return () => { controller.abort() }
}, [data, format, limits, attempt])
+ useEffect(() => {
+ const element = workbookRef.current
+ if (element === null || typeof ResizeObserver === 'undefined') return
+ // FortuneSheet measures its canvas on window resize, but pane resizing does not emit that event.
+ const observer = new ResizeObserver(() => { window.dispatchEvent(new Event('resize')) })
+ observer.observe(element)
+ return () => { observer.disconnect() }
+ }, [state])
if (data === undefined) return
}
-
{rows(capped ? paired.slice(0, headLines) : paired)}
{hidden > 0 && (
{
if (copied) return
@@ -178,21 +185,26 @@ export function CodeBlock({
)
return (
- >().mockResolvedValue()
+ Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
+ try {
+ render(![]()
` s
Shared copy comes from `sidebarDocumentPreview`; each builtin renderer owns its localized labels. PDF and converted Office previews use a graphite background in light mode and a matte-black background in dark mode, with subtle page shadows and original document colors. PDF and image previews share a floating control with **Fit width**, 25%, 50%, 100%, 150%, and 200% choices plus 25% incremental zoom across the 25%–400% fixed range. Fit width is the default and tracks pane resizing; 100% means the PDF's 96-DPI page size or the image's intrinsic CSS-pixel size. On fine pointers, the control starts hidden, slides up when the pointer enters the bottom 72 CSS pixels, and slides down after a 420 ms leave delay; hover, keyboard focus, an open menu, and an active gesture keep it visible, while devices without hover keep it visible continuously. Chromium maps a macOS trackpad pinch to the same live, pointer-anchored path as Ctrl+wheel; the control displays the gesture percentage, and the settled value survives body remounts until the tab closes. HTML previews do not expose zoom controls.
-Initial reads, additional pages, and HTML/PDF/image preparation share the ongoing `StateDot` loader, which exposes its label to assistive technology and respects reduced-motion preferences; every wait before content exists centres the loader in the pane, so opening a file shows one indicator in one position until the body appears. Loaded pages stay visible while another page loads. The PDF body loads its package-local `client.pdf.js` chunk only when a PDF preview mounts; PDF.js, its Worker source, and embedded support data stay out of the startup `client.js`. PDF pages fill the pane's width edge to edge as one vertical sequence and render lazily near the viewport; an unrendered page holds its place as a quiet 3:4 placeholder block. PDF.js’s official TextLayerBuilder manages selection boundaries and normalized copying over an aligned text layer. Its companion styles keep blank line breaks unhighlighted; alignment accounts for PDF page units, page rotation, and viewport resizing, and page disposal cancels both layers. Image-only PDFs contain no selectable text. Code previews show source line numbers by default without including them in copied text; plain text uses the same font size and line height as code. Code sits on the pane's own background rather than the chat card's fill; its banner is adjacent to a full-height inner scrollport, so both scrollbars begin below the copy control.
+Initial reads, additional pages, and HTML/PDF/image preparation share the ongoing `StateDot` loader, which exposes its label to assistive technology and respects reduced-motion preferences; every wait before content exists centres the loader in the pane, so opening a file shows one indicator in one position until the body appears. Loaded pages stay visible while another page loads. The PDF body loads its package-local `client.pdf.js` chunk only when a PDF preview mounts; PDF.js, its Worker source, and embedded support data stay out of the startup `client.js`. PDF pages fill the pane's width edge to edge as one vertical sequence and render lazily near the viewport; an unrendered page holds its place as a quiet 3:4 placeholder block. PDF.js’s official TextLayerBuilder manages selection boundaries and normalized copying over an aligned text layer. Its companion styles keep blank line breaks unhighlighted; alignment accounts for PDF page units, page rotation, and viewport resizing, and page disposal cancels both layers. Image-only PDFs contain no selectable text. Code previews show a tertiary-colored language label and a copy icon with a tooltip; wrapping remains in the document toolbar. They show source line numbers by default without including them in copied text; plain text uses the same font size and line height as code. Code sits on the pane's own background rather than the chat card's fill; its banner is adjacent to a full-height inner scrollport, so both scrollbars begin below the copy control.
## Excel preview
-Open `.xlsx`, `.xls`, `.csv`, and `.tsv` directly in the browser with worksheet tabs, cell selection, copying, and a read-only formula bar. XLSX retains fonts, solid fills, borders, number formats, rich text, merged cells, row and column sizes, hidden rows/columns/sheets, and frozen headings. XLS retains saved values, formulas, number formats, merges, and available row/column metadata; fonts, borders, and frozen panes are unsupported. Workbooks display saved formula results without recalculating; missing results remain blank, and a compact formula-bar warning marks workbooks whose displayed results may be incomplete or inaccurate. Spreadsheet preview does not call the Office conversion service.
+Open `.xlsx`, `.xls`, `.csv`, and `.tsv` directly in the browser with worksheet tabs, cell selection, copying, and a read-only formula bar. XLSX retains fonts, solid fills, borders, number formats, rich text, merged cells, row and column sizes, hidden rows/columns/sheets, and frozen headings. XLS retains saved values, formulas, number formats, merges, and available row/column metadata; fonts, borders, and frozen panes are unsupported. Workbooks display saved formula results without recalculating; missing results remain blank, and a compact formula-bar warning marks workbooks whose displayed results may be incomplete or inaccurate. The workbook viewport follows preview pane size changes without reloading its sheets or selection. Spreadsheet preview does not call the Office conversion service.
XLSX preview omits DrawingML parts from an in-memory copy before parsing and ignores worksheet drawing references. The original file and worksheet XML remain unchanged. A notice above the table lists detected charts, images, shapes, and conditional formatting that are not displayed, and recommends opening the workbook in a system application. Files without these detected features have no notice; formula warnings remain separate.
diff --git a/packages/client/ui-sidebar-documentpreview/README.zh.md b/packages/client/ui-sidebar-documentpreview/README.zh.md
index 18fe9e9461..eec96c2865 100644
--- a/packages/client/ui-sidebar-documentpreview/README.zh.md
+++ b/packages/client/ui-sidebar-documentpreview/README.zh.md
@@ -61,12 +61,12 @@ PNG、JPEG、GIF、WebP、BMP、ICO 和 SVG 通过 Blob URL 在 `![]()
` 静态
共享文案来自 `sidebarDocumentPreview`；各内置渲染器拥有自己的本地化标签。PDF 与转换后的 Office 预览在浅色模式下使用石墨灰底色，在深色模式下使用哑黑底色，页面带有轻微阴影并保留文档原色。PDF 与图片预览共用浮动控件，提供**适应宽度**、25%、50%、100%、150% 和 200% 选项，并在 25%–400% 固定范围内按 25% 逐级缩放。适应宽度是默认模式并跟随面板尺寸；100% 表示 PDF 的 96 DPI 页面尺寸或图片的固有 CSS 像素尺寸。在精细指针设备上，控件初始隐藏；指针进入底部 72 个 CSS 像素时向上滑入，离开 420 ms 后向下退出；控件悬停、键盘焦点、菜单展开和手势进行期间保持显示，无 hover 的设备则始终显示。Chromium 将 macOS 触控板捏合映射到与 Ctrl+滚轮相同的实时指针锚定路径；控件同步显示手势比例，静止后的值在正文重新挂载后继续保留，直至 tab 关闭。HTML 预览不显示缩放控件。
-首次读取、追加页及 HTML/PDF/图片准备共用 ongoing `StateDot` loading，其标签暴露给辅助技术，并遵循减少动态效果偏好；内容出现前的每个等待都把 loading 居中在面板中，打开文件到正文出现始终是同一位置的一个标记。下一页加载期间保留已显示的内容。PDF 正文仅在 PDF 预览挂载时加载包内 `client.pdf.js` chunk；PDF.js、Worker 源码和内嵌支持数据不会进入启动 `client.js`。PDF 页面贴边占满面板宽度，组成一个纵向连续序列并在接近视口时惰性渲染；未渲染的页以安静的 3:4 占位块保持位置。PDF.js 官方 TextLayerBuilder 在与画面重合的文字层上管理选区边界和复制文本规范化。配套样式不高亮空白换行；对齐同时考虑 PDF 页面单位、页面旋转与视口宽度变化，页面释放时取消两层渲染。纯图片 PDF 不包含可选取的文字。代码预览默认显示源码行号，但复制文本不包含行号；纯文本与代码使用相同字号和行高。代码直接坐在分栏自身的背景上，而不是会话卡片的填充色；复制条与占满剩余高度的内部滚动区相邻，因此横纵滚动条都从复制控件下方开始。
+首次读取、追加页及 HTML/PDF/图片准备共用 ongoing `StateDot` loading，其标签暴露给辅助技术，并遵循减少动态效果偏好；内容出现前的每个等待都把 loading 居中在面板中，打开文件到正文出现始终是同一位置的一个标记。下一页加载期间保留已显示的内容。PDF 正文仅在 PDF 预览挂载时加载包内 `client.pdf.js` chunk；PDF.js、Worker 源码和内嵌支持数据不会进入启动 `client.js`。PDF 页面贴边占满面板宽度，组成一个纵向连续序列并在接近视口时惰性渲染；未渲染的页以安静的 3:4 占位块保持位置。PDF.js 官方 TextLayerBuilder 在与画面重合的文字层上管理选区边界和复制文本规范化。配套样式不高亮空白换行；对齐同时考虑 PDF 页面单位、页面旋转与视口宽度变化，页面释放时取消两层渲染。纯图片 PDF 不包含可选取的文字。代码预览使用 tertiary 色的语言名称和带提示的复制图标；换行仍由文档工具栏控制。默认显示源码行号，但复制文本不包含行号；纯文本与代码使用相同字号和行高。代码直接坐在分栏自身的背景上，而不是会话卡片的填充色；复制条与占满剩余高度的内部滚动区相邻，因此横纵滚动条都从复制控件下方开始。
## Excel 预览
-直接在浏览器中打开 `.xlsx`、`.xls`、`.csv` 和 `.tsv`，支持工作表标签、单元格选择、复制和只读公式栏。XLSX 保留字体、纯色填充、边框、数字格式、富文本、合并单元格、行列尺寸、隐藏行列及工作表，以及冻结标题。XLS 保留已保存的值、公式、数字格式、合并及可用的行列元数据；不支持字体、边框和冻结窗格。工作簿显示已保存的公式结果而不重新计算；缺少的结果保持为空，公式栏旁的紧凑提示会标记显示结果可能不完整或不准确的工作簿。表格预览不调用 Office 转换服务。
+直接在浏览器中打开 `.xlsx`、`.xls`、`.csv` 和 `.tsv`，支持工作表标签、单元格选择、复制和只读公式栏。XLSX 保留字体、纯色填充、边框、数字格式、富文本、合并单元格、行列尺寸、隐藏行列及工作表，以及冻结标题。XLS 保留已保存的值、公式、数字格式、合并及可用的行列元数据；不支持字体、边框和冻结窗格。工作簿显示已保存的公式结果而不重新计算；缺少的结果保持为空，公式栏旁的紧凑提示会标记显示结果可能不完整或不准确的工作簿。工作簿视图随预览面板尺寸变化自动调整，无需重新加载工作表或选择状态。表格预览不调用 Office 转换服务。
XLSX 预览在解析前从内存副本中移除 DrawingML 部件，并忽略工作表的绘图引用。原文件和工作表 XML 保持不变。表格上方的提示列出实际检测到但未展示的图表、图片、形状和条件格式，并建议使用系统应用打开工作簿。未检测到这些内容的文件不显示此提示；公式提示保持独立。
diff --git a/packages/client/ui-sidebar-documentpreview/src/client/code/CodeBody.module.css b/packages/client/ui-sidebar-documentpreview/src/client/code/CodeBody.module.css
index 9e284f9ce9..c430564b19 100644
--- a/packages/client/ui-sidebar-documentpreview/src/client/code/CodeBody.module.css
+++ b/packages/client/ui-sidebar-documentpreview/src/client/code/CodeBody.module.css
@@ -43,6 +43,7 @@
.renderer .code pre {
box-sizing: border-box;
+ padding: 16px;
min-width: 100%;
overflow: visible;
white-space: pre;
diff --git a/packages/client/ui-sidebar-documentpreview/src/client/code/CodeBody.tsx b/packages/client/ui-sidebar-documentpreview/src/client/code/CodeBody.tsx
index a643654d5b..898c0eb596 100644
--- a/packages/client/ui-sidebar-documentpreview/src/client/code/CodeBody.tsx
+++ b/packages/client/ui-sidebar-documentpreview/src/client/code/CodeBody.tsx
@@ -24,9 +24,11 @@ export function CodeBody({ resourceAddress, content, wrap, scrollportRef, t }: C
code={content.text}
lang={language}
streaming={!content.eof}
+ wrap={wrap}
lineNumbers
copyLabel={t('copy')}
copiedLabel={t('copied')}
+ toolbarLabels={{ codeLabel: t('codeBlock.title'), wrapLabel: t('codeBlock.wrap'), unwrapLabel: t('codeBlock.unwrap') }}
/>
)
diff --git a/packages/client/ui-sidebar-documentpreview/src/client/excel/excel.tsx b/packages/client/ui-sidebar-documentpreview/src/client/excel/excel.tsx
index b8bbb89159..0e1b67da4b 100644
--- a/packages/client/ui-sidebar-documentpreview/src/client/excel/excel.tsx
+++ b/packages/client/ui-sidebar-documentpreview/src/client/excel/excel.tsx
@@ -1,5 +1,5 @@
/** Read-only spreadsheet surface backed by browser-parsed workbook data. */
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
import { Workbook } from '@fortune-sheet/react'
import { Button, IconWarningTriangleOutlineRegular, StateDot, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
import fortuneCss from '@fortune-sheet/react/dist/index.css?inline'
@@ -14,6 +14,7 @@ const scopedStyles = `@scope ([data-excel-preview]) { ${fortuneCss} }`
/**
* Display stored spreadsheet values and formats without editing or recalculation.
+ * Keep the mounted workbook sized to its preview pane.
* @param props - Complete workbook bytes, limits, and locale.
* @returns An isolated spreadsheet surface with cancellable loading.
*/
@@ -21,6 +22,7 @@ export function ExcelBody({ content, format, limits, t }: LoadedExcelBodyProps):
const data = content.kind === 'bytes' ? content.data : undefined
const [state, setState] = useState
{/* These paired attributes are stable semantic hooks for owner styling and DOM tests. */}
{showHeader &&
diff --git a/packages/client/ui-primitives/src/markdown/MarkdownText.module.css b/packages/client/ui-primitives/src/markdown/MarkdownText.module.css
index db318ac6eb..e3c5b31953 100644
--- a/packages/client/ui-primitives/src/markdown/MarkdownText.module.css
+++ b/packages/client/ui-primitives/src/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) {
diff --git a/packages/client/ui-primitives/src/markdown/render.tsx b/packages/client/ui-primitives/src/markdown/render.tsx
index c378dacd2a..84a9c2857a 100644
--- a/packages/client/ui-primitives/src/markdown/render.tsx
+++ b/packages/client/ui-primitives/src/markdown/render.tsx
@@ -22,6 +22,7 @@ import clsx from 'clsx'
import type * as Md from 'mdast'
import type {} from 'mdast-util-math'
import { normalizeUri } from 'micromark-util-sanitize-uri'
+import type { CodeToolbarLabels } from '../CodeToolbar.tsx'
import { CodeBlock } from './CodeBlock.tsx'
import { parseFileLink } from './file-link.ts'
import { renderTexToReact } from './katex.tsx'
@@ -36,6 +37,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. */
@@ -399,6 +402,7 @@ function renderCode(node: Md.Code, key: Key, context: MarkdownRenderContext): Re
streaming={context.streaming}
copyLabel={context.labels.code.copyLabel}
copiedLabel={context.labels.code.copiedLabel}
+ toolbarLabels={context.labels.code.toolbarLabels}
/>
)
}
diff --git a/packages/client/ui-primitives/tests/code-card-controls.client.spec.tsx b/packages/client/ui-primitives/tests/code-card-controls.client.spec.tsx
new file mode 100644
index 0000000000..62d448f499
--- /dev/null
+++ b/packages/client/ui-primitives/tests/code-card-controls.client.spec.tsx
@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { CodeBlock } from '../src/markdown/CodeBlock.tsx'
+import { MarkdownText } from '../src/markdown/MarkdownText.tsx'
+import { ReadBlock } from '../src/ReadBlock.tsx'
+import { DiffBlock } from '../src/DiffBlock.tsx'
+import { diffBlockLabels, readBlockLabels } from './labels.client.ts'
+
+const toolbarLabels = { codeLabel: 'Code block', wrapLabel: 'Wrap lines', unwrapLabel: 'Do not wrap lines' }
+const labels = { copyLabel: 'Copy', copiedLabel: 'Copied', toolbarLabels }
+
+afterEach(() => {
+ cleanup()
+ vi.clearAllTimers()
+ vi.useRealTimers()
+})
+
+describe('code-card controls', () => {
+ it.each([undefined, 'unregistered'])('labels the %s language with the localized code title', (lang) => {
+ render(
-
}
+ {toolbarLabels !== undefined ? { setWrapped(value => !value) } : undefined}
+ /> :
-
+
}
{lang ?? ''}
{body}
{t('invalid')}
if (state?.data !== data || state.format !== format) return
+
{hasFormulas &&