@thanh01.pmt/presentation-kit 0.2.14 → 0.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/ai/index.cjs +145 -16
  2. package/dist/ai/index.cjs.map +1 -1
  3. package/dist/ai/index.d.cts +15 -15
  4. package/dist/ai/index.d.ts +15 -15
  5. package/dist/ai/index.js +132 -3
  6. package/dist/ai/index.js.map +1 -1
  7. package/dist/{chunk-A7T5Y2G4.js → chunk-7QHDWDSB.js} +343 -187
  8. package/dist/chunk-7QHDWDSB.js.map +1 -0
  9. package/dist/{chunk-JIIUW2TN.cjs → chunk-JNTRKKJX.cjs} +343 -186
  10. package/dist/chunk-JNTRKKJX.cjs.map +1 -0
  11. package/dist/index.cjs +19 -15
  12. package/dist/index.d.cts +4 -1
  13. package/dist/index.d.ts +4 -1
  14. package/dist/index.js +2 -2
  15. package/dist/react/index.cjs +23 -7
  16. package/dist/react/index.cjs.map +1 -1
  17. package/dist/react/index.d.cts +2 -0
  18. package/dist/react/index.d.ts +2 -0
  19. package/dist/react/index.js +19 -3
  20. package/dist/react/index.js.map +1 -1
  21. package/package.json +11 -10
  22. package/LICENSE +0 -21
  23. package/dist/chunk-A7T5Y2G4.js.map +0 -1
  24. package/dist/chunk-JIIUW2TN.cjs.map +0 -1
package/dist/{chunk-JIIUW2TN.cjs → chunk-JNTRKKJX.cjs} RENAMED
@@ -1282,9 +1282,9 @@ var HTML_SLIDE_PRESETS = {
1282
1282
 
1283
1283
  // src/html-engine/shell.ts
1284
1284
  function generateHtmlShell(options) {
1285
- const { title, theme, slidesHtml, slideCount, customHeadTags = "" } = options;
1285
+ const { title, theme, slidesHtml, slideCount, customHeadTags = "", deckId = "" } = options;
1286
1286
  return `<!DOCTYPE html>
1287
- <html lang="en" class="${theme.scheme}">
1287
+ <html lang="en" class="${theme.scheme}"${deckId ? ` data-deck-id="${deckId}"` : ""}>
1288
1288
  <head>
1289
1289
  <meta charset="UTF-8">
1290
1290
  <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) {
1298
1298
  <!-- Core Presentation Styling & 1920x1080 Scaled Tailwind Configuration -->
1299
1299
  <script src="https://cdn.tailwindcss.com"></script>
1300
1300
  <script>
1301
+ window.tailwind = window.tailwind || {};
1301
1302
  tailwind.config = {
1302
1303
  darkMode: 'class',
1303
1304
  theme: {
@@ -1421,6 +1422,7 @@ function generateHtmlShell(options) {
1421
1422
  left: 50%;
1422
1423
  width: 1920px;
1423
1424
  height: 1080px;
1425
+ transform: translate(-50%, -50%);
1424
1426
  transform-origin: center center;
1425
1427
  background-color: var(--bg);
1426
1428
  overflow: hidden;
@@ -2421,10 +2423,21 @@ function generateHtmlShell(options) {
2421
2423
  const TOTAL_SLIDES = ${slideCount};
2422
2424
  let currentSlide = 0;
2423
2425
  let isEditMode = false;
2424
- const STORAGE_KEY = 'deck_edit_' + encodeURIComponent(document.title.trim() || 'default');
2425
- const originalCanvasHtml = document.getElementById('canvas').innerHTML;
2426
-
2427
2426
  const canvas = document.getElementById('canvas');
2427
+ const originalCanvasHtml = canvas ? canvas.innerHTML : '';
2428
+
2429
+ function computeDeckContentHash(str) {
2430
+ let h = 0;
2431
+ for (let i = 0; i < str.length; i++) {
2432
+ h = (Math.imul(31, h) + str.charCodeAt(i)) | 0;
2433
+ }
2434
+ return Math.abs(h).toString(36);
2435
+ }
2436
+
2437
+ const deckIdAttr = document.documentElement.getAttribute('data-deck-id');
2438
+ const contentHash = computeDeckContentHash(originalCanvasHtml);
2439
+ const deckKeyPrefix = deckIdAttr ? encodeURIComponent(deckIdAttr) : (encodeURIComponent(document.title.trim() || 'deck') + '_' + contentHash);
2440
+ const STORAGE_KEY = 'deck_edit_' + deckKeyPrefix;
2428
2441
  const slides = document.querySelectorAll('.slide-page');
2429
2442
  const progressBar = document.getElementById('progress-bar');
2430
2443
  const counter = document.getElementById('slide-counter');
@@ -2484,7 +2497,7 @@ function generateHtmlShell(options) {
2484
2497
  let timerInterval = null;
2485
2498
  let isTimerRunning = false;
2486
2499
 
2487
- const SCALE_STORAGE_KEY = 'deck_scale_' + encodeURIComponent(document.title.trim() || 'default');
2500
+ const SCALE_STORAGE_KEY = 'deck_scale_' + deckKeyPrefix;
2488
2501
  let scaleState = {
2489
2502
  mode: 'unified', // 'unified' | 'independent'
2490
2503
  factor: 1.0,
@@ -2508,8 +2521,9 @@ function generateHtmlShell(options) {
2508
2521
  // Auto-scale 1920x1080 canvas to fit window
2509
2522
  function resizeCanvas() {
2510
2523
  if (isDeckMode) return;
2511
- const vw = window.innerWidth;
2512
- const vh = window.innerHeight;
2524
+ const vw = window.innerWidth || document.documentElement.clientWidth || 1920;
2525
+ const vh = window.innerHeight || document.documentElement.clientHeight || 1080;
2526
+ if (vw <= 0 || vh <= 0) return;
2513
2527
  const scaleX = vw / 1920;
2514
2528
  const scaleY = vh / 1080;
2515
2529
  const scale = Math.min(scaleX, scaleY);
@@ -2517,7 +2531,10 @@ function generateHtmlShell(options) {
2517
2531
  }
2518
2532
 
2519
2533
  window.addEventListener('resize', resizeCanvas);
2534
+ window.addEventListener('load', resizeCanvas);
2535
+ document.addEventListener('DOMContentLoaded', resizeCanvas);
2520
2536
  resizeCanvas();
2537
+ requestAnimationFrame(resizeCanvas);
2521
2538
 
2522
2539
  function getSlideNotes(slideIndex) {
2523
2540
  if (slideIndex < 0 || slideIndex >= slides.length) return '';
@@ -2690,8 +2707,7 @@ function generateHtmlShell(options) {
2690
2707
  if (!presenterNotesText) return;
2691
2708
  const notes = getSlideNotes(currentSlide);
2692
2709
  if (notes && notes.trim()) {
2693
- presenterNotesText.innerHTML = notes.replace(/
2694
- /g, '<br/>');
2710
+ presenterNotesText.innerHTML = notes.split('\\n').join('<br/>');
2695
2711
  } else {
2696
2712
  presenterNotesText.innerHTML = '<span style="opacity: 0.5; font-style: italic;">No speaker notes for Slide ' + (currentSlide + 1) + '.</span>';
2697
2713
  }
@@ -2708,7 +2724,7 @@ function generateHtmlShell(options) {
2708
2724
 
2709
2725
  function openPresenterConsole() {
2710
2726
  startTimer();
2711
- const popupName = 'PresenterConsole_' + encodeURIComponent(document.title.replace(/W/g, ''));
2727
+ const popupName = 'PresenterConsole_' + encodeURIComponent(document.title.replace(/[^a-zA-Z0-9_]/g, ''));
2712
2728
  const win = window.open('', popupName, 'width=1100,height=720,menubar=no,toolbar=no,location=no,status=no');
2713
2729
  if (!win) {
2714
2730
  togglePresenterDrawer();
@@ -2719,151 +2735,84 @@ function generateHtmlShell(options) {
2719
2735
  const currentNotes = getSlideNotes(currentSlide);
2720
2736
  const curSlideTitle = 'Slide ' + (currentSlide + 1) + ' / ' + TOTAL_SLIDES;
2721
2737
 
2722
- const consoleHtml = '<!DOCTYPE html>
2723
- <html>
2724
- <head>
2725
- ' +
2726
- '<meta charset="UTF-8"><title>Presenter Console \u2014 ' + (document.title || 'Slides') + '</title>
2727
- ' +
2728
- '<style>
2729
- ' +
2730
- '* { box-sizing: border-box; margin: 0; padding: 0; }
2731
- ' +
2732
- '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; }
2733
- ' +
2734
- '.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); }
2735
- ' +
2736
- '.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; }
2737
- ' +
2738
- '.grid-container { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 24px; overflow: hidden; }
2739
- ' +
2740
- '.panel-card { background: #181926; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
2741
- ' +
2742
- '.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; }
2743
- ' +
2744
- '.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; }
2745
- ' +
2746
- '.preview-box { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; padding: 16px; }
2747
- ' +
2748
- '.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; }
2749
- ' +
2750
- '.btn:hover { background: rgba(255,255,255,0.2); }
2751
- ' +
2752
- '.btn-nav { font-size: 16px; padding: 10px 24px; border-radius: 8px; }
2753
- ' +
2754
- '.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); }
2755
- ' +
2756
- '</style>
2757
- </head>
2758
- <body>
2759
- ' +
2760
- '<div class="top-bar">
2761
- ' +
2762
- ' <div style="font-weight: 700; font-size: 16px;">' + (document.title || 'Slide Deck') + '</div>
2763
- ' +
2764
- ' <div style="display: flex; align-items: center; gap: 12px;">
2765
- ' +
2766
- ' <div class="timer-badge">\u23F1 <span id="timer-val">00:00</span></div>
2767
- ' +
2768
- ' <button class="btn" id="btn-toggle-t">Pause</button>
2769
- ' +
2770
- ' <button class="btn" id="btn-reset-t">Reset</button>
2771
- ' +
2772
- ' </div>
2773
- ' +
2774
- '</div>
2775
- ' +
2776
- '<div class="grid-container">
2777
- ' +
2778
- ' <div class="panel-card">
2779
- ' +
2780
- ' <div class="card-header"><span>CURRENT SLIDE</span><span id="slide-num">' + curSlideTitle + '</span></div>
2781
- ' +
2782
- ' <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>
2783
- ' +
2784
- ' <div class="card-header" style="border-top: 1px solid rgba(255,255,255,0.08);"><span>NEXT SLIDE PREVIEW</span></div>
2785
- ' +
2786
- ' <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>
2787
- ' +
2788
- ' </div>
2789
- ' +
2790
- ' <div class="panel-card">
2791
- ' +
2792
- ' <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>
2793
- ' +
2794
- ' <div class="notes-content" id="speaker-notes">' + (currentNotes ? currentNotes : '<span style="opacity: 0.4;">No speaker notes for this slide.</span>') + '</div>
2795
- ' +
2796
- ' </div>
2797
- ' +
2798
- '</div>
2799
- ' +
2800
- '<div class="bottom-nav">
2801
- ' +
2802
- ' <button class="btn btn-nav" id="btn-prev-p">\u2039 Previous (\u2190)</button>
2803
- ' +
2804
- ' <span style="font-size: 14px; color: #a1a1aa;">Use Arrow Keys or Space to advance</span>
2805
- ' +
2806
- ' <button class="btn btn-nav" id="btn-next-p" style="background: #0284c7; border-color: #0284c7;">Next (\u2192 / Space) \u203A</button>
2807
- ' +
2808
- '</div>
2809
- ' +
2810
- '<script>
2811
- ' +
2812
- ' const bc = new BroadcastChannel("' + SYNC_CHANNEL_NAME + '");
2813
- ' +
2814
- ' let curSecs = ' + timerSeconds + ';
2815
- ' +
2816
- ' function sendCmd(action, idx) { bc.postMessage({ type: "COMMAND", action: action, index: idx }); }
2817
- ' +
2818
- ' document.getElementById("btn-prev-p").onclick = () => sendCmd("PREV");
2819
- ' +
2820
- ' document.getElementById("btn-next-p").onclick = () => sendCmd("NEXT");
2821
- ' +
2822
- ' document.getElementById("btn-reset-t").onclick = () => sendCmd("RESET_TIMER");
2823
- ' +
2824
- ' document.getElementById("btn-toggle-t").onclick = () => sendCmd("TOGGLE_TIMER");
2825
- ' +
2826
- ' let curFontSize = 19;
2827
- ' +
2828
- ' document.getElementById("font-up").onclick = () => { curFontSize += 2; document.getElementById("speaker-notes").style.fontSize = curFontSize + "px"; };
2829
- ' +
2830
- ' document.getElementById("font-dn").onclick = () => { curFontSize = Math.max(12, curFontSize - 2); document.getElementById("speaker-notes").style.fontSize = curFontSize + "px"; };
2831
- ' +
2832
- ' window.onkeydown = (e) => {
2833
- ' +
2834
- ' if (["ArrowRight", "Space", "PageDown"].includes(e.code)) { e.preventDefault(); sendCmd("NEXT"); }
2835
- ' +
2836
- ' else if (["ArrowLeft", "PageUp"].includes(e.code)) { e.preventDefault(); sendCmd("PREV"); }
2837
- ' +
2838
- ' };
2839
- ' +
2840
- ' bc.onmessage = (e) => {
2841
- ' +
2842
- ' if (!e.data || e.data.type !== "STATE_UPDATE") return;
2843
- ' +
2844
- ' document.getElementById("slide-num").textContent = "Slide " + (e.data.currentSlide + 1) + " / " + e.data.totalSlides;
2845
- ' +
2846
- ' document.getElementById("speaker-notes").textContent = e.data.notes || "No speaker notes for this slide.";
2847
- ' +
2848
- ' document.getElementById("next-preview-text").textContent = e.data.nextNotes ? "Next Notes: " + e.data.nextNotes : "Next: Slide " + (e.data.currentSlide + 2);
2849
- ' +
2850
- ' curSecs = e.data.timerSeconds || 0;
2851
- ' +
2852
- ' const m = String(Math.floor(curSecs / 60)).padStart(2, "0");
2853
- ' +
2854
- ' const s = String(curSecs % 60).padStart(2, "0");
2855
- ' +
2856
- ' document.getElementById("timer-val").textContent = m + ":" + s;
2857
- ' +
2858
- ' document.getElementById("btn-toggle-t").textContent = e.data.timerRunning ? "Pause" : "Start";
2859
- ' +
2860
- ' };
2861
- ' +
2862
- ' bc.postMessage({ type: "REQUEST_STATE" });
2863
- ' +
2864
- '<' + '/script>
2865
- </body>
2866
- </html>';
2738
+ const consoleHtml = [
2739
+ '<!DOCTYPE html>',
2740
+ '<html>',
2741
+ '<head>',
2742
+ '<meta charset="UTF-8"><title>Presenter Console \u2014 ' + (document.title || 'Slides') + '</title>',
2743
+ '<style>',
2744
+ '* { box-sizing: border-box; margin: 0; padding: 0; }',
2745
+ '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; }',
2746
+ '.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); }',
2747
+ '.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; }',
2748
+ '.grid-container { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 24px; overflow: hidden; }',
2749
+ '.panel-card { background: #181926; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }',
2750
+ '.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; }',
2751
+ '.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; }',
2752
+ '.preview-box { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; padding: 16px; }',
2753
+ '.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; }',
2754
+ '.btn:hover { background: rgba(255,255,255,0.2); }',
2755
+ '.btn-nav { font-size: 16px; padding: 10px 24px; border-radius: 8px; }',
2756
+ '.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); }',
2757
+ '</style>',
2758
+ '</head>',
2759
+ '<body>',
2760
+ '<div class="top-bar">',
2761
+ ' <div style="font-weight: 700; font-size: 16px;">' + (document.title || 'Slide Deck') + '</div>',
2762
+ ' <div style="display: flex; align-items: center; gap: 12px;">',
2763
+ ' <div class="timer-badge">\u23F1 <span id="timer-val">00:00</span></div>',
2764
+ ' <button class="btn" id="btn-toggle-t">Pause</button>',
2765
+ ' <button class="btn" id="btn-reset-t">Reset</button>',
2766
+ ' </div>',
2767
+ '</div>',
2768
+ '<div class="grid-container">',
2769
+ ' <div class="panel-card">',
2770
+ ' <div class="card-header"><span>CURRENT SLIDE</span><span id="slide-num">' + curSlideTitle + '</span></div>',
2771
+ ' <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>',
2772
+ ' <div class="card-header" style="border-top: 1px solid rgba(255,255,255,0.08);"><span>NEXT SLIDE PREVIEW</span></div>',
2773
+ ' <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>',
2774
+ ' </div>',
2775
+ ' <div class="panel-card">',
2776
+ ' <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>',
2777
+ ' <div class="notes-content" id="speaker-notes">' + (currentNotes ? currentNotes : '<span style="opacity: 0.4;">No speaker notes for this slide.</span>') + '</div>',
2778
+ ' </div>',
2779
+ '</div>',
2780
+ '<div class="bottom-nav">',
2781
+ ' <button class="btn btn-nav" id="btn-prev-p">\u2039 Previous (\u2190)</button>',
2782
+ ' <span style="font-size: 14px; color: #a1a1aa;">Use Arrow Keys or Space to advance</span>',
2783
+ ' <button class="btn btn-nav" id="btn-next-p" style="background: #0284c7; border-color: #0284c7;">Next (\u2192 / Space) \u203A</button>',
2784
+ '</div>',
2785
+ '<script>',
2786
+ ' const bc = new BroadcastChannel("' + SYNC_CHANNEL_NAME + '");',
2787
+ ' let curSecs = ' + timerSeconds + ';',
2788
+ ' function sendCmd(action, idx) { bc.postMessage({ type: "COMMAND", action: action, index: idx }); }',
2789
+ ' document.getElementById("btn-prev-p").onclick = () => sendCmd("PREV");',
2790
+ ' document.getElementById("btn-next-p").onclick = () => sendCmd("NEXT");',
2791
+ ' document.getElementById("btn-reset-t").onclick = () => sendCmd("RESET_TIMER");',
2792
+ ' document.getElementById("btn-toggle-t").onclick = () => sendCmd("TOGGLE_TIMER");',
2793
+ ' let curFontSize = 19;',
2794
+ ' document.getElementById("font-up").onclick = () => { curFontSize += 2; document.getElementById("speaker-notes").style.fontSize = curFontSize + "px"; };',
2795
+ ' document.getElementById("font-dn").onclick = () => { curFontSize = Math.max(12, curFontSize - 2); document.getElementById("speaker-notes").style.fontSize = curFontSize + "px"; };',
2796
+ ' window.onkeydown = (e) => {',
2797
+ ' if (["ArrowRight", "Space", "PageDown"].includes(e.code)) { e.preventDefault(); sendCmd("NEXT"); }',
2798
+ ' else if (["ArrowLeft", "PageUp"].includes(e.code)) { e.preventDefault(); sendCmd("PREV"); }',
2799
+ ' };',
2800
+ ' bc.onmessage = (e) => {',
2801
+ ' if (!e.data || e.data.type !== "STATE_UPDATE") return;',
2802
+ ' document.getElementById("slide-num").textContent = "Slide " + (e.data.currentSlide + 1) + " / " + e.data.totalSlides;',
2803
+ ' document.getElementById("speaker-notes").textContent = e.data.notes || "No speaker notes for this slide.";',
2804
+ ' document.getElementById("next-preview-text").textContent = e.data.nextNotes ? "Next Notes: " + e.data.nextNotes : "Next: Slide " + (e.data.currentSlide + 2);',
2805
+ ' curSecs = e.data.timerSeconds || 0;',
2806
+ ' const m = String(Math.floor(curSecs / 60)).padStart(2, "0");',
2807
+ ' const s = String(curSecs % 60).padStart(2, "0");',
2808
+ ' document.getElementById("timer-val").textContent = m + ":" + s;',
2809
+ ' document.getElementById("btn-toggle-t").textContent = e.data.timerRunning ? "Pause" : "Start";',
2810
+ ' };',
2811
+ ' bc.postMessage({ type: "REQUEST_STATE" });',
2812
+ '<' + '/script>',
2813
+ '</body>',
2814
+ '</html>'
2815
+ ].join('\\n');
2867
2816
 
2868
2817
  win.document.open();
2869
2818
  win.document.write(consoleHtml);
@@ -2879,8 +2828,7 @@ function generateHtmlShell(options) {
2879
2828
  const card = document.createElement('div');
2880
2829
  card.className = 'deck-notes-card';
2881
2830
  card.setAttribute('data-for-slide', String(idx));
2882
- card.innerHTML = '<div class="deck-notes-card-header"><span>\u{1F4DD}</span><span>Presenter Notes (Slide ' + (idx + 1) + ')</span></div><div>' + notes.replace(/
2883
- /g, '<br/>') + '</div>';
2831
+ 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>';
2884
2832
  slide.after(card);
2885
2833
  }
2886
2834
  });
@@ -3220,8 +3168,7 @@ function generateHtmlShell(options) {
3220
3168
  if (scalePanel) scalePanel.style.display = 'none';
3221
3169
 
3222
3170
  // Take snapshot of full HTML
3223
- let cleanHtml = '<!DOCTYPE html>
3224
- ' + document.documentElement.outerHTML;
3171
+ let cleanHtml = '<!DOCTYPE html>' + '\\n' + document.documentElement.outerHTML;
3225
3172
 
3226
3173
  // Clean any temporary runtime inline styles or attributes
3227
3174
  cleanHtml = cleanHtml
@@ -3231,28 +3178,20 @@ function generateHtmlShell(options) {
3231
3178
  .replace(/class="edit-toggle[^"]*"/g, 'class="edit-toggle"');
3232
3179
 
3233
3180
  // Embed current scale settings into :root style definition so exported HTML is permanently styled with chosen scales
3234
- const scaleVarsReplacement =
3235
- '--scale-mode: ' + scaleState.mode + ';
3236
- ' +
3237
- ' --scale-factor: ' + scaleState.factor + ';
3238
- ' +
3239
- ' --scale-headings: ' + scaleState.headings + ';
3240
- ' +
3241
- ' --scale-body: ' + scaleState.body + ';
3242
- ' +
3243
- ' --scale-code: ' + scaleState.code + ';
3244
- ' +
3245
- ' --scale-spacing: ' + scaleState.spacing + ';
3246
- ' +
3247
- ' --scale-headings-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.headings) + ';
3248
- ' +
3249
- ' --scale-body-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.body) + ';
3250
- ' +
3251
- ' --scale-code-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.code) + ';
3252
- ' +
3253
- ' --scale-spacing-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.spacing) + ';';
3254
-
3255
- cleanHtml = cleanHtml.replace(/--scale-mode:s*unified;[sS]*?--scale-spacing-eff:s*1.0;/, scaleVarsReplacement);
3181
+ const scaleVarsReplacement = [
3182
+ '--scale-mode: ' + scaleState.mode + ';',
3183
+ ' --scale-factor: ' + scaleState.factor + ';',
3184
+ ' --scale-headings: ' + scaleState.headings + ';',
3185
+ ' --scale-body: ' + scaleState.body + ';',
3186
+ ' --scale-code: ' + scaleState.code + ';',
3187
+ ' --scale-spacing: ' + scaleState.spacing + ';',
3188
+ ' --scale-headings-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.headings) + ';',
3189
+ ' --scale-body-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.body) + ';',
3190
+ ' --scale-code-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.code) + ';',
3191
+ ' --scale-spacing-eff: ' + (scaleState.mode === 'unified' ? scaleState.factor : scaleState.spacing) + ';'
3192
+ ].join('\\n');
3193
+
3194
+ cleanHtml = cleanHtml.replace(/--scale-mode:\\s*[^;]+;[\\s\\S]*?--scale-spacing-eff:\\s*[^;]+;/, scaleVarsReplacement);
3256
3195
 
3257
3196
  // Create Blob and trigger download
3258
3197
  const blob = new Blob([cleanHtml], { type: 'text/html;charset=utf-8' });
@@ -3421,6 +3360,8 @@ function generateHtmlShell(options) {
3421
3360
  applyScales();
3422
3361
  } else if (e.data.type === 'TOGGLE_SCALE_PANEL') {
3423
3362
  toggleScalePanel();
3363
+ } else if (e.data.type === 'RESIZE') {
3364
+ resizeCanvas();
3424
3365
  }
3425
3366
  });
3426
3367
 
@@ -3434,6 +3375,219 @@ function generateHtmlShell(options) {
3434
3375
  </html>`;
3435
3376
  }
3436
3377
 
3378
+ // src/html-engine/normalizer.ts
3379
+ function normalizeSlideSlots(slide) {
3380
+ if (!slide || typeof slide !== "object") {
3381
+ return { title: "Slide" };
3382
+ }
3383
+ const slots = {
3384
+ ...slide,
3385
+ ...slide.slots || {}
3386
+ };
3387
+ delete slots.slots;
3388
+ slots.title = String(slots.title || slide.title || slide.heading || slide.name || "").trim();
3389
+ slots.tag = String(slots.tag || slide.tag || slide.badge || "").trim();
3390
+ const rawContent = typeof slots.content === "string" && slots.content.trim() ? slots.content.trim() : typeof slide.content === "string" && slide.content.trim() ? slide.content.trim() : "";
3391
+ const layoutId = slide.layoutId || "hero-cover";
3392
+ switch (layoutId) {
3393
+ case "hero-cover": {
3394
+ slots.subtitle = slots.subtitle || slide.subtitle || slots.desc || rawContent || "";
3395
+ slots.author = slots.author || slide.author || "";
3396
+ slots.date = slots.date || slide.date || "";
3397
+ break;
3398
+ }
3399
+ case "split-concept-code": {
3400
+ if (!slots.code) {
3401
+ if (slide.code) {
3402
+ slots.code = slide.code;
3403
+ } else if (rawContent) {
3404
+ const fenceMatch = rawContent.match(/```(?:\w+)?\s*\n?([\s\S]*?)\n?```/);
3405
+ if (fenceMatch) {
3406
+ slots.code = fenceMatch[1].trim();
3407
+ } else if (/Code(?:\s+snippet)?:\s*/i.test(rawContent)) {
3408
+ const parts = rawContent.split(/Code(?:\s+snippet)?:\s*/i);
3409
+ if (parts[1] && parts[1].trim()) {
3410
+ slots.code = parts[1].trim();
3411
+ }
3412
+ }
3413
+ }
3414
+ }
3415
+ if (!Array.isArray(slots.points) || slots.points.length === 0) {
3416
+ if (Array.isArray(slide.points) && slide.points.length > 0) {
3417
+ slots.points = slide.points;
3418
+ } else if (rawContent) {
3419
+ const textOnly = rawContent.replace(/```[\s\S]*?```/g, "").replace(/Code(?:\s+snippet)?:\s*[\s\S]*/i, "").trim();
3420
+ const lines = textOnly.split(/\n|\.\s+/).map((l) => l.replace(/^(?:Concept:\s*|[-*•]|\d+\.)\s*/i, "").trim()).filter((l) => l.length > 3);
3421
+ slots.points = lines.length > 0 ? lines.slice(0, 4) : [textOnly || slots.title || "Core Concept"];
3422
+ }
3423
+ }
3424
+ if (!slots.code || slots.code === "...") {
3425
+ const lang = (slots.language || "code").toLowerCase();
3426
+ if (lang.includes("swift")) {
3427
+ slots.code = `// ${slots.title || "Swift Implementation"}
3428
+ import SwiftUI
3429
+
3430
+ struct PreviewView: View {
3431
+ var body: some View {
3432
+ Text("${slots.title || "Hello, World!"}")
3433
+ .padding()
3434
+ }
3435
+ }`;
3436
+ slots.language = slots.language || "swift";
3437
+ } else if (lang.includes("py")) {
3438
+ slots.code = `# ${slots.title || "Python Implementation"}
3439
+ def execute():
3440
+ print("${slots.title || "Ready"}")
3441
+
3442
+ execute()`;
3443
+ slots.language = slots.language || "python";
3444
+ } else {
3445
+ slots.code = `// ${slots.title || "Code Example"}
3446
+ function main() {
3447
+ console.log("${slots.title || "Executing"}");
3448
+ }
3449
+ main();`;
3450
+ slots.language = slots.language || "typescript";
3451
+ }
3452
+ }
3453
+ break;
3454
+ }
3455
+ case "two-columns-compare": {
3456
+ slots.col1Title = slots.col1Title || slide.col1Title || "Approach A";
3457
+ slots.col2Title = slots.col2Title || slide.col2Title || "Approach B";
3458
+ if (!Array.isArray(slots.col1Items) || slots.col1Items.length === 0) {
3459
+ if (Array.isArray(slide.col1Items) && slide.col1Items.length > 0) {
3460
+ slots.col1Items = slide.col1Items;
3461
+ } else if (rawContent) {
3462
+ const items = rawContent.split(/\n|\.\s+/).map((l) => l.replace(/^(?:[-*•]|\d+\.)\s*/, "").trim()).filter((l) => l.length > 3);
3463
+ const half = Math.max(1, Math.ceil(items.length / 2));
3464
+ slots.col1Items = items.slice(0, half);
3465
+ if (!slots.col2Items || !Array.isArray(slots.col2Items)) {
3466
+ slots.col2Items = items.slice(half);
3467
+ }
3468
+ }
3469
+ }
3470
+ slots.col1Items = Array.isArray(slots.col1Items) && slots.col1Items.length > 0 ? slots.col1Items : ["Primary Characteristics", "Standard Practice"];
3471
+ slots.col2Items = Array.isArray(slots.col2Items) && slots.col2Items.length > 0 ? slots.col2Items : Array.isArray(slide.col2Items) ? slide.col2Items : ["Alternative Paradigm", "Trade-offs & Edge Cases"];
3472
+ break;
3473
+ }
3474
+ case "three-cards-grid": {
3475
+ if (!Array.isArray(slots.cards) || slots.cards.length === 0) {
3476
+ if (Array.isArray(slide.cards) && slide.cards.length > 0) {
3477
+ slots.cards = slide.cards;
3478
+ } else if (rawContent) {
3479
+ const cardTokens = rawContent.split(/Card\s*\d+:\s*|(?:\r?\n){2,}|\.\s+/i).map((c) => c.trim()).filter(Boolean);
3480
+ if (cardTokens.length >= 2) {
3481
+ slots.cards = cardTokens.slice(0, 3).map((txt, idx) => {
3482
+ const colonIdx = txt.indexOf(":");
3483
+ const cardTitle = colonIdx > 0 && colonIdx < 30 ? txt.slice(0, colonIdx).trim() : `Pillar ${idx + 1}`;
3484
+ const cardDesc = colonIdx > 0 && colonIdx < 30 ? txt.slice(colonIdx + 1).trim() : txt;
3485
+ return { badge: `0${idx + 1}`, title: cardTitle, desc: cardDesc };
3486
+ });
3487
+ } else {
3488
+ const lines = rawContent.split(/\n|\.\s+/).map((l) => l.replace(/^(?:[-*•]|\d+\.)\s*/, "").trim()).filter((l) => l.length > 3);
3489
+ slots.cards = lines.slice(0, 3).map((line, idx) => ({
3490
+ badge: `0${idx + 1}`,
3491
+ title: line.split(":")[0]?.slice(0, 30) || `Pillar 0${idx + 1}`,
3492
+ desc: line
3493
+ }));
3494
+ }
3495
+ }
3496
+ }
3497
+ if (!Array.isArray(slots.cards) || slots.cards.length === 0) {
3498
+ slots.cards = [
3499
+ { badge: "01", title: "Foundation", desc: rawContent || "Core fundamentals and design principles" },
3500
+ { badge: "02", title: "Architecture", desc: "Component relationships and data flow patterns" },
3501
+ { badge: "03", title: "Practice", desc: "Real-world application and hands-on synthesis" }
3502
+ ];
3503
+ }
3504
+ break;
3505
+ }
3506
+ case "timeline-steps": {
3507
+ if (!Array.isArray(slots.steps) || slots.steps.length === 0) {
3508
+ if (Array.isArray(slide.steps) && slide.steps.length > 0) {
3509
+ slots.steps = slide.steps;
3510
+ } else if (rawContent) {
3511
+ const stepMatches = rawContent.split(/(?:\d+\.|\bStep\s*\d+:)\s*/i).map((s) => s.trim()).filter(Boolean);
3512
+ if (stepMatches.length > 0) {
3513
+ slots.steps = stepMatches.slice(0, 5).map((txt, idx) => {
3514
+ const periodIdx = txt.indexOf(".");
3515
+ const stepTitle = periodIdx > 0 && periodIdx < 35 ? txt.slice(0, periodIdx).trim() : txt.slice(0, 30);
3516
+ const stepDesc = periodIdx > 0 && periodIdx < 35 ? txt.slice(periodIdx + 1).trim() : txt;
3517
+ return { stepNum: idx + 1, title: stepTitle || `Step ${idx + 1}`, desc: stepDesc || stepTitle };
3518
+ });
3519
+ }
3520
+ }
3521
+ }
3522
+ if (!Array.isArray(slots.steps) || slots.steps.length === 0) {
3523
+ slots.steps = [
3524
+ { stepNum: 1, title: "Analyze", desc: "Deconstruct requirements and constraints" },
3525
+ { stepNum: 2, title: "Implement", desc: rawContent || "Build component logic and structure" },
3526
+ { stepNum: 3, title: "Verify", desc: "Test behavior and validate outcomes" }
3527
+ ];
3528
+ }
3529
+ break;
3530
+ }
3531
+ case "metric-callout": {
3532
+ slots.desc = slots.desc || slide.desc || rawContent || "";
3533
+ slots.metricLabel = slots.metricLabel || slide.metricLabel || "KEY METRIC";
3534
+ if (!slots.metric) {
3535
+ const numMatch = (slots.desc || slots.title).match(/(\d+(?:\.\d+)?%?|O\([^)]+\)|\d+x|\b[A-Z0-9_-]{2,}\b)/i);
3536
+ slots.metric = numMatch ? numMatch[1] : "100%";
3537
+ }
3538
+ break;
3539
+ }
3540
+ case "checkpoint-quiz": {
3541
+ slots.question = slots.question || slide.question || slots.title || "Check Your Understanding";
3542
+ if (!Array.isArray(slots.options) || slots.options.length === 0) {
3543
+ if (Array.isArray(slide.options) && slide.options.length > 0) {
3544
+ slots.options = slide.options;
3545
+ } else if (rawContent) {
3546
+ const items = rawContent.split(/(?:\d+\.|\b[A-D]\))\s*/i).map((l) => l.trim()).filter((l) => l.length > 3);
3547
+ if (items.length >= 2) {
3548
+ slots.options = items.slice(0, 4).map((text, idx) => ({
3549
+ label: String.fromCharCode(65 + idx),
3550
+ text
3551
+ }));
3552
+ }
3553
+ }
3554
+ }
3555
+ if (!Array.isArray(slots.options) || slots.options.length === 0) {
3556
+ slots.options = [
3557
+ { label: "A", text: "Option A (Core Concept)" },
3558
+ { label: "B", text: "Option B (Alternative Approach)" },
3559
+ { label: "C", text: "Option C (Edge Case)" }
3560
+ ];
3561
+ }
3562
+ slots.explanation = slots.explanation || slide.explanation || "";
3563
+ break;
3564
+ }
3565
+ case "summary-takeaways": {
3566
+ if (!Array.isArray(slots.takeaways) || slots.takeaways.length === 0) {
3567
+ if (Array.isArray(slide.takeaways) && slide.takeaways.length > 0) {
3568
+ slots.takeaways = slide.takeaways;
3569
+ } else if (rawContent) {
3570
+ const lines = rawContent.split(/\n|\.\s+/).map((l) => l.replace(/^(?:[-*•]|\d+\.)\s*/, "").trim()).filter((l) => l.length > 3);
3571
+ slots.takeaways = lines.length > 0 ? lines.slice(0, 4) : [rawContent];
3572
+ }
3573
+ }
3574
+ if (!Array.isArray(slots.takeaways) || slots.takeaways.length === 0) {
3575
+ slots.takeaways = [
3576
+ slots.title || "Key lesson principles mastered",
3577
+ "Applied hands-on practice through guided examples",
3578
+ "Ready for independent challenge and synthesis"
3579
+ ];
3580
+ }
3581
+ slots.nextStep = slots.nextStep || slide.nextStep || "Next: Practical Hands-On Lab";
3582
+ break;
3583
+ }
3584
+ }
3585
+ if (rawContent && !slots.rawContent) {
3586
+ slots.rawContent = rawContent;
3587
+ }
3588
+ return slots;
3589
+ }
3590
+
3437
3591
  // src/html-engine/compiler.ts
3438
3592
  function compileHtmlDeck(deckData, options) {
3439
3593
  const theme = options?.themeOverride || resolveHtmlTheme(deckData.theme);
@@ -3441,7 +3595,8 @@ function compileHtmlDeck(deckData, options) {
3441
3595
  const slideCount = Math.max(slides.length, 1);
3442
3596
  const renderedSlides = slides.map((slide, index) => {
3443
3597
  const preset = HTML_SLIDE_PRESETS[slide.layoutId] || HTML_SLIDE_PRESETS["hero-cover"];
3444
- const innerHtml = preset.template(slide.slots || {}, theme);
3598
+ const normalizedSlots = normalizeSlideSlots(slide);
3599
+ const innerHtml = preset.template(normalizedSlots, theme);
3445
3600
  const notesAttr = slide.notes ? ` data-notes="${encodeURIComponent(slide.notes)}"` : "";
3446
3601
  const customClass = slide.customClass ? ` ${slide.customClass}` : "";
3447
3602
  return `
@@ -3457,7 +3612,8 @@ function compileHtmlDeck(deckData, options) {
3457
3612
  theme,
3458
3613
  slidesHtml,
3459
3614
  slideCount,
3460
- customHeadTags: options?.customHeadTags
3615
+ customHeadTags: options?.customHeadTags,
3616
+ deckId: deckData?.id || options?.deckId
3461
3617
  });
3462
3618
  return {
3463
3619
  html: fullHtml,
@@ -3474,11 +3630,12 @@ exports.compileHtmlDeck = compileHtmlDeck;
3474
3630
  exports.generateHtmlShell = generateHtmlShell;
3475
3631
  exports.getSlideLayoutPresetById = getSlideLayoutPresetById;
3476
3632
  exports.getSlideLayoutPresetsByCategory = getSlideLayoutPresetsByCategory;
3633
+ exports.normalizeSlideSlots = normalizeSlideSlots;
3477
3634
  exports.removeSlideElementFromMarkdown = removeSlideElementFromMarkdown;
3478
3635
  exports.resolveHtmlTheme = resolveHtmlTheme;
3479
3636
  exports.serializeLayoutToComment = serializeLayoutToComment;
3480
3637
  exports.splitMarkdownSlides = splitMarkdownSlides;
3481
3638
  exports.updateSlideLayoutInMarkdown = updateSlideLayoutInMarkdown;
3482
3639
  exports.updateSlideTextInMarkdown = updateSlideTextInMarkdown;
3483
- //# sourceMappingURL=chunk-JIIUW2TN.cjs.map
3484
- //# sourceMappingURL=chunk-JIIUW2TN.cjs.map
3640
+ //# sourceMappingURL=chunk-JNTRKKJX.cjs.map
3641
+ //# sourceMappingURL=chunk-JNTRKKJX.cjs.map