npm - @orbit-work/ui - Versions diffs - 0.1.0 - Mend

@orbit-work/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (755) hide show

package/src/components/composite/CodeBlock/CodeBlock.stories.tsx ADDED Viewed

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { CodeBlock } from "./index"
+const meta = {
+  title: "Composite/CodeBlock",
+  component: CodeBlock,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CodeBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+const typescriptCode = `function greet(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+const result = greet('World');
+console.log(result);`
+const pythonCode = `def fibonacci(n: int) -> list[int]:
+    """Generate Fibonacci sequence up to n terms."""
+    fib = [0, 1]
+    for i in range(2, n):
+        fib.append(fib[i-1] + fib[i-2])
+    return fib
+print(fibonacci(10))`
+const bashCode = `#!/bin/bash
+# Deploy script
+npm run build
+docker build -t myapp:latest .
+docker push myapp:latest
+kubectl apply -f deployment.yaml`
+const jsonCode = `{
+  "name": "my-app",
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "^18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build"
+  }
+}`
+const sqlCode = `SELECT u.id, u.name, COUNT(o.id) AS order_count
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE u.created_at >= '2024-01-01'
+GROUP BY u.id, u.name
+HAVING COUNT(o.id) > 5
+ORDER BY order_count DESC
+LIMIT 10;`
+export const TypeScript: Story = {
+  args: {
+    language: "typescript",
+    children: typescriptCode,
+    onCopy: () => console.log("copied"),
+  },
+}
+export const Python: Story = {
+  args: {
+    language: "python",
+    children: pythonCode,
+  },
+}
+export const Bash: Story = {
+  args: {
+    language: "bash",
+    children: bashCode,
+  },
+}
+export const JSON: Story = {
+  args: {
+    language: "json",
+    children: jsonCode,
+  },
+}
+export const SQL: Story = {
+  args: {
+    language: "sql",
+    children: sqlCode,
+  },
+}
+export const WithLineNumbers: Story = {
+  args: {
+    language: "typescript",
+    children: typescriptCode,
+    showLineNumbers: true,
+  },
+}
+export const WithRunButton: Story = {
+  args: {
+    language: "bash",
+    children: "npm test\nnpm run build",
+    onRun: () => console.log("running code"),
+    runLabel: "运行",
+  },
+}
+export const JavaScript: Story = {
+  args: {
+    language: "javascript",
+    children: `const users = [
+  { id: 1, name: 'Alice', role: 'admin' },
+  { id: 2, name: 'Bob', role: 'user' },
+  { id: 3, name: 'Charlie', role: 'user' }
+];
+const admins = users
+  .filter(u => u.role === 'admin')
+  .map(u => u.name);
+console.log(admins); // ['Alice']`,
+  },
+}
+export const Go: Story = {
+  args: {
+    language: "go",
+    children: `package main
+import (
+    "fmt"
+    "net/http"
+)
+func handler(w http.ResponseWriter, r *http.Request) {
+    fmt.Fprintf(w, "Hello, %s!", r.URL.Path[1:])
+}
+func main() {
+    http.HandleFunc("/", handler)
+    http.ListenAndServe(":8080", nil)
+}`,
+  },
+}
+export const Rust: Story = {
+  args: {
+    language: "rust",
+    children: `fn main() {
+    let numbers = vec![1, 2, 3, 4, 5];
+    let sum: i32 = numbers
+        .iter()
+        .filter(|&&x| x % 2 == 0)
+        .sum();
+    println!("Sum of even numbers: {}", sum);
+}`,
+  },
+}
+export const CSS: Story = {
+  args: {
+    language: "css",
+    /* 示例正文本身也照 DS2 写：贴地零影、hover 只递进底色、逐属性过渡 + --ow-ease-beacon
+       （原片段演示的是 §9 明禁的 hover 位移 ＋ 贴地投影，换成合规写法）。 */
+    children: `.button {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  background: var(--ow-surface);
+  border: 1px solid var(--ow-border);
+  border-radius: var(--ow-radius-action);
+  font-weight: 500;
+  transition: background-color var(--ow-dur-1) var(--ow-ease-beacon);
+}
+.button:hover {
+  background: var(--ow-hover);
+}`,
+  },
+}
+export const HTML: Story = {
+  args: {
+    language: "html",
+    children: `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>示例页面</title>
+</head>
+<body>
+  <header>
+    <h1>欢迎</h1>
+    <nav>
+      <a href="#home">首页</a>
+      <a href="#about">关于</a>
+    </nav>
+  </header>
+  <main>
+    <p>这是主要内容区域。</p>
+  </main>
+</body>
+</html>`,
+  },
+}
+export const PlainText: Story = {
+  args: {
+    language: "text",
+    children: `This is plain text without any syntax highlighting.
+It can contain multiple lines.
+And special characters: @#$%^&*()`,
+  },
+}
+export const ShortSnippet: Story = {
+  args: {
+    language: "typescript",
+    children: 'const greeting = "Hello, World!";',
+  },
+}
+export const LongCode: Story = {
+  args: {
+    language: "typescript",
+    showLineNumbers: true,
+    children: `import { useState, useEffect, useCallback } from 'react';
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: 'admin' | 'user' | 'guest';
+}
+export function useUsers() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const fetchUsers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/users');
+      if (!response.ok) {
+        throw new Error('Failed to fetch users');
+      }
+      const data = await response.json();
+      setUsers(data);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Unknown error'));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+  const addUser = useCallback(async (user: Omit<User, 'id'>) => {
+    try {
+      const response = await fetch('/api/users', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(user),
+      });
+      if (!response.ok) throw new Error('Failed to add user');
+      const newUser = await response.json();
+      setUsers(prev => [...prev, newUser]);
+    } catch (err) {
+      console.error('Add user failed:', err);
+    }
+  }, []);
+  return { users, loading, error, addUser, refetch: fetchUsers };
+}`,
+  },
+}
+/**
+ * 常暗域口径（ui-terminal-code 卡）：常暗只属**终端**；代码块与 diff **随主题翻转**。
+ * 两半应当一个浅底一个暗底 —— 若两边同色，说明有人把代码面钉成了局部常暗区。
+ */
+export const DualTheme: Story = {
+  args: { language: "typescript", children: typescriptCode },
+  render: (args) => (
+    <div className="flex">
+      {(["light", "dark"] as const).map((theme) => (
+        <div key={theme} data-theme={theme} className="flex-1 bg-ow-bg p-4">
+          <div className="mb-2 font-[family-name:var(--ow-font-mono)] text-xs text-ow-text-3">{theme}</div>
+          <CodeBlock {...args} />
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/CodeBlock/CodeFaceSource.test.mjs ADDED Viewed

@@ -0,0 +1,89 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+const codeBlock = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const codeDiff = await readFile(new URL("../CodeDiff/index.tsx", import.meta.url), "utf8")
+const components = await readFile(new URL("../../../../styles/components.css", import.meta.url), "utf8")
+const shiki = await readFile(new URL("../../../utils/shiki.ts", import.meta.url), "utf8")
+// ui-terminal-code 卡定稿：「终端=常暗组件」「代码块与 diff=随主题翻转」。
+// 代码面不得挂局部 data-theme="dark"，也不得引恒定终端 token。
+test("code faces follow the theme instead of pinning a locally-dark domain", () => {
+  for (const source of [codeBlock, codeDiff]) {
+    // JSX 属性位（行首）上不得出现 data-theme；注释里引用共享 CSS 选择器不算
+    assert.doesNotMatch(source, /^\s*data-theme=/m)
+    assert.doesNotMatch(source, /--ow-term-|--ow-ansi-/)
+  }
+  // 暗档换色走属性驱动，不引 prefers-color-scheme 双轨：语法色由 --ow-syn-* 自己翻档，
+  // shiki 只吐 var(--ow-shiki-*)，在 components.css 一次性接到语法盘上（W5 去痕）。
+  assert.match(
+    components,
+    /\[data-slot="code-block"\],\s*\n\[data-slot="code-diff"\] \{[^}]*--ow-shiki-token-keyword: var\(--ow-syn-keyword\)/,
+  )
+  assert.doesNotMatch(components, /prefers-color-scheme[\s\S]{0,400}data-slot="code-/)
+  // 旧的 shiki 双主题通道（--shiki-dark / --shiki-dark-bg）已退役，别回流
+  assert.doesNotMatch(components, /var\(--shiki-dark/)
+  assert.doesNotMatch(shiki, /var\(--shiki-dark/)
+})
+// W5 去痕：高亮器原来挂 shiki 自带的 github-light / github-dark，把 GitHub 的 hex 直接
+// 写进 token.color 再 inline 到 span 上——代码块渲染的是 GitHub 配色，绕开 --ow-syn-*，
+// 同一份语法语义在库里存了两套盘。改用 CSS 变量输出模式后 shiki 只吐 var(--ow-shiki-*)。
+test("the highlighter emits CSS variables instead of a bundled GitHub palette", () => {
+  // 只看代码里的主题名（引号内）——文件顶部的去痕说明里会提到这两个旧名字
+  assert.doesNotMatch(shiki, /"github-(light|dark)"/)
+  assert.match(shiki, /createCssVariablesTheme\(\{[\s\S]*?variablePrefix: "--ow-shiki-"/)
+  assert.match(shiki, /themes: \[ds2ShikiTheme\]/)
+  assert.match(shiki, /theme: DS2_SHIKI_THEME_NAME/)
+  // 单主题输出：不得再走 codeToTokens 的 themes: { light, dark } 双主题分支
+  assert.doesNotMatch(shiki, /themes: \{\s*dark:/)
+})
+// §5 表面三档：代码底＝嵌套井 --ow-code-bg（= surface-2），贴地 0 影＋1px 边。
+test("code faces sit on the nested-well surface with a hairline border", () => {
+  assert.match(codeBlock, /bg-\[color:var\(--ow-code-bg\)\] border border-ow-border/)
+  assert.match(codeDiff, /bg-\[color:var\(--ow-code-bg\)\] border border-ow-border/)
+  for (const source of [codeBlock, codeDiff]) {
+    assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow/)
+  }
+})
+// §7 度量：代码 13 mono；圆角 8（--ow-radius-sm），不是卡片档 12。
+test("code faces use the 13px mono metric and the 8px code radius", () => {
+  // 长写法（不是 font 简写）：简写会把 font-variant-numeric 重置成 initial，抹掉读数口径
+  assert.match(codeBlock, /fontSize: "var\(--ow-fs-code\)"/)
+  assert.match(codeBlock, /lineHeight: "var\(--ow-lh-code\)"/)
+  assert.match(codeBlock, /fontFamily: "var\(--ow-font-mono\)"/)
+  assert.doesNotMatch(codeBlock, /\bfont: "400 var\(--ow-fs-code\)/)
+  assert.doesNotMatch(codeBlock, /12\.5px/)
+  assert.match(codeDiff, /font-mono text-ow-fs-code tabular-nums/)
+  assert.match(codeDiff, /\[border-radius:var\(--ow-radius-sm\)\]/)
+  // W5：两张代码面的圆角都写在组件类名里（外部 CSS 不再另兜一份）
+  assert.match(codeBlock, /\[border-radius:var\(--ow-radius-sm\)\]/)
+  assert.doesNotMatch(components, /\[data-slot="code-block"\] \{ border-radius:/)
+})
+// CodePreview 通过 data-ow-part="code" 给内部 CodeBlock 撑高（components.css 的 flex 规则），
+// 只有 CodeBlock 透传 rest props 时这条规则才生效。
+test("code faces forward host attributes so the preview shell can target their parts", () => {
+  assert.match(codeBlock, /export type CodeBlockProps = Omit<ComponentProps<"div">, "children" \| "onCopy"> &/)
+  assert.match(codeDiff, /export type CodeDiffProps = Omit<ComponentProps<"div">, "children"> &/)
+  // rest 前置：壳层透传不得覆盖组件自身的 data-slot / data-ow-part
+  assert.match(codeBlock, /\{\.\.\.rest\}\s*\n\s*data-slot="code-block"/)
+  assert.match(codeDiff, /\{\.\.\.rest\}\s*\n\s*data-slot="code-diff"\s*\n\s*data-ow-part="surface"/)
+  // W2：预览壳自己带 §5 贴地立面，两张代码面在壳内一并交出边与角（一件事只有一层边）。
+  assert.match(
+    components,
+    /\[data-slot="code-preview"\] \[data-slot="code-block"\],\s*\[data-slot="code-preview"\] \[data-slot="code-diff"\] \{ border-radius: 0; border: 0; \}/,
+  )
+})
+// R2 · L2-3-5：代码块不软折行——与 markdown.css 的 `white-space: pre` 同口径，
+// 横滚由 pre 自己接（overflowX），行号才不会与可见行数错位。
+test("代码面不软折行：pre + 自身横滚，不再 pre-wrap / break-word", () => {
+  assert.match(codeBlock, /whiteSpace: "pre",/)
+  assert.match(codeBlock, /overflowX: "auto",/)
+  assert.doesNotMatch(codeBlock, /whiteSpace: "pre-wrap"/)
+  assert.doesNotMatch(codeBlock, /wordBreak: "break-word"/)
+})

package/src/components/composite/CodeBlock/index.tsx ADDED Viewed

@@ -0,0 +1,300 @@
+"use client"
+import type { CSSProperties, ComponentProps } from "react"
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import type { ThemedToken } from "shiki"
+import { cn } from "../../../lib/utils"
+import type { TokenizedCode } from "../../../utils/shiki"
+import { createRawTokens, highlightCode } from "../../../utils/shiki"
+import { Button } from "../../primitives"
+import { Check, Play } from "../Icons"
+export type CodeBlockProps = Omit<ComponentProps<"div">, "children" | "onCopy"> & {
+  /** Programming language (e.g. "javascript", "python", "typescript") */
+  language?: string
+  /** Code content */
+  children: string
+  /** Copy button click handler */
+  onCopy?: () => void
+  /** Run button click handler; when provided a run button shows in the header (e.g. for shell snippets) */
+  onRun?: () => void
+  /** Run button label */
+  runLabel?: string
+  /** Show line numbers */
+  showLineNumbers?: boolean
+  className?: string
+}
+// Shiki 使用位标志表示字体样式: 1=斜体, 2=粗体, 4=下划线
+const isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1
+const isBold = (fontStyle: number | undefined) => fontStyle && fontStyle & 2
+const isUnderline = (fontStyle: number | undefined) => fontStyle && fontStyle & 4
+// 为 tokens 添加键以避免使用数组索引作为 key
+interface KeyedToken {
+  token: ThemedToken
+  key: string
+}
+interface KeyedLine {
+  tokens: KeyedToken[]
+  key: string
+}
+const addKeysToTokens = (lines: ThemedToken[][]): KeyedLine[] =>
+  lines.map((line, lineIdx) => ({
+    key: `line-${lineIdx}`,
+    tokens: line.map((token, tokenIdx) => ({
+      key: `line-${lineIdx}-${tokenIdx}`,
+      token,
+    })),
+  }))
+// 把 shiki 吐出的声明串（"color:var(--ow-shiki-foreground)" 之类）拆成 { color: ... } 对象
+const parseCssDecls = (decls?: string): Record<string, string> => {
+  if (!decls || decls === "inherit" || decls === "transparent") return {}
+  const out: Record<string, string> = {}
+  for (const part of decls.split(";")) {
+    const idx = part.indexOf(":")
+    if (idx <= 0) continue
+    const key = part.slice(0, idx).trim()
+    const value = part.slice(idx + 1).trim()
+    if (key) out[key] = value
+  }
+  return out
+}
+// Token 渲染组件
+// shiki 走 CSS 变量输出模式（src/utils/shiki.ts 的单主题 ds2ShikiTheme），token 颜色
+// 不一定填在 token.color 上，也可能落在 htmlStyle 里——这里统一展开成 inline style。
+// 暗档换色由 --ow-shiki-* → --ow-syn-* 映射（styles/components.css）自己翻档，
+// 旧的 --shiki-dark / --shiki-dark-bg 双主题通道已随单主题改造退役，不再解析。
+const toStyleString = (v: string | number | undefined): string | undefined => (v == null ? undefined : String(v))
+const TokenSpan = ({ token }: { token: ThemedToken }) => {
+  const htmlStyle = (
+    token as ThemedToken & {
+      htmlStyle?: Record<string, string | number | undefined>
+    }
+  ).htmlStyle
+  const tokenColor = toStyleString(htmlStyle?.color ?? token.color)
+  const tokenBg = toStyleString(htmlStyle?.["background-color"])
+  const style: CSSProperties = {
+    color: tokenColor,
+    backgroundColor: token.bgColor ?? tokenBg,
+    fontStyle: isItalic(token.fontStyle) ? "italic" : undefined,
+    fontWeight: isBold(token.fontStyle) ? "bold" : undefined,
+    textDecoration: isUnderline(token.fontStyle) ? "underline" : undefined,
+  }
+  return <span style={style}>{token.content}</span>
+}
+// 行号样式。行号是读数（§7：mono + tabular-nums）——字族从 pre 继承，
+// 但 fontVariantNumeric 在这里显式写一遍，宿主无关（原来只有 CodePreview 壳里补过）。
+const lineNumberStyle: CSSProperties = {
+  display: "inline-block",
+  width: "2.5rem",
+  marginRight: "1rem",
+  textAlign: "right",
+  color: "var(--ow-text-3)",
+  fontVariantNumeric: "tabular-nums",
+  userSelect: "none",
+}
+// 行渲染组件
+const LineSpan = ({
+  keyedLine,
+  showLineNumbers,
+  lineNumber,
+}: {
+  keyedLine: KeyedLine
+  showLineNumbers: boolean
+  lineNumber: number
+}) => (
+  <span style={{ display: "block" }}>
+    {showLineNumbers && <span style={lineNumberStyle}>{lineNumber}</span>}
+    {keyedLine.tokens.length === 0
+      ? "\n"
+      : keyedLine.tokens.map(({ token, key }) => <TokenSpan key={key} token={token} />)}
+  </span>
+)
+const CodeBlockBody = memo(
+  ({
+    tokenized,
+    showLineNumbers,
+  }: {
+    tokenized: TokenizedCode
+    showLineNumbers: boolean
+  }) => {
+    const preStyle = useMemo<CSSProperties>(() => {
+      // shiki 可能把 fg/bg 吐成声明串（"color:var(--ow-shiki-foreground)" 之类），拆开写进 CSS
+      const fgParts = parseCssDecls(tokenized.fg)
+      const bgParts = parseCssDecls(tokenized.bg)
+      const style: CSSProperties = {
+        margin: 0,
+        // §7 度量：代码 13 mono（--ow-fs-code / --ow-lh-code）。
+        // 写长写法而不是 font 简写——简写会把 font-variant-numeric 一并重置成 initial，
+        // 把下面这条读数口径（行号 tabular-nums）连同任何外部继承一起抹掉。
+        fontWeight: 400,
+        fontSize: "var(--ow-fs-code)",
+        lineHeight: "var(--ow-lh-code)",
+        fontFamily: "var(--ow-font-mono)",
+        fontVariantNumeric: "tabular-nums",
+        color: fgParts.color ?? (tokenized.fg === "inherit" ? "var(--ow-text)" : tokenized.fg),
+        backgroundColor: bgParts["background-color"] ?? (tokenized.bg === "transparent" ? "transparent" : tokenized.bg),
+        // R2 · L2-3-5：代码不软折行。pre-wrap + break-word 会把长标识符从中间劈开，
+        // 且 LineSpan 是逐「逻辑行」发号的——折出来的续行拿不到行号，gutter 与可见行数对不上。
+        // 与 markdown.css:48（`white-space: pre; min-width: max-content`）同一口径，
+        // 横向溢出交给 pre 自己滚（overflowX: auto），不撑破 752 的轮宽。
+        whiteSpace: "pre",
+        overflowX: "auto",
+      }
+      return style
+    }, [tokenized.bg, tokenized.fg])
+    const keyedLines = useMemo(() => addKeysToTokens(tokenized.tokens), [tokenized.tokens])
+    return (
+      <pre style={preStyle}>
+        <code style={{ fontFamily: "inherit", fontSize: "inherit" }}>
+          {keyedLines.map((keyedLine, index) => (
+            <LineSpan
+              key={keyedLine.key}
+              keyedLine={keyedLine}
+              showLineNumbers={showLineNumbers}
+              lineNumber={index + 1}
+            />
+          ))}
+        </code>
+      </pre>
+    )
+  },
+  (prevProps, nextProps) =>
+    prevProps.tokenized === nextProps.tokenized && prevProps.showLineNumbers === nextProps.showLineNumbers,
+)
+CodeBlockBody.displayName = "CodeBlockBody"
+const CodeBlockContent = ({
+  code,
+  language,
+  showLineNumbers = false,
+}: {
+  code: string
+  language: string
+  showLineNumbers?: boolean
+}) => {
+  // 首帧（SSR + 客户端水合）始终使用原始 tokens，避免服务端/客户端
+  // shiki 缓存命中情况不一致导致的 hydration mismatch。
+  const [tokenized, setTokenized] = useState<TokenizedCode>(() => createRawTokens(code))
+  const asyncKeyRef = useRef({ code, language })
+  useEffect(() => {
+    // 切换文件时先回到 raw tokens，避免旧高亮结果残留导致闪烁。
+    setTokenized(createRawTokens(code))
+    asyncKeyRef.current = { code, language }
+    let cancelled = false
+    const syncCached = highlightCode(code, language)
+    if (syncCached) {
+      setTokenized(syncCached)
+      return
+    }
+    highlightCode(code, language, (result) => {
+      if (!cancelled && asyncKeyRef.current.code === code && asyncKeyRef.current.language === language) {
+        setTokenized(result)
+      }
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [code, language])
+  return <CodeBlockBody showLineNumbers={showLineNumbers} tokenized={tokenized} />
+}
+/**
+ * Styled code block with syntax highlighting powered by Shiki.
+ * Supports 100+ languages with automatic light/dark theme switching.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock language="typescript" showLineNumbers>
+ *   {`function greet(name: string) { return \`Hello, \${name}!\`; }`}
+ * </CodeBlock>
+ * ```
+ */
+export function CodeBlock({
+  language = "text",
+  children,
+  onCopy,
+  onRun,
+  runLabel = "运行",
+  showLineNumbers = false,
+  className = "",
+  ...rest
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+  const [ran, setRan] = useState(false)
+  const handleCopy = useCallback(() => {
+    if (onCopy) {
+      onCopy()
+    } else if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(children).catch((err) => {
+        console.error("Failed to copy code:", err)
+      })
+    }
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [children, onCopy])
+  const handleRun = useCallback(() => {
+    onRun?.()
+    setRan(true)
+    setTimeout(() => setRan(false), 2000)
+  }, [onRun])
+  return (
+    // 代码面＝§5 嵌套井档：--ow-code-bg（= surface-2）＋1px 边，贴地无影。
+    // ui-terminal-code 卡定稿：代码块随主题翻转（常暗只属终端），故此处不挂局部 data-theme。
+    <div
+      {...rest}
+      data-slot="code-block"
+      className={cn(
+        // §7 形状：代码面落 8（--ow-radius-sm），形状声明写在组件类名里、不靠外部 CSS 兜。
+        "bg-[color:var(--ow-code-bg)] border border-ow-border [border-radius:var(--ow-radius-sm)] px-4 py-3.5",
+        className,
+      )}
+    >
+      {/* 头行＝语言名读数：mono + tabular-nums，字号落 --ow-fs-mark-md（§7 字阶，不用 Tailwind 字面档）。
+          右侧两枚按钮是界面字（§8 sans）——mono 只给读数，标签不跟着走。 */}
+      <div className="flex justify-between items-center font-normal text-ow-fs-mark-md leading-none font-[family-name:var(--ow-font-mono)] tabular-nums text-ow-text-3 mb-2.5">
+        <span>{language}</span>
+        <span className="inline-flex items-center gap-3">
+          {onRun && (
+            <Button variant="text" size="sm" type="button" onClick={handleRun} aria-label="运行代码">
+              {/* §7 图标：▶/✓ 字符不是图标系统——落 Icons 的 Play/Check 字形（16 档，色随字） */}
+              {ran ? (
+                <Check aria-hidden="true" width={16} height={16} />
+              ) : (
+                <Play aria-hidden="true" width={16} height={16} />
+              )}
+              {ran ? "已运行" : runLabel}
+            </Button>
+          )}
+          <Button variant="text" size="sm" type="button" onClick={handleCopy} aria-label="复制代码">
+            {copied && <Check aria-hidden="true" width={16} height={16} />}
+            {copied ? "已复制" : "复制"}
+          </Button>
+        </span>
+      </div>
+      <CodeBlockContent code={children} language={language} showLineNumbers={showLineNumbers} />
+    </div>
+  )
+}