@lincyaw/workbench 0.1.0 → 0.2.0-rc.0

package/src/editor.ts

@@ -1,223 +0,0 @@
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
-import { markdown } from '@codemirror/lang-markdown'
-import { yaml, yamlFrontmatter } from '@codemirror/lang-yaml'
-import { bracketMatching, HighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language'
-import { lintGutter, setDiagnostics } from '@codemirror/lint'
-import type { Diagnostic } from '@codemirror/lint'
-import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
-import { EditorSelection, EditorState, StateEffect, StateField } from '@codemirror/state'
-import type { Extension } from '@codemirror/state'
-import { Decoration, drawSelection, EditorView, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, MatchDecorator, ViewPlugin } from '@codemirror/view'
-import type { DecorationSet, ViewUpdate } from '@codemirror/view'
-import { tags } from '@lezer/highlight'
-
-export interface EditorOptions {
-  label: string
-  save(): void
-  changed(path: string, text: string): void
-  moved(line: number): void
-  selected?(selection: { startLine: number, endLine: number, text: string }): void
-}
-
-export interface Problem {
-  line: number
-  severity: 'error' | 'warning' | 'info'
-  message: string
-}
-
-export interface SourceEditor {
-  show(path: string, text: string): void
-  text(path: string): string | undefined
-  replace(path: string, text: string, fresh: boolean): void
-  reveal(line: number, endLine?: number, mark?: boolean): void
-  problems(path: string, problems: Problem[]): void
-  paths(): string[]
-  forget(path: string): void
-  focus(): void
-  destroy(): void
-}
-
-const MYST = new MatchDecorator({
-  regexp: /^(?:`{3,}|:{3,})\{[\w.:-]+\}.*$|^:[\w-]+:(?=\s|$)|^\([^)\s]+\)=\s*$|\{[\w.:-]+\}`[^`]*`/g,
-  decoration: match => Decoration.mark({ class: match[0].startsWith('(') ? 'pm-cm-myst-label' : 'pm-cm-myst' }),
-})
-const mystMarks = ViewPlugin.fromClass(class {
-  decorations: DecorationSet
-  constructor(view: EditorView) {
-    this.decorations = MYST.createDeco(view)
-  }
-
-  update(update: ViewUpdate) {
-    this.decorations = MYST.updateDeco(update, this.decorations)
-  }
-}, { decorations: plugin => plugin.decorations })
-
-const HIGHLIGHT = HighlightStyle.define([
-  { tag: tags.heading, color: 'var(--pm-color-accent)', fontWeight: '600' },
-  { tag: [tags.processingInstruction, tags.meta, tags.contentSeparator, tags.comment, tags.punctuation], color: 'var(--pm-color-muted)' },
-  { tag: tags.emphasis, fontStyle: 'italic' },
-  { tag: tags.strong, fontWeight: '600' },
-  { tag: [tags.link, tags.url], color: 'var(--pm-color-accent)' },
-  { tag: tags.monospace, color: 'var(--pm-color-syntax-string)' },
-  { tag: [tags.propertyName, tags.definition(tags.propertyName), tags.attributeName, tags.labelName], color: 'var(--pm-color-syntax-key)' },
-  { tag: [tags.string, tags.special(tags.string)], color: 'var(--pm-color-syntax-string)' },
-  { tag: [tags.keyword, tags.bool, tags.null, tags.number, tags.atom], color: 'var(--pm-color-syntax-keyword)' },
-])
-
-const THEME = EditorView.theme({
-  '&': { height: '100%', backgroundColor: 'var(--pm-color-code)', color: 'var(--pm-color-ink)', fontSize: '0.84375rem' },
-  '&.cm-focused': { outline: 'none' },
-  '.cm-scroller': { fontFamily: 'var(--pm-font-mono)', lineHeight: '1.75' },
-  '.cm-content': { caretColor: 'var(--pm-color-ink)', padding: '14px 0' },
-  '.cm-line': { padding: '0 14px 0 6px' },
-  '.cm-gutters': { backgroundColor: 'var(--pm-color-code)', color: 'var(--pm-color-muted)', border: 'none' },
-  '.cm-lineNumbers .cm-gutterElement': { padding: '0 4px 0 12px', minWidth: '2.5em' },
-  '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--pm-color-ink)' },
-  '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--pm-color-selected) 55%, transparent)' },
-  '&.cm-focused .cm-cursor': { borderLeftColor: 'var(--pm-color-ink)' },
-  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: 'var(--pm-color-accent-soft)' },
-  '.cm-line.pm-cm-picked': { backgroundColor: 'var(--pm-color-selected)', boxShadow: 'inset 2px 0 0 var(--pm-color-accent)' },
-  '.pm-cm-myst': { color: 'var(--pm-color-syntax-key)' },
-  '.pm-cm-myst-label': { color: 'var(--pm-color-muted)' },
-  '.cm-lintRange-error, .cm-lintRange-warning, .cm-lintRange-info': { backgroundImage: 'none', textDecoration: 'underline wavy', textUnderlineOffset: '3px' },
-  '.cm-lintRange-error': { textDecorationColor: 'var(--pm-color-danger)' },
-  '.cm-lintRange-warning': { textDecorationColor: 'var(--pm-color-warn)' },
-  '.cm-lintRange-info': { textDecorationColor: 'var(--pm-color-accent)' },
-  '.cm-tooltip': { border: '1px solid var(--pm-color-line)', backgroundColor: 'var(--pm-color-surface)', color: 'var(--pm-color-ink)', borderRadius: 'var(--pm-radius-small)' },
-  '.cm-panels': { backgroundColor: 'var(--pm-color-sunk)', color: 'var(--pm-color-ink)' },
-  '.cm-searchMatch': { backgroundColor: 'var(--pm-color-warn-soft)' },
-  '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': { backgroundColor: 'var(--pm-color-accent-soft)' },
-})
-
-const pick = StateEffect.define<{ from: number, to: number } | null>()
-const picked = StateField.define<DecorationSet>({
-  create: () => Decoration.none,
-  update(marks, transaction) {
-    marks = marks.map(transaction.changes)
-    for (const effect of transaction.effects) {
-      if (!effect.is(pick)) continue
-      if (!effect.value) return Decoration.none
-      const { doc } = transaction.state
-      const lines = []
-      for (let n = effect.value.from; n <= effect.value.to && n <= doc.lines; n++) lines.push(Decoration.line({ class: 'pm-cm-picked' }).range(doc.line(n).from))
-      return Decoration.set(lines)
-    }
-    return marks
-  },
-  provide: field => EditorView.decorations.from(field),
-})
-
-function language(path: string): Extension {
-  if (/\.(?:md|markdown)$/i.test(path)) return [yamlFrontmatter({ content: markdown() }), mystMarks]
-  if (/\.ya?ml$/i.test(path)) return yaml()
-  return []
-}
-
-export function createEditor(parent: HTMLElement, options: EditorOptions): SourceEditor {
-  const states = new Map<string, EditorState>()
-  const problems = new Map<string, Problem[]>()
-  let current: string | undefined
-  const listener = EditorView.updateListener.of((update) => {
-    if (!current) return
-    if (update.docChanged) options.changed(current, update.state.doc.toString())
-    if (update.docChanged || update.selectionSet) options.moved(update.state.doc.lineAt(update.state.selection.main.head).number)
-    const selection = update.state.selection.main
-    if (update.view.hasFocus && update.selectionSet && !selection.empty) {
-      options.selected?.({
-        startLine: update.state.doc.lineAt(selection.from).number,
-        endLine: update.state.doc.lineAt(Math.max(selection.from, selection.to - 1)).number,
-        text: update.state.sliceDoc(selection.from, selection.to),
-      })
-    }
-  })
-  const extensions = (path: string): Extension => [
-    lineNumbers(),
-    highlightActiveLineGutter(),
-    highlightActiveLine(),
-    history(),
-    drawSelection(),
-    indentOnInput(),
-    bracketMatching(),
-    highlightSelectionMatches(),
-    lintGutter(),
-    picked,
-    EditorView.lineWrapping,
-    syntaxHighlighting(HIGHLIGHT),
-    THEME,
-    language(path),
-    keymap.of([
-      { key: 'Mod-s', preventDefault: true, run: () => {
-        options.save()
-        return true
-      } },
-      ...defaultKeymap,
-      ...historyKeymap,
-      ...searchKeymap,
-    ]),
-    EditorView.contentAttributes.of({ 'aria-label': options.label }),
-    listener,
-  ]
-  const view = new EditorView({ parent, state: EditorState.create({ doc: '', extensions: [THEME, EditorState.readOnly.of(true)] }) })
-
-  const diagnose = () => {
-    if (!current) return
-    const { doc } = view.state
-    const diagnostics: Diagnostic[] = (problems.get(current) ?? []).filter(problem => problem.line >= 1 && problem.line <= doc.lines).map((problem) => {
-      const line = doc.line(problem.line)
-      return { from: line.from, to: line.to, severity: problem.severity, message: problem.message }
-    })
-    view.dispatch(setDiagnostics(view.state, diagnostics))
-  }
-
-  return {
-    show(path, text) {
-      if (current === path) return
-      if (current) states.set(current, view.state)
-      current = path
-      view.setState(states.get(path) ?? EditorState.create({ doc: text, extensions: extensions(path) }))
-      diagnose()
-      options.moved(view.state.doc.lineAt(view.state.selection.main.head).number)
-    },
-    text(path) {
-      return (path === current ? view.state : states.get(path))?.doc.toString()
-    },
-    replace(path, text, fresh) {
-      if (path !== current) {
-        states.set(path, EditorState.create({ doc: text, extensions: extensions(path) }))
-        return
-      }
-      if (fresh) {
-        const head = Math.min(view.state.selection.main.head, text.length)
-        view.setState(EditorState.create({ doc: text, selection: EditorSelection.cursor(head), extensions: extensions(path) }))
-        diagnose()
-        return
-      }
-      view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text } })
-    },
-    reveal(line, endLine, mark) {
-      const { doc } = view.state
-      const first = Math.min(Math.max(line, 1), doc.lines)
-      const last = Math.min(Math.max(endLine ?? first, first), doc.lines)
-      const position = doc.line(first).from
-      view.dispatch({
-        selection: { anchor: position },
-        effects: [EditorView.scrollIntoView(position, { y: 'center' }), pick.of(mark ? { from: first, to: last } : null)],
-      })
-    },
-    problems(path, list) {
-      problems.set(path, list)
-      if (path === current) diagnose()
-    },
-    paths: () => [...new Set([...states.keys(), ...current ? [current] : []])],
-    forget(path) {
-      states.delete(path)
-      problems.delete(path)
-      if (path === current) {
-        current = undefined
-        view.setState(EditorState.create({ doc: '', extensions: [THEME, EditorState.readOnly.of(true)] }))
-      }
-    },
-    focus: () => view.focus(),
-    destroy: () => view.destroy(),
-  }
-}

package/src/merge.ts

@@ -1,30 +0,0 @@
-import { diff3Merge } from 'node-diff3'
-
-export interface Merged {
-  text: string
-  conflicts: number
-}
-
-export interface MergeLabels {
-  mine: string
-  theirs: string
-}
-
-export function mergeTexts(mine: string, base: string, theirs: string, labels: MergeLabels): Merged {
-  const lines: string[] = []
-  let conflicts = 0
-  for (const region of diff3Merge(mine.split('\n'), base.split('\n'), theirs.split('\n'), { excludeFalseConflicts: true })) {
-    if (region.ok) {
-      lines.push(...region.ok)
-      continue
-    }
-    const { a, o, b } = region.conflict!
-    if (o.length === 0) {
-      lines.push(...b, ...a)
-      continue
-    }
-    conflicts++
-    lines.push(`<<<<<<< ${labels.mine}`, ...a, '=======', ...b, `>>>>>>> ${labels.theirs}`)
-  }
-  return { text: lines.join('\n'), conflicts }
-}

package/src/panels/Changes.tsx

@@ -1,128 +0,0 @@
-import { useState } from 'react'
-import type { FormEvent } from 'react'
-import { PmBadge, PmButton, PmDialog, PmIconButton, PmNotice } from '../components.tsx'
-import { useMessages, useWorkbench, useWorkbenchStore } from '../react.tsx'
-
-function Counts({ added, removed }: { added?: number, removed?: number }) {
-  return (
-    <span className="pmw-changes__counts">
-      {added !== undefined && <span data-sign="added">+{added}</span>}
-      {removed !== undefined && <span data-sign="removed">−{removed}</span>}
-    </span>
-  )
-}
-
-export function ChangesPanel() {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const locale = useWorkbench(state => state.locale)
-  const review = useWorkbench(state => state.review)
-  const changed = useWorkbench(state => state.changed)
-  const history = useWorkbench(state => state.history)
-  const failure = useWorkbench(state => state.changesFailure)
-  const dir = useWorkbench(state => state.document)
-  const short = (path: string) => (dir && path.startsWith(`${dir}/`) ? path.slice(dir.length + 1) : path)
-  const [reviewMessage, setReviewMessage] = useState('')
-  const [commitMessage, setCommitMessage] = useState('')
-  const [discarding, setDiscarding] = useState(false)
-  const pending = new Set(review?.changes.map(change => change.path))
-  const own = changed?.filter(file => !pending.has(file.path))
-  const submit = (work: () => Promise<boolean>, done: () => void) => async (event: FormEvent) => {
-    event.preventDefault()
-    if (await work()) done()
-  }
-  return (
-    <section className="pmw-changes" aria-label={t.changes}>
-      {failure && <PmNotice tone="danger">{t.changesFailed(failure)}</PmNotice>}
-      {review && (
-        <section className="pmw-changes__group" aria-label={t.review} data-group="review">
-          <h2 className="pmw-changes__head">{t.review}<PmBadge tone="accent">{review.changes.length}</PmBadge></h2>
-          <p className="pmw-muted">{review.running ? t.reviewRunning : t.reviewWaiting(review.changes.length)}</p>
-          <ul className="pmw-changes__list">
-            {review.changes.map(change => (
-              <li key={change.path} className="pmw-changes__file">
-                <details>
-                  <summary><span className="pmw-changes__path" data-kind={change.kind} title={change.path}>{short(change.path)}</span><Counts added={change.added} removed={change.removed} /></summary>
-                  {change.diff && <pre className="pmw-changes__diff">{change.diff}</pre>}
-                </details>
-                <PmIconButton icon="undo" small label={t.rejectFile(short(change.path))} disabled={review.running} onClick={() => void workbench.rejectReview([change.path])} />
-              </li>
-            ))}
-          </ul>
-          {review.steps.length > 1 && (
-            <details className="pmw-changes__steps">
-              <summary>{t.checkpoints}</summary>
-              <ol>
-                {review.steps.map(step => (
-                  <li key={step.id}>
-                    <span>{step.label}</span>
-                    <PmButton small disabled={review.running} onClick={() => void workbench.restoreReview(step.id)}>{t.restore}</PmButton>
-                  </li>
-                ))}
-              </ol>
-            </details>
-          )}
-          <form className="pmw-changes__form" onSubmit={submit(() => workbench.acceptReview(reviewMessage.trim() || undefined), () => setReviewMessage(''))}>
-            <input className="pm-ui-input" aria-label={t.optionalMessage} placeholder={t.optionalMessage} value={reviewMessage} onChange={event => setReviewMessage(event.target.value)} />
-            <PmButton type="submit" variant="primary" icon="check" disabled={review.running}>{t.accept}</PmButton>
-            <PmButton variant="danger" disabled={review.running} onClick={() => void workbench.rejectReview()}>{t.rejectAll}</PmButton>
-          </form>
-        </section>
-      )}
-      <section className="pmw-changes__group" aria-label={t.uncommittedFiles} data-group="uncommitted">
-        <h2 className="pmw-changes__head">{t.uncommittedFiles}{own?.length ? <PmBadge>{own.length}</PmBadge> : null}</h2>
-        {own?.length === 0 && <p className="pmw-muted">{t.noUncommitted}</p>}
-        {own && own.length > 0 && (
-          <>
-            <ul className="pmw-changes__list">
-              {own.map(file => (
-                <li key={file.path} className="pmw-changes__file">
-                  <span className="pmw-changes__path" data-kind={file.kind} title={file.path}>{short(file.path)}</span>
-                  <Counts added={file.added} removed={file.removed} />
-                </li>
-              ))}
-            </ul>
-            <form className="pmw-changes__form" onSubmit={submit(() => workbench.commitChanges(commitMessage.trim()), () => setCommitMessage(''))}>
-              <input className="pm-ui-input" required aria-label={t.commitMessage} placeholder={t.commitMessage} value={commitMessage} onChange={event => setCommitMessage(event.target.value)} />
-              <PmButton type="submit" variant="primary" disabled={Boolean(review)}>{t.commit}</PmButton>
-              <PmButton disabled={Boolean(review)} onClick={() => setDiscarding(true)}>{t.discard}</PmButton>
-            </form>
-          </>
-        )}
-      </section>
-      <section className="pmw-changes__group" aria-label={t.history} data-group="history">
-        <h2 className="pmw-changes__head">{t.history}</h2>
-        {history?.length === 0 && <p className="pmw-muted">{t.noHistory}</p>}
-        <ol className="pmw-changes__list">
-          {history?.map(revision => (
-            <li key={revision.id} className="pmw-changes__revision" data-revision={revision.id}>
-              <span className="pmw-changes__subject">{revision.message.split('\n')[0]}</span>
-              <span className="pmw-muted pmw-changes__meta">
-                <PmBadge>{t.origins[revision.origin.kind] ?? revision.origin.kind}</PmBadge>
-                {revision.author.replace(/\s*<[^>]*>$/, '')} · {new Date(revision.date).toLocaleString(locale, { dateStyle: 'short', timeStyle: 'short' })}
-              </span>
-              {revision.revertedBy
-                ? <span className="pmw-muted">{t.reverted}</span>
-                : <PmButton small icon="undo" onClick={() => void workbench.revert(revision.id)}>{t.revert}</PmButton>}
-            </li>
-          ))}
-        </ol>
-      </section>
-      <PmDialog open={discarding} label={t.discard} closeLabel={t.close} onClose={() => setDiscarding(false)}>
-        <p>{t.confirmDiscard}</p>
-        <div className="pmw-operation__actions">
-          <PmButton onClick={() => setDiscarding(false)}>{t.cancel}</PmButton>
-          <PmButton
-            variant="danger"
-            onClick={() => {
-              setDiscarding(false)
-              void workbench.discardChanges()
-            }}
-          >
-            {t.discard}
-          </PmButton>
-        </div>
-      </PmDialog>
-    </section>
-  )
-}

package/src/panels/Files.tsx

@@ -1,73 +0,0 @@
-import { Tree } from 'react-arborist'
-import type { NodeRendererProps } from 'react-arborist'
-import { useMemo } from 'react'
-import type { SourceFile } from '../api.ts'
-import { PmIcon, PmIconButton, PmNotice } from '../components.tsx'
-import { useMessages, useWorkbench, useWorkbenchStore } from '../react.tsx'
-
-interface FileNode {
-  id: string
-  name: string
-  file?: SourceFile
-  children?: FileNode[]
-}
-
-function fileTree(files: SourceFile[], document: string): FileNode[] {
-  const root: FileNode = { id: '', name: '', children: [] }
-  for (const file of files) {
-    const parts = (document && file.path.startsWith(`${document}/`) ? file.path.slice(document.length + 1) : file.path).split('/')
-    let parent = root
-    for (const [i, name] of parts.entries()) {
-      const leaf = i === parts.length - 1
-      const id = leaf ? file.path : `directory:${parts.slice(0, i + 1).join('/')}`
-      let child = parent.children!.find(node => node.id === id)
-      if (!child) {
-        child = { id, name, ...leaf ? { file } : { children: [] } }
-        parent.children!.push(child)
-      }
-      parent = child
-    }
-  }
-  return root.children!
-}
-
-function FileRow({ node, style }: NodeRendererProps<FileNode>) {
-  return (
-    <button type="button" tabIndex={-1} style={style} className="pmw-tree__file" data-path={node.data.file?.path} data-active={node.isSelected || undefined} disabled={node.data.file?.binary} onClick={() => node.isInternal ? node.toggle() : node.activate()}>
-      <PmIcon name={node.isInternal ? 'folder' : 'document'} size={15} />{node.data.name}
-    </button>
-  )
-}
-
-export function FilesPanel({ onOpen }: { onOpen?(path: string): void }) {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const document = useWorkbench(state => state.document)
-  const files = useWorkbench(state => state.files)
-  const active = useWorkbench(state => state.active)
-  const documents = useWorkbench(state => state.documents)
-  const failure = useWorkbench(state => state.openFailure)
-  const data = useMemo(() => fileTree(files?.files ?? [], files?.home ? '' : document ?? ''), [files, document])
-  if (document === undefined) return null
-  const title = files?.home ? documents?.title ?? t.workspace : documents?.documents.find(doc => doc.dir === document)?.title ?? (document || documents?.title || t.workspace)
-  return (
-    <nav className="pmw-files" aria-label={t.filesOf(title)}>
-      <div className="pmw-files__head">
-        <PmIconButton icon="arrow-left" label={t.backToDocuments} small onClick={() => workbench.closeDocument()} />
-        <h2 className="pmw-files__title">{title}</h2>
-      </div>
-      {failure && <PmNotice tone="danger">{t.openFailed(failure)}</PmNotice>}
-      {files && files.files.length === 0 && <p className="pmw-muted">{t.noFiles}</p>}
-      {files && (
-        <Tree<FileNode> className="pmw-tree" data={data} selection={active} width="100%" height={Math.min(480, Math.max(96, (files.files.length + data.length) * 32))} rowHeight={32} indent={16} openByDefault disableDrag disableDrop disableEdit disableMultiSelection disableSelect={node => Boolean(node.file?.binary)} aria-label={t.files} onActivate={node => {
-          if (!node.data.file || node.data.file.binary) return
-          void workbench.openFile(node.data.file.path)
-          onOpen?.(node.data.file.path)
-        }}>
-          {FileRow}
-        </Tree>
-      )}
-      {files?.truncated && <p className="pmw-muted">{t.truncated}</p>}
-    </nav>
-  )
-}