@orbit-work/ui 0.1.1 → 0.1.2

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

@@ -1,169 +0,0 @@
-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

@@ -1,373 +0,0 @@
-"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

@@ -1,127 +0,0 @@
-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,
-  },
-}