@lincyaw/workbench 0.1.0 → 0.2.0-rc.1

package/src/panels/Home.tsx

@@ -1,224 +0,0 @@
-import { Command } from 'cmdk'
-import { useEffect, useRef, useState } from 'react'
-import type { DocumentOperation, WorkspaceDocument } from '../api.ts'
-import { PmBadge, PmButton, PmCard, PmDialog, PmEmpty, PmField, PmIcon, PmMenu, PmNotice } from '../components.tsx'
-import { useMessages, useWorkbench, useWorkbenchStore } from '../react.tsx'
-
-type Editing =
-  | { op: 'create' }
-  | { op: 'rename' | 'copy' | 'delete', doc: WorkspaceDocument }
-
-function freeDir(dir: string, taken: string[]): string {
-  for (let n = 2; ; n++) {
-    const candidate = `${dir}-${n}`
-    if (!taken.includes(candidate)) return candidate
-  }
-}
-
-export function HomePanel() {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const answer = useWorkbench(state => state.documents)
-  const failure = useWorkbench(state => state.failure)
-  const noRoutes = useWorkbench(state => state.noRoutes)
-  const [editing, setEditing] = useState<Editing>()
-  const [done, setDone] = useState<string>()
-  const [error, setError] = useState<string>()
-  useEffect(() => {
-    void workbench.loadDocuments()
-  }, [workbench])
-  const documents = answer?.documents ?? []
-  const operable = Boolean(answer?.git) && !answer?.single
-
-  const run = async (operation: DocumentOperation, said: (dir: string) => string) => {
-    setError(undefined)
-    try {
-      const result = await workbench.operate(operation)
-      setDone(said(result.dir ?? operation.dir))
-      setEditing(undefined)
-    } catch (failed) {
-      setError(failed instanceof Error ? failed.message : String(failed))
-    }
-  }
-
-  return (
-    <section className="pmw-home" aria-labelledby="pmw-home-title">
-      <header className="pmw-home__bar">
-        <h1 id="pmw-home-title" className="pmw-home__title">{answer?.title ?? t.workspace}</h1>
-        <Search documents={documents} onCreate={() => setEditing({ op: 'create' })} />
-        {operable && <PmButton variant="primary" icon="plus" onClick={() => setEditing({ op: 'create' })}>{t.newDocument}</PmButton>}
-      </header>
-      {failure && <PmNotice tone="danger">{noRoutes ? t.noRoutes : failure}</PmNotice>}
-      {done && <PmNotice tone="ok">{done}</PmNotice>}
-      {answer && !answer.git && !answer.single && <PmNotice tone="warn">{t.notGit}</PmNotice>}
-      <h2 className="pmw-home__heading">{t.documents}</h2>
-      {answer && documents.length === 0
-        ? <PmEmpty icon="document" title={t.noDocuments} />
-        : (
-            <ul className="pmw-home__cards" aria-label={t.documents}>
-              {documents.map(doc => (
-                <li key={doc.dir} className="pmw-home__card" data-document={doc.dir}>
-                  <PmCard variant="interactive">
-                    <button type="button" className="pmw-home__open" onClick={() => void workbench.openDocument(doc.dir)}>
-                      <span className="pmw-home__doc-title">{doc.title}</span>
-                      <span className="pmw-home__doc-dir">{doc.dir || '.'}</span>
-                    </button>
-                    <div className="pmw-home__meta">
-                      {doc.lang && <PmBadge tone="outline">{doc.lang}</PmBadge>}
-                      {operable && (
-                        <PmMenu
-                          label={t.more(doc.title)}
-                          items={[{ id: 'rename', label: t.rename, icon: 'edit' }, { id: 'copy', label: t.copy, icon: 'copy' }, { id: 'delete', label: t.remove, icon: 'trash', danger: true }]}
-                          onSelect={id => setEditing({ op: id as 'rename' | 'copy' | 'delete', doc })}
-                        />
-                      )}
-                    </div>
-                  </PmCard>
-                </li>
-              ))}
-            </ul>
-          )}
-      <McpCard />
-      {editing && (
-        <OperationDialog
-          editing={editing}
-          templates={answer?.templates ?? []}
-          taken={documents.map(doc => doc.dir)}
-          error={error}
-          onClose={() => {
-            setEditing(undefined)
-            setError(undefined)
-          }}
-          onRun={(operation) => {
-            const said = { create: t.created, rename: t.renamed, copy: t.copied, delete: t.removed }[operation.op]
-            void run(operation, said)
-          }}
-        />
-      )}
-    </section>
-  )
-}
-
-function OperationDialog({ editing, templates, taken, error, onClose, onRun }: { editing: Editing, templates: string[], taken: string[], error?: string, onClose(): void, onRun(operation: DocumentOperation): void }) {
-  const t = useMessages()
-  const [dir, setDir] = useState(editing.op === 'create' ? '' : editing.op === 'copy' ? freeDir(editing.doc.dir, taken) : editing.op === 'rename' ? editing.doc.dir : '')
-  const [title, setTitle] = useState('')
-  const [template, setTemplate] = useState(templates.includes('default') ? 'default' : templates[0] ?? '')
-  const label = editing.op === 'create' ? t.newDocument : `${{ rename: t.rename, copy: t.copy, delete: t.remove }[editing.op]} · ${editing.doc.title}`
-  const submit = () => {
-    if (editing.op === 'create') onRun({ op: 'create', dir: dir.trim(), ...title.trim() ? { title: title.trim() } : {}, ...template ? { template } : {} })
-    else if (editing.op === 'delete') onRun({ op: 'delete', dir: editing.doc.dir })
-    else onRun({ op: editing.op, dir: editing.doc.dir, to: dir.trim() })
-  }
-  return (
-    <PmDialog open label={label} closeLabel={t.close} name="pmw-operation" onClose={onClose}>
-      <form
-        className="pmw-operation"
-        onSubmit={(event) => {
-          event.preventDefault()
-          submit()
-        }}
-      >
-        {editing.op === 'delete'
-          ? <p>{t.confirmRemove(editing.doc.title)}</p>
-          : (
-              <PmField label={editing.op === 'create' ? t.dir : editing.op === 'rename' ? t.renameTo : t.copyTo}>
-                <input className="pm-ui-input" name="dir" value={dir} required onChange={event => setDir(event.target.value)} />
-              </PmField>
-            )}
-        {editing.op === 'create' && (
-          <>
-            <PmField label={t.title}>
-              <input className="pm-ui-input" name="title" value={title} onChange={event => setTitle(event.target.value)} />
-            </PmField>
-            {templates.length > 1 && (
-              <PmField label={t.template}>
-                <select className="pm-ui-select" name="template" value={template} onChange={event => setTemplate(event.target.value)}>
-                  {templates.map(name => <option key={name} value={name}>{name}</option>)}
-                </select>
-              </PmField>
-            )}
-          </>
-        )}
-        {error && <PmNotice tone="danger">{error}</PmNotice>}
-        <div className="pmw-operation__actions">
-          <PmButton onClick={onClose}>{t.cancel}</PmButton>
-          <PmButton type="submit" variant={editing.op === 'delete' ? 'danger' : 'primary'}>
-            {editing.op === 'create' ? t.create : { rename: t.rename, copy: t.copy, delete: t.remove }[editing.op]}
-          </PmButton>
-        </div>
-      </form>
-    </PmDialog>
-  )
-}
-
-function Search({ documents, onCreate }: { documents: WorkspaceDocument[], onCreate(): void }) {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const [query, setQuery] = useState('')
-  const input = useRef<HTMLInputElement>(null)
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
-        event.preventDefault()
-        input.current?.focus()
-      }
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [])
-  return (
-    <Command className="pmw-search" label={t.search}>
-      <label className="pm-ui-search">
-        <PmIcon name="search" size={15} strokeWidth={1.8} />
-        <Command.Input ref={input} value={query} aria-label={t.search} placeholder={`${t.search}（${t.searchHint}）`} onValueChange={setQuery} onKeyDown={event => { if (event.key === 'Escape') setQuery('') }} />
-      </label>
-      {query.trim() && (
-        <Command.List className="pmw-search__results" aria-label={t.search}>
-          <Command.Empty className="pmw-muted">{t.noMatch}</Command.Empty>
-          <Command.Group heading={t.documents}>
-            {documents.map(doc => (
-              <Command.Item key={doc.dir} value={`${doc.title} ${doc.dir}`} className="pmw-search__item" onSelect={() => { setQuery(''); void workbench.openDocument(doc.dir) }}>
-                <PmIcon name="document" size={15} />{doc.title}<span className="pmw-muted">{doc.dir}</span>
-              </Command.Item>
-            ))}
-          </Command.Group>
-          <Command.Group heading={t.commands}>
-            <Command.Item value={t.newDocument} className="pmw-search__item" onSelect={() => { setQuery(''); onCreate() }}><PmIcon name="plus" size={15} />{t.newDocument}</Command.Item>
-          </Command.Group>
-        </Command.List>
-      )}
-    </Command>
-  )
-}
-
-function McpCard() {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const [address, setAddress] = useState<string>()
-  const [copied, setCopied] = useState(false)
-  useEffect(() => {
-    workbench.client.workbench().then(answer => setAddress(answer.mcp), () => {})
-  }, [workbench])
-  if (!address) return null
-  return (
-    <PmCard className="pmw-home__mcp">
-      <h2 className="pmw-home__heading">{t.mcp}</h2>
-      <div className="pmw-home__address">
-        <code>{address}</code>
-        <PmButton
-          small
-          icon={copied ? 'check' : 'copy'}
-          onClick={() => {
-            void navigator.clipboard?.writeText(address).catch(() => {})
-            setCopied(true)
-            setTimeout(() => setCopied(false), 2000)
-          }}
-        >
-          {copied ? t.copiedAddress : t.copyAddress}
-        </PmButton>
-      </div>
-      <p className="pmw-muted">{t.mcpHint}</p>
-    </PmCard>
-  )
-}

package/src/panels/Preview.tsx

@@ -1,68 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { connectPreview } from '../preview.ts'
-import { PmButton, PmIconButton, PmNotice, PmSegmented } from '../components.tsx'
-import { useMessages, useWorkbench, useWorkbenchStore } from '../react.tsx'
-import type { PreviewView } from '../store.ts'
-
-const READY_MS = 45_000
-const RELOADS = 3
-
-export function PreviewPanel() {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const document = useWorkbench(state => state.document)
-  const documents = useWorkbench(state => state.documents)
-  const preview = useWorkbench(state => state.preview)
-  const failure = useWorkbench(state => state.previewFailure)
-  const view = useWorkbench(state => state.view)
-  const picking = useWorkbench(state => state.picking)
-  const frame = useRef<HTMLIFrameElement>(null)
-  const [loads, setLoads] = useState(0)
-  const [ready, setReady] = useState(false)
-  const [mismatch, setMismatch] = useState(false)
-  const address = view === 'slides' ? preview?.slides : preview?.web
-
-  useEffect(() => {
-    if (!address || !frame.current) return
-    setReady(false)
-    const connection = connectPreview(() => frame.current, address, {
-      report(report) {
-        if (report.type === 'ready') setReady(true)
-        workbench.previewReport(report)
-      },
-      mismatch: () => setMismatch(true),
-    })
-    frame.current.src = connection.src
-    const detach = workbench.attachPreview(connection)
-    let reloads = 0
-    const timer = setInterval(() => {
-      if (connection.ready || reloads >= RELOADS || !frame.current) return
-      reloads++
-      frame.current.src = connection.src
-    }, READY_MS)
-    return () => {
-      clearInterval(timer)
-      detach()
-      connection.dispose()
-    }
-  }, [address, workbench, loads])
-
-  if (document === undefined) return null
-  const title = documents?.documents.find(doc => doc.dir === document)?.title ?? document
-  const views: { value: PreviewView, label: string }[] = [{ value: 'web', label: t.views.web }, ...preview?.slides ? [{ value: 'slides' as const, label: t.views.slides }] : []]
-  return (
-    <section className="pmw-preview" aria-label={t.preview} data-ready={ready || undefined}>
-      <div className="pmw-preview__bar">
-        {views.length > 1 && <PmSegmented value={view} options={views} label={t.view} onChange={value => workbench.setView(value)} />}
-        <span className="pmw-spacer" />
-        <PmButton small icon="edit" variant={picking ? 'accent' : 'ghost'} aria-pressed={picking} title={t.pickHint} onClick={() => workbench.setPicking(!picking)}>{t.pick}</PmButton>
-        <PmIconButton icon="redo" label={t.reloadPreview} small onClick={() => (preview ? setLoads(n => n + 1) : workbench.retryPreview())} />
-      </div>
-      {mismatch && <PmNotice tone="warn">{t.versionMismatch}</PmNotice>}
-      {failure && <PmNotice tone="danger">{t.previewFailed(failure)}</PmNotice>}
-      {!preview && !failure && <p className="pmw-muted pmw-preview__loading">{t.previewLoading}</p>}
-      {view === 'slides' && preview && !preview.slides && <p className="pmw-muted">{t.noSlides}</p>}
-      <iframe ref={frame} className="pmw-preview__frame" title={t.previewTitle(title)} hidden={!address} />
-    </section>
-  )
-}

package/src/panels/Problems.tsx

@@ -1,42 +0,0 @@
-import { PmIcon } from '../components.tsx'
-import { useMessages, useWorkbench, useWorkbenchStore } from '../react.tsx'
-
-export function ProblemsPanel() {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const ir = useWorkbench(state => state.ir)
-  const issues = useWorkbench(state => state.issues)
-  const findings = ir?.diagnostics ?? []
-  const count = findings.length + issues.length
-  return (
-    <section className="pmw-problems" aria-label={t.problems}>
-      <h2 className="pmw-problems__head">
-        {t.problems}
-        <span className="pm-ui-badge" data-count={count}>{count}</span>
-      </h2>
-      {ir && count === 0 && <p className="pmw-muted pmw-problems__none">{t.noProblems}</p>}
-      <ul className="pmw-problems__list">
-        {findings.map((finding, i) => (
-          <li key={`f${i}`}>
-            <button type="button" className="pmw-problem" data-severity={finding.severity} disabled={!finding.source?.file} onClick={() => void workbench.revealProblem(finding)}>
-              <PmIcon name={finding.severity === 'error' ? 'error' : finding.severity === 'warning' ? 'warning' : 'info'} size={15} />
-              <span className="pmw-problem__severity">{t.severity[finding.severity] ?? finding.severity}</span>
-              <span className="pmw-problem__where">{finding.source ? `${finding.source.file}${finding.source.line ? `:${finding.source.line}` : ''}` : ''}</span>
-              <span className="pmw-problem__message">{finding.message}{finding.hint ? ` ${finding.hint}` : ''}</span>
-            </button>
-          </li>
-        ))}
-        {issues.map((issue, i) => (
-          <li key={`p${i}`}>
-            <div className="pmw-problem" data-severity={issue.level}>
-              <PmIcon name={issue.level === 'error' ? 'error' : 'warning'} size={15} />
-              <span className="pmw-problem__severity">{t.severity[issue.level]}</span>
-              <span className="pmw-problem__where">{t.page}{issue.plugin ? ` · ${issue.plugin}` : ''}</span>
-              <span className="pmw-problem__message">{issue.message}</span>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </section>
-  )
-}

package/src/panels/Source.tsx

@@ -1,118 +0,0 @@
-import * as Tabs from '@radix-ui/react-tabs'
-import { useEffect, useRef } from 'react'
-import type { KeyboardEvent } from 'react'
-import { createEditor } from '../editor.ts'
-import type { Problem, SourceEditor } from '../editor.ts'
-import { PmButton, PmIconButton, PmNotice } from '../components.tsx'
-import { useMessages, useWorkbench, useWorkbenchStore } from '../react.tsx'
-import type { OpenFile } from '../store.ts'
-
-const nameOf = (path: string) => path.slice(path.lastIndexOf('/') + 1)
-
-export function SourcePanel() {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const open = useWorkbench(state => state.open)
-  const active = useWorkbench(state => state.active)
-  const file = open.find(f => f.path === active)
-  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
-    if (event.defaultPrevented || !(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 's') return
-    event.preventDefault()
-    void workbench.save()
-  }
-  return (
-    <Tabs.Root asChild value={active ?? ''} onValueChange={path => workbench.showFile(path)}>
-    <section className="pmw-source" aria-label={t.source} onKeyDown={onKeyDown}>
-      <Tabs.List className="pmw-source__tabs" aria-label={t.source}>
-        {open.map(f => (
-          <span key={f.path} className="pmw-source__tab" data-active={f.path === active || undefined}>
-            <Tabs.Trigger value={f.path} title={f.path}>
-              {nameOf(f.path)}
-              {f.dirty && <span className="pmw-source__dot" aria-label={t.unsaved} role="img" />}
-            </Tabs.Trigger>
-            <PmIconButton icon="close" label={t.closeFile(nameOf(f.path))} small onClick={() => workbench.closeFile(f.path)} />
-          </span>
-        ))}
-        <span className="pmw-spacer" />
-        {file && <PmButton small icon="check" variant={file.dirty ? 'primary' : 'default'} onClick={() => void workbench.save(file.path)}>{t.save}</PmButton>}
-      </Tabs.List>
-      {file?.notice && <FileNoticeBox file={file} />}
-      <Tabs.Content value={active ?? ''} forceMount className="pmw-source__body"><EditorPane /></Tabs.Content>
-      {!file && <p className="pmw-source__empty pmw-muted">{t.noFile}</p>}
-    </section>
-    </Tabs.Root>
-  )
-}
-
-function FileNoticeBox({ file }: { file: OpenFile }) {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const notice = file.notice!
-  switch (notice.kind) {
-    case 'changed':
-      return (
-        <PmNotice tone="warn">
-          <span>{t.changedOnDisk(nameOf(file.path))}</span>
-          <span className="pmw-notice__actions">
-            <PmButton small onClick={() => workbench.merge(file.path, { mine: t.mergeMine, theirs: t.mergeTheirs })}>{t.merge}</PmButton>
-            <PmButton small onClick={() => workbench.reload(file.path)}>{t.reload}</PmButton>
-          </span>
-        </PmNotice>
-      )
-    case 'merged': return <PmNotice tone="accent">{t.merged(notice.conflicts)}</PmNotice>
-    case 'locked': return <PmNotice tone="warn">{t.locked}</PmNotice>
-    case 'failed': return <PmNotice tone="danger">{t.saveFailed(notice.message)}</PmNotice>
-  }
-}
-
-function EditorPane() {
-  const t = useMessages()
-  const workbench = useWorkbenchStore()
-  const parent = useRef<HTMLDivElement>(null)
-  const editor = useRef<SourceEditor>(undefined)
-  const active = useWorkbench(state => state.active)
-  const reveal = useWorkbench(state => state.reveal)
-  const ir = useWorkbench(state => state.ir)
-  const opened = useWorkbench(state => state.open.length)
-  const label = useRef(t.editor(''))
-  label.current = t.editor(active ?? '')
-
-  useEffect(() => {
-    const made = createEditor(parent.current!, {
-      label: label.current,
-      save: () => void workbench.save(),
-      changed: (path, text) => workbench.edited(path, text),
-      moved: line => workbench.moved(line),
-      selected: selection => workbench.selectSource(selection),
-    })
-    editor.current = made
-    const unbind = workbench.bindEditor({ text: path => made.text(path), replace: (path, text, fresh) => made.replace(path, text, fresh), focus: () => made.focus() })
-    return () => {
-      unbind()
-      made.destroy()
-      editor.current = undefined
-    }
-  }, [workbench])
-
-  useEffect(() => {
-    const made = editor.current
-    if (!made) return
-    for (const path of made.paths()) if (!workbench.state.open.some(file => file.path === path)) made.forget(path)
-    if (!active) return
-    made.show(active, workbench.textOf(active) ?? '')
-  }, [active, workbench, opened])
-
-  useEffect(() => {
-    if (reveal && reveal.path === active) editor.current?.reveal(reveal.line, reveal.endLine, reveal.mark)
-  }, [reveal, active])
-
-  useEffect(() => {
-    if (!active || !editor.current) return
-    const problems: Problem[] = (ir?.diagnostics ?? []).filter(finding => finding.source?.file === active && finding.source.line).map(finding => ({ line: finding.source!.line!, severity: finding.severity === 'error' ? 'error' : finding.severity === 'warning' ? 'warning' : 'info', message: finding.message }))
-    editor.current.problems(active, problems)
-  }, [ir, active])
-
-  return (
-    <div className="pmw-source__editor" ref={parent} hidden={!active} data-path={active} />
-  )
-}

package/src/panels/Status.tsx

@@ -1,26 +0,0 @@
-import { PmIcon } from '../components.tsx'
-import { useMessages, useWorkbench } from '../react.tsx'
-
-export function StatusItems() {
-  const t = useMessages()
-  const documents = useWorkbench(state => state.documents)
-  const document = useWorkbench(state => state.document)
-  const active = useWorkbench(state => state.active)
-  const line = useWorkbench(state => state.line)
-  const lang = documents?.documents.find(doc => doc.dir === document)?.lang
-  return (
-    <>
-      {documents && (
-        <span className="pmw-status__item" data-status="git">
-          <PmIcon name="branch" size={13} />
-          {documents.git ? (documents.branch ? t.branch(documents.branch) : 'HEAD') : t.noGit}
-          {documents.git && documents.uncommitted ? ` · ${t.uncommitted(documents.uncommitted)}` : ''}
-        </span>
-      )}
-      <span className="pmw-spacer" />
-      {document !== undefined && lang && <span className="pmw-status__item" data-status="lang">{t.language(lang)}</span>}
-      {active && <span className="pmw-status__item" data-status="encoding">{t.encoding}</span>}
-      {active && <span className="pmw-status__item" data-status="line">{t.line(line)}</span>}
-    </>
-  )
-}

package/src/react.tsx

@@ -1,59 +0,0 @@
-import { createContext, useContext, useEffect, useSyncExternalStore } from 'react'
-import type { ReactNode } from 'react'
-import { MESSAGES } from './messages.ts'
-import type { WorkbenchMessages } from './messages.ts'
-import type { Workbench, WorkbenchState } from './store.ts'
-import { PmButton, PmDialog, PmNotice } from './components.tsx'
-
-const WORKBENCH = createContext<Workbench | undefined>(undefined)
-
-export function WorkbenchProvider({ workbench, children, protectChanges = true }: { workbench: Workbench, children?: ReactNode, protectChanges?: boolean }) {
-  return <WORKBENCH.Provider value={workbench}>{children}{protectChanges && <UnsavedChanges />}</WORKBENCH.Provider>
-}
-
-function UnsavedChanges() {
-  const workbench = useWorkbenchStore()
-  const files = useWorkbench(state => state.leaving)
-  const saving = useWorkbench(state => state.leaveSaving)
-  const failed = useWorkbench(state => state.leaveFailed)
-  const t = useMessages()
-  useEffect(() => {
-    const beforeUnload = (event: BeforeUnloadEvent) => {
-      if (!workbench.state.open.some(file => file.dirty)) return
-      event.preventDefault()
-      event.returnValue = ''
-    }
-    window.addEventListener('beforeunload', beforeUnload)
-    const refreshFiles = () => { void workbench.checkDisk() }
-    window.addEventListener('focus', refreshFiles)
-    return () => {
-      window.removeEventListener('beforeunload', beforeUnload)
-      window.removeEventListener('focus', refreshFiles)
-    }
-  }, [workbench])
-  return <PmDialog open={Boolean(files)} label={t.saveChanges} closeLabel={t.close} onClose={() => void workbench.resolveLeave('cancel')}>
-    <p>{t.unsavedFiles}</p>
-    <ul>{files?.map(path => <li key={path}>{path}</li>)}</ul>
-    {failed && <PmNotice tone="danger">{t.saveBeforeLeavingFailed}</PmNotice>}
-    <div className="pmw-notice__actions">
-      <PmButton disabled={saving} onClick={() => void workbench.resolveLeave('cancel')}>{t.cancel}</PmButton>
-      <PmButton disabled={saving} onClick={() => void workbench.resolveLeave('discard')}>{t.discardChanges}</PmButton>
-      <PmButton disabled={saving} variant="primary" onClick={() => void workbench.resolveLeave('save')}>{t.save}</PmButton>
-    </div>
-  </PmDialog>
-}
-
-export function useWorkbenchStore(): Workbench {
-  const workbench = useContext(WORKBENCH)
-  if (!workbench) throw new Error('a workbench panel is drawn outside WorkbenchProvider')
-  return workbench
-}
-
-export function useWorkbench<T>(select: (state: WorkbenchState) => T): T {
-  const workbench = useWorkbenchStore()
-  return useSyncExternalStore(workbench.subscribe, () => select(workbench.getState()))
-}
-
-export function useMessages(): WorkbenchMessages {
-  return MESSAGES[useWorkbench(state => state.locale)]
-}

package/src/service.ts

@@ -1,82 +0,0 @@
-import type { FocusReport } from '@lincyaw/kernel'
-import type { DocumentOperation, DocumentsAnswer, ErrorAnswer, FilesAnswer, FocusAnswer, HistoryRevision, IrAnswer, IrEvent, OperationAnswer, PreviewAnswer, RevertAnswer, ReviewEnd, ReviewFollowed, ReviewView, SavedAnswer, SourceAnswer, UncommittedFile, WorkbenchAnswer } from './api.ts'
-
-export class ServiceError extends Error {
-  readonly status: number
-  readonly answer: ErrorAnswer
-  constructor(status: number, answer: ErrorAnswer) {
-    super(answer.error ?? answer.detail ?? answer.title ?? `HTTP ${status}`)
-    this.status = status
-    this.answer = answer
-  }
-}
-
-export interface WorkspaceClient {
-  documents(document?: string): Promise<DocumentsAnswer>
-  operate(operation: DocumentOperation): Promise<OperationAnswer>
-  files(document: string): Promise<FilesAnswer>
-  source(document: string, path: string): Promise<SourceAnswer>
-  save(document: string, path: string, content: string, base: string): Promise<SavedAnswer>
-  ir(document: string): Promise<IrAnswer>
-  preview(document: string): Promise<PreviewAnswer>
-  workbench(): Promise<WorkbenchAnswer>
-  focus(document: string, focus?: FocusReport[]): Promise<FocusAnswer>
-  events(document: string, revision: (event: IrEvent) => void, failed?: () => void): () => void
-  review(document: string, followed: (event: ReviewFollowed) => void): () => void
-  accept(document: string, body: { reject?: string[], message?: string }): Promise<{ ended: ReviewEnd }>
-  reject(document: string, paths?: string[]): Promise<ReviewFollowed>
-  restore(document: string, step: string): Promise<{ review: ReviewView }>
-  changes(document: string): Promise<{ files: UncommittedFile[] }>
-  commit(document: string, message: string, paths?: string[]): Promise<unknown>
-  discard(document: string, paths?: string[]): Promise<unknown>
-  revisions(document: string): Promise<{ revisions: HistoryRevision[] }>
-  revert(document: string, id: string): Promise<RevertAnswer>
-}
-
-export function workspaceClient(base = 'api/presmium/'): WorkspaceClient {
-  const url = (path: string, document?: string, query: Record<string, string> = {}) => {
-    const address = new URL(`${base}${path}`, globalThis.document.baseURI)
-    if (document !== undefined) address.searchParams.set('document', document)
-    for (const [name, value] of Object.entries(query)) address.searchParams.set(name, value)
-    return address.href
-  }
-  const call = async <T>(address: string, init?: RequestInit): Promise<T> => {
-    const response = await fetch(address, { credentials: 'same-origin', ...init })
-    const data = await response.json().catch(() => ({})) as T & ErrorAnswer
-    if (!response.ok) throw new ServiceError(response.status, data)
-    return data
-  }
-  const post = <T>(address: string, body: unknown) => call<T>(address, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
-  const follow = <T>(address: string, name: string, on: (data: T) => void, failed?: () => void) => {
-    const source = new EventSource(address)
-    source.addEventListener(name, (event) => {
-      try {
-        on(JSON.parse((event as MessageEvent<string>).data) as T)
-      } catch {
-      }
-    })
-    if (failed) source.addEventListener('error', failed)
-    return () => source.close()
-  }
-  return {
-    documents: document => call(url('documents', document)),
-    operate: operation => post(url('documents'), operation),
-    files: document => call(url('files', document)),
-    source: (document, path) => call(url('source', document, { path })),
-    save: (document, path, content, base) => post(url('source', document), { path, content, base }),
-    ir: document => call(url('ir', document)),
-    preview: document => call(url('preview', document)),
-    workbench: () => call(url('workbench')),
-    focus: (document, focus) => focus === undefined ? call(url('focus', document)) : post(url('focus'), { document, focus }),
-    events: (document, revision, failed) => follow(url('ir/events', document), 'revision', revision, failed),
-    review: (document, followed) => follow(url('review', document), 'review', followed),
-    accept: (document, body) => post(url('review/accept', document), body),
-    reject: (document, paths) => post(url('review/reject', document), paths ? { paths } : {}),
-    restore: (document, step) => post(url('review/restore', document), { step }),
-    changes: document => call(url('changes', document)),
-    commit: (document, message, paths) => post(url('changes/commit', document), { message, ...paths ? { paths } : {} }),
-    discard: (document, paths) => post(url('changes/discard', document), paths ? { paths } : {}),
-    revisions: document => call(url('revisions', document, { limit: '50' })),
-    revert: (document, id) => post(url('revisions/revert', document), { id }),
-  }
-}