@lincyaw/workbench 0.0.0-stage → 0.1.0

package/src/panels/DocumentView.tsx

@@ -0,0 +1,50 @@
+import { Group, Panel, Separator, usePanelRef } from 'react-resizable-panels'
+import { useLayoutEffect } from 'react'
+import { PmButton, PmIconButton, PmNotice, PmSegmented } from '../components.tsx'
+import { useMessages, useWorkbench, useWorkbenchStore } from '../react.tsx'
+import { ProblemsPanel } from './Problems.tsx'
+import { PreviewPanel } from './Preview.tsx'
+import { SourcePanel } from './Source.tsx'
+
+export function DocumentView({ only }: { only?: 'source' | 'preview' }) {
+  const t = useMessages()
+  const workbench = useWorkbenchStore()
+  const layout = useWorkbench(state => state.layout)
+  const focus = useWorkbench(state => state.focus)
+  const pending = useWorkbench(state => state.focusPending)
+  const failure = useWorkbench(state => state.focusFailure)
+  const home = useWorkbench(state => state.document === '' && state.documents?.single === false)
+  const mode = home ? 'source' : only ?? layout
+  const single = mode === 'split' ? undefined : mode
+  const selected = focus[0]
+  const label = selected?.quote ?? selected?.section ?? selected?.source?.file
+  const source = usePanelRef()
+  const preview = usePanelRef()
+  useLayoutEffect(() => {
+    if (mode === 'preview') source.current?.collapse()
+    else source.current?.expand()
+    if (mode === 'source') preview.current?.collapse()
+    else preview.current?.expand()
+  }, [mode, source, preview])
+  return (
+    <div className="pmw-document">
+      {!only && !home && <div className="pmw-document__bar">
+        <PmSegmented value={layout} label={t.documentLayout} options={[{ value: 'preview', label: t.preview }, { value: 'split', label: t.split }, { value: 'source', label: t.source }]} onChange={value => workbench.setLayout(value)} />
+      </div>}
+      {selected && <div className="pmw-focus" role="status" aria-label={t.focus} data-pending={pending || undefined}>
+        <span className="pmw-focus__label">{pending ? t.focusSaving : t.focus}</span>
+        <span className="pmw-focus__quote" title={label}>{label}</span>
+        <PmIconButton icon="close" label={t.clearFocus} small onClick={() => workbench.setFocus([])} />
+      </div>}
+      {failure && <PmNotice tone="danger"><span>{t.focusFailed(failure)}</span><PmButton small onClick={() => workbench.setFocus(focus)}>{t.retryFocus}</PmButton></PmNotice>}
+    <Group className="pmw-doc" data-only={single} disabled={Boolean(single)}>
+      <Panel id="source" panelRef={source} collapsible collapsedSize={0} minSize="20%" className="pmw-doc__source" hidden={single === 'preview'}>
+        <SourcePanel />
+        <ProblemsPanel />
+      </Panel>
+      <Separator className="pmw-separator" aria-label={t.resize} hidden={Boolean(single)} />
+      <Panel id="preview" panelRef={preview} collapsible collapsedSize={0} minSize="20%" className="pmw-doc__preview" hidden={single === 'source'}><PreviewPanel /></Panel>
+    </Group>
+    </div>
+  )
+}

package/src/panels/Files.tsx

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

package/src/panels/Home.tsx

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

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

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

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

@@ -0,0 +1,26 @@
+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/places.ts

@@ -0,0 +1,34 @@
+import { irBlocks } from '@lincyaw/kernel'
+import type { IRDocument, SourcePos } from '@lincyaw/kernel'
+
+export interface Place {
+  section: string
+  block?: string
+  source: SourcePos
+}
+
+export function placeAt(doc: IRDocument, file: string, line: number): Place | undefined {
+  let found: Place | undefined
+  let span = Number.POSITIVE_INFINITY
+  for (const section of doc.sections) {
+    const places: Place[] = [{ section: section.id, source: section.source }, ...[...irBlocks(section.blocks)].map(block => ({ section: section.id, block: block.id, source: block.source }))]
+    for (const place of places) {
+      const { source } = place
+      const end = source.endLine ?? source.line
+      if (source.file !== file || line < source.line || line > end) continue
+      if (end - source.line < span || (end - source.line === span && place.block)) {
+        found = place
+        span = end - source.line
+      }
+    }
+  }
+  return found
+}
+
+export function placeOf(doc: IRDocument, section: string, block?: string): Place | undefined {
+  const found = doc.sections.find(s => s.id === section)
+  if (!found) return undefined
+  if (!block) return { section, source: found.source }
+  const inner = [...irBlocks(found.blocks)].find(b => b.id === block)
+  return inner ? { section, block, source: inner.source } : { section, source: found.source }
+}