feat: presentation runtime with lifecycle states and :thisSlide

- src/slides/compile.ts compiles a project into runtime-ready slides.
  :thisSlide is resolved to each slide's own selector before Less runs,
  so output is deterministic and never depends on which slide is visible.
- src/slides/runtime.ts mounts every slide once and moves them through
  idle -> entering -> current -> leaving via a data-ps-state attribute;
  CSS owns the animation, JS only owns the lifecycle. Rapid input
  coalesces into a single settle instead of a queue of stale operations.
  Arrow/space/Home/End keys, plus history integration: back/forward step
  through slides and a reload restores the slide you were on.
- The editor gained two buffers: HTML slides and the project Less. The
  preview and the presentation are the same runtime (present = fullscreen
  of the same stage), and broken Less keeps the last good preview while
  reporting the error.

Adds `less` (the authoring language) and `@types/less`.

index.html

@@ -9,7 +9,28 @@
 
     <body>
         <div class="container">
-            <div class="menubar"><b>p/slides</b></div>
+            <div class="menubar">
+                <b>p/slides</b>
+                <div class="menubar-actions">
+                    <div class="buffer-tabs" role="group" aria-label="Editor buffer">
+                        <button
+                            class="buffer-tab buffer-tab-slides"
+                            type="button"
+                            aria-pressed="true"
+                        >
+                            Slides
+                        </button>
+                        <button
+                            class="buffer-tab buffer-tab-style"
+                            type="button"
+                            aria-pressed="false"
+                        >
+                            Styles
+                        </button>
+                    </div>
+                    <button class="present-button" type="button">Present</button>
+                </div>
+            </div>
             <div class="slidelist">
                 <div class="slide-list-header">
                     <span>Slides</span>
@@ -18,7 +39,10 @@
                 <div class="slide-list-items"></div>
             </div>
             <div class="code"></div>
-            <div class="preview"></div>
+            <div class="preview">
+                <div class="compile-error" role="alert" hidden></div>
+                <div class="stage" tabindex="-1"></div>
+            </div>
         </div>
         <script type="module" src="/src/main.ts"></script>
     </body>

package.json

@@ -13,6 +13,7 @@
         "preview": "vite preview"
     },
     "devDependencies": {
+        "@types/less": "^3.0.8",
         "oxlint": "^1.85.0",
         "prettier": "^3.9.9",
         "typescript": "~6.0.2",
@@ -20,6 +21,7 @@
     },
     "dependencies": {
         "emmet-monaco-es": "^5.7.0",
+        "less": "^4.9.1",
         "monaco-editor": "0.55.1"
     }
 }

src/editor.ts

@@ -21,11 +21,39 @@ self.MonacoEnvironment = {
 
 const MONACO_PARENT = '.code'
 
-export function createEditor() {
+/** Which buffer the single Monaco instance is currently showing. */
-    return monaco.editor.create(document.querySelector(MONACO_PARENT)!, {
+export type EditorBuffer = 'slides' | 'style'
+
+let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null
+let slidesModel: monaco.editor.ITextModel | null = null
+let styleModel: monaco.editor.ITextModel | null = null
+let activeBuffer: EditorBuffer = 'slides'
+
+export function createEditor(initialStyle: string): monaco.editor.IStandaloneCodeEditor {
+    const editor = monaco.editor.create(document.querySelector(MONACO_PARENT)!, {
         value: 'test',
         language: 'html',
         theme: 'vs-dark',
         automaticLayout: true
     })
+
+    editorInstance = editor
+    slidesModel = editor.getModel()
+    styleModel = monaco.editor.createModel(initialStyle, 'less')
+    activeBuffer = 'slides'
+    return editor
+}
+
+export function getEditorBuffer(): EditorBuffer {
+    return activeBuffer
+}
+
+/** Swap the visible buffer. Slide text lives in its own model, so styles and
+ * slide markup never overwrite each other. */
+export function setEditorBuffer(buffer: EditorBuffer): void {
+    if (!editorInstance || !slidesModel || !styleModel || buffer === activeBuffer) {
+        return
+    }
+    activeBuffer = buffer
+    editorInstance.setModel(buffer === 'style' ? styleModel : slidesModel)
 }

src/main.ts

@@ -1,11 +1,56 @@
 import './style.css'
-import { createEditor } from './editor'
+import { createEditor, getEditorBuffer, setEditorBuffer } from './editor'
 import { createCodeThumbnail } from './code-to-element'
+import { compilePresentation } from './slides/compile'
+import { createRuntime, type Runtime } from './slides/runtime'
 
 interface Slide {
     code: string
 }
 
+// Starter stylesheet for a new project. Authors write Less here and HTML in the
+// slides; `:thisSlide` compiles to each slide's own selector, so deck styles
+// stay scoped without inventing any extra CSS syntax.
+const DEFAULT_STYLE = `// Project styles. This is ordinary Less: variables, nesting,
+// mixins and imports all work as usual.
+//
+// :thisSlide compiles to the selector of the slide this stylesheet is being
+// compiled for, so it means "this slide", never "the visible slide".
+
+@bg: #101010;
+@fg: #f0f0f0;
+@accent: #8fc98f;
+
+:thisSlide {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 3rem;
+    background: @bg;
+    color: @fg;
+    transition: opacity 260ms ease, transform 260ms ease;
+}
+
+// The runtime moves slides through idle -> entering -> current -> leaving.
+// CSS owns the transition itself; JavaScript only sets data-ps-state.
+// idle and leaving deliberately share values so settling costs no jump.
+:thisSlide[data-ps-state='idle'],
+:thisSlide[data-ps-state='leaving'] {
+    opacity: 0;
+    transform: scale(0.98);
+}
+
+:thisSlide[data-ps-state='entering'],
+:thisSlide[data-ps-state='current'] {
+    opacity: 1;
+    transform: scale(1);
+}
+`
+
+let projectStyle = DEFAULT_STYLE
 let globalSlide = ''
 
 const slides: Slide[] = [
@@ -14,9 +59,14 @@ const slides: Slide[] = [
     }
 ]
 
-const editor = createEditor()
+const editor = createEditor(projectStyle)
 const slideList = document.querySelector<HTMLElement>('.slide-list-items')!
 const addSlideButton = document.querySelector<HTMLButtonElement>('.add-slide')!
+const stage = document.querySelector<HTMLElement>('.stage')!
+const compileError = document.querySelector<HTMLElement>('.compile-error')!
+const slidesTab = document.querySelector<HTMLButtonElement>('.buffer-tab-slides')!
+const styleTab = document.querySelector<HTMLButtonElement>('.buffer-tab-style')!
+const presentButton = document.querySelector<HTMLButtonElement>('.present-button')!
 let currentSlide = 0
 let draggedSlide: number | null = null
 let globalSlideElement: HTMLElement | null = null
@@ -24,6 +74,18 @@ const slideElements = new Map<Slide, HTMLElement>()
 const thumbnailRequests = new Map<number, number>()
 let thumbnailDebounceTimer: number | undefined
 
+// Project CSS lives in its own stylesheet so the preview can be swapped out
+// without touching the editor's own styles.
+const slideStyles = document.createElement('style')
+slideStyles.setAttribute('data-ps-slides', '')
+document.head.append(slideStyles)
+
+let runtime: Runtime | null = null
+let compileDebounceTimer: number | undefined
+// Set while we push text into Monaco ourselves, so programmatic changes are
+// never mistaken for the author typing.
+let applyingToEditor = false
+
 function updateSelection() {
     slideList.querySelectorAll<HTMLElement>('.slide-list-item').forEach((element) => {
         const index = Number(element.dataset.slideId)
@@ -31,15 +93,87 @@ function updateSelection() {
     })
 }
 
+function syncBufferTabs() {
+    const showingSlides = getEditorBuffer() === 'slides'
+    slidesTab.classList.toggle('active', showingSlides)
+    styleTab.classList.toggle('active', !showingSlides)
+    slidesTab.setAttribute('aria-pressed', String(showingSlides))
+    styleTab.setAttribute('aria-pressed', String(!showingSlides))
+}
+
+function setEditorText(text: string) {
+    applyingToEditor = true
+    try {
+        editor.getModel()?.setValue(text)
+    } finally {
+        applyingToEditor = false
+    }
+}
+
+function showSlideInEditor(index: number) {
+    setEditorBuffer('slides')
+    syncBufferTabs()
+    setEditorText(index === -1 ? globalSlide : (slides[index]?.code ?? ''))
+}
+
 function setSlide(index: number) {
-    const slide = index !== -1 ? slides[index] : { code: globalSlide }
+    if (index !== -1 && !slides[index]) {
-    if (!slide) {
         return
     }
 
     currentSlide = index
-    editor.getModel()?.setValue(slide.code)
+    showSlideInEditor(index)
     updateSelection()
+    // The global slide is shared markup, not a step of the presentation, so it
+    // never moves the runtime.
+    if (index >= 0) {
+        runtime?.goTo(index)
+    }
+}
+
+function showCompileError(message: string) {
+    compileError.textContent = message
+    compileError.hidden = false
+}
+
+function scheduleCompile() {
+    if (compileDebounceTimer !== undefined) {
+        window.clearTimeout(compileDebounceTimer)
+    }
+    compileDebounceTimer = window.setTimeout(() => {
+        compileDebounceTimer = undefined
+        void rebuildPreview()
+    }, 250)
+}
+
+async function rebuildPreview(): Promise<void> {
+    try {
+        const result = await compilePresentation({
+            slides: slides.map((slide) => slide.code),
+            global: globalSlide,
+            style: projectStyle
+        })
+
+        slideStyles.textContent = result.css
+        compileError.hidden = true
+        compileError.textContent = ''
+
+        if (runtime) {
+            runtime.setSlides(result.slides)
+            // Follow the slide being edited; the deck may just have grown.
+            if (currentSlide >= 0) {
+                runtime.goTo(currentSlide)
+            }
+        } else {
+            runtime = createRuntime(stage, result.slides, {
+                onCurrentChange: (index) => setSlide(index)
+            })
+        }
+    } catch (error) {
+        // Half-typed Less should not blank the preview: keep the last good
+        // output on screen and report what broke.
+        showCompileError(error instanceof Error ? error.message : String(error))
+    }
 }
 
 async function generateSlideThumbnail(slide: Slide, i: number) {
@@ -189,7 +323,8 @@ function moveSlide(from: number, to: number) {
     }
 
     updateSlideOrder()
-    editor.getModel()?.setValue(slides[currentSlide]?.code ?? globalSlide)
+    showSlideInEditor(currentSlide)
+    scheduleCompile()
 }
 
 function deleteSlide(index: number) {
@@ -209,6 +344,7 @@ function deleteSlide(index: number) {
 
     updateSlideOrder()
     setSlide(currentSlide)
+    scheduleCompile()
 }
 
 addSlideButton.addEventListener('click', async () => {
@@ -218,6 +354,32 @@ addSlideButton.addEventListener('click', async () => {
     slideList.append(slideElement)
     updateSlideOrder()
     setSlide(slides.length - 1)
+    scheduleCompile()
+})
+
+slidesTab.addEventListener('click', () => {
+    showSlideInEditor(currentSlide)
+})
+
+styleTab.addEventListener('click', () => {
+    setEditorBuffer('style')
+    syncBufferTabs()
+})
+
+presentButton.addEventListener('click', () => {
+    stage.requestFullscreen().catch(() => {
+        // Browsers can refuse fullscreen; presenting inside the panel still works.
+    })
+})
+
+document.addEventListener('fullscreenchange', () => {
+    if (document.fullscreenElement === stage) {
+        // Keys must reach the runtime, not the editor we just left behind.
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur()
+        }
+        stage.focus()
+    }
 })
 
 slideList.addEventListener('dragstart', (event) => {
@@ -252,6 +414,16 @@ slideList.addEventListener('dragend', () => {
 })
 
 editor.onDidChangeModelContent(() => {
+    if (applyingToEditor) {
+        return
+    }
+
+    if (getEditorBuffer() === 'style') {
+        projectStyle = editor.getValue()
+        scheduleCompile()
+        return
+    }
+
     const code = editor.getValue()
     const slideIndex = currentSlide
     const slide = slideIndex === -1 ? { code } : slides[slideIndex]
@@ -261,6 +433,8 @@ editor.onDidChangeModelContent(() => {
         slides[slideIndex].code = code
     }
 
+    scheduleCompile()
+
     if (thumbnailDebounceTimer !== undefined) {
         window.clearTimeout(thumbnailDebounceTimer)
     }
@@ -271,8 +445,10 @@ editor.onDidChangeModelContent(() => {
 })
 
 async function render() {
+    syncBufferTabs()
     await setSlideList()
     setSlide(currentSlide)
+    await rebuildPreview()
 }
 
 render()

src/slides/compile.ts

@@ -0,0 +1,87 @@
+import less from 'less'
+
+/**
+ * A slide's stable id. Deterministic for a given position, so recompiling the
+ * project (on every keystroke) never renames a slide underneath the runtime.
+ */
+function slideId(index: number): string {
+    return `slide-${index}`
+}
+
+function slideSelector(id: string): string {
+    return `[data-ps-slide="${id}"]`
+}
+
+const THIS_SLIDE = ':thisSlide'
+
+export interface CompiledSlide {
+    /** Stable id, used as the value of the slide's `data-ps-slide` attribute. */
+    id: string
+    index: number
+    html: string
+}
+
+export interface CompileInput {
+    /** HTML source of every slide, in presentation order. */
+    slides: string[]
+    /** HTML shared by every slide (the "global" slide in the editor). */
+    global?: string
+    /** Project Less source. `:thisSlide` resolves to the slide being compiled. */
+    style: string
+}
+
+export interface CompiledPresentation {
+    slides: CompiledSlide[]
+    css: string
+}
+
+function buildSlideHtml(markup: string, global: string): string {
+    return global ? `${global}\n${markup}` : markup
+}
+
+/**
+ * Compile a project into runtime-ready data.
+ *
+ * `:thisSlide` is replaced with the slide's own selector *before* Less runs, so
+ * Less keeps behaving like Less: nesting, variables, mixins and imports all work
+ * unchanged, and the output is deterministic — it never depends on which slide
+ * happens to be visible.
+ */
+export async function compilePresentation(input: CompileInput): Promise<CompiledPresentation> {
+    const global = input.global ?? ''
+    const slides: CompiledSlide[] = input.slides.map((markup, index) => ({
+        id: slideId(index),
+        index,
+        html: buildSlideHtml(markup, global)
+    }))
+
+    const css = await compileStyles(
+        input.style,
+        slides.map((slide) => slide.id)
+    )
+    return { slides, css }
+}
+
+async function compileStyles(source: string, ids: string[]): Promise<string> {
+    if (!source.trim()) {
+        return ''
+    }
+
+    // Fast path: without `:thisSlide` every slide resolves to the same CSS, so
+    // compile once instead of once per slide.
+    if (!source.includes(THIS_SLIDE)) {
+        const { css } = await less.render(source)
+        return css
+    }
+
+    const perSlide = await Promise.all(
+        ids.map(async (id) => {
+            const selector = slideSelector(id)
+            const scoped = source.split(THIS_SLIDE).join(selector)
+            const { css } = await less.render(scoped)
+            return `/* ${selector} */\n${css}`
+        })
+    )
+
+    return perSlide.join('\n')
+}

src/slides/runtime.ts

@@ -0,0 +1,352 @@
+import type { CompiledSlide } from './compile'
+
+/**
+ * Slide lifecycle. The runtime moves slides through these states; CSS owns how
+ * each transition looks. State is published as the `data-ps-state` attribute.
+ *
+ *   idle -> entering -> current -> leaving -> idle
+ */
+export type SlideState = 'idle' | 'entering' | 'current' | 'leaving'
+
+export interface RuntimeSlide {
+    readonly id: string
+    readonly index: number
+    readonly element: HTMLElement
+    readonly state: SlideState
+}
+
+export interface RuntimeOptions {
+    /** Listen for arrow keys / space / Home / End. Defaults to true. */
+    keyboard?: boolean
+    /** Called whenever the current slide changes. */
+    onCurrentChange?: (index: number) => void
+}
+
+export interface Runtime {
+    /** Navigate directly. Out-of-range indexes clamp; repeats are ignored. */
+    goTo(index: number): void
+    next(): void
+    previous(): void
+    /** Swap the deck in place (after recompiling) without resetting the view. */
+    setSlides(slides: readonly CompiledSlide[]): void
+    readonly current: number
+    readonly slides: readonly RuntimeSlide[]
+    /** Remove the runtime, its listeners and its DOM. */
+    destroy(): void
+}
+
+/** Upper bound on how long a navigation may wait before it settles anyway. */
+const SETTLE_TIMEOUT_MS = 5000
+/**
+ * The current slide is remembered in the history entry rather than the URL, so
+ * back/forward steps through slides and a reload lands on the slide you were on.
+ */
+const HISTORY_KEY = 'psslides-slide'
+/** Images in the incoming slide get this long to load before we show it. */
+const ASSET_TIMEOUT_MS = 1000
+
+class SlideRecord {
+    readonly id: string
+    readonly index: number
+    readonly element: HTMLElement
+    html: string
+    state: SlideState = 'idle'
+
+    constructor(slide: CompiledSlide) {
+        this.id = slide.id
+        this.index = slide.index
+        this.html = slide.html
+        this.element = document.createElement('section')
+        this.element.setAttribute('data-ps-slide', slide.id)
+        this.element.setAttribute('data-ps-state', 'idle')
+        this.element.innerHTML = slide.html
+    }
+}
+
+function delay(ms: number): Promise<void> {
+    return new Promise((resolve) => {
+        window.setTimeout(resolve, ms)
+    })
+}
+
+/** Resolves after two frames, which is when CSS has started its transitions. */
+function nextFrames(): Promise<void> {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => resolve())
+        })
+    })
+}
+
+function waitForImage(image: HTMLImageElement): Promise<void> {
+    return new Promise((resolve) => {
+        if (image.complete) {
+            resolve()
+            return
+        }
+        image.addEventListener('load', () => resolve(), { once: true })
+        image.addEventListener('error', () => resolve(), { once: true })
+    })
+}
+
+/** Wait (briefly) for images in the incoming slide so it cannot pop in late. */
+async function waitForAssets(element: HTMLElement): Promise<void> {
+    const pending = Array.from(element.querySelectorAll('img')).filter((image) => !image.complete)
+    if (pending.length === 0) {
+        return
+    }
+    await Promise.race([Promise.all(pending.map(waitForImage)), delay(ASSET_TIMEOUT_MS)])
+}
+
+/** Infinite animations (spinners) never finish, so they must not block a settle. */
+function isFiniteAnimation(animation: Animation): boolean {
+    return animation.effect?.getTiming().iterations !== Infinity
+}
+
+async function waitForAnimations(elements: readonly HTMLElement[]): Promise<void> {
+    // Transitions are scheduled but not started until the next frame.
+    await nextFrames()
+    const animations = elements
+        .flatMap((element) => element.getAnimations({ subtree: true }))
+        .filter(isFiniteAnimation)
+    if (animations.length === 0) {
+        return
+    }
+    await Promise.race([
+        Promise.all(animations.map((animation) => animation.finished.catch(() => undefined))),
+        delay(SETTLE_TIMEOUT_MS)
+    ])
+}
+
+/** Slide index carried by the current history entry, if it has one. */
+function storedIndex(): number | null {
+    const value = (window.history.state as Record<string, unknown> | null)?.[HISTORY_KEY]
+    return typeof value === 'number' && Number.isInteger(value) ? value : null
+}
+
+/** Record the slide in the history entry: push a new one, or amend this one. */
+function writeIndex(index: number, push: boolean): void {
+    const state = {
+        ...(window.history.state as Record<string, unknown> | null),
+        [HISTORY_KEY]: index
+    }
+    if (push) {
+        window.history.pushState(state, '')
+    } else {
+        window.history.replaceState(state, '')
+    }
+}
+
+function ignoresKeyboard(event: KeyboardEvent): boolean {
+    const target = event.target
+    if (!(target instanceof HTMLElement)) {
+        return false
+    }
+    // Never steal keys from the editor, form controls or focused controls.
+    return target.closest('input, textarea, select, button, a, [contenteditable]') !== null
+}
+
+/**
+ * Mount every slide in the DOM at once and drive them through their lifecycle.
+ *
+ * The runtime never rebuilds the scene during navigation: all slides stay
+ * mounted, and only `data-ps-state` changes. It deliberately has no animation
+ * engine, no event bus and no knowledge of editing or Less — CSS describes how
+ * slides look, this moves them between states.
+ */
+export function createRuntime(
+    container: HTMLElement,
+    deck: readonly CompiledSlide[],
+    options: RuntimeOptions = {}
+): Runtime {
+    const records: SlideRecord[] = deck.map((slide) => new SlideRecord(slide))
+    const restored = storedIndex()
+    let current =
+        restored === null ? 0 : Math.min(Math.max(restored, 0), Math.max(records.length - 1, 0))
+    let generation = 0
+    let destroyed = false
+
+    container.setAttribute('data-psslides-runtime', '')
+
+    function setState(record: SlideRecord, state: SlideState): void {
+        if (record.state === state) {
+            return
+        }
+        record.state = state
+        record.element.setAttribute('data-ps-state', state)
+    }
+
+    /** Every navigation ends by normalising: target current, everything else idle. */
+    async function settle(generationAtCall: number, target: SlideRecord): Promise<void> {
+        const involved = records.filter((record) => record.state !== 'idle')
+        await Promise.all([
+            waitForAssets(target.element),
+            waitForAnimations(involved.map((record) => record.element))
+        ])
+        // A newer navigation took over while we waited; it owns the settle now.
+        if (destroyed || generationAtCall !== generation) {
+            return
+        }
+        for (const record of records) {
+            setState(record, record === target ? 'current' : 'idle')
+        }
+    }
+
+    function goTo(index: number): void {
+        moveTo(index, false)
+    }
+
+    /** `fromHistory` skips pushing a new entry (back/forward already made it). */
+    function moveTo(index: number, fromHistory: boolean): void {
+        if (destroyed || records.length === 0) {
+            return
+        }
+        const target = Math.min(Math.max(index, 0), records.length - 1)
+        if (target === current) {
+            return
+        }
+
+        // Anything on screen (or still mid-flight) starts leaving at once.
+        // Rapid navigation therefore never queues up: one generation, one settle.
+        generation++
+        for (const record of records) {
+            if (record.state !== 'idle') {
+                setState(record, 'leaving')
+            }
+        }
+        const targetRecord = records[target]
+        setState(targetRecord, 'entering')
+        current = target
+        if (!fromHistory) {
+            writeIndex(target, true)
+        }
+        options.onCurrentChange?.(target)
+
+        void settle(generation, targetRecord)
+    }
+
+    function setSlides(deckUpdate: readonly CompiledSlide[]): void {
+        if (destroyed) {
+            return
+        }
+
+        const previousRecords = records.slice()
+        const nextRecords: SlideRecord[] = deckUpdate.map((slide, index) => {
+            const existing = previousRecords[index]
+            if (existing && existing.id === slide.id) {
+                if (existing.html !== slide.html) {
+                    existing.element.innerHTML = slide.html
+                    existing.html = slide.html
+                }
+                return existing
+            }
+            return new SlideRecord(slide)
+        })
+
+        const structureChanged =
+            nextRecords.length !== previousRecords.length ||
+            nextRecords.some((record, index) => record !== previousRecords[index])
+        records.splice(0, records.length, ...nextRecords)
+
+        if (records.length > 0 && current > records.length - 1) {
+            current = records.length - 1
+            writeIndex(current, false)
+        }
+
+        if (structureChanged) {
+            // Rebuilding the DOM restarts transitions, so drop in-flight work and
+            // settle into an explicit state instead of leaving a half-transition.
+            generation++
+            container.replaceChildren(...records.map((record) => record.element))
+            for (const record of records) {
+                setState(record, record.index === current ? 'current' : 'idle')
+            }
+        }
+    }
+
+    function next(): void {
+        goTo(current + 1)
+    }
+
+    function previous(): void {
+        goTo(current - 1)
+    }
+
+    function onKeyDown(event: KeyboardEvent): void {
+        if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return
+        if (ignoresKeyboard(event)) return
+
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+            case 'PageDown':
+            case ' ':
+            case 'Spacebar':
+                next()
+                break
+            case 'ArrowLeft':
+            case 'ArrowUp':
+            case 'PageUp':
+                previous()
+                break
+            case 'Home':
+                goTo(0)
+                break
+            case 'End':
+                goTo(records.length - 1)
+                break
+            default:
+                return
+        }
+        event.preventDefault()
+    }
+
+    // Initialise: the restored (or first) slide is current, the rest idle.
+    writeIndex(current, false)
+    records.forEach((record, index) => {
+        if (index === current) {
+            record.state = 'current'
+            record.element.setAttribute('data-ps-state', 'current')
+        }
+        container.append(record.element)
+    })
+
+    function onPopState(): void {
+        const index = storedIndex()
+        if (index !== null) {
+            moveTo(index, true)
+        }
+    }
+
+    const keyboard = options.keyboard !== false
+    if (keyboard) {
+        window.addEventListener('keydown', onKeyDown)
+    }
+    window.addEventListener('popstate', onPopState)
+
+    return {
+        goTo,
+        next,
+        previous,
+        setSlides,
+        get current() {
+            return current
+        },
+        get slides() {
+            return records
+        },
+        destroy() {
+            if (destroyed) {
+                return
+            }
+            destroyed = true
+            generation++
+            if (keyboard) {
+                window.removeEventListener('keydown', onKeyDown)
+            }
+            window.removeEventListener('popstate', onPopState)
+            container.replaceChildren()
+            container.removeAttribute('data-psslides-runtime')
+        }
+    }
+}

src/style.css

@@ -105,6 +105,7 @@ body {
 
 .preview {
     grid-area: preview;
+    position: relative;
     min-width: 0;
     display: flex;
     align-items: center;
@@ -113,6 +114,76 @@ body {
     background-color: var(--bg);
 }
 
+/* The presentation surface. The runtime mounts every slide inside it. */
+.stage {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--bg-sunken);
+}
+
+.stage:focus {
+    outline: none;
+}
+
+.stage:fullscreen {
+    width: 100vw;
+    height: 100vh;
+}
+
+.compile-error {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    max-height: 40%;
+    overflow: auto;
+    padding: 0.5rem 0.75rem;
+    background-color: #7a1f1f;
+    color: #ffffff;
+    font-family: monospace;
+    font-size: 0.8rem;
+    white-space: pre-wrap;
+}
+
+.menubar-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-left: auto;
+}
+
+.buffer-tabs {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.buffer-tab,
+.present-button {
+    padding: 0.25rem 0.7rem;
+    border: 1px solid rgba(255, 255, 255, 0.55);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.buffer-tab.active {
+    background: var(--accent-text);
+    color: var(--accent);
+}
+
+.buffer-tab:hover,
+.buffer-tab:focus-visible,
+.present-button:hover,
+.present-button:focus-visible {
+    background: rgba(255, 255, 255, 0.2);
+    outline: none;
+}
+
 .slide-list-item {
     position: relative;
     display: grid;