niuma-ui 1.0.0

package/src/components/code-mirror-diagnostics.ts

@@ -0,0 +1,52 @@
+import { Compartment, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state'
+import { Decoration, EditorView } from '@codemirror/view'
+import type { RsCodeEditorDiagnostic } from './code-editor-utils'
+
+const setDiagnosticsEffect = StateEffect.define<RsCodeEditorDiagnostic[]>()
+
+function buildLineDecorations(doc: { lines: number; line: (n: number) => { from: number } }, diags: RsCodeEditorDiagnostic[]) {
+  const builder = new RangeSetBuilder<Decoration>()
+  for (const d of diags) {
+    const lineNo = d.line ?? 1
+    if (lineNo < 1 || lineNo > doc.lines) continue
+    const line = doc.line(lineNo)
+    const cls =
+      d.severity === 'warning'
+        ? 'cm-lintRange cm-lintRange-warning'
+        : d.severity === 'info'
+          ? 'cm-lintRange cm-lintRange-info'
+          : 'cm-lintRange cm-lintRange-error'
+    builder.add(line.from, line.from, Decoration.line({ class: cls }))
+  }
+  return builder.finish()
+}
+
+const diagnosticField = StateField.define({
+  create() {
+    return Decoration.none
+  },
+  update(deco, tr) {
+    for (const e of tr.effects) {
+      if (e.is(setDiagnosticsEffect)) {
+        return buildLineDecorations(tr.state.doc, e.value)
+      }
+    }
+    if (tr.docChanged) {
+      return deco.map(tr.changes)
+    }
+    return deco
+  },
+  provide: (f) => EditorView.decorations.from(f),
+})
+
+export const diagnosticCompartment = new Compartment()
+
+export function diagnosticExtensions() {
+  return diagnosticCompartment.of([diagnosticField])
+}
+
+export function setEditorDiagnostics(view: EditorView, diags: RsCodeEditorDiagnostic[]) {
+  view.dispatch({
+    effects: setDiagnosticsEffect.of(diags),
+  })
+}

package/src/components/code-mirror-ghost.ts

@@ -0,0 +1,158 @@
+import { Prec, StateEffect, StateField, type Extension } from '@codemirror/state'
+import { Decoration, EditorView, keymap, WidgetType } from '@codemirror/view'
+import { posToLineColumn } from './code-mirror-intel'
+
+export const setGhostCompletion = StateEffect.define<string | null>()
+
+interface GhostMeta {
+  text: string
+  pos: number
+}
+
+class GhostWidget extends WidgetType {
+  constructor(readonly text: string) {
+    super()
+  }
+
+  eq(other: GhostWidget) {
+    return other.text === this.text
+  }
+
+  toDOM() {
+    const span = document.createElement('span')
+    span.className = 'rs-code-editor__ghost'
+    span.textContent = this.text
+    return span
+  }
+
+  ignoreEvent() {
+    return true
+  }
+}
+
+const ghostMetaField = StateField.define<GhostMeta | null>({
+  create() {
+    return null
+  },
+  update(value, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(setGhostCompletion)) {
+        if (!effect.value) return null
+        return { text: effect.value, pos: tr.state.selection.main.head }
+      }
+    }
+    if (tr.docChanged) return null
+    if (tr.selection && !tr.effects.some((e) => e.is(setGhostCompletion))) {
+      return null
+    }
+    return value
+  },
+})
+
+const ghostField = StateField.define<ReturnType<typeof Decoration.set>>({
+  create() {
+    return Decoration.none
+  },
+  update(deco, tr) {
+    deco = deco.map(tr.changes)
+    for (const effect of tr.effects) {
+      if (effect.is(setGhostCompletion)) {
+        if (!effect.value) return Decoration.none
+        const pos = tr.state.selection.main.head
+        return Decoration.set([
+          Decoration.widget({
+            widget: new GhostWidget(effect.value),
+            side: 1,
+          }).range(pos),
+        ])
+      }
+    }
+    if (tr.docChanged || tr.selection) {
+      const hasSet = tr.effects.some((e) => e.is(setGhostCompletion))
+      if (!hasSet) return Decoration.none
+    }
+    return deco
+  },
+  provide: (field) => EditorView.decorations.from(field),
+})
+
+export interface CodeMirrorGhostHandlers {
+  completionRequest?: (prefix: string, suffix: string, line: number, column: number) => Promise<string | null>
+}
+
+function readGhostAtCursor(view: EditorView): GhostMeta | null {
+  const meta = view.state.field(ghostMetaField, false)
+  if (!meta) return null
+  if (meta.pos !== view.state.selection.main.head) return null
+  return meta
+}
+
+export function codeMirrorGhostExtensions(
+  handlers: () => CodeMirrorGhostHandlers,
+  scheduleDebounced: (fn: () => void) => void,
+  cancelScheduled?: () => void,
+): Extension[] {
+  let seq = 0
+  return [
+    ghostMetaField,
+    ghostField,
+    EditorView.updateListener.of((update) => {
+      if (!update.docChanged) return
+      const h = handlers()
+      if (!h.completionRequest) return
+      cancelScheduled?.()
+      const id = ++seq
+      scheduleDebounced(() => {
+        const view = update.view
+        const pos = view.state.selection.main.head
+        const prefix = view.state.doc.sliceString(0, pos)
+        const suffix = view.state.doc.sliceString(pos)
+        const { line, column } = posToLineColumn(view, pos)
+        void h.completionRequest!(prefix, suffix, line, column).then((text) => {
+          if (id !== seq) return
+          if (!text?.trim()) {
+            view.dispatch({ effects: setGhostCompletion.of(null) })
+            return
+          }
+          const current = view.state.selection.main.head
+          if (view.state.doc.sliceString(current) !== suffix) return
+          view.dispatch({ effects: setGhostCompletion.of(text) })
+        })
+      })
+    }),
+    Prec.highest(
+      keymap.of([
+        {
+          key: 'Tab',
+          run: (view) => {
+            const ghost = readGhostAtCursor(view)
+            if (!ghost) return false
+            cancelScheduled?.()
+            seq += 1
+            const pos = view.state.selection.main.head
+            view.dispatch({
+              changes: { from: pos, to: pos, insert: ghost.text },
+              selection: { anchor: pos + ghost.text.length },
+              effects: setGhostCompletion.of(null),
+            })
+            return true
+          },
+        },
+        {
+          key: 'Escape',
+          run: (view) => {
+            if (!readGhostAtCursor(view)) return false
+            cancelScheduled?.()
+            seq += 1
+            view.dispatch({ effects: setGhostCompletion.of(null) })
+            return true
+          },
+        },
+      ]),
+    ),
+  ]
+}
+
+export function clearGhostCompletion(view: EditorView) {
+  view.dispatch({ effects: setGhostCompletion.of(null) })
+}

package/src/components/code-mirror-inline-edit.ts

@@ -0,0 +1,55 @@
+import { Prec, type Extension } from '@codemirror/state'
+import { EditorView, keymap } from '@codemirror/view'
+
+export interface InlineEditTrigger {
+  selection: string
+  from: number
+  to: number
+}
+
+/** 提取选区上下各若干行，供 Inline Edit 理解作用域（不含重复包裹选区）。 */
+export function extractSurroundingContext(doc: string, from: number, to: number, lineRadius = 20): string {
+  if (!doc) return ''
+  const lines = doc.split('\n')
+  let pos = 0
+  let startLine = 0
+  let endLine = lines.length - 1
+  for (let i = 0; i < lines.length; i++) {
+    const lineStart = pos
+    const lineEnd = pos + lines[i].length
+    if (from >= lineStart && from <= lineEnd + (i < lines.length - 1 ? 1 : 0)) startLine = i
+    if (to >= lineStart && to <= lineEnd + (i < lines.length - 1 ? 1 : 0)) endLine = i
+    pos = lineEnd + 1
+  }
+  const contextStart = Math.max(0, startLine - lineRadius)
+  const contextEnd = Math.min(lines.length - 1, endLine + lineRadius)
+  return lines.slice(contextStart, contextEnd + 1).join('\n')
+}
+
+export function codeMirrorInlineEditExtension(
+  onTrigger: (view: EditorView, info: InlineEditTrigger) => void,
+): Extension {
+  return Prec.highest(
+    keymap.of([
+      {
+        key: 'Mod-k',
+        run: (view) => {
+          const { from, to } = view.state.selection.main
+          if (from === to) return false
+          const selection = view.state.sliceDoc(from, to)
+          if (!selection.trim()) return false
+          onTrigger(view, { selection, from, to })
+          return true
+        },
+      },
+    ]),
+  )
+}
+
+export function replaceEditorRange(view: EditorView, from: number, to: number, insert: string) {
+  view.dispatch({
+    changes: { from, to, insert },
+    selection: { anchor: from + insert.length },
+  })
+  view.focus()
+}

package/src/components/code-mirror-intel.ts

@@ -0,0 +1,81 @@
+import { EditorView, hoverTooltip } from '@codemirror/view'
+import type { Extension } from '@codemirror/state'
+
+export interface CodeMirrorIntelHandlers {
+  hoverRequest?: (line: number, column: number) => Promise<string | null>
+  definitionRequest?: (line: number, column: number) => Promise<{
+    file: string
+    line: number
+    column?: number
+  } | null>
+  currentFilePath?: string
+  onGotoDefinition?: (loc: { file: string; line: number; column?: number }) => void
+}
+
+export function posToLineColumn(view: EditorView, pos: number) {
+  const line = view.state.doc.lineAt(pos)
+  return {
+    line: line.number,
+    column: pos - line.from + 1,
+  }
+}
+
+export function goToPosition(view: EditorView, line: number, column = 1) {
+  const doc = view.state.doc
+  const ln = Math.min(Math.max(1, line), doc.lines)
+  const lineObj = doc.line(ln)
+  const pos = lineObj.from + Math.max(0, column - 1)
+  view.dispatch({
+    selection: { anchor: pos },
+    scrollIntoView: true,
+  })
+  view.focus()
+}
+
+export function codeMirrorIntelExtensions(handlers: () => CodeMirrorIntelHandlers): Extension[] {
+  const hoverExt = hoverTooltip(
+    async (view, pos) => {
+      const h = handlers()
+      if (!h.hoverRequest) return null
+      const { line, column } = posToLineColumn(view, pos)
+      const text = await h.hoverRequest(line, column)
+      if (!text?.trim()) return null
+      return {
+        pos,
+        above: true,
+        create() {
+          const dom = document.createElement('div')
+          dom.className = 'rs-code-editor__hover'
+          dom.textContent = text
+          return { dom }
+        },
+      }
+    },
+    { hoverTime: 450 },
+  )
+
+  const clickExt = EditorView.domEventHandlers({
+    mousedown(event, view) {
+      if (!event.ctrlKey && !event.metaKey) return false
+      const h = handlers()
+      if (!h.definitionRequest) return false
+      const pos = view.posAtCoords({ x: event.clientX, y: event.clientY })
+      if (pos == null) return false
+      const { line, column } = posToLineColumn(view, pos)
+      void h.definitionRequest(line, column).then((loc) => {
+        if (!loc?.line) return
+        const current = (h.currentFilePath ?? '').replace(/\\/g, '/')
+        const target = (loc.file ?? '').replace(/\\/g, '/')
+        if (target && current && target !== current) {
+          h.onGotoDefinition?.(loc)
+          return
+        }
+        goToPosition(view, loc.line, loc.column ?? 1)
+      })
+      event.preventDefault()
+      return true
+    },
+  })
+
+  return [hoverExt, clickExt]
+}

package/src/components/code-mirror-lang.ts

@@ -0,0 +1,128 @@
+import type { Extension } from '@codemirror/state'
+import type { RsCodeEditorSqlConfig } from './code-editor-utils'
+
+export interface ResolveCodeMirrorLanguageOptions {
+  sql?: RsCodeEditorSqlConfig
+}
+
+/** 按语言标识动态加载 CodeMirror 语言扩展 */
+export async function resolveCodeMirrorLanguage(
+  lang: string,
+  options?: ResolveCodeMirrorLanguageOptions,
+): Promise<Extension[]> {
+  const l = lang.toLowerCase().trim()
+  try {
+    switch (l) {
+      case 'js':
+      case 'javascript':
+      case 'jsx': {
+        const { javascript } = await import('@codemirror/lang-javascript')
+        return [javascript()]
+      }
+      case 'ts':
+      case 'typescript':
+      case 'tsx': {
+        const { javascript } = await import('@codemirror/lang-javascript')
+        return [javascript({ typescript: true })]
+      }
+      case 'py':
+      case 'python': {
+        const { python } = await import('@codemirror/lang-python')
+        return [python()]
+      }
+      case 'go': {
+        const { go } = await import('@codemirror/lang-go')
+        return [go()]
+      }
+      case 'html':
+      case 'htm': {
+        const { html } = await import('@codemirror/lang-html')
+        return [html()]
+      }
+      case 'css':
+      case 'scss':
+      case 'less': {
+        const { css } = await import('@codemirror/lang-css')
+        return [css()]
+      }
+      case 'json':
+      case 'jsonc': {
+        const { json } = await import('@codemirror/lang-json')
+        return [json()]
+      }
+      case 'sql': {
+        const { sql, PostgreSQL, StandardSQL, MySQL } = await import('@codemirror/lang-sql')
+        const dialectName = options?.sql?.dialect ?? 'postgresql'
+        let dialect = PostgreSQL
+        if (dialectName === 'mysql') dialect = MySQL
+        else if (dialectName === 'standard') dialect = StandardSQL
+        return [
+          sql({
+            dialect,
+            schema: options?.sql?.schema as never,
+            defaultTable: options?.sql?.defaultTable,
+            defaultSchema: options?.sql?.defaultSchema,
+          }),
+        ]
+      }
+      case 'rust':
+      case 'rs': {
+        const { rust } = await import('@codemirror/lang-rust')
+        return [rust()]
+      }
+      case 'cpp':
+      case 'cc':
+      case 'cxx':
+      case 'c': {
+        const { cpp } = await import('@codemirror/lang-cpp')
+        return [cpp()]
+      }
+      case 'java': {
+        const { java } = await import('@codemirror/lang-java')
+        return [java()]
+      }
+      case 'md':
+      case 'markdown': {
+        const { markdown } = await import('@codemirror/lang-markdown')
+        return [markdown()]
+      }
+      case 'xml':
+      case 'svg': {
+        const { xml } = await import('@codemirror/lang-xml')
+        return [xml()]
+      }
+      case 'yaml':
+      case 'yml': {
+        const { yaml } = await import('@codemirror/lang-yaml')
+        return [yaml()]
+      }
+      case 'vue': {
+        const { html } = await import('@codemirror/lang-html')
+        return [html()]
+      }
+      case 'sh':
+      case 'bash':
+      case 'shell':
+      case 'zsh': {
+        const [{ StreamLanguage }, { shell }] = await Promise.all([
+          import('@codemirror/language'),
+          import('@codemirror/legacy-modes/mode/shell'),
+        ])
+        return [StreamLanguage.define(shell)]
+      }
+      default:
+        return []
+    }
+  } catch {
+    return []
+  }
+}
+
+export function isCodeMirrorLightTheme(): boolean {
+  return typeof document !== 'undefined' && document.documentElement.dataset.rsTheme === 'light'
+}
+
+/** 预加载 CodeMirror 核心与目标语言包（供辅助窗口 reveal 前调用） */
+export async function prewarmCodeMirrorEditor(language: string): Promise<void> {
+  await Promise.all([import('codemirror'), resolveCodeMirrorLanguage(language)])
+}

package/src/components/context-menu-utils.ts

@@ -0,0 +1,20 @@
+/** 右键菜单图标尺寸（与 Dropdown / Menu 一致） */
+export const RS_CONTEXT_MENU_ICON_SIZE = 16
+export const RS_CONTEXT_MENU_ARROW_SIZE = 14
+
+/** 右键菜单项定义 */
+export interface RsContextMenuItem {
+  /** 唯一标识，选中时回传 */
+  key: string
+  label: string
+  icon?: string
+  disabled?: boolean
+  /** 危险操作样式 */
+  danger?: boolean
+  /** 为 true 时渲染分隔线 */
+  separator?: boolean
+  /** 子菜单项 */
+  children?: RsContextMenuItem[]
+  /** 键盘快捷键提示（仅展示，不绑定事件），如 "⌘K"、"⌃C" */
+  shortcut?: string
+}