deckrun 1.4.0 → 1.6.0

package/dist/presentation-options.js

@@ -0,0 +1,287 @@
+export const DEFAULT_TEMPLATE = "classic";
+export const DEFAULT_TRANSITION = "slide";
+export const TEMPLATE_IDS = [
+    "classic",
+    "minimal",
+    "editorial",
+    "spotlight",
+];
+export const TRANSITION_IDS = [
+    "slide",
+    "fade",
+    "zoom",
+    "lift",
+    "none",
+];
+export const TEMPLATE_SPECS = {
+    classic: {
+        label: "Classic",
+        blurb: "The original balanced deckrun layout",
+    },
+    minimal: {
+        label: "Minimal",
+        blurb: "Quiet surfaces, wider margins, fewer decorative treatments",
+    },
+    editorial: {
+        label: "Editorial",
+        blurb: "Strong rules and magazine-like reading rhythm",
+    },
+    spotlight: {
+        label: "Spotlight",
+        blurb: "Centered, high-impact composition for concise keynote slides",
+    },
+};
+export const TRANSITION_SPECS = {
+    slide: {
+        label: "Slide",
+        blurb: "Horizontal sliding transition between slides",
+    },
+    fade: {
+        label: "Fade",
+        blurb: "Cross-fade between slides",
+    },
+    zoom: {
+        label: "Zoom",
+        blurb: "Scale up and down between slides",
+    },
+    lift: {
+        label: "Lift",
+        blurb: "Vertical rising transition between slides",
+    },
+    none: {
+        label: "None",
+        blurb: "Instant cut between slides",
+    },
+};
+export function findTemplate(input) {
+    if (!input)
+        return null;
+    const key = String(input).trim().toLowerCase();
+    for (const id of TEMPLATE_IDS) {
+        if (id === key)
+            return id;
+        if (TEMPLATE_SPECS[id].label.toLowerCase() === key)
+            return id;
+    }
+    return null;
+}
+export function resolveTemplateName(input) {
+    return findTemplate(input) ?? DEFAULT_TEMPLATE;
+}
+export function templateSummaries() {
+    return TEMPLATE_IDS.map((id) => ({
+        id,
+        label: TEMPLATE_SPECS[id].label,
+        blurb: TEMPLATE_SPECS[id].blurb,
+    }));
+}
+export function templateListing() {
+    const pad = Math.max(...TEMPLATE_IDS.map((id) => id.length));
+    return TEMPLATE_IDS.map((id) => {
+        const s = TEMPLATE_SPECS[id];
+        return `${id.padEnd(pad)}  ${s.label.padEnd(10)}  ${s.blurb}`;
+    });
+}
+export function findTransition(input) {
+    if (!input)
+        return null;
+    const key = String(input).trim().toLowerCase();
+    for (const id of TRANSITION_IDS) {
+        if (id === key)
+            return id;
+        if (TRANSITION_SPECS[id].label.toLowerCase() === key)
+            return id;
+    }
+    return null;
+}
+export function resolveTransitionName(input) {
+    return findTransition(input) ?? DEFAULT_TRANSITION;
+}
+export function transitionSummaries() {
+    return TRANSITION_IDS.map((id) => ({
+        id,
+        label: TRANSITION_SPECS[id].label,
+        blurb: TRANSITION_SPECS[id].blurb,
+    }));
+}
+export function transitionListing() {
+    const pad = Math.max(...TRANSITION_IDS.map((id) => id.length));
+    return TRANSITION_IDS.map((id) => {
+        const s = TRANSITION_SPECS[id];
+        return `${id.padEnd(pad)}  ${s.label.padEnd(8)}  ${s.blurb}`;
+    });
+}
+export const TEMPLATE_CSS = `/* ── Templates ──────────────────────────────────────────────────────────── */
+
+/* Minimal */
+:root[data-template="minimal"] {
+  --slide-pad-x: 10vw;
+  --slide-pad-y: 8vh;
+}
+:root[data-template="minimal"] #backdrop {
+  opacity: 0.15;
+}
+:root[data-template="minimal"] .slide__content h1 {
+  letter-spacing: -0.02em;
+}
+:root[data-template="minimal"] blockquote {
+  border-left-width: 2px;
+  background: transparent;
+}
+:root[data-template="minimal"] pre {
+  border: 1px solid var(--surface0);
+}
+
+/* Editorial */
+:root[data-template="editorial"] {
+  --slide-pad-x: 7vw;
+}
+:root[data-template="editorial"] .slide__content h1 {
+  border-bottom: 3px solid var(--accent);
+  padding-bottom: 0.3em;
+  margin-bottom: 0.6em;
+}
+:root[data-template="editorial"] .slide__content h2 {
+  border-bottom: 1px solid var(--surface1);
+  padding-bottom: 0.2em;
+}
+:root[data-template="editorial"] blockquote {
+  border-left: 4px solid var(--accent);
+  font-style: italic;
+  background: var(--surface0);
+}
+:root[data-template="editorial"] table th {
+  border-bottom: 2px solid var(--accent);
+}
+:root[data-template="editorial"] hr {
+  border: none;
+  border-top: 2px solid var(--surface2);
+  margin: 2em 0;
+}
+
+/* Spotlight */
+:root[data-template="spotlight"] .slide {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+:root[data-template="spotlight"] .slide__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+:root[data-template="spotlight"] .slide__content h1 {
+  font-size: calc(var(--type-display) * 1.15);
+  text-align: center;
+}
+:root[data-template="spotlight"] .slide__content p {
+  max-width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+:root[data-template="spotlight"] .slide__content ul,
+:root[data-template="spotlight"] .slide__content ol {
+  text-align: left;
+  display: inline-block;
+  margin-left: auto;
+  margin-right: auto;
+}
+:root[data-template="spotlight"] .slide__content blockquote {
+  text-align: center;
+  border-left: none;
+  border-top: 2px solid var(--accent);
+  border-bottom: 2px solid var(--accent);
+  padding: 1em 2em;
+  background: transparent;
+}
+:root[data-template="spotlight"] .slide__content pre {
+  text-align: left;
+}
+`;
+export const TRANSITION_CSS = `/* ── Transitions ────────────────────────────────────────────────────────── */
+
+/* Fade */
+:root[data-transition="fade"] .slide {
+  transition: opacity 0.3s ease;
+  transform: none !important;
+}
+:root[data-transition="fade"] .slide.exit-left,
+:root[data-transition="fade"] .slide.exit-right,
+:root[data-transition="fade"] .slide.enter-from-left,
+:root[data-transition="fade"] .slide.enter-from-right {
+  transform: none !important;
+  opacity: 0;
+}
+:root[data-transition="fade"] .slide.is-active {
+  opacity: 1;
+  transform: none !important;
+}
+
+/* Zoom */
+:root[data-transition="zoom"] .slide {
+  transform: scale(0.92);
+  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+:root[data-transition="zoom"] .slide.is-active {
+  transform: scale(1);
+  opacity: 1;
+}
+:root[data-transition="zoom"] .slide.exit-left,
+:root[data-transition="zoom"] .slide.exit-right {
+  transform: scale(1.08);
+  opacity: 0;
+}
+:root[data-transition="zoom"] .slide.enter-from-left,
+:root[data-transition="zoom"] .slide.enter-from-right {
+  transform: scale(0.92);
+  opacity: 0;
+}
+
+/* Lift */
+:root[data-transition="lift"] .slide {
+  transform: translateY(48px);
+  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+:root[data-transition="lift"] .slide.is-active {
+  transform: translateY(0);
+  opacity: 1;
+}
+:root[data-transition="lift"] .slide.exit-left,
+:root[data-transition="lift"] .slide.exit-right {
+  transform: translateY(-48px);
+  opacity: 0;
+}
+:root[data-transition="lift"] .slide.enter-from-left,
+:root[data-transition="lift"] .slide.enter-from-right {
+  transform: translateY(48px);
+  opacity: 0;
+}
+
+/* None */
+:root[data-transition="none"] .slide,
+:root[data-transition="none"] .slide.is-active,
+:root[data-transition="none"] .slide.exit-left,
+:root[data-transition="none"] .slide.exit-right,
+:root[data-transition="none"] .slide.enter-from-left,
+:root[data-transition="none"] .slide.enter-from-right {
+  transition: none !important;
+  transform: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root[data-transition] .slide {
+    transition: opacity 0.2s linear !important;
+    transform: none !important;
+  }
+}
+
+@media print {
+  :root[data-transition] .slide {
+    transition: none !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
+}
+`;

package/dist/preview.js

@@ -1,5 +1,8 @@
 import { RESET_CSS, SLIDE_CSS, DECOR_CSS } from "./generate.js";
 import { findFont, FONT_IDS, fontOverrideCss, SIZE_IDS, DEFAULT_SIZE, DEFAULT_THEME, decorMapJson, decorOf, googleFontsHref, hljsHref, hljsMapJson, resolveSizeName, sizeSwitchableCss, themeSwitchableCss, } from "./themes.js";
+import { DEFAULT_TEMPLATE, DEFAULT_TRANSITION, resolveTemplateName, resolveTransitionName, TEMPLATE_CSS, TRANSITION_CSS, } from "./presentation-options.js";
+import { RICH_CONTENT_CSS, RICH_CONTENT_RUNTIME, richContentHead, } from "./rich-content.js";
+import { FRAGMENT_CSS, FRAGMENT_RUNTIME } from "./fragments.js";
 /** Virtual viewport the preview renders at, so `vw` sizing matches a projector. */
 export const PREVIEW_WIDTH = 1600;
 export const PREVIEW_HEIGHT = 900;
@@ -8,13 +11,15 @@ export const PREVIEW_HEIGHT = 900;
  * own stylesheet, so what the editor shows is what `deckrun file.md` renders.
  * Slides arrive over postMessage; nothing is fetched or parsed in here.
  */
-export function generatePreviewHtml(initialTheme = DEFAULT_THEME, initialSize = DEFAULT_SIZE, fonts = {}) {
+export function generatePreviewHtml(initialTheme = DEFAULT_THEME, initialSize = DEFAULT_SIZE, fonts = {}, initialTemplate = DEFAULT_TEMPLATE, initialTransition = DEFAULT_TRANSITION) {
     const size = resolveSizeName(initialSize);
+    const template = resolveTemplateName(initialTemplate);
+    const transition = resolveTransitionName(initialTransition);
     const head = findFont(fonts.head);
     const body = findFont(fonts.body);
     const fontAttrs = (head ? ` data-head="${head}"` : "") + (body ? ` data-body="${body}"` : "");
     return `<!DOCTYPE html>
-<html lang="en" data-theme="${initialTheme}" data-decor="${decorOf(initialTheme)}" data-size="${size}"${fontAttrs}>
+<html lang="en" data-theme="${initialTheme}" data-decor="${decorOf(initialTheme)}" data-size="${size}" data-template="${template}" data-transition="${transition}"${fontAttrs}>
 <head>
   <meta charset="UTF-8">
   <title>preview · deckrun</title>
@@ -23,6 +28,7 @@ export function generatePreviewHtml(initialTheme = DEFAULT_THEME, initialSize =
   <link href="${googleFontsHref()}" rel="stylesheet">
   <link rel="stylesheet" id="hljs-theme" href="${hljsHref(initialTheme)}">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  ${richContentHead({ math: true, mermaid: true }, "local")}
   <style>
 ${RESET_CSS}
 
@@ -34,6 +40,14 @@ ${fontOverrideCss()}
 
 ${SLIDE_CSS}
 
+${TEMPLATE_CSS}
+
+${TRANSITION_CSS}
+
+${FRAGMENT_CSS}
+
+${RICH_CONTENT_CSS}
+
 ${DECOR_CSS}
 
 /* ── Preview overrides ────────────────────────────────────────────────── */
@@ -119,6 +133,11 @@ body.is-empty #pv-empty { display: flex; }
 <div id="presentation"></div>
 <div id="pv-empty">nothing to preview yet</div>
 <script>
+${FRAGMENT_RUNTIME}
+
+${RICH_CONTENT_RUNTIME}
+</script>
+<script>
 (function () {
   'use strict';
 
@@ -144,7 +163,7 @@ body.is-empty #pv-empty { display: flex; }
 
   function highlight(root) {
     if (!window.hljs) return;
-    var blocks = root.querySelectorAll('pre code');
+    var blocks = root.querySelectorAll('pre code:not(.language-mermaid):not(.lang-mermaid)');
     for (var i = 0; i < blocks.length; i++) {
       if (!blocks[i].dataset.highlighted) {
         try { window.hljs.highlightElement(blocks[i]); } catch (e) {}
@@ -157,7 +176,19 @@ body.is-empty #pv-empty { display: flex; }
     if (mode !== 'single') return;
     var content = stage.querySelector('.slide__content');
     var over = false;
-    if (content) over = content.scrollHeight - content.clientHeight > 6;
+    if (content) {
+      over = content.scrollHeight - content.clientHeight > 6 ||
+        content.scrollWidth - content.clientWidth > 6;
+
+      // KaTeX display equations and Mermaid hosts deliberately hide their own
+      // overflow to keep a projected slide tidy. Inspect them separately so a
+      // clipped formula or diagram still triggers the editor's overflow nudge.
+      var rich = content.querySelectorAll('.katex-display, .mermaid');
+      for (var i = 0; !over && i < rich.length; i++) {
+        over = rich[i].scrollHeight - rich[i].clientHeight > 6 ||
+          rich[i].scrollWidth - rich[i].clientWidth > 6;
+      }
+    }
     send({ type: 'overflow', index: index, overflow: over });
   }
 
@@ -166,8 +197,10 @@ body.is-empty #pv-empty { display: flex; }
     stage.innerHTML = slides[index] || '';
     var el = stage.querySelector('.slide');
     if (el) el.classList.add('is-active');
+    if (window.deckrunPrepareFragments) window.deckrunPrepareFragments(stage, true);
     highlight(stage);
-    requestAnimationFrame(reportOverflow);
+    var rich = window.deckrunRenderRichContent ? window.deckrunRenderRichContent(stage) : Promise.resolve();
+    rich.then(function () { requestAnimationFrame(reportOverflow); });
   }
 
   function renderGrid() {
@@ -195,7 +228,10 @@ body.is-empty #pv-empty { display: flex; }
     });
     stage.appendChild(frag);
     scaleThumbs();
+    if (window.deckrunPrepareFragments) window.deckrunPrepareFragments(stage, true);
     highlight(stage);
+    var rich = window.deckrunRenderRichContent ? window.deckrunRenderRichContent(stage) : Promise.resolve();
+    rich.then(scaleThumbs);
   }
 
   function scaleThumbs() {
@@ -229,7 +265,7 @@ body.is-empty #pv-empty { display: flex; }
       else if (k === 'g') { e.preventDefault(); send({ type: 'action', action: 'grid' }); }
       else if (k === 'o') { e.preventDefault(); send({ type: 'action', action: 'decks' }); }
       else if (k === '/') { e.preventDefault(); send({ type: 'action', action: 'guide' }); }
-      else if (k === 's' && e.shiftKey) { e.preventDefault(); send({ type: 'action', action: 'pdf' }); }
+      else if (k === 'p' || (k === 's' && e.shiftKey)) { e.preventDefault(); send({ type: 'action', action: 'pdf' }); }
       else if (k === 's') { e.preventDefault(); send({ type: 'action', action: 'download' }); }
       else if (k === 'l' && e.shiftKey) { e.preventDefault(); send({ type: 'action', action: 'theme' }); }
       return;
@@ -330,9 +366,11 @@ body.is-empty #pv-empty { display: flex; }
       // theme, which delete does and an assignment of '' would not.
       applyFont('head', m.head);
       applyFont('body', m.body);
+      if (m.template) document.documentElement.dataset.template = m.template;
+      if (m.transition) document.documentElement.dataset.transition = m.transition;
       // Type size and face both change how tall a slide's content runs, so the
       // editor's overflow warning has to be re-measured against them.
-      requestAnimationFrame(reportOverflow);
+      render();
     } else if (m.type === 'index') {
       index = m.index;
       if (mode === 'grid') {

package/dist/rich-content.js

@@ -0,0 +1,170 @@
+export function richContentFeatures(slides) {
+    let math = false;
+    let mermaid = false;
+    for (const slide of slides) {
+        if (!math && (slide.html.includes('class="math-source"') || slide.html.includes("math-source"))) {
+            math = true;
+        }
+        if (!mermaid &&
+            (slide.html.includes("language-mermaid") ||
+                slide.html.includes("lang-mermaid") ||
+                slide.html.includes('class="mermaid"'))) {
+            mermaid = true;
+        }
+    }
+    return { math, mermaid };
+}
+export function richContentHead(features, source = "local") {
+    const parts = [];
+    if (features.math) {
+        if (source === "cdn") {
+            parts.push('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.18.4/dist/katex.min.css">');
+            parts.push('<script src="https://cdn.jsdelivr.net/npm/katex@0.18.4/dist/katex.min.js"></script>');
+        }
+        else {
+            parts.push('<link rel="stylesheet" href="/__vendor/katex.min.css">');
+            parts.push('<script src="/__vendor/katex.min.js"></script>');
+        }
+    }
+    if (features.mermaid) {
+        if (source === "cdn") {
+            parts.push('<script src="https://cdn.jsdelivr.net/npm/mermaid@11.17.2/dist/mermaid.min.js"></script>');
+        }
+        else {
+            parts.push('<script src="/__vendor/mermaid.min.js"></script>');
+        }
+    }
+    return parts.join("\n  ");
+}
+export const RICH_CONTENT_CSS = `/* ── Rich Content (Math & Diagrams) ─────────────────────────────────────── */
+
+.math-source {
+  font-family: inherit;
+}
+
+div.math-source {
+  display: flex;
+  justify-content: center;
+  margin: 1.2em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+span.math-source {
+  display: inline;
+}
+
+.katex-display {
+  margin: 0.8em 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.katex {
+  font-size: 1.15em;
+  text-rendering: auto;
+}
+
+.math-error {
+  color: var(--maroon, #f38ba8);
+  background: var(--surface0, rgba(255, 0, 0, 0.1));
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.85em;
+}
+
+.mermaid {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 1.2em auto;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.mermaid-error {
+  color: var(--maroon, #f38ba8);
+  background: var(--surface0, rgba(255, 0, 0, 0.1));
+  border: 1px solid var(--maroon, #f38ba8);
+  border-radius: 6px;
+  padding: 12px 16px;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.9em;
+  white-space: pre-wrap;
+  margin: 1em 0;
+}
+`;
+export const RICH_CONTENT_RUNTIME = `(function () {
+  window.deckrunRenderRichContent = function (root) {
+    if (!root) return Promise.resolve();
+
+    // 1. Render KaTeX math
+    if (window.katex) {
+      var mathNodes = root.querySelectorAll('.math-source:not([data-rendered])');
+      for (var i = 0; i < mathNodes.length; i++) {
+        var el = mathNodes[i];
+        var tex = el.textContent || '';
+        var isDisplay = el.dataset.display === 'true';
+        try {
+          window.katex.render(tex, el, {
+            displayMode: isDisplay,
+            throwOnError: false,
+            output: 'htmlAndMathml'
+          });
+          el.setAttribute('data-rendered', 'true');
+        } catch (err) {
+          el.innerHTML = '<span class="math-error">' + (err && err.message ? err.message : 'Math rendering error') + '</span>';
+          el.setAttribute('data-rendered', 'true');
+        }
+      }
+    }
+
+    // 2. Render Mermaid diagrams
+    var mermaidPromises = [];
+    var codeBlocks = root.querySelectorAll('pre code.language-mermaid, pre code.lang-mermaid');
+    if (codeBlocks.length > 0 && window.mermaid) {
+      try {
+        window.mermaid.initialize({
+          startOnLoad: false,
+          theme: 'dark',
+          securityLevel: 'loose'
+        });
+      } catch (e) {}
+
+      for (var j = 0; j < codeBlocks.length; j++) {
+        (function (codeEl) {
+          var preEl = codeEl.closest('pre');
+          if (!preEl || preEl.dataset.rendered) return;
+          preEl.dataset.rendered = 'true';
+          var code = codeEl.textContent || '';
+          var container = document.createElement('div');
+          container.className = 'mermaid';
+          preEl.parentNode.insertBefore(container, preEl);
+          preEl.style.display = 'none';
+
+          var id = 'mermaid-' + Math.random().toString(36).slice(2, 10);
+          var p = window.mermaid.render(id, code)
+            .then(function (res) {
+              container.innerHTML = res.svg;
+              preEl.remove();
+            })
+            .catch(function (err) {
+              container.className = 'mermaid-error';
+              container.textContent = 'Mermaid Error: ' + (err && err.message ? err.message : String(err));
+              preEl.remove();
+            });
+          mermaidPromises.push(p);
+        })(codeBlocks[j]);
+      }
+    }
+
+    return Promise.all(mermaidPromises).then(function () {});
+  };
+})();
+`;

package/dist/themes.js

@@ -499,6 +499,8 @@ function themeVars(t) {
         ["glow", alpha(accent, dark ? 0.34 : 0.22)],
         ["gradient", `linear-gradient(115deg, ${accent}, ${accent2} 58%, ${accent3})`],
         ["accent-fade", `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.45)} 62%, transparent)`],
+        ["selection-bg", alpha(accent, dark ? 0.22 : 0.18)],
+        ["selection-text", "inherit"],
         ["surface-soft", alpha(n.surface0, dark ? 0.34 : 0.42)],
         ["crust-overlay", alpha(n.crust, dark ? 0.84 : 0.88)],
         ["scrim", dark ? "rgba(0, 0, 0, 0.5)" : alpha(n.text, 0.26)],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckrun",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "A local-first presentation tool for writing, editing, presenting, and exporting Markdown slides or self-contained HTML docs.",
   "type": "module",
   "bin": {
@@ -11,11 +11,14 @@
   ],
   "scripts": {
     "build": "tsc && chmod +x dist/index.js",
-    "dev": "tsx src/index.ts"
+    "dev": "tsx src/index.ts",
+    "test": "npm run build && node --test"
   },
   "dependencies": {
     "commander": "^11.1.0",
+    "katex": "^0.18.4",
     "marked": "^9.1.6",
+    "mermaid": "^11.17.2",
     "open": "^9.1.0"
   },
   "devDependencies": {