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

package/src/{markdown.ts → client/markdown/handlers.ts}

@@ -1,19 +1,16 @@
-import { roleMark } from '@lincyaw/kernel'
-import type { IRBlock, MarkdownNode, MdastNode } from '@lincyaw/kernel'
-import type { Element, ElementContent, Nodes, Properties, Root, RootContent } from 'hast'
+import { isButton, roleMark, safeDecodeURIComponent, urlSlug } from '@lincyaw/kernel'
+import type { MdastNode } from '@lincyaw/kernel'
+import type { Element, ElementContent, Nodes, Root } 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'
+import { viewerMessages } from '../viewer-messages.ts'
+import { footnoteId } from '../viewer-state.ts'
+import type { Viewer } from '../viewer-state.ts'
+import { classed, classes, element, text } from './hast.ts'
+import { layoutHandlers } from './layout-handlers.ts'
+import { tabHandlers } from './tabs.ts'
+import { tableHandler } from './tables.ts'
 
 export interface MarkdownLinks {
   footnoteHref?(identifier: string): string
@@ -31,15 +28,8 @@ export function viewerLinks(viewer: Viewer | undefined): MarkdownLinks {
   }
 }
 
-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 =
+/** The nodes the viewer renders with its own components; they pass through the HAST tree untouched. */
+export type ViewerNode =
   | { type: 'pmMath', tex: string, display: boolean, html?: string }
   | { type: 'pmMermaid', code: string }
   | { type: 'pmCode', lang: string, code: string }
@@ -51,7 +41,7 @@ function viewerNode(node: ViewerNode): ElementContent {
   return node as unknown as ElementContent
 }
 
-function asViewerNode(node: { type: string }): ViewerNode | undefined {
+export function asViewerNode(node: { type: string }): ViewerNode | undefined {
   return (VIEWER_NODES as string[]).includes(node.type) ? node as ViewerNode : undefined
 }
 
@@ -66,29 +56,12 @@ function isBlock(node: ElementContent): boolean {
   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) =>
@@ -96,7 +69,7 @@ function handlers(links: MarkdownLinks): Handlers {
   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 footnoteMark = (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
@@ -105,6 +78,7 @@ function handlers(links: MarkdownLinks): Handlers {
     return el
   }
   const custom: Record<string, Handler> = {
+    table: tableHandler,
     math: (_, node) => math(node, true),
     inlineMath: (_, node) => math(node, false),
     mermaid: (_, node) => viewerNode({ type: 'pmMermaid', code: value(node) }),
@@ -116,7 +90,7 @@ function handlers(links: MarkdownLinks): Handlers {
       loading: 'lazy',
     }),
     admonition(state, node) {
-      const names = messages().markdown.admonitions
+      const names = viewerMessages().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)
@@ -126,10 +100,10 @@ function handlers(links: MarkdownLinks): Handlers {
     },
     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)) }, []),
+      element('a', { href: footnoteHref(identifier(node)), dataLabel: footnoteMark(node), ariaLabel: viewerMessages().markdown.footnote(footnoteMark(node)) }, []),
     ]),
     footnoteDefinition: (state, node) => element('div', { id: footnoteId(identifier(node)), className: ['pm-footnote'] }, [
-      element('sup', { dataLabel: mark(node) }, []),
+      element('sup', { dataLabel: footnoteMark(node) }, []),
       ...state.all(node),
     ]),
     container: (state, node) => element('figure', { id: typeof node.identifier === 'string' ? node.identifier : undefined, className: ['pm-figure'] }, state.all(node)),
@@ -141,7 +115,7 @@ function handlers(links: MarkdownLinks): Handlers {
       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)
+      return url.startsWith('#') ? reference(el, safeDecodeURIComponent(url.slice(1)), url.slice(1)) : reference(el, '', url)
     },
     keyboard: wrap('kbd'),
     subscript: wrap('sub'),
@@ -154,7 +128,8 @@ function handlers(links: MarkdownLinks): Handlers {
     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(),
+    ...layoutHandlers(),
+    ...tabHandlers(),
     presmiumRole(state, node) {
       const children = state.all(node)
       return children.length
@@ -165,10 +140,6 @@ function handlers(links: MarkdownLinks): Handlers {
   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('') : ''
@@ -180,7 +151,7 @@ export function markdownToHast(mdast: MdastNode, prefix: string, links: Markdown
   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 (/^h[1-6]$/.test(child.tagName) && child.properties.id === undefined) child.properties.id = `${prefix}-${urlSlug(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++
@@ -188,68 +159,3 @@ export function markdownToHast(mdast: MdastNode, prefix: string, links: Markdown
   }
   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/client/markdown/hast.ts

@@ -0,0 +1,20 @@
+import type { MdastNode } from '@lincyaw/kernel'
+import type { Element, ElementContent, Properties } from 'hast'
+
+export function element(tagName: string, properties: Properties, children: ElementContent[] = []): Element {
+  return { type: 'element', tagName, properties, children }
+}
+
+export function text(value: string): ElementContent {
+  return { type: 'text', value }
+}
+
+/** The classes a MyST node names in its `class` option. */
+export function classes(node: MdastNode): string[] {
+  return typeof node.class === 'string' ? node.class.split(/\s+/).filter(Boolean) : []
+}
+
+export function classed(node: MdastNode, properties: Properties = {}): Properties {
+  const names = classes(node)
+  return names.length ? { ...properties, className: names } : properties
+}

package/src/client/markdown/layout-handlers.ts

@@ -0,0 +1,57 @@
+import type { MdastNode } from '@lincyaw/kernel'
+import type { ElementContent } from 'hast'
+import type { Handler, State } from 'mdast-util-to-hast'
+import { classes, element } from './hast.ts'
+
+const WIDTHS = ['xs', 'sm', 'md', 'lg'] as const
+
+function gridColumns(node: MdastNode): number[] {
+  const given = Array.isArray(node.columns) ? node.columns.map(Number).filter(n => Number.isInteger(n) && n >= 1) : []
+  return WIDTHS.map((_, i) => given[Math.min(i, given.length - 1)] ?? 1)
+}
+
+const style = (values: Record<string, number>) => Object.entries(values).map(([key, value]) => `${key}: ${value}`).join('; ')
+
+const grid: Handler = (state, node: MdastNode) => {
+  const columns = gridColumns(node)
+  const children = state.all(node as never).map((child) => {
+    const twelfths = child.type === 'element' ? Number(child.properties.dataPmColumns) : Number.NaN
+    if (child.type !== 'element' || !(twelfths >= 1)) return child
+    const spans = Object.fromEntries(WIDTHS.map((width, i) => [`--pm-span-${width}`, Math.min(columns[i]!, Math.max(1, Math.round(twelfths * columns[i]! / 12)))]))
+    return { ...child, properties: { ...child.properties, style: style(spans) } }
+  })
+  const widths = Object.fromEntries(WIDTHS.map((width, i) => [`--pm-grid-${width}`, columns[i]!]))
+  return element('div', { className: ['pm-grid', ...classes(node)], style: style(widths) }, children)
+}
+
+const gridItem: Handler = (state, node: MdastNode) =>
+  element('div', { className: ['pm-grid__item', ...classes(node)], dataPmColumns: typeof node.columns === 'number' ? node.columns : undefined }, state.all(node as never))
+
+const card: Handler = (state: State, node: MdastNode) => {
+  const items = node.children ?? []
+  const part = (type: string) => items.find(child => child.type === type)
+  const url = typeof node.url === 'string' && node.url ? node.url : undefined
+  const header = part('header')
+  const footer = part('footer')
+  const title = part('cardTitle')
+  const content: ElementContent[] = []
+  if (header) content.push(element('header', { className: ['pm-card__header'] }, state.all(header as never)))
+  if (title || url) {
+    const words: MdastNode[] = title?.children?.length ? title.children : [{ type: 'text', value: url ?? '' }]
+    const inner = url ? [state.one({ type: 'link', url, children: words } as never, node as never) as ElementContent] : state.all({ type: 'paragraph', children: words } as never)
+    content.push(element('p', { className: ['pm-card__title'] }, inner))
+  }
+  const body = items.filter(child => child !== header && child !== title && child !== footer)
+  content.push(element('div', { className: ['pm-card__body'] }, state.all({ type: 'root', children: body } as never)))
+  if (footer) content.push(element('footer', { className: ['pm-card__footer'] }, state.all(footer as never)))
+  return element('div', { className: ['pm-card', ...url ? ['pm-card--link'] : [], ...classes(node)] }, content)
+}
+
+/** The handlers of MyST's grids and cards. */
+export function layoutHandlers(): Record<string, Handler> {
+  return {
+    'grid': grid,
+    'grid-item': gridItem,
+    'card': card,
+  }
+}

package/src/client/markdown/math.ts

@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react'
+import { escapeHtml } from '@lincyaw/kernel'
+import { h } from '../element.ts'
+import 'katex/dist/katex.min.css'
+export function PmMath({ tex, display, html }: { tex: string, display?: boolean, html?: string }) {
+  const [rendered, setRendered] = useState<string>()
+  useEffect(() => { let active = true; if (!html) void import('katex').then(m => { if (active) setRendered(m.default.renderToString(tex, { displayMode: display, throwOnError: false })) }); return () => { active = false } }, [tex, display, html])
+  const output = html ?? rendered
+  return h(display ? 'div' : 'span', { className: `pm-math pm-math--${display ? 'display' : 'inline'}`, 'data-rendered': output ? '' : undefined, innerHTML: output ?? escapeHtml(tex) })
+}

package/src/client/markdown/mermaid.ts

@@ -0,0 +1,75 @@
+import { useAppearance } from '@lincyaw/host'
+import { errorMessage, escapeHtml } from '@lincyaw/kernel'
+import { useEffect, useState } from 'react'
+import { h } from '../element.ts'
+
+type Mermaid = typeof import('mermaid').default
+
+let mermaid: Promise<Mermaid> | undefined
+let diagrams = 0
+
+function loadMermaid(): Promise<Mermaid> {
+  if (import.meta.env.SSR) return new Promise(() => {})
+  mermaid ??= import('mermaid').then(m => m.default)
+  return mermaid
+}
+
+/** Mermaid's theme variables from the page's design tokens; undefined when the page has none. */
+function mermaidThemeVariables(dark: boolean): Record<string, string | boolean> | undefined {
+  const style = getComputedStyle(document.documentElement)
+  const colorToken = (name: string) => style.getPropertyValue(`--pm-color-${name}`).trim()
+  const [ink, muted, surface, sunk, line, accent, accentSoft, warn, warnSoft] = ['ink', 'muted', 'surface', 'sunk', 'line', 'accent', 'accent-soft', 'warn', 'warn-soft'].map(colorToken)
+  if (!ink || !surface || !accent) return undefined
+  return {
+    darkMode: dark,
+    background: surface,
+    fontFamily: style.getPropertyValue('--pm-font-sans').trim() || 'sans-serif',
+    textColor: ink,
+    lineColor: muted!,
+    primaryColor: accentSoft!,
+    primaryTextColor: ink,
+    primaryBorderColor: accent,
+    secondaryColor: sunk!,
+    secondaryTextColor: ink,
+    secondaryBorderColor: line!,
+    tertiaryColor: surface,
+    tertiaryTextColor: ink,
+    tertiaryBorderColor: line!,
+    edgeLabelBackground: surface,
+    clusterBkg: sunk!,
+    clusterBorder: line!,
+    titleColor: ink,
+    noteBkgColor: warnSoft!,
+    noteTextColor: ink,
+    noteBorderColor: warn!,
+    actorBkg: accentSoft!,
+    actorBorder: accent,
+    actorTextColor: ink,
+    signalColor: ink,
+    signalTextColor: ink,
+    labelBoxBkgColor: sunk!,
+    labelTextColor: ink,
+    loopTextColor: ink,
+  }
+}
+
+export function PmMermaid({ code }: { code: string }) {
+  const [drawn, setDrawn] = useState<{ svg: string, theme: string }>()
+  const [failed, setFailed] = useState<string>()
+  const { dark } = useAppearance()
+  useEffect(() => {
+    let active = true
+    void (async () => {
+      try {
+        const library = await loadMermaid()
+        const variables = mermaidThemeVariables(dark)
+        const appearance = dark ? 'dark' : 'default'
+        library.initialize({ startOnLoad: false, securityLevel: 'strict', theme: variables ? 'base' : appearance, ...variables ? { themeVariables: variables } : {}, flowchart: { useMaxWidth: false } })
+        const { svg } = await library.render(`pm-mermaid-${++diagrams}`, code)
+        if (active) { setDrawn({ svg, theme: appearance }); setFailed(undefined) }
+      } catch (error) { if (active) setFailed(errorMessage(error)) }
+    })()
+    return () => { active = false }
+  }, [code, dark])
+  return h('div', { className: `pm-mermaid${failed ? ' pm-mermaid--error' : ''}`, 'data-rendered': drawn ? '' : undefined, 'data-theme': drawn?.theme, title: failed, innerHTML: drawn?.svg ?? `<pre>${escapeHtml(code)}</pre>` })
+}

package/src/client/markdown/render.ts

@@ -0,0 +1,79 @@
+import { blockStepState } from '@lincyaw/kernel'
+import { currentLocale } from '@lincyaw/host'
+import type { IRBlock, MarkdownNode } from '@lincyaw/kernel'
+import type { ElementContent, Properties, RootContent } from 'hast'
+import { find, html as schema } from 'property-information'
+import type { ComponentType, ReactNode } from 'react'
+import { useContext } from 'react'
+import { useStore } from '@lincyaw/host'
+import { h } from '../element.ts'
+import { itemVisible } from '../../domain/index.ts'
+import { CodeView } from '../code/code-view.ts'
+import { VIEWER } from '../viewer-state.ts'
+import { asViewerNode, markdownToHast, viewerLinks } from './handlers.ts'
+import type { ViewerNode } from './handlers.ts'
+import { PmMath } from './math.ts'
+import { PmMermaid } from './mermaid.ts'
+import { PmRoleMark } from './role-mark.ts'
+import { tabEntries, TabSetView } from './tabs.ts'
+import { cachedTree } from './tree-cache.ts'
+
+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): [ComponentType<any>, 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'])
+const VOID_ELEMENTS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'])
+
+export function hastToVNodes(nodes: readonly (RootContent | ElementContent)[], ctx: HastRenderContext): ReactNode[] {
+  return nodes.map((node): ReactNode => {
+    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']
+    // HAST represents a void element with an empty children array. React treats
+    // even that array as children and refuses img/br/input before mounting.
+    if (VOID_ELEMENTS.has(node.tagName)) return h(node.tagName, attrs)
+    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 function MarkdownView(props: { block: IRBlock, step: number, expanded?: boolean, prefix?: string }) {
+  const viewer = useContext(VIEWER)
+  const doc = useStore(viewer?.doc)
+  const links = viewerLinks(viewer)
+  const node = props.block.node as MarkdownNode
+  const tree = viewer && doc ? cachedTree(viewer, doc, node.mdast, props.prefix ?? '', links, currentLocale()) : markdownToHast(node.mdast, props.prefix ?? '', links)
+  const revealed = blockStepState(props.block, props.step)?.parameters?.revealedItems
+  const hidden = node.reveal === 'items' && !props.expanded ? (k: number) => typeof revealed === 'number' ? k >= revealed : !itemVisible(props.block, k, props.step) : undefined
+  return h('div', { className: 'pm-markdown' }, hastToVNodes(tree.children, { hidden }))
+}

package/src/client/markdown/role-mark.ts

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react'
+import { AUTHOR_MARKS_CLASS } from '@lincyaw/kernel'
+import { useSectionContext } from '../section-context.ts'
+import { h } from '../element.ts'
+export function PmRoleMark({ mark }: { mark: string }) {
+  const section = useSectionContext(); const [shown, setShown] = useState(false)
+  useEffect(() => { const root = document.documentElement; const update = () => setShown(root.classList.contains(AUTHOR_MARKS_CLASS)); update(); const observer = new MutationObserver(update); observer.observe(root, { attributes: true, attributeFilter: ['class'] }); return () => observer.disconnect() }, [])
+  return shown || section?.view === 'presenter' ? h('span', { className: 'pm-role-mark' }, mark) : null
+}

package/src/client/markdown/tables.ts

@@ -0,0 +1,49 @@
+import type { MdastNode } from '@lincyaw/kernel'
+import type { Element } from 'hast'
+import type { Handler, State } from 'mdast-util-to-hast'
+import { element } from './hast.ts'
+
+function sourceElement(state: State, node: MdastNode, result: Element): Element {
+  if (typeof node.identifier === 'string') result.properties.id = node.identifier
+  state.patch(node as never, result)
+  return state.applyData(node as never, result)
+}
+
+/** Preserve the canonical logical table grid instead of GFM's first-row-only model. */
+export const tableHandler: Handler = (state, node: MdastNode) => {
+  const rows = node.children ?? []
+  const headerRows = typeof node.headerRows === 'number' ? node.headerRows : Math.min(1, rows.length)
+  const headerColumns = typeof node.headerColumns === 'number' ? node.headerColumns : 0
+  let spans: { from: number, to: number, until: number }[] = []
+  let crossesHeader = false
+  const rendered = rows.map((row, rowIndex) => {
+    spans = spans.filter(span => span.until > rowIndex).sort((a, b) => a.from - b.from)
+    let column = 0, index = 0
+    const added: typeof spans = []
+    const cells = (row.children ?? []).map(cell => {
+      const colspan = typeof cell.colspan === 'number' ? cell.colspan : 1
+      const rowspan = typeof cell.rowspan === 'number' ? cell.rowspan : 1
+      while (spans[index] && spans[index]!.from <= column) { column = Math.max(column, spans[index]!.to); index++ }
+      const columnHeader = rowIndex < headerRows, rowHeader = column < headerColumns
+      const result = sourceElement(state, cell, element(columnHeader || rowHeader ? 'th' : 'td', {
+        ...colspan > 1 ? { colSpan: colspan } : {},
+        ...rowspan > 1 ? { rowSpan: rowspan } : {},
+        ...columnHeader ? { scope: colspan > 1 ? 'colgroup' : 'col' } : rowHeader ? { scope: rowspan > 1 ? 'rowgroup' : 'row' } : {},
+      }, state.all(cell as never)))
+      if (rowspan > 1) added.push({ from: column, to: column + colspan, until: rowIndex + rowspan })
+      if (rowIndex < headerRows && rowIndex + rowspan > headerRows) crossesHeader = true
+      column += colspan
+      return result
+    })
+    spans.push(...added)
+    return sourceElement(state, row, element('tr', {}, cells))
+  })
+  const widths = Array.isArray(node.columnWidths) ? node.columnWidths : []
+  const columns = widths.length ? [element('colgroup', {}, widths.map(width => element('col', { style: `width:${Number(width)}px` })))] : []
+  // HTML spans cannot cross row-group boundaries. Keep those tables in one group,
+  // with each header cell's scope retaining the authored header semantics.
+  const groups = headerRows > 0 && !crossesHeader
+    ? [element('thead', {}, rendered.slice(0, headerRows)), ...rendered.length > headerRows ? [element('tbody', {}, rendered.slice(headerRows))] : []]
+    : [element('tbody', {}, rendered)]
+  return sourceElement(state, node, element('table', {}, [...columns, ...groups]))
+}

package/src/client/markdown/tabs.ts

@@ -0,0 +1,52 @@
+import * as Tabs from '@radix-ui/react-tabs'
+import { createStore, useStore } from '@lincyaw/host'
+import type { MdastNode } from '@lincyaw/kernel'
+import type { Element, ElementContent } from 'hast'
+import type { Handler } from 'mdast-util-to-hast'
+import type { ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import { h } from '../element.ts'
+import { classes, element } from './hast.ts'
+
+const tabSet: Handler = (state, node: MdastNode) => {
+  const panels = (node.children ?? []).filter(child => child.type === 'tabItem').map(item => element('div', {
+    className: ['pm-tabs__panel'],
+    dataTitle: typeof item.title === 'string' ? item.title : '',
+    dataSync: typeof item.sync === 'string' && item.sync ? item.sync : undefined,
+    dataSelected: item.selected === true ? 'true' : undefined,
+  }, state.all(item as never)))
+  return element('div', { className: ['pm-tabs', ...classes(node)], dataPmTabs: '' }, panels)
+}
+
+/** The handlers of MyST's tab sets: a tab set becomes an element that `hastToVNodes` renders as `TabSetView`. */
+export function tabHandlers(): Record<string, Handler> {
+  return {
+    tabSet,
+    tabItem: (state, node) => element('div', {}, state.all(node)),
+  }
+}
+
+export interface TabEntry {
+  title: string
+  sync?: string
+  selected: boolean
+  content: () => ReactNode[]
+}
+
+export function tabEntries(set: Element, render: (nodes: ElementContent[]) => ReactNode[]): TabEntry[] {
+  return set.children.flatMap((panel): TabEntry[] => panel.type !== 'element' ? [] : [{
+    title: String(panel.properties.dataTitle ?? ''),
+    sync: typeof panel.properties.dataSync === 'string' ? panel.properties.dataSync : undefined,
+    selected: panel.properties.dataSelected === 'true',
+    content: () => render(panel.children),
+  }])
+}
+
+const synced = createStore<string | undefined>(undefined)
+export function TabSetView({ tabs, className }: { tabs: TabEntry[], className?: string }) {
+  const key = useStore(synced)
+  const [active, setActive] = useState(() => Math.max(0, tabs.findIndex(tab => tab.selected)))
+  useEffect(() => { const index = tabs.findIndex(tab => tab.sync && tab.sync === key); if (index >= 0) setActive(index) }, [key, tabs])
+  const choose = (value: string) => { const index = Number(value); setActive(index); const key = tabs[index]?.sync; if (key) synced.set(key) }
+  return h(Tabs.Root, { value: String(active), onValueChange: choose, className }, [h(Tabs.List, { className: 'pm-tabs__list' }, tabs.map((tab, k) => h(Tabs.Trigger, { key: k, value: String(k), className: 'pm-tabs__tab' }, tab.title))), ...tabs.map((tab, k) => h(Tabs.Content, { key: k, value: String(k), className: 'pm-tabs__panel', forceMount: true, hidden: k !== active, tabIndex: 0 }, tab.content()))])
+}