@lincyaw/web 1.0.0-rc.13 → 1.0.0-rc.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lincyaw/web",
-  "version": "1.0.0-rc.13",
+  "version": "1.0.0-rc.14",
   "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": {
@@ -24,6 +24,7 @@
   "exports": {
     "./domain": "./src/domain/index.ts",
     "./presmium": "./src/node/presmium.ts",
+    "./site": "./src/site/index.ts",
     "./slides": "./src/node/slides.ts",
     "./package.json": "./package.json"
   },
@@ -36,27 +37,28 @@
     "katex": "0.18.10",
     "launch-editor": "2.14.1",
     "minisearch": "7.2.0",
-    "send": "1.2.1",
-    "sitemap": "9.0.1",
-    "vite": "8.3.4",
+    "p-limit": "7.3.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "send": "1.2.1",
     "sharp": "0.35.5",
-    "@lincyaw/design": "1.0.0-rc.13"
+    "sitemap": "9.0.1",
+    "vite": "8.3.4",
+    "@lincyaw/design": "1.0.0-rc.14"
   },
   "peerDependencies": {
-    "@lincyaw/host": "^1.0.0-rc.13",
-    "@lincyaw/viewer": "^1.0.0-rc.13",
-    "@lincyaw/kernel": "^1.0.0-rc.13"
+    "@lincyaw/host": "^1.0.0-rc.14",
+    "@lincyaw/kernel": "^1.0.0-rc.14",
+    "@lincyaw/viewer": "^1.0.0-rc.14"
   },
   "devDependencies": {
     "@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.13",
-    "@lincyaw/kernel": "1.0.0-rc.13",
-    "@lincyaw/viewer": "1.0.0-rc.13",
-    "@lincyaw/host": "1.0.0-rc.13"
+    "@lincyaw/cli": "1.0.0-rc.14",
+    "@lincyaw/host": "1.0.0-rc.14",
+    "@lincyaw/viewer": "1.0.0-rc.14",
+    "@lincyaw/kernel": "1.0.0-rc.14"
   }
 }

package/src/app/main.ts

@@ -1,7 +1,7 @@
 import { currentLocale, OPERATIONS, pluginsOf, presmiumService, registerPresmiumPlugin, startHost, createStore, observe, runtimeRevision } from '@lincyaw/host'
 import { previewAppearance, reportStaleModule } from '@lincyaw/kernel'
 import type { IRDocument } from '@lincyaw/kernel'
-import { findView, syncViewerWithOperations } from '@lincyaw/viewer'
+import { findView, loadDocumentParts, syncViewerWithOperations } from '@lincyaw/viewer'
 import type { LiveUpdate } from '@lincyaw/viewer/domain'
 import { packages } from 'virtual:presmium-app/registry'
 import { APP_CONFIG_ELEMENT, parsePositionQuery, parsePrintQuery, UPDATE_EVENT, WEB_MESSAGES, withPositionQuery } from '../domain/index.ts'
@@ -96,6 +96,8 @@ async function bootDocument(): Promise<void> {
   let { revision, etag } = first
   setDocumentModules(bundle.documentModules ?? {})
   const doc = first.doc
+  // What of the viewer this document needs beyond the app's first part, as the server rendered it with.
+  await loadDocumentParts(doc)
   document.documentElement.lang = config.lang
   if (config.page === undefined) document.title = doc.meta.title
 

package/src/app/server.ts

@@ -1,5 +1,6 @@
 import type { IRDocument } from '@lincyaw/kernel'
 import { createStore } from '@lincyaw/host'
+import { loadDocumentParts } from '@lincyaw/viewer'
 import { renderToString } from 'react-dom/server'
 import type { AppConfig } from '../domain/index.ts'
 import { createPageApp } from './page-app.ts'
@@ -20,6 +21,7 @@ export interface RenderInput {
 }
 
 export async function render({ config, doc, components }: RenderInput): Promise<string> {
+  if (doc) await loadDocumentParts(doc)
   const { app } = createPageApp({
     config,
     doc,

package/src/client/preview-connect.ts

@@ -0,0 +1,124 @@
+import { componentErrors, componentErrorRevision, presmiumReport, presmiumService, PLAYBACK_CONTROL, PRODUCTION_PLAYBACK, createStore, runtimeRevision } from '@lincyaw/host'
+import type { NavigationPosition, PlaybackControl } from '@lincyaw/host'
+import { connectPreviewFrame, irBlocks, PREVIEW_REVISION, stepKeys, stepTrail } from '@lincyaw/kernel'
+import type { FollowAnchor, PreviewFrame, PreviewEvents } from '@lincyaw/kernel'
+import { findView, registryRevision } from '@lincyaw/viewer'
+import { createViewerNavigation } from './host.ts'
+import type { WebPreviewOptions, WebPreviewPage } from './preview-frame.ts'
+
+/** A page the workbench embeds, connected to it as its preview (`webPreview`, which loads this only then). */
+export function connectWebPreviewFrame(page: WebPreviewPage, options: WebPreviewOptions, events?: PreviewEvents): void {
+  const { viewer, dark } = page
+  const navigation = createViewerNavigation(viewer)
+  const pendingGo = createStore<Parameters<typeof navigation.go>[0] | undefined>(undefined)
+  // Preview ready can precede async viewer-plugin registration and the lecture list. Keep the latest requested view
+  // until it is available instead of losing a first switch to video while this window is still starting.
+  const applyPending = () => {
+    const destination = pendingGo.getSnapshot()
+    if (!destination) return
+    const view = destination.view && findView(destination.view)
+    if (destination.view && (!view || view.hidden)) return
+    pendingGo.set(undefined)
+    navigation.go(destination)
+  }
+  registryRevision.subscribe(applyPending)
+  pendingGo.subscribe(applyPending)
+  const revision = () => {
+    const value = viewer.doc.getSnapshot().meta[PREVIEW_REVISION]
+    return typeof value === 'string' ? value : undefined
+  }
+  const blockStep = (section: string, block: string) => {
+    const found = viewer.section(section)
+    return found ? [...irBlocks(found.blocks)].find(b => b.id === block)?.at : undefined
+  }
+  const frame: PreviewFrame | undefined = connectPreviewFrame({
+    renderer: options.renderer ?? 'web',
+    events,
+    ...viewer.options.confirmedRevision ? { confirmPresentation: (revision: string) => { viewer.options.confirmedRevision!.set(revision); frame?.moved() } } : {},
+    document: options.document,
+    origins: options.origins,
+    revision,
+    position() {
+      if (viewer.options.confirmedRevision && viewer.options.confirmedRevision.getSnapshot() !== revision()) return
+      const { section, step, trail, view } = navigation.position.getSnapshot() as NavigationPosition & FollowAnchor
+      return section === undefined ? undefined : { section, step, trail: trail ?? [], ...view ? { view } : {} }
+    },
+    go: ({ section, step, trail, view }) => { presmiumService(PLAYBACK_CONTROL)?.pause(); pendingGo.set({ slide: 0, step: step ?? 0, section, ...trail ? { trail } : {}, ...view ? { view } : {} }) },
+    reveal: ({ section, block }) => viewer.show({ section, step: (block && blockStep(section, block)) || 0 }),
+    setDark(value) {
+      dark.set(value)
+    },
+    setActive: page.setActive,
+    activityChanged: value => viewer.options.editingActive?.set(value),
+    pausePlayback: () => presmiumService(PLAYBACK_CONTROL)?.pause(),
+    async productionPlayback(command, signal) {
+      // The page's ready handshake can precede asynchronous browser-plugin setup.
+      if (!presmiumService(PRODUCTION_PLAYBACK) && !presmiumReport()) await new Promise<void>((resolve, reject) => {
+        const ready = () => {
+          if (!signal.aborted && !presmiumReport()) return
+          stop(); signal.removeEventListener('abort', ready)
+          signal.aborted ? reject(signal.reason ?? new DOMException('Playback cancelled', 'AbortError')) : resolve()
+        }
+        const stop = runtimeRevision.subscribe(ready)
+        signal.addEventListener('abort', ready, { once: true }); ready()
+      })
+      signal.throwIfAborted()
+      const service = presmiumService(PRODUCTION_PLAYBACK)
+      if (!service || service.version !== 1) throw new Error('production-playback-unavailable')
+      return service.control(command, signal)
+    },
+    subscribeProductionPlayback(listener) {
+      let current = presmiumService(PRODUCTION_PLAYBACK), release = () => {}
+      const attach = () => {
+        const next = presmiumService(PRODUCTION_PLAYBACK)
+        release(); current = next
+        release = current?.state.subscribe(() => listener(current?.state.getSnapshot())) ?? (() => {})
+        listener(current?.state.getSnapshot())
+      }
+      const stop = runtimeRevision.subscribe(attach)
+      attach()
+      return () => { stop(); release() }
+    },
+    setPlaybackGate(authorize) {
+      let current: PlaybackControl | undefined
+      let release = () => {}
+      const attach = () => {
+        const next = presmiumService(PLAYBACK_CONTROL)
+        if (next === current) return
+        release()
+        current = next
+        release = current?.setGate(authorize) ?? (() => {})
+      }
+      const stop = runtimeRevision.subscribe(attach)
+      attach()
+      return () => { stop(); release() }
+    },
+    stepOf({ section, block }) {
+      const step = blockStep(section, block)
+      const found = viewer.section(section)
+      return step === undefined || !found ? undefined : { step, trail: stepTrail(stepKeys(found), step) }
+    },
+  })
+  if (!frame) return
+  navigation.position.subscribe(() => frame.moved())
+  viewer.doc.subscribe(() => { presmiumService(PLAYBACK_CONTROL)?.pause(); requestAnimationFrame(() => frame.updated()) })
+  watchProblems(frame)
+}
+
+function watchProblems(frame: PreviewFrame): void {
+  let told = new Map<string, { level: 'error' | 'warning', plugin: string, message: string }>()
+  const report = () => {
+    const plugins = presmiumReport()?.plugins ?? [], errors = componentErrors()
+    const problems = [
+      ...plugins.filter(p => p.status === 'failed' || p.status === 'disabled').map(p => ({ level: p.status === 'failed' ? 'error' as const : 'warning' as const, plugin: p.id, message: p.reason ?? p.status })),
+      ...errors.map(e => ({ level: 'error' as const, plugin: e.component, message: e.message })),
+    ]
+    const current = new Map(problems.map(problem => [JSON.stringify(problem), problem]))
+    for (const [key, problem] of told) if (!current.has(key)) frame.report({ ...problem, resolved: true })
+    for (const [key, problem] of current) if (!told.has(key)) frame.report(problem)
+    told = current
+  }
+  runtimeRevision.subscribe(report)
+  componentErrorRevision.subscribe(report)
+  report()
+}

package/src/client/preview-frame.ts

@@ -1,11 +1,7 @@
-import { componentErrors, componentErrorRevision, presmiumReport, presmiumService, PLAYBACK_CONTROL, PRODUCTION_PLAYBACK, createStore, observe, runtimeRevision } from '@lincyaw/host'
-import type { NavigationPosition, PlaybackControl } from '@lincyaw/host'
-import { connectPreviewFrame, createPreviewEvents, irBlocks, isPreviewActive, isPreviewEmbedded, PREVIEW_REVISION, stepKeys, stepTrail } from '@lincyaw/kernel'
-import type { FollowAnchor, PreviewFrame, PreviewEventSubscription, PreviewEvents } from '@lincyaw/kernel'
+import { createPreviewEvents, isPreviewActive, isPreviewEmbedded, reportStaleModule } from '@lincyaw/kernel'
+import type { PreviewEventSubscription } from '@lincyaw/kernel'
 import type { Viewer } from '@lincyaw/viewer'
-import { findView, registryRevision } from '@lincyaw/viewer'
 import type { Store } from '@lincyaw/host'
-import { createViewerNavigation } from './host.ts'
 
 export interface WebPreviewOptions {
   origins: string[]
@@ -32,121 +28,14 @@ export interface WebPreview {
 
 export function webPreview(options: WebPreviewOptions): WebPreview {
   const events = createPreviewEvents(options.origins, options.document)
-  return { active: isPreviewActive(), embedded: isPreviewEmbedded(), ...events ? { events: events.subscribe } : {}, connect: page => connectWebPreviewFrame(page, options, events) }
-}
-
-function connectWebPreviewFrame(page: WebPreviewPage, options: WebPreviewOptions, events?: PreviewEvents): void {
-  const { viewer, dark } = page
-  const navigation = createViewerNavigation(viewer)
-  const pendingGo = createStore<Parameters<typeof navigation.go>[0] | undefined>(undefined)
-  // Preview ready can precede async viewer-plugin registration and the lecture list. Keep the latest requested view
-  // until it is available instead of losing a first switch to video while this window is still starting.
-  const applyPending = () => {
-    const destination = pendingGo.getSnapshot()
-    if (!destination) return
-    const view = destination.view && findView(destination.view)
-    if (destination.view && (!view || view.hidden)) return
-    pendingGo.set(undefined)
-    navigation.go(destination)
-  }
-  registryRevision.subscribe(applyPending)
-  pendingGo.subscribe(applyPending)
-  const revision = () => {
-    const value = viewer.doc.getSnapshot().meta[PREVIEW_REVISION]
-    return typeof value === 'string' ? value : undefined
-  }
-  const blockStep = (section: string, block: string) => {
-    const found = viewer.section(section)
-    return found ? [...irBlocks(found.blocks)].find(b => b.id === block)?.at : undefined
-  }
-  const frame: PreviewFrame | undefined = connectPreviewFrame({
-    renderer: options.renderer ?? 'web',
-    events,
-    ...viewer.options.confirmedRevision ? { confirmPresentation: (revision: string) => { viewer.options.confirmedRevision!.set(revision); frame?.moved() } } : {},
-    document: options.document,
-    origins: options.origins,
-    revision,
-    position() {
-      if (viewer.options.confirmedRevision && viewer.options.confirmedRevision.getSnapshot() !== revision()) return
-      const { section, step, trail, view } = navigation.position.getSnapshot() as NavigationPosition & FollowAnchor
-      return section === undefined ? undefined : { section, step, trail: trail ?? [], ...view ? { view } : {} }
-    },
-    go: ({ section, step, trail, view }) => { presmiumService(PLAYBACK_CONTROL)?.pause(); pendingGo.set({ slide: 0, step: step ?? 0, section, ...trail ? { trail } : {}, ...view ? { view } : {} }) },
-    reveal: ({ section, block }) => viewer.show({ section, step: (block && blockStep(section, block)) || 0 }),
-    setDark(value) {
-      dark.set(value)
-    },
-    setActive: page.setActive,
-    activityChanged: value => viewer.options.editingActive?.set(value),
-    pausePlayback: () => presmiumService(PLAYBACK_CONTROL)?.pause(),
-    async productionPlayback(command, signal) {
-      // The page's ready handshake can precede asynchronous browser-plugin setup.
-      if (!presmiumService(PRODUCTION_PLAYBACK) && !presmiumReport()) await new Promise<void>((resolve, reject) => {
-        const ready = () => {
-          if (!signal.aborted && !presmiumReport()) return
-          stop(); signal.removeEventListener('abort', ready)
-          signal.aborted ? reject(signal.reason ?? new DOMException('Playback cancelled', 'AbortError')) : resolve()
-        }
-        const stop = runtimeRevision.subscribe(ready)
-        signal.addEventListener('abort', ready, { once: true }); ready()
-      })
-      signal.throwIfAborted()
-      const service = presmiumService(PRODUCTION_PLAYBACK)
-      if (!service || service.version !== 1) throw new Error('production-playback-unavailable')
-      return service.control(command, signal)
-    },
-    subscribeProductionPlayback(listener) {
-      let current = presmiumService(PRODUCTION_PLAYBACK), release = () => {}
-      const attach = () => {
-        const next = presmiumService(PRODUCTION_PLAYBACK)
-        release(); current = next
-        release = current?.state.subscribe(() => listener(current?.state.getSnapshot())) ?? (() => {})
-        listener(current?.state.getSnapshot())
-      }
-      const stop = runtimeRevision.subscribe(attach)
-      attach()
-      return () => { stop(); release() }
-    },
-    setPlaybackGate(authorize) {
-      let current: PlaybackControl | undefined
-      let release = () => {}
-      const attach = () => {
-        const next = presmiumService(PLAYBACK_CONTROL)
-        if (next === current) return
-        release()
-        current = next
-        release = current?.setGate(authorize) ?? (() => {})
-      }
-      const stop = runtimeRevision.subscribe(attach)
-      attach()
-      return () => { stop(); release() }
-    },
-    stepOf({ section, block }) {
-      const step = blockStep(section, block)
-      const found = viewer.section(section)
-      return step === undefined || !found ? undefined : { step, trail: stepTrail(stepKeys(found), step) }
-    },
-  })
-  if (!frame) return
-  navigation.position.subscribe(() => frame.moved())
-  viewer.doc.subscribe(() => { presmiumService(PLAYBACK_CONTROL)?.pause(); requestAnimationFrame(() => frame.updated()) })
-  watchProblems(frame)
-}
-
-function watchProblems(frame: PreviewFrame): void {
-  let told = new Map<string, { level: 'error' | 'warning', plugin: string, message: string }>()
-  const report = () => {
-    const plugins = presmiumReport()?.plugins ?? [], errors = componentErrors()
-    const problems = [
-      ...plugins.filter(p => p.status === 'failed' || p.status === 'disabled').map(p => ({ level: p.status === 'failed' ? 'error' as const : 'warning' as const, plugin: p.id, message: p.reason ?? p.status })),
-      ...errors.map(e => ({ level: 'error' as const, plugin: e.component, message: e.message })),
-    ]
-    const current = new Map(problems.map(problem => [JSON.stringify(problem), problem]))
-    for (const [key, problem] of told) if (!current.has(key)) frame.report({ ...problem, resolved: true })
-    for (const [key, problem] of current) if (!told.has(key)) frame.report(problem)
-    told = current
+  const embedded = isPreviewEmbedded()
+  // The preview protocol loads only in a page the workbench embeds (`preview-connect.ts`).
+  const connect = (page: WebPreviewPage) => {
+    if (!embedded || options.origins.length === 0) return
+    void import('./preview-connect.ts').then(m => m.connectWebPreviewFrame(page, options, events)).catch((error: unknown) => {
+      console.error('[presmium] the preview did not connect', error)
+      reportStaleModule(error)
+    })
   }
-  runtimeRevision.subscribe(report)
-  componentErrorRevision.subscribe(report)
-  report()
+  return { active: isPreviewActive(), embedded, ...events ? { events: events.subscribe } : {}, connect }
 }

package/src/domain/landing.ts

@@ -14,7 +14,8 @@ export type SiteLandingSection =
 /** Website content is independent of teaching documents and may reference their published collection. */
 export interface SiteLandingPage { schemaVersion: 1, title: string, description?: string, hero?: SiteHero, sections: SiteLandingSection[] }
 
-export interface SiteContentDocument { id: string, title: string, href: string, description?: string, lang?: string, tags?: string[], pages?: number }
+/** A document of the site for a template: its pages at `href`, and its presentation at `slides` when it has one. */
+export interface SiteContentDocument { id: string, title: string, href: string, slides?: string, description?: string, lang?: string, tags?: string[], pages?: number }
 export interface SiteContent { schemaVersion: 1, title: string, base: string, lang: string, documents: SiteContentDocument[], theme?: { name: string, stylesheets: string[] } }
 export const SITE_CONTENT_ELEMENT = 'presmium-site-data'
 

package/src/domain/workspace-home.ts

@@ -5,6 +5,8 @@ export interface HomeDocument {
   lang?: string
   tags?: string[]
   href: string
+  /** Its presentation, below its pages, when it asks for one (`renderers.slides`). */
+  slides?: string
   description?: string
   pages?: number
   problems?: { errors: number, warnings: number }

package/src/node/document-bundle.ts

@@ -5,6 +5,7 @@ import { pathToFileURL } from 'node:url'
 import { irBlocks } from '@lincyaw/kernel'
 import type { IRDocument, PresmiumNodePlugin } from '@lincyaw/kernel'
 import { collectBrowserModules, deckPackage, emptyClientModules, isRestartablePackage } from './client-modules.ts'
+import { imageCache, ImageEncoder } from './images.ts'
 import { quietDirectives } from './viewer-app.ts'
 
 /**
@@ -17,6 +18,8 @@ const BUNDLE_MANIFEST = 'bundle.json'
 export const BUNDLE_ENTRY = 'document.js'
 const DOCUMENT_MODULE = '\0presmium-document-bundle:'
 const KEEP = 3
+// Changes when a bundle built before would differ now from one built of the same code: 2 imports images as WebP.
+const FORMAT = 2
 
 export interface DocumentBundleInput {
   deckDir: string
@@ -55,6 +58,29 @@ export interface DocumentBundle {
   restartable: boolean
   /** The names of the document's own components. */
   components: string[]
+  /**
+   * What the entry loads, as its build records it: its chunks, those it may import later (scenes), by path in the
+   * bundle, and the app's shared modules among their imports, by specifier. A page preloads them with the entry.
+   */
+  loads: { files: string[], shared: string[] }
+}
+
+interface OutputFile { type: string, fileName: string, isEntry?: boolean, imports?: string[], dynamicImports?: string[], moduleIds?: string[] }
+
+/** The chunks an entry imports, at once or later, and the external modules among their imports. */
+function entryLoads(bundle: Record<string, OutputFile>, externals: ReadonlySet<string>): DocumentBundle['loads'] {
+  const byName = new Map(Object.values(bundle).map(file => [file.fileName, file]))
+  const files = new Set<string>(), shared = new Set<string>()
+  const visit = (name: string) => {
+    if (externals.has(name)) shared.add(name)
+    const file = byName.get(name)
+    if (!file || files.has(name)) return
+    files.add(name)
+    for (const next of [...file.imports ?? [], ...file.dynamicImports ?? []]) visit(next)
+  }
+  for (const file of byName.values()) if (file.isEntry) visit(file.fileName)
+  files.delete(BUNDLE_ENTRY)
+  return { files: [...files], shared: [...shared] }
 }
 
 interface DocumentCode {
@@ -101,14 +127,14 @@ ${ids.map((id, i) => `  ${JSON.stringify(id)}: module${i},`).join('\n')}
 }
 export const restartable = ${modules.restartable}
 `
-  const key = createHash('sha256').update(JSON.stringify([input.externals.toSorted(), entry, generated])).digest('hex').slice(0, 16)
+  const key = createHash('sha256').update(JSON.stringify([FORMAT, input.externals.toSorted(), entry, generated])).digest('hex').slice(0, 16)
   return { key, entry, generated, restartable: modules.restartable, components: [...components.keys()] }
 }
 
 function readBundle(dir: string): DocumentBundle | undefined {
   try {
     const bundle = JSON.parse(readFileSync(join(dir, BUNDLE_MANIFEST), 'utf8')) as DocumentBundle
-    return Object.entries(bundle.inputs).every(([file, known]) => stamp(file) === known) ? { ...bundle, components: bundle.components ?? [], dir } : undefined
+    return Object.entries(bundle.inputs).every(([file, known]) => stamp(file) === known) && bundle.loads ? { ...bundle, components: bundle.components ?? [], dir } : undefined
   } catch {
     return undefined
   }
@@ -155,6 +181,7 @@ export async function buildDocumentBundle(input: DocumentBundleInput): Promise<D
   const { generated } = code
   const externals = new Set(input.externals)
   const inputs: Record<string, string> = {}
+  let loads: DocumentBundle['loads'] = { files: [], shared: [] }
   const { build } = await import('vite')
   await build({
     configFile: false,
@@ -165,6 +192,7 @@ export async function buildDocumentBundle(input: DocumentBundleInput): Promise<D
     esbuild: { jsx: 'automatic' },
     publicDir: false,
     plugins: [
+      new ImageEncoder(imageCache(input.workspaceRoot)).vitePlugin(),
       {
         name: 'presmium:document-bundle',
         // Before Vite's own resolution: the app's modules stay imports by name.
@@ -179,7 +207,8 @@ export async function buildDocumentBundle(input: DocumentBundleInput): Promise<D
         load(id: string) {
           return id.startsWith(DOCUMENT_MODULE) ? generated[id.slice(DOCUMENT_MODULE.length)] : undefined
         },
-        generateBundle(_: unknown, bundle: Record<string, { type: string, moduleIds?: string[] }>) {
+        generateBundle(_: unknown, bundle: Record<string, OutputFile>) {
+          loads = entryLoads(bundle, externals)
           for (const chunk of Object.values(bundle)) {
             for (const id of chunk.moduleIds ?? []) {
               const file = id.replace(/[?#].*$/s, '')
@@ -215,7 +244,7 @@ export async function buildDocumentBundle(input: DocumentBundleInput): Promise<D
   const content = createHash('sha256').update(readFileSync(join(work, 'out', BUNDLE_ENTRY))).digest('hex').slice(0, 8)
   const name = `${code.key}-${content}`
   const out = join(input.outDir, name)
-  const bundle: DocumentBundle = { key: name, dir: out, inputs, restartable: code.restartable, components: code.components }
+  const bundle: DocumentBundle = { key: name, dir: out, inputs, restartable: code.restartable, components: code.components, loads }
   writeFileSync(join(work, 'out', BUNDLE_MANIFEST), `${JSON.stringify(bundle, null, 2)}\n`)
   rmSync(out, { recursive: true, force: true })
   renameSync(join(work, 'out'), out)

package/src/node/images.ts

@@ -0,0 +1,104 @@
+import { createHash } from 'node:crypto'
+import { existsSync, mkdirSync, readFileSync, renameSync, statSync, writeFileSync } from 'node:fs'
+import { basename, extname, join } from 'node:path'
+import type { LocalAsset } from '@lincyaw/kernel'
+import { copyPublished, threadBudget } from '@lincyaw/kernel/node'
+import pLimit from 'p-limit'
+import sharp from 'sharp'
+
+/**
+ * Raster images a site publishes are encoded again as WebP and no wider than any page shows them: a paper's PNG
+ * figures and photographs are the largest files most pages load. The name is decided where the image is published (a
+ * document's media, an image a scene imports), so every reference is written with it; an encoding is kept under the
+ * build's work directory by the image's content and made once. Files the author publishes as they are (`public/`) and
+ * the images a page's head names for link previews keep their format.
+ */
+
+const RASTER = new Set(['.png', '.jpg', '.jpeg'])
+// Below this an image is small enough that a second encoding gains little.
+const MIN_BYTES = 48 * 1024
+// The widest an image is drawn: a full-width figure on a large screen at twice its pixels.
+const MAX_WIDTH = 2400
+
+export interface EncodedImages {
+  images: number
+  saved: number
+}
+
+function encodable(file: string): boolean {
+  if (!RASTER.has(extname(file).toLowerCase())) return false
+  const stat = statSync(file, { throwIfNoEntry: false })
+  return stat !== undefined && stat.isFile() && stat.size >= MIN_BYTES
+}
+
+/** Where a workspace keeps its encoded images, by their content. */
+export const imageCache = (workspaceRoot: string) => join(workspaceRoot, '.presmium', 'images')
+
+const webpName = (name: string) => `${basename(name, extname(name))}.webp`
+
+export class ImageEncoder {
+  readonly #cacheDir: string
+  readonly #limit = pLimit(threadBudget('background'))
+  readonly #pending: Promise<void>[] = []
+  #encoded: EncodedImages = { images: 0, saved: 0 }
+
+  constructor(cacheDir: string) {
+    this.#cacheDir = cacheDir
+  }
+
+  /** The image as WebP, from the cache when it was encoded before. */
+  encode(file: string): Promise<Buffer> {
+    return this.#limit(async () => {
+      const source = readFileSync(file)
+      const cached = join(this.#cacheDir, `${createHash('sha256').update(source).digest('hex')}.webp`)
+      if (existsSync(cached)) return readFileSync(cached)
+      const image = sharp(source).rotate().resize({ width: MAX_WIDTH, withoutEnlargement: true })
+      // Figures and screenshots keep their sharp edges (near-lossless); photographs take ordinary lossy compression.
+      const bytes = await (extname(file).toLowerCase() === '.png' ? image.webp({ nearLossless: true, quality: 75, effort: 5 }) : image.webp({ quality: 80, effort: 5 })).toBuffer()
+      mkdirSync(this.#cacheDir, { recursive: true })
+      writeFileSync(`${cached}.${process.pid}`, bytes)
+      renameSync(`${cached}.${process.pid}`, cached)
+      this.#encoded = { images: this.#encoded.images + 1, saved: this.#encoded.saved + Math.max(0, source.length - bytes.length) }
+      return bytes
+    })
+  }
+
+  /** Publishes a local file into `dir`: a raster image under its WebP name, written once its encoding is done. */
+  publish(asset: LocalAsset, dir: string): LocalAsset {
+    if (asset.directory || !encodable(asset.file)) {
+      copyPublished(asset, dir)
+      return asset
+    }
+    const published = { ...asset, name: webpName(asset.name) }
+    const target = join(dir, published.name)
+    if (!existsSync(target)) {
+      this.#pending.push(this.encode(asset.file).then((bytes) => {
+        mkdirSync(dir, { recursive: true })
+        writeFileSync(target, bytes)
+      }))
+    }
+    return published
+  }
+
+  /** Waits for the images published so far; what this encoder has encoded (not taken from its cache). */
+  async done(): Promise<EncodedImages> {
+    while (this.#pending.length > 0) await Promise.all(this.#pending.splice(0))
+    return this.#encoded
+  }
+
+  /** A Vite plugin: a raster image a module imports is emitted as WebP, and the import is its URL. */
+  vitePlugin() {
+    const encoder = this
+    return {
+      name: 'presmium:webp-images',
+      enforce: 'pre' as const,
+      load: async function (this: { emitFile(file: { type: 'asset', name: string, source: Uint8Array }): string }, id: string) {
+        // An image imported for its URL, plainly or with `?url`; other queries (`?raw`, `?inline`) want its bytes.
+        const file = id.replace(/\?url$/, '')
+        if (/[?#]/.test(file) || !encodable(file)) return undefined
+        const reference = this.emitFile({ type: 'asset', name: webpName(file), source: await encoder.encode(file) })
+        return `export default import.meta.ROLLUP_FILE_URL_${reference}`
+      },
+    }
+  }
+}

package/src/node/landing-template.ts

@@ -3,6 +3,7 @@ import { basename, dirname, join } from 'node:path'
 import { mapHtmlUrls } from '@lincyaw/kernel'
 import { build } from 'vite'
 import { SITE_CONTENT_ELEMENT } from '../domain/index.ts'
+import { imageCache, ImageEncoder } from './images.ts'
 import type { SiteContent } from '../domain/index.ts'
 
 /** A website template is an ordinary Vite HTML entry, with its own CSS and modules. */
@@ -15,9 +16,14 @@ export async function buildLandingTemplate(file: string, workDir: string, base:
     base,
     publicDir: join(workspaceRoot, 'public'),
     logLevel: 'silent',
-    plugins: [{
+    plugins: [new ImageEncoder(imageCache(workspaceRoot)).vitePlugin(), {
       name: 'presmium-site-content',
       transformIndexHtml: { order: 'pre', handler: () => [{ tag: 'script', attrs: { id: SITE_CONTENT_ELEMENT, type: 'application/json' }, children: data, injectTo: 'head' }] },
+    }, {
+      // The theme's stylesheets come first in the head, before the template's own, which can build on them; added after
+      // the build reads the page, since they are the site's files and not the template's.
+      name: 'presmium-site-theme',
+      transformIndexHtml: { order: 'post', handler: () => (content.theme?.stylesheets ?? []).map(href => ({ tag: 'link', attrs: { rel: 'stylesheet', href }, injectTo: 'head-prepend' as const })) },
     }],
     build: { outDir: dir, emptyOutDir: true, copyPublicDir: false, assetsDir: '_landing/assets', rollupOptions: { input: file } },
   })

package/src/node/landing.ts

@@ -78,14 +78,14 @@ export function publishLanding(landing: Extract<IndependentLanding, { kind: 'pag
 
 /** The public content collection available to a free-form HTML template. */
 export function siteContent(site: SiteSpec, base: string, lang: string, documents: HomeDocument[]): SiteContent {
-  // A template may link the workspace theme's stylesheets and mark its root with `data-pm-site-theme-name`.
+  // The template's page links the workspace theme's stylesheets; it marks its root with `data-pm-site-theme-name`.
   const { name, stylesheets } = siteTheme(shellOptions(site), lang)
   return {
     schemaVersion: 1,
     title: siteTitle(site, lang),
     base,
     lang,
-    documents: documents.map(({ dir, title, href, description, lang, tags, pages }) => ({ id: dir, title, href, description, lang, tags, pages })),
+    documents: documents.map(({ dir, title, href, slides, description, lang, tags, pages }) => ({ id: dir, title, href, slides, description, lang, tags, pages })),
     ...name ? { theme: { name, stylesheets: stylesheets ?? [] } } : {},
   }
 }

package/src/node/publish.ts

@@ -5,6 +5,7 @@ import { irBlocks, mapHtmlUrls, NON_FILE_URL, publishedUrl, withPublishedAssets
 import type { DocumentLink, IRBlock, IRDocument, IRSection, LocalAsset, MdastNode, RenderContext, SourcePos } from '@lincyaw/kernel'
 import { copyPublished, fileVersion } from '@lincyaw/kernel/node'
 import katex from 'katex'
+import type { ImageEncoder } from './images.ts'
 
 export const MEDIA = 'media'
 
@@ -96,7 +97,16 @@ export class PublicationCache {
   }
 }
 
-export function publishedDocument(doc: IRDocument, ctx: RenderContext, publicDir: string, base: string, documentPage?: DocumentPage, cache?: PublicationCache): IRDocument {
+export interface PublishOptions {
+  /** Where a link to another document of the site leads. */
+  documentPage?: DocumentPage
+  /** The sections published before, kept by a server that publishes the document again on each change. */
+  cache?: PublicationCache
+  /** Encodes the raster images a build publishes (none while a server previews the document). */
+  images?: ImageEncoder
+}
+
+export function publishedDocument(doc: IRDocument, ctx: RenderContext, publicDir: string, base: string, { documentPage, cache, images }: PublishOptions = {}): IRDocument {
   const { deckDir } = ctx
   const copy: IRDocument = structuredClone(cache ? { ...doc, sections: [] } : doc)
   const media = join(publicDir, MEDIA)
@@ -108,8 +118,9 @@ export function publishedDocument(doc: IRDocument, ctx: RenderContext, publicDir
     if (linked) return documentPage(linked)
     const asset = localAsset(ctx, source, url)
     if (!asset) return undefined
-    copyPublished(asset, media)
-    return publishedUrl(asset, url, { prefix: `${base}${MEDIA}/` })
+    const published = images ? images.publish(asset, media) : asset
+    if (!images) copyPublished(asset, media)
+    return publishedUrl(published, url, { prefix: `${base}${MEDIA}/` })
   }
   const mdast = (node: MdastNode, source: SourcePos) => {
     if (LINKED.has(node.type) && typeof node.url === 'string') node.url = publish(node.url, source) ?? node.url

package/src/node/site-build.ts

@@ -1,5 +1,5 @@
-import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
-import { basename, dirname, join, resolve } from 'node:path'
+import { cpSync, mkdirSync, rmSync, writeFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
 import { Readable } from 'node:stream'
 import { pathToFileURL } from 'node:url'
 import { ABSOLUTE_URL, errorMessage, isRecord } from '@lincyaw/kernel'
@@ -14,14 +14,15 @@ import { writeServiceWorker } from './offline.ts'
 import { publishedDocument, publishedFile } from './publish.ts'
 import { APP_DIR, CODE_DIR, contentKey, copyApp, copyPublic, copyRuntimeAssets, runtimeAssets, searchIndex } from './site-files.ts'
 import { documentBase, documentPage, documentSiteConfig, homeDocument, homeDocuments, isSingle, landingConfig, landingDocument, languageLabel, LIST_PAGE, siteLanguage, siteLanguages, siteNeighbours, siteShellBelow, siteTitle, sitemapPages, translationOf } from './site-model.ts'
-import { optimizeImages } from './optimize.ts'
+import { imageCache, ImageEncoder } from './images.ts'
+import type { EncodedImages } from './images.ts'
 import { publishedSite } from './site-assets.ts'
 import { themedSite } from './site-theme.ts'
 import { loadLanding, publishLanding, siteContent } from './landing.ts'
 import { buildLandingTemplate, writeLandingTemplate } from './landing-template.ts'
 import { pageHtml, redirectHtml } from './site-page.ts'
 import type { MetaTag } from './site-page.ts'
-import { appEntry, appPlugin, buildViewerApp, buildViewerServer, viewerAppCache } from './viewer-app.ts'
+import { appEntry, appModuleImports, appPlugin, buildViewerApp, buildViewerServer, viewerAppCache } from './viewer-app.ts'
 import type { AppPlugin, ViewerApp } from './viewer-app.ts'
 
 /**
@@ -101,7 +102,9 @@ async function prepareApp(ctx: RenderContext, documents: readonly BuiltDocument[
   const server = await import(pathToFileURL(await buildViewerServer(app, [...plugins.values()])).href) as ServerRender
   ctx.log?.(`the viewer app is ready in ${((Date.now() - started) / 1000).toFixed(1)} s`)
   const key = copyApp(app, join(ctx.outDir, APP_DIR))
-  return { app, appDir: join(ctx.outDir, APP_DIR, key), appUrl: `${ctx.base}${APP_DIR}/${key}/`, server, plugins }
+  // A presentation built as part of a site names the app where the site keeps it (`appBase`); the site moves it there.
+  const appBase = typeof ctx.config.appBase === 'string' ? ctx.config.appBase : ctx.base
+  return { app, appDir: join(ctx.outDir, APP_DIR, key), appUrl: `${appBase}${APP_DIR}/${key}/`, server, plugins }
 }
 
 async function renderPage(built: Built, file: string, config: AppConfig, title: string, meta: MetaTag[], doc: IRDocument | undefined, components: string[]): Promise<void> {
@@ -111,7 +114,7 @@ async function renderPage(built: Built, file: string, config: AppConfig, title:
 }
 
 /** A document's files beside its pages: its own code, its plugins' run-time files, its `public/`, the fonts' license. */
-async function documentFiles(ctx: RenderContext, built: Built, entry: BuiltDocument): Promise<{ code?: string, components: string[] }> {
+async function documentFiles(ctx: RenderContext, built: Built, entry: BuiltDocument): Promise<{ code?: string, components: string[], loads?: DocumentBundle['loads'] }> {
   const { dir, ctx: own } = entry
   const out = own.outDir
   // The document's own code, built to import the app's modules by name.
@@ -131,19 +134,19 @@ async function documentFiles(ctx: RenderContext, built: Built, entry: BuiltDocum
   mkdirSync(dirname(join(out, FONT_LICENSE)), { recursive: true })
   writeFileSync(join(out, FONT_LICENSE), fontLicense(import.meta.url))
   const components = [...new Set([...own.plugins.flatMap(name => Object.keys(built.plugins.get(name)?.components ?? {})), ...bundle?.components ?? []])]
-  return { ...code ? { code } : {}, components }
+  return { ...code ? { code, loads: bundle.loads } : {}, components }
 }
 
-async function buildDocumentPages(site: SiteSpec, ctx: RenderContext, built: Built, entry: BuiltDocument, docs: ReadonlyMap<string, IRDocument>, workspace: boolean): Promise<void> {
+async function buildDocumentPages(site: SiteSpec, ctx: RenderContext, built: Built, entry: BuiltDocument, docs: ReadonlyMap<string, IRDocument>, workspace: boolean, images: ImageEncoder): Promise<void> {
   const { dir, doc, ctx: own } = entry
   const out = own.outDir
   const base = documentBase(ctx.base, dir)
   mkdirSync(out, { recursive: true })
   const linked = workspace ? documentPage(site, ctx.base, docs) : undefined
-  const published = publishedDocument(doc, own, out, base, linked)
+  const published = publishedDocument(doc, own, out, base, { documentPage: linked, images })
   const pages = webPages(published)
   const translations = entry.translations.map(({ lang, doc: translated }) => {
-    const shown = publishedDocument(translated, own, out, base, linked)
+    const shown = publishedDocument(translated, own, out, base, { documentPage: linked, images })
     return { lang, doc: shown, pages: translationPages(shown, pages) }
   })
   const lang = doc.meta.lang ?? own.lang ?? 'zh-CN'
@@ -185,7 +188,10 @@ async function buildDocumentPages(site: SiteSpec, ctx: RenderContext, built: Bui
     }
     for (const { path, section } of chapterRedirects(published)) writeFileSync(join(out, locale.prefix, `${path}.html`), chapterRedirect(section))
   }
-  if (offline) writeServiceWorker(out, base, { dir: built.appDir, url: built.appUrl })
+  if (!offline) return
+  // The service worker lists the document's files, its images among them.
+  await images.done()
+  writeServiceWorker(out, base, { dir: built.appDir, url: built.appUrl })
 }
 
 /** The page a chapter used to have: it goes on to the chapter's section on the document's page. */
@@ -254,13 +260,14 @@ export async function buildSite(site: SiteSpec, ctx: RenderContext, documents: r
   if (workspace) copyPublic(ctx.workspaceRoot, ctx.outDir)
   site = publishedSite(site, ctx)
   const built = await prepareApp(ctx, documents)
+  const images = new ImageEncoder(imageCache(ctx.workspaceRoot))
   // Also allow publishing from a branch without Jekyll filtering the viewer's _app and _code directories.
   writeFileSync(join(ctx.outDir, '.nojekyll'), '')
   const docs = new Map(documents.map(entry => [entry.dir, entry.doc] as const))
   if (workspace && ctx.config.home !== false) await buildHome(site, ctx, built, docs)
   for (const entry of documents) {
     try {
-      await buildDocumentPages(site, ctx, built, entry, docs, workspace)
+      await buildDocumentPages(site, ctx, built, entry, docs, workspace, images)
     } catch (error) {
       throw new Error(workspace ? `document ${entry.dir || '.'}: ${errorMessage(error)}` : errorMessage(error))
     }
@@ -275,36 +282,24 @@ export async function buildSite(site: SiteSpec, ctx: RenderContext, documents: r
     ])
     await writeSitemap(join(ctx.outDir, 'sitemap.xml'), sitemap.hostname, ctx.base, pages)
   }
-  await reportOptimized(ctx, await optimizeImages(ctx.outDir))
+  reportEncoded(ctx, await images.done())
 }
 
-async function reportOptimized(ctx: RenderContext, { images, saved }: { images: number, saved: number }): Promise<void> {
+function reportEncoded(ctx: RenderContext, { images, saved }: EncodedImages): void {
   if (images > 0) ctx.log?.(`${images} images encoded as WebP, ${Math.round(saved / 1024)} KB smaller`)
 }
 
-/** The animation libraries a scene engine loads when its first scene is made, by the start of their file names. */
-const SCENE_LIBRARIES: Record<string, string> = { gsapScene: 'gsap', animeScene: 'anime', motionScene: 'motion', threeScene: 'three.module', d3Scene: 'd3', remotionScene: 'remotion' }
-
 /**
- * What a presentation will load to draw its first scene, all known at build time: the document's chunks, the shared
- * modules they import (`@lincyaw/addon-motion/scene`) and the animation library their engine loads. Preloaded with the
- * app, they arrive together instead of each after the one that names it.
+ * What a presentation will load to draw its first scenes, all known at build time: the document's chunks; the app's
+ * shared modules they import (`@lincyaw/addon-motion/scene`) and the browser and viewer modules of the presentation's
+ * plugins, with what those import at once. Preloaded with the app, they arrive together instead of each after the one
+ * that names it.
  */
-function scenePreloads(codeDir: string, codeUrl: string, built: Built): string[] {
-  const files = [join(codeDir, BUNDLE_ENTRY), ...existsSync(join(codeDir, 'chunks')) ? readdirSync(join(codeDir, 'chunks')).filter(file => file.endsWith('.js')).map(file => join(codeDir, 'chunks', file)) : []]
-  const text = files.filter(file => existsSync(file)).map(file => readFileSync(file, 'utf8')).join('\n')
-  const urls = files.slice(1).map(file => `${codeUrl}chunks/${basename(file)}`)
+function presentationPreloads(codeUrl: string, loads: DocumentBundle['loads'], built: Built, plugins: readonly string[]): string[] {
   const { shared } = built.app.manifest
-  for (const [specifier, file] of Object.entries(shared)) if (text.includes(`"${specifier}"`) || text.includes(`'${specifier}'`)) urls.push(`${built.appUrl}${file}`)
-  const assets = existsSync(join(built.appDir, 'assets')) ? readdirSync(join(built.appDir, 'assets')) : []
-  // The viewer the app opens for the slides, loaded by the app only once it runs.
-  for (const file of assets.filter(name => name.startsWith('viewer-') && name.endsWith('.js'))) urls.push(`${built.appUrl}assets/${file}`)
-  for (const [engine, library] of Object.entries(SCENE_LIBRARIES)) {
-    if (!text.includes(engine)) continue
-    const file = assets.find(name => name.startsWith(`${library}-`) && name.endsWith('.js'))
-    if (file) urls.push(`${built.appUrl}assets/${file}`)
-  }
-  return urls
+  const files = loads.shared.flatMap(specifier => shared[specifier] ?? [])
+  const sources = plugins.flatMap(name => [...built.plugins.get(name)?.plugins ?? [], ...built.plugins.get(name)?.viewers ?? []])
+  return [...loads.files.map(file => `${codeUrl}${file}`), ...appModuleImports(built.app, { files, sources }).map(file => `${built.appUrl}${file}`)]
 }
 
 /**
@@ -316,8 +311,9 @@ export async function buildSlidesSite(doc: IRDocument, ctx: RenderContext, nodeP
   const entry: BuiltDocument = { dir: '', doc, ctx, nodePlugins, translations: [] }
   const built = await prepareApp(ctx, [entry])
   mkdirSync(ctx.outDir, { recursive: true })
-  const published = publishedDocument(doc, ctx, ctx.outDir, ctx.base)
-  const { code } = await documentFiles(ctx, built, entry)
+  const images = new ImageEncoder(imageCache(ctx.workspaceRoot))
+  const published = publishedDocument(doc, ctx, ctx.outDir, ctx.base, { images })
+  const { code, loads } = await documentFiles(ctx, built, entry)
   writeFileSync(join(ctx.outDir, 'ir.json'), JSON.stringify(published))
   const lang = doc.meta.lang ?? ctx.lang ?? 'zh-CN'
   const site = publishedSite(themedSite({ title: doc.meta.title, documents: [{ dir: '', title: doc.meta.title, doc }], config: ctx.config }, ctx), ctx)
@@ -333,7 +329,7 @@ export async function buildSlidesSite(doc: IRDocument, ctx: RenderContext, nodeP
     plugins: ctx.plugins,
     origins: [],
   }
-  const preload = code ? scenePreloads(join(ctx.outDir, CODE_DIR, code), `${ctx.base}${CODE_DIR}/${code}/`, built) : []
+  const preload = code && loads ? presentationPreloads(`${ctx.base}${CODE_DIR}/${code}/`, loads, built, ctx.plugins) : []
   writeFileSync(join(ctx.outDir, 'index.html'), pageHtml({ entry: appEntry(built.app), appUrl: built.appUrl, shared: built.app.manifest.shared, config, title: doc.meta.title, preload }))
-  await reportOptimized(ctx, await optimizeImages(ctx.outDir))
+  reportEncoded(ctx, await images.done())
 }

package/src/node/site-files.ts

@@ -11,7 +11,7 @@ import { APP_MANIFEST } from './viewer-app.ts'
 import type { ViewerApp } from './viewer-app.ts'
 
 /** Where a built site keeps the viewer app (`_app/<key>/`, below the site's path) and a document its own code. */
-export const APP_DIR = '_app'
+export { APP_DIR } from '@lincyaw/kernel'
 export const CODE_DIR = '_code'
 // What of a cached app a site needs: not its server-side render, nor the build's own records.
 const NOT_PUBLISHED = new Set(['server', '.vite', APP_MANIFEST])

package/src/node/site-model.ts

@@ -1,6 +1,6 @@
 import { existsSync, realpathSync, statSync } from 'node:fs'
 import { basename, dirname, isAbsolute, join, relative, resolve, sep } from 'node:path'
-import { DEFAULT_LANG, DOCUMENT_ENTRY, deckLocale, docBlocks, isRecord, nodeMdast, NON_FILE_URL, safeDecodeURIComponent } from '@lincyaw/kernel'
+import { DEFAULT_LANG, DOCUMENT_ENTRY, SLIDES_DIR, deckLocale, docBlocks, isRecord, nodeMdast, NON_FILE_URL, safeDecodeURIComponent } from '@lincyaw/kernel'
 import type { DocumentLink, Finding, IRDocument, MdastNode, RenderContext, SiteDocument, SiteSpec, SourcePos } from '@lincyaw/kernel'
 import { findInstalledPackage, isInside } from '@lincyaw/kernel/node'
 import { crossFormLinks, pageLink, searchDocuments, sectionLinks, sitePageLayout, siteShell, translationPages, urlPath, WEB_MESSAGES, webPages } from '../domain/index.ts'
@@ -117,7 +117,8 @@ export function homeDocuments(site: SiteSpec, base: string, compiled: ReadonlyMa
     const snapshot = compiled.get(dir) ?? doc
     const root = documentBase(base, dir)
     const card = snapshot ? cardOf(snapshot, root) : description?.trim() ? { description: description.trim() } : {}
-    return { dir, title, ...own ? { lang: own } : {}, ...tags?.length ? { tags } : {}, href: root, ...card }
+    const slides = (snapshot ? snapshot.config.renderers.slides !== undefined : entry.slides) ? { slides: `${root}${SLIDES_DIR}/` } : {}
+    return { dir, title, ...own ? { lang: own } : {}, ...tags?.length ? { tags } : {}, href: root, ...slides, ...card }
   })
 }
 

package/src/node/site-page.ts

@@ -1,4 +1,5 @@
 import escapeHtml from 'escape-html'
+import { STALE_MODULE_EVENT, STALE_MODULE_PATTERN } from '@lincyaw/kernel'
 import { APP_CONFIG_ELEMENT } from '../domain/index.ts'
 import type { AppConfig } from '../domain/index.ts'
 import type { AppEntry } from './viewer-app.ts'
@@ -37,19 +38,29 @@ const APPEARANCE = `(() => {
 
 /**
  * A page cached before a new deployment names an app version the deployment removed: its scripts and the modules they
- * import then fail. The page loads once more, from the network, and gets the current version; at most once in 30 s.
+ * import then fail. The page loads once more, from the network, and gets the current version: at most once in 30 s,
+ * not while offline (a lost connection fails the same way) and not without session storage to remember it.
+ * Failures come as Vite's preload event, a rejected dynamic import, a module script that cannot load, or the event
+ * Presmium's own loaders dispatch (`reportStaleModule`).
  */
-const STALE = `(() => {
+const STALE_RELOAD = `(() => {
   const key = 'presmium-stale-reload'
+  // Reloads at most once in 30 s, only while online, and only where it can remember that it did: without storage a
+  // module that keeps failing would reload the page forever. Returns whether it reloads.
   const reload = () => {
-    let last = 0
-    try { last = Number(sessionStorage.getItem(key)) || 0 } catch {}
-    if (Date.now() - last < 30000) return
-    try { sessionStorage.setItem(key, String(Date.now())) } catch {}
+    if (navigator.onLine === false) return false
+    try {
+      if (Date.now() - (Number(sessionStorage.getItem(key)) || 0) < 30000) return false
+      sessionStorage.setItem(key, String(Date.now()))
+    } catch { return false }
     location.reload()
+    return true
   }
-  addEventListener('vite:preloadError', (event) => { event.preventDefault(); reload() })
-  addEventListener('unhandledrejection', (event) => { if (/dynamically imported module|Importing a module script failed|error loading dynamically imported module/i.test(String(event.reason && event.reason.message || event.reason))) reload() })
+  const stale = new RegExp(${JSON.stringify(STALE_MODULE_PATTERN.source)}, ${JSON.stringify(STALE_MODULE_PATTERN.flags)})
+  addEventListener(${JSON.stringify(STALE_MODULE_EVENT)}, reload)
+  // Vite rethrows the failure unless the event is cancelled: cancel it only when the page is about to reload.
+  addEventListener('vite:preloadError', (event) => { if (reload()) event.preventDefault() })
+  addEventListener('unhandledrejection', (event) => { if (stale.test(String(event.reason && event.reason.message || event.reason))) reload() })
   addEventListener('error', (event) => { const el = event.target; if (el && el.tagName === 'SCRIPT' && el.type === 'module') reload() }, true)
 })()`
 
@@ -65,16 +76,16 @@ export function pageHtml(input: PageHtmlInput): string {
     `<title>${escapeHtml(input.title)}</title>`,
     ...(input.meta ?? []).map(tag => `<meta ${attributes(tag)}>`),
     `<script>${APPEARANCE}</script>`,
-    `<script>${STALE}</script>`,
+    `<script>${STALE_RELOAD}</script>`,
     `<script type="importmap">${json({ imports })}</script>`,
     ...entry.css.map(file => `<link rel="stylesheet" href="${escapeHtml(`${appUrl}${file}`)}">`),
     // A workspace theme's fonts, tokens and styles come after the app's, so that they override them.
     ...(config.site?.shell.theme?.stylesheets ?? []).map(url => `<link rel="stylesheet" href="${escapeHtml(url)}">`),
-    ...entry.preload.map(file => `<link rel="modulepreload" href="${escapeHtml(`${appUrl}${file}`)}">`),
+    // The app's modules, the document's own code (its bundle) and, when given, what its scenes load, all in parallel;
+    // each once, though the scenes' modules import the app's.
+    ...[...new Set([...entry.preload.map(file => `${appUrl}${file}`), ...config.bundle ? [config.bundle] : [], ...input.preload ?? []])].map(url => `<link rel="modulepreload" href="${escapeHtml(url)}">`),
     // The document itself, fetched with the app instead of after it has started.
     ...config.ir ? [`<link rel="preload" as="fetch" crossorigin href="${escapeHtml(config.ir)}">`] : [],
-    // The document's own code: its bundle and, when given, the chunks its scenes load, in parallel with the app.
-    ...[...config.bundle ? [config.bundle] : [], ...input.preload ?? []].map(url => `<link rel="modulepreload" href="${escapeHtml(url)}">`),
     `<script type="application/json" id="${APP_CONFIG_ELEMENT}">${json(config)}</script>`,
     `<script type="module" src="${escapeHtml(`${appUrl}${entry.script}`)}"></script>`,
   ]

package/src/node/site-server.ts

@@ -8,7 +8,7 @@ import type { Duplex } from 'node:stream'
 import { join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { stripVTControlCharacters } from 'node:util'
-import { errorMessage, irBlocks, isRecord, localRequestRefusal, previewFrameAncestors, PreviewPreparing, safeDecodeURIComponent, viewFor } from '@lincyaw/kernel'
+import { errorMessage, irBlocks, isRecord, localRequestRefusal, siteFrameAncestors, PreviewPreparing, safeDecodeURIComponent, SLIDES_DIR, viewFor } from '@lincyaw/kernel'
 import type { IRDocument, NodeVitePlugin, RenderContext, RuntimeAssets, SiteSpec } from '@lincyaw/kernel'
 import { isInside, spawnInteractiveNode } from '@lincyaw/kernel/node'
 import { diffDocuments } from '@lincyaw/viewer/domain'
@@ -212,7 +212,7 @@ export async function startSiteServer(options: SiteServerOptions): Promise<SiteS
   let closed = false
   const log = options.log ?? ((message: string) => console.warn(`[presmium] ${message}`))
   // The workspace service's pages: only the workbench's origins may frame them, and none when it names none.
-  const framed = ctx.preview ? previewFrameAncestors(ctx.preview.origins) : undefined
+  const framed = ctx.preview ? siteFrameAncestors(ctx.preview.origins) : undefined
   const latest = new Map<string, IRDocument>()
 
   const documents = () => siteOf().documents.map(entry => entry.dir)
@@ -430,7 +430,7 @@ export async function startSiteServer(options: SiteServerOptions): Promise<SiteS
     const linked = isSingle(siteOf()) ? undefined : documentPage(siteOf(), base, docs())
     let cache = state.caches.get(form)
     if (!cache) state.caches.set(form, cache = new PublicationCache())
-    const shown = publishedDocument(lang || unfiltered ? doc : viewOf(doc, form), own, join(options.workDir, 'media', segment(dir)), docBase, linked, lang ? undefined : cache)
+    const shown = publishedDocument(lang || unfiltered ? doc : viewOf(doc, form), own, join(options.workDir, 'media', segment(dir)), docBase, { documentPage: linked, cache: lang ? undefined : cache })
     const json = JSON.stringify(shown)
     const next = { source: doc, doc: shown, json, revision: irRevisionOfJson(json) }
     state.published.set(key, next)
@@ -641,7 +641,7 @@ export async function startSiteServer(options: SiteServerOptions): Promise<SiteS
     if (doc.config.renderers.slides !== undefined) {
       const lang = first && others.length > 0 && translationOf(dir, first) ? first : ''
       const path = lang ? others.join('/') : rest
-      if (path === 'slides' || path === 'slides/' || path === 'slides/index.html') return documentPageResponse(res, dir, lang, '', 'slides', url.searchParams.get('presmium-block') ?? undefined)
+      if (path === SLIDES_DIR || path === `${SLIDES_DIR}/` || path === `${SLIDES_DIR}/index.html`) return documentPageResponse(res, dir, lang, '', 'slides', url.searchParams.get('presmium-block') ?? undefined)
     }
     if (formOf(url) === 'slides' && (rest === '' || rest === 'index.html')) return documentPageResponse(res, dir, '', undefined, 'slides', url.searchParams.get('presmium-block') ?? undefined)
     if (first && others.length > 0 && translationOf(dir, first)) return documentPageResponse(res, dir, first, others.join('/'), formOf(url), url.searchParams.get('presmium-block') ?? undefined)

package/src/node/viewer-app.ts

@@ -2,7 +2,7 @@ import { createHash } from 'node:crypto'
 import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, realpathSync, renameSync, rmSync, statSync, symlinkSync, utimesSync, writeFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { homedir } from 'node:os'
-import { dirname, extname, join, relative, sep } from 'node:path'
+import { dirname, extname, join, relative, resolve, sep } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { isRecord } from '@lincyaw/kernel'
 import { findInstalledPackage, FONT_LICENSE, fontLicense } from '@lincyaw/kernel/node'
@@ -104,24 +104,44 @@ interface BuildManifestChunk {
   imports?: string[]
 }
 
-/** The app's entry as Vite's build manifest gives it: its file, its styles and the chunks it imports at once. */
-export function appEntry(app: ViewerApp): AppEntry {
-  const chunks = JSON.parse(readFileSync(join(app.dir, BUILD_MANIFEST), 'utf8')) as Record<string, BuildManifestChunk>
-  const main = Object.entries(chunks).find(([source, chunk]) => chunk.isEntry && source.endsWith('main.ts'))?.[1]
-  if (!main) throw new Error(`the viewer app at ${app.dir} has no entry in its build manifest`)
-  const preload = new Set<string>()
-  const css = new Set(main.css ?? [])
-  const walk = (keys: readonly string[] = []) => {
-    for (const key of keys) {
+const buildManifest = (app: ViewerApp) => JSON.parse(readFileSync(join(app.dir, BUILD_MANIFEST), 'utf8')) as Record<string, BuildManifestChunk>
+
+/** The chunks `keys` name in the build manifest and those they import at once, with their styles. */
+function staticImports(chunks: Record<string, BuildManifestChunk>, keys: readonly string[] = []): { files: Set<string>, css: Set<string> } {
+  const files = new Set<string>()
+  const css = new Set<string>()
+  const walk = (next: readonly string[] = []) => {
+    for (const key of next) {
       const chunk = chunks[key]
-      if (!chunk || preload.has(chunk.file)) continue
-      preload.add(chunk.file)
+      if (!chunk || files.has(chunk.file)) continue
+      files.add(chunk.file)
       for (const file of chunk.css ?? []) css.add(file)
       walk(chunk.imports)
     }
   }
-  walk(main.imports)
-  return { script: main.file, css: [...css], preload: [...preload] }
+  walk(keys)
+  return { files, css }
+}
+
+/** The app's entry as Vite's build manifest gives it: its file, its styles and the chunks it imports at once. */
+export function appEntry(app: ViewerApp): AppEntry {
+  const chunks = buildManifest(app)
+  const main = Object.entries(chunks).find(([source, chunk]) => chunk.isEntry && source.endsWith('main.ts'))?.[1]
+  if (!main) throw new Error(`the viewer app at ${app.dir} has no entry in its build manifest`)
+  const { files, css } = staticImports(chunks, main.imports)
+  return { script: main.file, css: [...new Set([...main.css ?? [], ...css])], preload: [...files] }
+}
+
+/**
+ * The chunks that the app's modules import at once, the modules included, for a page that will load them to preload:
+ * `files` are built files (an import map's entries), `sources` the modules' source files (a plugin's viewer module).
+ * The app was built in a directory beside the one it is kept in, so its manifest's paths resolve from there too.
+ */
+export function appModuleImports(app: ViewerApp, { files = [], sources = [] }: { files?: readonly string[], sources?: readonly string[] }): string[] {
+  const chunks = buildManifest(app)
+  const wanted = new Set([...files, ...sources.map(source => resolve(source))])
+  const keys = Object.entries(chunks).filter(([key, chunk]) => wanted.has(chunk.file) || wanted.has(resolve(app.dir, key))).map(([key]) => key)
+  return [...staticImports(chunks, keys).files]
 }
 
 /** Where viewer apps are kept: the user's cache, shared by every workspace and session. */
@@ -425,6 +445,10 @@ export async function buildViewerApp(cacheDir: string, plugins: readonly AppPlug
           entryFileNames: chunk => (chunk.name.startsWith('shared/') ? '[name].js' : 'assets/[name]-[hash].js'),
           chunkFileNames: 'assets/[name]-[hash].js',
           assetFileNames: 'assets/[name]-[hash][extname]',
+          // What every page runs first, the app and the modules it imports statically, is one file: split by the
+          // entries of the import map that also reach them, it was dozens of small files, each a request before the
+          // page can start. What the page loads later (plugins, views, optional parts) stays in chunks of its own.
+          codeSplitting: { groups: [{ name: 'app', test: (id: string) => id === APP_MAIN }] },
         },
       },
     },

package/src/site/index.ts

@@ -0,0 +1,58 @@
+import { EMBED_MESSAGE } from '@lincyaw/kernel'
+import type { EmbedState } from '@lincyaw/kernel'
+
+/**
+ * For a site template's own page (`site.landing`) that plays the site's presentations in a frame: fetching one ahead
+ * of the reader's click, and knowing when the one in a frame is ready to be seen. A presentation tells the page that
+ * embeds it its state (`EMBED_MESSAGE`): whether its scene is drawn, and its lecture's state.
+ */
+
+export type { EmbedState } from '@lincyaw/kernel'
+/** The site's content, as the page finds it in its `presmium-site-data` script. */
+export type { SiteContent, SiteContentDocument } from '../domain/landing.ts'
+
+const prefetched = new Map<string, Promise<void>>()
+// The files already asked for: presentations of one site share their viewer app.
+const files = new Set<string>()
+
+/**
+ * Prefetches what the presentation's page at `url` preloads (the viewer app, the document's IR and scenes), once, so
+ * that it opens without waiting for them. Nothing is fetched when the reader asked to save data.
+ */
+export function prefetchPresentation(url: string): Promise<void> {
+  const page = new URL(url, location.href).href
+  if ((navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData) return Promise.resolve()
+  let done = prefetched.get(page)
+  if (!done) {
+    done = fetch(page).then(response => (response.ok ? response.text() : '')).then((html) => {
+      const links = new DOMParser().parseFromString(html, 'text/html').querySelectorAll<HTMLLinkElement>('link[rel="modulepreload"], link[rel="preload"], link[rel="stylesheet"]')
+      for (const link of links) {
+        const href = new URL(link.getAttribute('href')!, page).href
+        if (files.has(href)) continue
+        files.add(href)
+        document.head.append(Object.assign(document.createElement('link'), { rel: 'prefetch', href }))
+      }
+    }).catch(() => {})
+    prefetched.set(page, done)
+  }
+  return done
+}
+
+/** A lecture past loading: playing, paused, waiting for the reader's click where autoplay was refused, or failed. */
+const SETTLED = new Set<EmbedState['lecture']>(['waiting', 'playing', 'paused', 'failed'])
+
+/**
+ * Calls `ready` once, when the presentation in `frame` has drawn its scene and, with `lecture`, its lecture has settled.
+ * Returns a function that stops watching.
+ */
+export function whenPresentationReady(frame: HTMLIFrameElement, ready: () => void, { lecture = false }: { lecture?: boolean } = {}): () => void {
+  const listen = (event: MessageEvent<Partial<EmbedState>>) => {
+    if (event.source !== frame.contentWindow || event.data?.type !== EMBED_MESSAGE) return
+    if (!event.data.drawn || (lecture && !SETTLED.has(event.data.lecture))) return
+    stop()
+    ready()
+  }
+  const stop = () => removeEventListener('message', listen)
+  addEventListener('message', listen)
+  return stop
+}

package/src/node/optimize.ts

@@ -1,65 +0,0 @@
-import { existsSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
-import { basename, dirname, extname, join, relative, sep } from 'node:path'
-import sharp from 'sharp'
-import { CODE_DIR } from './site-files.ts'
-import { MEDIA } from './publish.ts'
-
-/**
- * Raster images a site publishes (a document's media and the images its scenes import) are encoded again as WebP and
- * no wider than any page shows them, when that saves at least a fifth: a paper's PNG figures and photographs are
- * the largest files most pages load. References in the site's pages, data and scripts follow the new names; files
- * the author publishes as they are (`public/`) are left alone.
- */
-
-const RASTER = new Set(['.png', '.jpg', '.jpeg'])
-// Below this an image is small enough that a second encoding gains little.
-const MIN_BYTES = 48 * 1024
-// The widest an image is drawn: a full-width figure on a large screen at twice its pixels.
-const MAX_WIDTH = 2400
-const TEXT = new Set(['.html', '.json', '.js', '.css', '.xml', '.vtt'])
-
-function files(dir: string): string[] {
-  if (!existsSync(dir)) return []
-  return readdirSync(dir, { withFileTypes: true }).flatMap(entry => entry.isDirectory() ? files(join(dir, entry.name)) : [join(dir, entry.name)])
-}
-
-/** A published image the build may encode again: in a media directory or among a code bundle's assets. */
-function published(outDir: string, file: string): boolean {
-  const parts = relative(outDir, file).split(sep)
-  return parts.includes(MEDIA) || parts.some((part, i) => part === CODE_DIR && parts[i + 2] === 'assets')
-}
-
-export async function optimizeImages(outDir: string): Promise<{ images: number, saved: number }> {
-  const all = files(outDir)
-  const renamed = new Map<string, string>()
-  let saved = 0
-  for (const file of all) {
-    if (!RASTER.has(extname(file).toLowerCase()) || !published(outDir, file)) continue
-    const size = statSync(file).size
-    if (size < MIN_BYTES) continue
-    const target = join(dirname(file), `${basename(file, extname(file))}.webp`)
-    if (existsSync(target)) {
-      renamed.set(basename(file), basename(target))
-      continue
-    }
-    const lossless = extname(file).toLowerCase() === '.png'
-    const image = sharp(file).rotate().resize({ width: MAX_WIDTH, withoutEnlargement: true })
-    // Figures and screenshots keep their sharp edges (near-lossless); photographs take ordinary lossy compression.
-    const bytes = await (lossless ? image.webp({ nearLossless: true, quality: 75, effort: 5 }) : image.webp({ quality: 80, effort: 5 })).toBuffer()
-    if (bytes.length > size * 0.8) continue
-    // The original stays beside it: a reference this pass cannot see (an encoded name) still finds a file.
-    writeFileSync(target, bytes)
-    renamed.set(basename(file), basename(target))
-    saved += size - bytes.length
-  }
-  if (renamed.size > 0) {
-    const names = new RegExp([...renamed.keys()].map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'), 'g')
-    for (const file of all) {
-      if (!TEXT.has(extname(file)) || !existsSync(file)) continue
-      const text = readFileSync(file, 'utf8')
-      const next = text.replace(names, name => renamed.get(name)!)
-      if (next !== text) writeFileSync(file, next)
-    }
-  }
-  return { images: renamed.size, saved }
-}