npm - deckrun - Versions diffs - 1.3.0 → 1.6.0 - Mend

deckrun 1.3.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +217 -35
package/dist/editor-content.js +86 -1
package/dist/editor.js +528 -216
package/dist/fragments.js +71 -0
package/dist/generate.js +1040 -45
package/dist/index.js +353 -53
package/dist/lint.js +218 -0
package/dist/parser.js +85 -0
package/dist/pdf.js +5 -1
package/dist/presentation-options.js +287 -0
package/dist/preview.js +125 -7
package/dist/rich-content.js +170 -0
package/dist/themes.js +8 -5
package/package.json +5 -2

package/dist/editor.js CHANGED Viewed

@@ -2,7 +2,8 @@ import { RESET_CSS } from "./generate.js";
 import { DEFAULT_SIZE, DEFAULT_THEME, decorOf, findFont, fontSummaries, googleFontsHref, resolveSizeName, sizeSummaries, themeSummaries, themeSwitchableCss, } from "./themes.js";
 import { SNIPPETS, SNIPPET_GROUPS, TIPS, WELCOME_DECK, } from "./editor-content.js";
 import { PREVIEW_WIDTH, PREVIEW_HEIGHT } from "./preview.js";
-function bootstrapJson(theme, size, fonts) {
+import { DEFAULT_TEMPLATE, DEFAULT_TRANSITION, resolveTemplateName, resolveTransitionName, templateSummaries, transitionSummaries, } from "./presentation-options.js";
+function bootstrapJson(theme, size, fonts, template, transition) {
     const payload = {
         theme,
         themes: themeSummaries(),
@@ -10,6 +11,10 @@ function bootstrapJson(theme, size, fonts) {
         sizes: sizeSummaries(),
         fonts,
         faces: fontSummaries(),
+        template,
+        templates: templateSummaries(),
+        transition,
+        transitions: transitionSummaries(),
         width: PREVIEW_WIDTH,
         height: PREVIEW_HEIGHT,
         groups: SNIPPET_GROUPS,
@@ -21,15 +26,17 @@ function bootstrapJson(theme, size, fonts) {
     return JSON.stringify(payload).replace(/</g, "\\u003c");
 }
 /** The Markdown editor served when `deckrun` is launched without a file. */
-export function generateEditorHtml(theme = DEFAULT_THEME, sizeInput = DEFAULT_SIZE, fontInput = {}) {
+export function generateEditorHtml(theme = DEFAULT_THEME, sizeInput = DEFAULT_SIZE, fontInput = {}, templateInput = DEFAULT_TEMPLATE, transitionInput = DEFAULT_TRANSITION) {
     const size = resolveSizeName(sizeInput);
+    const template = resolveTemplateName(templateInput);
+    const transition = resolveTransitionName(transitionInput);
     const fonts = { head: findFont(fontInput.head), body: findFont(fontInput.body) };
     return `<!DOCTYPE html>
-<html lang="en" data-theme="${theme}" data-decor="${decorOf(theme)}">
+<html lang="en" data-theme="${theme}" data-decor="${decorOf(theme)}" data-size="${size}" data-template="${template}" data-transition="${transition}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>deckrun editor</title>
+  <title>deckrun · editor</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="${googleFontsHref()}" rel="stylesheet">
@@ -50,7 +57,8 @@ html, body {
 }
 button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
-::selection { background: var(--surface1); }
+::selection { background: var(--selection-bg, var(--accent-line, rgba(56, 139, 253, 0.35))); color: var(--selection-text, inherit); }
+::-moz-selection { background: var(--selection-bg, var(--accent-line, rgba(56, 139, 253, 0.35))); color: var(--selection-text, inherit); }
 ::-webkit-scrollbar { width: 9px; height: 9px; }
 ::-webkit-scrollbar-track { background: transparent; }
@@ -305,21 +313,30 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   position: absolute;
   inset: 0;
   margin: 0;
-  padding: 18px 20px 45vh 20px;
+  padding: 18px 20px;
   font-family: var(--font-mono);
   font-size: 13.5px;
   font-weight: 400;
+  font-style: normal;
   line-height: 1.75;
   letter-spacing: 0;
+  word-spacing: 0;
   white-space: pre-wrap;
   overflow-wrap: break-word;
   word-break: break-word;
   tab-size: 2;
   border: 0;
+  box-sizing: border-box;
   background: transparent;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+#hl::-webkit-scrollbar, #src::-webkit-scrollbar {
+  display: none;
 }
-#hl { z-index: 1; overflow: hidden; pointer-events: none; color: var(--subtext0); counter-reset: sld 1; }
+#hl { z-index: 1; overflow: hidden; pointer-events: none; color: var(--subtext0); }
 #measure { z-index: 0; visibility: hidden; overflow: hidden; }
 #src {
@@ -332,38 +349,29 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   outline: none;
 }
-#src::selection { background: var(--surface1); color: transparent; }
+#src::selection { background: var(--selection-bg, var(--accent-line, rgba(56, 139, 253, 0.35))); color: transparent; }
+#src::-moz-selection { background: var(--selection-bg, var(--accent-line, rgba(56, 139, 253, 0.35))); color: transparent; }
-/* Markdown tokens */
-.t-h1 { color: var(--accent); font-weight: 700; }
-.t-h2 { color: var(--accent-2); font-weight: 600; }
-.t-h3 { color: var(--accent-3); font-weight: 500; }
+/* Markdown tokens — color only to guarantee pixel-identical alignment */
+.t-h1 { color: var(--accent); }
+.t-h2 { color: var(--accent-2); }
+.t-h3 { color: var(--accent-3); }
 .t-h4 { color: var(--teal); }
-.t-strong { color: var(--peach); font-weight: 600; }
-.t-em { color: var(--subtext1); font-style: italic; }
+.t-strong { color: var(--peach); }
+.t-em { color: var(--subtext1); }
 .t-code { color: var(--green); }
 .t-fence { color: var(--overlay1); }
 .t-codeline { color: var(--subtext1); }
-.t-quote { color: var(--subtext0); font-style: italic; }
+.t-quote { color: var(--subtext0); }
 .t-marker { color: var(--accent); }
 .t-link { color: var(--blue); }
 .t-url { color: var(--overlay0); }
 .t-img { color: var(--sapphire); }
-.t-dir { color: var(--yellow); font-weight: 600; }
-.t-note { color: var(--overlay0); font-style: italic; }
+.t-dir { color: var(--yellow); }
+.t-note { color: var(--overlay0); }
 .t-html { color: var(--pink); }
 .t-table { color: var(--lavender); }
-.t-sep { position: relative; color: var(--accent); counter-increment: sld; }
-.t-sep::after {
-  content: 'slide ' counter(sld);
-  position: absolute;
-  left: calc(100% + 14px);
-  top: 0;
-  white-space: nowrap;
-  color: var(--overlay0);
-  font-size: 11px;
-}
+.t-sep { color: var(--accent); }
 /* ── Drop target ──────────────────────────────────────────────────────── */
 #pane-edit.is-dropping::after {
@@ -382,56 +390,6 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   pointer-events: none;
 }
-/* ── Contextual nudge ─────────────────────────────────────────────────── */
-#nudge {
-  position: absolute;
-  left: 14px;
-  right: 14px;
-  bottom: 14px;
-  z-index: 7;
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 11px 13px;
-  background: var(--base);
-  border: 1px solid var(--surface1);
-  border-left: 2px solid var(--accent);
-  border-radius: 9px;
-  box-shadow: var(--shadow-md);
-  opacity: 0;
-  transform: translateY(10px);
-  pointer-events: none;
-  transition: opacity 0.22s ease, transform 0.22s ease;
-}
-#nudge.is-on { opacity: 1; transform: translateY(0); pointer-events: all; }
-#nudge__body { flex: 1 1 auto; }
-#nudge__label {
-  font-size: 10px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--accent);
-  margin-bottom: 4px;
-}
-#nudge__text { font-size: 12.5px; color: var(--subtext1); line-height: 1.6; }
-#nudge__text code {
-  font: inherit;
-  color: var(--green);
-  background: var(--surface-soft);
-  border-radius: 4px;
-  padding: 0.05em 0.3em;
-}
-#nudge__acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
-.nudge-btn {
-  font-size: 11px;
-  color: var(--subtext0);
-  border: 1px solid var(--surface1);
-  border-radius: 6px;
-  padding: 4px 8px;
-}
-.nudge-btn:hover { border-color: var(--accent); color: var(--text); }
-.nudge-btn--x { padding: 4px 7px; color: var(--overlay0); }
 /* ── Preview ──────────────────────────────────────────────────────────── */
 #prev-head {
   display: flex;
@@ -445,6 +403,22 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   color: var(--overlay1);
 }
+#overflow-badge {
+  display: none;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px;
+  border: 1px solid var(--yellow);
+  border-radius: 999px;
+  color: var(--yellow);
+  background: var(--surface-soft);
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+#overflow-badge.is-on { display: inline-flex; }
 /* ── Dropdown menu ────────────────────────────────────────────────────── */
 .menu { position: relative; display: inline-flex; }
 .menu__chev { font-size: 9px; color: var(--overlay0); }
@@ -494,6 +468,21 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   white-space: nowrap;
 }
+.menu__pop--template { min-width: 390px; padding: 7px; }
+.menu-section + .menu-section { margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--surface0); }
+.menu-section__title {
+  padding: 2px 10px 5px;
+  font-size: 9px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--overlay0);
+}
+.menu__pop--template button.is-on {
+  background: var(--accent-soft);
+  border-left-color: var(--accent);
+}
+.menu__pop--template button.is-on .menu__name { color: var(--accent); }
 .seg { display: flex; border: 1px solid var(--surface0); border-radius: 7px; overflow: hidden; }
 .seg button { font-size: 11px; padding: 3px 10px; color: var(--overlay1); }
 .seg button.is-on { background: var(--surface0); color: var(--text); }
@@ -580,6 +569,19 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
 #tipbar button { color: var(--overlay0); padding: 0 3px; }
 #tipbar button:hover { color: var(--text); }
+#follow-chip {
+  flex: 0 0 auto;
+  border: 1px solid var(--surface0);
+  border-radius: 5px;
+  padding: 1px 7px;
+  color: var(--accent2);
+  cursor: pointer;
+  user-select: none;
+}
+#follow-chip:hover { border-color: var(--accent2); }
+#follow-chip b { font-weight: 600; }
+#follow-chip.hidden { display: none; }
 /* ── Command palette ──────────────────────────────────────────────────── */
 #palette, #guide, #library { position: fixed; inset: 0; z-index: 40; display: none; }
 #palette.is-on, #guide.is-on, #library.is-on { display: block; }
@@ -1065,7 +1067,8 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
 }
 [data-doc-kind="html"] #btn-guide,
-[data-doc-kind="html"] #btn-palette {
+[data-doc-kind="html"] #btn-palette,
+[data-doc-kind="html"] #template-wrap {
   display: none !important;
 }
@@ -1118,6 +1121,30 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
 }
 .start-card__acts button:hover { border-color: var(--accent); color: var(--text); }
+.start-options {
+  margin-top: 12px;
+  padding-top: 11px;
+  border-top: 1px solid var(--surface0);
+}
+.start-options__row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
+.start-options__label {
+  flex: 0 0 72px;
+  font-size: 9px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--overlay0);
+}
+.start-options__choices { display: flex; flex-wrap: wrap; gap: 5px; }
+.start-choice {
+  padding: 4px 8px;
+  font-size: 10.5px;
+  color: var(--subtext0);
+  border: 1px solid var(--surface1);
+  border-radius: 6px;
+}
+.start-choice:hover { color: var(--text); border-color: var(--accent); }
+.start-choice.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
 .start-card__url { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
 .start-card__url input {
   flex: 1 1 auto;
@@ -1173,6 +1200,21 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         </button>
       </div>
     </span>
+    <span class="menu" id="template-wrap">
+      <button class="btn" id="btn-template" aria-haspopup="true" aria-expanded="false" title="Composition template and slide transition">
+        <span id="template-label">template</span> <span class="menu__chev">&#9662;</span>
+      </button>
+      <div class="menu__pop menu__pop--template" id="template-menu">
+        <div class="menu-section">
+          <div class="menu-section__title">template</div>
+          <div id="template-list"></div>
+        </div>
+        <div class="menu-section">
+          <div class="menu-section__title">transition</div>
+          <div id="transition-list"></div>
+        </div>
+      </div>
+    </span>
     <button class="btn" id="btn-theme" title="Pick a theme">
       <span class="th-dot" id="theme-dot"></span>
       <span id="theme-label">theme</span>
@@ -1208,16 +1250,6 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         <pre id="measure" aria-hidden="true"></pre>
         <textarea id="src" spellcheck="false" autocomplete="off" autocapitalize="off" wrap="soft" aria-label="Markdown source"></textarea>
       </div>
-      <div id="nudge">
-        <div id="nudge__body">
-          <div id="nudge__label">try this</div>
-          <div id="nudge__text"></div>
-        </div>
-        <div id="nudge__acts">
-          <button class="nudge-btn" id="nudge-do">insert</button>
-          <button class="nudge-btn nudge-btn--x" id="nudge-x" title="Dismiss">&times;</button>
-        </div>
-      </div>
       <textarea id="src-html" spellcheck="false" autocomplete="off" autocapitalize="off" wrap="off" aria-label="HTML source"></textarea>
     </section>
@@ -1228,6 +1260,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         <button class="step" id="btn-prev" title="Previous slide">&#8592;</button>
         <span id="prev-count">slide 0 / 0</span>
         <button class="step" id="btn-next" title="Next slide">&#8594;</button>
+        <span id="overflow-badge" title="This slide is clipped. Shorten it or split it with three dashes.">overflow</span>
         <span class="spacer"></span>
         <span id="prev-scale"></span>
         <div class="seg">
@@ -1253,6 +1286,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     <span id="words">0 words</span>
     <span id="chip-slides">0 slides</span>
     <span id="save-state"></span>
+    <span id="follow-chip" class="hidden" title="The editor is mirroring the presented deck. Click to stop following.">following deck &middot; <b id="follow-slide">1</b></span>
     <span id="tipbar">
       <span class="tag">tip</span>
       <span id="tip-text"></span>
@@ -1336,6 +1370,16 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
           <button id="start-md-blank">start blank</button>
           <button id="start-md-upload">upload .md</button>
         </span>
+        <div class="start-options">
+          <div class="start-options__row">
+            <span class="start-options__label">template</span>
+            <span class="start-options__choices" id="start-template-list"></span>
+          </div>
+          <div class="start-options__row">
+            <span class="start-options__label">transition</span>
+            <span class="start-options__choices" id="start-transition-list"></span>
+          </div>
+        </div>
       </div>
       <div class="start-card" id="start-html-card">
         <span class="start-card__title">HTML document</span>
@@ -1359,7 +1403,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
 <div id="toasts"></div>
 <input type="file" id="file-any" accept=".md,.markdown,text/markdown,text/plain,.html,.htm,text/html" hidden>
-<script type="application/json" id="bootstrap">${bootstrapJson(theme, size, fonts)}</script>
+<script type="application/json" id="bootstrap">${bootstrapJson(theme, size, fonts, template, transition)}</script>
 <script>
 (function () {
   'use strict';
@@ -1376,6 +1420,8 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     size:    'deckrun.size.v1',
     head:    'deckrun.font.head.v1',
     body:    'deckrun.font.body.v1',
+    template:'deckrun.template.v1',
+    transition:'deckrun.transition.v1',
     split:   'deckrun.split.v1',
     mode:    'deckrun.mode.v1',
     nudge:   'deckrun.nudges.v1',
@@ -1460,11 +1506,20 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   }
   /** Returns the new deck's id, or null if this browser refused to store it. */
-  function createDeck(name, content, kind) {
+  function createDeck(name, content, kind, template, transition) {
     var id = newDeckId();
     if (!lsSet(K.deck + id, content)) return null;
     var list = loadIndex();
-    list.unshift({ id: id, name: name || 'untitled', kind: kind || 'markdown', slides: 0, chars: content.length, at: Date.now() });
+    list.unshift({
+      id: id,
+      name: name || 'untitled',
+      kind: kind || 'markdown',
+      slides: 0,
+      chars: content.length,
+      template: template || (typeof state !== 'undefined' && state.template ? state.template : D.template),
+      transition: transition || (typeof state !== 'undefined' && state.transition ? state.transition : D.transition),
+      at: Date.now()
+    });
     if (!saveIndex(list)) { lsDel(K.deck + id); return null; }
     return id;
   }
@@ -1488,6 +1543,19 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     return days + 'd ago';
   }
+  function updateDocTitle() {
+    if ($('screen-start') && $('screen-start').classList.contains('is-on')) {
+      document.title = 'deckrun \u00b7 start';
+      return;
+    }
+    if ($('library') && $('library').classList.contains('is-on')) {
+      document.title = 'deckrun \u00b7 library';
+      return;
+    }
+    var name = ($('docname').value || '').trim();
+    document.title = name ? name + ' \u00b7 deckrun' : 'deckrun \u00b7 editor';
+  }
   /** One deck's metadata is refreshed from the editor on every save. */
   function touchCurrent() {
     var list = loadIndex();
@@ -1495,6 +1563,8 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
       if (list[i].id === state.deckId) {
         list[i].name = $('docname').value.trim() || 'untitled';
         list[i].kind = state.kind;
+        list[i].template = state.template;
+        list[i].transition = state.transition;
         if (state.kind === 'html') {
           list[i].slides = 0;
           list[i].chars = srcHtml.value.length;
@@ -1506,6 +1576,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         break;
       }
     }
+    updateDocTitle();
     return saveIndex(list);
   }
@@ -1560,6 +1631,22 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     return SIZE_BY_ID[id] ? id : (SIZE_BY_ID[D.size] ? D.size : 'm');
   }
+  var TEMPLATES = D.templates;
+  var TEMPLATE_BY_ID = {};
+  TEMPLATES.forEach(function (item) { TEMPLATE_BY_ID[item.id] = item; });
+  function pickTemplate(id) {
+    return TEMPLATE_BY_ID[id] ? id : (TEMPLATE_BY_ID[D.template] ? D.template : 'classic');
+  }
+  var TRANSITIONS = D.transitions;
+  var TRANSITION_BY_ID = {};
+  TRANSITIONS.forEach(function (item) { TRANSITION_BY_ID[item.id] = item; });
+  function pickTransition(id) {
+    return TRANSITION_BY_ID[id] ? id : (TRANSITION_BY_ID[D.transition] ? D.transition : 'slide');
+  }
   var FACES = D.faces;
   var FACE_BY_ID = {};
   FACES.forEach(function (f) { FACE_BY_ID[f.id] = f; });
@@ -1577,7 +1664,6 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   var elChipSlides = $('chip-slides'), elSave = $('save-state'), elPos = $('pos'), elWords = $('words');
   var elCount = $('prev-count'), elScale = $('prev-scale');
   var elNotes = $('notes'), elNotesText = $('notes__text');
-  var elNudge = $('nudge'), elNudgeText = $('nudge__text'), elNudgeDo = $('nudge-do'), elNudgeX = $('nudge-x');
   var palette = $('palette'), palInput = $('pal-input'), palList = $('pal-list');
   var guide = $('guide'), guideBody = $('guide-body');
   var srcHtml = $('src-html'), frameHtml = $('frame-html');
@@ -1594,6 +1680,8 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     size: pickSize(lsGet(K.size, D.size)),
     head: pickFont(lsGet(K.head, D.fonts.head)),
     body: pickFont(lsGet(K.body, D.fonts.body)),
+    template: pickTemplate(lsGet(K.template, D.template)),
+    transition: pickTransition(lsGet(K.transition, D.transition)),
     frameReady: false,
     overflow: {},
     dismissed: {},
@@ -1609,6 +1697,75 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     if (saved && saved.length) saved.forEach(function (id) { state.dismissed[id] = true; });
   } catch (e) {}
+  // ── Following the presented deck ───────────────────────────────────────
+  // Presenting hands the deck tab this editor's session id (ps=... in the
+  // URL), and the editor listens on that same channel: the preview and the
+  // notes panel mirror the deck's current slide, so the editor window is the
+  // presenter's screen and the deck tab is the projector. No second window
+  // is involved.
+  var FOLLOW_KEY = 'deckrun.presenter.session';
+  var followSid = null;
+  try { followSid = sessionStorage.getItem(FOLLOW_KEY); } catch (e) {}
+  if (!followSid) {
+    followSid = (window.crypto && crypto.randomUUID)
+      ? crypto.randomUUID()
+      : 'e' + Date.now().toString(36) + Math.random().toString(36).slice(2);
+    try { sessionStorage.setItem(FOLLOW_KEY, followSid); } catch (e) {}
+  }
+  var followChan = (typeof BroadcastChannel !== 'undefined')
+    ? new BroadcastChannel('deckrun:' + followSid)
+    : null;
+  var following = false;   // the editor is mirroring the deck right now
+  var expectingDeck = false; // a present just went out: follow the deck that answers
+  var deckNotes = [];      // the deck's own notes, authoritative while following
+  var followChipEl = $('follow-chip');
+  var followSlideEl = $('follow-slide');
+  /** The editor drives the deck as well as the preview: wherever the
+      presenter lands in the editor, the deck goes there too. The deck echoes
+      its state back over the same channel, which is what keeps both in step. */
+  function announceIndex(i) {
+    if (followChan) followChan.postMessage({ id: followSid, type: 'goto', index: i });
+  }
+  function followDeck(i) {
+    var n = state.slides.length;
+    if (!n) return;
+    i = Math.max(0, Math.min(n - 1, i));
+    var changed = i !== state.index;
+    state.index = i;
+    state.notes = deckNotes;
+    followSlideEl.textContent = String(i + 1);
+    if (changed) pushFrame();
+    renderCounts();
+  }
+  if (followChan) {
+    followChan.onmessage = function (e) {
+      var m = e.data || {};
+      if (m.id !== followSid) return;
+      if (m.type === 'init') {
+        deckNotes = m.notes || [];
+        if (expectingDeck) {
+          expectingDeck = false;
+          following = true;
+        }
+        followChipEl.classList.toggle('hidden', !following);
+      } else if (m.type === 'state') {
+        if (following) followDeck(m.index);
+      }
+    };
+    setInterval(function () {
+      followChan.postMessage({ id: followSid, type: 'ready' });
+    }, 2000);
+  }
+  followChipEl.addEventListener('click', function () {
+    following = false;
+    followChipEl.classList.add('hidden');
+  });
   // ── Toasts ─────────────────────────────────────────────────────────────
   function toast(message, kind, actionLabel, action) {
     var el = document.createElement('div');
@@ -1701,7 +1858,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         out.push('<span class="t-sep">' + esc(line) + '</span>');
         continue;
       }
-      if (/^\\s*&lt;!--/.test(esc(line)) || /^\\s*<!--/.test(line)) {
+      if (/^\\s*<!--/.test(line)) {
         out.push('<span class="t-note">' + esc(line) + '</span>');
         continue;
       }
@@ -1712,7 +1869,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         out.push('<span class="t-h' + lvl + '">' + inlineTokens(line) + '</span>');
         continue;
       }
-      if (/^\\s*&gt;/.test(esc(line))) {
+      if (/^\\s*>/.test(line)) {
         out.push('<span class="t-quote">' + inlineTokens(line) + '</span>');
         continue;
       }
@@ -1816,6 +1973,10 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     elCount.textContent = 'slide ' + (n ? state.index + 1 : 0) + ' / ' + n;
     $('btn-prev').disabled = state.index <= 0;
     $('btn-next').disabled = state.index >= n - 1;
+    $('overflow-badge').classList.toggle(
+      'is-on',
+      state.mode === 'single' && !!state.overflow[state.index]
+    );
     var note = state.notes[state.index];
     if (note) { elNotesText.textContent = note; elNotes.classList.add('is-on'); }
@@ -1843,6 +2004,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
       }
     }
     post({ type: 'index', index: state.index });
+    announceIndex(state.index);
     renderCounts();
   }
@@ -1850,12 +2012,6 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     var before = src.value.slice(0, src.selectionStart);
     var lines = before.split('\\n');
     elPos.textContent = 'Ln ' + lines.length + ', Col ' + (lines[lines.length - 1].length + 1);
-    var i = caretSlide();
-    if (i !== state.index) {
-      state.index = i;
-      post({ type: 'index', index: i });
-      renderCounts();
-    }
   }
   // ── Parse round-trip: the server owns the Markdown, so what you see here
@@ -2081,58 +2237,8 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   var bySnippetId = {};
   D.snippets.forEach(function (s) { bySnippetId[s.id] = s; });
-  function evalNudges() {
-    if (Date.now() - state.bootAt < 5000) return;
-    var ctx = docContext();
-    for (var i = 0; i < NUDGE_RULES.length; i++) {
-      var rule = NUDGE_RULES[i];
-      if (state.dismissed[rule.id]) continue;
-      var message = rule.test(ctx);
-      if (!message) continue;
-      showNudge(rule, message);
-      return;
-    }
-    hideNudge();
-  }
-  function showNudge(rule, message) {
-    if (state.activeNudge && state.activeNudge.rule.id === rule.id &&
-        state.activeNudge.message === message) return;
-    if (state.activeNudge && Date.now() - state.nudgeShownAt < 2500) return;
-    state.activeNudge = { rule: rule, message: message };
-    state.nudgeShownAt = Date.now();
-    elNudgeText.innerHTML = message;
-    elNudgeDo.textContent = rule.action === 'download' ? 'download' : 'insert';
-    elNudge.classList.add('is-on');
-  }
-  function hideNudge() {
-    state.activeNudge = null;
-    elNudge.classList.remove('is-on');
-  }
-  elNudgeDo.addEventListener('click', function () {
-    var active = state.activeNudge;
-    if (!active) return;
-    if (active.rule.action) runAction(active.rule.action);
-    else if (bySnippetId[active.rule.snippet]) insertSnippet(bySnippetId[active.rule.snippet]);
-    hideNudge();
-  });
-  elNudgeX.addEventListener('click', function () {
-    var active = state.activeNudge;
-    if (active) {
-      state.dismissed[active.rule.id] = true;
-      // A tip stays dismissed for good; a real problem may nag again next session.
-      if (!active.rule.sticky) {
-        var keep = Object.keys(state.dismissed).filter(function (id) {
-          return !NUDGE_RULES.some(function (r) { return r.id === id && r.sticky; });
-        });
-        lsSet(K.nudge, JSON.stringify(keep));
-      }
-    }
-    hideNudge();
-  });
+  function evalNudges() {}
+  function hideNudge() {}
   // ── Tips carousel ──────────────────────────────────────────────────────
   var tipTimer = null;
@@ -2330,6 +2436,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     guide.classList.remove('is-on');
     $('library').classList.remove('is-on');
     if ($('themes').classList.contains('is-on')) closeThemes(true);
+    updateDocTitle();
     if (!keepFocus) src.focus();
   }
@@ -2372,7 +2479,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   function exportHtml() {
     if (isEmpty()) { toast('Nothing to export yet.', 'warn'); return; }
     var builder = state.kind === 'html' ? buildHtmlDoc : buildDeck;
-    builder(false)
+    builder(false, true)
       .then(function (data) { return fetch(data.path); })
       .then(function (r) {
         if (!r.ok) throw new Error('server said ' + r.status);
@@ -2403,7 +2510,16 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     var pdfUrl = state.kind === 'html' ? '/__pdf-doc' : '/__pdf';
     var pdfBody = state.kind === 'html'
       ? { html: srcHtml.value, title: $('docname').value }
-      : { markdown: src.value, theme: state.theme, size: state.size, head: state.head, body: state.body, title: $('docname').value };
+      : {
+          markdown: src.value,
+          theme: state.theme,
+          size: state.size,
+          head: state.head,
+          body: state.body,
+          template: state.template,
+          transition: state.transition,
+          title: $('docname').value
+        };
     fetch(pdfUrl, {
       method: 'POST',
@@ -2460,7 +2576,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
       });
   }
-  function buildDeck(forPrint) {
+  function buildDeck(forPrint, standalone) {
     return fetch('/__present', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -2470,8 +2586,11 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         size: state.size,
         head: state.head,
         body: state.body,
+        template: state.template,
+        transition: state.transition,
         title: $('docname').value,
-        print: !!forPrint
+        print: !!forPrint,
+        standalone: !!standalone
       })
     }).then(function (r) {
       if (!r.ok) throw new Error('server said ' + r.status);
@@ -2497,11 +2616,13 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   function present() {
     if (isEmpty()) { toast('Nothing to present yet.', 'warn'); return; }
+    expectingDeck = true;
     var builder = state.kind === 'html' ? buildHtmlDoc : buildDeck;
     var tab = window.open('about:blank', '_blank');
     builder(false)
       .then(function (data) {
-        var url = location.origin + data.path;
+        var url = location.origin + data.path +
+          (data.path.indexOf('?') >= 0 ? '&' : '?') + 'ps=' + followSid;
         if (tab) tab.location.replace(url);
         else toast('Allow pop-ups to present in a new tab.', 'warn', 'present here', function () { location.href = url; });
       })
@@ -2538,6 +2659,30 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     paintSizeSeg();
   }
+  function setTemplate(next, remember) {
+    var id = pickTemplate(next);
+    state.template = id;
+    document.documentElement.dataset.template = id;
+    if (remember !== false) {
+      lsSet(K.template, id);
+      scheduleSave();
+    }
+    pushLook();
+    paintTemplateMenu();
+  }
+  function setTransition(next, remember) {
+    var id = pickTransition(next);
+    state.transition = id;
+    document.documentElement.dataset.transition = id;
+    if (remember !== false) {
+      lsSet(K.transition, id);
+      scheduleSave();
+    }
+    pushLook();
+    paintTemplateMenu();
+  }
   /**
    * Heading and body faces are chosen separately, and either can be handed
    * back to the theme by picking nothing. Passing null is what clears it.
@@ -2563,6 +2708,8 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         root.dataset.theme = state.theme;
         root.dataset.decor = decorOf(state.theme);
         root.dataset.size = state.size;
+        root.dataset.template = state.template;
+        root.dataset.transition = state.transition;
         if (state.head) root.dataset.head = state.head; else delete root.dataset.head;
         if (state.body) root.dataset.body = state.body; else delete root.dataset.body;
       }
@@ -2574,7 +2721,9 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
           theme: state.theme,
           size: state.size,
           head: state.head,
-          body: state.body
+          body: state.body,
+          template: state.template,
+          transition: state.transition
         }, '*');
       }
     } catch (e) {}
@@ -2587,10 +2736,13 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
       theme: state.theme,
       size: state.size,
       head: state.head,
-      body: state.body
+      body: state.body,
+      template: state.template,
+      transition: state.transition
     });
     syncHtmlFrameTheme();
     paintThemeButton();
+    paintTemplateMenu();
   }
   function faceLabel(id) {
@@ -2654,6 +2806,45 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     $('btn-theme').title = t ? t.label + ' — ' + t.blurb : 'Pick a theme';
   }
+  function optionRow(kind, item) {
+    var b = document.createElement('button');
+    b.dataset[kind] = item.id;
+    var name = document.createElement('span');
+    name.className = 'menu__name';
+    name.textContent = item.label;
+    var hint = document.createElement('span');
+    hint.className = 'menu__hint';
+    hint.textContent = item.blurb;
+    b.appendChild(name);
+    b.appendChild(hint);
+    return b;
+  }
+  function buildTemplateMenu() {
+    var templateHost = $('template-list');
+    var transitionHost = $('transition-list');
+    templateHost.innerHTML = '';
+    transitionHost.innerHTML = '';
+    TEMPLATES.forEach(function (item) { templateHost.appendChild(optionRow('template', item)); });
+    TRANSITIONS.forEach(function (item) { transitionHost.appendChild(optionRow('transition', item)); });
+    paintTemplateMenu();
+  }
+  function paintTemplateMenu() {
+    var menu = $('template-menu');
+    if (!menu) return;
+    Array.prototype.forEach.call(menu.querySelectorAll('[data-template]'), function (b) {
+      b.classList.toggle('is-on', b.dataset.template === state.template);
+    });
+    Array.prototype.forEach.call(menu.querySelectorAll('[data-transition]'), function (b) {
+      b.classList.toggle('is-on', b.dataset.transition === state.transition);
+    });
+    var current = TEMPLATE_BY_ID[state.template];
+    $('template-label').textContent = current ? current.label : 'template';
+    $('btn-template').title = (current ? current.blurb : 'Composition template') +
+      ' · transition ' + state.transition;
+  }
   // ── Theme picker ───────────────────────────────────────────────────────
   function buildSizeSeg(hostId, showBlurb) {
     var host = $(hostId);
@@ -2801,7 +2992,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
         // Hovering previews too, so the mouse gets the same instant feedback
         // as the arrow keys.
         card.addEventListener('mouseenter', function () { selectTheme(themeCards.indexOf(card)); });
-        card.addEventListener('click', function () { commitTheme(); });
+        card.addEventListener('click', function () { selectTheme(themeCards.indexOf(card)); commitTheme(); });
         grid.appendChild(card);
         themeCards.push(card);
       });
@@ -2875,7 +3066,10 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     state.deckId = id;
     lsSet(K.current, id);
     setDocKind(meta.kind || 'markdown');
+    setTemplate(meta.template || state.template, true);
+    setTransition(meta.transition || state.transition, true);
     $('docname').value = meta.name;
+    updateDocTitle();
     updateDeckCount();
     elSave.className = '';
     elSave.textContent = '';
@@ -2996,7 +3190,13 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
       dupe.addEventListener('click', function (e) {
         e.stopPropagation();
         if (deck.id === state.deckId) { duplicateDeck(); renderLibrary(); return; }
-        var id = createDeck(uniqueName(deck.name + ' copy'), readDeck(deck.id), deck.kind || 'markdown');
+        var id = createDeck(
+          uniqueName(deck.name + ' copy'),
+          readDeck(deck.id),
+          deck.kind || 'markdown',
+          deck.template || state.template,
+          deck.transition || state.transition
+        );
         if (!id) { noRoom(); return; }
         updateDeckCount();
         renderLibrary();
@@ -3029,6 +3229,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     for (var i = 0; i < list.length; i++) if (list[i].id === state.deckId) libSel = i;
     renderLibrary();
     $('library').classList.add('is-on');
+    updateDocTitle();
   }
   $('lib-new').addEventListener('click', function () { closeOverlays(); showStartScreen(); });
@@ -3038,13 +3239,56 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   // ── Start screen ─────────────────────────────────────────────────────
   // Shown on a true first run, and whenever "new" is chosen explicitly from
   // the library — never on an ordinary launch that has a deck to resume.
+  var startTemplate = state.template;
+  var startTransition = state.transition;
+  function paintStartOptions() {
+    Array.prototype.forEach.call($('start-template-list').querySelectorAll('[data-template]'), function (b) {
+      b.classList.toggle('is-on', b.dataset.template === startTemplate);
+    });
+    Array.prototype.forEach.call($('start-transition-list').querySelectorAll('[data-transition]'), function (b) {
+      b.classList.toggle('is-on', b.dataset.transition === startTransition);
+    });
+  }
+  function buildStartOptions() {
+    var templateHost = $('start-template-list');
+    var transitionHost = $('start-transition-list');
+    templateHost.innerHTML = '';
+    transitionHost.innerHTML = '';
+    TEMPLATES.forEach(function (item) {
+      var b = document.createElement('button');
+      b.className = 'start-choice';
+      b.dataset.template = item.id;
+      b.textContent = item.label;
+      b.title = item.blurb;
+      b.addEventListener('click', function () { startTemplate = item.id; paintStartOptions(); });
+      templateHost.appendChild(b);
+    });
+    TRANSITIONS.forEach(function (item) {
+      var b = document.createElement('button');
+      b.className = 'start-choice';
+      b.dataset.transition = item.id;
+      b.textContent = item.label;
+      b.title = item.blurb;
+      b.addEventListener('click', function () { startTransition = item.id; paintStartOptions(); });
+      transitionHost.appendChild(b);
+    });
+    paintStartOptions();
+  }
   function showStartScreen() {
+    startTemplate = state.template;
+    startTransition = state.transition;
+    paintStartOptions();
     $('start-lib').classList.toggle('is-disabled', !loadIndex().length);
     $('screen-start').classList.add('is-on');
+    updateDocTitle();
   }
   function hideStartScreenSilently() {
     $('screen-start').classList.remove('is-on');
+    updateDocTitle();
   }
   /** Escape/backdrop close. With nothing open yet, that would be a dead end,
@@ -3055,7 +3299,9 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   }
   function startNewMarkdown() {
-    var id = createDeck(uniqueName('untitled'), D.welcome, 'markdown');
+    setTemplate(startTemplate, true);
+    setTransition(startTransition, true);
+    var id = createDeck(uniqueName('untitled'), D.welcome, 'markdown', startTemplate, startTransition);
     hideStartScreenSilently();
     if (!id) {
       // Storage refuses even a first write: use the deck unsaved rather than
@@ -3091,7 +3337,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     openLibrary();
   }
-  /** Fetches a public HTML page server-side (sidesteps CORS) and opens it as a new HTML doc. */
+  /** Fetches a public URL server-side (sidesteps CORS) and opens it as a new Markdown deck or HTML doc. */
   function loadHtmlUrl() {
     var input = $('start-html-url');
     var raw = input.value.trim();
@@ -3118,12 +3364,20 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
       .then(function (body) {
         saveNow();
         var name = uniqueName(body.title || url.hostname);
-        var id = createDeck(name, body.html, 'html');
+        var kind = body.kind || (body.markdown ? 'markdown' : 'html');
+        var content = kind === 'markdown' ? (body.markdown || body.content || '') : (body.html || body.content || '');
+        var id = createDeck(
+          name,
+          content,
+          kind,
+          kind === 'markdown' ? startTemplate : state.template,
+          kind === 'markdown' ? startTransition : state.transition
+        );
         if (!id) { noRoom(); return; }
         input.value = '';
         hideStartScreenSilently();
         openDeck(id);
-        toast('Loaded ' + url.hostname + ' as a new HTML doc');
+        toast('Loaded ' + (kind === 'markdown' ? 'Markdown deck' : 'HTML doc') + ' from ' + url.hostname);
       })
       .catch(function (err) { toast('Could not load URL: ' + err.message, 'err'); })
       .then(function () { btn.disabled = false; });
@@ -3148,6 +3402,7 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     else if (name === 'grid') setMode(state.mode === 'grid' ? 'single' : 'grid');
     else if (name === 'theme') openThemes();
     else if (name === 'guide') { guide.classList.add('is-on'); }
+    else if (name === 'palette') openPalette();
     else if (name === 'decks') openLibrary();
     else if (name === 'new') newDeck();
     else if (name === 'duplicate') duplicateDeck();
@@ -3158,6 +3413,8 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   var parseTimer = null;
   function onInput() {
+    // Typing takes the editor back from the deck.
+    if (following) { following = false; followChipEl.classList.add('hidden'); }
     paint();
     syncScroll();
     updateCaretUi();
@@ -3179,26 +3436,6 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
       e.preventDefault();
       typeText('  ');
       onInput();
-      return;
-    }
-    // Continue the list you are in.
-    if (e.key === 'Enter' && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
-      var upto = src.value.slice(0, src.selectionStart);
-      var line = upto.slice(upto.lastIndexOf('\\n') + 1);
-      var m = line.match(/^(\\s*)([-*+]|(\\d+)[.)])(\\s+)(.*)$/);
-      if (m && src.selectionStart === src.selectionEnd) {
-        e.preventDefault();
-        if (!m[5]) {
-          // Empty item: end the list instead of nesting further.
-          var start = src.selectionStart - line.length;
-          src.setSelectionRange(start, src.selectionStart);
-          typeText('\\n');
-        } else {
-          var marker = m[3] ? (parseInt(m[3], 10) + 1) + m[2].slice(String(m[3]).length) : m[2];
-          typeText('\\n' + m[1] + marker + m[4]);
-        }
-        onInput();
-      }
     }
   });
@@ -3261,13 +3498,19 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   });
   /** An opened file lands as a new deck, so nothing in the library is lost. */
-  function loadMarkdownFile(file) {
+  function loadMarkdownFile(file, chosenTemplate, chosenTransition) {
     var fr = new FileReader();
     fr.onload = function () {
       saveNow();
       var markdown = String(fr.result).replace(/\\r\\n/g, '\\n').replace(/\\r/g, '\\n');
       var name = uniqueName(file.name.replace(/\\.(md|markdown|txt)$/i, '') || 'untitled');
-      var id = createDeck(name, markdown, 'markdown');
+      var id = createDeck(
+        name,
+        markdown,
+        'markdown',
+        chosenTemplate || state.template,
+        chosenTransition || state.transition
+      );
       if (!id) { noRoom(); return; }
       hideStartScreenSilently();
       openDeck(id);
@@ -3297,14 +3540,24 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   $('file-any').addEventListener('change', function (e) {
     var f = e.target.files[0];
     if (f) {
-      if (/\\.(md|markdown|txt)$/i.test(f.name)) loadMarkdownFile(f);
+      var fromStart = $('screen-start').classList.contains('is-on');
+      if (/\\.(md|markdown|txt)$/i.test(f.name)) {
+        loadMarkdownFile(
+          f,
+          fromStart ? startTemplate : state.template,
+          fromStart ? startTransition : state.transition
+        );
+      }
       else if (/\\.html?$/i.test(f.name)) loadHtmlFile(f);
       else toast('Unrecognized file type.', 'warn');
     }
     e.target.value = '';
   });
-  $('docname').addEventListener('input', scheduleSave);
+  $('docname').addEventListener('input', function () {
+    updateDocTitle();
+    scheduleSave();
+  });
   $('btn-guide').addEventListener('click', function () { runAction('guide'); });
   $('btn-palette').addEventListener('click', openPalette);
@@ -3380,6 +3633,13 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     setFont(btn.dataset.slot, btn.dataset.font || null, true);
   }, 'button[data-slot]');
+  // Template and transition compose, so the menu remains open while either
+  // choice is changed and the existing Markdown reflows immediately.
+  bindMenu('btn-template', 'template-menu', function (btn) {
+    if (btn.dataset.template) setTemplate(btn.dataset.template, true);
+    if (btn.dataset.transition) setTransition(btn.dataset.transition, true);
+  }, 'button[data-template], button[data-transition]');
   document.addEventListener('click', function (e) {
     if (openMenu && !openMenu.contains(e.target)) closeMenu();
   });
@@ -3415,12 +3675,25 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     themeCards[next].scrollIntoView({ block: 'nearest' });
   }, true);
   $('btn-present').addEventListener('click', present);
-  $('btn-prev').addEventListener('click', function () { setIndex(state.index - 1, true); });
-  $('btn-next').addEventListener('click', function () { setIndex(state.index + 1, true); });
+  $('btn-prev').addEventListener('click', function () { setIndex(state.index - 1, false); });
+  $('btn-next').addEventListener('click', function () { setIndex(state.index + 1, false); });
   $('seg-single').addEventListener('click', function () { setMode('single'); });
   $('seg-grid').addEventListener('click', function () { setMode('grid'); });
+  $('pane-prev').addEventListener('mousedown', function () {
+    if (document.activeElement && isEditingText()) {
+      document.activeElement.blur();
+    }
+  });
   // ── Global keys ────────────────────────────────────────────────────────
+  function isEditingText() {
+    var el = document.activeElement;
+    if (!el) return false;
+    var tag = el.tagName ? el.tagName.toLowerCase() : '';
+    return tag === 'textarea' || tag === 'input' || el.isContentEditable;
+  }
   document.addEventListener('keydown', function (e) {
     var mod = e.metaKey || e.ctrlKey;
@@ -3458,31 +3731,59 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
       }
       return;
     }
-    if (!mod) return;
-    var key = e.key.toLowerCase();
-    var md = state.kind === 'markdown';
-    if (key === 'k' && !e.shiftKey && md) { e.preventDefault(); openPalette(); }
-    else if (key === 'o') { e.preventDefault(); openLibrary(); }
-    else if (key === '/' && md) { e.preventDefault(); runAction('guide'); }
-    else if (key === 's' && e.shiftKey) { e.preventDefault(); exportPdf(); }
-    else if (key === 's') { e.preventDefault(); saveNow(); download(); }
-    else if (key === 'enter') { e.preventDefault(); present(); }
-    else if (key === 'd' && md) { e.preventDefault(); insertSnippet(bySnippetId['slide-break']); }
-    else if (key === 'b' && md) { e.preventDefault(); insertSnippet(bySnippetId.bold); }
-    else if (key === 'i' && md) { e.preventDefault(); insertSnippet(bySnippetId.italic); }
-    else if (key === 'e' && md) { e.preventDefault(); insertSnippet(bySnippetId['inline-code']); }
-    else if (key === 'g' && md) { e.preventDefault(); runAction('grid'); }
-    else if (key === 'l' && e.shiftKey) { e.preventDefault(); runAction('theme'); }
-  });
-  // Alt + up/down hops between slides.
-  document.addEventListener('keydown', function (e) {
-    if (!e.altKey || e.metaKey || e.ctrlKey) return;
-    if (e.key === 'ArrowDown') { e.preventDefault(); setIndex(state.index + 1, true); }
-    else if (e.key === 'ArrowUp') { e.preventDefault(); setIndex(state.index - 1, true); }
+    if (mod) {
+      var key = e.key.toLowerCase();
+      var md = state.kind === 'markdown';
+      if (key === 'k' && !e.shiftKey && md) { e.preventDefault(); openPalette(); }
+      else if (key === 'o') { e.preventDefault(); openLibrary(); }
+      else if (key === '/' && md) { e.preventDefault(); runAction('guide'); }
+      else if (key === 'p' || (key === 's' && e.shiftKey)) { e.preventDefault(); exportPdf(); }
+      else if (key === 's') { e.preventDefault(); saveNow(); download(); }
+      else if (key === 'enter') { e.preventDefault(); present(); }
+      else if (key === 'd' && md) { e.preventDefault(); insertSnippet(bySnippetId['slide-break']); }
+      else if (key === 'b' && md) { e.preventDefault(); insertSnippet(bySnippetId.bold); }
+      else if (key === 'i' && md) { e.preventDefault(); insertSnippet(bySnippetId.italic); }
+      else if (key === 'e' && md) { e.preventDefault(); insertSnippet(bySnippetId['inline-code']); }
+      else if (key === 'g' && md) { e.preventDefault(); runAction('grid'); }
+      else if (key === 'l' && e.shiftKey) { e.preventDefault(); runAction('theme'); }
+      return;
+    }
+    if (palette.classList.contains('is-on') || guide.classList.contains('is-on') ||
+        $('library').classList.contains('is-on') || menuIsOpen()) {
+      return;
+    }
+    // Alt + arrows/page keys hops between slides (works anywhere, including inside the editor).
+    if (e.altKey) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight' || e.key === 'PageDown') {
+        e.preventDefault();
+        setIndex(state.index + 1, false);
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'PageUp') {
+        e.preventDefault();
+        setIndex(state.index - 1, false);
+      }
+      return;
+    }
+    // Direct arrow keys / page keys when not typing into a text field.
+    if (!isEditingText()) {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ' || e.key === 'PageDown') {
+        e.preventDefault();
+        setIndex(state.index + 1, false);
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
+        e.preventDefault();
+        setIndex(state.index - 1, false);
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        setIndex(0, false);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        setIndex(state.slides.length - 1, false);
+      }
+    }
   });
   // ── Split pane ─────────────────────────────────────────────────────────
@@ -3539,9 +3840,16 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
     } else if (m.type === 'goto') {
       setMode('single');
       setIndex(m.index, true);
+    } else if (m.type === 'nav') {
+      setIndex(state.index + m.delta, false);
+    } else if (m.type === 'index-select') {
+      setIndex(m.index, false);
+    } else if (m.type === 'action') {
+      runAction(m.action);
     } else if (m.type === 'overflow') {
       var had = !!state.overflow[m.index];
       state.overflow[m.index] = m.overflow;
+      renderCounts();
       if (had !== m.overflow) evalNudges();
     }
   });
@@ -3559,8 +3867,12 @@ button { font: inherit; color: inherit; background: none; border: none; cursor:
   document.documentElement.dataset.theme = state.theme;
   document.documentElement.dataset.decor = THEME_BY_ID[state.theme].decor;
+  document.documentElement.dataset.template = state.template;
+  document.documentElement.dataset.transition = state.transition;
   buildSizeSeg('topbar-size', false);
   buildFontMenu();
+  buildTemplateMenu();
+  buildStartOptions();
   paintSizeSeg();
   paintThemeButton();
   $('seg-single').classList.toggle('is-on', state.mode === 'single');