@lincyaw/viewer 0.0.0-stage → 1.0.0-rc.0

package/src/domain/text.ts

@@ -0,0 +1,27 @@
+import { docBlocks } from '@lincyaw/kernel'
+import type { IRDocument, MdastNode } from '@lincyaw/kernel'
+
+const WIDE = /[ᄀ-ᅟ⺀-〾ぁ-㏿㐀-䶿一-鿿ꀀ-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]|[\u{1F300}-\u{1FAFF}\u{20000}-\u{3FFFD}]/u
+
+export function codeColumns(code: string): number {
+  let widest = 0
+  for (const line of code.split('\n')) {
+    let width = 0
+    for (const char of line) width += char === '\t' ? 4 : WIDE.test(char) ? 2 : 1
+    widest = Math.max(widest, width)
+  }
+  return widest
+}
+
+function definitions(node: MdastNode, found: (identifier: string) => void): void {
+  if (node.type === 'footnoteDefinition' && node.identifier !== undefined) found(String(node.identifier))
+  node.children?.forEach(child => definitions(child, found))
+}
+
+export function footnoteSections(doc: IRDocument): Map<string, string> {
+  const sections = new Map<string, string>()
+  for (const { section, block: { node } } of docBlocks(doc)) {
+    if (node.type === 'markdown') definitions(node.mdast, identifier => sections.set(identifier, section.id))
+  }
+  return sections
+}

package/src/env.d.ts

@@ -0,0 +1,3 @@
+interface ImportMetaEnv {
+  SSR: boolean
+}

package/src/globals.ts

@@ -0,0 +1,66 @@
+import type { IRSection } from '@lincyaw/kernel'
+import type { App, Component, ComponentOptions } from 'vue'
+import { computed, getCurrentInstance, inject, reactive } from 'vue'
+import { SECTION_CONTEXT } from './context.ts'
+import type { SectionContext } from './context.ts'
+import { VIEWER } from './viewer.ts'
+import type { Viewer } from './viewer.ts'
+
+function section() {
+  return getCurrentInstance() ? inject(SECTION_CONTEXT, undefined) : undefined
+}
+
+export function installSlideGlobals(app: App, viewer: Viewer): void {
+  const props = app.config.globalProperties as Record<string, unknown>
+  const index = computed(() => viewer.section(viewer.position.value.section)?.index ?? 1)
+  const go = (n: number) => {
+    const target = viewer.doc.value.sections[n - 1]
+    if (target) viewer.show({ section: target.id, step: 0 })
+  }
+  const nav = reactive({
+    currentPage: index,
+    currentSlideNo: index,
+    clicks: computed(() => viewer.position.value.step),
+    total: computed(() => viewer.doc.value.sections.length),
+    go,
+    next: () => viewer.next(),
+    prev: () => viewer.prev(),
+    nextSlide: () => go(index.value + 1),
+    prevSlide: () => go(index.value - 1),
+  })
+  const configs = computed(() => ({ ...viewer.doc.value.meta, presmium: viewer.doc.value.config.presmium }))
+  const define = (name: string, get: () => unknown) => {
+    const existing = Object.getOwnPropertyDescriptor(props, name)
+    if (existing && !existing.configurable) return
+    Object.defineProperty(props, name, { configurable: true, enumerable: true, get })
+  }
+  define('$page', () => section()?.section.value.index ?? index.value)
+  define('$clicks', () => section()?.step.value ?? viewer.position.value.step)
+  define('$nav', () => nav)
+  define('$slidev', () => ({ configs: configs.value, themeConfigs: {}, nav }))
+}
+
+export function sectionFrontmatter(section: IRSection, renderer: string): Record<string, unknown> {
+  return { title: section.title, ...section.hints[renderer] }
+}
+
+export function withSlideGlobals(component: Component): Component {
+  if (typeof component === 'function') return component
+  const options = component as ComponentOptions
+  const inject = Array.isArray(options.inject) ? Object.fromEntries(options.inject.map(key => [key, key])) : options.inject
+  return {
+    ...options,
+    inject: {
+      ...inject,
+      pmSection: { from: SECTION_CONTEXT, default: undefined },
+      pmViewer: { from: VIEWER, default: undefined },
+    },
+    computed: {
+      ...options.computed,
+      $frontmatter(): Record<string, unknown> | undefined {
+        const { pmSection, pmViewer } = this as unknown as { pmSection?: SectionContext, pmViewer?: Viewer }
+        return pmSection && sectionFrontmatter(pmSection.section.value, pmViewer?.options.renderer ?? 'web')
+      },
+    },
+  } as ComponentOptions
+}

package/src/highlight.ts

@@ -0,0 +1,73 @@
+import { languageId } from '@lincyaw/kernel'
+import type { HighlighterCore } from 'shiki/core'
+
+type Loader = () => Promise<unknown>
+
+const GRAMMARS: Record<string, Loader> = import.meta.env.SSR ? {} : {
+  python: () => import('shiki/langs/python.mjs'),
+  javascript: () => import('shiki/langs/javascript.mjs'),
+  typescript: () => import('shiki/langs/typescript.mjs'),
+  jsx: () => import('shiki/langs/jsx.mjs'),
+  tsx: () => import('shiki/langs/tsx.mjs'),
+  json: () => import('shiki/langs/json.mjs'),
+  shellscript: () => import('shiki/langs/shellscript.mjs'),
+  yaml: () => import('shiki/langs/yaml.mjs'),
+  toml: () => import('shiki/langs/toml.mjs'),
+  html: () => import('shiki/langs/html.mjs'),
+  css: () => import('shiki/langs/css.mjs'),
+  vue: () => import('shiki/langs/vue.mjs'),
+  markdown: () => import('shiki/langs/markdown.mjs'),
+  sql: () => import('shiki/langs/sql.mjs'),
+  diff: () => import('shiki/langs/diff.mjs'),
+  c: () => import('shiki/langs/c.mjs'),
+  cpp: () => import('shiki/langs/cpp.mjs'),
+  rust: () => import('shiki/langs/rust.mjs'),
+  go: () => import('shiki/langs/go.mjs'),
+  java: () => import('shiki/langs/java.mjs'),
+  wgsl: () => import('shiki/langs/wgsl.mjs'),
+  ruby: () => import('shiki/langs/ruby.mjs'),
+}
+
+const ALIASES: Record<string, string> = {
+  mts: 'typescript',
+  sh: 'shellscript',
+  bash: 'shellscript',
+  shell: 'shellscript',
+  zsh: 'shellscript',
+  yml: 'yaml',
+  md: 'markdown',
+  'c++': 'cpp',
+  rs: 'rust',
+  rb: 'ruby',
+}
+
+export const THEMES = { light: 'github-light', dark: 'github-dark' } as const
+
+let highlighter: Promise<HighlighterCore> | undefined
+const loading = new Map<string, Promise<void>>()
+
+function load(): Promise<HighlighterCore> {
+  if (import.meta.env.SSR) return new Promise(() => {})
+  highlighter ??= Promise.all([import('shiki/core'), import('shiki/engine/javascript')]).then(([core, engine]) =>
+    core.createHighlighterCore({
+      themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark.mjs')],
+      langs: [],
+      engine: engine.createJavaScriptRegexEngine({ forgiving: true }),
+    }))
+  return highlighter
+}
+
+export function grammarOf(lang: string): string | undefined {
+  const id = languageId(lang)
+  const name = ALIASES[id] ?? id
+  return name in GRAMMARS ? name : undefined
+}
+
+export async function highlighterFor(lang: string): Promise<{ highlighter: HighlighterCore, lang: string } | undefined> {
+  const name = grammarOf(lang)
+  if (!name) return undefined
+  const core = await load()
+  if (!loading.has(name)) loading.set(name, core.loadLanguage(GRAMMARS[name]!() as never))
+  await loading.get(name)
+  return { highlighter: core, lang: name }
+}

package/src/i18n.ts

@@ -0,0 +1,7 @@
+import { currentLocale } from '@lincyaw/host'
+import { VIEWER_MESSAGES } from './domain/index.ts'
+import type { Messages } from './domain/index.ts'
+
+export function messages(): Messages {
+  return VIEWER_MESSAGES[currentLocale()]
+}

package/src/index.ts

@@ -0,0 +1,55 @@
+import type { App } from 'vue'
+import { installClicks } from './clicks.ts'
+import { installSlideGlobals } from './globals.ts'
+import { messages } from './i18n.ts'
+import { BUILTIN_ACTIONS, PresenterView, PresentView } from './present.ts'
+import { registerAction, registerView } from './registry.ts'
+import { provideViewer } from './viewer.ts'
+import type { Viewer } from './viewer.ts'
+import { DocumentView, ScrollyView } from './views.ts'
+import './style.css'
+
+registerView({ id: 'document', get label() { return messages().views.document }, kind: 'page', component: DocumentView })
+registerView({ id: 'scrolly', get label() { return messages().views.scrolly }, kind: 'page', component: ScrollyView })
+registerView({ id: 'present', get label() { return messages().views.present }, kind: 'overlay', component: PresentView })
+registerView({ id: 'presenter', get label() { return messages().views.presenter }, kind: 'overlay', component: PresenterView, hidden: true })
+BUILTIN_ACTIONS.forEach(registerAction)
+
+export function installViewer(app: App, viewer: Viewer): void {
+  provideViewer(app, viewer)
+  installClicks(app)
+  installSlideGlobals(app, viewer)
+}
+
+export { BlockView, PmComponentFallback } from './block.ts'
+export { CodeView } from './code.ts'
+export { SECTION_CONTEXT, useSectionContext } from './context.ts'
+export type { SectionContext } from './context.ts'
+export * from './domain/index.ts'
+export { sectionFrontmatter, withSlideGlobals } from './globals.ts'
+export { messages } from './i18n.ts'
+export { MarkdownView } from './markdown.ts'
+export { followOperations } from './operations.ts'
+export { installViewerPlugin } from './plugins.ts'
+export type { ViewerPlugin, ViewerPluginContext } from './plugins.ts'
+export { BUILTIN_ACTIONS, PresenterView, PresentView } from './present.ts'
+export {
+  getComponent,
+  getNodeRenderer,
+  getView,
+  listActions,
+  listLayers,
+  listViews,
+  registerAction,
+  registerComponent,
+  registerLayer,
+  registerNodeRenderer,
+  registerView,
+} from './registry.ts'
+export type { NodeRenderer, ViewDefinition, ViewerAction, ViewerLayer } from './registry.ts'
+export { PmMath, PmMermaid, PmRoleMark } from './rich.ts'
+export { SectionView, STEP_LINE } from './section.ts'
+export type { SectionLayout } from './section.ts'
+export { createViewer, useViewer, VIEWER } from './viewer.ts'
+export type { Viewer, ViewerOptions } from './viewer.ts'
+export { DocumentView, OverlayHost, ScrollyView, ViewHost } from './views.ts'

package/src/markdown.ts

@@ -0,0 +1,255 @@
+import { roleMark } from '@lincyaw/kernel'
+import type { IRBlock, MarkdownNode, MdastNode } from '@lincyaw/kernel'
+import type { Element, ElementContent, Nodes, Properties, Root, RootContent } from 'hast'
+import { raw } from 'hast-util-raw'
+import type { Handler, Handlers, State } from 'mdast-util-to-hast'
+import { defaultHandlers, toHast } from 'mdast-util-to-hast'
+import { find, html as schema } from 'property-information'
+import type { Component, PropType, VNodeChild } from 'vue'
+import { computed, defineComponent, h, inject } from 'vue'
+import { cardHandlers, isButton, tabEntries, TabSetView } from './cards.ts'
+import { CodeView } from './code.ts'
+import { itemVisible } from './domain/index.ts'
+import { messages } from './i18n.ts'
+import { PmMath, PmMermaid, PmRoleMark } from './rich.ts'
+import { footnoteId, VIEWER } from './viewer.ts'
+import type { Viewer } from './viewer.ts'
+
+export interface MarkdownLinks {
+  footnoteHref?(identifier: string): string
+  section?(id: string): { href: string, title: string } | undefined
+}
+
+export function viewerLinks(viewer: Viewer | undefined): MarkdownLinks {
+  if (!viewer) return {}
+  return {
+    footnoteHref: viewer.footnoteHref,
+    section(id) {
+      const section = viewer.section(id)
+      return section && { href: viewer.options.sectionHref?.(id) ?? `#${id}`, title: section.title }
+    },
+  }
+}
+
+function element(tagName: string, properties: Properties, children: ElementContent[] = []): Element {
+  return { type: 'element', tagName, properties, children }
+}
+
+function text(value: string): ElementContent {
+  return { type: 'text', value }
+}
+
+type ViewerNode =
+  | { type: 'pmMath', tex: string, display: boolean, html?: string }
+  | { type: 'pmMermaid', code: string }
+  | { type: 'pmCode', lang: string, code: string }
+  | { type: 'pmRole', mark: string }
+
+const VIEWER_NODES: ViewerNode['type'][] = ['pmMath', 'pmMermaid', 'pmCode', 'pmRole']
+
+function viewerNode(node: ViewerNode): ElementContent {
+  return node as unknown as ElementContent
+}
+
+function asViewerNode(node: { type: string }): ViewerNode | undefined {
+  return (VIEWER_NODES as string[]).includes(node.type) ? node as ViewerNode : undefined
+}
+
+const BLOCK_ELEMENTS = new Set([
+  'address', 'article', 'aside', 'blockquote', 'details', 'div', 'dl', 'dt', 'dd', 'fieldset', 'figcaption', 'figure', 'footer',
+  'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr', 'iframe', 'li', 'main', 'nav', 'ol', 'p', 'pre', 'section', 'table', 'ul',
+])
+
+function isBlock(node: ElementContent): boolean {
+  const own = asViewerNode(node)
+  if (own) return own.type === 'pmMermaid' || own.type === 'pmCode' || (own.type === 'pmMath' && own.display)
+  return node.type === 'element' && BLOCK_ELEMENTS.has(node.tagName)
+}
+
+export function decoded(value: string): string {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+function unknown(state: State, node: MdastNode): ElementContent | undefined {
+  if (!node.children) return typeof node.value === 'string' ? text(node.value) : undefined
+  const children = state.all(node as never)
+  return element(children.some(isBlock) ? 'div' : 'span', {}, children)
+}
+
+function classes(node: MdastNode): string[] {
+  return typeof node.class === 'string' ? node.class.split(/\s+/).filter(Boolean) : []
+}
+
+function classed(node: MdastNode, properties: Properties = {}): Properties {
+  const names = classes(node)
+  return names.length ? { ...properties, className: names } : properties
+}
+
+function handlers(links: MarkdownLinks): Handlers {
+  const footnoteHref = links.footnoteHref ?? ((identifier: string) => `#${footnoteId(identifier)}`)
+  const wrap = (tagName: string, className?: string): Handler => (state, node) =>
+    element(tagName, className ? { className: [className] } : {}, state.all(node))
+  const value = (node: { value?: unknown }) => (typeof node.value === 'string' ? node.value : '')
+  const identifier = (node: { identifier?: unknown, label?: unknown }) => String(node.identifier ?? node.label)
+  const label = (node: { identifier?: unknown, label?: unknown }) => String(node.label ?? node.identifier)
+  const mark = (node: { identifier?: unknown, label?: unknown, enumerator?: unknown }) => (node.enumerator !== undefined ? String(node.enumerator) : label(node))
+  const math = (node: MdastNode, display: boolean) => viewerNode({ type: 'pmMath', tex: value(node), display, html: typeof node.html === 'string' ? node.html : undefined })
+  const reference = (el: Element, id: string, fallback: string): Element => {
+    const target = id ? links.section?.(id) : undefined
+    if (target) el.properties.href = target.href
+    if (el.children.length === 0) el.children = [text(target?.title ?? fallback)]
+    return el
+  }
+  const custom: Record<string, Handler> = {
+    math: (_, node) => math(node, true),
+    inlineMath: (_, node) => math(node, false),
+    mermaid: (_, node) => viewerNode({ type: 'pmMermaid', code: value(node) }),
+    code: (_, node) => viewerNode({ type: 'pmCode', lang: typeof node.lang === 'string' ? node.lang : '', code: value(node) }),
+    iframe: (_, node) => element('iframe', {
+      src: typeof node.src === 'string' ? node.src : '',
+      width: node.width == null || node.width === '' ? undefined : String(node.width),
+      height: node.height == null || node.height === '' ? undefined : String(node.height),
+      loading: 'lazy',
+    }),
+    admonition(state, node) {
+      const names = messages().markdown.admonitions
+      const extra = classes(node)
+      const kind = typeof node.kind === 'string' ? node.kind : extra.find(c => c in names) ?? 'note'
+      const children = state.all(node)
+      const titled = (node.children as MdastNode[] | undefined)?.some(c => c.type === 'admonitionTitle')
+      const title = titled ? [] : [element('p', { className: ['pm-admonition__title'] }, [text(names[kind] ?? kind)])]
+      return element('aside', { className: [...new Set(['pm-admonition', `pm-admonition--${kind}`, ...extra])] }, [...title, ...children])
+    },
+    admonitionTitle: wrap('p', 'pm-admonition__title'),
+    footnoteReference: (_, node) => element('sup', { className: ['pm-footnote-ref'] }, [
+      element('a', { href: footnoteHref(identifier(node)), dataLabel: mark(node), ariaLabel: messages().markdown.footnote(mark(node)) }, []),
+    ]),
+    footnoteDefinition: (state, node) => element('div', { id: footnoteId(identifier(node)), className: ['pm-footnote'] }, [
+      element('sup', { dataLabel: mark(node) }, []),
+      ...state.all(node),
+    ]),
+    container: (state, node) => element('figure', { id: typeof node.identifier === 'string' ? node.identifier : undefined, className: ['pm-figure'] }, state.all(node)),
+    caption: wrap('figcaption'),
+    legend: wrap('div', 'pm-legend'),
+    abbreviation: (state, node) => element('abbr', typeof node.title === 'string' ? { title: node.title } : {}, state.all(node)),
+    crossReference: (state, node) => reference(element('a', { href: `#${identifier(node)}` }, state.all(node)), identifier(node), label(node)),
+    link(state, node) {
+      const el = defaultHandlers.link(state, node as never)
+      if (isButton(node)) el.properties.className = ['pm-button']
+      const url = typeof node.url === 'string' ? node.url : ''
+      return url.startsWith('#') ? reference(el, decoded(url.slice(1)), url.slice(1)) : reference(el, '', url)
+    },
+    keyboard: wrap('kbd'),
+    subscript: wrap('sub'),
+    superscript: wrap('sup'),
+    underline: wrap('u'),
+    definitionList: wrap('dl'),
+    definitionTerm: wrap('dt'),
+    definitionDescription: wrap('dd'),
+    details: (state, node) => element('details', classed(node, { open: node.open === true }), state.all(node)),
+    summary: wrap('summary'),
+    div: (state, node) => element('div', classed(node), state.all(node)),
+    span: (state, node) => element('span', isButton(node) ? { className: ['pm-button'] } : classed(node), state.all(node)),
+    ...cardHandlers(),
+    presmiumRole(state, node) {
+      const children = state.all(node)
+      return children.length
+        ? element('span', { className: ['pm-role'], dataRole: String(node.name ?? '') }, children)
+        : viewerNode({ type: 'pmRole', mark: roleMark(node) })
+    },
+  }
+  return custom as Handlers
+}
+
+function slug(text: string): string {
+  return text.normalize('NFKC').toLowerCase().replace(/[^\p{L}\p{N}]+/gu, '-').replace(/^-+|-+$/g, '')
+}
+
+function textOf(node: ElementContent | Root): string {
+  if (node.type === 'text') return node.value
+  return 'children' in node ? node.children.map(c => textOf(c as ElementContent)).join('') : ''
+}
+
+export function markdownToHast(mdast: MdastNode, prefix: string, links: MarkdownLinks = {}): Root {
+  const html = toHast(mdast as never, { allowDangerousHtml: true, handlers: handlers(links), unknownHandler: unknown as never }) as Nodes
+  const tree = raw(html, { passThrough: VIEWER_NODES }) as Root
+  let item = 0
+  for (const child of tree.children) {
+    if (child.type !== 'element') continue
+    if (/^h[1-6]$/.test(child.tagName) && child.properties.id === undefined) child.properties.id = `${prefix}-${slug(textOf(child))}`
+    if (child.tagName !== 'ul' && child.tagName !== 'ol') continue
+    for (const li of child.children) {
+      if (li.type === 'element' && li.tagName === 'li') li.properties.dataPmItem = item++
+    }
+  }
+  return tree
+}
+
+function attributes(properties: Properties): Record<string, unknown> {
+  const attrs: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(properties)) {
+    if (value === null || value === undefined || value === false) continue
+    const info = find(schema, key)
+    attrs[info.attribute] = value === true ? (info.boolean ? true : '') : Array.isArray(value) ? value.join(info.commaSeparated ? ', ' : ' ') : value
+  }
+  return attrs
+}
+
+function viewerComponent(node: ViewerNode): [Component, Record<string, unknown>] {
+  switch (node.type) {
+    case 'pmMath': return [PmMath, { tex: node.tex, display: node.display, html: node.html }]
+    case 'pmMermaid': return [PmMermaid, { code: node.code }]
+    case 'pmCode': return [CodeView, { lang: node.lang, value: node.code }]
+    case 'pmRole': return [PmRoleMark, { mark: node.mark }]
+  }
+}
+
+export interface HastRenderContext {
+  hidden?(item: number): boolean
+}
+
+const RAW_TEXT = new Set(['script', 'style'])
+
+export function hastToVNodes(nodes: readonly (RootContent | ElementContent)[], ctx: HastRenderContext): VNodeChild[] {
+  return nodes.map((node): VNodeChild => {
+    const own = asViewerNode(node)
+    if (own) {
+      const [component, props] = viewerComponent(own)
+      return h(component, props)
+    }
+    if (node.type === 'text') return node.value
+    if (node.type !== 'element') return null
+    const attrs = attributes(node.properties)
+    const item = node.properties.dataPmItem
+    if (typeof item === 'number' && ctx.hidden?.(item)) attrs.class = [attrs.class, 'pm-hidden']
+    if (RAW_TEXT.has(node.tagName)) return h(node.tagName, { ...attrs, innerHTML: node.children.map(c => (c.type === 'text' ? c.value : '')).join('') })
+    if (node.properties.dataPmTabs !== undefined) {
+      return h(TabSetView, { class: attrs.class, tabs: tabEntries(node, children => hastToVNodes(children, ctx)) })
+    }
+    return h(node.tagName, attrs, hastToVNodes(node.children, ctx))
+  })
+}
+
+export const MarkdownView = defineComponent({
+  name: 'PmMarkdown',
+  props: {
+    block: { type: Object as PropType<IRBlock>, required: true },
+    step: { type: Number, required: true },
+    expanded: Boolean,
+    prefix: { type: String, default: '' },
+  },
+  setup(props) {
+    const viewer = inject(VIEWER, undefined)
+    const links = viewerLinks(viewer)
+    const tree = computed(() => markdownToHast((props.block.node as MarkdownNode).mdast, props.prefix, links))
+    return () => {
+      const node = props.block.node as MarkdownNode
+      const hidden = node.reveal === 'items' && !props.expanded ? (k: number) => !itemVisible(props.block, k, props.step) : undefined
+      return hastToVNodes(tree.value.children, { hidden })
+    }
+  },
+})

package/src/operations.ts

@@ -0,0 +1,28 @@
+import type { Operations } from '@lincyaw/host'
+import { watch } from 'vue'
+import { getView } from './registry.ts'
+import type { Viewer } from './viewer.ts'
+
+export function followOperations(viewer: Viewer, operations: Operations): () => void {
+  const stop = watch(
+    () => ({ section: viewer.position.value.section, step: viewer.position.value.step, view: viewer.view.value }),
+    (now, before) => {
+      if (before && now.section === before.section && now.step === before.step && now.view === before.view) return
+      operations.report({ type: 'go', data: { ...now } })
+    },
+    { flush: 'sync' },
+  )
+  const off = operations.onReplay('go', {
+    apply(data) {
+      const view = typeof data.view === 'string' ? getView(data.view) : undefined
+      if (view && !view.hidden) viewer.setView(view.id)
+      if (typeof data.section !== 'string') return
+      const step = Number(data.step)
+      viewer.show({ section: data.section, step: Number.isFinite(step) && step >= 0 ? step : 0 })
+    },
+  })
+  return () => {
+    stop()
+    off()
+  }
+}

package/src/outputs.ts

@@ -0,0 +1,97 @@
+import { currentLocale } from '@lincyaw/host'
+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'
+
+const ORDER = ['text/html', 'text/markdown', 'text/latex', 'image/svg+xml', 'image/png', 'image/jpeg', 'image/gif', 'application/json', 'text/plain']
+
+function text(value: unknown): string {
+  return Array.isArray(value) ? value.join('') : typeof value === 'string' ? value : JSON.stringify(value, null, 2)
+}
+
+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)
+  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 display(data: Record<string, unknown>, metadata: Record<string, unknown>, prefix: string, key: number): VNodeChild {
+  for (const type of Object.keys(data)) {
+    const renderer = getNodeRenderer(`mime:${type}`)
+    if (renderer) return h(renderer, { key, type, data: data[type], metadata })
+  }
+  const type = ORDER.find(t => data[t] !== undefined)
+  if (!type) return null
+  const value = data[type]
+  const attrs = { 'key': key, 'class': 'pm-output__display', 'data-mime': type }
+  if (type === 'text/html') return h('div', attrs, [h(HtmlOutput, { html: text(value), plain: text(data['text/plain'] ?? '') })])
+  if (type === 'text/markdown') return h('div', { ...attrs, class: ['pm-output__display', 'pm-output__markdown'] }, markdownOutput(text(value), prefix))
+  if (type === 'text/latex') return h('div', attrs, [h(PmMath, { tex: text(value).trim().replace(/^\$\$?|\$\$?$/g, ''), display: true })])
+  if (type === 'image/svg+xml') return h('div', attrs, [h('img', { src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(text(value))}`, alt: '' })])
+  if (type.startsWith('image/')) return h('div', attrs, [h('img', { src: `data:${type};base64,${text(value).replace(/\s/g, '')}`, alt: '' })])
+  if (type === 'application/json') return h('pre', attrs, JSON.stringify(value, null, 2))
+  return h('pre', { ...attrs, innerHTML: ansi(text(value)) })
+}
+
+function richOutput(output: RunOutput, prefix: string, key: number): VNodeChild {
+  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}`) })
+    default: return display(output.data, output.metadata ?? {}, prefix, key)
+  }
+}
+
+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}`)))
+}
+
+export function runOutput(run: RunResult & { cacheKey?: string }, key: string | number, prefix: string, options: { prose?: boolean, note?: string } = {}): VNode {
+  const notes = [...outputNotes(run, currentLocale()), ...options.note ? [options.note] : []]
+  const content = run.outputs
+    ? run.outputs.map((output, i) => richOutput(output, prefix, i))
+    : [
+        run.stdout ? h('pre', { class: 'pm-output__stdout' }, run.stdout) : null,
+        run.stderr ? h('pre', { class: 'pm-output__stderr' }, run.stderr) : null,
+      ]
+  if (options.prose) return h('div', { 'key': key, 'class': 'pm-output pm-output--prose', 'data-executor': run.executorId }, content)
+  return h('div', { 'key': key, 'class': ['pm-output', { 'pm-output--failed': !run.ok }], 'data-executor': run.executorId }, [
+    ...content,
+    notes.length ? h('p', { class: 'pm-output__note' }, notes.join(' · ')) : null,
+  ])
+}

package/src/plugins.ts

@@ -0,0 +1,34 @@
+import { errorMessage } from '@lincyaw/kernel'
+import { BlockView } from './block.ts'
+import { registerAction, registerComponent, registerLayer, registerNodeRenderer, registerView } from './registry.ts'
+import { SectionView } from './section.ts'
+import { useViewer } from './viewer.ts'
+
+export interface ViewerPluginContext {
+  registerView: typeof registerView
+  registerNodeRenderer: typeof registerNodeRenderer
+  registerComponent: typeof registerComponent
+  registerAction: typeof registerAction
+  registerLayer: typeof registerLayer
+  useViewer: typeof useViewer
+  SectionView: typeof SectionView
+  BlockView: typeof BlockView
+}
+
+export type ViewerPlugin = (context: ViewerPluginContext) => void
+
+const context: ViewerPluginContext = { registerView, registerNodeRenderer, registerComponent, registerAction, registerLayer, useViewer, SectionView, BlockView }
+
+export function installViewerPlugin(plugin: unknown, name = 'viewer plugin'): string | undefined {
+  if (typeof plugin !== 'function') {
+    console.error(`[presmium] ${name}: the default export is not a function`)
+    return 'the default export is not a function'
+  }
+  try {
+    (plugin as ViewerPlugin)(context)
+    return undefined
+  } catch (error) {
+    console.error(`[presmium] ${name} failed`, error)
+    return errorMessage(error)
+  }
+}