@lincyaw/viewer 1.0.0-rc.0 → 1.0.0-rc.1

package/README.md

@@ -1,8 +1,8 @@
 # @lincyaw/viewer
 
-Presmium's IR runtime: renders compiled documents in the browser with Vue, in pluggable runtime views (the document, scrollytelling, the present view, the presenter view), and applies live updates without reloading.
+Presmium's IR runtime: renders compiled documents in the browser with React, in pluggable runtime views (the document, scrollytelling, the present view, the presenter view), and applies live updates without reloading. The web form and the slides are both this runtime: a slide is a section on a canvas of a fixed size, scaled as a whole. Runnable code blocks can be edited in place before they run (CodeMirror 6, loaded the first time a block is edited).
 
-Part of [Presmium](https://github.com/Lincyaw/presmium), which turns lectures written in MyST Markdown into web pages, slides, Jupyter notebooks and narrated lectures.
+Part of [Presmium](https://github.com/Lincyaw/presmium), which compiles canonical lecture.json teaching documents into web pages, slides, Jupyter notebooks and narrated playback.
 
 ## Install
 
@@ -10,7 +10,7 @@ The web renderer `@lincyaw/web` brings it. Plugins that extend it declare it as
 
 ## Viewer plugins
 
-A plugin's `src/client/viewer.ts` exports a `ViewerPlugin`, which registers views, node renderers, components, actions and layers:
+A plugin's `src/client/viewer.ts` exports a `ViewerPlugin`, which registers views, node renderers, components, actions and layers. A layer's `scope` puts it over the window (`viewport`, the default), over the view (`view`), on each slide (`slide`, in the canvas's coordinates, its props also giving the slide's `section` and `step`) or in the presentation bar (`bar`):
 
 ```ts
 import type { ViewerPlugin } from '@lincyaw/viewer'
@@ -21,9 +21,11 @@ const plugin: ViewerPlugin = (ctx) => {
 export default plugin
 ```
 
+Author editing lives in one native BlockNote document editor in the workbench. It saves normalized `lecture.json` through document-version transactions. The viewer remains a runtime snapshot consumer; independent readers and presentations do not load the authoring editor. React extensions subscribe to public viewer stores with `useStore(viewer.position)` or `useStore(viewer.doc)`.
+
 ## Documentation
 
-- [Plugin guide](https://github.com/Lincyaw/presmium/blob/main/site/plugins/lecture.en.md)
+- [Plugin guide](https://github.com/Lincyaw/presmium/blob/main/site/plugins/locales/en/lecture.json)
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lincyaw/viewer",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.1",
   "description": "Presmium's IR runtime: renders the IR in the browser, with runtime views and live updates",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,7 @@
   "keywords": [
     "presmium",
     "ir",
-    "vue"
+    "react"
   ],
   "type": "module",
   "engines": {
@@ -23,7 +23,7 @@
     "access": "public"
   },
   "exports": {
-    ".": "./src/index.ts",
+    ".": "./src/client/index.ts",
     "./domain": "./src/domain/index.ts",
     "./package.json": "./package.json"
   },
@@ -31,6 +31,15 @@
     "src"
   ],
   "dependencies": {
+    "@codemirror/commands": "6.11.1",
+    "@codemirror/lang-javascript": "6.2.5",
+    "@codemirror/lang-python": "6.2.1",
+    "@codemirror/language": "6.13.1",
+    "@codemirror/state": "6.7.6",
+    "@codemirror/view": "6.43.14",
+    "@lezer/highlight": "1.2.5",
+    "@radix-ui/react-focus-scope": "^1.1.8",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@shikijs/magic-move": "4.5.0",
     "ansi_up": "6.0.6",
     "dompurify": "3.4.17",
@@ -43,14 +52,17 @@
     "mermaid": "12.2.0",
     "micromark-extension-gfm": "3.0.0",
     "property-information": "7.2.0",
-    "reka-ui": "2.11.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "shiki": "4.5.0",
-    "vue": "^3.5.42",
-    "@lincyaw/host": "1.0.0-rc.0",
-    "@lincyaw/kernel": "1.0.0-rc.0"
+    "style-to-js": "2.0.2",
+    "@lincyaw/host": "1.0.0-rc.1",
+    "@lincyaw/kernel": "1.0.0-rc.1"
   },
   "devDependencies": {
     "@types/hast": "3.0.5",
-    "@types/mdast": "4.0.4"
+    "@types/mdast": "4.0.4",
+    "@types/react": "18.3.28",
+    "@types/react-dom": "18.3.7"
   }
 }

package/src/client/block.ts

@@ -0,0 +1,70 @@
+import { createContext, memo, useContext, useEffect, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { PmBoundary, StepScope, useStaticRender, useStore } from '@lincyaw/host'
+import { blockStepState, blockVisible, componentProps, fnv1a64 } from '@lincyaw/kernel'
+import type { ComponentNode, IRBlock, IRSection } from '@lincyaw/kernel'
+import { FINAL_STEP } from '../domain/index.ts'
+import { CODE_OWNED, CodeBlockView } from './code/code-block.ts'
+import { contentMarks } from './content-marks.ts'
+import { markdownToHast } from './markdown/handlers.ts'
+import { PmMermaid } from './markdown/mermaid.ts'
+import { hastToVNodes, MarkdownView } from './markdown/render.ts'
+import { findComponent, findNodeRenderer, registryRevision } from './registry.ts'
+import { BLOCK_CLASS, trackClicks } from './slidev-compat/click-directives.ts'
+import { viewerMessages } from './viewer-messages.ts'
+import { VIEWER } from './viewer-state.ts'
+import { h } from './element.ts'
+import { SECTION_CONTEXT } from './section-context.ts'
+export interface BlockProps { block: IRBlock, section: IRSection, step: number, expanded?: boolean, localPreview?: boolean }
+const COMPONENT_NODE = createContext<{ node: ComponentNode, section: string } | undefined>(undefined)
+function fallbackOf(node: ComponentNode, section: string) { return node.fallback ? hastToVNodes(markdownToHast(node.fallback, section).children, {}) : [] }
+export function PmComponentFallback() { const current = useContext(COMPONENT_NODE); return current ? h('div', { className: 'pm-component-fallback' }, fallbackOf(current.node, current.section)) : null }
+function ComponentView(props: BlockProps) {
+  const node = props.block.node as ComponentNode
+  const printed = useStaticRender()
+  useStore(registryRevision)
+  const component = findComponent(node.name)
+  if (printed && node.fallback) return h('div', { className: 'pm-static-fallback', 'data-component': node.name }, fallbackOf(node, props.section.id))
+  if (!component) { const fallback = fallbackOf(node, props.section.id); return h('div', { className: 'pm-component-missing', 'data-component': node.name }, fallback.length ? fallback : viewerMessages().missingComponent(node.name)) }
+  const state = blockStepState(props.block, props.step)
+  const children = node.children?.map(child => h(BlockView, { key: child.id, block: child, section: props.section, step: props.step, expanded: props.expanded }))
+  const key = fnv1a64(JSON.stringify([node.props, node.children ?? []]))
+  return h(CODE_OWNED.Provider, { value: node.ownsCode !== false }, h(COMPONENT_NODE.Provider, { value: { node, section: props.section.id } }, h(PmBoundary, { name: node.name, resetKey: props.expanded ? key : `${key}@${props.step}` }, h(component, { ...componentProps(node), ...state?.parameters }, children))))
+}
+function content(props: BlockProps): ReactNode {
+  const node = props.block.node
+  const custom = (node.type === 'component' && findNodeRenderer(node.name)) || (node.type === 'code' && findNodeRenderer(`code:${node.lang}`)) || findNodeRenderer(node.type)
+  if (custom) return h(custom, props)
+  switch (node.type) {
+    case 'markdown': return h(MarkdownView, { ...props, prefix: props.section.id })
+    case 'code': return node.lang === 'mermaid' ? h(PmMermaid, { code: node.value }) : h(CodeBlockView, props)
+    case 'component': return h(ComponentView, props)
+  }
+}
+function BlockViewContent(props: BlockProps) {
+  const viewer = useContext(VIEWER); const el = useRef<HTMLDivElement>(null)
+  useStore(registryRevision)
+  useEffect(() => el.current ? trackClicks(el.current, props.expanded ? FINAL_STEP : props.step) : undefined, [props.step, props.expanded, props.block])
+  const { block } = props
+  const visible = props.expanded || blockVisible(block, props.step)
+  const role = block.role === 'narration' && block.only && !block.only.includes('lecture') ? 'reading' : block.role
+  return h(StepScope, { at: block.at, until: block.until, states: block.stepStates, step: props.step, localPreview: props.localPreview }, h('div', {
+    ref: el, className: [BLOCK_CLASS, `pm-block--${block.role}`, `pm-block--${block.node.type}`, block.until !== undefined ? 'pm-step-range' : '', block.node.type === 'component' && block.node.layer === 'overlay' ? 'pm-block--overlay' : '', !visible ? 'pm-hidden' : ''].filter(Boolean).join(' '),
+    'data-block': block.id, 'data-content-role': role, 'data-content-label': viewerMessages().contentRoles[role], 'data-at': block.at, 'data-component': block.node.type === 'component' ? block.node.name : undefined, 'aria-hidden': visible ? undefined : true,
+    onClick: viewer?.options.openSource ? (event: MouseEvent) => { if (event.altKey) { event.preventDefault(); event.stopPropagation(); viewer.options.openSource!(block.source) } } : undefined,
+  }, [contentMarks(props.section, role, block.at, block.span ?? 0), content(props)]))
+}
+
+export const BlockView = memo(BlockViewContent)
+
+/** A compiled block's standalone read-only surface, using the same host scope as the full viewer. */
+export function BlockPreview({ block, section }: { block: IRBlock, section: IRSection }) {
+  const viewer = useContext(VIEWER)
+  const [selected, setSelected] = useState<{ section: string, step: number }>()
+  useEffect(() => viewer?.position.subscribe(() => {
+    const position = viewer.position.getSnapshot()
+    if (position.section === section.id && section.stepIds?.[position.step]) setSelected(position)
+  }), [viewer, section.id])
+  const step = selected?.section === section.id ? selected.step : FINAL_STEP
+  return h(SECTION_CONTEXT.Provider, { value: { section, step, view: 'document' } }, h('div', { className: 'pm-document pm-block-preview', 'data-section': section.id }, h(BlockView, { block, section, step, expanded: true, localPreview: true })))
+}

package/src/client/code/code-block.ts

@@ -0,0 +1,54 @@
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import { currentLocale, OPERATIONS, PmIconButton, useService, useStartReport, useStaticRender } from '@lincyaw/host'
+import type { Operations } from '@lincyaw/host'
+import { blockState, EXECUTOR, errorMessage, failedRun } from '@lincyaw/kernel'
+import type { CodeNode, IRBlock, RecordedRun, RunRequest, RunResult } from '@lincyaw/kernel'
+import { originBar } from '../../domain/index.ts'
+import { useSectionContext } from '../section-context.ts'
+import { viewerMessages } from '../viewer-messages.ts'
+import { h } from '../element.ts'
+import { CodeEditor } from './code-editor.ts'
+import { CodeView, VariantView } from './code-view.ts'
+import { isProseOutput, runOutput } from './outputs.ts'
+export const CODE_OWNED = createContext(false)
+const replays = new Set<(data: Record<string, unknown>) => void>()
+const listening = new WeakSet<Operations>()
+function listenRunReplays(operations: Operations) { if (listening.has(operations)) return; listening.add(operations); operations.onReplay('run', { apply: data => replays.forEach(replay => replay(data)) }) }
+export function CodeBlockView(props: { block: IRBlock, step: number, expanded?: boolean }) {
+  const owned = useContext(CODE_OWNED); const executor = useService(EXECUTOR); const operations = useService(OPERATIONS); const section = useSectionContext(); const report = useStartReport(); const printed = useStaticRender()
+  const [live, setLive] = useState<RunResult>(); const [fallback, setFallback] = useState<string>(); const [running, setRunning] = useState(false); const [edited, setEdited] = useState<string>(); const [editing, setEditing] = useState(false); const [mounted, setMounted] = useState(false); const current = useRef<AbortController>()
+  const node = props.block.node as CodeNode
+  const stop = () => { current.current?.abort(); current.current = undefined; setRunning(false) }
+  const show = (result: RunResult | undefined) => { const recorded = result && !result.ok && result.exitCode === null && node.outputs?.length; setFallback(recorded ? result.stderr.trim() || viewerMessages().code.unavailable : undefined); setLive(recorded ? undefined : result) }
+  useEffect(() => { setMounted(true); return () => current.current?.abort() }, [])
+  useEffect(() => { stop(); setLive(undefined); setFallback(undefined); setEdited(undefined); setEditing(false) }, [node.value])
+  useEffect(() => { if (operations) listenRunReplays(operations); const replay = (data: Record<string, unknown>) => { if (data.block === props.block.id && (data.section === undefined || data.section === section?.section.id)) { stop(); show(undefined) } }; replays.add(replay); return () => { replays.delete(replay) } }, [operations, props.block.id, section?.section.id])
+  const run = async () => {
+    if (!node.run || !executor || running) return
+    stop(); const controller = new AbortController(); current.current = controller; setRunning(true)
+    const { lang, args, stdin, timeoutMs, executor: named, session } = node.run
+    const request: RunRequest = { lang, code: edited ?? node.value, args, stdin, timeoutMs, executor: named, session, ...section ? { place: { section: section.section.id, block: props.block.id } } : {} }
+    const started = Date.now(); let result: RunResult
+    try { result = await executor.run(request, controller.signal) } catch (error) { result = failedRun(executor.id, viewerMessages().code.executorFailed(executor.id, errorMessage(error)), Date.now() - started) }
+    if (controller.signal.aborted) return
+    show(result); current.current = undefined; setRunning(false)
+    const recording = node.outputs?.[0] as RecordedRun | undefined
+    operations?.report({ type: 'run', data: { section: section?.section.id, block: props.block.id, result: !result.ok && recording ? `freeze:${recording.cacheKey}` : 'live' } })
+  }
+  const state = blockState(props.block, props.step); const variants = node.variants ?? []; const shown = variants.length && !props.expanded ? Math.min(state, variants.length - 1) : undefined
+  const listings = !variants.length ? [h(CodeView, { lang: node.lang, value: node.value, highlight: props.expanded ? undefined : node.highlight?.[state] })] : shown === undefined ? variants.map(v => h('div', { key: v.label, className: 'pm-code-block__variant' }, [h('p', { className: 'pm-code-block__label' }, v.label), h(CodeView, { lang: node.lang, value: v.value })])) : [h(VariantView, { lang: node.lang, value: variants[shown]!.value })]
+  const echo = node.echo !== false; const runnable = !owned && echo && node.run && node.run.when !== 'compile'; const editable = runnable && !variants.length && !node.highlight?.length && !printed; const t = viewerMessages().code; const available = mounted && executor
+  if (editable && (editing || edited !== undefined)) listings.splice(0, listings.length, editing ? h(CodeEditor, { lang: node.lang, value: edited ?? node.value, onChange: setEdited, onRun: run }) : h(CodeView, { lang: node.lang, value: edited! }))
+  const controls = runnable ? h('div', { className: 'pm-code-block__run', role: 'group', 'aria-label': t.actions }, [
+    h(PmIconButton, { icon: 'play', label: live ? t.rerun : t.run, hint: running ? t.running : live ? t.rerun : t.run, small: true, loading: running, disabled: !available, onClick: run }),
+    editable ? h(PmIconButton, { icon: editing ? 'check' : 'edit', label: editing ? t.doneEditing : t.edit, small: true, 'aria-pressed': editing, onClick: () => setEditing(!editing) }) : null,
+    edited !== undefined && edited !== node.value ? h(PmIconButton, { icon: 'undo', label: t.revert, small: true, onClick: () => { setEdited(undefined); setEditing(false) } }) : null,
+    node.run?.session ? h(PmIconButton, { icon: 'refresh', label: t.resetRunSession, small: true, disabled: !available, 'data-session': node.run.session, onClick: async () => { stop(); await executor?.endSession?.(node.run!.session!); show(undefined) } }) : null,
+    mounted && !executor && report ? h('span', { className: 'pm-code-block__hint' }, t.unavailable) : null,
+  ]) : null
+  const runs = owned ? [] : live ? [live] : node.outputs ?? []; const prose = !echo && !live && runs.length > 0 && runs.every(isProseOutput); const prefix = section?.section.id ?? props.block.id
+  const outputs = runs.length ? h('div', { className: `pm-outputs${prose ? ' pm-outputs--prose' : ''}`, 'data-source': live ? 'live' : 'recorded' }, runs.map((r, i) => runOutput(r, (r as RecordedRun).cacheKey || i, prefix, { prose, note: fallback }))) : null
+  const bar = originBar(node, shown, currentLocale())
+  const origin = bar ? h('div', { className: 'pm-code-origin', 'data-anchor': bar.anchor }, bar.parts.map((part, key) => h(part.href ? 'a' : 'span', { key, className: `pm-code-origin__${part.kind}`, href: part.href, title: part.title, 'data-active': part.active ? '' : undefined, 'data-status': part.status, 'data-drift': part.drift }, part.text))) : null
+  return h('div', { className: `pm-code-block${!echo ? ' pm-code-block--output-only' : ''}`, 'data-state': props.expanded ? undefined : state, 'data-run': runnable ? node.run!.when : undefined, 'data-session': node.run?.session }, echo ? [origin, ...listings, controls, outputs] : [outputs])
+}

package/src/client/code/code-editor.ts

@@ -0,0 +1,73 @@
+import { languageId } from '@lincyaw/kernel'
+import type { Extension } from '@codemirror/state'
+import type { EditorView } from '@codemirror/view'
+import { useEffect, useRef } from 'react'
+import { h } from '../element.ts'
+
+/**
+ * A runnable code block's code, edited in place (CodeMirror 6) before it is run: loaded the first time a block is
+ * edited, so that pages which are only read never load it. Mod-Enter runs the code; Escape then Tab leaves the editor.
+ */
+
+const LANGUAGES: Record<string, () => Promise<Extension>> = {
+  python: () => import('@codemirror/lang-python').then(m => m.python()),
+  javascript: () => import('@codemirror/lang-javascript').then(m => m.javascript()),
+  typescript: () => import('@codemirror/lang-javascript').then(m => m.javascript({ typescript: true })),
+  jsx: () => import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true })),
+  tsx: () => import('@codemirror/lang-javascript').then(m => m.javascript({ jsx: true, typescript: true })),
+}
+
+const ALIASES: Record<string, string> = { py: 'python', js: 'javascript', mjs: 'javascript', ts: 'typescript', mts: 'typescript' }
+
+async function editorModules(lang: string) {
+  const id = languageId(lang)
+  const grammar = LANGUAGES[ALIASES[id] ?? id]
+  const [view, state, commands, language, highlight, extension] = await Promise.all([
+    import('@codemirror/view'),
+    import('@codemirror/state'),
+    import('@codemirror/commands'),
+    import('@codemirror/language'),
+    import('@lezer/highlight'),
+    grammar ? grammar() : Promise.resolve([]),
+  ])
+  const { tags } = highlight
+  // The colours of the page's highlighted code, from the design tokens: light and dark alike.
+  const style = language.HighlightStyle.define([
+    { tag: [tags.keyword, tags.controlKeyword, tags.operatorKeyword, tags.modifier], color: 'var(--pm-color-syntax-keyword)' },
+    { tag: [tags.string, tags.special(tags.string), tags.regexp], color: 'var(--pm-color-syntax-string)' },
+    { tag: [tags.function(tags.variableName), tags.function(tags.propertyName), tags.definition(tags.variableName), tags.className, tags.typeName], color: 'var(--pm-color-syntax-key)' },
+    { tag: [tags.number, tags.bool, tags.null, tags.atom], color: 'var(--pm-color-accent)' },
+    { tag: [tags.comment, tags.lineComment, tags.blockComment], color: 'var(--pm-color-gutter)', fontStyle: 'italic' },
+  ])
+  return { view, state, commands, language, style, extension, python: (ALIASES[id] ?? id) === 'python' }
+}
+
+export function CodeEditor({ lang = '', label, value, onChange, onRun, onSave, onError, shouldFocus }: { lang?: string, label?: string, value: string, onChange?(value: string): void, onRun?(): void, onSave?(): void, onError?(error: unknown): void, shouldFocus?(): boolean }) {
+  const host = useRef<HTMLDivElement>(null)
+  const active = useRef<EditorView>()
+  const replacing = useRef(false)
+  const currentValue = useRef(value); currentValue.current = value
+  const callbacks = useRef({ onChange, onRun, onSave, onError, shouldFocus }); callbacks.current = { onChange, onRun, onSave, onError, shouldFocus }
+  useEffect(() => {
+    let editor: EditorView | undefined; let disposed = false
+    void editorModules(lang).then(({ view, state, commands, language, style, extension, python }) => {
+      if (disposed || !host.current) return
+      editor = new view.EditorView({ parent: host.current, state: state.EditorState.create({ doc: currentValue.current, extensions: [commands.history(), view.EditorView.contentAttributes.of(label ? { 'aria-label': label, 'aria-multiline': 'true', role: 'textbox' } : {}), view.keymap.of([{ key: 'Mod-Enter', run: () => { if (!callbacks.current.onRun) return false; callbacks.current.onRun(); return true } }, { key: 'Mod-s', run: () => { if (!callbacks.current.onSave) return false; callbacks.current.onSave(); return true } }, ...commands.defaultKeymap, ...commands.historyKeymap, commands.indentWithTab]), language.indentUnit.of(python ? '    ' : '  '), language.syntaxHighlighting(style), extension, view.EditorView.updateListener.of(update => { if (update.docChanged && !replacing.current) callbacks.current.onChange?.(update.state.doc.toString()) })] }) })
+      active.current = editor
+      if (callbacks.current.shouldFocus?.() !== false) editor.focus()
+    }).catch(error => {
+      if (disposed) return
+      console.error('[presmium] the code editor failed to initialize', error)
+      callbacks.current.onError?.(error)
+    })
+    return () => { disposed = true; if (active.current === editor) active.current = undefined; editor?.destroy() }
+  }, [lang, label])
+  useEffect(() => {
+    const editor = active.current
+    if (!editor || editor.state.doc.toString() === value) return
+    replacing.current = true
+    try { editor.dispatch({ changes: { from: 0, to: editor.state.doc.length, insert: value } }) }
+    finally { replacing.current = false }
+  }, [value])
+  return h('div', { ref: host, className: 'pm-code-editor' })
+}

package/src/client/code/code-view.ts

@@ -0,0 +1,22 @@
+import { useAppearance, usePrefersReducedMotion } from '@lincyaw/host'
+import { ShikiMagicMove } from '@shikijs/magic-move/react'
+import '@shikijs/magic-move/style.css'
+import { useEffect, useState } from 'react'
+import type { Element, ElementContent, Root } from 'hast'
+import { toHtml } from 'hast-util-to-html'
+import { codeColumns } from '../../domain/index.ts'
+import { highlighterFor, SHIKI_THEMES } from './highlight.ts'
+import { h } from '../element.ts'
+type Loaded = Awaited<ReturnType<typeof highlighterFor>>
+function useHighlighter(lang: string) { const [loaded, setLoaded] = useState<Loaded>(); useEffect(() => { let active = true; void highlighterFor(lang).then(value => { if (active) setLoaded(value) }).catch(() => {}); return () => { active = false } }, [lang]); return loaded }
+function lineElements(tree: Root): Element[] { const pre = tree.children.find((node): node is Element => node.type === 'element'); const code = pre?.children.find((node): node is Element => node.type === 'element' && node.tagName === 'code'); return (code?.children ?? []).filter((node: ElementContent): node is Element => node.type === 'element') }
+export function CodeView({ lang = '', value, highlight }: { lang?: string, value: string, highlight?: number[] }) {
+  const shiki = useHighlighter(lang); const code = value.replace(/\n$/, ''); const lines = new Set(highlight ?? [])
+  let html: string | undefined
+  if (shiki) { const tree = shiki.highlighter.codeToHast(code, { lang: shiki.lang, themes: SHIKI_THEMES, defaultColor: false }); lineElements(tree).forEach((line, i) => line.properties.class = lines.has(i + 1) ? 'line highlighted' : 'line'); html = toHtml(tree) }
+  const attrs = { className: `pm-code${lines.size ? ' pm-code--highlight' : ''}`, style: { '--pm-code-columns': codeColumns(code) }, 'data-lang': lang || undefined }
+  if (html) return h('div', { ...attrs, innerHTML: html })
+  const rows = code.split('\n').flatMap((text, i) => [h('span', { key: i, className: `line${lines.has(i + 1) ? ' highlighted' : ''}` }, text), '\n'])
+  return h('div', attrs, h('pre', { className: 'shiki' }, h('code', {}, rows.slice(0, -1))))
+}
+export function VariantView({ lang = '', value }: { lang?: string, value: string }) { const loaded = useHighlighter(lang); const reduced = usePrefersReducedMotion(); const { dark } = useAppearance(); if (!loaded || reduced) return h(CodeView, { lang, value }); const code = value.replace(/\n$/, ''); return h('div', { className: 'pm-code pm-code--magic-move', style: { '--pm-code-columns': codeColumns(code) }, 'data-lang': lang || undefined }, h(ShikiMagicMove, { highlighter: loaded.highlighter, lang: loaded.lang, theme: dark ? SHIKI_THEMES.dark : SHIKI_THEMES.light, code })) }

package/src/{highlight.ts → client/code/highlight.ts}

@@ -41,7 +41,7 @@ const ALIASES: Record<string, string> = {
   rb: 'ruby',
 }
 
-export const THEMES = { light: 'github-light', dark: 'github-dark' } as const
+export const SHIKI_THEMES = { light: 'github-light', dark: 'github-dark' } as const
 
 let highlighter: Promise<HighlighterCore> | undefined
 const loading = new Map<string, Promise<void>>()
@@ -57,7 +57,7 @@ function load(): Promise<HighlighterCore> {
   return highlighter
 }
 
-export function grammarOf(lang: string): string | undefined {
+function grammarOf(lang: string): string | undefined {
   const id = languageId(lang)
   const name = ALIASES[id] ?? id
   return name in GRAMMARS ? name : undefined

package/src/{outputs.ts → client/code/outputs.ts}

@@ -1,15 +1,18 @@
 import { currentLocale } from '@lincyaw/host'
+import { htmlAsText, isProseRun } from '@lincyaw/kernel'
 import type { MdastNode, RunOutput, RunResult } from '@lincyaw/kernel'
 import { AnsiUp } from 'ansi_up'
 import { fromMarkdown } from 'mdast-util-from-markdown'
 import { gfmFromMarkdown } from 'mdast-util-gfm'
 import { gfm } from 'micromark-extension-gfm'
-import type { VNode, VNodeChild } from 'vue'
-import { defineComponent, h, onMounted, ref, watch } from 'vue'
-import { outputNotes } from './domain/index.ts'
-import { hastToVNodes, markdownToHast } from './markdown.ts'
-import { getNodeRenderer } from './registry.ts'
-import { PmMath } from './rich.ts'
+import type { ReactElement, ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import { h } from '../element.ts'
+import { outputNotes } from '../../domain/index.ts'
+import { markdownToHast } from '../markdown/handlers.ts'
+import { PmMath } from '../markdown/math.ts'
+import { hastToVNodes } from '../markdown/render.ts'
+import { findNodeRenderer } from '../registry.ts'
 
 const ORDER = ['text/html', 'text/markdown', 'text/latex', 'image/svg+xml', 'image/png', 'image/jpeg', 'image/gif', 'application/json', 'text/plain']
 
@@ -21,38 +24,22 @@ function ansi(value: string): string {
   return new AnsiUp().ansi_to_html(value)
 }
 
-function literalHtml(node: MdastNode): MdastNode {
-  if (node.type === 'html') return { type: 'text', value: String(node.value ?? '') }
-  return node.children ? { ...node, children: node.children.map(literalHtml) } : node
-}
-
-export function markdownOutput(markdown: string, prefix: string): VNodeChild[] {
-  const mdast = literalHtml(fromMarkdown(markdown, { extensions: [gfm()], mdastExtensions: [gfmFromMarkdown()] }) as unknown as MdastNode)
+function markdownOutput(markdown: string, prefix: string): ReactNode[] {
+  const mdast = htmlAsText(fromMarkdown(markdown, { extensions: [gfm()], mdastExtensions: [gfmFromMarkdown()] }) as unknown as MdastNode)
   return hastToVNodes(markdownToHast(mdast, prefix).children, {})
 }
 
 let purify: Promise<(html: string) => string> | undefined
 
-const HtmlOutput = defineComponent({
-  name: 'PmHtmlOutput',
-  props: { html: { type: String, required: true }, plain: { type: String, default: '' } },
-  setup(props) {
-    const clean = ref<string>()
-    const render = async () => {
-      purify ??= import('dompurify').then(m => (html: string) => m.default.sanitize(html))
-      clean.value = (await purify)(props.html)
-    }
-    onMounted(render)
-    watch(() => props.html, render)
-    return () => clean.value === undefined
-      ? h('pre', { class: 'pm-output__text' }, props.plain)
-      : h('div', { class: 'pm-output__html', innerHTML: clean.value })
-  },
-})
+function HtmlOutput({ html, plain = '' }: { html: string, plain?: string }) {
+  const [clean, setClean] = useState<string>()
+  useEffect(() => { let active = true; purify ??= import('dompurify').then(m => (html: string) => m.default.sanitize(html)); void purify.then(sanitize => { if (active) setClean(sanitize(html)) }); return () => { active = false } }, [html])
+  return clean === undefined ? h('pre', { className: 'pm-output__text' }, plain) : h('div', { className: 'pm-output__html', innerHTML: clean })
+}
 
-function display(data: Record<string, unknown>, metadata: Record<string, unknown>, prefix: string, key: number): VNodeChild {
+function display(data: Record<string, unknown>, metadata: Record<string, unknown>, prefix: string, key: number): ReactNode {
   for (const type of Object.keys(data)) {
-    const renderer = getNodeRenderer(`mime:${type}`)
+    const renderer = findNodeRenderer(`mime:${type}`)
     if (renderer) return h(renderer, { key, type, data: data[type], metadata })
   }
   const type = ORDER.find(t => data[t] !== undefined)
@@ -68,7 +55,7 @@ function display(data: Record<string, unknown>, metadata: Record<string, unknown
   return h('pre', { ...attrs, innerHTML: ansi(text(value)) })
 }
 
-function richOutput(output: RunOutput, prefix: string, key: number): VNodeChild {
+function richOutput(output: RunOutput, prefix: string, key: number): ReactNode {
   switch (output.output_type) {
     case 'stream': return h('pre', { key, class: `pm-output__${output.name}`, innerHTML: ansi(text(output.text)) })
     case 'error': return h('pre', { key, class: 'pm-output__error', innerHTML: ansi(text(output.traceback.join('\n')) || `${output.ename}: ${output.evalue}`) })
@@ -76,12 +63,12 @@ function richOutput(output: RunOutput, prefix: string, key: number): VNodeChild
   }
 }
 
-export function proseOnly(run: RunResult): boolean {
-  const outputs = run.outputs ?? []
-  return outputs.length > 0 && outputs.every(o => (o.output_type === 'display_data' || o.output_type === 'execute_result') && o.data['text/markdown'] !== undefined && !Object.keys(o.data).some(type => getNodeRenderer(`mime:${type}`)))
+/** Whether a run only displays Markdown that no plugin renders itself, which shows as prose. */
+export function isProseOutput(run: RunResult): boolean {
+  return isProseRun(run, type => Boolean(findNodeRenderer(`mime:${type}`)))
 }
 
-export function runOutput(run: RunResult & { cacheKey?: string }, key: string | number, prefix: string, options: { prose?: boolean, note?: string } = {}): VNode {
+export function runOutput(run: RunResult & { cacheKey?: string }, key: string | number, prefix: string, options: { prose?: boolean, note?: string } = {}): ReactElement {
   const notes = [...outputNotes(run, currentLocale()), ...options.note ? [options.note] : []]
   const content = run.outputs
     ? run.outputs.map((output, i) => richOutput(output, prefix, i))

package/src/client/content-marks.ts

@@ -0,0 +1,15 @@
+import { PmIcon } from '@lincyaw/host'
+import type { IRSection } from '@lincyaw/kernel'
+import { h } from './element.ts'
+import { viewerMessages } from './viewer-messages.ts'
+
+/** Author controls are excluded by the preview's text reader and are hidden outside document editing. */
+export function contentMarks(section: IRSection, role: 'visual' | 'narration' | 'reading', at: number, span = 0) {
+  const label = viewerMessages().contentRoles[role]
+  const place = `${section.index} · ${at + 1}${span > 0 ? `–${at + span + 1}` : ''}`
+  return h('span', { class: 'pm-content-marks', contenteditable: 'false', 'data-preview-ui': '' }, [h('button', {
+    'type': 'button', 'class': 'pm-content-mark',
+    'data-content-section': section.id, 'data-content-step': at,
+    'title': `${label} · ${place}`, 'aria-label': `${label} · ${place}`,
+  }, [h(PmIcon, { name: role === 'visual' ? 'slides' : role === 'reading' ? 'notebook' : 'captions' }), h('span', place)])])
+}

package/src/client/element.ts

@@ -0,0 +1,27 @@
+import { createElement, isValidElement } from 'react'
+import type { ElementType, ReactElement, ReactNode } from 'react'
+import styleToJs from 'style-to-js'
+export function classNames(value: unknown): string | undefined {
+  if (!value) return undefined
+  if (typeof value === 'string') return value
+  if (Array.isArray(value)) return value.map(classNames).filter(Boolean).join(' ')
+  if (typeof value === 'object') return Object.entries(value).filter(([, active]) => active).map(([key]) => key).join(' ')
+  return undefined
+}
+/** Shared DOM attribute normalization for HAST and the viewer's generated elements. */
+export function h(type: ElementType | any, attrs?: Record<string, any> | ReactNode | null, children?: ReactNode, ...rest: ReactNode[]): ReactElement {
+  if (attrs !== null && attrs !== undefined && (typeof attrs !== 'object' || Array.isArray(attrs) || isValidElement(attrs))) return createElement(type, null, attrs as ReactNode, children, ...rest)
+  const props = { ...attrs as Record<string, any> }
+  if (typeof props.style === 'string') {
+    try { props.style = styleToJs(props.style, { reactCompat: true }) }
+    catch {
+      props.style = {}
+      console.warn('[presmium.viewer.style] Invalid inline style was ignored; content is preserved.')
+    }
+  }
+  if (props.class !== undefined) { props.className = classNames(props.class); delete props.class }
+  if (props.innerHTML !== undefined) { props.dangerouslySetInnerHTML = { __html: props.innerHTML }; delete props.innerHTML }
+  if (props.tabindex !== undefined) { props.tabIndex = props.tabindex; delete props.tabindex }
+  if (props.contenteditable !== undefined) { props.contentEditable = props.contenteditable; delete props.contenteditable }
+  return createElement(type, props, children, ...rest)
+}

package/src/client/index.ts

@@ -0,0 +1,40 @@
+import { createElement } from 'react'
+import type { ReactNode } from 'react'
+import { registerAction, registerComponent, registerView } from './registry.ts'
+import { DOCUMENT_LAYOUT_COMPONENTS } from './layout.ts'
+import { viewerMessages } from './viewer-messages.ts'
+import { VIEWER } from './viewer-state.ts'
+import type { Viewer } from './viewer-state.ts'
+import { BUILTIN_ACTIONS } from './views/actions.ts'
+import { DocumentView } from './views/document.ts'
+import { PresentView } from './views/present.ts'
+import { PresenterView } from './views/presenter.ts'
+import { ScrollyView } from './views/scrolly.ts'
+import './style.css'
+
+registerView({ id: 'document', get label() { return viewerMessages().views.document }, kind: 'page', component: DocumentView })
+registerView({ id: 'scrolly', get label() { return viewerMessages().views.scrolly }, kind: 'page', component: ScrollyView })
+registerView({ id: 'present', get label() { return viewerMessages().views.present }, kind: 'overlay', component: PresentView })
+registerView({ id: 'presenter', get label() { return viewerMessages().views.presenter }, kind: 'overlay', component: PresenterView, hidden: true })
+BUILTIN_ACTIONS.forEach(registerAction)
+Object.entries(DOCUMENT_LAYOUT_COMPONENTS).forEach(([name, component]) => registerComponent(name, component))
+
+export function ViewerProvider({ viewer, children }: { viewer: Viewer, children?: ReactNode }) { return createElement(VIEWER.Provider, { value: viewer }, children) }
+
+export { BlockView, BlockPreview, PmComponentFallback } from './block.ts'
+export { syncViewerWithOperations } from './operations.ts'
+export { findView, findComponent, listViews, registerComponent, registryRevision } from './registry.ts'
+export type { NodeRenderer, ViewDefinition, ViewerAction, ViewerLayer } from './registry.ts'
+export { SectionView } from './section.ts'
+export type { SectionLayout } from './section.ts'
+export { useSectionContext } from './section-context.ts'
+export type { SectionContext } from './section-context.ts'
+export { withSlideGlobals } from './slidev-compat/slide-globals.ts'
+export { tryInstallViewerPlugin } from './viewer-plugins.ts'
+export type { ViewerPlugin, ViewerPluginContext } from './viewer-plugins.ts'
+export { createViewer, useViewer } from './viewer-state.ts'
+export type { Viewer, ViewerOptions } from './viewer-state.ts'
+export { OverlayViewOutlet, PageViewOutlet } from './views/outlets.ts'
+export { SlideFace, SlideFit, SlidesPrint } from './views/slide.ts'
+
+export { VClick, VAfter, VClicks } from "./slidev-compat/click-directives.ts"

package/src/client/layout.ts

@@ -0,0 +1,22 @@
+import { Children, createElement as h, isValidElement } from 'react'
+import type { ReactNode } from 'react'
+import { PmColumns, PmStack, PmTabGroup, useMessages, useStaticRender } from '@lincyaw/host'
+import type { ContentLayoutProps } from '@lincyaw/host'
+import { blockVisible } from '@lincyaw/kernel'
+import type { BlockProps } from './block.ts'
+import { FINAL_STEP } from '../domain/index.ts'
+import { useSectionContext } from './section-context.ts'
+
+const MESSAGES = { 'zh-CN': { tabs: '分组内容', item: (index: number) => `内容 ${index}` }, en: { tabs: 'Grouped content', item: (index: number) => `Content ${index}` } }
+function LayoutTabs({ title, tabTitles, children }: ContentLayoutProps & { tabTitles?: string[] }) {
+  const t = useMessages(MESSAGES), printed = useStaticRender(), section = useSectionContext()
+  const tabs = Children.toArray(children).map((content, index) => {
+    const props = isValidElement<BlockProps>(content) ? content.props : undefined
+    return { id: props?.block?.id ?? String(index), title: tabTitles?.[index] || t.item(index + 1), content,
+      visible: !props?.block || props.expanded || blockVisible(props.block, section?.step ?? FINAL_STEP) }
+  })
+  return h(PmTabGroup, { title, label: t.tabs, tabs, staticView: printed })
+}
+
+/** Layout nodes are part of the document runtime and need no separately installed plugin. */
+export const DOCUMENT_LAYOUT_COMPONENTS = { PmColumns, PmStack, PmTabs: LayoutTabs }