@orbit-work/ui 0.1.0

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

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { CodeDiff } from "./index"
+
+const meta = {
+  title: "Composite/CodeDiff",
+  component: CodeDiff,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CodeDiff>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const simpleDiff = `--- a/src/utils.ts
++++ b/src/utils.ts
+@@ -1,5 +1,6 @@
+ function greet(name: string): string {
+-  return \`Hello, \${name}!\`
++  const greeting = 'Hello'
++  return \`\${greeting}, \${name}!\`
+ }
+
+ const message = greet('World')`
+
+const multiHunkDiff = `--- a/src/app.ts
++++ b/src/app.ts
+@@ -10,7 +10,8 @@ import express from 'express'
+ const app = express()
+
+-app.use(bodyParser.json())
++app.use(express.json())
++app.use(express.urlencoded({ extended: true }))
+
+ app.get('/', (req, res) => {
+   res.send('Hello World')
+@@ -25,6 +26,10 @@ app.post('/api/users', (req, res) => {
+   res.json({ id: 123, ...req.body })
+ })
+
++app.delete('/api/users/:id', (req, res) => {
++  res.status(204).send()
++})
++
+ app.listen(3000, () => {
+   console.log('Server started')
+ })`
+
+const pythonDiff = `--- a/main.py
++++ b/main.py
+@@ -1,8 +1,10 @@
+ def fibonacci(n):
++    """Calculate the nth Fibonacci number."""
+     if n <= 1:
+         return n
+-    return fibonacci(n-1) + fibonacci(n-2)
++    a, b = 0, 1
++    for _ in range(n):
++        a, b = b, a + b
++    return a
+
+-for i in range(10):
+-    print(fibonacci(i))
++print([fibonacci(i) for i in range(10)])`
+
+export const Default: Story = {
+  args: {
+    children: simpleDiff,
+    language: "typescript",
+    showLineNumbers: true,
+  },
+}
+
+export const WithFilename: Story = {
+  args: {
+    children: simpleDiff,
+    language: "typescript",
+    filename: "src/utils.ts",
+    showLineNumbers: true,
+  },
+}
+
+export const WithoutLineNumbers: Story = {
+  args: {
+    children: simpleDiff,
+    language: "typescript",
+    showLineNumbers: false,
+  },
+}
+
+export const MultipleHunks: Story = {
+  args: {
+    children: multiHunkDiff,
+    language: "typescript",
+    filename: "src/app.ts",
+    showLineNumbers: true,
+  },
+}
+
+export const PythonCode: Story = {
+  args: {
+    children: pythonDiff,
+    language: "python",
+    filename: "main.py",
+    showLineNumbers: true,
+  },
+}
+
+export const LargeDiff: Story = {
+  args: {
+    children: `--- a/src/components/Button.tsx
++++ b/src/components/Button.tsx
+@@ -1,15 +1,30 @@
+ import React from 'react'
++import { cn } from '../../../lib/utils'
+
+-export function Button({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
++interface ButtonProps {
++  children: React.ReactNode
++  variant?: 'primary' | 'secondary' | 'danger'
++  size?: 'sm' | 'md' | 'lg'
++  disabled?: boolean
++  onClick?: () => void
++  className?: string
++}
++
++export function Button({
++  children,
++  variant = 'primary',
++  size = 'md',
++  disabled = false,
++  onClick,
++  className,
++}: ButtonProps) {
+   return (
+     <button
+-      className="button"
++      className={cn('button', \`button--\${variant}\`, \`button--\${size}\`, className)}
++      disabled={disabled}
+       onClick={onClick}
+     >
+       {children}
+     </button>
+   )
+ }`,
+    language: "typescript",
+    filename: "src/components/Button.tsx",
+    showLineNumbers: true,
+  },
+}
+
+/**
+ * 常暗域口径（ui-terminal-code 卡）：diff 整行 tint 与语法五色都随主题翻转，
+ * diff 文字取对应 on-tint；荧黄在代码语境只有聚焦终端光标一个角色，此处无荧黄。
+ */
+export const DualTheme: Story = {
+  args: { language: "typescript", filename: "src/utils.ts", children: simpleDiff },
+  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>
+          <CodeDiff {...args} />
+        </div>
+      ))}
+    </div>
+  ),
+}

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

@@ -0,0 +1,373 @@
+"use client"
+
+import type { CSSProperties, ComponentProps } from "react"
+import { memo, 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"
+
+// ── Types ────────────────────────────────────────────────────────────
+
+export type CodeDiffProps = Omit<ComponentProps<"div">, "children"> & {
+  /** Unified diff 字符串（类似 git diff 输出，包含 @@ hunk headers） */
+  children: string
+  /** 编程语言，用于语法高亮 */
+  language?: string
+  /** 文件名（显示在头部） */
+  filename?: string
+  /** 是否显示行号 */
+  showLineNumbers?: boolean
+  className?: string
+}
+
+type LineType = "add" | "del" | "context" | "hunk"
+
+interface DiffLine {
+  type: LineType
+  content: string // 不含前缀符号的代码内容
+  oldNum: number | null
+  newNum: number | null
+}
+
+// ── Diff parser ──────────────────────────────────────────────────────
+
+const HUNK_HEADER_RE = /^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@(.*)$/
+
+function parseUnifiedDiff(diff: string): DiffLine[] {
+  const rawLines = diff.split("\n")
+  const result: DiffLine[] = []
+  let oldNum = 0
+  let newNum = 0
+
+  for (const raw of rawLines) {
+    // Skip file-level headers (--- / +++ / diff --git)
+    if (raw.startsWith("---") || raw.startsWith("+++") || raw.startsWith("diff ") || raw.startsWith("index ")) {
+      continue
+    }
+
+    const hunkMatch = HUNK_HEADER_RE.exec(raw)
+    if (hunkMatch) {
+      oldNum = Number.parseInt(hunkMatch[1] ?? "0", 10)
+      newNum = Number.parseInt(hunkMatch[2] ?? "0", 10)
+      result.push({
+        type: "hunk",
+        content: raw,
+        oldNum: null,
+        newNum: null,
+      })
+      continue
+    }
+
+    if (raw.startsWith("+")) {
+      result.push({
+        type: "add",
+        content: raw.slice(1),
+        oldNum: null,
+        newNum: newNum++,
+      })
+    } else if (raw.startsWith("-")) {
+      result.push({
+        type: "del",
+        content: raw.slice(1),
+        oldNum: oldNum++,
+        newNum: null,
+      })
+    } else if (raw.startsWith(" ")) {
+      result.push({
+        type: "context",
+        content: raw.slice(1),
+        oldNum: oldNum++,
+        newNum: newNum++,
+      })
+    } else if (raw === "") {
+      // Empty line in diff context (trailing newline)
+      // Skip if we haven't started parsing any hunks yet
+      if (result.length > 0) {
+        result.push({
+          type: "context",
+          content: "",
+          oldNum: oldNum++,
+          newNum: newNum++,
+        })
+      }
+    }
+  }
+
+  return result
+}
+
+// ── Shiki token → style helpers (same approach as CodeBlock) ─────────
+
+const isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1
+const isBold = (fontStyle: number | undefined) => fontStyle && fontStyle & 2
+const isUnderline = (fontStyle: number | undefined) => fontStyle && fontStyle & 4
+
+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
+  // 单主题输出：shiki 只吐 var(--ow-shiki-*)，暗档翻档交给 --ow-syn-*，
+  // 旧的 --shiki-dark 双主题通道已退役（src/utils/shiki.ts），不再解析。
+  const tokenColor = toStyleString(htmlStyle?.color ?? token.color)
+
+  const style: CSSProperties = {
+    color: tokenColor,
+    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>
+}
+
+// ── Highlight mapping ────────────────────────────────────────────────
+
+/**
+ * Build two code strings from the diff lines:
+ * - oldCode: context + del lines (for highlighting the "old" side)
+ * - newCode: context + add lines (for highlighting the "new" side)
+ *
+ * Then map back each diff line to the corresponding highlighted token line.
+ */
+function buildCodeForHighlight(lines: DiffLine[]): {
+  oldCode: string
+  newCode: string
+  oldLineIndices: number[] // index into oldCode's line array for each diff line
+  newLineIndices: number[] // index into newCode's line array for each diff line
+} {
+  const oldLines: string[] = []
+  const newLines: string[] = []
+  const oldLineIndices: number[] = []
+  const newLineIndices: number[] = []
+
+  for (const line of lines) {
+    if (line.type === "hunk") {
+      oldLineIndices.push(-1)
+      newLineIndices.push(-1)
+    } else if (line.type === "context") {
+      oldLineIndices.push(oldLines.length)
+      newLineIndices.push(newLines.length)
+      oldLines.push(line.content)
+      newLines.push(line.content)
+    } else if (line.type === "del") {
+      oldLineIndices.push(oldLines.length)
+      newLineIndices.push(-1)
+      oldLines.push(line.content)
+    } else {
+      // add
+      oldLineIndices.push(-1)
+      newLineIndices.push(newLines.length)
+      newLines.push(line.content)
+    }
+  }
+
+  return {
+    oldCode: oldLines.join("\n"),
+    newCode: newLines.join("\n"),
+    oldLineIndices,
+    newLineIndices,
+  }
+}
+
+// ── DiffBody (memoized) ─────────────────────────────────────────────
+
+const DiffBody = memo(
+  ({
+    lines,
+    oldTokens,
+    newTokens,
+    oldLineIndices,
+    newLineIndices,
+    showLineNumbers,
+  }: {
+    lines: DiffLine[]
+    oldTokens: ThemedToken[][]
+    newTokens: ThemedToken[][]
+    oldLineIndices: number[]
+    newLineIndices: number[]
+    showLineNumbers: boolean
+  }) => {
+    return (
+      // §7 度量：代码 13 mono；行号/正负号是读数，随 pre 一并 tabular-nums
+      <pre className="m-0 font-mono text-ow-fs-code tabular-nums leading-[1.7] whitespace-pre-wrap break-words">
+        {lines.map((line, i) => {
+          if (line.type === "hunk") {
+            return (
+              <div
+                key={`hunk-${i}`}
+                data-ow-part="hunk"
+                className="flex min-h-[1.7em] pr-4 bg-ow-diff-hunk-bg text-ow-diff-hunk-fg italic py-0.5 px-4"
+              >
+                {line.content}
+              </div>
+            )
+          }
+
+          const sign = line.type === "add" ? "+" : line.type === "del" ? "-" : " "
+
+          // Get the highlighted tokens for this line
+          let tokens: ThemedToken[] | undefined
+          if (line.type === "del") {
+            const idx = oldLineIndices[i]
+            if (idx != null && idx >= 0) tokens = oldTokens[idx]
+          } else {
+            const idx = newLineIndices[i]
+            if (idx != null && idx >= 0) tokens = newTokens[idx]
+          }
+
+          return (
+            <div
+              key={`line-${i}`}
+              data-ow-part="line"
+              data-line-type={line.type}
+              className={cn(
+                "flex min-h-[1.7em] pr-4",
+                line.type === "add" && "bg-ow-diff-add-bg",
+                line.type === "del" && "bg-ow-diff-del-bg",
+              )}
+            >
+              <span data-ow-part="gutter" className="inline-flex gap-0 shrink-0 select-none text-ow-text-3">
+                {showLineNumbers && (
+                  <>
+                    <span className="inline-block w-10 text-right pr-1">{line.oldNum ?? ""}</span>
+                    <span className="inline-block w-10 text-right pr-1">{line.newNum ?? ""}</span>
+                  </>
+                )}
+                <span
+                  data-ow-part="sign"
+                  className={cn(
+                    "inline-block w-6 text-center font-medium",
+                    line.type === "add" && "text-ow-diff-add-fg",
+                    line.type === "del" && "text-ow-diff-del-fg",
+                  )}
+                >
+                  {sign}
+                </span>
+              </span>
+              <span data-ow-part="content" className="flex-1 min-w-0">
+                {tokens && tokens.length > 0
+                  ? tokens.map((tok, j) => <TokenSpan key={j} token={tok} />)
+                  : line.content || "\n"}
+              </span>
+            </div>
+          )
+        })}
+      </pre>
+    )
+  },
+)
+
+DiffBody.displayName = "DiffBody"
+
+// ── Main component ───────────────────────────────────────────────────
+
+/**
+ * Code diff viewer with syntax highlighting powered by Shiki.
+ * Accepts a unified diff string (like git diff output) and renders
+ * an inline unified view with add/delete line highlighting.
+ *
+ * @example
+ * ```tsx
+ * <CodeDiff language="typescript" filename="utils.ts">
+ *   {`@@ -1,4 +1,4 @@
+ *  function greet(name: string) {
+ * -  return "Hello, " + name;
+ * +  return \`Hello, \${name}!\`;
+ *  }`}
+ * </CodeDiff>
+ * ```
+ */
+export function CodeDiff({
+  children,
+  language = "text",
+  filename,
+  showLineNumbers = true,
+  className = "",
+  ...rest
+}: CodeDiffProps) {
+  const lines = useMemo(() => parseUnifiedDiff(children), [children])
+
+  const { oldCode, newCode, oldLineIndices, newLineIndices } = useMemo(() => buildCodeForHighlight(lines), [lines])
+
+  const [oldTokenized, setOldTokenized] = useState<TokenizedCode>(() => createRawTokens(oldCode))
+  const [newTokenized, setNewTokenized] = useState<TokenizedCode>(() => createRawTokens(newCode))
+
+  const asyncKeyRef = useRef({ oldCode, newCode, language })
+
+  useEffect(() => {
+    setOldTokenized(createRawTokens(oldCode))
+    setNewTokenized(createRawTokens(newCode))
+    asyncKeyRef.current = { oldCode, newCode, language }
+
+    let cancelled = false
+
+    // Highlight old code
+    const cachedOld = highlightCode(oldCode, language)
+    if (cachedOld) {
+      setOldTokenized(cachedOld)
+    } else {
+      highlightCode(oldCode, language, (result) => {
+        if (!cancelled && asyncKeyRef.current.oldCode === oldCode) {
+          setOldTokenized(result)
+        }
+      })
+    }
+
+    // Highlight new code
+    const cachedNew = highlightCode(newCode, language)
+    if (cachedNew) {
+      setNewTokenized(cachedNew)
+    } else {
+      highlightCode(newCode, language, (result) => {
+        if (!cancelled && asyncKeyRef.current.newCode === newCode) {
+          setNewTokenized(result)
+        }
+      })
+    }
+
+    return () => {
+      cancelled = true
+    }
+  }, [oldCode, newCode, language])
+
+  return (
+    // 代码面＝§5 嵌套井档：--ow-code-bg（= surface-2）＋1px 边 + radius 8（ui-terminal-code 卡）。
+    // 内部 data-ow-part 后置写，确保壳层透传的 rest 不覆盖组件自身的部位标记。
+    <div
+      {...rest}
+      data-slot="code-diff"
+      data-ow-part="surface"
+      className={cn(
+        "bg-[color:var(--ow-code-bg)] border border-ow-border [border-radius:var(--ow-radius-sm)] my-2 overflow-hidden",
+        className,
+      )}
+    >
+      {filename && (
+        <div
+          data-ow-part="header"
+          className="flex items-center gap-2 px-4 py-2.5 font-mono tabular-nums text-ow-fs-mark-md leading-none text-ow-text-2 border-b border-ow-border"
+        >
+          <span>{filename}</span>
+        </div>
+      )}
+      {/* 暗档 Shiki 换色走 token 映射，不是暗档覆盖规则：shiki 以 CSS 变量模式输出
+          var(--ow-shiki-*)，styles/components.css 的 [data-slot="code-block"],[data-slot="code-diff"]
+          块把它们一次性接到 --ow-syn-*，而 --ow-syn-* 自己随 [data-theme] 翻档（与 CodeBlock 同款）。 */}
+      <div data-ow-part="body" className="overflow-x-auto">
+        <DiffBody
+          lines={lines}
+          oldTokens={oldTokenized.tokens}
+          newTokens={newTokenized.tokens}
+          oldLineIndices={oldLineIndices}
+          newLineIndices={newLineIndices}
+          showLineNumbers={showLineNumbers}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { CodePreview } from "./index"
+
+const meta = {
+  title: "Composite/CodePreview",
+  component: CodePreview,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CodePreview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleCode = `function greet(name: string): string {
+  return \`Hello, \${name}!\`
+}
+
+const message = greet('World')
+console.log(message)`
+
+const sampleDiff = `--- a/src/utils.ts
++++ b/src/utils.ts
+@@ -1,5 +1,6 @@
+ function greet(name: string): string {
+-  return \`Hello, \${name}!\`
++  const greeting = 'Hello'
++  return \`\${greeting}, \${name}!\`
+ }
+
+ const message = greet('World')`
+
+export const SourceCode: Story = {
+  args: {
+    language: "typescript",
+    code: sampleCode,
+    showLineNumbers: true,
+  },
+}
+
+export const DiffView: Story = {
+  args: {
+    language: "typescript",
+    diff: sampleDiff,
+    showLineNumbers: true,
+  },
+}
+
+export const WithoutLineNumbers: Story = {
+  args: {
+    language: "typescript",
+    code: sampleCode,
+    showLineNumbers: false,
+  },
+}
+
+export const JavaScriptCode: Story = {
+  args: {
+    language: "javascript",
+    code: `const express = require('express')
+const app = express()
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+})
+
+app.listen(3000)`,
+    showLineNumbers: true,
+  },
+}
+
+export const PythonCode: Story = {
+  args: {
+    language: "python",
+    code: `def fibonacci(n):
+    if n <= 1:
+        return n
+    return fibonacci(n-1) + fibonacci(n-2)
+
+for i in range(10):
+    print(fibonacci(i))`,
+    showLineNumbers: true,
+  },
+}
+
+export const LongCode: Story = {
+  args: {
+    language: "typescript",
+    code: `import React, { useState, useEffect } from 'react'
+
+interface User {
+  id: number
+  name: string
+  email: string
+}
+
+export function UserList() {
+  const [users, setUsers] = useState<User[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/users')
+      .then(res => res.json())
+      .then(data => {
+        setUsers(data)
+        setLoading(false)
+      })
+  }, [])
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <ul>
+      {users.map(user => (
+        <li key={user.id}>
+          {user.name} - {user.email}
+        </li>
+      ))}
+    </ul>
+  )
+}`,
+    showLineNumbers: true,
+  },
+}