@thanh01.pmt/presentation-kit 0.2.14 → 0.2.15

package/dist/ai/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJIIUW2TN_cjs = require('../chunk-JIIUW2TN.cjs');
+var chunkSUGKWGJJ_cjs = require('../chunk-SUGKWGJJ.cjs');
 var zod = require('zod');
 
 var listSlidePresetsSchema = zod.z.object({
@@ -64,7 +64,7 @@ var generateDeckOutlineSchema = zod.z.object({
 // src/ai/tools.ts
 function executeListSlidePresets(params) {
   const category = params?.category;
-  const presets = !category || category === "all" ? chunkJIIUW2TN_cjs.SLIDE_LAYOUT_PRESETS : chunkJIIUW2TN_cjs.getSlideLayoutPresetsByCategory(category);
+  const presets = !category || category === "all" ? chunkSUGKWGJJ_cjs.SLIDE_LAYOUT_PRESETS : chunkSUGKWGJJ_cjs.getSlideLayoutPresetsByCategory(category);
   return {
     count: presets.length,
     presets: presets.map((p) => ({
@@ -78,7 +78,7 @@ function executeListSlidePresets(params) {
   };
 }
 function executeCreateSlideFromPreset(params) {
-  const preset = chunkJIIUW2TN_cjs.getSlideLayoutPresetById(params.presetId);
+  const preset = chunkSUGKWGJJ_cjs.getSlideLayoutPresetById(params.presetId);
   if (!preset) {
     return {
       success: false,
@@ -86,7 +86,7 @@ function executeCreateSlideFromPreset(params) {
       error: `Preset with ID "${params.presetId}" not found. Use listSlidePresets to see available layout templates.`
     };
   }
-  const layoutComment = chunkJIIUW2TN_cjs.serializeLayoutToComment(preset.layout);
+  const layoutComment = chunkSUGKWGJJ_cjs.serializeLayoutToComment(preset.layout);
   const title = params.title;
   const subtitle = params.subtitle ? `
 ### ${params.subtitle}` : "";
@@ -227,7 +227,7 @@ Presenter Notes:
 function executeApplySlideLayout(params) {
   let layoutData = null;
   if (params.presetId) {
-    const preset = chunkJIIUW2TN_cjs.getSlideLayoutPresetById(params.presetId);
+    const preset = chunkSUGKWGJJ_cjs.getSlideLayoutPresetById(params.presetId);
     if (!preset) {
       return {
         success: false,
@@ -239,7 +239,7 @@ function executeApplySlideLayout(params) {
   } else if (params.boxes && params.boxes.length > 0) {
     layoutData = { boxes: params.boxes };
   }
-  const updatedMarkdown = chunkJIIUW2TN_cjs.updateSlideLayoutInMarkdown(
+  const updatedMarkdown = chunkSUGKWGJJ_cjs.updateSlideLayoutInMarkdown(
     params.markdown,
     params.slideIndex,
     layoutData
@@ -250,7 +250,7 @@ function executeApplySlideLayout(params) {
   };
 }
 function executeUpdatePresenterNotes(params) {
-  const { frontmatter, slides } = chunkJIIUW2TN_cjs.splitMarkdownSlides(params.markdown);
+  const { frontmatter, slides } = chunkSUGKWGJJ_cjs.splitMarkdownSlides(params.markdown);
   if (params.slideIndex < 0 || params.slideIndex >= slides.length) {
     return {
       success: false,
@@ -469,13 +469,13 @@ function validateHtmlSlideDeck(deck, strict = false) {
   slides.forEach((slide, idx) => {
     const slideNumber = idx + 1;
     const layoutId = slide.layoutId;
-    const preset = chunkJIIUW2TN_cjs.HTML_SLIDE_PRESETS[layoutId];
+    const preset = chunkSUGKWGJJ_cjs.HTML_SLIDE_PRESETS[layoutId];
     if (!preset) {
       issues.push({
         slideIndex: slideNumber,
         severity: "error",
         rule: "INVALID_LAYOUT_PRESET",
-        message: `Unknown layoutId "${slide.layoutId}". Available presets: ${Object.keys(chunkJIIUW2TN_cjs.HTML_SLIDE_PRESETS).join(", ")}`
+        message: `Unknown layoutId "${slide.layoutId}". Available presets: ${Object.keys(chunkSUGKWGJJ_cjs.HTML_SLIDE_PRESETS).join(", ")}`
       });
       return;
     }
@@ -624,7 +624,7 @@ function validateMarkdownSlideDeck(markdown, strict = false) {
       suggestions: ['Provide Markdown slide content delimited by "---".']
     };
   }
-  const { slides: rawSlides } = chunkJIIUW2TN_cjs.splitMarkdownSlides(markdown);
+  const { slides: rawSlides } = chunkSUGKWGJJ_cjs.splitMarkdownSlides(markdown);
   const activeSlides = rawSlides.filter((s) => s.trim().length > 0);
   const slideCount = activeSlides.length;
   if (slideCount === 0) {
@@ -872,7 +872,7 @@ Scaffolding Tip: Compare it to ordering coffee at a counter (async buzzer) versu
 // src/ai/html/tools.ts
 function handleListHtmlSlidePresets(input) {
   const category = input.category || "all";
-  const presets = Object.values(chunkJIIUW2TN_cjs.HTML_SLIDE_PRESETS).filter((p) => category === "all" || p.category === category).map((p) => ({
+  const presets = Object.values(chunkSUGKWGJJ_cjs.HTML_SLIDE_PRESETS).filter((p) => category === "all" || p.category === category).map((p) => ({
     id: p.id,
     name: p.name,
     category: p.category,
@@ -888,12 +888,12 @@ function handleListHtmlSlidePresets(input) {
   return {
     success: true,
     presets,
-    availableThemes: Object.keys(chunkJIIUW2TN_cjs.HTML_THEMES)
+    availableThemes: Object.keys(chunkSUGKWGJJ_cjs.HTML_THEMES)
   };
 }
 function handleGenerateHtmlDeck(input) {
   try {
-    const result = chunkJIIUW2TN_cjs.compileHtmlDeck(input);
+    const result = chunkSUGKWGJJ_cjs.compileHtmlDeck(input);
     return {
       success: true,
       title: result.title,
@@ -909,7 +909,7 @@ function handleGenerateHtmlDeck(input) {
   }
 }
 function handleCreateHtmlSlide(input) {
-  const preset = chunkJIIUW2TN_cjs.HTML_SLIDE_PRESETS[input.layoutId];
+  const preset = chunkSUGKWGJJ_cjs.HTML_SLIDE_PRESETS[input.layoutId];
   if (!preset) {
     return {
       success: false,

package/dist/ai/index.js

@@ -1,4 +1,4 @@
-import { SLIDE_LAYOUT_PRESETS, getSlideLayoutPresetsByCategory, getSlideLayoutPresetById, serializeLayoutToComment, updateSlideLayoutInMarkdown, splitMarkdownSlides, HTML_SLIDE_PRESETS, HTML_THEMES, compileHtmlDeck } from '../chunk-A7T5Y2G4.js';
+import { SLIDE_LAYOUT_PRESETS, getSlideLayoutPresetsByCategory, getSlideLayoutPresetById, serializeLayoutToComment, updateSlideLayoutInMarkdown, splitMarkdownSlides, HTML_SLIDE_PRESETS, HTML_THEMES, compileHtmlDeck } from '../chunk-YPYAP4TF.js';
 import { z } from 'zod';
 
 var listSlidePresetsSchema = z.object({

package/dist/{chunk-JIIUW2TN.cjs → chunk-SUGKWGJJ.cjs}

@@ -1282,9 +1282,9 @@ var HTML_SLIDE_PRESETS = {
 
 // src/html-engine/shell.ts
 function generateHtmlShell(options) {
-  const { title, theme, slidesHtml, slideCount, customHeadTags = "" } = options;
+  const { title, theme, slidesHtml, slideCount, customHeadTags = "", deckId = "" } = options;
   return `<!DOCTYPE html>
-<html lang="en" class="${theme.scheme}">
+<html lang="en" class="${theme.scheme}"${deckId ? ` data-deck-id="${deckId}"` : ""}>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -1298,6 +1298,7 @@ function generateHtmlShell(options) {
   <!-- Core Presentation Styling & 1920x1080 Scaled Tailwind Configuration -->
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
+    window.tailwind = window.tailwind || {};
     tailwind.config = {
       darkMode: 'class',
       theme: {
@@ -1421,6 +1422,7 @@ function generateHtmlShell(options) {
       left: 50%;
       width: 1920px;
       height: 1080px;
+      transform: translate(-50%, -50%);
       transform-origin: center center;
       background-color: var(--bg);
       overflow: hidden;
@@ -2421,10 +2423,21 @@ function generateHtmlShell(options) {
       const TOTAL_SLIDES = ${slideCount};
       let currentSlide = 0;
       let isEditMode = false;
-      const STORAGE_KEY = 'deck_edit_' + encodeURIComponent(document.title.trim() || 'default');
-      const originalCanvasHtml = document.getElementById('canvas').innerHTML;
-
       const canvas = document.getElementById('canvas');
+      const originalCanvasHtml = canvas ? canvas.innerHTML : '';
+
+      function computeDeckContentHash(str) {
+        let h = 0;
+        for (let i = 0; i < str.length; i++) {
+          h = (Math.imul(31, h) + str.charCodeAt(i)) | 0;
+        }
+        return Math.abs(h).toString(36);
+      }
+
+      const deckIdAttr = document.documentElement.getAttribute('data-deck-id');
+      const contentHash = computeDeckContentHash(originalCanvasHtml);
+      const deckKeyPrefix = deckIdAttr ? encodeURIComponent(deckIdAttr) : (encodeURIComponent(document.title.trim() || 'deck') + '_' + contentHash);
+      const STORAGE_KEY = 'deck_edit_' + deckKeyPrefix;
       const slides = document.querySelectorAll('.slide-page');
       const progressBar = document.getElementById('progress-bar');
       const counter = document.getElementById('slide-counter');
@@ -2484,7 +2497,7 @@ function generateHtmlShell(options) {
       let timerInterval = null;
       let isTimerRunning = false;
 
-      const SCALE_STORAGE_KEY = 'deck_scale_' + encodeURIComponent(document.title.trim() || 'default');
+      const SCALE_STORAGE_KEY = 'deck_scale_' + deckKeyPrefix;
       let scaleState = {
         mode: 'unified', // 'unified' | 'independent'
         factor: 1.0,
@@ -2508,8 +2521,9 @@ function generateHtmlShell(options) {
       // Auto-scale 1920x1080 canvas to fit window
       function resizeCanvas() {
         if (isDeckMode) return;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
+        const vw = window.innerWidth || document.documentElement.clientWidth || 1920;
+        const vh = window.innerHeight || document.documentElement.clientHeight || 1080;
+        if (vw <= 0 || vh <= 0) return;
         const scaleX = vw / 1920;
         const scaleY = vh / 1080;
         const scale = Math.min(scaleX, scaleY);
@@ -2517,7 +2531,10 @@ function generateHtmlShell(options) {
       }
 
       window.addEventListener('resize', resizeCanvas);
+      window.addEventListener('load', resizeCanvas);
+      document.addEventListener('DOMContentLoaded', resizeCanvas);
       resizeCanvas();
+      requestAnimationFrame(resizeCanvas);
 
       function getSlideNotes(slideIndex) {
         if (slideIndex < 0 || slideIndex >= slides.length) return '';
@@ -2690,8 +2707,7 @@ function generateHtmlShell(options) {
         if (!presenterNotesText) return;
         const notes = getSlideNotes(currentSlide);
         if (notes && notes.trim()) {
-          presenterNotesText.innerHTML = notes.replace(/
-/g, '<br/>');
+          presenterNotesText.innerHTML = notes.split('\\n').join('<br/>');
         } else {
           presenterNotesText.innerHTML = '<span style="opacity: 0.5; font-style: italic;">No speaker notes for Slide ' + (currentSlide + 1) + '.</span>';
         }
@@ -2708,7 +2724,7 @@ function generateHtmlShell(options) {
 
       function openPresenterConsole() {
         startTimer();
-        const popupName = 'PresenterConsole_' + encodeURIComponent(document.title.replace(/W/g, ''));
+        const popupName = 'PresenterConsole_' + encodeURIComponent(document.title.replace(/[^a-zA-Z0-9_]/g, ''));
         const win = window.open('', popupName, 'width=1100,height=720,menubar=no,toolbar=no,location=no,status=no');
         if (!win) {
           togglePresenterDrawer();
@@ -2719,151 +2735,84 @@ function generateHtmlShell(options) {
         const currentNotes = getSlideNotes(currentSlide);
         const curSlideTitle = 'Slide ' + (currentSlide + 1) + ' / ' + TOTAL_SLIDES;
 
-        const consoleHtml = '<!DOCTYPE html>
-<html>
-<head>
-' +
-          '<meta charset="UTF-8"><title>Presenter Console \u2014 ' + (document.title || 'Slides') + '</title>
-' +
-          '<style>
-' +
-          '* { box-sizing: border-box; margin: 0; padding: 0; }
-' +
-          'body { background: #0c0d14; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; user-select: none; }
-' +
-          '.top-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: #141522; border-bottom: 1px solid rgba(255,255,255,0.12); }
-' +
-          '.timer-badge { font-family: monospace; font-size: 20px; font-weight: 700; color: #38bdf8; background: rgba(56,189,248,0.15); border: 1px solid rgba(56,189,248,0.3); padding: 4px 14px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
-' +
-          '.grid-container { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 24px; overflow: hidden; }
-' +
-          '.panel-card { background: #181926; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
-' +
-          '.card-header { padding: 10px 16px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa; display: flex; justify-content: space-between; }
-' +
-          '.notes-content { flex: 1; padding: 20px; font-size: 19px; line-height: 1.7; overflow-y: auto; color: #f1f5f9; user-select: text; white-space: pre-wrap; }
-' +
-          '.preview-box { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; padding: 16px; }
-' +
-          '.btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
-' +
-          '.btn:hover { background: rgba(255,255,255,0.2); }
-' +
-          '.btn-nav { font-size: 16px; padding: 10px 24px; border-radius: 8px; }
-' +
-          '.bottom-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: #141522; border-top: 1px solid rgba(255,255,255,0.12); }
-' +
-          '</style>
-</head>
-<body>
-' +
-          '<div class="top-bar">
-' +
-          '  <div style="font-weight: 700; font-size: 16px;">' + (document.title || 'Slide Deck') + '</div>
-' +
-          '  <div style="display: flex; align-items: center; gap: 12px;">
-' +
-          '    <div class="timer-badge">\u23F1 <span id="timer-val">00:00</span></div>
-' +
-          '    <button class="btn" id="btn-toggle-t">Pause</button>
-' +
-          '    <button class="btn" id="btn-reset-t">Reset</button>
-' +
-          '  </div>
-' +
-          '</div>
-' +
-          '<div class="grid-container">
-' +
-          '  <div class="panel-card">
-' +
-          '    <div class="card-header"><span>CURRENT SLIDE</span><span id="slide-num">' + curSlideTitle + '</span></div>
-' +
-          '    <div class="preview-box"><div style="font-size: 22px; color: #94a3b8; text-align: center;">Active Slide On Screen<br/><span style="font-size: 14px; color: #38bdf8;">(Broadcasting Synced)</span></div></div>
-' +
-          '    <div class="card-header" style="border-top: 1px solid rgba(255,255,255,0.08);"><span>NEXT SLIDE PREVIEW</span></div>
-' +
-          '    <div style="padding: 12px 16px; font-size: 14px; color: #94a3b8; background: rgba(0,0,0,0.3); min-height: 80px;" id="next-preview-text">Upcoming: Slide ' + (currentSlide + 2) + '</div>
-' +
-          '  </div>
-' +
-          '  <div class="panel-card">
-' +
-          '    <div class="card-header"><span>SPEAKER NOTES / TALK TRACK</span><div><button class="btn" id="font-dn" style="padding: 2px 8px;">A-</button> <button class="btn" id="font-up" style="padding: 2px 8px;">A+</button></div></div>
-' +
-          '    <div class="notes-content" id="speaker-notes">' + (currentNotes ? currentNotes : '<span style="opacity: 0.4;">No speaker notes for this slide.</span>') + '</div>
-' +
-          '  </div>
-' +
-          '</div>
-' +
-          '<div class="bottom-nav">
-' +
-          '  <button class="btn btn-nav" id="btn-prev-p">\u2039 Previous (\u2190)</button>
-' +
-          '  <span style="font-size: 14px; color: #a1a1aa;">Use Arrow Keys or Space to advance</span>
-' +
-          '  <button class="btn btn-nav" id="btn-next-p" style="background: #0284c7; border-color: #0284c7;">Next (\u2192 / Space) \u203A</button>
-' +
-          '</div>
-' +
-          '<script>
-' +
-          '  const bc = new BroadcastChannel("' + SYNC_CHANNEL_NAME + '");
-' +
-          '  let curSecs = ' + timerSeconds + ';
-' +
-          '  function sendCmd(action, idx) { bc.postMessage({ type: "COMMAND", action: action, index: idx }); }
-' +
-          '  document.getElementById("btn-prev-p").onclick = () => sendCmd("PREV");
-' +
-          '  document.getElementById("btn-next-p").onclick = () => sendCmd("NEXT");
-' +
-          '  document.getElementById("btn-reset-t").onclick = () => sendCmd("RESET_TIMER");
-' +
-          '  document.getElementById("btn-toggle-t").onclick = () => sendCmd("TOGGLE_TIMER");
-' +
-          '  let curFontSize = 19;
-' +
-          '  document.getElementById("font-up").onclick = () => { curFontSize += 2; document.getElementById("speaker-notes").style.fontSize = curFontSize + "px"; };
-' +
-          '  document.getElementById("font-dn").onclick = () => { curFontSize = Math.max(12, curFontSize - 2); document.getElementById("speaker-notes").style.fontSize = curFontSize + "px"; };
-' +
-          '  window.onkeydown = (e) => {
-' +
-          '    if (["ArrowRight", "Space", "PageDown"].includes(e.code)) { e.preventDefault(); sendCmd("NEXT"); }
-' +
-          '    else if (["ArrowLeft", "PageUp"].includes(e.code)) { e.preventDefault(); sendCmd("PREV"); }
-' +
-          '  };
-' +
-          '  bc.onmessage = (e) => {
-' +
-          '    if (!e.data || e.data.type !== "STATE_UPDATE") return;
-' +
-          '    document.getElementById("slide-num").textContent = "Slide " + (e.data.currentSlide + 1) + " / " + e.data.totalSlides;
-' +
-          '    document.getElementById("speaker-notes").textContent = e.data.notes || "No speaker notes for this slide.";
-' +
-          '    document.getElementById("next-preview-text").textContent = e.data.nextNotes ? "Next Notes: " + e.data.nextNotes : "Next: Slide " + (e.data.currentSlide + 2);
-' +
-          '    curSecs = e.data.timerSeconds || 0;
-' +
-          '    const m = String(Math.floor(curSecs / 60)).padStart(2, "0");
-' +
-          '    const s = String(curSecs % 60).padStart(2, "0");
-' +
-          '    document.getElementById("timer-val").textContent = m + ":" + s;
-' +
-          '    document.getElementById("btn-toggle-t").textContent = e.data.timerRunning ? "Pause" : "Start";
-' +
-          '  };
-' +
-          '  bc.postMessage({ type: "REQUEST_STATE" });
-' +
-          '<' + '/script>
-</body>
-</html>';
+        const consoleHtml = [
+          '<!DOCTYPE html>',
+          '<html>',
+          '<head>',
+          '<meta charset="UTF-8"><title>Presenter Console \u2014 ' + (document.title || 'Slides') + '</title>',
+          '<style>',
+          '* { box-sizing: border-box; margin: 0; padding: 0; }',
+          'body { background: #0c0d14; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; user-select: none; }',
+          '.top-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: #141522; border-bottom: 1px solid rgba(255,255,255,0.12); }',
+          '.timer-badge { font-family: monospace; font-size: 20px; font-weight: 700; color: #38bdf8; background: rgba(56,189,248,0.15); border: 1px solid rgba(56,189,248,0.3); padding: 4px 14px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }',
+          '.grid-container { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 24px; overflow: hidden; }',
+          '.panel-card { background: #181926; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }',
+          '.card-header { padding: 10px 16px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa; display: flex; justify-content: space-between; }',
+          '.notes-content { flex: 1; padding: 20px; font-size: 19px; line-height: 1.7; overflow-y: auto; color: #f1f5f9; user-select: text; white-space: pre-wrap; }',
+          '.preview-box { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; padding: 16px; }',
+          '.btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }',
+          '.btn:hover { background: rgba(255,255,255,0.2); }',
+          '.btn-nav { font-size: 16px; padding: 10px 24px; border-radius: 8px; }',
+          '.bottom-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: #141522; border-top: 1px solid rgba(255,255,255,0.12); }',
+          '</style>',
+          '</head>',
+          '<body>',
+          '<div class="top-bar">',
+          '  <div style="font-weight: 700; font-size: 16px;">' + (document.title || 'Slide Deck') + '</div>',
+          '  <div style="display: flex; align-items: center; gap: 12px;">',
+          '    <div class="timer-badge">\u23F1 <span id="timer-val">00:00</span></div>',
+          '    <button class="btn" id="btn-toggle-t">Pause</button>',
+          '    <button class="btn" id="btn-reset-t">Reset</button>',
+          '  </div>',
+          '</div>',
+          '<div class="grid-container">',
+          '  <div class="panel-card">',
+          '    <div class="card-header"><span>CURRENT SLIDE</span><span id="slide-num">' + curSlideTitle + '</span></div>',
+          '    <div class="preview-box"><div style="font-size: 22px; color: #94a3b8; text-align: center;">Active Slide On Screen<br/><span style="font-size: 14px; color: #38bdf8;">(Broadcasting Synced)</span></div></div>',
+          '    <div class="card-header" style="border-top: 1px solid rgba(255,255,255,0.08);"><span>NEXT SLIDE PREVIEW</span></div>',
+          '    <div style="padding: 12px 16px; font-size: 14px; color: #94a3b8; background: rgba(0,0,0,0.3); min-height: 80px;" id="next-preview-text">Upcoming: Slide ' + (currentSlide + 2) + '</div>',
+          '  </div>',
+          '  <div class="panel-card">',
+          '    <div class="card-header"><span>SPEAKER NOTES / TALK TRACK</span><div><button class="btn" id="font-dn" style="padding: 2px 8px;">A-</button> <button class="btn" id="font-up" style="padding: 2px 8px;">A+</button></div></div>',
+          '    <div class="notes-content" id="speaker-notes">' + (currentNotes ? currentNotes : '<span style="opacity: 0.4;">No speaker notes for this slide.</span>') + '</div>',
+          '  </div>',
+          '</div>',
+          '<div class="bottom-nav">',
+          '  <button class="btn btn-nav" id="btn-prev-p">\u2039 Previous (\u2190)</button>',
+          '  <span style="font-size: 14px; color: #a1a1aa;">Use Arrow Keys or Space to advance</span>',
+          '  <button class="btn btn-nav" id="btn-next-p" style="background: #0284c7; border-color: #0284c7;">Next (\u2192 / Space) \u203A</button>',
+          '</div>',
+          '<script>',
+          '  const bc = new BroadcastChannel("' + SYNC_CHANNEL_NAME + '");',
+          '  let curSecs = ' + timerSeconds + ';',
+          '  function sendCmd(action, idx) { bc.postMessage({ type: "COMMAND", action: action, index: idx }); }',
+          '  document.getElementById("btn-prev-p").onclick = () => sendCmd("PREV");',
+          '  document.getElementById("btn-next-p").onclick = () => sendCmd("NEXT");',
+          '  document.getElementById("btn-reset-t").onclick = () => sendCmd("RESET_TIMER");',
+          '  document.getElementById("btn-toggle-t").onclick = () => sendCmd("TOGGLE_TIMER");',
+          '  let curFontSize = 19;',
+          '  document.getElementById("font-up").onclick = () => { curFontSize += 2; document.getElementById("speaker-notes").style.fontSize = curFontSize + "px"; };',
+          '  document.getElementById("font-dn").onclick = () => { curFontSize = Math.max(12, curFontSize - 2); document.getElementById("speaker-notes").style.fontSize = curFontSize + "px"; };',
+          '  window.onkeydown = (e) => {',
+          '    if (["ArrowRight", "Space", "PageDown"].includes(e.code)) { e.preventDefault(); sendCmd("NEXT"); }',
+          '    else if (["ArrowLeft", "PageUp"].includes(e.code)) { e.preventDefault(); sendCmd("PREV"); }',
+          '  };',
+          '  bc.onmessage = (e) => {',
+          '    if (!e.data || e.data.type !== "STATE_UPDATE") return;',
+          '    document.getElementById("slide-num").textContent = "Slide " + (e.data.currentSlide + 1) + " / " + e.data.totalSlides;',
+          '    document.getElementById("speaker-notes").textContent = e.data.notes || "No speaker notes for this slide.";',
+          '    document.getElementById("next-preview-text").textContent = e.data.nextNotes ? "Next Notes: " + e.data.nextNotes : "Next: Slide " + (e.data.currentSlide + 2);',
+          '    curSecs = e.data.timerSeconds || 0;',
+          '    const m = String(Math.floor(curSecs / 60)).padStart(2, "0");',
+          '    const s = String(curSecs % 60).padStart(2, "0");',
+          '    document.getElementById("timer-val").textContent = m + ":" + s;',
+          '    document.getElementById("btn-toggle-t").textContent = e.data.timerRunning ? "Pause" : "Start";',
+          '  };',
+          '  bc.postMessage({ type: "REQUEST_STATE" });',
+          '<' + '/script>',
+          '</body>',
+          '</html>'
+        ].join('\\n');
 
         win.document.open();
         win.document.write(consoleHtml);
@@ -2879,8 +2828,7 @@ function generateHtmlShell(options) {
             const card = document.createElement('div');
             card.className = 'deck-notes-card';
             card.setAttribute('data-for-slide', String(idx));
-            card.innerHTML = '<div class="deck-notes-card-header"><span>\u{1F4DD}</span><span>Presenter Notes (Slide ' + (idx + 1) + ')</span></div><div>' + notes.replace(/
-/g, '<br/>') + '</div>';
+            card.innerHTML = '<div class="deck-notes-card-header"><span>\u{1F4DD}</span><span>Presenter Notes (Slide ' + (idx + 1) + ')</span></div><div>' + notes.split('\\n').join('<br/>') + '</div>';
             slide.after(card);
           }
         });
@@ -3220,8 +3168,7 @@ function generateHtmlShell(options) {
         if (scalePanel) scalePanel.style.display = 'none';
 
         // Take snapshot of full HTML
-        let cleanHtml = '<!DOCTYPE html>
-' + document.documentElement.outerHTML;
+        let cleanHtml = '<!DOCTYPE html>' + '\\n' + document.documentElement.outerHTML;
 
         // Clean any temporary runtime inline styles or attributes
         cleanHtml = cleanHtml
@@ -3231,28 +3178,20 @@ function generateHtmlShell(options) {
           .replace(/class="edit-toggle[^"]*"/g, 'class="edit-toggle"');
 
         // Embed current scale settings into :root style definition so exported HTML is permanently styled with chosen scales
-        const scaleVarsReplacement = 
-          '--scale-mode: ' + scaleState.mode + ';
-' +
-          '      --scale-factor: ' + scaleState.factor + ';
-' +
-          '      --scale-headings: ' + scaleState.headings + ';
-' +
-          '      --scale-body: ' + scaleState.body + ';
-' +
-          '      --scale-code: ' + scaleState.code + ';
-' +
-          '      --scale-spacing: ' + scaleState.spacing + ';
-' +
-          '      --scale-headings-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.headings) + ';
-' +
-          '      --scale-body-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.body) + ';
-' +
-          '      --scale-code-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.code) + ';
-' +
-          '      --scale-spacing-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.spacing) + ';';
-
-        cleanHtml = cleanHtml.replace(/--scale-mode:s*unified;[sS]*?--scale-spacing-eff:s*1.0;/, scaleVarsReplacement);
+        const scaleVarsReplacement = [
+          '--scale-mode: ' + scaleState.mode + ';',
+          '      --scale-factor: ' + scaleState.factor + ';',
+          '      --scale-headings: ' + scaleState.headings + ';',
+          '      --scale-body: ' + scaleState.body + ';',
+          '      --scale-code: ' + scaleState.code + ';',
+          '      --scale-spacing: ' + scaleState.spacing + ';',
+          '      --scale-headings-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.headings) + ';',
+          '      --scale-body-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.body) + ';',
+          '      --scale-code-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.code) + ';',
+          '      --scale-spacing-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.spacing) + ';'
+        ].join('\\n');
+
+        cleanHtml = cleanHtml.replace(/--scale-mode:\\s*[^;]+;[\\s\\S]*?--scale-spacing-eff:\\s*[^;]+;/, scaleVarsReplacement);
 
         // Create Blob and trigger download
         const blob = new Blob([cleanHtml], { type: 'text/html;charset=utf-8' });
@@ -3421,6 +3360,8 @@ function generateHtmlShell(options) {
           applyScales();
         } else if (e.data.type === 'TOGGLE_SCALE_PANEL') {
           toggleScalePanel();
+        } else if (e.data.type === 'RESIZE') {
+          resizeCanvas();
         }
       });
 
@@ -3457,7 +3398,8 @@ function compileHtmlDeck(deckData, options) {
     theme,
     slidesHtml,
     slideCount,
-    customHeadTags: options?.customHeadTags
+    customHeadTags: options?.customHeadTags,
+    deckId: deckData?.id || options?.deckId
   });
   return {
     html: fullHtml,
@@ -3480,5 +3422,5 @@ exports.serializeLayoutToComment = serializeLayoutToComment;
 exports.splitMarkdownSlides = splitMarkdownSlides;
 exports.updateSlideLayoutInMarkdown = updateSlideLayoutInMarkdown;
 exports.updateSlideTextInMarkdown = updateSlideTextInMarkdown;
-//# sourceMappingURL=chunk-JIIUW2TN.cjs.map
-//# sourceMappingURL=chunk-JIIUW2TN.cjs.map
+//# sourceMappingURL=chunk-SUGKWGJJ.cjs.map
+//# sourceMappingURL=chunk-SUGKWGJJ.cjs.map