@lincyaw/addon-stage 0.0.0-stage → 1.0.0-rc.2

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,30 @@
-# Temporary Holding Version
+# @lincyaw/addon-stage
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The stage: black screen, freezing the audience view, drawing on the slides, and footnotes shown next to the block that cites them.
+
+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
+
+```sh
+pnpm add -D @lincyaw/addon-stage
+```
+
+Add this package to `metadata.plugins` in the document's `lecture.json`.
+
+It is a Presmium plugin: its components work on the web page and in the slides. It needs `@lincyaw/cli` and the renderers in the same project, and declares the Presmium packages it shares with them as peer dependencies (Presmium 1.x).
+
+## What it provides
+
+- The presenter's stage controls in the slides and the present view: black screen (`b`), freeze (`f`).
+- Drawing on the slides (`d`, or the pen in the presentation bar: four inks, the eraser, undo, clear), with drauu. Each slide's drawing is shared between the presenter's and the audience's windows and the classroom, and kept in the document's `.presmium/drawings/` while a server serves the page.
+- A pass that places footnote definitions beside the blocks that cite them.
+
+## Documentation
+
+- [Author guide](https://github.com/Lincyaw/presmium/blob/main/site/guide/locales/en/lecture.json) (Chinese: `site/guide/lecture.json`)
+- [Document contract](https://github.com/Lincyaw/presmium/blob/main/.agents/skills/presmium-author/references/document.md): normalized entities, parameters, states and shared validation
+
+## License
+
+Apache-2.0

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@lincyaw/addon-stage",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-rc.2",
+  "description": "Presmium plugin: presenter notes per step, freezing the audience view, and annotations",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lincyaw/presmium.git",
+    "directory": "packages/addon-stage"
+  },
+  "homepage": "https://github.com/Lincyaw/presmium/tree/main/packages/addon-stage#readme",
+  "bugs": "https://github.com/Lincyaw/presmium/issues",
+  "keywords": [
+    "presmium"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=22.19"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./domain": "./src/domain/index.ts",
+    "./client": "./src/client/index.ts",
+    "./presmium": "./src/node/presmium.ts",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@drauu/core": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "@lincyaw/host": "^1.0.0-rc.2",
+    "@lincyaw/kernel": "^1.0.0-rc.2"
+  },
+  "devDependencies": {
+    "react": "18.3.1",
+    "@types/react": "18.3.28",
+    "@lincyaw/cli": "1.0.0-rc.2",
+    "@lincyaw/viewer": "1.0.0-rc.2",
+    "@lincyaw/kernel": "1.0.0-rc.2",
+    "@lincyaw/host": "1.0.0-rc.2"
+  }
 }

package/src/client/drawings.ts

@@ -0,0 +1,48 @@
+import { createDrauu } from '@drauu/core'
+import type { Drauu } from '@drauu/core'
+import { createStore, getSharedStateStore, serverClient, useStore } from '@lincyaw/host'
+import type { useViewer } from '@lincyaw/viewer'
+import { createElement as h, useEffect, useRef } from 'react'
+import type { ComponentType, ReactNode } from 'react'
+import { DRAWINGS_KEY, DRAWINGS_ROUTE, INKS, PEN_WIDTH, STAGE_ID } from '../domain/index.ts'
+import type { PenMode } from '../domain/index.ts'
+import { messages } from './locale.ts'
+const pen = createStore({ on: false, ink: INKS[0] as string, mode: 'stylus' as PenMode })
+const pads = new Map<string, { pad: Drauu, commit(): void }>()
+const timers = new Map<string, ReturnType<typeof setTimeout>>()
+let loaded = false
+const drawingsState = () => getSharedStateStore<Record<string, string>>(DRAWINGS_KEY, {}, { scope: 'remote' })
+function loadSaved(): void {
+  const server = serverClient(), drawings = drawingsState()
+  if (loaded || !server.available) return
+  loaded = true
+  void server.fetch(STAGE_ID, DRAWINGS_ROUTE).then(response => response.ok ? response.json() as Promise<Record<string, string>> : {}).then(saved => drawings.set(current => ({ ...saved, ...current }))).catch(() => {})
+}
+function save(section: string, svg: string): void { const server = serverClient(); if (!server.available) return; clearTimeout(timers.get(section)); timers.set(section, setTimeout(() => { timers.delete(section); void server.fetch(STAGE_ID, `${DRAWINGS_ROUTE}/${encodeURIComponent(section)}`, { method: 'PUT', body: svg }).catch(() => {}) }, 800)) }
+export function togglePen(): void { pen.set(value => ({ ...value, on: !value.on })) }
+export function drawingLayer(viewerOf: typeof useViewer): ComponentType<{ view: string, section: string }> {
+  return function Drawing({ view, section }) {
+    const viewer = viewerOf(), position = useStore(viewer.position), currentPen = useStore(pen), drawings = drawingsState(), content = useStore(drawings)[section] ?? ''
+    const svg = useRef<SVGSVGElement>(null), pad = useRef<Drauu>()
+    useEffect(() => {
+      loadSaved()
+      if (view === 'print' || !svg.current || svg.current.closest('[inert]')) return
+      const current = createDrauu({ el: svg.current, brush: { mode: pen.getSnapshot().mode, color: pen.getSnapshot().ink, size: PEN_WIDTH } }); pad.current = current; current.load(drawings.getSnapshot()[section] ?? '')
+      const commit = () => { const value = current.dump(); if (value !== drawings.getSnapshot()[section]) { drawings.set(old => ({ ...old, [section]: value })); save(section, value) } }
+      current.on('committed', commit); pads.set(section, { pad: current, commit })
+      return () => { if (pads.get(section)?.pad === current) pads.delete(section); current.unmount(); pad.current = undefined }
+    }, [view, section])
+    useEffect(() => { if (pad.current && content !== pad.current.dump()) pad.current.load(content) }, [content])
+    useEffect(() => { if (pad.current) { pad.current.brush = { ...pad.current.brush, color: currentPen.ink }; pad.current.mode = currentPen.mode } }, [currentPen.ink, currentPen.mode])
+    return h('svg', { ref: svg, className: 'pm-stage-drawing', 'aria-hidden': true, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: currentPen.on && section === position.section ? 'auto' : 'none', cursor: currentPen.on ? 'crosshair' : undefined, touchAction: currentPen.on ? 'none' : undefined }, ...(view === 'print' ? { dangerouslySetInnerHTML: { __html: content } } : {}) })
+  }
+}
+export function penControls(viewerOf: typeof useViewer): ComponentType {
+  return function Pen() {
+    const viewer = viewerOf(), position = useStore(viewer.position), currentPen = useStore(pen), t = messages().pen
+    const button = (label: string, onClick: () => void, extra: Record<string, unknown> = {}, children?: ReactNode) => h('button', { key: label, type: 'button', className: 'pm-present__button', 'aria-label': label, onClick, ...extra }, children ?? label)
+    const current = () => pads.get(position.section)
+    if (!currentPen.on) return button(t.draw, togglePen, { 'aria-pressed': false })
+    return h('span', {}, button(t.done, togglePen, { 'aria-pressed': true }), ...INKS.map((ink, i) => button(t.ink(i + 1), () => pen.set(old => ({ ...old, ink, mode: 'stylus' })), { 'aria-pressed': currentPen.mode === 'stylus' && currentPen.ink === ink }, h('span', { style: { display: 'block', width: 'var(--pm-size-icon)', height: 'var(--pm-size-icon)', borderRadius: 'var(--pm-radius-pill)', background: ink } }))), button(t.eraser, () => pen.set(old => ({ ...old, mode: 'eraseLine' })), { 'aria-pressed': currentPen.mode === 'eraseLine' }), button(t.undo, () => { const value = current(); if (value?.pad.undo()) value.commit() }), button(t.clear, () => { const value = current(); value?.pad.clear(); value?.commit() }))
+  }
+}

package/src/client/index.ts

@@ -0,0 +1,3 @@
+export { messages } from './locale.ts'
+export { useScreen } from './screen.ts'
+export { default as stageViewerPlugin } from './viewer.ts'

package/src/client/locale.ts

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

package/src/client/screen.ts

@@ -0,0 +1,6 @@
+import { getSharedStateStore, useStore } from '@lincyaw/host'
+import { SCREEN_KEY, toggleScreen, toScreenMode } from '../domain/index.ts'
+import type { ScreenMode } from '../domain/index.ts'
+const state = () => getSharedStateStore<string>(SCREEN_KEY, 'live', { scope: 'remote' })
+export function toggleScreenMode(wanted: Exclude<ScreenMode, 'live'>): void { state().set(current => toggleScreen(toScreenMode(current), wanted)) }
+export function useScreen(): { mode: ScreenMode, toggle(wanted: Exclude<ScreenMode, 'live'>): void } { return { mode: toScreenMode(useStore(state())), toggle: toggleScreenMode } }

package/src/client/viewer.ts

@@ -0,0 +1,30 @@
+import type { ViewerPluginContext } from '@lincyaw/viewer'
+import { createElement as h, useLayoutEffect, useRef } from 'react'
+import { drawingLayer, penControls, togglePen } from './drawings.ts'
+import { messages } from './locale.ts'
+import { toggleScreenMode, useScreen } from './screen.ts'
+function freeze(frame: HTMLElement): void {
+  const present = frame.closest('.pm-present'), slide = present?.querySelector<HTMLElement>('.pm-present__slide')
+  if (!present || !slide) return
+  const copy = slide.cloneNode(true) as HTMLElement
+  for (const el of [copy, ...copy.querySelectorAll('[id]')]) el.removeAttribute('id')
+  const outer = present.getBoundingClientRect(), inner = slide.getBoundingClientRect()
+  Object.assign(frame.style, { top: `${inner.top - outer.top}px`, left: `${inner.left - outer.left}px`, width: `${inner.width}px`, height: `${inner.height}px`, backgroundColor: getComputedStyle(present).backgroundColor })
+  copy.style.margin = '0'; frame.replaceChildren(copy)
+}
+function ScreenLayer({ view }: { view: string }) {
+  const { mode } = useScreen(), frame = useRef<HTMLDivElement>(null)
+  useLayoutEffect(() => { if (!frame.current) return; if (mode === 'frozen') freeze(frame.current); else frame.current.replaceChildren() }, [mode])
+  if (view === 'presenter') return mode === 'live' ? null : h('div', { className: 'pm-stage-badge', 'data-mode': mode, style: { position: 'absolute', top: 'var(--pm-space-3)', right: 'var(--pm-space-3)', zIndex: 10, padding: 'var(--pm-space-1) var(--pm-space-3)', borderRadius: 'var(--pm-radius-pill)', background: mode === 'frozen' ? 'var(--pm-color-accent)' : 'var(--pm-color-ink)', color: mode === 'frozen' ? 'var(--pm-color-on-accent)' : 'var(--pm-color-bg)', fontFamily: 'var(--pm-font-sans)', fontSize: 'var(--pm-text-sm)', pointerEvents: 'none' } }, messages().badge[mode])
+  return h('div', { ref: frame, className: 'pm-stage-frozen', 'aria-hidden': true, style: { display: mode === 'frozen' ? 'block' : 'none', position: 'absolute', zIndex: 5, overflow: 'hidden' } })
+}
+function BlackLayer() { const { mode } = useScreen(); return mode === 'black' ? h('div', { className: 'pm-stage-black', style: { position: 'fixed', inset: 0, zIndex: 'var(--pm-z-screen)', background: 'var(--pm-color-terminal-bg)', cursor: 'none' } }) : null }
+export default function stageViewerPlugin({ registerAction, registerLayer, useViewer }: ViewerPluginContext): void {
+  registerAction({ id: 'presmium.stage.black', keys: ['b'], run: () => toggleScreenMode('black') })
+  registerAction({ id: 'presmium.stage.freeze', keys: ['f'], run: () => toggleScreenMode('frozen') })
+  registerAction({ id: 'presmium.stage.draw', keys: ['d'], run: () => togglePen() })
+  registerLayer({ id: 'presmium.stage.drawing', component: drawingLayer(useViewer), views: ['present', 'presenter', 'print'], scope: 'slide' })
+  registerLayer({ id: 'presmium.stage.pen', component: penControls(useViewer), scope: 'bar' })
+  registerLayer({ id: 'presmium.stage.screen', component: ScreenLayer, scope: 'view' })
+  registerLayer({ id: 'presmium.stage.black', component: BlackLayer, views: ['present'], scope: 'viewport' })
+}

package/src/domain/config.ts

@@ -0,0 +1,12 @@
+export const STAGE_ID = 'presmium.stage'
+
+/** Where a document's drawings are kept: a file of each slide's, named by its section (`encodeURIComponent(id).svg`). */
+export const DRAWINGS_DIR = '.presmium/drawings'
+
+/** The plugin's route of the drawings: `drawings` reads them all, `drawings/<section>` writes one (PUT; empty removes it). */
+export const DRAWINGS_ROUTE = 'drawings'
+
+/** The shared state of the drawings: each slide's SVG, by section, as the presenter's and the audience's windows have it. */
+export const DRAWINGS_KEY = 'presmium.stage.drawings'
+
+export const SCREEN_KEY = 'presmium.stage.screen'

package/src/domain/drawings.ts

@@ -0,0 +1,23 @@
+/** The pen's inks: drawn on the slides as they are, in light and in dark. */
+export const INKS = ['#e5484d', '#2f6fde', '#2f9e44', '#f08c00'] as const
+
+/** The pen's width on the slide's canvas. */
+export const PEN_WIDTH = 3
+
+/** What the pen does: draw (a stroke that follows the pen's pressure), or erase the strokes it crosses. */
+export type PenMode = 'stylus' | 'eraseLine'
+
+/** The file of a section's drawing below `DRAWINGS_DIR`. */
+export function drawingFile(section: string): string {
+  return `${encodeURIComponent(section)}.svg`
+}
+
+/** The section of a file below `DRAWINGS_DIR`, if it is a drawing's. */
+export function drawingSection(file: string): string | undefined {
+  if (!file.endsWith('.svg')) return undefined
+  try {
+    return decodeURIComponent(file.slice(0, -'.svg'.length))
+  } catch {
+    return undefined
+  }
+}

package/src/domain/footnotes.ts

@@ -0,0 +1,38 @@
+import type { IRBlock, IRDocument, IRSection, MdastNode } from '@lincyaw/kernel'
+
+export function placeFootnotes(doc: IRDocument): void {
+  const definitions: { section: IRSection, block: IRBlock, identifier: string }[] = []
+  for (const section of doc.sections) {
+    for (const block of section.blocks) {
+      const identifier = definitionOf(block)
+      if (identifier !== undefined) definitions.push({ section, block, identifier })
+    }
+  }
+  for (const { section, block, identifier } of definitions) {
+    const owner = firstReference(doc, identifier)
+    if (!owner || (owner.section === section && owner.block.role === block.role)) continue
+    section.blocks.splice(section.blocks.indexOf(block), 1)
+    const ids = new Set(owner.section.blocks.map(b => b.id))
+    let id = block.id
+    for (let n = 2; ids.has(id); n++) id = `${block.id}-${n}`
+    owner.section.blocks.push({ ...block, id, role: owner.block.role, at: owner.block.at, ...owner.block.only ? { only: owner.block.only } : {} })
+  }
+}
+
+function definitionOf(block: IRBlock): string | undefined {
+  if (block.node.type !== 'markdown') return undefined
+  const [first, ...rest] = block.node.mdast.children ?? []
+  return first?.type === 'footnoteDefinition' && rest.length === 0 && typeof first.identifier === 'string' ? first.identifier : undefined
+}
+
+function firstReference(doc: IRDocument, identifier: string): { section: IRSection, block: IRBlock } | undefined {
+  for (const section of doc.sections) {
+    const block = section.blocks.find(b => b.node.type === 'markdown' && references(b.node.mdast, identifier))
+    if (block) return { section, block }
+  }
+  return undefined
+}
+
+function references(node: MdastNode, identifier: string): boolean {
+  return (node.type === 'footnoteReference' && node.identifier === identifier) || (node.children ?? []).some(c => references(c, identifier))
+}

package/src/domain/index.ts

@@ -0,0 +1,8 @@
+export { DRAWINGS_DIR, DRAWINGS_KEY, DRAWINGS_ROUTE, SCREEN_KEY, STAGE_ID } from './config.ts'
+export { drawingFile, drawingSection, INKS, PEN_WIDTH } from './drawings.ts'
+export type { PenMode } from './drawings.ts'
+export { placeFootnotes } from './footnotes.ts'
+export { MESSAGES } from './messages.ts'
+export type { StageMessages } from './messages.ts'
+export { toggleScreen, toScreenMode } from './screen.ts'
+export type { ScreenMode } from './screen.ts'

package/src/domain/messages.ts

@@ -0,0 +1,15 @@
+import type { Locale } from '@lincyaw/kernel/contracts'
+
+const zh = {
+  badge: { black: '观众视图已黑屏', frozen: '观众视图已冻结' },
+  pen: { draw: '画笔', ink: (n: number) => `墨水 ${n}`, eraser: '橡皮', undo: '撤消', clear: '清除', done: '完成' },
+}
+
+export type StageMessages = typeof zh
+
+const en: StageMessages = {
+  badge: { black: 'Audience View blacked out', frozen: 'Audience View frozen' },
+  pen: { draw: 'Pen', ink: (n: number) => `Ink ${n}`, eraser: 'Eraser', undo: 'Undo', clear: 'Clear', done: 'Done' },
+}
+
+export const MESSAGES: Record<Locale, StageMessages> = { 'zh-CN': zh, 'en': en }

package/src/domain/screen.ts

@@ -0,0 +1,10 @@
+/** What the audience sees: the live slide, a black screen, or the slide frozen when it was frozen. */
+export type ScreenMode = 'live' | 'black' | 'frozen'
+
+export function toggleScreen(current: ScreenMode, wanted: Exclude<ScreenMode, 'live'>): ScreenMode {
+  return current === wanted ? 'live' : wanted
+}
+
+export function toScreenMode(value: unknown): ScreenMode {
+  return value === 'black' || value === 'frozen' ? value : 'live'
+}

package/src/node/drawings.ts

@@ -0,0 +1,49 @@
+import { mkdir, readdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { join, relative, sep } from 'node:path'
+import { DOCUMENT_FILES, jsonResponse } from '@lincyaw/kernel'
+import type { Route, ServerContext } from '@lincyaw/kernel'
+import { DRAWINGS_DIR, drawingFile, drawingSection } from '../domain/index.ts'
+
+// A slide's drawing: an SVG of strokes.
+const MAX_DRAWING = 4 << 20
+
+/**
+ * The drawings of the document, kept below its `.presmium/drawings/` while the presenter draws in a server's page:
+ * written through the workspace's document files where there are (they keep within the workspace), else directly.
+ */
+export function drawingsRoute(ctx: ServerContext): Route {
+  const dir = join(ctx.deckDir, DRAWINGS_DIR)
+  return {
+    role: 'editor',
+    maxBody: MAX_DRAWING,
+    async handle(request, { rest }) {
+      if (request.method === 'GET' && rest === '') {
+        const files = await readdir(dir).catch(() => [])
+        const drawings: Record<string, string> = {}
+        for (const file of files) {
+          const section = drawingSection(file)
+          if (section !== undefined) drawings[section] = await readFile(join(dir, file), 'utf8')
+        }
+        return jsonResponse(drawings)
+      }
+      if (request.method !== 'PUT' || rest === '') return new Response(null, { status: 405 })
+      let section: string
+      try {
+        section = decodeURIComponent(rest)
+      } catch {
+        return new Response(null, { status: 400 })
+      }
+      const file = join(dir, drawingFile(section))
+      const svg = await request.text()
+      const files = ctx.service(DOCUMENT_FILES)
+      if (files) {
+        const path = relative(ctx.workspaceRoot, file).split(sep).join('/')
+        await files.write([svg ? { path, content: Buffer.from(svg) } : { path, remove: true }])
+      } else if (svg) {
+        await mkdir(dir, { recursive: true })
+        await writeFile(file, svg)
+      } else await rm(file, { force: true })
+      return new Response(null, { status: 204 })
+    },
+  }
+}

package/src/node/presmium.ts

@@ -0,0 +1,16 @@
+import { createRequire } from 'node:module'
+import type { PresmiumNodePlugin } from '@lincyaw/kernel'
+import { DRAWINGS_ROUTE, placeFootnotes, STAGE_ID } from '../domain/index.ts'
+import { drawingsRoute } from './drawings.ts'
+
+const { version } = createRequire(import.meta.url)('../../package.json') as { version: string }
+
+const plugin: PresmiumNodePlugin = {
+  id: STAGE_ID,
+  version,
+  kernel: '^1.0.0',
+  passes: [{ name: 'presmium.stage.footnotes', run: doc => placeFootnotes(doc) }],
+  server: ctx => ({ routes: { [`${DRAWINGS_ROUTE}/*`]: drawingsRoute(ctx) } }),
+}
+
+export default plugin