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

package/README.md

@@ -1,8 +1,8 @@
 # @lincyaw/web
 
-Presmium's web renderer: a static VitePress site around the IR runtime, a page per chapter, with search, the site shell (navigation, footer, Open Graph, sitemap), translations with a language menu, links to the slides, and workspace sites of several documents.
+Presmium's web renderer: one prebuilt viewer app shows teaching-document pages in `presmium dev`, `presmium serve`, the workbench and a built site. A built site holds the app once and each document as data beside its pages (its IR, search index, own code bundle and published files); its pages are rendered on the server and then hydrated. The site shell is Presmium's own: a page per chapter, navigation, outline, pager, search, translations with a language menu, light and dark, the phone layout, links to the slides, and workspace sites of several documents with a home page, a 404 page and a sitemap. Independent homepages use their own site-page data or a freely designed HTML entry. The slides form is the viewer app's slides page (`@lincyaw/render-slides`).
 
-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
 
@@ -14,11 +14,40 @@ pnpm add -D @lincyaw/cli @lincyaw/web
 
 ## Configuration
 
-In the headmatter, `renderers.web`: `base` (the site path), `port` (the dev server), and the site shell `nav`, `footer`, `head` and `sitemap`. At a workspace root, the same shell options go under `site` in `presmium.workspace.yaml`, with `home`, `lang` and `locales.<lang>.title`.
+In `lecture.json`, `metadata.renderers.web`: `base` (the site path), `port` (the dev server), `theme`, `params`, `layout`, and the site shell `nav`, `footer`, `head` and `sitemap`. At a workspace root, the shell options go under `site` in `presmium.workspace.yaml`, with `landing`, `home`, `lang` and `locales.<lang>.title`.
+
+Choose the built-in `course`, `docs` or `showcase` theme; `docs` preserves the existing default. Theme parameters select an accent (`blue`, `teal`, `violet`, `amber`), typography (`reading`, `sans`), content width (`comfortable`, `wide`), and an optional `logo` with `logoAlt`. Omit `logoAlt` or set it to an empty string for a decorative logo beside the site title. Document layouts are `article` (default), `landing` and `wide`; `landing` combines all sections into one full-width HTML page. A workspace's theme and brand apply across its documents; each document can choose its own layout.
+
+```yaml
+title: My course
+documents: ['*/lecture.json']
+site:
+  theme: course
+  params:
+    accent: teal
+    typography: reading
+    contentWidth: comfortable
+  landing:
+    source: ./site/home.json
+```
+
+`landing.source` selects an independent site page with a hero and sections, separate from teaching documents. The same page object can be written inline in `landing`. For a freely designed HTML/CSS/JavaScript page, use `landing: { template: './site/home.html' }` instead; Vite bundles that HTML entry and its assets. The template receives reader-facing site data in `script#presmium-site-data` (`schemaVersion`, `title`, `base`, `lang`, `documents`). Teaching content, steps and scripts still belong only in `lecture.json`. Existing `landing: welcome` remains supported: it displays all sections of `welcome/lecture.json` at the site root while keeping that document's normal pages. `home` retains its redirect behavior and cannot be set together with `landing`.
+
+For a ready-to-publish workspace:
+
+```sh
+presmium new my-site --type site --theme course --title 'My course'
+cd my-site
+pnpm install
+pnpm serve
+```
+
+`pnpm build` writes `dist/web/`. The generated GitHub Pages workflow builds and deploys that directory using the repository's Pages base path. The [site theme guide](https://github.com/Lincyaw/presmium/blob/main/docs/site-themes.md) covers parameters, page layouts, standalone documents and deployment.
 
 ## Documentation
 
-- [Author guide](https://github.com/Lincyaw/presmium/blob/main/site/guide/lecture.en.md): media, workspaces and translations
+- [Author guide](https://github.com/Lincyaw/presmium/blob/main/site/guide/locales/en/lecture.json): media, workspaces and translations
+- [Site themes](https://github.com/Lincyaw/presmium/blob/main/docs/site-themes.md): presets, independent homepages and GitHub Pages
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lincyaw/web",
-  "version": "1.0.0-rc.0",
-  "description": "Presmium's web renderer: a VitePress site around the IR runtime, with search and form switching",
+  "version": "1.0.0-rc.2",
+  "description": "Presmium's web renderer: one prebuilt viewer that shows the web form in the workbench, in a dev server and as a built site, with search and form switching",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -11,10 +11,7 @@
   "homepage": "https://github.com/Lincyaw/presmium/tree/main/packages/web#readme",
   "bugs": "https://github.com/Lincyaw/presmium/issues",
   "keywords": [
-    "slidev-addon",
-    "slidev",
     "presmium",
-    "vitepress",
     "renderer"
   ],
   "type": "module",
@@ -26,34 +23,38 @@
   },
   "exports": {
     "./domain": "./src/domain/index.ts",
-    "./client": "./src/client/index.ts",
     "./presmium": "./src/node/presmium.ts",
+    "./slides": "./src/node/slides.ts",
     "./package.json": "./package.json"
   },
   "files": [
-    "custom-nav-controls.vue",
     "src"
   ],
-  "slidev": {},
   "dependencies": {
+    "escape-html": "1.0.3",
     "http-proxy-3": "2.0.1",
     "katex": "0.18.10",
     "launch-editor": "2.14.1",
     "minisearch": "7.2.0",
-    "vitepress": "1.6.4",
-    "vue": "^3.5.42"
+    "send": "1.2.1",
+    "sitemap": "9.0.1",
+    "vite": "8.3.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "peerDependencies": {
-    "@lincyaw/host": "^1.0.0-rc.0",
-    "@lincyaw/kernel": "^1.0.0-rc.0",
-    "@lincyaw/viewer": "^1.0.0-rc.0"
+    "@lincyaw/host": "^1.0.0-rc.2",
+    "@lincyaw/kernel": "^1.0.0-rc.2",
+    "@lincyaw/viewer": "^1.0.0-rc.2"
   },
   "devDependencies": {
-    "@slidev/client": "53.0.0",
-    "@slidev/types": "53.0.0",
-    "@lincyaw/cli": "1.0.0-rc.0",
-    "@lincyaw/kernel": "1.0.0-rc.0",
-    "@lincyaw/host": "1.0.0-rc.0",
-    "@lincyaw/viewer": "1.0.0-rc.0"
+    "@types/escape-html": "1.0.4",
+    "@types/send": "^1.2.1",
+    "@types/react": "18.3.28",
+    "@types/react-dom": "18.3.7",
+    "@lincyaw/cli": "1.0.0-rc.2",
+    "@lincyaw/host": "1.0.0-rc.2",
+    "@lincyaw/kernel": "1.0.0-rc.2",
+    "@lincyaw/viewer": "1.0.0-rc.2"
   }
 }

package/src/app/base.css

@@ -0,0 +1,117 @@
+/* The viewer app's page: one set of resets for every form, so that components look the same everywhere. */
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.4;
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  width: 100%;
+  min-height: 100vh;
+  background: var(--pm-color-bg);
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-sans);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+:is(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+:is(p, blockquote, figure, fieldset) {
+  margin: 0;
+}
+
+:is(ol, ul) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+:is(strong, b) {
+  font-weight: 600;
+}
+
+:is(pre, code, kbd, samp) {
+  font-family: var(--pm-font-mono);
+}
+
+:is(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+}
+
+:is(img, video) {
+  max-width: 100%;
+  height: auto;
+}
+
+:is(button, input, optgroup, select, textarea) {
+  padding: 0;
+  border: 0;
+  color: inherit;
+  line-height: inherit;
+}
+
+button {
+  background-color: transparent;
+  background-image: none;
+  font-family: inherit;
+}
+
+:is(button, [role='button']):enabled {
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  background-color: transparent;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  padding: 0;
+}
+
+:is(h1, h2, h3, h4, h5, h6, li, p) {
+  overflow-wrap: break-word;
+}
+
+/* A compiled block widget has its own read-only host, without a page shell. */
+html.pm-block-document,
+.pm-block-document body {
+  min-height: 0;
+  background: transparent;
+}
+.pm-block-document #app,
+.pm-block-preview {
+  width: 100%;
+  min-width: 0;
+}

package/src/app/block-playback.ts

@@ -0,0 +1,81 @@
+import { presmiumService, PLAYBACK_CONTROL, runtimeRevision } from '@lincyaw/host'
+import type { PlaybackControl } from '@lincyaw/host'
+import { irBlocks, PREVIEW_REVISION, toBlockPreviewPlaybackGranted } from '@lincyaw/kernel'
+import type { BlockPreviewPlaybackCancelled, BlockPreviewPlaybackRequest, IRDocument } from '@lincyaw/kernel'
+import type { Viewer } from '@lincyaw/viewer'
+import type { AppConfig } from '../domain/index.ts'
+
+/** Authorise the existing player; this bridge owns no clock or content. */
+export function blockPlaybackGate(config: AppConfig, doc: IRDocument, viewer: Viewer, origin: string | undefined, navigation: () => string | undefined, onGranted: (navigation: string) => void) {
+  const random = crypto.getRandomValues(new Uint32Array(2))
+  let sequence = (random[0]! & 0x000f_ffff) * 0x1_0000_0000 + random[1]!
+  const pending = new Map<number, (error?: Error, navigation?: string) => void>()
+  const active = new Map<number, () => void>()
+  let disposed = false, armed = false, control: PlaybackControl | undefined
+  let stopGate = () => {}, stopRuntime = () => {}
+  const revision = doc.meta[PREVIEW_REVISION]
+  const abortError = () => new DOMException('Playback cancelled', 'AbortError')
+  const cancelled = (request: number) => {
+    if (!origin || typeof revision !== 'string') return
+    const message: BlockPreviewPlaybackCancelled = { type: 'presmium:block-preview-playback-cancelled', document: config.document, blockId: config.block!, revision, request }
+    try { window.parent.postMessage(message, origin) } catch {}
+  }
+  const cancel = () => {
+    for (const finish of [...pending.values()]) finish(abortError())
+    for (const release of [...active.values()]) release()
+  }
+  const authorize = (signal: AbortSignal): Promise<void> => {
+    if (disposed || !origin || typeof revision !== 'string' || signal.aborted) return Promise.reject(abortError())
+    const position = viewer.position.getSnapshot(), section = viewer.section(position.section)
+    const stepId = section?.stepIds?.[position.step], selectedNavigation = navigation()
+    if (!section || !stepId || !selectedNavigation || ![...irBlocks(section.blocks)].some(block => block.id === config.block)) return Promise.reject(new Error('The selected preview step is unavailable.'))
+    const request = ++sequence
+    return new Promise<void>((resolve, reject) => {
+      let granted = false
+      const abort = () => { if (granted) active.get(request)?.(); else finish(abortError()) }
+      const finish = (error?: Error, acceptedNavigation?: string) => {
+        if (!pending.delete(request)) return
+        clearTimeout(timeout)
+        if (error) {
+          signal.removeEventListener('abort', abort)
+          cancelled(request)
+          reject(error)
+        } else {
+          granted = true
+          active.set(request, () => {
+            if (!active.delete(request)) return
+            signal.removeEventListener('abort', abort)
+            cancelled(request)
+          })
+          onGranted(acceptedNavigation!)
+          resolve()
+        }
+      }
+      const timeout = setTimeout(() => finish(new Error('Playback authorization timed out.')), 15_000)
+      pending.set(request, finish)
+      signal.addEventListener('abort', abort, { once: true })
+      const message: BlockPreviewPlaybackRequest = { type: 'presmium:block-preview-playback-request', document: config.document, blockId: config.block!, revision, request, sectionId: section.id, stepId, navigation: selectedNavigation }
+      try { window.parent.postMessage(message, origin) } catch { finish(new Error('Playback authorization is unavailable.')) }
+    })
+  }
+  const attach = () => {
+    const next = presmiumService(PLAYBACK_CONTROL)
+    if (next === control) return
+    stopGate(); cancel(); control = next
+    stopGate = next?.setGate(authorize) ?? (() => {})
+  }
+  return {
+    /** An authorised embedded surface always joins the parent's playback focus. */
+    enable() {
+      if (armed || disposed || !origin || window.parent === window) return
+      armed = true
+      attach()
+      stopRuntime = runtimeRevision.subscribe(attach)
+    },
+    grant(data: unknown) {
+      const value = toBlockPreviewPlaybackGranted(data)
+      if (!disposed && value?.document === config.document && value.blockId === config.block && value.revision === revision) pending.get(value.request)?.(value.error === undefined ? undefined : new Error(value.error || 'Playback authorization is unavailable.'), value.navigation)
+    },
+    dispose() { if (disposed) return; disposed = true; stopRuntime(); stopGate(); cancel() },
+  }
+}

package/src/app/block-report.ts

@@ -0,0 +1,104 @@
+import { componentErrors, componentErrorRevision, presmiumService, PLAYBACK_CONTROL, STEP_CLOCK } from '@lincyaw/host'
+import { deckLocale, irBlocks, PREVIEW_REVISION, toBlockPreviewCommand } from '@lincyaw/kernel'
+import type { IRDocument } from '@lincyaw/kernel'
+import type { Viewer } from '@lincyaw/viewer'
+import { WEB_MESSAGES } from '../domain/index.ts'
+import type { AppConfig } from '../domain/index.ts'
+import { blockPlaybackGate } from './block-playback.ts'
+
+/** A read-only widget reports snapshot status, geometry and discrete navigation to its authorised parent. */
+export function blockPreviewReporter(config: AppConfig, doc: IRDocument, viewer: Viewer): { ready(): Promise<void>, failed(): void } {
+  let origin: string | undefined
+  try { const referrer = new URL(document.referrer).origin; if (config.origins.includes(referrer)) origin = referrer } catch {}
+  const root = document.getElementById('app')!
+  let localPosition = false
+  let navigation: string | undefined
+  const playback = blockPlaybackGate(config, doc, viewer, origin, () => navigation, accepted => { navigation = accepted; localPosition = true })
+  playback.enable()
+  let enabled = false, fatal = false, queued = false, disposed = false
+  let lastReport: string | undefined
+  let stopPosition: (() => void) | undefined
+  const failed = () => { fatal = true; send() }
+  const send = () => {
+    if (!enabled || !origin || window.parent === window || disposed) return
+    const unavailable = root.querySelector('[data-status="failed"], [data-status="missing"], .pm-component-missing')
+    const error = fatal || unavailable || componentErrors().length > 0
+    const loading = root.querySelector('.pm-client-only, [data-status="loading"]')
+    const revision = doc.meta[PREVIEW_REVISION], status = error ? 'failed' : loading ? 'loading' : 'ready'
+    const height = Math.ceil(root.querySelector('.pm-block-preview')?.getBoundingClientRect().height ?? root.scrollHeight)
+    const report = JSON.stringify([revision, status, height])
+    if (report === lastReport) return
+    lastReport = report
+    window.parent.postMessage({ type: 'presmium:block-preview', blockId: config.block, document: config.document, revision, status, height, ...error ? { message: WEB_MESSAGES[deckLocale(config.lang)].blockPreviewFailed } : {} }, origin)
+  }
+  const changed = () => { if (queued || disposed) return; queued = true; queueMicrotask(() => { queued = false; send() }) }
+  const resize = new ResizeObserver(changed)
+  const mutations = new MutationObserver(changed)
+  resize.observe(root)
+  mutations.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ['data-status', 'class'] })
+  const stopErrors = componentErrorRevision.subscribe(changed)
+  const sendPosition = () => {
+    if (!enabled || !origin || disposed || fatal || !localPosition || !navigation || window.parent === window) return
+    const position = viewer.position.getSnapshot(), section = viewer.section(position.section)
+    if (!section || ![...irBlocks(section.blocks)].some(block => block.id === config.block)) return
+    const stepId = section.stepIds?.[position.step], revision = doc.meta[PREVIEW_REVISION]
+    if (typeof stepId !== 'string' || typeof revision !== 'string') return
+    window.parent.postMessage({ type: 'presmium:block-preview-position', document: config.document, blockId: config.block, revision, sectionId: section.id, stepId, navigation }, origin)
+  }
+  const command = (event: MessageEvent) => {
+    if (!enabled || disposed || fatal || !origin || event.source !== window.parent || event.origin !== origin) return
+    playback.grant(event.data)
+    const value = toBlockPreviewCommand(event.data), revision = doc.meta[PREVIEW_REVISION]
+    if (!value || value.type !== 'presmium:block-preview-command' || value.document !== config.document || value.blockId !== config.block || typeof revision !== 'string' || value.revision !== revision) return
+    // A draft may name a step not in this older snapshot yet; its author can
+    // still pause this exact frame without adopting that target.
+    if (value.action === 'pause') {
+      localPosition = false
+      if (value.navigation) navigation = value.navigation
+      playback.enable()
+      presmiumService(PLAYBACK_CONTROL)?.pause()
+      const section = viewer.section(value.sectionId), step = section?.stepIds?.indexOf(value.stepId) ?? -1
+      const current = viewer.position.getSnapshot()
+      if (value.navigation && section && step >= 0 && [...irBlocks(section.blocks)].some(block => block.id === config.block)
+        && (current.section !== section.id || current.step !== step)) viewer.show({ section: section.id, step, boundary: 'end' })
+      return
+    }
+    const section = viewer.section(value.sectionId), step = section?.stepIds?.indexOf(value.stepId) ?? -1
+    if (!section || step < 0 || ![...irBlocks(section.blocks)].some(block => block.id === config.block)) return
+    navigation = value.navigation
+    // Acknowledging this frame's accepted position must not seek its active clock.
+    if (value.action === 'sync') {
+      const current = viewer.position.getSnapshot()
+      // Local input may have advanced again while this acknowledgement was in
+      // transit. Re-publish that actual cursor under the accepted generation.
+      if (current.section !== section.id || current.step !== step) sendPosition()
+      return
+    }
+    // An externally selected step may cause intermediate local React navigation.
+    // Only a new local author action or granted clock can publish a new target.
+    localPosition = false
+    playback.enable()
+    presmiumService(PLAYBACK_CONTROL)?.pause()
+    viewer.show({ section: section.id, step, boundary: value.at ?? 'end' })
+  }
+  const localIntent = (event: Event) => { if (event.isTrusted) localPosition = true }
+  document.addEventListener('pointerdown', localIntent, true)
+  document.addEventListener('keydown', localIntent, true)
+  window.addEventListener('message', command)
+  window.addEventListener('error', failed)
+  window.addEventListener('unhandledrejection', failed)
+  window.addEventListener('pagehide', () => { disposed = true; playback.dispose(); resize.disconnect(); mutations.disconnect(); stopErrors(); stopPosition?.(); document.removeEventListener('pointerdown', localIntent, true); document.removeEventListener('keydown', localIntent, true); window.removeEventListener('message', command); window.removeEventListener('error', failed); window.removeEventListener('unhandledrejection', failed) }, { once: true })
+  return {
+    async ready() {
+      await new Promise<void>(done => requestAnimationFrame(() => requestAnimationFrame(() => done())))
+      await presmiumService(STEP_CLOCK)?.settled()
+      if (disposed) return
+      enabled = true
+      send()
+      // The initial viewer position is only a loading default. Publish subsequent
+      // navigation, using the canonical step identity of this block's section.
+      stopPosition ??= viewer.position.subscribe(sendPosition)
+    },
+    failed() { enabled = true; failed() },
+  }
+}

package/src/app/document-modules.ts

@@ -0,0 +1,30 @@
+/**
+ * The modules of the document's own bundle that stand for plugins' document modules (`PresmiumNodePlugin.documentModules`):
+ * the viewer app is built once for all documents, so a plugin's import of such a module gets a proxy here, which reads
+ * the default export the current document's bundle gave.
+ */
+
+const current = new Map<string, unknown>()
+
+export function setDocumentModules(modules: Record<string, unknown>): void {
+  current.clear()
+  for (const [id, value] of Object.entries(modules)) current.set(id, value)
+}
+
+const target = (id: string): object => {
+  const value = current.get(id)
+  return value !== null && typeof value === 'object' ? value : {}
+}
+
+/** The default export of document module `id`, as the current document gives it (an object: its keys are read when used). */
+export function documentModule(id: string): unknown {
+  return new Proxy({}, {
+    get: (_, key) => Reflect.get(target(id), key),
+    has: (_, key) => Reflect.has(target(id), key),
+    ownKeys: () => Reflect.ownKeys(target(id)),
+    getOwnPropertyDescriptor: (_, key) => {
+      const descriptor = Reflect.getOwnPropertyDescriptor(target(id), key)
+      return descriptor && { ...descriptor, configurable: true }
+    },
+  })
+}

package/src/app/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+declare module 'virtual:presmium-app/registry' {
+  /** The browser modules of each installed plugin package, as the viewer app was built with them. */
+  export const packages: Record<string, {
+    /** The package's own name. */
+    name: string
+    components: Record<string, () => Promise<unknown>>
+    plugins: (() => Promise<unknown>)[]
+    viewers: (() => Promise<unknown>)[]
+    restartable: boolean
+  }>
+}