28:null 29:["$","title",null,{"children":"Slides | Tom Larkworthy | Observable"}] 2e:Ta66,usage = md`## Using it ~~~js import {slideshow} from "@tomlarkworthy/slides" deck = slideshow(runtime, { invalidation, // required: tears down the deck and returns adopted cells module, // module whose cells are slides, default main slides: [ // the order; rewritten in place by the builder "intro", // one cell, reveal's default layout {cell: "chart", layout: "fit"}, // one cell, a built-in layout {cell: ["viewof n", "chart2"], layout: "columns", ratios: [1, 2]}, {cell: "outro", layout: "central", notes: "thank the audience"} ], width: 1600, height: 900, // reveal.js slide size; the deck scales to fit transition: "none", // other options are passed to reveal.js builder: true, // show the ✎ Edit slides strip persist: true, // write builder changes back into this cell's source filename: "talk.html" // show a download link that saves the notebook under this name }) ~~~ \`runtime\` comes from \`@tomlarkworthy/runtime-sdk\`. A slide entry is a cell name, an array of names (a columns slide), or an object with \`cell\` plus any of \`layout\` (\`default\`, \`central\`, \`upper\`, \`left\`, \`columns\`, \`fit\`), \`ratios\`, \`notes\`, \`timing\`, \`className\`, \`contentClassName\` and the reveal.js \`background*\` keys. Use the \`viewof\` name to put an input on a slide. **Controls.** Click the deck to give it keyboard focus. → ↓ PageDown N Space go forward; ← ↑ PageUp P Shift+Space go back; Home and End jump to the ends; F toggles full screen; O toggles the overview; B V or . pause. **Presenting offline.** With \`filename\` set, the bar under the deck has a ⤓ link. It calls \`downloadAnchor\` from \`@tomlarkworthy/exporter-3\`, which serialises the whole notebook — every module, the embedded reveal.js and the current cell sources — into one HTML file under that name. Open that file from disk and the deck runs with no network. **Editing.** ✎ Edit slides opens a strip of cards, one per slide, with the current slide highlighted. Under the strip, each cell on the current slide has its source open in an editor; change slide, by clicking a card or with the keyboard, and the editors follow. Drag a card to reorder, pick a layout, ⇥ merges a slide into the next as columns, ⇤ splits it again, ✕ removes it, and ＋ add cell lists the module's named cells not yet on a slide. Every arrangement change rewrites the \`slides:\` literal of the calling cell, so the order is ordinary source code that exports, diffs and undoes like any other edit.`2f:T43c,lens = md`## Why a lens A slide is not a copy of a cell. The deck observes each named cell and adopts its live output, so editing a cell updates its slide, and an input on a slide drives the rest of the notebook. The frequency slider on slide 3 is the cell \`viewof frequency\`; \`wave_plot\` depends on it and recomputes as it moves. The deck stores one thing: the \`slides:\` list. It is both the set of cells shown and their order, so there is no second list to drift out of step with it — the failure \`@tomlarkworthy/grid-container\` has to guard against with its separate \`include:\` and \`layout:\` literals. Delete the \`deck\` cell and every slide cell keeps computing, with its output back in the notebook; put it back and the same deck returns. The difference from [@tomlarkworthy/sheet](https://observablehq.com/@tomlarkworthy/sheet) is where order comes from. A sheet derives position from the cell's name (\`B3\`), so it needs no stored layout at all. Slides have a free order that no name encodes, so the deck owns it, the same way grid-container owns positions.`30:T3174,slideshow = { const canonName = (n) => typeof n === "string" ? n.replace(/^(viewof|mutable)\$/, "$1 ") : n; const platformName = (n) => String(n).replace(/^(viewof|mutable) /, "$1$"); const lookup = (m, n) => m._scope.get(n) ?? m._scope.get(platformName(n)); const LAYOUTS = { default: {}, central: { className: "slide-central" }, upper: { className: "slide-central slide-central--upper" }, left: { className: "slide-body" }, columns: { className: "slide-columns-page", contentClassName: "slide-columns" }, fit: { className: "slide-fit-page", contentClassName: "slide-fit" } }; const BACKGROUND_KEYS = ["backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundOpacity", "backgroundTransition", "backgroundColor", "backgroundGradient"]; const normalise = (entry) => { const d = typeof entry === "string" || Array.isArray(entry) ? { cell: entry } : { ...entry }; d.cells = (Array.isArray(d.cell) ? d.cell : [d.cell]).filter((c) => typeof c === "string"); return d; }; const literal = (v) => Array.isArray(v) ? `[${v.map(literal).join(", ")}]` : JSON.stringify(v); const serialiseEntry = (d) => { const { cells, ...rest } = d; const cell = cells.length === 1 ? cells[0] : cells; const keys = Object.keys(rest).filter((k) => k !== "cell" && rest[k] !== undefined); if (!keys.length && typeof cell === "string") return JSON.stringify(cell); return "{" + [["cell", cell], ...keys.map((k) => [k, rest[k]])] .map(([k, v]) => `${k}: ${literal(v)}`).join(", ") + "}"; }; const isImportVar = (v) => v._inputs?.some((i) => i._name === "@variable"); const make = (rt, { invalidation, module = main, slides = [], width = 1600, height = 900, transition = "none", builder = true, persist = true, filename = null, ...config } = {}) => { // imports settle over several recomputes at boot; each re-runs this cell, so an unchanged // deck is handed back as-is instead of being rebuilt (which blanks every slide for a frame) const key = JSON.stringify({ slides, width, height, transition, builder, persist, filename, config }) + String(make) + String(slideBuilder) + String(coreSlideStyle); const prev = liveDecks.get(module); if (prev && prev.rt === rt && prev.key === key && !prev.disposed) { prev.claim(invalidation, cellEditor); return prev.wrap; } const remembered = prev?.memory || {}; prev?.dispose(); const entry = { rt, key, memory: null, disposed: false }; liveDecks.set(module, entry); let latestCellEditor = cellEditor; const deckState = slides.map(normalise); const frame = htl.html`

`; const root = htl.html`

`; frame.append(coreSlideStyle(), root); const wrap = htl.html`

${frame}

`; let disposed = false; const container = root.querySelector(".slides"); const cleanups = []; const self = () => [...rt._variables].find((v) => v._value === wrap); // --- the lens: each slide adopts the live DOM of the cells it names const renderValue = (value, name) => { if (value instanceof Node) return value; const node = document.createElement("div"); new Inspector(node).fulfilled(value, name); return node; }; const renderError = (error, name) => { const node = document.createElement("pre"); node.className = "slide-error"; node.textContent = `${name}: ${error?.message ?? error}`; return node; }; const mount = (body, name) => { let current = document.createElement("div"); current.className = "slide-placeholder"; body.append(current); const v = lookup(module, name); if (!v || v._type !== 1) { current.replaceWith((current = renderError("no cell with this name", name))); return; } const place = (node) => { if (node === current) return; if (current.parentNode === body) current.replaceWith(node); else body.append(node); current = node; }; const observer = { _node: body, pending() {}, fulfilled: (value) => place(renderValue(value, name)), rejected: (error) => place(renderError(error, name)) }; const cancel = observe(v, observer, { detachNodes: true }); v._module._runtime._computeSoon(); cleanups.push(() => { cancel(); // hand an adopted element back to the notebook's own view // (the Inspector renders an element that still has a parent as an object, so detach first) if (v._value instanceof Node && v._value.parentNode === body && v._observer?.fulfilled) { v._value.remove(); v._observer.fulfilled(v._value, v._name); } }); }; deckState.forEach((d) => { const layout = LAYOUTS[d.layout] || LAYOUTS.default; const section = document.createElement("section"); section.className = [layout.className, d.className].filter(Boolean).join(" "); const body = document.createElement("div"); body.className = ["slide-content", layout.contentClassName, d.contentClassName].filter(Boolean).join(" "); d.cells.forEach((name) => mount(body, name)); if (body.classList.contains("slide-columns")) body.style.setProperty("--slide-columns", columnTracks(d.cells.length, d.ratios)); section.append(body); for (const k of BACKGROUND_KEYS) if (d[k] != null) section.dataset[k] = String(d[k]); if (d.backgroundImage != null) { section.dataset.backgroundSize ??= "contain"; section.dataset.backgroundPosition ??= "center"; section.dataset.backgroundRepeat ??= "no-repeat"; } if (d.notes != null) { const aside = document.createElement("aside"); aside.className = "notes"; aside.textContent = d.notes; section.append(aside); } if (d.timing != null) section.dataset.timing = String(d.timing); container.append(section); }); if (!deckState.length) { const section = document.createElement("section"); section.className = "slide-central"; section.innerHTML = `

No slides yet. Open the builder below and add a cell.

`; container.append(section); } // --- persistence: the order lives in the calling cell's own `slides:` literal const writeOrder = async (next) => { if (!persist) return; const v = self(); if (!v) return console.warn("slideshow: defining cell not found; order not saved"); const idx = deck?.getIndices?.() || {}; entry.memory = { h: idx.h, v: idx.v, editing: strip?.open }; const source = "[\n " + next.map(serialiseEntry).join(",\n ") + "\n ]"; const src = await decompile([v]); if (v._value !== wrap) return; const out = spliceSlides(src, source); if (!out || out === src) return; const [spec] = compile(out); const [fn] = await realize([spec._definition.toString()], rt); v.define(spec._name, spec._inputs, fn); }; // --- the builder: order, layout, add, remove, edit — every action is a source rewrite let strip = null; const edit = (fn) => { const next = deckState.map((d) => ({ ...d, cells: [...d.cells] })); fn(next); writeOrder(next); }; const candidates = () => { const used = new Set(deckState.flatMap((d) => d.cells)); const me = self(); return [...module._scope] .filter(([n, v]) => typeof n === "string" && v._type === 1 && v !== me) .map(([n, v]) => [canonName(n), v]) .filter(([n, v]) => !/^(module |initial |mutable |cell )/.test(n) && !isImportVar(v)) .filter(([n]) => !used.has(n) && !lookup(module, "viewof " + n)) .filter(([, v]) => typeof v._value !== "function" && !v._value?.slideshow) .map(([n]) => n) .sort(); }; wrap.slideshow = { module, get order() { return deckState.map((d) => ({ ...d, cells: [...d.cells] })); }, candidates, add: (name, at = deckState.length) => edit((s) => s.splice(at, 0, { cells: [name] })), remove: (i) => edit((s) => s.splice(i, 1)), move: (from, to) => edit((s) => s.splice(to, 0, ...s.splice(from, 1))), setLayout: (i, layout) => edit((s) => { s[i].layout = layout === "default" ? undefined : layout; }), setNotes: (i, notes) => edit((s) => { s[i].notes = notes || undefined; }), merge: (i) => edit((s) => { if (s[i + 1]) { s[i].cells.push(...s[i + 1].cells); s[i].layout = "columns"; s.splice(i + 1, 1); } }), split: (i) => edit((s) => { const [first, ...rest] = s[i].cells; s.splice(i, 1, { ...s[i], cells: [first], layout: s[i].layout === "columns" ? undefined : s[i].layout }, ...rest.map((c) => ({ cells: [c] }))); }) }; // an offline copy is the whole notebook, so the deck keeps working with the network unplugged const download = filename ? downloadAnchor({ className: "sl-download", title: `Save this notebook as ${filename} to present offline` }, `⤓ ${filename}`, { filename, mains: rt.mains }) : null; if (builder || download) { strip = slideBuilder(wrap, { cellEditor: (...a) => latestCellEditor(...a), lookup: (n) => lookup(module, n), layouts: Object.keys(LAYOUTS), open: remembered.editing, arrange: builder, download }); wrap.append(strip); } // --- Reveal needs the deck in the document to measure it let deck = null; wrap.ready = (async () => { while (!frame.isConnected) { await new Promise((r) => requestAnimationFrame(r)); if (disposed) return null; } owner = self(); deck = new Reveal(root, { ...config, width, height, transition, embedded: true, keyboard: false }); await deck.initialize(); if (disposed) { deck.destroy(); return null; } if (remembered.h != null) deck.slide(Math.min(remembered.h, deckState.length - 1), remembered.v); wrap.deck = deck; deck.on("slidechanged", () => strip?.sync(deck.getIndices().h)); strip?.sync(deck.getIndices().h); root.addEventListener("keydown", onKeydown); return deck; })(); const onKeydown = (event) => { if (event.ctrlKey || event.metaKey || event.target.closest?.("input, textarea, select, [contenteditable='true'], .cm-editor")) return; const nav = { skipFragments: event.altKey }; switch (event.key) { case "ArrowRight": case "ArrowDown": case "PageDown": case "n": case "N": deck.next(nav); break; case "ArrowLeft": case "ArrowUp": case "PageUp": case "p": case "P": deck.prev(nav); break; case " ": event.shiftKey ? deck.prev(nav) : deck.next(nav); break; case "Home": deck.slide(0); break; case "End": deck.slide(deck.getHorizontalSlides().length - 1); break; case "o": case "O": deck.toggleOverview(); break; case "f": case "F": { const viewport = deck.getViewportElement(); const doc = viewport.ownerDocument; (doc.fullscreenElement ? doc.exitFullscreen() : viewport.requestFullscreen()) .catch((e) => console.warn("slideshow: fullscreen change refused", e)); break; } case "b": case "B": case "v": case "V": case ".": deck.togglePause(); break; default: return; } event.preventDefault(); event.stopPropagation(); }; // `invalidation` covers redefinition; deleting the cell never resolves it, so watch for that too let owner = null; let teardown = null; const dispose = () => { if (disposed) return; disposed = entry.disposed = true; clearTimeout(teardown); if (liveDecks.get(module) === entry) liveDecks.delete(module); offCodeChange(); root.removeEventListener("keydown", onKeydown); for (const c of cleanups) c(); strip?.dispose?.(); deck?.destroy(); }; const offCodeChange = onCodeChange(({ variable, previous }) => { if (!variable && owner && previous?.variable === owner) dispose(); }); // a re-run that keeps this deck claims it before the grace period ends const claim = (inv, editor) => { clearTimeout(teardown); teardown = null; latestCellEditor = editor; inv?.then(() => { teardown = setTimeout(dispose, 3000); }); }; Object.assign(entry, { wrap, dispose, claim }); claim(invalidation, cellEditor); return wrap; }; return make; }31:T12f0,slideBuilder = (wrap, { cellEditor, lookup, layouts, open = false, arrange = true, download = null }) => { const api = wrap.slideshow; const order = api.order; const el = htl.html`

click the deck, then ← → to navigate · F fullscreen · O overview

`; const toggle = el.querySelector(".sl-toggle"); const panel = el.querySelector(".sl-panel"); const list = el.querySelector(".sl-strip"); const editorHost = el.querySelector(".sl-editor"); const count = el.querySelector(".sl-count"); const setOpen = (b) => { el.open = b; panel.hidden = !b; toggle.textContent = b ? "✓ Done editing" : "✎ Edit slides"; showEditors(); }; toggle.onclick = () => setOpen(!el.open); toggle.hidden = !arrange; if (download) toggle.after(download); const button = (text, title, onclick) => { const b = htl.html``; b.onclick = (e) => { e.stopPropagation(); onclick(); }; return b; }; // while editing, the current slide's cells each get an editor-5 editor under the strip let current = 0, shown = null; function showEditors() { const d = el.open ? order[current] : null; const key = d ? `${current}:${d.cells.join("|")}` : null; if (key === shown) return; shown = key; editorHost.replaceChildren(...(d?.cells ?? []).map((name) => { const v = lookup(name); let ed; try { ed = v ? cellEditor(v, { pinned: true }) : htl.html`no cell named ${name}`; } catch (err) { ed = htl.html`

editor failed: ${String(err)}

`; } return htl.html`

${name}

${ed}

`; })); } const focusEditor = (name) => editorHost.querySelector(`[data-cell="${CSS.escape(name)}"]`)?.scrollIntoView({ block: "nearest" }); let dragFrom = null; order.forEach((d, i) => { const layout = htl.html``; layout.value = d.layout && layouts.includes(d.layout) ? d.layout : "default"; layout.onchange = () => api.setLayout(i, layout.value); layout.onclick = (e) => e.stopPropagation(); const names = htl.html`

${d.cells.map((n) => { const chip = htl.html`${n}`; chip.onclick = (e) => { e.stopPropagation(); wrap.deck?.slide(i); focusEditor(n); }; return chip; })}

`; const card = htl.html`

${i + 1}${layout}

${names}

`; const actions = card.querySelector(".sl-actions"); if (i < order.length - 1) actions.append(button("⇥", "merge with next slide into columns", () => api.merge(i))); if (d.cells.length > 1) actions.append(button("⇤", "split into one slide per cell", () => api.split(i))); actions.append(button("✕", "remove from deck (the cell is kept)", () => api.remove(i))); card.onclick = () => wrap.deck?.slide(i); card.ondragstart = (e) => { dragFrom = i; e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", String(i)); }; card.ondragover = (e) => { if (dragFrom != null) { e.preventDefault(); card.classList.add("sl-drop"); } }; card.ondragleave = () => card.classList.remove("sl-drop"); card.ondrop = (e) => { e.preventDefault(); card.classList.remove("sl-drop"); if (dragFrom != null && dragFrom !== i) api.move(dragFrom, i); dragFrom = null; }; card.ondragend = () => { dragFrom = null; }; list.append(card); }); const add = htl.html``; const fillAdd = () => { const names = api.candidates(); add.replaceChildren(htl.html``, ...names.map((n) => htl.html`