@openspecui/web 0.9.0 → 0.9.3

package/src/components/change-overview.tsx

@@ -1,156 +0,0 @@
-import { MarkdownViewer } from '@/components/markdown-viewer'
-import { Tabs, type Tab } from '@/components/tabs'
-import type { Change } from '@openspecui/core'
-import { FileText } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
-
-type DeltaSpec = NonNullable<Change['deltaSpecs']>[number]
-
-function operationBadgeClass(operation: string) {
-  switch (operation) {
-    case 'ADDED':
-      return 'border border-emerald-200 bg-emerald-100 text-emerald-700'
-    case 'MODIFIED':
-      return 'border border-amber-200 bg-amber-100 text-amber-800'
-    case 'REMOVED':
-      return 'border border-rose-200 bg-rose-100 text-rose-700'
-    case 'RENAMED':
-      return 'border border-sky-200 bg-sky-100 text-sky-700'
-    default:
-      return 'border border-muted bg-muted text-foreground'
-  }
-}
-
-export function ChangeOverview({ change }: { change: Change }) {
-  const deltaSpecs = change.deltaSpecs ?? []
-  const [activeDeltaSpecId, setActiveDeltaSpecId] = useState(deltaSpecs[0]?.specId ?? '')
-
-  // 当 deltaSpecs 变化时，确保 activeDeltaSpecId 有效
-  useEffect(() => {
-    if (!deltaSpecs.some((d) => d.specId === activeDeltaSpecId)) {
-      setActiveDeltaSpecId(deltaSpecs[0]?.specId ?? '')
-    }
-  }, [deltaSpecs, activeDeltaSpecId])
-
-  const affectedSpecs = useMemo<{ spec: string; operation: string }[]>(() => {
-    const map = new Map<string, Set<string>>()
-    change.deltas.forEach((delta) => {
-      const set = map.get(delta.spec) ?? new Set<string>()
-      set.add(delta.operation)
-      map.set(delta.spec, set)
-    })
-    return Array.from(map.entries()).map(([spec, ops]) => ({
-      spec,
-      operation: ops.size === 1 ? Array.from(ops)[0] : 'MIXED',
-    }))
-  }, [change.deltas])
-
-  return (
-    <MarkdownViewer
-      className="h-full"
-      markdown={({ H1, Section }) => (
-        <div className="space-y-6">
-          {/* Why */}
-          <Section>
-            <H1 id="why">Why</H1>
-            <div className="bg-muted/30 mt-2 rounded-lg p-4 [zoom:0.86]">
-              <MarkdownViewer markdown={change.why} />
-            </div>
-          </Section>
-
-          {/* What Changes */}
-          <Section>
-            <H1 id="what-changes">What Changes</H1>
-            <div className="bg-muted/30 mt-2 rounded-lg p-4 [zoom:0.86]">
-              <MarkdownViewer markdown={change.whatChanges} />
-            </div>
-          </Section>
-
-          {/* Design */}
-          {change.design && (
-            <>
-              <H1 id="design">Design</H1>
-              <Section className="bg-muted/30 mt-2 rounded-lg p-4 [zoom:0.86]">
-                {/* 嵌套 MarkdownViewer，Section 会自动 +1 层级 */}
-                <MarkdownViewer markdown={change.design} />
-              </Section>
-            </>
-          )}
-
-          {/* Affected Specs */}
-          {affectedSpecs.length > 0 && (
-            <>
-              <H1 id="affected-specs">Affected Specs ({affectedSpecs.length})</H1>
-              <div className="divide-border border-border mt-3 divide-y rounded-lg border">
-                {affectedSpecs.map(({ spec, operation }) => (
-                  <div key={spec} className="flex items-center justify-between px-3 py-2">
-                    <span className="font-medium">{spec}</span>
-                    <span
-                      className={`rounded px-2 py-1 text-xs font-medium ${operationBadgeClass(operation)}`}
-                    >
-                      {operation}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </>
-          )}
-
-          {/* Delta Specs */}
-          {deltaSpecs.length > 0 && (
-            <>
-              <H1 id="delta-specs">Delta Specs ({deltaSpecs.length})</H1>
-              <Section className="[zoom:0.86]">
-                <DeltaSpecTabs
-                  deltaSpecs={deltaSpecs}
-                  activeId={activeDeltaSpecId}
-                  onActiveChange={setActiveDeltaSpecId}
-                />
-              </Section>
-            </>
-          )}
-        </div>
-      )}
-    />
-  )
-}
-
-function DeltaSpecTabs({
-  deltaSpecs,
-  activeId,
-  onActiveChange,
-}: {
-  deltaSpecs: DeltaSpec[]
-  activeId: string
-  onActiveChange: (id: string) => void
-}) {
-  if (deltaSpecs.length === 1) {
-    const spec = deltaSpecs[0]
-    return (
-      <div className="bg-muted/20 rounded-lg p-4">
-        <MarkdownViewer markdown={spec.content} />
-      </div>
-    )
-  }
-
-  const tabs: Tab[] = deltaSpecs.map((spec) => ({
-    id: spec.specId,
-    label: spec.specId,
-    icon: <FileText className="h-4 w-4" />,
-    content: (
-      <div className="bg-muted/20 h-full rounded-lg p-4">
-        <MarkdownViewer markdown={spec.content} />
-      </div>
-    ),
-    unmountOnHide: true,
-  }))
-
-  return (
-    <Tabs
-      tabs={tabs}
-      selectedTab={activeId}
-      onTabChange={onActiveChange}
-      className="min-h-80"
-    />
-  )
-}

package/src/components/cli-terminal.tsx

@@ -1,93 +0,0 @@
-import { forwardRef, type ReactNode, type RefObject } from 'react'
-
-export type CliTerminalLine =
-  | { id: string; kind: 'ascii'; text: string; tone?: 'success' | 'error' | 'info' }
-  | { id: string; kind: 'html'; node: ReactNode }
-
-export interface CliTerminalProps {
-  lines: CliTerminalLine[]
-  maxHeight?: string
-  scrollRef?: RefObject<HTMLDivElement>
-}
-
-/**
- * Pure terminal renderer. Accepts ANSI-aware ASCII lines or raw ReactNode lines.
- * It does not own business logic; upstream decides how to format text (e.g., status icons).
- */
-export const CliTerminal = forwardRef<HTMLDivElement, CliTerminalProps>(function CliTerminal(
-  { lines, maxHeight = '60vh', scrollRef },
-  ref
-) {
-  const containerRef = (scrollRef ?? ref) as RefObject<HTMLDivElement>
-
-  return (
-    <div
-      ref={containerRef as RefObject<HTMLDivElement>}
-      className="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-700 overflow-auto bg-zinc-900 p-4 font-mono text-sm text-zinc-100"
-      style={{ maxHeight }}
-    >
-      {lines.length === 0 && <span className="text-zinc-500">Waiting to start…</span>}
-
-      {lines.map((line) => {
-        if (line.kind === 'html') {
-          return (
-            <div key={line.id} className="whitespace-pre-wrap break-all">
-              {line.node}
-            </div>
-          )
-        }
-
-        const color =
-          line.tone === 'success'
-            ? 'text-green-400'
-            : line.tone === 'error'
-              ? 'text-red-400'
-              : line.tone === 'info'
-                ? 'text-blue-300'
-                : undefined
-
-        return (
-          <div key={line.id} className="whitespace-pre-wrap break-all">
-            <span className={color}>{renderAnsiLine(line.text)}</span>
-          </div>
-        )
-      })}
-    </div>
-  )
-})
-
-/** Simple ANSI color code renderer with a few common colors */
-function renderAnsiLine(line: string): ReactNode {
-  const parts: ReactNode[] = []
-  let currentIndex = 0
-  let currentColor: string | null = null
-
-  const regex = /\x1b\[(\d+)m/g
-  let match
-
-  while ((match = regex.exec(line)) !== null) {
-    if (match.index > currentIndex) {
-      const text = line.slice(currentIndex, match.index)
-      parts.push(currentColor ? <span key={currentIndex} className={currentColor}>{text}</span> : text)
-    }
-
-    const code = parseInt(match[1], 10)
-    if (code === 0) currentColor = null
-    else if (code === 31) currentColor = 'text-red-400'
-    else if (code === 32) currentColor = 'text-green-400'
-    else if (code === 33) currentColor = 'text-yellow-400'
-    else if (code === 34) currentColor = 'text-blue-400'
-    else if (code === 35) currentColor = 'text-fuchsia-300'
-    else if (code === 36) currentColor = 'text-cyan-300'
-    else if (code === 37 || code === 90) currentColor = 'text-zinc-400'
-
-    currentIndex = match.index + match[0].length
-  }
-
-  if (currentIndex < line.length) {
-    const text = line.slice(currentIndex)
-    parts.push(currentColor ? <span key={currentIndex} className={currentColor}>{text}</span> : text)
-  }
-
-  return parts.length > 0 ? parts : line
-}

package/src/components/code-editor.tsx

@@ -1,232 +0,0 @@
-/**
- * CodeEditor - 基于 CodeMirror 6 的代码/Markdown 编辑器组件
- *
- * 特性：
- * - 支持只读和编辑模式
- * - 根据文件类型自动选择语言高亮
- * - Markdown 文件支持实时预览（隐藏语法标记）
- * - 移动端友好
- */
-import { markdownPreview } from '@/lib/codemirror-markdown-preview'
-import { selectAll } from '@codemirror/commands'
-import { javascript } from '@codemirror/lang-javascript'
-import { json } from '@codemirror/lang-json'
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
-import { yaml } from '@codemirror/lang-yaml'
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
-import { languages } from '@codemirror/language-data'
-import type { Extension } from '@codemirror/state'
-import { EditorState } from '@codemirror/state'
-import { EditorView, keymap } from '@codemirror/view'
-import { tags as t } from '@lezer/highlight'
-import CodeMirror from '@uiw/react-codemirror'
-import { useMemo } from 'react'
-
-export type LanguageType = 'markdown' | 'typescript' | 'javascript' | 'json' | 'yaml' | 'plain'
-
-export interface CodeEditorProps {
-  /** 编辑器内容 */
-  value: string
-  /** 内容变化回调（编辑模式下使用） */
-  onChange?: (value: string) => void
-  /** 是否只读 */
-  readOnly?: boolean
-  /** 语言类型，不传则根据 filename 自动检测 */
-  language?: LanguageType
-  /** 文件名，用于自动检测语言 */
-  filename?: string
-  /** 是否显示行号 */
-  lineNumbers?: boolean
-  /** 是否自动换行 */
-  lineWrapping?: boolean
-  /** 字体大小 */
-  fontSize?: number
-  /** 自定义 className */
-  className?: string
-  /** 自定义样式 */
-  style?: React.CSSProperties
-  /** 占位符文本 */
-  placeholder?: string
-  /** 额外的内联样式（可覆盖） */
-}
-
-/** 根据文件名推断语言类型 */
-function detectLanguage(filename?: string): LanguageType {
-  if (!filename) return 'plain'
-  const lower = filename.toLowerCase()
-  if (lower.endsWith('.md')) return 'markdown'
-  if (lower.endsWith('.ts') || lower.endsWith('.tsx')) return 'typescript'
-  if (lower.endsWith('.js') || lower.endsWith('.jsx')) return 'javascript'
-  if (lower.endsWith('.json')) return 'json'
-  if (lower.endsWith('.yml') || lower.endsWith('.yaml')) return 'yaml'
-  return 'plain'
-}
-
-/** 根据语言类型返回 CodeMirror 扩展 */
-function getLanguageExtensions(language: LanguageType, filename?: string): Extension[] {
-  switch (language) {
-    case 'markdown':
-      // Markdown 默认启用实时预览（隐藏语法标记，显示富文本效果）
-      return [markdown({ base: markdownLanguage, codeLanguages: languages }), markdownPreview()]
-    case 'typescript':
-      return [javascript({ typescript: true, jsx: filename?.endsWith('.tsx') })]
-    case 'javascript':
-      return [javascript({ jsx: filename?.endsWith('.jsx') })]
-    case 'json':
-      return [json()]
-    case 'yaml':
-      return [yaml()]
-    default:
-      return []
-  }
-}
-
-// 语法高亮：使用设计令牌，自动随 light/dark 变量切换
-const codeHighlightStyle = HighlightStyle.define([
-  { tag: [t.keyword, t.operatorKeyword, t.modifier], color: 'var(--primary)' },
-  { tag: [t.string, t.special(t.string)], color: 'var(--secondary)' },
-  { tag: [t.number, t.integer, t.float], color: 'var(--chart-4)' },
-  { tag: [t.bool, t.null, t.atom], color: 'var(--accent)' },
-  { tag: [t.typeName, t.className], color: 'var(--chart-3)' },
-  { tag: [t.function(t.variableName), t.propertyName], color: 'var(--chart-5)' },
-  { tag: [t.variableName], color: 'var(--foreground)' },
-  { tag: [t.comment, t.lineComment, t.blockComment], color: 'color-mix(in srgb, var(--muted-foreground) 80%, transparent)' },
-  { tag: t.punctuation, color: 'color-mix(in srgb, var(--foreground) 70%, transparent)' },
-])
-
-/**
- * CodeEditor 组件
- *
- * @example
- * // 只读 Markdown 预览
- * <CodeEditor value={content} filename="README.md" readOnly />
- *
- * @example
- * // 可编辑的代码编辑器
- * <CodeEditor value={code} onChange={setCode} language="typescript" />
- */
-export function CodeEditor({
-  value,
-  onChange,
-  readOnly = false,
-  language,
-  filename,
-  lineNumbers = true,
-  lineWrapping = true,
-  fontSize = 13,
-  className = '',
-  style,
-  placeholder,
-}: CodeEditorProps) {
-  const resolvedLanguage = language ?? detectLanguage(filename)
-  const extensions = useMemo(() => {
-    const exts: Extension[] = [
-      EditorState.readOnly.of(readOnly),
-      ...getLanguageExtensions(resolvedLanguage, filename),
-      syntaxHighlighting(codeHighlightStyle, { fallback: true }),
-    ]
-    exts.push(
-      EditorView.theme({
-        '.cm-line': {
-          lineHeight: '21px',
-        },
-        '.cm-editor': {
-          backgroundColor: 'var(--card)',
-          color: 'var(--foreground)',
-          borderRadius: '6px',
-          border: '1px solid color-mix(in srgb, var(--border) 80%, transparent)',
-          height: '100%',
-          minHeight: '240px',
-        },
-        '.cm-content': {
-          fontFamily: 'var(--font-mono)',
-          backgroundColor: 'transparent',
-        },
-        '.cm-gutters': {
-          fontFamily: 'var(--font-mono)',
-          backgroundColor: 'var(--card)',
-          color: 'color-mix(in srgb, var(--foreground) 60%, transparent)',
-          borderRight: '1px solid color-mix(in srgb, var(--border) 80%, transparent)',
-        },
-        '.cm-scroller': {
-          fontFamily: 'var(--font-mono)',
-          overflow: 'auto',
-        },
-        '.cm-activeLine': {
-          backgroundColor: 'color-mix(in srgb, var(--primary) 6%, transparent)',
-        },
-        '.cm-activeLineGutter': {
-          backgroundColor: 'color-mix(in srgb, var(--primary) 6%, transparent)',
-          color: 'var(--foreground)',
-        },
-        '.cm-selectionBackground, .cm-content ::selection': {
-          backgroundColor: 'color-mix(in srgb, var(--primary) 24%, transparent)',
-        },
-        '&.cm-editor .cm-cursor': {
-          borderLeftColor: 'var(--foreground)',
-        },
-        '.cm-matchingBracket, .cm-nonmatchingBracket': {
-          backgroundColor: 'color-mix(in srgb, var(--primary) 10%, transparent)',
-          outline: '1px solid color-mix(in srgb, var(--primary) 30%, transparent)',
-        },
-        '.cm-tooltip': {
-          backgroundColor: 'var(--popover)',
-          color: 'var(--popover-foreground)',
-          border: '1px solid color-mix(in srgb, var(--border) 80%, transparent)',
-        },
-        '.cm-tooltip-autocomplete': {
-          '& > ul > li[aria-selected]': {
-            background: 'color-mix(in srgb, var(--primary) 10%, transparent)',
-            color: 'var(--foreground)',
-          },
-        },
-        '.cm-searchMatch': {
-          backgroundColor: 'color-mix(in srgb, var(--primary) 18%, transparent)',
-          outline: '1px solid color-mix(in srgb, var(--primary) 35%, transparent)',
-        },
-        '.cm-md-codeblock': {
-          padding: '0',
-          borderRadius: 0,
-        },
-      })
-    )
-    exts.push(
-      keymap.of([
-        {
-          key: 'Mod-a',
-          run: selectAll,
-        },
-      ])
-    )
-
-    // TODO: 集成 Shiki 高亮（代码文件与 Markdown fenced code）时需采用稳定的装饰实现，避免 CM6 插件范围错误
-
-    if (lineWrapping) {
-      exts.push(EditorView.lineWrapping)
-    }
-    return exts
-  }, [resolvedLanguage, filename, readOnly, lineWrapping])
-
-  return (
-    <CodeMirror
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-      theme="none"
-      basicSetup={{
-        lineNumbers,
-        foldGutter: !readOnly,
-        highlightActiveLine: !readOnly,
-        highlightActiveLineGutter: !readOnly,
-        autocompletion: !readOnly,
-        closeBrackets: !readOnly,
-        bracketMatching: !readOnly,
-      }}
-      extensions={extensions}
-      className={`scrollbar-thin scrollbar-track-transparent overflow-auto ${className}`}
-      style={{ fontSize, ...style }}
-    />
-  )
-}
-
-export default CodeEditor

package/src/components/copyable-path.tsx

@@ -1,44 +0,0 @@
-import { Check, Copy } from 'lucide-react'
-import { useCallback, useState } from 'react'
-
-interface CopyablePathProps {
-  /** The path to display */
-  path: string
-  /** Additional className */
-  className?: string
-}
-
-/**
- * A component for displaying a full path with copy functionality.
- * - Displays full path with word-break
- * - Click to copy
- * - Shows copy confirmation
- */
-export function CopyablePath({ path, className = '' }: CopyablePathProps) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(path)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (err) {
-      console.error('Failed to copy path:', err)
-    }
-  }, [path])
-
-  return (
-    <button
-      onClick={handleCopy}
-      className={`hover:bg-muted/50 group -m-2 flex cursor-pointer items-start gap-2 rounded p-2 text-left transition-colors ${className}`}
-      title="Click to copy"
-    >
-      <code className="bg-muted h-7 flex-1 break-all rounded px-2 py-1 font-mono text-sm">
-        {path}
-      </code>
-      <span className="text-muted-foreground group-hover:text-foreground mt-1 shrink-0 transition-colors">
-        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-      </span>
-    </button>
-  )
-}