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/preview.js CHANGED Viewed

@@ -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,21 +11,24 @@ 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</title>
+  <title>preview · deckrun</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <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() {
@@ -220,6 +256,86 @@ body.is-empty #pv-empty { display: flex; }
     if (thumb) send({ type: 'goto', index: parseInt(thumb.dataset.index, 10) });
   });
+  window.addEventListener('keydown', function (e) {
+    var mod = e.metaKey || e.ctrlKey;
+    if (mod) {
+      var k = e.key.toLowerCase();
+      if (k === 'enter') { e.preventDefault(); send({ type: 'action', action: 'present' }); }
+      else if (k === 'k' && !e.shiftKey) { e.preventDefault(); send({ type: 'action', action: 'palette' }); }
+      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 === '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;
+    }
+    if (mode === 'grid') {
+      var thumbs = stage.querySelectorAll('.pv-thumb');
+      if (!thumbs.length) return;
+      var cols = 1;
+      if (thumbs.length > 1) {
+        var firstTop = thumbs[0].offsetTop;
+        for (var c = 1; c < thumbs.length; c++) {
+          if (thumbs[c].offsetTop !== firstTop) { cols = c; break; }
+        }
+        if (cols === 1 && thumbs.length > 1 && thumbs[1].offsetTop === firstTop) {
+          cols = thumbs.length;
+        }
+      }
+      var step = 0;
+      if (e.key === 'ArrowRight') step = 1;
+      else if (e.key === 'ArrowLeft') step = -1;
+      else if (e.key === 'ArrowDown') step = cols;
+      else if (e.key === 'ArrowUp') step = -cols;
+      else if (e.key === 'Home') { e.preventDefault(); send({ type: 'goto', index: 0 }); return; }
+      else if (e.key === 'End') { e.preventDefault(); send({ type: 'goto', index: slides.length - 1 }); return; }
+      else if (e.key === 'Enter') { e.preventDefault(); send({ type: 'goto', index: index }); return; }
+      else if (e.key === 'Escape') { e.preventDefault(); send({ type: 'goto', index: index }); return; }
+      else return;
+      e.preventDefault();
+      var next = Math.max(0, Math.min(slides.length - 1, index + step));
+      index = next;
+      var cur = stage.querySelector('.pv-thumb.is-current');
+      if (cur) cur.classList.remove('is-current');
+      var nextThumb = stage.querySelector('.pv-thumb[data-index="' + index + '"]');
+      if (nextThumb) {
+        nextThumb.classList.add('is-current');
+        nextThumb.scrollIntoView({ block: 'nearest' });
+      }
+      send({ type: 'index-select', index: index });
+      return;
+    }
+    // Single mode: Alt navigation or standard keys
+    if (e.altKey) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowRight' || e.key === 'PageDown') {
+        e.preventDefault();
+        send({ type: 'nav', delta: 1 });
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' || e.key === 'PageUp') {
+        e.preventDefault();
+        send({ type: 'nav', delta: -1 });
+      }
+      return;
+    }
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ' || e.key === 'PageDown') {
+      e.preventDefault();
+      send({ type: 'nav', delta: 1 });
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
+      e.preventDefault();
+      send({ type: 'nav', delta: -1 });
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      send({ type: 'goto', index: 0 });
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      send({ type: 'goto', index: slides.length - 1 });
+    }
+  });
   window.addEventListener('resize', function () {
     if (mode === 'grid') scaleThumbs();
   });
@@ -250,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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -53,7 +53,7 @@ export function fontName(key) {
 }
 const SANS = "system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif";
 const SERIF = "Georgia, 'Times New Roman', serif";
-const MONO = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
 export const FONTS = {
     inter: { param: "Inter:wght@300;400;500;600;700;800", stack: `'Inter', ${SANS}`, kind: "sans" },
     spaceGrotesk: { param: "Space+Grotesk:wght@400;500;600;700", stack: `'Space Grotesk', ${SANS}`, kind: "sans" },
@@ -71,7 +71,7 @@ export const FONTS = {
     newsreader: { param: "Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400", stack: `'Newsreader', ${SERIF}`, kind: "serif" },
     lora: { param: "Lora:ital,wght@0,400;0,500;0,600;0,700;1,400", stack: `'Lora', ${SERIF}`, kind: "serif" },
     plexMono: { param: "IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400", stack: `'IBM Plex Mono', ${MONO}`, kind: "mono" },
-    jetbrains: { param: "JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400", stack: `'JetBrains Mono', ${MONO}`, kind: "mono" },
+    jetbrains: { param: "JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400", stack: `'JetBrains Mono', ${MONO}`, kind: "mono" },
     firaCode: { param: "Fira+Code:wght@400;500;600;700", stack: `'Fira Code', ${MONO}`, kind: "mono" },
     spaceMono: { param: "Space+Mono:ital,wght@0,400;0,700;1,400", stack: `'Space Mono', ${MONO}`, kind: "mono" },
     sourceCodePro: { param: "Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400", stack: `'Source Code Pro', ${MONO}`, kind: "mono" },
@@ -85,6 +85,7 @@ export const FONTS = {
  */
 export function googleFontsHref(themes = THEME_IDS.slice(), extra = []) {
     const wanted = new Set();
+    wanted.add("jetbrains");
     for (const input of themes) {
         const t = THEMES[resolveThemeName(input)];
         wanted.add(t.type.display);
@@ -162,7 +163,7 @@ const SPECS = {
             red: "#bf616a", mauve: "#b48ead", pink: "#d3a3c6",
         },
         roles: { accent: "sapphire", accent2: "blue", accent3: "teal" },
-        type: { display: "manrope", body: "manrope", mono: "jetbrains", weight: 800, tracking: "-0.035em" },
+        type: { display: "jetbrains", body: "jetbrains", mono: "jetbrains", weight: 700, tracking: "-0.025em" },
         decor: "waves",
         hljs: `${HL}nord.min.css`,
     },
@@ -399,7 +400,7 @@ export const THEME_IDS = [
 export const THEMES = Object.fromEntries(THEME_IDS.map((id) => [id, { id, ...SPECS[id] }]));
 /** `dark` and `light` predate the registry and still name the two originals. */
 const ALIASES = {
-    dark: "midnight",
+    dark: "nord",
     light: "daylight",
     mocha: "midnight",
     latte: "daylight",
@@ -407,7 +408,7 @@ const ALIASES = {
     "rose-pine": "rosepine",
     "rose-quartz": "rosequartz",
 };
-export const DEFAULT_THEME = "midnight";
+export const DEFAULT_THEME = "nord";
 /** A theme id from untrusted input, or `null` if it names nothing. */
 export function findTheme(input) {
     if (!input)
@@ -498,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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "deckrun",
-  "version": "1.3.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": {