@jotx-labs/editor 2.4.193 → 2.4.204

package/dist/utils/PresentationConverter.js

@@ -0,0 +1,1506 @@
+"use strict";
+/**
+ * PresentationConverter — Converts jotx ProseMirror document to reveal.js HTML
+ *
+ * This is a PURE LOGIC module with zero platform dependencies.
+ * Works in both VS Code webview and web app contexts.
+ *
+ * IMPORTANT: Uses Tiptap node type names (bulletList, orderedList, taskList,
+ * tableRow, tableCell, tableHeader, etc.) — NOT jotx block type names.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitDocIntoSlides = splitDocIntoSlides;
+exports.countSlides = countSlides;
+exports.generateRevealHTML = generateRevealHTML;
+const DEFAULT_PROPS = {
+    theme: 'dark',
+    transition: 'slide',
+    footertext: '',
+    footerlogo: '',
+    logoalign: 'left',
+    ratio: '16:9',
+    fontfamily: 'inter',
+    autoanimate: false,
+    shownumbers: true
+};
+/**
+ * Walk a ProseMirror JSON document and split into slides at H1/divider boundaries
+ */
+function splitDocIntoSlides(doc) {
+    const content = doc?.content || [];
+    let properties = { ...DEFAULT_PROPS };
+    const slides = [];
+    let currentBlocks = [];
+    let currentTitle = '';
+    let hasFirstH1 = false;
+    for (const node of content) {
+        // Extract slideproperties — not a slide
+        if (node.type === 'slideproperties') {
+            properties = {
+                theme: node.attrs?.theme || DEFAULT_PROPS.theme,
+                transition: node.attrs?.transition || DEFAULT_PROPS.transition,
+                footertext: node.attrs?.footertext || DEFAULT_PROPS.footertext,
+                footerlogo: node.attrs?.footerlogo || DEFAULT_PROPS.footerlogo,
+                logoalign: node.attrs?.logoalign || DEFAULT_PROPS.logoalign,
+                ratio: node.attrs?.ratio || DEFAULT_PROPS.ratio,
+                fontfamily: node.attrs?.fontfamily || DEFAULT_PROPS.fontfamily,
+                autoanimate: node.attrs?.autoanimate ?? DEFAULT_PROPS.autoanimate,
+                shownumbers: node.attrs?.shownumbers ?? DEFAULT_PROPS.shownumbers
+            };
+            continue;
+        }
+        // H1 = new slide boundary
+        if (node.type === 'heading' && node.attrs?.level === 1) {
+            // Flush previous slide
+            if (currentBlocks.length > 0 || hasFirstH1) {
+                slides.push({
+                    title: currentTitle,
+                    html: blocksToHTML(currentBlocks),
+                    isTitle: !hasFirstH1
+                });
+            }
+            hasFirstH1 = true;
+            currentTitle = extractText(node);
+            currentBlocks = [];
+            continue;
+        }
+        // Divider = explicit slide break  
+        if (node.type === 'divider' || node.type === 'horizontalRule') {
+            if (currentBlocks.length > 0 || hasFirstH1) {
+                slides.push({
+                    title: currentTitle,
+                    html: blocksToHTML(currentBlocks)
+                });
+            }
+            currentTitle = '';
+            currentBlocks = [];
+            continue;
+        }
+        currentBlocks.push(node);
+    }
+    // Flush remaining content
+    if (currentBlocks.length > 0 || hasFirstH1) {
+        slides.push({
+            title: currentTitle,
+            html: blocksToHTML(currentBlocks)
+        });
+    }
+    // If no H1 was found, create a single slide with all content
+    if (slides.length === 0 && content.length > 0) {
+        slides.push({
+            title: 'Untitled',
+            html: blocksToHTML(content.filter((n) => n.type !== 'slideproperties')),
+            isTitle: true
+        });
+    }
+    return { slides, properties };
+}
+/**
+ * Count slides in a ProseMirror doc (for the toolbar indicator)
+ */
+function countSlides(doc) {
+    const content = doc?.content || [];
+    let count = 0;
+    let hasContent = false;
+    for (const node of content) {
+        if (node.type === 'slideproperties')
+            continue;
+        if (node.type === 'heading' && node.attrs?.level === 1) {
+            count++;
+            hasContent = true;
+        }
+        else if ((node.type === 'divider' || node.type === 'horizontalRule') && hasContent) {
+            count++;
+        }
+        else {
+            hasContent = true;
+        }
+    }
+    return Math.max(count, hasContent ? 1 : 0);
+}
+/** Font family registry — maps dropdown values to Google Fonts import + CSS stack */
+const FONT_MAP = {
+    'inter': { googleImport: 'Inter:wght@300;400;500;600;700', cssStack: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" },
+    'roboto': { googleImport: 'Roboto:wght@300;400;500;700', cssStack: "'Roboto', -apple-system, BlinkMacSystemFont, sans-serif" },
+    'poppins': { googleImport: 'Poppins:wght@300;400;500;600;700', cssStack: "'Poppins', -apple-system, BlinkMacSystemFont, sans-serif" },
+    'montserrat': { googleImport: 'Montserrat:wght@300;400;500;600;700', cssStack: "'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif" },
+    'opensans': { googleImport: 'Open+Sans:wght@300;400;500;600;700', cssStack: "'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif" },
+    'lato': { googleImport: 'Lato:wght@300;400;700', cssStack: "'Lato', -apple-system, BlinkMacSystemFont, sans-serif" },
+    'playfair': { googleImport: 'Playfair+Display:wght@400;500;600;700', cssStack: "'Playfair Display', Georgia, 'Times New Roman', serif" },
+    'raleway': { googleImport: 'Raleway:wght@300;400;500;600;700', cssStack: "'Raleway', -apple-system, BlinkMacSystemFont, sans-serif" },
+    'outfit': { googleImport: 'Outfit:wght@300;400;500;600;700', cssStack: "'Outfit', -apple-system, BlinkMacSystemFont, sans-serif" },
+    'spacegrotesk': { googleImport: 'Space+Grotesk:wght@300;400;500;600;700', cssStack: "'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif" },
+};
+function getFontConfig(fontKey) {
+    return FONT_MAP[fontKey] || FONT_MAP['inter'];
+}
+/**
+ * Generate complete reveal.js HTML document from slides
+ */
+function generateRevealHTML(slides, properties, revealJsPath, revealCssPath) {
+    const revealJs = revealJsPath || 'https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.esm.js';
+    const revealCss = revealCssPath || 'https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css';
+    const themeCss = getThemeCSS(properties.theme);
+    const fontConfig = getFontConfig(properties.fontfamily);
+    let width = 1280;
+    let height = 720;
+    if (properties.ratio === '4:3') {
+        width = 1024;
+        height = 768;
+    }
+    else if (properties.ratio === '16:10') {
+        width = 1280;
+        height = 800;
+    }
+    const sections = slides.map((slide, i) => {
+        const titleHtml = slide.title
+            ? `<h1>${escapeHtml(slide.title)}</h1><div class="slide-header-line"></div>`
+            : '';
+        const logoSrc = properties.logoDataUri || properties.footerlogo;
+        const logoAlign = properties.logoalign || 'left';
+        const logoHtml = logoSrc ? `<img src="${logoSrc}" alt="Logo" style="max-height:24px;vertical-align:middle;" />` : '';
+        const textHtml = properties.footertext ? `<span>${escapeHtml(properties.footertext)}</span>` : '';
+        // 2-zone layout: logo on logoalign side, text on opposite side
+        // Slide numbers handled by Reveal.js (centered via CSS)
+        const leftContent = logoAlign === 'left' ? logoHtml : textHtml;
+        const rightContent = logoAlign === 'left' ? textHtml : logoHtml;
+        const footerHtml = (logoSrc || properties.footertext)
+            ? `<div class="slide-footer"><div class="slide-footer-line"></div><div class="slide-footer-content"><div class="footer-left">${leftContent}</div><div class="footer-right">${rightContent}</div></div></div>`
+            : '';
+        return `<section data-transition="${properties.transition}">${titleHtml}<div class="slide-body">${slide.html}</div>${footerHtml}</section>`;
+    }).join('\n');
+    return `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Presentation</title>
+    <link rel="stylesheet" href="${revealCss}">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=${fontConfig.googleImport}&display=swap" rel="stylesheet">
+    <style>
+        ${themeCss}
+
+        /* ─── Base Font ────────────────────────────────── */
+        html, body { background: inherit; margin: 0; padding: 0; }
+        body, .reveal, .reveal * {
+            font-family: ${fontConfig.cssStack} !important;
+        }
+        .reveal pre, .reveal pre *, .reveal code, .reveal code * {
+            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace !important;
+        }
+        .mermaid, .mermaid * {
+            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace !important;
+        }
+        /* Flowchart & general labels */
+        .mermaid .nodeLabel, .mermaid .edgeLabel, .mermaid .label {
+            font-size: 11px !important;
+        }
+        /* Class diagram — title and body */
+        .mermaid .classTitle, .mermaid .classTitleText {
+            font-size: 11px !important;
+        }
+        .mermaid .classText, .mermaid .classText tspan {
+            font-size: 10px !important;
+        }
+        /* Sequence diagram */
+        .mermaid .actor, .mermaid .messageText, .mermaid .labelText, .mermaid .loopText {
+            font-size: 11px !important;
+        }
+        /* Keep SVG viewBox fitting */
+        .mermaid svg {
+            max-width: 100%;
+            height: auto;
+        }
+
+        /* ─── Slide Layout ──────────────────────────────── */
+        .reveal section {
+            text-align: left;
+            padding: 40px 60px;
+            height: 100%;
+            display: flex !important;
+            flex-direction: column;
+        }
+        .reveal section h1 {
+            font-size: 2em;
+            margin: 0 0 0 0;
+            flex-shrink: 0;
+        }
+        .slide-header-line {
+            height: 3px;
+            background: linear-gradient(90deg, var(--accent-color, #89b4fa), transparent);
+            margin: 8px 0 20px 0;
+            border-radius: 2px;
+            flex-shrink: 0;
+        }
+        .slide-body {
+            flex: 1;
+            overflow: hidden;
+        }
+        .slide-footer {
+            position: absolute;
+            bottom: 40px;
+            left: 60px;
+            right: 60px;
+            flex-shrink: 0;
+        }
+        .slide-footer-line {
+            display: block;
+            width: 100%;
+            height: 1px;
+            margin-bottom: 8px;
+            border: none;
+            background-color: var(--accent-color, #94e2d5) !important;
+            opacity: 0.35;
+        }
+        .slide-footer-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.65em;
+            opacity: 0.6;
+        }
+        .footer-left, .footer-right {
+            flex: 1;
+            display: flex;
+            align-items: center;
+        }
+        .footer-left { justify-content: flex-start; }
+        .footer-right { justify-content: flex-end; }
+
+        /* Reveal.js slide number — centered at bottom */
+        .reveal .slide-number {
+            right: auto !important;
+            left: 50% !important;
+            transform: translateX(-50%) !important;
+            bottom: 20px !important;
+            font-size: 14px !important;
+            color: inherit !important;
+            opacity: 0.5 !important;
+            font-variant-numeric: tabular-nums;
+        }
+
+        /* ─── Typography ────────────────────────────────── */
+        .reveal h2 { font-size: 1.4em; margin-top: 0.3em; }
+        .reveal h3 { font-size: 1.1em; margin-top: 0.3em; }
+        .reveal p { font-size: 0.85em; line-height: 1.6; margin: 0.3em 0; }
+
+        /* ─── Lists ─────────────────────────────────────── */
+        .reveal ul, .reveal ol {
+            display: block;
+            margin: 0.3em 0 0.3em 1.2em;
+            font-size: 0.85em;
+            line-height: 1.6;
+        }
+        .reveal ul ul, .reveal ol ol, .reveal ul ol, .reveal ol ul {
+            margin: 0.1em 0 0.1em 1em;
+            font-size: 0.95em;
+        }
+        .reveal li { margin: 0.15em 0; }
+
+        /* ─── Checklist ─────────────────────────────────── */
+        .reveal .checklist {
+            list-style: none;
+            padding-left: 0;
+            font-size: 0.85em;
+        }
+        .reveal .checklist li {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: 0.2em 0;
+        }
+        .reveal .checklist .check-icon {
+            font-size: 1.1em;
+            flex-shrink: 0;
+        }
+
+        /* ─── Code Blocks ───────────────────────────────── */
+        .reveal pre {
+            width: 100%;
+            font-size: 0.7em;
+            margin: 0.4em 0;
+        }
+        .reveal pre code {
+            padding: 16px 20px;
+            border-radius: 8px;
+            max-height: 420px;
+            line-height: 1.5;
+            background: var(--code-bg, #313244) !important;
+            color: var(--code-color, #cdd6f4) !important;
+        }
+        .reveal code:not(pre code) {
+            background: var(--code-bg, #313244);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.9em;
+        }
+
+        /* ─── Tables ────────────────────────────────────── */
+        .reveal table {
+            margin: 0.5em 0;
+            font-size: 0.75em;
+            border-collapse: collapse;
+            width: auto;
+        }
+        .reveal th, .reveal td {
+            padding: 8px 16px;
+            border: 1px solid var(--table-border, rgba(255,255,255,0.15));
+            text-align: left;
+        }
+        .reveal th {
+            background: var(--table-header-bg, rgba(255,255,255,0.08));
+            font-weight: 600;
+        }
+
+        /* ─── Blockquote ────────────────────────────────── */
+        .reveal blockquote {
+            width: 90%;
+            padding: 12px 20px;
+            margin: 0.5em 0;
+            border-left: 4px solid var(--accent-color, #89b4fa);
+            background: rgba(255,255,255,0.04);
+            font-style: italic;
+            font-size: 0.85em;
+        }
+
+        /* ─── Callouts ──────────────────────────────────── */
+        .callout {
+            padding: 14px 18px;
+            border-radius: 6px;
+            margin: 0.5em 0;
+            font-size: 0.8em;
+            line-height: 1.5;
+            border-left: 4px solid;
+        }
+        .callout-info { border-color: #89b4fa; background: rgba(137,180,250,0.1); }
+        .callout-warning { border-color: #f9e2af; background: rgba(249,226,175,0.1); }
+        .callout-success { border-color: #a6e3a1; background: rgba(166,227,161,0.1); }
+        .callout-danger { border-color: #f38ba8; background: rgba(243,139,168,0.1); }
+        .callout-note { border-color: #cba6f7; background: rgba(203,166,247,0.1); }
+
+        /* ─── Mermaid ───────────────────────────────────── */
+        .mermaid {
+            margin: 0.5em 0;
+            text-align: center;
+            overflow: visible;
+        }
+        .mermaid svg {
+            max-height: 60vh;
+            height: auto;
+            margin: 0 auto;
+            display: block;
+            overflow: visible;
+        }
+        .mermaid .node rect, .mermaid .node polygon {
+            rx: 4 !important;
+            ry: 4 !important;
+        }
+        .mermaid .nodeLabel {
+            white-space: normal !important;
+            word-wrap: break-word !important;
+            overflow-wrap: break-word !important;
+        }
+
+        /* ─── Math (KaTeX) ──────────────────────────────── */
+        .math-block {
+            margin: 0.5em 0;
+            text-align: center;
+            font-size: 1.2em;
+        }
+
+        /* ─── Charts ────────────────────────────────────── */
+        .chart-container {
+            display: flex;
+            justify-content: center;
+            margin: 0.5em 0;
+        }
+        .chart-container canvas {
+            max-height: 380px;
+        }
+
+        /* ─── Images ────────────────────────────────────── */
+        .reveal img:not(.mermaid img) {
+            max-width: 80%;
+            max-height: 380px;
+            border-radius: 6px;
+        }
+
+        /* ─── Properties Table ──────────────────────────── */
+        .properties-table {
+            font-size: 0.8em;
+        }
+        .properties-table td:first-child {
+            font-weight: 600;
+            white-space: nowrap;
+            padding-right: 24px;
+        }
+
+        /* ─── Columns ───────────────────────────────────── */
+        .slide-columns {
+            display: flex;
+            gap: 20px;
+        }
+        .slide-columns > div {
+            flex: 1;
+        }
+
+        /* ─── Grid Cards ────────────────────────────────── */
+        .slide-grid {
+            display: grid;
+            gap: 12px;
+            margin: 0.5em 0;
+        }
+        .slide-card {
+            padding: 16px;
+            border-radius: 8px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .card-icon { font-size: 1.5em; margin-bottom: 6px; }
+        .card-title { font-weight: 600; font-size: 0.85em; }
+        .card-value { font-size: 1.4em; font-weight: 700; margin-top: 4px; }
+        .slide-card-blue { background: rgba(137,180,250,0.15); border-color: rgba(137,180,250,0.3); }
+        .slide-card-green { background: rgba(166,227,161,0.15); border-color: rgba(166,227,161,0.3); }
+        .slide-card-red { background: rgba(243,139,168,0.15); border-color: rgba(243,139,168,0.3); }
+        .slide-card-yellow { background: rgba(249,226,175,0.15); border-color: rgba(249,226,175,0.3); }
+        .slide-card-purple { background: rgba(203,166,247,0.15); border-color: rgba(203,166,247,0.3); }
+        .slide-card-teal { background: rgba(148,226,213,0.15); border-color: rgba(148,226,213,0.3); }
+        .slide-card-gray { background: rgba(186,194,222,0.1); border-color: rgba(186,194,222,0.2); }
+
+        /* ─── Buttons ───────────────────────────────────── */
+        .slide-button {
+            display: inline-block;
+            padding: 8px 20px;
+            border-radius: 6px;
+            font-size: 0.8em;
+            font-weight: 600;
+            cursor: default;
+        }
+        .slide-button-primary { background: #89b4fa; color: #1e1e2e; }
+        .slide-button-secondary { background: #45475a; color: #cdd6f4; }
+        .slide-button-outline { background: transparent; border: 2px solid #89b4fa; color: #89b4fa; }
+        .slide-button-ghost { background: transparent; color: #89b4fa; }
+        .slide-button-danger { background: #f38ba8; color: #1e1e2e; }
+        .slide-buttonstrip {
+            display: flex;
+            gap: 10px;
+            margin: 0.3em 0;
+        }
+        .slide-buttonstrip .slide-button { flex: 1; text-align: center; }
+
+        /* ─── Toggle ────────────────────────────────────── */
+        .slide-toggle {
+            margin: 0.4em 0;
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 6px;
+            overflow: hidden;
+        }
+        .toggle-header {
+            padding: 8px 14px;
+            font-weight: 600;
+            font-size: 0.85em;
+            background: rgba(255,255,255,0.05);
+        }
+        .toggle-content { padding: 8px 14px; }
+
+        /* ─── LinkCard ──────────────────────────────────── */
+        .slide-linkcard {
+            padding: 12px 16px;
+            border: 1px solid rgba(255,255,255,0.12);
+            border-radius: 8px;
+            margin: 0.4em 0;
+            font-size: 0.8em;
+            overflow: hidden;
+        }
+
+        /* ─── Image Caption ─────────────────────────────── */
+        .image-caption {
+            font-size: 0.75em;
+            opacity: 0.6;
+            margin-top: 4px;
+            text-align: center;
+        }
+
+        /* ─── Block Title (math/chart/mermaid) ─────────── */
+        .block-title {
+            font-size: 0.7em;
+            font-weight: 600;
+            opacity: 0.7;
+            margin-bottom: 4px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        /* ─── Links & Misc ──────────────────────────────── */
+        .slide-link {
+            font-size: 0.85em;
+            margin: 0.2em 0;
+        }
+        .slide-link a { color: var(--accent-color, #89b4fa); }
+        .slide-datetime {
+            font-size: 0.85em;
+            padding: 2px 8px;
+            background: rgba(255,255,255,0.06);
+            border-radius: 4px;
+        }
+        .slide-jotxlink {
+            font-size: 0.85em;
+            color: var(--accent-color, #89b4fa);
+        }
+
+        /* ─── Print / PDF Export (16:9 Landscape Slides) ── */
+        @page {
+            size: 1280px 720px landscape;
+            margin: 0;
+        }
+        @media print {
+            body { margin: 0; padding: 0; }
+            .reveal { position: static !important; }
+            .reveal .slides { position: static !important; overflow: visible !important; }
+            .reveal .slides section {
+                display: flex !important;
+                flex-direction: column;
+                width: 1280px !important;
+                height: 720px !important;
+                page-break-after: always;
+                page-break-inside: avoid;
+                box-sizing: border-box;
+                padding: 40px 60px !important;
+                margin: 0 !important;
+                position: static !important;
+                transform: none !important;
+                opacity: 1 !important;
+                visibility: visible !important;
+            }
+            .reveal .slides section:last-child { page-break-after: auto; }
+            .reveal .controls, .reveal .progress, .reveal .slide-number { display: none !important; }
+        }
+
+        /* ─── Controls Visibility ──────────────────── */
+        .reveal .controls { color: var(--accent-color, #94e2d5) !important; opacity: 0.9; }
+        .reveal .controls button { color: var(--accent-color, #94e2d5) !important; font-size: 1.2em; }
+        .reveal .controls button:hover { color: #fff !important; opacity: 1; }
+        .reveal .progress span { background: var(--accent-color, #94e2d5) !important; opacity: 0.8; }
+        .reveal .slide-number { color: var(--accent-color, #94e2d5) !important; font-size: 0.8em; opacity: 0.6; background: transparent !important; }
+
+        /* ─── Floating Toolbar ──────────────────────── */
+        .slide-toolbar {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 2px;
+            align-items: center;
+            padding: 4px 10px;
+            background: rgba(0, 0, 0, 0.65);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            z-index: 100;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .slide-toolbar:hover, .slide-toolbar.visible { opacity: 1; }
+        body:hover .slide-toolbar { opacity: 0.7; }
+        body:hover .slide-toolbar:hover { opacity: 1; }
+        .toolbar-btn {
+            width: 32px;
+            height: 32px;
+            border: none;
+            background: transparent;
+            color: rgba(255, 255, 255, 0.7);
+            cursor: pointer;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+            position: relative;
+            padding: 0;
+        }
+        .toolbar-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+        .toolbar-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
+        .toolbar-btn.active { background: var(--accent-color, #94e2d5); color: #1e1e2e; }
+        .toolbar-btn .tooltip {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.85);
+            color: #fff;
+            padding: 3px 8px;
+            border-radius: 5px;
+            font-size: 10px;
+            white-space: nowrap;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s;
+        }
+        .toolbar-btn:hover .tooltip { opacity: 1; }
+        .toolbar-divider {
+            width: 1px;
+            height: 20px;
+            background: rgba(255, 255, 255, 0.18);
+            margin: 0 3px;
+        }
+
+        /* ─── Pen picker popup ─────────────────────── */
+        .pen-picker {
+            position: absolute;
+            bottom: 42px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.85);
+            border: 1px solid rgba(255,255,255,0.15);
+            border-radius: 10px;
+            padding: 8px;
+            display: none;
+            z-index: 200;
+        }
+        .pen-picker.open { display: flex; flex-direction: column; gap: 6px; }
+        .pen-colors { display: flex; gap: 4px; }
+        .pen-color-dot {
+            width: 20px; height: 20px;
+            border-radius: 50%;
+            border: 2px solid transparent;
+            cursor: pointer;
+            transition: border-color 0.15s;
+        }
+        .pen-color-dot:hover, .pen-color-dot.active { border-color: #fff; }
+        .pen-widths { display: flex; gap: 4px; align-items: center; }
+        .pen-width-btn {
+            width: 24px; height: 24px;
+            border-radius: 50%;
+            border: 1px solid rgba(255,255,255,0.3);
+            background: transparent;
+            color: #fff;
+            font-size: 9px;
+            cursor: pointer;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .pen-width-btn:hover, .pen-width-btn.active { background: rgba(255,255,255,0.2); border-color: #fff; }
+
+        /* ─── Chalkboard canvas ─────────────────────── */
+        .chalkboard-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: 50;
+            cursor: crosshair;
+            display: none;
+        }
+        .chalkboard-active .chalkboard-canvas { display: block; }
+        .chalkboard-active .reveal .controls { display: none !important; }
+
+        /* ─── Laser Pointer ─────────────────────────── */
+        .laser-pointer {
+            position: fixed;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: radial-gradient(circle, #ff0000 30%, rgba(255,0,0,0.4) 70%);
+            box-shadow: 0 0 8px 3px rgba(255, 0, 0, 0.5);
+            pointer-events: none;
+            z-index: 9999;
+            display: none;
+            transform: translate(-50%, -50%);
+        }
+        .laser-active .laser-pointer { display: block; }
+        .laser-active { cursor: none !important; }
+
+        @media print {
+            .slide-toolbar, .laser-pointer, .chalkboard-canvas, .pen-picker { display: none !important; }
+        }
+    </style>
+</head>
+<body>
+    <div class="reveal">
+        <div class="slides">
+            ${sections}
+        </div>
+    </div>
+
+    <!-- Laser pointer element -->
+    <div class="laser-pointer" id="laserDot"></div>
+
+    <!-- Chalkboard canvas -->
+    <canvas class="chalkboard-canvas" id="chalkboardCanvas"></canvas>
+
+    <!-- Floating Toolbar -->
+    <div class="slide-toolbar" id="slideToolbar">
+        <button class="toolbar-btn" id="btnPrev" title="Previous"><svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg><span class="tooltip">Previous (←)</span></button>
+        <button class="toolbar-btn" id="btnNext" title="Next"><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg><span class="tooltip">Next (→)</span></button>
+        <div class="toolbar-divider"></div>
+        <button class="toolbar-btn" id="btnFullscreen" title="Fullscreen"><svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg><span class="tooltip">Fullscreen (F)</span></button>
+        <button class="toolbar-btn" id="btnOverview" title="Overview"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg><span class="tooltip">Overview (O)</span></button>
+        <div class="toolbar-divider"></div>
+        <button class="toolbar-btn" id="btnChalkboard" title="Draw"><svg viewBox="0 0 24 24"><path d="M17 3a2.83 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg><span class="tooltip">Draw (C)</span></button>
+        <button class="toolbar-btn" id="btnLaser" title="Laser"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m-10-10h4m12 0h4m-3.5-7.5l-2.8 2.8m-7.4 7.4l-2.8 2.8m0-13l2.8 2.8m7.4 7.4l2.8 2.8"/></svg><span class="tooltip">Laser (L)</span></button>
+        <div class="toolbar-divider"></div>
+        <button class="toolbar-btn" id="btnPrint" title="Print/PDF"><svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg><span class="tooltip">Print / PDF</span></button>
+    </div>
+
+    <!-- Pen Picker (for chalkboard) -->
+    <div class="pen-picker" id="penPicker">
+        <div class="pen-colors">
+            <div class="pen-color-dot active" data-color="#f38ba8" style="background:#f38ba8"></div>
+            <div class="pen-color-dot" data-color="#a6e3a1" style="background:#a6e3a1"></div>
+            <div class="pen-color-dot" data-color="#89b4fa" style="background:#89b4fa"></div>
+            <div class="pen-color-dot" data-color="#f9e2af" style="background:#f9e2af"></div>
+            <div class="pen-color-dot" data-color="#cba6f7" style="background:#cba6f7"></div>
+            <div class="pen-color-dot" data-color="#ffffff" style="background:#ffffff"></div>
+        </div>
+        <div class="pen-widths">
+            <button class="pen-width-btn" data-width="2">S</button>
+            <button class="pen-width-btn active" data-width="3">M</button>
+            <button class="pen-width-btn" data-width="6">L</button>
+            <button class="pen-width-btn" data-width="10">XL</button>
+        </div>
+    </div>
+
+    <!-- Mermaid for diagrams -->
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+    <!-- KaTeX for math -->
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.js"></script>
+    <!-- Chart.js for charts -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
+    <!-- Highlight.js for code syntax highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+    <script type="module">
+        import Reveal from '${revealJs}';
+
+        // Initialize mermaid with proper sizing and padding
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: '${properties.theme === 'light' || properties.theme === 'minimal' || properties.theme === 'rose' || properties.theme === 'solarized' ? 'default' : 'dark'}',
+            securityLevel: 'loose',
+            flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'basis', padding: 20, nodeSpacing: 50, rankSpacing: 50, wrappingWidth: 200 },
+            sequence: { useMaxWidth: true, actorMargin: 60, actorFontSize: 11, messageFontSize: 11, noteFontSize: 10, wrap: true, wrapPadding: 10 },
+            classDiagram: { useMaxWidth: true, titleTopMargin: 10 },
+            themeVariables: {
+                fontSize: '11px',
+                fontFamily: 'Inter, sans-serif',
+                classFontSize: '11px'
+            }
+        });
+
+        // Post-render: enforce font size on all Mermaid SVG text elements
+        function fixMermaidFonts() {
+            document.querySelectorAll('.mermaid svg text, .mermaid svg tspan').forEach(t => {
+                const cur = parseFloat(t.getAttribute('font-size') || t.style.fontSize || '16');
+                if (cur > 12) { t.setAttribute('font-size', '11'); t.style.fontSize = '11px'; }
+            });
+            document.querySelectorAll('.mermaid svg foreignObject div, .mermaid svg foreignObject span').forEach(el => {
+                const cur = parseFloat(getComputedStyle(el).fontSize || '16');
+                if (cur > 12) el.style.fontSize = '11px';
+            });
+        }
+
+        Reveal.initialize({
+            hash: false,
+            transition: '${properties.transition}',
+            width: ${width},
+            height: ${height},
+            margin: 0,
+            minScale: 0.2,
+            maxScale: 2.0,
+            center: false,
+            controls: true,
+            controlsLayout: 'bottom-right',
+            progress: true,
+            slideNumber: ${properties.shownumbers}, // Centered via CSS override
+            keyboard: true,
+            overview: true,
+            help: true,
+        });${properties.autoanimate ? `
+
+        // Fragment animations — make each element appear one-by-one
+        Reveal.on('ready', function() {
+            document.querySelectorAll('.slide-body').forEach(function(body) {
+                Array.from(body.children).forEach(function(child) {
+                    if (!child.classList.contains('slide-footer') && !child.classList.contains('slide-footer-line')) {
+                        child.classList.add('fragment', 'fade-up');
+                    }
+                });
+            });
+            Reveal.sync(); // tell Reveal about new fragments
+        });` : ''}
+
+        // ── Toolbar wiring ──
+        const laserDot = document.getElementById('laserDot');
+        const chalkCanvas = document.getElementById('chalkboardCanvas');
+        const ctx = chalkCanvas ? chalkCanvas.getContext('2d') : null;
+        const penPicker = document.getElementById('penPicker');
+        let laserActive = false;
+        let chalkActive = false;
+        let drawing = false;
+        let penColor = '#f38ba8';
+        let penWidth = 3;
+
+        // Resize canvas to match window
+        function resizeCanvas() {
+            if (chalkCanvas) { chalkCanvas.width = window.innerWidth; chalkCanvas.height = window.innerHeight; }
+        }
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+
+        function toggleFullscreen() {
+            const el = document.documentElement;
+            const exitFs = document.exitFullscreen || document.webkitExitFullscreen;
+            const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+            if (!fsEl) {
+                const req = el.requestFullscreen || el.webkitRequestFullscreen;
+                if (req) req.call(el).catch(() => { alert('Fullscreen blocked by browser. Use F11 or Cmd+Ctrl+F for fullscreen.'); });
+            } else {
+                if (exitFs) exitFs.call(document).catch(() => {});
+            }
+        }
+        function toggleLaser() {
+            laserActive = !laserActive;
+            if (chalkActive && laserActive) toggleChalkboard();
+            document.body.classList.toggle('laser-active', laserActive);
+            document.getElementById('btnLaser')?.classList.toggle('active', laserActive);
+        }
+        function toggleChalkboard() {
+            chalkActive = !chalkActive;
+            if (laserActive && chalkActive) toggleLaser();
+            document.body.classList.toggle('chalkboard-active', chalkActive);
+            document.getElementById('btnChalkboard')?.classList.toggle('active', chalkActive);
+            if (penPicker) penPicker.classList.toggle('open', chalkActive);
+        }
+        function clearChalkboard() {
+            if (ctx && chalkCanvas) { ctx.clearRect(0, 0, chalkCanvas.width, chalkCanvas.height); }
+        }
+
+        // Pen color/width picker
+        document.querySelectorAll('.pen-color-dot').forEach(dot => {
+            dot.addEventListener('click', () => {
+                document.querySelectorAll('.pen-color-dot').forEach(d => d.classList.remove('active'));
+                dot.classList.add('active');
+                penColor = dot.getAttribute('data-color') || '#f38ba8';
+                if (ctx) ctx.strokeStyle = penColor;
+            });
+        });
+        document.querySelectorAll('.pen-width-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.pen-width-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                penWidth = parseInt(btn.getAttribute('data-width') || '3');
+                if (ctx) ctx.lineWidth = penWidth;
+            });
+        });
+
+        // Chalkboard drawing
+        if (chalkCanvas && ctx) {
+            ctx.strokeStyle = penColor;
+            ctx.lineWidth = penWidth;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            chalkCanvas.addEventListener('mousedown', (e) => {
+                if (!chalkActive) return;
+                drawing = true;
+                ctx.strokeStyle = penColor;
+                ctx.lineWidth = penWidth;
+                ctx.beginPath();
+                ctx.moveTo(e.clientX, e.clientY);
+            });
+            chalkCanvas.addEventListener('mousemove', (e) => {
+                if (!drawing) return;
+                ctx.lineTo(e.clientX, e.clientY);
+                ctx.stroke();
+            });
+            chalkCanvas.addEventListener('mouseup', () => { drawing = false; });
+            chalkCanvas.addEventListener('mouseleave', () => { drawing = false; });
+        }
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'f' || e.key === 'F') toggleFullscreen();
+            if (e.key === 'l' || e.key === 'L') toggleLaser();
+            if (e.key === 'c' || e.key === 'C') toggleChalkboard();
+            if ((e.key === 'd' || e.key === 'D') && chalkActive) clearChalkboard();
+        });
+
+        // Mouse tracking for laser
+        document.addEventListener('mousemove', (e) => {
+            if (laserActive && laserDot) {
+                laserDot.style.left = e.clientX + 'px';
+                laserDot.style.top = e.clientY + 'px';
+            }
+        });
+
+        // Toolbar button handlers
+        document.getElementById('btnPrev')?.addEventListener('click', () => Reveal.prev());
+        document.getElementById('btnNext')?.addEventListener('click', () => Reveal.next());
+        document.getElementById('btnFullscreen')?.addEventListener('click', toggleFullscreen);
+        document.getElementById('btnOverview')?.addEventListener('click', () => Reveal.toggleOverview());
+        document.getElementById('btnChalkboard')?.addEventListener('click', toggleChalkboard);
+        document.getElementById('btnLaser')?.addEventListener('click', toggleLaser);
+        document.getElementById('btnPrint')?.addEventListener('click', () => { window.print(); });
+
+        // ── Render mermaid, KaTeX, Charts, Code highlighting after reveal initializes ──
+        Reveal.on('ready', async () => {
+            // Render mermaid
+            const mermaidEls = document.querySelectorAll('.mermaid');
+            for (let i = 0; i < mermaidEls.length; i++) {
+                const el = mermaidEls[i];
+                let code = el.textContent || '';
+                code = code.replace(/\\\\n/g, String.fromCharCode(10)).trim();
+                if (!code) continue;
+                try {
+                    const { svg } = await mermaid.render('mermaid-' + i, code);
+                    el.innerHTML = svg;
+                } catch (e) {
+                    el.innerHTML = '<pre style="color:#f38ba8;font-size:0.7em;">Mermaid error: ' + e.message + '</pre>';
+                }
+            }
+            fixMermaidFonts();
+
+            // Render KaTeX (base64 encoded to preserve backslashes)
+            document.querySelectorAll('.math-block').forEach(el => {
+                let tex = '';
+                try {
+                    const b64 = el.getAttribute('data-tex-b64') || '';
+                    tex = b64 ? atob(b64) : (el.getAttribute('data-tex') || '');
+                } catch(e) {
+                    tex = el.getAttribute('data-tex') || '';
+                }
+                tex = tex.replace(/\\\\n/g, String.fromCharCode(10));
+                try {
+                    katex.render(tex, el, { displayMode: true, throwOnError: false });
+                } catch(e) {
+                    el.textContent = tex;
+                }
+            });
+
+            // Render Charts with vibrant colors
+            document.querySelectorAll('.chart-container').forEach(el => {
+                const canvas = el.querySelector('canvas');
+                const type = el.getAttribute('data-chart-type') || 'bar';
+                const jsonStr = el.getAttribute('data-chart-json') || '{}';
+                try {
+                    const data = JSON.parse(jsonStr);
+                    new Chart(canvas, {
+                        type: type,
+                        data: data,
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: true,
+                            plugins: {
+                                legend: {
+                                    labels: {
+                                        color: '${properties.theme === 'light' || properties.theme === 'minimal' ? '#333' : '#cdd6f4'}',
+                                        font: { family: 'Inter, sans-serif', size: 13 }
+                                    }
+                                }
+                            },
+                            scales: type === 'pie' || type === 'doughnut' || type === 'radar' ? {} : {
+                                x: {
+                                    ticks: { color: '${properties.theme === 'light' || properties.theme === 'minimal' ? '#666' : '#a6adc8'}', font: { family: 'Inter, sans-serif', size: 12 } },
+                                    grid: { color: 'rgba(255,255,255,0.06)' }
+                                },
+                                y: {
+                                    ticks: { color: '${properties.theme === 'light' || properties.theme === 'minimal' ? '#666' : '#a6adc8'}', font: { family: 'Inter, sans-serif', size: 12 } },
+                                    grid: { color: 'rgba(255,255,255,0.06)' }
+                                }
+                            }
+                        }
+                    });
+                } catch(e) {
+                    canvas.parentElement.innerHTML = '<p style="color:#f38ba8;">Chart error: ' + e.message + '</p>';
+                }
+            });
+
+            // Syntax highlight code blocks
+            document.querySelectorAll('pre code').forEach(block => {
+                try { hljs.highlightElement(block); } catch(e) {}
+            });
+        });
+    </script>
+</body>
+</html>`;
+}
+// ─── Block-to-HTML Renderers (using Tiptap node types) ───────────────
+function blocksToHTML(blocks) {
+    return blocks.map(blockToHTML).join('\n');
+}
+function blockToHTML(node) {
+    switch (node.type) {
+        case 'paragraph':
+            return `<p>${inlineToHTML(node.content)}</p>`;
+        case 'heading': {
+            const level = node.attrs?.level || 2;
+            return `<h${level}>${inlineToHTML(node.content)}</h${level}>`;
+        }
+        // ─── Lists (Tiptap names) ───
+        case 'bulletList': {
+            const items = (node.content || []).map((item) => `<li>${blocksToHTML(item.content || [])}</li>`).join('');
+            return `<ul>${items}</ul>`;
+        }
+        case 'orderedList': {
+            const start = node.attrs?.start || 1;
+            const items = (node.content || []).map((item) => `<li>${blocksToHTML(item.content || [])}</li>`).join('');
+            return `<ol start="${start}">${items}</ol>`;
+        }
+        case 'listItem':
+            return blocksToHTML(node.content || []);
+        // ─── Checklists (Tiptap names) ───
+        case 'taskList': {
+            const items = (node.content || []).map((item) => {
+                const checked = item.attrs?.checked;
+                const icon = checked ? '☑' : '☐';
+                const style = checked ? 'opacity:0.6;text-decoration:line-through;' : '';
+                return `<li><span class="check-icon">${icon}</span><span style="${style}">${blocksToHTML(item.content || [])}</span></li>`;
+            }).join('');
+            return `<ul class="checklist">${items}</ul>`;
+        }
+        case 'taskItem':
+            return blocksToHTML(node.content || []);
+        // ─── Code ───
+        case 'codeBlock': {
+            const lang = node.attrs?.language || '';
+            const text = extractTextWithNewlines(node);
+            return `<pre><code class="language-${escapeHtml(lang)}">${escapeHtml(text)}</code></pre>`;
+        }
+        // ─── Quote ───
+        case 'blockquote':
+            return `<blockquote>${blocksToHTML(node.content || [])}</blockquote>`;
+        // ─── Callout ───
+        case 'callout': {
+            const variant = node.attrs?.variant || 'info';
+            return `<div class="callout callout-${escapeHtml(variant)}">${blocksToHTML(node.content || [])}</div>`;
+        }
+        // ─── Table (Tiptap names) ───
+        case 'table': {
+            const rows = (node.content || []).map((row) => {
+                const cells = (row.content || []).map((cell) => {
+                    const tag = cell.type === 'tableHeader' ? 'th' : 'td';
+                    const colspan = cell.attrs?.colspan > 1 ? ` colspan="${cell.attrs.colspan}"` : '';
+                    const rowspan = cell.attrs?.rowspan > 1 ? ` rowspan="${cell.attrs.rowspan}"` : '';
+                    return `<${tag}${colspan}${rowspan}>${blocksToHTML(cell.content || [])}</${tag}>`;
+                }).join('');
+                return `<tr>${cells}</tr>`;
+            }).join('');
+            return `<table>${rows}</table>`;
+        }
+        // ─── Mermaid (attrs.src) ───
+        case 'mermaid': {
+            const mermaidTitle = node.attrs?.title || '';
+            const src = node.attrs?.src || extractText(node);
+            // Don't escapeHtml mermaid — it needs raw text. But we do need to
+            // convert literal \n strings to real newlines for the JS renderer.
+            const mermaidTitleHtml = mermaidTitle ? `<div class="block-title">${escapeHtml(mermaidTitle)}</div>` : '';
+            return `${mermaidTitleHtml}<div class="mermaid">${src}</div>`;
+        }
+        // ─── Chart (attrs.json + attrs.chartType) ───
+        case 'chart': {
+            const chartTitle = node.attrs?.title || '';
+            const chartType = node.attrs?.chartType || node.attrs?.charttype || 'bar';
+            const json = node.attrs?.json || '';
+            const chartTitleHtml = chartTitle ? `<div class="block-title">${escapeHtml(chartTitle)}</div>` : '';
+            return `${chartTitleHtml}<div class="chart-container" data-chart-type="${escapeHtml(chartType)}" data-chart-json="${escapeHtml(json)}"><canvas></canvas></div>`;
+        }
+        // ─── Math (attrs.src, rendered via KaTeX) ───
+        case 'math': {
+            const mathTitle = node.attrs?.title || '';
+            let src = node.attrs?.src || extractText(node);
+            // Normalize double backslashes to single (jot parser preserves literal \\, KaTeX needs \)
+            // Using String.fromCharCode to avoid backslash escaping issues in bundled code
+            const dblBs = String.fromCharCode(92, 92);
+            const sglBs = String.fromCharCode(92);
+            while (src.includes(dblBs)) {
+                src = src.split(dblBs).join(sglBs);
+            }
+            // Base64 encode LaTeX to preserve backslashes through HTML attribute
+            const texB64 = typeof btoa === 'function' ? btoa(unescape(encodeURIComponent(src))) : Buffer.from(src, 'utf-8').toString('base64');
+            const mathTitleHtml = mathTitle ? `<div class="block-title">${escapeHtml(mathTitle)}</div>` : '';
+            return `${mathTitleHtml}<div class="math-block" data-tex-b64="${texB64}"></div>`;
+        }
+        // ─── Image (inline Tiptap image) ───
+        case 'image': {
+            const imgSrc = node.attrs?.src || '';
+            const imgAlt = node.attrs?.alt || '';
+            return `<img src="${escapeHtml(imgSrc)}" alt="${escapeHtml(imgAlt)}" />`;
+        }
+        // ─── ImageBlock (jotx custom image with caption/alignment) ───
+        case 'imageBlock': {
+            const ibSrc = node.attrs?.src || '';
+            const ibAlt = node.attrs?.alt || '';
+            const ibCaption = node.attrs?.caption || '';
+            const ibAlign = node.attrs?.align || 'center';
+            const ibWidth = node.attrs?.width || 800;
+            return `<div class="image-block" style="text-align:${ibAlign};">
+                <img src="${escapeHtml(ibSrc)}" alt="${escapeHtml(ibAlt)}" style="max-width:${Math.min(ibWidth, 900)}px;width:100%;" />
+                ${ibCaption ? `<p class="image-caption">${escapeHtml(ibCaption)}</p>` : ''}
+            </div>`;
+        }
+        // ─── FloatImageBlock ───
+        case 'floatImageBlock': {
+            const fiSrc = node.attrs?.src || '';
+            const fiAlt = node.attrs?.alt || '';
+            const fiFloat = node.attrs?.float || 'right';
+            const fiWidth = node.attrs?.width || 300;
+            return `<img src="${escapeHtml(fiSrc)}" alt="${escapeHtml(fiAlt)}" style="float:${fiFloat};max-width:${fiWidth}px;margin:${fiFloat === 'left' ? '0 16px 8px 0' : '0 0 8px 16px'};" />`;
+        }
+        // ─── VideoBlock ───
+        case 'videoBlock': {
+            const vSrc = node.attrs?.src || '';
+            const vType = node.attrs?.type || 'local';
+            const vTitle = node.attrs?.title || '';
+            if (vType === 'youtube') {
+                // Extract YouTube ID
+                const ytMatch = vSrc.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([^&?#]+)/);
+                const ytId = ytMatch ? ytMatch[1] : vSrc;
+                const ytUrl = `https://www.youtube.com/watch?v=${escapeHtml(ytId)}`;
+                const thumbUrl = `https://img.youtube.com/vi/${escapeHtml(ytId)}/hqdefault.jpg`;
+                return `<div style="text-align:center;margin:0.5em 0;">
+                    <a href="${ytUrl}" target="_blank" rel="noopener" style="display:inline-block;position:relative;cursor:pointer;text-decoration:none;">
+                        <img src="${thumbUrl}" alt="${escapeHtml(vTitle || 'YouTube Video')}" style="width:640px;max-width:90%;border-radius:6px;" />
+                        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;background:rgba(0,0,0,0.7);border-radius:12px;display:flex;align-items:center;justify-content:center;">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="white"><polygon points="6,4 20,12 6,20"/></svg>
+                        </div>
+                    </a>
+                    ${vTitle ? `<p class="image-caption">${escapeHtml(vTitle)} — <a href="${ytUrl}" target="_blank" style="color:#89b4fa;">Open on YouTube ↗</a></p>` : `<p class="image-caption"><a href="${ytUrl}" target="_blank" style="color:#89b4fa;">Open on YouTube ↗</a></p>`}
+                </div>`;
+            }
+            return `<div style="text-align:center;margin:0.5em 0;">
+                <video src="${escapeHtml(vSrc)}" controls style="max-width:640px;border-radius:6px;"></video>
+                ${vTitle ? `<p class="image-caption">${escapeHtml(vTitle)}</p>` : ''}
+            </div>`;
+        }
+        // ─── Columns ───
+        case 'columns': {
+            const cols = (node.content || []).map((col) => `<div>${blocksToHTML(col.content || [])}</div>`).join('');
+            return `<div class="slide-columns">${cols}</div>`;
+        }
+        // ─── Column (child of columns) ───
+        case 'column':
+            return blocksToHTML(node.content || []);
+        // ─── GridCard (card grid layout) ───
+        case 'gridcard': {
+            const layout = node.attrs?.layout || '2x2';
+            const [gridCols] = layout.split('x').map(Number);
+            const cards = (node.content || []).map((card) => {
+                const cTitle = card.attrs?.title || '';
+                const cValue = card.attrs?.value || '';
+                const cIcon = card.attrs?.icon || '';
+                const cColor = card.attrs?.color || 'teal';
+                return `<div class="slide-card slide-card-${escapeHtml(cColor)}">
+                    ${cIcon ? `<div class="card-icon">${escapeHtml(cIcon)}</div>` : ''}
+                    <div class="card-title">${escapeHtml(cTitle)}</div>
+                    ${cValue ? `<div class="card-value">${escapeHtml(cValue)}</div>` : ''}
+                </div>`;
+            }).join('');
+            return `<div class="slide-grid" style="grid-template-columns:repeat(${gridCols},1fr);">${cards}</div>`;
+        }
+        // ─── Card (standalone, child of gridcard) ───
+        case 'card': {
+            const cardTitle = node.attrs?.title || '';
+            const cardValue = node.attrs?.value || '';
+            const cardIcon = node.attrs?.icon || '';
+            const cardColor = node.attrs?.color || 'teal';
+            return `<div class="slide-card slide-card-${escapeHtml(cardColor)}">
+                ${cardIcon ? `<div class="card-icon">${escapeHtml(cardIcon)}</div>` : ''}
+                <div class="card-title">${escapeHtml(cardTitle)}</div>
+                ${cardValue ? `<div class="card-value">${escapeHtml(cardValue)}</div>` : ''}
+            </div>`;
+        }
+        // ─── Button ───
+        case 'button': {
+            const bLabel = node.attrs?.label || 'Button';
+            const bStyle = node.attrs?.style || 'primary';
+            const bAlign = node.attrs?.align || 'left';
+            return `<div style="text-align:${bAlign};margin:0.3em 0;">
+                <span class="slide-button slide-button-${escapeHtml(bStyle)}">${escapeHtml(bLabel)}</span>
+            </div>`;
+        }
+        // ─── ButtonStrip ───
+        case 'buttonstrip': {
+            const buttons = (node.content || []).map((btn) => {
+                const btnLabel = btn.attrs?.label || 'Button';
+                const btnStyle = btn.attrs?.style || 'primary';
+                return `<span class="slide-button slide-button-${escapeHtml(btnStyle)}">${escapeHtml(btnLabel)}</span>`;
+            }).join('');
+            return `<div class="slide-buttonstrip">${buttons}</div>`;
+        }
+        // ─── LinkBlock ───
+        case 'linkBlock': {
+            const linkHref = node.attrs?.href || '';
+            const linkText = inlineToHTML(node.content) || escapeHtml(linkHref);
+            return `<div class="slide-link"><a href="${escapeHtml(linkHref)}" target="_blank">🔗 ${linkText}</a></div>`;
+        }
+        // ─── Attach ───
+        case 'attach': {
+            const attachPath = node.attrs?.path || '';
+            const attachText = node.attrs?.text || attachPath;
+            return `<div class="slide-link">📎 ${escapeHtml(attachText)}</div>`;
+        }
+        // ─── DateTime ───
+        case 'datetime': {
+            const dtValue = node.attrs?.value || '';
+            const dtMode = node.attrs?.mode || 'datetime';
+            let display = dtValue;
+            try {
+                const d = new Date(dtValue);
+                if (!isNaN(d.getTime())) {
+                    if (dtMode === 'date')
+                        display = d.toLocaleDateString();
+                    else if (dtMode === 'time')
+                        display = d.toLocaleTimeString();
+                    else
+                        display = d.toLocaleString();
+                }
+            }
+            catch { /* use raw value */ }
+            return `<span class="slide-datetime">📅 ${escapeHtml(display)}</span>`;
+        }
+        // ─── JotxLink (internal link) ───
+        case 'jotxlink': {
+            const jlTarget = node.attrs?.target || '';
+            const jlText = node.attrs?.text || jlTarget;
+            return `<span class="slide-jotxlink">📄 ${escapeHtml(jlText)}</span>`;
+        }
+        // ─── CodeReference ───
+        case 'codeReference': {
+            const crPath = node.attrs?.path || '';
+            const crLang = node.attrs?.language || '';
+            const crText = node.attrs?.text || '';
+            const crLines = node.attrs?.lines || '';
+            return `<div>
+                <div style="font-size:0.7em;opacity:0.6;margin-bottom:4px;">📁 ${escapeHtml(crPath)}${crLines ? ` (L${escapeHtml(crLines)})` : ''}</div>
+                ${crText ? `<pre><code class="language-${escapeHtml(crLang)}">${escapeHtml(crText)}</code></pre>` : ''}
+            </div>`;
+        }
+        // ─── LinkCard (URL preview) ───
+        case 'linkcard': {
+            const lcUrl = node.attrs?.url || '';
+            const lcTitle = node.attrs?.title || lcUrl;
+            const lcDesc = node.attrs?.description || '';
+            const lcImage = node.attrs?.image || '';
+            return `<div class="slide-linkcard">
+                ${lcImage ? `<img src="${escapeHtml(lcImage)}" style="width:60px;height:60px;object-fit:cover;border-radius:4px;float:left;margin-right:12px;" />` : ''}
+                <div>
+                    <strong>${escapeHtml(lcTitle)}</strong>
+                    ${lcDesc ? `<br><span style="font-size:0.85em;opacity:0.7;">${escapeHtml(lcDesc)}</span>` : ''}
+                    <br><a href="${escapeHtml(lcUrl)}" style="font-size:0.75em;" target="_blank">${escapeHtml(lcUrl)}</a>
+                </div>
+            </div>`;
+        }
+        // ─── Properties ───
+        case 'properties': {
+            const items = (node.content || []).map((prop) => {
+                const key = prop.attrs?.key || '';
+                const value = prop.attrs?.value || '';
+                return `<tr><td><strong>${escapeHtml(key)}</strong></td><td>${escapeHtml(value)}</td></tr>`;
+            }).join('');
+            return items ? `<table class="properties-table">${items}</table>` : '';
+        }
+        // ─── Section (container) ───
+        case 'section': {
+            const sTitle = node.attrs?.title || '';
+            const titleHtml = sTitle ? `<h3>${escapeHtml(sTitle)}</h3>` : '';
+            return `${titleHtml}${blocksToHTML(node.content || [])}`;
+        }
+        // ─── Toggle (collapsible — rendered expanded in slides) ───
+        case 'toggle': {
+            const tTitle = node.attrs?.title || 'Toggle';
+            return `<div class="slide-toggle">
+                <div class="toggle-header">▸ ${escapeHtml(tTitle)}</div>
+                <div class="toggle-content">${blocksToHTML(node.content || [])}</div>
+            </div>`;
+        }
+        // ─── Divider within a slide ───
+        case 'divider':
+        case 'horizontalRule':
+            return '<hr style="border:none;border-top:1px solid rgba(255,255,255,0.15);margin:0.5em 0;">';
+        // ─── SlideProperties (skip in rendering) ───
+        case 'slideproperties':
+            return '';
+        default:
+            // Fallback: try to extract content recursively
+            if (node.content)
+                return blocksToHTML(node.content);
+            if (node.text)
+                return `<p>${escapeHtml(node.text)}</p>`;
+            return '';
+    }
+}
+function inlineToHTML(content) {
+    if (!content)
+        return '';
+    return content.map((node) => {
+        if (node.type === 'text') {
+            let text = escapeHtml(node.text || '');
+            const marks = node.marks || [];
+            for (const mark of marks) {
+                switch (mark.type) {
+                    case 'bold':
+                        text = `<strong>${text}</strong>`;
+                        break;
+                    case 'italic':
+                        text = `<em>${text}</em>`;
+                        break;
+                    case 'code':
+                        text = `<code>${text}</code>`;
+                        break;
+                    case 'strike':
+                        text = `<del>${text}</del>`;
+                        break;
+                    case 'link':
+                        text = `<a href="${escapeHtml(mark.attrs?.href || '')}">${text}</a>`;
+                        break;
+                    case 'highlight':
+                        text = `<mark>${text}</mark>`;
+                        break;
+                    case 'underline':
+                        text = `<u>${text}</u>`;
+                        break;
+                }
+            }
+            return text;
+        }
+        if (node.type === 'hardBreak')
+            return '<br>';
+        return '';
+    }).join('');
+}
+function extractText(node) {
+    if (node.text)
+        return node.text;
+    if (node.content)
+        return node.content.map(extractText).join('');
+    return '';
+}
+/**
+ * Extract text preserving newlines between block-level nodes (for code blocks)
+ * Each text node in a codeBlock is a separate line
+ */
+function extractTextWithNewlines(node) {
+    if (node.text)
+        return node.text;
+    if (node.content) {
+        return node.content.map((child) => {
+            if (child.type === 'text')
+                return child.text || '';
+            if (child.type === 'hardBreak')
+                return '\n';
+            return extractTextWithNewlines(child);
+        }).join('');
+    }
+    return '';
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+// ─── Theme CSS ───────────────────────────────────────────────────────
+function getThemeCSS(theme) {
+    switch (theme) {
+        case 'light':
+            return `
+                :root { --accent-color: #0d9488; --code-bg: #f1f5f9; --code-color: #1e293b; --table-border: rgba(0,0,0,0.15); --table-header-bg: rgba(0,0,0,0.05); }
+                .reveal { background: #ffffff; color: #334155; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #0f766e; }
+                .reveal a { color: #0d9488; }
+                .reveal th { background: rgba(0,0,0,0.04); }
+                .reveal th, .reveal td { border-color: rgba(0,0,0,0.1); }
+                .reveal blockquote { background: rgba(0,0,0,0.03); border-color: #0d9488; }
+                .callout-info { border-color: #0d9488; background: rgba(13,148,136,0.08); }
+            `;
+        case 'corporate':
+            return `
+                :root { --accent-color: #e94560; --code-bg: #16213e; --code-color: #e0e0e0; }
+                .reveal { background: #1a1a2e; color: #eee; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #e94560; }
+                .reveal a { color: #89dceb; }
+            `;
+        case 'minimal':
+            return `
+                :root { --accent-color: #6b7280; --code-bg: #f3f4f6; --code-color: #1f2937; --table-border: rgba(0,0,0,0.12); --table-header-bg: rgba(0,0,0,0.04); }
+                .reveal { background: #fafafa; color: #374151; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #111827; font-weight: 400; }
+                .reveal a { color: #4b5563; text-decoration: underline; }
+                .reveal th { background: rgba(0,0,0,0.04); }
+                .reveal th, .reveal td { border-color: rgba(0,0,0,0.08); }
+                .reveal blockquote { background: rgba(0,0,0,0.03); }
+            `;
+        case 'ocean':
+            return `
+                :root { --accent-color: #38bdf8; --code-bg: #0c1929; --code-color: #bae6fd; }
+                .reveal { background: #0f172a; color: #cbd5e1; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #38bdf8; }
+                .reveal a { color: #7dd3fc; }
+            `;
+        case 'sunset':
+            return `
+                :root { --accent-color: #fb923c; --code-bg: #292524; --code-color: #fde68a; }
+                .reveal { background: #1c1917; color: #e7e5e4; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #fb923c; }
+                .reveal a { color: #fdba74; }
+            `;
+        case 'forest':
+            return `
+                :root { --accent-color: #4ade80; --code-bg: #052e16; --code-color: #bbf7d0; }
+                .reveal { background: #022c22; color: #d1fae5; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #4ade80; }
+                .reveal a { color: #86efac; }
+            `;
+        case 'dracula':
+            return `
+                :root { --accent-color: #bd93f9; --code-bg: #282a36; --code-color: #f8f8f2; }
+                .reveal { background: #282a36; color: #f8f8f2; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #bd93f9; }
+                .reveal a { color: #8be9fd; }
+                .slide-header-line, .slide-footer-line { background: linear-gradient(90deg, #bd93f9, #ff79c6, #8be9fd); }
+            `;
+        case 'neon':
+            return `
+                :root { --accent-color: #00f0ff; --code-bg: #0a0a0a; --code-color: #00f0ff; }
+                .reveal { background: #000000; color: #e0e0e0; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #00f0ff; text-shadow: 0 0 20px rgba(0,240,255,0.4); }
+                .reveal a { color: #ff00ff; }
+                .slide-header-line, .slide-footer-line { background: linear-gradient(90deg, #00f0ff, #ff00ff, #39ff14); }
+            `;
+        case 'rose':
+            return `
+                :root { --accent-color: #be185d; --code-bg: #fdf2f8; --code-color: #831843; --table-border: rgba(190,24,93,0.18); --table-header-bg: rgba(190,24,93,0.06); }
+                .reveal { background: #fff1f2; color: #4a044e; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #be185d; }
+                .reveal a { color: #db2777; }
+                .reveal th { background: rgba(190,24,93,0.06); }
+                .reveal th, .reveal td { border-color: rgba(190,24,93,0.15); }
+                .reveal blockquote { background: rgba(190,24,93,0.04); border-color: #be185d; }
+                .slide-header-line, .slide-footer-line { background: linear-gradient(90deg, #ec4899, #f472b6, #fda4af); }
+            `;
+        case 'solarized':
+            return `
+                :root { --accent-color: #268bd2; --code-bg: #fdf6e3; --code-color: #586e75; --table-border: rgba(0,0,0,0.15); --table-header-bg: rgba(0,0,0,0.05); }
+                .reveal { background: #fdf6e3; color: #657b83; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #268bd2; }
+                .reveal a { color: #2aa198; }
+                .reveal th { background: rgba(0,0,0,0.04); }
+                .reveal th, .reveal td { border-color: rgba(0,0,0,0.1); }
+                .reveal blockquote { background: rgba(0,0,0,0.03); border-color: #268bd2; }
+            `;
+        case 'dark':
+        default:
+            return `
+                :root { --accent-color: #94e2d5; --code-bg: #1e293b; --code-color: #e2e8f0; }
+                .reveal { background: #0f172a; color: #e2e8f0; }
+                .reveal h1, .reveal h2, .reveal h3 { color: #94e2d5; }
+                .reveal a { color: #5eead4; }
+            `;
+    }
+}
+//# sourceMappingURL=PresentationConverter.js.map