@orbit-work/ui 0.1.0

package/src/components/composite/MarkdownPreview/MarkdownPreview.stories.tsx

@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { MarkdownPreview } from "./index"
+
+const meta = {
+  title: "Composite/MarkdownPreview",
+  component: MarkdownPreview,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof MarkdownPreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleMarkdown = `# Project Overview
+
+This is a **sample** markdown document with various elements.
+
+## Features
+
+- List item one
+- List item two with *italic*
+- List item three with \`code\`
+
+## Code Example
+
+\`\`\`typescript
+function greet(name: string): string {
+  return \`Hello, \${name}!\`
+}
+\`\`\`
+
+## Links
+
+Visit [Anthropic](https://anthropic.com) for more information.`
+
+const sampleHtml = `<h1>Project Overview</h1>
+<p>This is a <strong>sample</strong> markdown document with various elements.</p>
+<h2>Features</h2>
+<ul>
+<li>List item one</li>
+<li>List item two with <em>italic</em></li>
+<li>List item three with <code>code</code></li>
+</ul>
+<h2>Code Example</h2>
+<pre><code class="language-typescript">function greet(name: string): string {
+  return \`Hello, \${name}!\`
+}
+</code></pre>
+<h2>Links</h2>
+<p>Visit <a href="https://anthropic.com">Anthropic</a> for more information.</p>`
+
+export const Default: Story = {
+  args: {
+    content: sampleMarkdown,
+    fileName: "README.md",
+  },
+}
+
+export const WithRenderedHtml: Story = {
+  args: {
+    html: sampleHtml,
+    fileName: "document.md",
+  },
+}
+
+export const WithToggle: Story = {
+  render: () => {
+    const [rawMode, setRawMode] = useState(false)
+    return (
+      <MarkdownPreview
+        content={sampleMarkdown}
+        html={sampleHtml}
+        fileName="README.md"
+        rawMode={rawMode}
+        onRawModeChange={setRawMode}
+      />
+    )
+  },
+}
+
+export const RawMode: Story = {
+  args: {
+    content: sampleMarkdown,
+    fileName: "README.md",
+    rawMode: true,
+  },
+}
+
+export const RawModeWithLineNumbers: Story = {
+  args: {
+    content: sampleMarkdown,
+    fileName: "README.md",
+    rawMode: true,
+    showLineNumbers: true,
+  },
+}
+
+export const EmptyState: Story = {
+  args: {
+    fileName: "empty.md",
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    fileName: "loading.md",
+    loading: <div style={{ padding: 20, textAlign: "center" }}>加载中...</div>,
+  },
+}
+
+export const LongContent: Story = {
+  args: {
+    content: `# Long Document
+
+${Array.from(
+  { length: 50 },
+  (_, i) => `## Section ${i + 1}
+
+This is section ${i + 1} with some content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+- Point one
+- Point two
+- Point three
+
+\`\`\`javascript
+const example${i} = 'code block ${i}'
+console.log(example${i})
+\`\`\`
+`,
+).join("\n")}`,
+    fileName: "long-document.md",
+  },
+}
+
+/** 渲染面（.ow-md-rendered）的 §8 排版契约：标题阶 / 引用块 / 行内 code / 表格 / 链接四态 */
+const typographyHtml = `<h1>迁移说明</h1>
+<p>把代码面接到 <code>--ow-code-bg</code> 上，行内 code 走 surface-2 井底加 1px 边。</p>
+<h2>本周进展</h2>
+<blockquote><p>合并前先核对 <code>config.retries</code>，完成度 82% 已写回任务卡。</p></blockquote>
+<h3>耗时</h3>
+<table>
+<thead><tr><th>任务</th><th>负责人</th><th>耗时</th></tr></thead>
+<tbody>
+<tr><td>重建索引</td><td>陈默</td><td>3.2s</td></tr>
+<tr><td>迁移代码面</td><td>林一</td><td>14.8s</td></tr>
+</tbody>
+</table>
+<h2>代码</h2>
+<pre><code>const codeBg = "var(--ow-code-bg)"</code></pre>
+<p>细节见 <a href="https://example.com">迁移记录</a>。</p>`
+
+export const Typography: Story = {
+  args: {
+    html: typographyHtml,
+    fileName: "迁移说明.md",
+  },
+}
+
+/** 双主题对照：渲染面走三档表面，不挂恒亮 paper（§14 白底浅字事故） */
+export const DualTheme: Story = {
+  args: { html: typographyHtml, fileName: "迁移说明.md" },
+  render: (args) => (
+    <div className="flex gap-0 h-[560px]">
+      {(["light", "dark"] as const).map((theme) => (
+        <div key={theme} data-theme={theme} className="flex-1 bg-ow-bg p-4">
+          <MarkdownPreview {...args} />
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/MarkdownPreview/MarkdownPreviewTabsSource.test.mjs

@@ -0,0 +1,31 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const code = source.replace(/\{\/\*[\s\S]*?\*\/\}/g, "").replace(/\/\*[\s\S]*?\*\//g, "")
+
+// 判断表「页签：一套（底线式）」。预览/源码原来是自己搭的分段胶囊托盘：
+// --ow-surface 托盘 + p-0.5 + 选中丸 shadow-[var(--ow-shadow-1)]（贴地带影，§5 硬伤）。
+test("预览/源码切换坐 Tabs 底线式基座，不再手搓分段胶囊", () => {
+  assert.match(source, /import \{ EmptyState, Tabs \} from "\.\.\/\.\.\/primitives"/)
+  assert.match(code, /<Tabs[\s\S]*?size="sm"[\s\S]*?activeKey=\{rawMode \? "raw" : "preview"\}/)
+  assert.match(code, /onChange=\{\(key\) => onRawModeChange\(key === "raw"\)\}/)
+  assert.match(code, /label: "预览"/)
+  assert.match(code, /label: "源码"/)
+})
+
+test("旧托盘的影、面、丸一个都不许留", () => {
+  assert.doesNotMatch(code, /--ow-shadow-1/)
+  assert.doesNotMatch(code, /shadow-\[/)
+  assert.doesNotMatch(code, /data-ow-part="tabs"/)
+  assert.doesNotMatch(code, /--ow-radius-control\)\] p-0\.5/)
+})
+
+// ── W5 终扫：标题栏文件图标 ─────────────────────────────────────────────────
+test("文件图标走 FileIcon 字形族，不再就地手写 stroke-width=2 的 Lucide 式 svg", () => {
+  assert.match(source, /import \{ FileIcon \} from "\.\.\/\.\.\/domain\/files\/FileIcon"/)
+  assert.match(code, /<FileIcon\s+name=\{fileName \|\| "document\.md"\}/)
+  assert.doesNotMatch(code, /strokeWidth="2"/)
+  assert.doesNotMatch(code, /<polyline/)
+})

package/src/components/composite/MarkdownPreview/MarkdownRenderedStyleSource.test.mjs

@@ -0,0 +1,84 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+// MarkdownPreview 走 dangerouslySetInnerHTML，样式全在 .ow-md-rendered 上，
+// 与 Markdown 组件的 .md 是两套选择器。两套必须给出同一份 §8 排版契约，
+// 否则同一份文档在聊天里和在预览面里长得不一样。
+const rendered = await readFile(new URL("../../../../styles/components.css", import.meta.url), "utf8")
+// W-R2 合并：styles/markdown.css 已撤并进 components.css 的 Markdown 段，两套选择器现在同文件。
+const md = rendered
+
+test("rendered-html markdown shares the .md heading ladder tokens", () => {
+  assert.match(rendered, /\.ow-md-rendered h1 \{ font-size: var\(--ow-fs-title-lg\); \}/)
+  assert.match(rendered, /\.ow-md-rendered h2 \{ font-size: var\(--ow-fs-title-md\); \}/)
+  assert.match(rendered, /\.ow-md-rendered h3 \{ font-size: var\(--ow-fs-body\); \}/)
+  // em 倍率台阶是旧口径，已换成 token 台阶
+  assert.doesNotMatch(rendered, /\.ow-md-rendered h[123] \{ font-size: [\d.]+em; \}/)
+  for (const token of ["--ow-fs-title-lg", "--ow-fs-title-md"]) {
+    assert.ok(md.includes(token), `.md 段也须用 ${token}，两套选择器不得分叉`)
+  }
+})
+
+// §7 行内 code：surface-2 井底 ＋1px 边 ＋radius 4 ＋0.9em。
+test("rendered-html inline code matches the bordered nested well", () => {
+  assert.match(
+    rendered,
+    /\.ow-md-rendered code \{[^}]*font-size: 0\.9em;[^}]*border-radius: var\(--ow-radius-key\);[^}]*border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);[^}]*background: var\(--ow-surface-2\);/,
+  )
+  assert.match(rendered, /\.ow-md-rendered pre code \{[^}]*border: 0;/)
+})
+
+// 代码面＝--ow-code-bg 嵌套井 ＋1px 边 ＋radius 8 ＋13 mono（ui-terminal-code 卡）。
+test("rendered-html code face uses the code-bg well at the 13px mono metric", () => {
+  assert.match(
+    rendered,
+    /\.ow-md-rendered pre \{[^}]*border-radius: var\(--ow-radius-sm\);[^}]*background: var\(--ow-code-bg\);[^}]*font: 400 var\(--ow-fs-code\)\/var\(--ow-lh-code\) var\(--ow-font-mono\);/,
+  )
+  assert.doesNotMatch(rendered, /\.ow-md-rendered pre \{[^}]*var\(--ow-radius-sm, 6px\)/)
+})
+
+// §6 链接四态 + §5 表格立面。
+test("rendered-html links and tables carry the full DS2 state set", () => {
+  assert.match(rendered, /\.ow-md-rendered a:visited \{ color: var\(--ow-link\); \}/)
+  assert.match(
+    rendered,
+    // 焦点环三件套（既定态）：环宽/环色/留白缝全走 token，不写死 2px/2px
+    /\.ow-md-rendered a:focus-visible \{[^}]*outline: var\(--ow-focus-ring-w\) solid var\(--ow-focus-ring\);[^}]*outline-offset: var\(--ow-focus-ring-offset\);/,
+  )
+  // R2 · L1-3-1：与 .md 并轨——只画行线（border-top），格间无竖线；数据格 --ow-text-2。
+  assert.match(
+    rendered,
+    /\.ow-md-rendered th,\s*\n\.ow-md-rendered td \{[^}]*border-top: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);/,
+  )
+  const renderedCell = rendered.match(/\.ow-md-rendered th,\s*\n\.ow-md-rendered td \{[^}]*\}/)?.[0] ?? ""
+  assert.doesNotMatch(renderedCell, /\n\s*border: /)
+  assert.match(renderedCell, /color: var\(--ow-text-2\)/)
+  assert.match(rendered, /\.ow-md-rendered th \{[^}]*background: var\(--ow-surface-2\);/)
+})
+
+// 引用块与 .md 同形：贴地 1px 边 ＋ 左侧 2px 引导条（§5，0 影）。
+test("rendered-html blockquote matches the grounded quote shape", () => {
+  assert.match(
+    rendered,
+    /\.ow-md-rendered blockquote \{[^}]*border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);[^}]*border-left: 2px solid var\(--ow-border-strong\);[^}]*background: var\(--ow-surface\);/,
+  )
+})
+
+// 列表标记：两套选择器都要在全局 reset 之后把 list-style 补回，否则同一份文档
+// 在聊天里有圆点、在预览面里没有（W0 断链）。
+test("rendered-html lists restore the same bullet and numbering ladder as .md", () => {
+  assert.match(rendered, /\.ow-md-rendered ul \{ list-style: disc outside; \}/)
+  assert.match(rendered, /\.ow-md-rendered ol \{ list-style: decimal outside; \}/)
+  assert.match(rendered, /\.ow-md-rendered li::marker \{ color: var\(--ow-text-3\); \}/)
+  assert.match(md, /\.md ul \{ list-style: disc outside; \}/)
+  assert.match(md, /\.md ol \{ list-style: decimal outside; \}/)
+})
+
+// §2/§14：--ow-paper 只属文档纸面，且纸面恒亮——挂到随主题翻转的渲染面上
+// 会在暗档做出白底浅字。MarkdownPreview 走三档表面，不引 paper。
+test("markdown preview does not pin the constant paper token onto a theme-following face", async () => {
+  const preview = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+  assert.doesNotMatch(preview, /--ow-paper/)
+  assert.doesNotMatch(rendered, /\.ow-md-rendered[^{]*\{[^}]*--ow-paper/)
+})

package/src/components/composite/MarkdownPreview/index.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import type { ComponentProps, ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { FileIcon } from "../../domain/files/FileIcon"
+import { EmptyState, Tabs } from "../../primitives"
+
+// ─── MarkdownPreview ───
+
+export type MarkdownPreviewProps = ComponentProps<"div"> & {
+  /** Markdown 原始文本 */
+  content?: string
+  /** 已渲染的 HTML（优先使用，跳过内部渲染） */
+  html?: string
+  /** 标题栏显示名称 */
+  fileName?: string
+  /** 自定义加载指示器 */
+  loading?: ReactNode
+  /** 显示行号 */
+  showLineNumbers?: boolean
+  /** 是否显示原始 Markdown 源码（默认 false，显示渲染结果） */
+  rawMode?: boolean
+  /** 切换原始/预览模式回调 */
+  onRawModeChange?: (raw: boolean) => void
+  /**
+   * 裸档：去掉自带卡片立面与标题栏 —— 坐进 `FilePreviewDialog` 壳里时用，
+   * 避免壳的 48 标题栏与本件标题栏、壳的模态立面与本件卡片边框两两重叠。
+   */
+  bare?: boolean
+}
+
+export function MarkdownPreview({
+  className = "",
+  content = "",
+  html,
+  fileName,
+  loading,
+  showLineNumbers = false,
+  rawMode = false,
+  onRawModeChange,
+  bare = false,
+  children,
+  ...props
+}: MarkdownPreviewProps) {
+  return (
+    <div
+      data-slot="md-preview"
+      data-ow-chrome={bare ? "bare" : "card"}
+      className={cn(
+        "flex flex-col w-full h-full overflow-hidden",
+        bare
+          ? "bg-transparent"
+          : // 卡骨架（既定态）：1px --ow-border ＋ r12 ＋ 零影；原用 border-strong 比骨架重一档
+            "[border-radius:var(--ow-radius-card)] border border-[color:var(--ow-border)] bg-[var(--ow-bg)]",
+        className,
+      )}
+      {...props}
+    >
+      {/* Header */}
+      {!bare && (
+        <div
+          data-ow-part="header"
+          className="flex items-center justify-between py-2.5 px-3.5 border-b border-ow-border flex-shrink-0"
+        >
+          <div
+            data-ow-part="filename"
+            className="flex items-center gap-2 font-medium text-ow-fs-ui leading-none text-ow-text"
+          >
+            {/* §7 文件类型图标＝单色字形 ＋ 扩展名 mono 标签，走 domain/files/FileIcon；
+                原来是就地手写的 24 网格 stroke-width=2 Lucide 式 svg（描边配重与档位都
+                脱离图标族，也不带扩展名标签）。 */}
+            <FileIcon
+              name={fileName || "document.md"}
+              className="text-ow-text-3 flex-shrink-0"
+              width={16}
+              height={16}
+            />
+            <span>{fileName || "document.md"}</span>
+          </div>
+          {/* 预览/源码＝页签，不是分段胶囊：走 Tabs 底线式一套（原来的 surface 托盘 ＋
+              shadow-1 选中丸是贴地带影，§5 硬伤，已删）。 */}
+          {onRawModeChange && (
+            <Tabs
+              className="flex-shrink-0"
+              size="sm"
+              items={[
+                { key: "preview", label: "预览" },
+                { key: "raw", label: "源码" },
+              ]}
+              activeKey={rawMode ? "raw" : "preview"}
+              onChange={(key) => onRawModeChange(key === "raw")}
+            />
+          )}
+        </div>
+      )}
+
+      {/* Body */}
+      {/* 卡骨架内距：头 14/10（横/纵）＝头脚档，体 14/12＝体档；原为 16/20，两档都在表外，
+          且头体横向内距不同宽（截图上肉眼可见错缝）。 */}
+      <div data-ow-part="body" className={cn("flex-1 min-h-0 overflow-y-auto", bare ? "p-0" : "py-3 px-3.5")}>
+        {!content && !html ? (
+          /* W3 终验 G5：空态走 EmptyState 母题；loading 槽仍由调用方注入。 */
+          <div data-ow-part="empty" className="flex items-center justify-center h-full">
+            {loading || <EmptyState message="暂无内容" />}
+          </div>
+        ) : rawMode ? (
+          <pre
+            data-ow-part="raw"
+            className="m-0 font-normal text-ow-fs-ui leading-[1.6] font-[family-name:var(--ow-font-mono)] text-ow-text whitespace-pre-wrap break-words"
+          >
+            {showLineNumbers ? (
+              content.split("\n").map((line, i) => (
+                <div key={i} data-ow-part="line" className="flex gap-3">
+                  {/* §7 读数：行号一律 mono＋tabular-nums（mono 由 pre 继承） */}
+                  <span
+                    data-ow-part="line-num"
+                    className="flex-shrink-0 w-8 text-right tabular-nums text-ow-text-3 select-none"
+                  >
+                    {i + 1}
+                  </span>
+                  <code>{line}</code>
+                </div>
+              ))
+            ) : (
+              <code>{content}</code>
+            )}
+          </pre>
+        ) : html ? (
+          <div data-ow-part="rendered" className="ow-md-rendered" dangerouslySetInnerHTML={{ __html: html }} />
+        ) : (
+          /* 无 html 传入时简单显示 content（消费方应自行渲染 MD → HTML） */
+          <div data-ow-part="rendered" className="ow-md-rendered">
+            <pre style={{ whiteSpace: "pre-wrap", fontFamily: "var(--ow-font-sans)" }}>{content}</pre>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/composite/MarkdownPreviewModalView/MarkdownPreviewModalView.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { MarkdownPreviewModalView } from "./index"
+
+const meta = {
+  title: "Composite/MarkdownPreviewModalView",
+  component: MarkdownPreviewModalView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof MarkdownPreviewModalView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleSource = `# 产品文档
+
+这是一个示例文档，展示 Markdown 预览功能。
+
+## 功能特性
+
+- 支持标准 Markdown 语法
+- 实时预览
+- 代码高亮
+
+## 代码示例
+
+\`\`\`typescript
+function hello(name: string) {
+  console.log(\`Hello, \${name}!\`)
+}
+\`\`\`
+
+## 结论
+
+这是一个完整的示例文档。`
+
+const samplePreview = (
+  <div style={{ padding: 24, fontFamily: "var(--ow-font-sans)", color: "var(--ow-text)" }}>
+    <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 16 }}>产品文档</h1>
+    <p style={{ marginBottom: 16 }}>这是一个示例文档，展示 Markdown 预览功能。</p>
+    <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 12 }}>功能特性</h2>
+    <ul style={{ marginBottom: 16, paddingLeft: 24 }}>
+      <li>支持标准 Markdown 语法</li>
+      <li>实时预览</li>
+      <li>代码高亮</li>
+    </ul>
+    <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 12 }}>代码示例</h2>
+    <pre style={{ padding: 12, background: "var(--ow-surface)", borderRadius: 6, marginBottom: 16 }}>
+      <code>{`function hello(name: string) {\n  console.log(\`Hello, \${name}!\`)\n}`}</code>
+    </pre>
+    <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 12 }}>结论</h2>
+    <p>这是一个完整的示例文档。</p>
+  </div>
+)
+
+export const Default: Story = {
+  args: {
+    source: sampleSource,
+    preview: samplePreview,
+    onClose: () => console.log("close"),
+    onCopy: async (source) => {
+      await navigator.clipboard.writeText(source)
+      console.log("copied")
+    },
+  },
+}
+
+const longSource = Array.from(
+  { length: 30 },
+  (_, i) => `## 第 ${i + 1} 节\n\n这一节用于验证长文档在预览区内的滚动表现，正文保持在模态内部滚动而不是撑破容器。`,
+).join("\n\n")
+
+export const LongContent: Story = {
+  args: {
+    source: longSource,
+    preview: (
+      <div style={{ fontFamily: "var(--ow-font-sans)", color: "var(--ow-text)" }}>
+        {Array.from({ length: 30 }, (_, i) => (
+          <div key={i}>
+            <h2 style={{ fontSize: 18, fontWeight: 600, margin: "24px 0 12px" }}>第 {i + 1} 节</h2>
+            <p style={{ margin: 0 }}>
+              这一节用于验证长文档在预览区内的滚动表现，正文保持在模态内部滚动而不是撑破容器。
+            </p>
+          </div>
+        ))}
+      </div>
+    ),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const ShortContent: Story = {
+  args: {
+    source: "# 简短标题\n\n这是一段简短的内容。",
+    preview: (
+      <div style={{ padding: 24, fontFamily: "var(--ow-font-sans)", color: "var(--ow-text)" }}>
+        <h1 style={{ fontSize: 24, fontWeight: 600, marginBottom: 16 }}>简短标题</h1>
+        <p>这是一段简短的内容。</p>
+      </div>
+    ),
+    onClose: () => console.log("close"),
+  },
+}

package/src/components/composite/MarkdownPreviewModalView/index.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { type ReactNode, useState } from "react"
+import { FilePreviewDialog } from "../../domain/files/PreviewDialog"
+import { Button } from "../../primitives"
+import { SegmentedControl } from "../../primitives/SegmentedControl"
+import { Check, Copy } from "../Icons"
+
+export interface MarkdownPreviewModalViewProps {
+  source: string
+  preview: ReactNode
+  onClose: () => void
+  onCopy?: (source: string) => Promise<void> | void
+}
+
+/**
+ * MarkdownPreviewModalView —— 已并入 DS 2.0 预览壳。
+ *
+ * 结构不再自管：模态立面、48 标题栏、动作组、纸面/无衬两制式衬底全部由
+ * `FilePreviewDialog` 承担；本件只剩「预览 / Markdown」切换与复制两个行为。
+ * 预览页走 **纸面 paper**（文档类恒白纸页），Markdown 源码走 **plain**（自带 mono 排版）。
+ *
+ * @deprecated 直接用 `FilePreviewDialog`（domain/files/PreviewDialog）并把切换/复制放进
+ * 它的 `actions` 槽；本件作薄兼容层保留，供 DesktopChatMessageView 等旧调用点过渡。
+ */
+export function MarkdownPreviewModalView({
+  source,
+  preview,
+  onClose,
+  onCopy,
+}: MarkdownPreviewModalViewProps): React.ReactElement {
+  const [tab, setTab] = useState<"preview" | "markdown">("preview")
+  const [copied, setCopied] = useState(false)
+
+  const copySource = async () => {
+    try {
+      if (onCopy) await onCopy(source)
+      else await navigator.clipboard.writeText(source)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Clipboard availability is controlled by the host environment.
+    }
+  }
+
+  return (
+    <FilePreviewDialog
+      open
+      fileName="消息内容"
+      monoTitle={false}
+      surface={tab === "preview" ? "paper" : "plain"}
+      onClose={onClose}
+      actions={
+        <>
+          <SegmentedControl
+            aria-label="预览方式"
+            size="sm"
+            value={tab}
+            onChange={(next) => setTab(next as "preview" | "markdown")}
+            options={[
+              { value: "preview", label: "预览" },
+              { value: "markdown", label: "Markdown" },
+            ]}
+          />
+          {/* 复制态双编码（R1）：图标由 Copy 换成 Check（形），文案同步换字（文字）。 */}
+          <Button variant="ghost" size="sm" type="button" onClick={copySource}>
+            {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+            <span>{copied ? "已复制" : "复制"}</span>
+          </Button>
+        </>
+      }
+    >
+      {tab === "preview" ? (
+        <div data-ow-part="content">{preview}</div>
+      ) : (
+        <pre
+          data-ow-part="source"
+          className="m-0 overflow-auto whitespace-pre-wrap break-words p-4 font-[family-name:var(--ow-font-mono)] text-ow-fs-ui font-normal leading-[1.6] text-[color:var(--ow-text-2)]"
+        >
+          <code>{source}</code>
+        </pre>
+      )}
+    </FilePreviewDialog>
+  )
+}

package/src/components/composite/MessageFeedbackDialog/MessageFeedbackDialog.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Button } from "../../primitives"
+import { MessageFeedbackDialog } from "./index"
+
+const meta = {
+  title: "Composite/MessageFeedbackDialog",
+  component: MessageFeedbackDialog,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof MessageFeedbackDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false)
+    const [result, setResult] = useState<string>("")
+
+    return (
+      <div style={{ padding: 40 }}>
+        <Button onClick={() => setOpen(true)}>打开反馈对话框</Button>
+
+        {result && (
+          <div style={{ marginTop: 20, padding: 16, background: "var(--ow-surface)", borderRadius: 8 }}>
+            <strong>提交结果：</strong>
+            <pre style={{ marginTop: 8 }}>{result}</pre>
+          </div>
+        )}
+
+        {open && (
+          <MessageFeedbackDialog
+            onClose={() => setOpen(false)}
+            onSubmit={(submission) => {
+              setResult(JSON.stringify(submission, null, 2))
+              setOpen(false)
+            }}
+          />
+        )}
+      </div>
+    )
+  },
+}
+
+export const AlwaysOpen: Story = {
+  render: () => (
+    <MessageFeedbackDialog
+      onClose={() => console.log("close")}
+      onSubmit={(submission) => console.log("submit", submission)}
+    />
+  ),
+}
+
+/** 白标租户：productName 驱动「帮助改进 {productName}」；缺省 "Orbitwork"。 */
+export const TenantBranded: Story = {
+  render: () => (
+    <MessageFeedbackDialog
+      productName="ACME Suite"
+      onClose={() => console.log("close")}
+      onSubmit={(submission) => console.log("submit", submission)}
+    />
+  ),
+}