@thanh01.pmt/presentation-kit 0.2.10 → 0.2.11

package/dist/chunk-53GLUCYC.cjs

@@ -0,0 +1,3464 @@
+'use strict';
+
+var yaml = require('js-yaml');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var yaml__default = /*#__PURE__*/_interopDefault(yaml);
+
+// src/core/layout/serializer.ts
+function serializeLayoutToComment(layout) {
+  if (!layout.boxes || layout.boxes.length === 0) return "";
+  const cleanData = {
+    boxes: layout.boxes.map((box) => {
+      const b = {
+        id: box.id,
+        target: box.target || `h1`,
+        pos: [
+          Math.round(box.pos[0]),
+          Math.round(box.pos[1]),
+          Math.round(box.pos[2]),
+          Math.round(box.pos[3])
+        ]
+      };
+      if (box.fontSize) b.fontSize = box.fontSize;
+      if (box.color) b.color = box.color;
+      if (box.textAlign) b.textAlign = box.textAlign;
+      if (box.style) b.style = box.style;
+      return b;
+    })
+  };
+  const yamlStr = yaml__default.default.dump(cleanData, {
+    indent: 2,
+    lineWidth: -1,
+    noRefs: true
+  }).trim();
+  return `<!-- layout:
+  ${yamlStr.split("\n").join("\n  ")}
+-->`;
+}
+function splitMarkdownSlides(markdown) {
+  const lines = markdown.split("\n");
+  let frontmatter = null;
+  const slideBuffers = [];
+  let currentBuffer = [];
+  let inCodeFence = false;
+  let lineIdx = 0;
+  if (lines.length > 0 && lines[0].trim() === "---") {
+    const fmBuffer = [lines[0]];
+    lineIdx = 1;
+    while (lineIdx < lines.length) {
+      const line = lines[lineIdx];
+      fmBuffer.push(line);
+      if (line.trim() === "---") {
+        frontmatter = fmBuffer.join("\n");
+        lineIdx++;
+        break;
+      }
+      lineIdx++;
+    }
+  }
+  for (let i = lineIdx; i < lines.length; i++) {
+    const line = lines[i];
+    if (/^```/.test(line.trim())) {
+      inCodeFence = !inCodeFence;
+      currentBuffer.push(line);
+      continue;
+    }
+    if (!inCodeFence && line.trim() === "---") {
+      slideBuffers.push(currentBuffer);
+      currentBuffer = [];
+      continue;
+    }
+    currentBuffer.push(line);
+  }
+  slideBuffers.push(currentBuffer);
+  const slides = slideBuffers.map((b) => b.join("\n"));
+  return { frontmatter, slides };
+}
+function updateSlideLayoutInMarkdown(markdown, slideIndex, layout) {
+  const { frontmatter, slides } = splitMarkdownSlides(markdown);
+  if (slideIndex < 0 || slideIndex >= slides.length) {
+    return markdown;
+  }
+  let slideContent = slides[slideIndex];
+  const layoutCommentRegex = /<!--\s*layout:\s*[\s\S]*?-->/i;
+  const newComment = layout && layout.boxes && layout.boxes.length > 0 ? serializeLayoutToComment(layout) : "";
+  if (layoutCommentRegex.test(slideContent)) {
+    if (newComment) {
+      slideContent = slideContent.replace(layoutCommentRegex, newComment);
+    } else {
+      slideContent = slideContent.replace(layoutCommentRegex, "").trim();
+    }
+  } else if (newComment) {
+    const trimmed = slideContent.trimStart();
+    slideContent = `${newComment}
+
+${trimmed}`;
+  }
+  slides[slideIndex] = slideContent;
+  const joinedSlides = slides.join("\n---\n");
+  if (frontmatter) {
+    return `${frontmatter}
+
+${joinedSlides}`;
+  }
+  return joinedSlides;
+}
+function updateSlideTextInMarkdown(markdown, slideIndex, oldText, newText) {
+  const { frontmatter, slides } = splitMarkdownSlides(markdown);
+  if (slideIndex < 0 || slideIndex >= slides.length) {
+    return markdown;
+  }
+  const cleanOld = oldText.trim();
+  const cleanNew = newText.trim();
+  if (!cleanOld || cleanOld === cleanNew) return markdown;
+  let slideContent = slides[slideIndex];
+  if (slideContent.includes(cleanOld)) {
+    slideContent = slideContent.replace(cleanOld, cleanNew);
+  } else {
+    const lines = slideContent.split("\n");
+    let replaced = false;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const stripped = line.replace(/^[#\s\-\*\>]+/, "").replace(/[*_`]/g, "").trim();
+      if (stripped === cleanOld) {
+        const prefixMatch = line.match(/^([#\s\-\*\>]+)/);
+        const prefix = prefixMatch ? prefixMatch[1] : "";
+        lines[i] = `${prefix}${cleanNew}`;
+        replaced = true;
+        break;
+      }
+    }
+    if (replaced) {
+      slideContent = lines.join("\n");
+    } else {
+      const escaped = cleanOld.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const regex = new RegExp(escaped, "i");
+      if (regex.test(slideContent)) {
+        slideContent = slideContent.replace(regex, cleanNew);
+      } else {
+        const words = cleanOld.split(/\s+/).filter((w) => w.length > 2);
+        if (words.length > 0) {
+          const pattern = words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("[\\s\\S]*?");
+          const fuzzyRegex = new RegExp(pattern, "i");
+          if (fuzzyRegex.test(slideContent)) {
+            slideContent = slideContent.replace(fuzzyRegex, cleanNew);
+          }
+        }
+      }
+    }
+  }
+  slides[slideIndex] = slideContent;
+  const joinedSlides = slides.join("\n---\n");
+  if (frontmatter) {
+    return `${frontmatter}
+
+${joinedSlides}`;
+  }
+  return joinedSlides;
+}
+function removeSlideElementFromMarkdown(markdown, slideIndex, options) {
+  const { frontmatter, slides } = splitMarkdownSlides(markdown);
+  if (slideIndex < 0 || slideIndex >= slides.length) {
+    return markdown;
+  }
+  let slideContent = slides[slideIndex];
+  const cleanContent = options.content?.trim();
+  if (cleanContent) {
+    const lines = slideContent.split("\n");
+    let removed = false;
+    const updatedLines = lines.filter((line) => {
+      if (removed) return true;
+      const stripped = line.replace(/^[#\s\-\*\>]+/, "").replace(/[*_`]/g, "").trim();
+      if (stripped === cleanContent || line.includes(cleanContent)) {
+        removed = true;
+        return false;
+      }
+      return true;
+    });
+    if (removed) {
+      slideContent = updatedLines.join("\n");
+    }
+  }
+  const layoutCommentRegex = /<!--\s*layout:\s*([\s\S]*?)-->/i;
+  const match = slideContent.match(layoutCommentRegex);
+  if (match && match[1]) {
+    try {
+      const parsed = yaml__default.default.load(match[1]);
+      if (parsed && Array.isArray(parsed.boxes)) {
+        const remainingBoxes = parsed.boxes.filter((b) => {
+          if (options.boxId && b.id === options.boxId) return false;
+          if (options.target && b.target === options.target) return false;
+          return true;
+        });
+        if (remainingBoxes.length > 0) {
+          const yamlStr = yaml__default.default.dump({ boxes: remainingBoxes }, { indent: 2, lineWidth: -1, noRefs: true }).trim();
+          slideContent = slideContent.replace(layoutCommentRegex, `<!-- layout:
+  ${yamlStr.split("\n").join("\n  ")}
+-->`);
+        } else {
+          slideContent = slideContent.replace(layoutCommentRegex, "").trim();
+        }
+      }
+    } catch {
+    }
+  }
+  slides[slideIndex] = slideContent;
+  const joinedSlides = slides.join("\n---\n");
+  if (frontmatter) {
+    return `${frontmatter}
+
+${joinedSlides}`;
+  }
+  return joinedSlides;
+}
+
+// src/core/layout/presets.ts
+var SLIDE_LAYOUT_PRESETS = [
+  {
+    id: "title-hero",
+    name: "Title & Speaker Cover",
+    category: "cover",
+    description: "High-impact opening slide with large title, subtitle, and speaker credentials.",
+    layout: {
+      boxes: [
+        {
+          id: "title",
+          target: "h1",
+          pos: [100, 180, 1080, 140],
+          fontSize: "3rem",
+          textAlign: "center"
+        },
+        {
+          id: "subtitle",
+          target: "h3",
+          pos: [100, 350, 1080, 70],
+          fontSize: "1.5rem",
+          textAlign: "center"
+        },
+        {
+          id: "speaker-meta",
+          target: "p",
+          pos: [100, 460, 1080, 80],
+          fontSize: "1.1rem",
+          textAlign: "center"
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: title
+      target: h1
+      pos: [100, 180, 1080, 140]
+      fontSize: 3rem
+      textAlign: center
+    - id: subtitle
+      target: h3
+      pos: [100, 350, 1080, 70]
+      fontSize: 1.5rem
+      textAlign: center
+    - id: speaker-meta
+      target: p
+      pos: [100, 460, 1080, 80]
+      fontSize: 1.1rem
+      textAlign: center
+-->
+
+# \u{1F680} Engineering Scalable Cloud Systems
+### Principles, Bottlenecks, and Real-World Architecture Patterns
+
+**Presenter:** Senior Systems Architect | **Duration:** 45 mins | **Level:** Intermediate
+
+<!--
+Presenter Notes:
+- Welcome the audience and outline today's primary engineering goals.
+- Spark curiosity with an opening hook about scaling under high concurrency.
+-->`
+  },
+  {
+    id: "two-column-split",
+    name: "Two-Column Comparison",
+    category: "split",
+    description: "Balanced side-by-side comparison for legacy vs modern patterns or pros vs cons.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [80, 50, 1120, 70],
+          fontSize: "2rem"
+        },
+        {
+          id: "col-left",
+          target: ".columns-2 > div:first-child",
+          pos: [80, 150, 530, 510]
+        },
+        {
+          id: "col-right",
+          target: ".columns-2 > div:last-child",
+          pos: [670, 150, 530, 510]
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [80, 50, 1120, 70]
+      fontSize: 2rem
+    - id: col-left
+      target: '.columns-2 > div:first-child'
+      pos: [80, 150, 530, 510]
+    - id: col-right
+      target: '.columns-2 > div:last-child'
+      pos: [670, 150, 530, 510]
+-->
+
+## \u2696\uFE0F Monolithic Polling vs Event-Driven Architecture
+
+<div class="columns-2">
+<div>
+
+### \u{1F534} Legacy Polling
+- Heavy database CPU overhead on idle cycles
+- High network latency between updates
+- Prone to cascading timeouts during spikes
+
+</div>
+<div>
+
+### \u{1F7E2} Event-Driven Streams
+- Real-time event propagation via webhooks
+- Zero idle compute waste with serverless consumers
+- Automatic backpressure and queue isolation
+
+</div>
+</div>
+
+<!--
+Presenter Notes:
+- Emphasize the core failure mode of periodic polling under sudden load spikes.
+- Ask the room if anyone has experienced database lockups caused by polling loops.
+-->`
+  },
+  {
+    id: "code-explainer",
+    name: "Code Walkthrough & Analysis",
+    category: "code",
+    description: "Syntax-highlighted code block on the left with step-by-step key annotations on the right.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [80, 45, 1120, 65],
+          fontSize: "1.9rem"
+        },
+        {
+          id: "code-box",
+          target: ".columns-2 > div:first-child",
+          pos: [80, 135, 630, 535]
+        },
+        {
+          id: "notes-box",
+          target: ".columns-2 > div:last-child",
+          pos: [740, 135, 460, 535]
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [80, 45, 1120, 65]
+      fontSize: 1.9rem
+    - id: code-box
+      target: '.columns-2 > div:first-child'
+      pos: [80, 135, 630, 535]
+    - id: notes-box
+      target: '.columns-2 > div:last-child'
+      pos: [740, 135, 460, 535]
+-->
+
+## \u{1F4BB} Robust Async Transaction Pipeline
+
+<div class="columns-2">
+<div>
+
+\`\`\`ts
+// Process payment with idempotency guarantee
+export async function processPayment(order: Order) {
+  const isValid = await validateOrder(order);
+  if (!isValid) throw new Error("ValidationFailed");
+
+  const receipt = await chargeCard(order);
+  return sendConfirmation(receipt);
+}
+\`\`\`
+
+</div>
+<div>
+
+### \u{1F50D} Key Engineering Invariants:
+1. **Early Guard Clause:** Validates payload immediately at line 3 before triggering external calls.
+2. **Deterministic Sequence:** Enforces strict order of operations using native \`await\`.
+3. **Audit Trail:** Returns immutable payment receipt upon successful execution.
+
+</div>
+</div>
+
+<!--
+Presenter Notes:
+- Walk through lines 1 to 7 sequentially.
+- Cold-call check: "What happens if line 6 throws a network timeout?"
+- Cognitive scaffolding: Highlight the importance of idempotency keys in payment APIs.
+-->`
+  },
+  {
+    id: "metrics-3-card",
+    name: "3-Metric Key Results Grid",
+    category: "metrics",
+    description: "Three high-visibility KPI stat cards for benchmarks, impact, and success criteria.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [80, 50, 1120, 70],
+          fontSize: "2rem",
+          textAlign: "center"
+        },
+        {
+          id: "metric-1",
+          target: ".columns-3 > div:nth-child(1)",
+          pos: [80, 165, 340, 485]
+        },
+        {
+          id: "metric-2",
+          target: ".columns-3 > div:nth-child(2)",
+          pos: [470, 165, 340, 485]
+        },
+        {
+          id: "metric-3",
+          target: ".columns-3 > div:nth-child(3)",
+          pos: [860, 165, 340, 485]
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [80, 50, 1120, 70]
+      fontSize: 2rem
+      textAlign: center
+    - id: metric-1
+      target: '.columns-3 > div:nth-child(1)'
+      pos: [80, 165, 340, 485]
+    - id: metric-2
+      target: '.columns-3 > div:nth-child(2)'
+      pos: [470, 165, 340, 485]
+    - id: metric-3
+      target: '.columns-3 > div:nth-child(3)'
+      pos: [860, 165, 340, 485]
+-->
+
+## \u{1F4CA} Performance & Reliability Benchmarks
+
+<div class="columns-3">
+<div>
+
+# \u26A1 99.99%
+### SLA Availability
+High-availability multi-region cluster with automated failover routing.
+
+</div>
+<div>
+
+# \u{1F680} 15ms
+### P99 Latency
+Sub-20ms roundtrip response time via distributed edge caching.
+
+</div>
+<div>
+
+# \u{1F6E1}\uFE0F Zero
+### Unhandled Breaches
+Full SOC2 Type II compliance and end-to-end payload encryption.
+
+</div>
+</div>
+
+<!--
+Presenter Notes:
+- Highlight the 15ms P99 latency target as the primary technical milestone.
+- Connect these metrics directly to the architecture decisions discussed next.
+-->`
+  },
+  {
+    id: "process-flow",
+    name: "Architecture & Process Flow",
+    category: "diagram",
+    description: "Multi-stage workflow with responsive Mermaid diagram and phase summaries.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [80, 45, 1120, 65],
+          fontSize: "1.9rem"
+        },
+        {
+          id: "diagram-box",
+          target: "pre.mermaid, .mermaid",
+          pos: [80, 130, 1120, 310]
+        },
+        {
+          id: "summary-box",
+          target: "ul, p",
+          pos: [80, 465, 1120, 205]
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [80, 45, 1120, 65]
+      fontSize: 1.9rem
+    - id: diagram-box
+      target: 'pre.mermaid, .mermaid'
+      pos: [80, 130, 1120, 310]
+    - id: summary-box
+      target: 'ul, p'
+      pos: [80, 465, 1120, 205]
+-->
+
+## \u{1F504} End-to-End Data Ingestion Pipeline
+
+\`\`\`mermaid
+graph LR
+    A[1. Client Ingress] --> B[2. API Gateway]
+    B --> C[3. Auth Verifier]
+    C --> D[4. Distributed DB]
+    style A fill:#0284c7,stroke:#38bdf8,stroke-width:2px,color:#fff
+    style B fill:#1e293b,stroke:#64748b,stroke-width:2px,color:#fff
+    style C fill:#059669,stroke:#34d399,stroke-width:2px,color:#fff
+    style D fill:#7c3aed,stroke:#a78bfa,stroke-width:2px,color:#fff
+\`\`\`
+
+- **Ingress & Gateway:** Rate-limits traffic and applies reverse-proxy load balancing.
+- **Verification & Storage:** Decodes cryptographic JWT tokens before transactional write commit.
+
+<!--
+Presenter Notes:
+- Trace each hop across the diagram from left to right.
+- Ask: "Where should rate limiting be applied to prevent DDoS attacks?"
+-->`
+  },
+  {
+    id: "quote-highlight",
+    name: "Core Principle & Quote Highlight",
+    category: "quote",
+    description: "Prominent quote callout for fundamental engineering rules or memorable mantras.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [100, 100, 1080, 80],
+          fontSize: "2.2rem",
+          textAlign: "center"
+        },
+        {
+          id: "quote-box",
+          target: "blockquote",
+          pos: [140, 230, 1e3, 360],
+          fontSize: "1.4rem"
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [100, 100, 1080, 80]
+      fontSize: 2.2rem
+      textAlign: center
+    - id: quote-box
+      target: blockquote
+      pos: [140, 230, 1000, 360]
+      fontSize: 1.4rem
+-->
+
+## \u{1F4A1} Foundational Architecture Principle
+
+> "Simplicity is prerequisite for reliability. A well-engineered distributed system is one where a new engineer can understand the request flow within their first hour."
+> 
+> \u2014 **Edsger W. Dijkstra**
+
+<!--
+Presenter Notes:
+- Pause for 5 seconds of silence to let the quote sink in.
+- Ask: "How do our current architectural choices reflect this principle?"
+-->`
+  },
+  {
+    id: "quiz-checkpoint",
+    name: "Interactive Formative Checkpoint",
+    category: "assessment",
+    description: "Interactive multiple-choice diagnostic checkpoint with A/B/C/D voting options.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [80, 45, 1120, 65],
+          fontSize: "1.9rem"
+        },
+        {
+          id: "question-callout",
+          target: "blockquote",
+          pos: [80, 130, 1120, 110],
+          fontSize: "1.2rem"
+        },
+        {
+          id: "options-list",
+          target: "ul",
+          pos: [80, 260, 1120, 390],
+          fontSize: "1.15rem"
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [80, 45, 1120, 65]
+      fontSize: 1.9rem
+    - id: question-callout
+      target: blockquote
+      pos: [80, 130, 1120, 110]
+      fontSize: 1.2rem
+    - id: options-list
+      target: ul
+      pos: [80, 260, 1120, 390]
+      fontSize: 1.15rem
+-->
+
+## \u{1F3AF} Formative Checkpoint: Verify Your Understanding
+
+> **Question:** In an event-driven architecture, which pattern guarantees that messages are never permanently lost if a downstream consumer crashes?
+
+- **A.** Direct HTTP POST call with a short 2-second timeout
+- **B.** Persistent Message Broker with Dead-Letter Queue (DLQ) & retry policy
+- **C.** In-memory client RAM cache without disk persistence
+- **D.** Discarding failed packets and prompting the user to re-submit
+
+<!--
+Presenter Notes:
+- Give students 30 seconds to vote on option A, B, C, or D.
+- Correct answer: B.
+- Explain why options A and C introduce catastrophic data loss in production.
+-->`
+  },
+  {
+    id: "tiered-practice-3cards",
+    name: "Tiered Differentiation (Bronze / Silver / Gold)",
+    category: "content",
+    description: "Three progressive competency tiers allowing self-paced learning acceleration.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [80, 45, 1120, 65],
+          fontSize: "1.9rem"
+        },
+        {
+          id: "tier-bronze",
+          target: ".columns-3 > div:nth-child(1)",
+          pos: [80, 140, 350, 520]
+        },
+        {
+          id: "tier-silver",
+          target: ".columns-3 > div:nth-child(2)",
+          pos: [465, 140, 350, 520]
+        },
+        {
+          id: "tier-gold",
+          target: ".columns-3 > div:nth-child(3)",
+          pos: [850, 140, 350, 520]
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [80, 45, 1120, 65]
+      fontSize: 1.9rem
+    - id: tier-bronze
+      target: '.columns-3 > div:nth-child(1)'
+      pos: [80, 140, 350, 520]
+    - id: tier-silver
+      target: '.columns-3 > div:nth-child(2)'
+      pos: [465, 140, 350, 520]
+    - id: tier-gold
+      target: '.columns-3 > div:nth-child(3)'
+      pos: [850, 140, 350, 520]
+-->
+
+## \u{1F6E0}\uFE0F Hands-On Challenge: 3-Tier Differentiation
+
+<div class="columns-3">
+<div>
+
+### \u{1F949} Bronze Tier
+- Implement basic handler logic
+- Pass 3 baseline unit tests
+- *Goal: Foundational mastery*
+
+</div>
+<div>
+
+### \u{1F948} Silver Tier
+- Add boundary error handling
+- Enforce O(N) memory complexity
+- *Goal: Production-ready code*
+
+</div>
+<div>
+
+### \u{1F947} Gold Tier
+- Design distributed retry queue
+- Add 95% automated test coverage
+- *Goal: Architectural leadership*
+
+</div>
+</div>
+
+<!--
+Presenter Notes:
+- All learners begin at Bronze to establish baseline competency.
+- Accelerate self-directed learners to Silver and Gold as they complete each tier.
+-->`
+  },
+  {
+    id: "agenda-timeline",
+    name: "Session Agenda & Milestones",
+    category: "content",
+    description: "Structured time-budgeted agenda mapping stages to measurable deliverables.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [80, 45, 1120, 65],
+          fontSize: "1.9rem"
+        },
+        {
+          id: "table-box",
+          target: "table",
+          pos: [80, 140, 1120, 520]
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [80, 45, 1120, 65]
+      fontSize: 1.9rem
+    - id: table-box
+      target: table
+      pos: [80, 140, 1120, 520]
+-->
+
+## \u{1F5FA}\uFE0F Milestone Roadmap & Time Budget
+
+| Allocated Time | Session Stage | Core Learning Focus | Deliverable Milestone |
+|:---:|---|---|---|
+| **05 mins** | Warm-Up | Real-World Scenario & Context | Identify system bottleneck |
+| **15 mins** | Concept Discovery | Core Architectural Patterns | Deconstruct message queue models |
+| **20 mins** | Hands-On Lab | Tiered Code Implementation | Complete Bronze + Silver tasks |
+| **05 mins** | Wrap-Up | Formative Checkpoint & Debrief | Consolidate key principles |
+
+<!--
+Presenter Notes:
+- Walk through the time budget so students understand expectations and pacing.
+-->`
+  },
+  {
+    id: "takeaways-summary",
+    name: "Key Takeaways & Wrap-up",
+    category: "content",
+    description: "Three memorable synthesis takeaways with actionable next steps.",
+    layout: {
+      boxes: [
+        {
+          id: "heading",
+          target: "h2",
+          pos: [80, 50, 1120, 70],
+          fontSize: "2rem"
+        },
+        {
+          id: "list-box",
+          target: "ol",
+          pos: [80, 150, 1120, 340],
+          fontSize: "1.25rem"
+        },
+        {
+          id: "callout-next",
+          target: "blockquote",
+          pos: [80, 520, 1120, 140],
+          fontSize: "1.1rem"
+        }
+      ]
+    },
+    markdownSnippet: `<!-- layout:
+  boxes:
+    - id: heading
+      target: h2
+      pos: [80, 50, 1120, 70]
+      fontSize: 2rem
+    - id: list-box
+      target: ol
+      pos: [80, 150, 1120, 340]
+      fontSize: 1.25rem
+    - id: callout-next
+      target: blockquote
+      pos: [80, 520, 1120, 140]
+      fontSize: 1.1rem
+-->
+
+## \u{1F3C1} Key Takeaways & Action Items
+
+1. **Decouple Before Scaling:** Separate producer rate from consumer processing capacity.
+2. **Design for Failure:** Always configure retries, backoff intervals, and dead-letter queues.
+3. **Measure End-to-End:** Track P99 latency and error rates across all distributed boundaries.
+
+> \u{1F4DD} **Next Action Item:** Complete the Silver Tier refactoring challenge before our next peer-review session.
+
+<!--
+Presenter Notes:
+- Deliver a crisp 2-minute wrap-up reinforcing the 3 core takeaways.
+- Acknowledge strong peer collaboration during the hands-on lab.
+-->`
+  }
+];
+function getSlideLayoutPresetById(id) {
+  return SLIDE_LAYOUT_PRESETS.find((p) => p.id === id);
+}
+function getSlideLayoutPresetsByCategory(category) {
+  return SLIDE_LAYOUT_PRESETS.filter((p) => p.category === category);
+}
+
+// src/html-engine/themes.ts
+var HTML_THEMES = {
+  "blue-professional": {
+    id: "blue-professional",
+    name: "Blue Professional",
+    scheme: "light",
+    palette: {
+      bg: "#FDFAE7",
+      bgSecondary: "#F4EFCF",
+      primary: "#1E2BFA",
+      accent: "#0D18B9",
+      text: "#111111",
+      textMuted: "#6B6B6B",
+      border: "#E2DCB9"
+    },
+    typography: {
+      display: "'Space Grotesk', system-ui, -apple-system, sans-serif",
+      body: "'Inter', system-ui, -apple-system, sans-serif",
+      code: "'JetBrains Mono', 'Fira Code', monospace"
+    }
+  },
+  "editorial-forest": {
+    id: "editorial-forest",
+    name: "Editorial Forest",
+    scheme: "dark",
+    palette: {
+      bg: "#0F1F17",
+      bgSecondary: "#183024",
+      primary: "#D9A74A",
+      accent: "#8EA696",
+      text: "#F4F1EA",
+      textMuted: "#A0B4A8",
+      border: "rgba(244, 241, 234, 0.12)"
+    },
+    typography: {
+      display: "'Playfair Display', Georgia, serif",
+      body: "'Inter', system-ui, -apple-system, sans-serif",
+      code: "'JetBrains Mono', monospace"
+    }
+  },
+  "cobalt-grid": {
+    id: "cobalt-grid",
+    name: "Cobalt Grid (Tech Modern)",
+    scheme: "dark",
+    palette: {
+      bg: "#090D1E",
+      bgSecondary: "#111836",
+      primary: "#00E5FF",
+      accent: "#3B82F6",
+      text: "#F8FAFC",
+      textMuted: "#94A3B8",
+      border: "rgba(255, 255, 255, 0.1)"
+    },
+    typography: {
+      display: "'Plus Jakarta Sans', system-ui, sans-serif",
+      body: "'Inter', system-ui, sans-serif",
+      code: "'Fira Code', 'JetBrains Mono', monospace"
+    },
+    customCss: `
+      .slide-canvas {
+        background-image: radial-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 0);
+        background-size: 32px 32px;
+      }
+    `
+  },
+  studio: {
+    id: "studio",
+    name: "Studio Minimalist",
+    scheme: "light",
+    palette: {
+      bg: "#F8F9FA",
+      bgSecondary: "#EDEFF2",
+      primary: "#0F172A",
+      accent: "#2563EB",
+      text: "#0F172A",
+      textMuted: "#64748B",
+      border: "#E2E8F0"
+    },
+    typography: {
+      display: "'Inter', system-ui, -apple-system, sans-serif",
+      body: "'Inter', system-ui, -apple-system, sans-serif",
+      code: "'JetBrains Mono', monospace"
+    }
+  },
+  monochrome: {
+    id: "monochrome",
+    name: "Monochrome Dark",
+    scheme: "dark",
+    palette: {
+      bg: "#09090B",
+      bgSecondary: "#141417",
+      primary: "#FAFAFA",
+      accent: "#38BDF8",
+      text: "#FAFAFA",
+      textMuted: "#A1A1AA",
+      border: "rgba(255, 255, 255, 0.12)"
+    },
+    typography: {
+      display: "'Inter', system-ui, sans-serif",
+      body: "'Inter', system-ui, sans-serif",
+      code: "'JetBrains Mono', monospace"
+    }
+  }
+};
+function resolveHtmlTheme(themeName) {
+  if (themeName && HTML_THEMES[themeName]) {
+    return HTML_THEMES[themeName];
+  }
+  return HTML_THEMES["blue-professional"];
+}
+
+// src/html-engine/presets.ts
+function escapeHtml(str) {
+  if (str === void 0 || str === null) return "";
+  return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+var HTML_SLIDE_PRESETS = {
+  "hero-cover": {
+    id: "hero-cover",
+    name: "Hero Cover",
+    category: "cover",
+    description: "Title slide with topic badge, large display heading, subtitle, and author/date info",
+    slots: [
+      { name: "tag", label: "Badge / Tag", type: "badge", description: "e.g. Unit 1 \xB7 Lesson 3" },
+      { name: "title", label: "Main Title", type: "text", description: "Main title of the lesson or deck", required: true },
+      { name: "subtitle", label: "Subtitle", type: "multiline", description: "Brief description or learning goal" },
+      { name: "author", label: "Instructor / Author", type: "text", description: "Instructor name or school" },
+      { name: "date", label: "Date / Period", type: "text", description: "Date or semester" }
+    ],
+    template: (slots, theme) => `
+      <div class="h-full w-full flex flex-col justify-between p-20 relative overflow-hidden">
+        <div class="space-y-6 max-w-4xl z-10 my-auto">
+          ${slots.tag ? `<div class="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-bold tracking-widest uppercase border border-current opacity-90" style="color: var(--primary);">${escapeHtml(slots.tag)}</div>` : ""}
+          <h1 class="text-6xl font-extrabold leading-tight tracking-tight" style="font-family: var(--font-display); color: var(--text);">
+            ${escapeHtml(slots.title || "Slide Title")}
+          </h1>
+          ${slots.subtitle ? `<p class="text-2xl leading-relaxed opacity-85 max-w-3xl" style="color: var(--text-muted);">${escapeHtml(slots.subtitle)}</p>` : ""}
+        </div>
+        <div class="flex items-center justify-between border-t pt-6 text-base opacity-75 z-10" style="border-color: var(--border); color: var(--text-muted);">
+          <span class="font-medium">${escapeHtml(slots.author || "")}</span>
+          <span class="font-mono">${escapeHtml(slots.date || "")}</span>
+        </div>
+      </div>
+    `
+  },
+  "split-concept-code": {
+    id: "split-concept-code",
+    name: "Split Concept & Code",
+    category: "split",
+    description: "Left column for theoretical concept & bullet points, right column for code walkthrough",
+    slots: [
+      { name: "tag", label: "Section Tag", type: "badge", description: "e.g. Syntax & Example" },
+      { name: "title", label: "Slide Title", type: "text", description: "Heading for this topic", required: true },
+      { name: "points", label: "Key Points", type: "list", description: "Array of key takeaways or bullet points" },
+      { name: "code", label: "Code Snippet", type: "code", description: "Source code", required: true },
+      { name: "language", label: "Programming Language", type: "text", description: "e.g. python, typescript, swift" },
+      { name: "codeNote", label: "Code Footnote / Explanation", type: "text", description: "Small tip under the code box" }
+    ],
+    template: (slots, theme) => {
+      const points = Array.isArray(slots.points) ? slots.points : [];
+      return `
+        <div class="h-full w-full flex flex-col p-16 gap-6 justify-between">
+          <div>
+            ${slots.tag ? `<span class="text-xs uppercase tracking-widest font-bold opacity-80" style="color: var(--primary);">${escapeHtml(slots.tag)}</span>` : ""}
+            <h2 class="text-4xl font-bold mt-1.5" style="font-family: var(--font-display); color: var(--text);">${escapeHtml(slots.title || "")}</h2>
+          </div>
+          <div class="flex-1 grid grid-cols-12 gap-8 items-center min-h-0">
+            <div class="col-span-5 flex flex-col justify-center space-y-4">
+              <ul class="space-y-4">
+                ${points.map((pt) => `
+                  <li class="flex items-start gap-3 text-lg leading-relaxed" style="color: var(--text);">
+                    <span class="inline-block mt-2 w-2 h-2 rounded-full flex-shrink-0" style="background-color: var(--primary);"></span>
+                    <span>${escapeHtml(pt)}</span>
+                  </li>
+                `).join("")}
+              </ul>
+            </div>
+            <div class="col-span-7 flex flex-col rounded-xl overflow-hidden border shadow-lg" style="background-color: var(--bg-secondary); border-color: var(--border);">
+              <div class="flex items-center justify-between px-5 py-2.5 border-b text-xs font-mono opacity-80" style="border-color: var(--border); color: var(--text-muted);">
+                <div class="flex items-center gap-1.5">
+                  <span class="w-3 h-3 rounded-full bg-red-500/70 inline-block"></span>
+                  <span class="w-3 h-3 rounded-full bg-yellow-500/70 inline-block"></span>
+                  <span class="w-3 h-3 rounded-full bg-green-500/70 inline-block"></span>
+                </div>
+                <span class="uppercase tracking-wider font-semibold">${escapeHtml(slots.language || "code")}</span>
+              </div>
+              <pre class="flex-1 p-6 text-sm font-mono overflow-hidden leading-relaxed" style="color: var(--text);"><code>${escapeHtml(slots.code || "")}</code></pre>
+              ${slots.codeNote ? `<div class="px-5 py-2.5 border-t text-xs font-mono opacity-80" style="border-color: var(--border); color: var(--text-muted);">${escapeHtml(slots.codeNote)}</div>` : ""}
+            </div>
+          </div>
+        </div>
+      `;
+    }
+  },
+  "two-columns-compare": {
+    id: "two-columns-compare",
+    name: "Two Columns Compare",
+    category: "split",
+    description: "Side-by-side comparison for Pros/Cons, Approaches, or Before/After",
+    slots: [
+      { name: "tag", label: "Section Tag", type: "badge", description: "e.g. Comparison" },
+      { name: "title", label: "Slide Title", type: "text", description: "Comparison headline", required: true },
+      { name: "col1Title", label: "Left Column Title", type: "text", description: "e.g. Approach A / Pros" },
+      { name: "col1Items", label: "Left Column Items", type: "list", description: "Array of points" },
+      { name: "col2Title", label: "Right Column Title", type: "text", description: "e.g. Approach B / Cons" },
+      { name: "col2Items", label: "Right Column Items", type: "list", description: "Array of points" }
+    ],
+    template: (slots, theme) => {
+      const col1 = Array.isArray(slots.col1Items) ? slots.col1Items : [];
+      const col2 = Array.isArray(slots.col2Items) ? slots.col2Items : [];
+      return `
+        <div class="h-full w-full flex flex-col p-16 gap-6 justify-between">
+          <div>
+            ${slots.tag ? `<span class="text-xs uppercase tracking-widest font-bold opacity-80" style="color: var(--primary);">${escapeHtml(slots.tag)}</span>` : ""}
+            <h2 class="text-4xl font-bold mt-1.5" style="font-family: var(--font-display); color: var(--text);">${escapeHtml(slots.title || "")}</h2>
+          </div>
+          <div class="flex-1 grid grid-cols-2 gap-8 items-stretch min-h-0 my-auto">
+            <div class="p-8 rounded-xl border flex flex-col space-y-4 shadow-sm justify-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
+              <h3 class="text-2xl font-bold" style="color: var(--primary);">${escapeHtml(slots.col1Title || "Column 1")}</h3>
+              <ul class="space-y-3">
+                ${col1.map((item) => `
+                  <li class="flex items-start gap-3 text-lg leading-relaxed" style="color: var(--text);">
+                    <span class="opacity-60 mt-0.5 font-bold">\u2022</span>
+                    <span>${escapeHtml(item)}</span>
+                  </li>
+                `).join("")}
+              </ul>
+            </div>
+            <div class="p-8 rounded-xl border flex flex-col space-y-4 shadow-sm justify-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
+              <h3 class="text-2xl font-bold" style="color: var(--text);">${escapeHtml(slots.col2Title || "Column 2")}</h3>
+              <ul class="space-y-3">
+                ${col2.map((item) => `
+                  <li class="flex items-start gap-3 text-lg leading-relaxed" style="color: var(--text);">
+                    <span class="opacity-60 mt-0.5 font-bold">\u2022</span>
+                    <span>${escapeHtml(item)}</span>
+                  </li>
+                `).join("")}
+              </ul>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+  },
+  "three-cards-grid": {
+    id: "three-cards-grid",
+    name: "Three Cards Grid",
+    category: "grid",
+    description: "3 cards showcasing 3 key pillars, concepts, or architectural layers",
+    slots: [
+      { name: "tag", label: "Section Tag", type: "badge", description: "e.g. Core Pillars" },
+      { name: "title", label: "Slide Title", type: "text", description: "Overview title", required: true },
+      { name: "cards", label: "Cards List", type: "options", description: "Array of 3 cards: {badge, title, desc}" }
+    ],
+    template: (slots, theme) => {
+      const cards = Array.isArray(slots.cards) ? slots.cards : [];
+      return `
+        <div class="h-full w-full flex flex-col p-16 gap-6 justify-between">
+          <div>
+            ${slots.tag ? `<span class="text-xs uppercase tracking-widest font-bold opacity-80" style="color: var(--primary);">${escapeHtml(slots.tag)}</span>` : ""}
+            <h2 class="text-4xl font-bold mt-1.5" style="font-family: var(--font-display); color: var(--text);">${escapeHtml(slots.title || "")}</h2>
+          </div>
+          <div class="flex-1 grid grid-cols-3 gap-6 items-stretch min-h-0 my-auto">
+            ${cards.map((c, idx) => `
+              <div class="p-8 rounded-xl border flex flex-col justify-between space-y-4 shadow-sm" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                <div class="space-y-3">
+                  <span class="text-xs font-mono font-bold uppercase tracking-wider px-3 py-1 rounded border inline-block" style="border-color: var(--border); color: var(--primary);">
+                    ${escapeHtml(c.badge || `0${idx + 1}`)}
+                  </span>
+                  <h3 class="text-2xl font-bold mt-2" style="color: var(--text);">${escapeHtml(c.title || "")}</h3>
+                  <p class="text-base leading-relaxed opacity-85" style="color: var(--text-muted);">${escapeHtml(c.desc || "")}</p>
+                </div>
+                ${c.footer ? `<div class="text-xs font-mono opacity-65 border-t pt-3" style="border-color: var(--border); color: var(--text-muted);">${escapeHtml(c.footer)}</div>` : ""}
+              </div>
+            `).join("")}
+          </div>
+        </div>
+      `;
+    }
+  },
+  "timeline-steps": {
+    id: "timeline-steps",
+    name: "Timeline / Workflow Steps",
+    category: "timeline",
+    description: "Step-by-step workflow, pipeline stages, or algorithm execution order",
+    slots: [
+      { name: "tag", label: "Section Tag", type: "badge", description: "e.g. Execution Flow" },
+      { name: "title", label: "Slide Title", type: "text", description: "Workflow title", required: true },
+      { name: "steps", label: "Steps List", type: "options", description: "Array of {stepNum, title, desc}" }
+    ],
+    template: (slots, theme) => {
+      const steps = Array.isArray(slots.steps) ? slots.steps : [];
+      return `
+        <div class="h-full w-full flex flex-col p-16 gap-6 justify-between">
+          <div>
+            ${slots.tag ? `<span class="text-xs uppercase tracking-widest font-bold opacity-80" style="color: var(--primary);">${escapeHtml(slots.tag)}</span>` : ""}
+            <h2 class="text-4xl font-bold mt-1.5" style="font-family: var(--font-display); color: var(--text);">${escapeHtml(slots.title || "")}</h2>
+          </div>
+          <div class="flex-1 flex flex-col justify-center my-auto">
+            <div class="grid grid-cols-${steps.length || 4} gap-5 relative">
+              ${steps.map((st, idx) => `
+                <div class="flex flex-col space-y-3 p-6 rounded-xl border relative shadow-sm" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                  <div class="w-10 h-10 rounded-xl flex items-center justify-center font-bold text-lg shadow" style="background-color: var(--primary); color: #FFFFFF;">
+                    ${escapeHtml(st.stepNum || idx + 1)}
+                  </div>
+                  <h4 class="text-xl font-bold" style="color: var(--text);">${escapeHtml(st.title || "")}</h4>
+                  <p class="text-sm opacity-85 leading-relaxed" style="color: var(--text-muted);">${escapeHtml(st.desc || "")}</p>
+                </div>
+              `).join("")}
+            </div>
+          </div>
+        </div>
+      `;
+    }
+  },
+  "metric-callout": {
+    id: "metric-callout",
+    name: "Metric / Key Callout",
+    category: "callout",
+    description: "High-impact slide emphasizing a critical benchmark, theorem, or takeaway statistic",
+    slots: [
+      { name: "tag", label: "Category Tag", type: "badge", description: "e.g. Performance Benchmark" },
+      { name: "metric", label: "Big Stat / Number", type: "metric", description: "e.g. 10x, 99.9%, O(1)" },
+      { name: "metricLabel", label: "Metric Label", type: "text", description: "Short metric description" },
+      { name: "title", label: "Callout Headline", type: "text", description: "Main point of this stat", required: true },
+      { name: "desc", label: "Context Explanation", type: "multiline", description: "Deep context or impact" }
+    ],
+    template: (slots, theme) => `
+      <div class="h-full w-full flex flex-col justify-center items-center p-16 text-center space-y-6 my-auto">
+        ${slots.tag ? `<div class="px-5 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest border" style="border-color: var(--border); color: var(--primary);">${escapeHtml(slots.tag)}</div>` : ""}
+        <div class="text-8xl font-black tracking-tighter" style="font-family: var(--font-display); color: var(--primary);">
+          ${escapeHtml(slots.metric || "100%")}
+        </div>
+        ${slots.metricLabel ? `<div class="text-lg font-bold tracking-widest uppercase opacity-75" style="color: var(--text-muted);">${escapeHtml(slots.metricLabel)}</div>` : ""}
+        <h2 class="text-4xl font-extrabold max-w-3xl leading-tight" style="font-family: var(--font-display); color: var(--text);">${escapeHtml(slots.title || "")}</h2>
+        ${slots.desc ? `<p class="text-lg max-w-2xl opacity-85 leading-relaxed" style="color: var(--text-muted);">${escapeHtml(slots.desc)}</p>` : ""}
+      </div>
+    `
+  },
+  "checkpoint-quiz": {
+    id: "checkpoint-quiz",
+    name: "Interactive Checkpoint Quiz",
+    category: "assessment",
+    description: "Interactive mid-lesson comprehension check with option cards and revealable answer",
+    slots: [
+      { name: "tag", label: "Badge", type: "badge", description: "e.g. Knowledge Check" },
+      { name: "question", label: "Question Text", type: "multiline", description: "The question to answer", required: true },
+      { name: "options", label: "Options List", type: "options", description: "Array of {label, text, isCorrect}" },
+      { name: "explanation", label: "Explanation", type: "multiline", description: "Explanation revealed on answer" }
+    ],
+    template: (slots, theme) => {
+      const opts = Array.isArray(slots.options) ? slots.options : [];
+      return `
+        <div class="h-full w-full flex flex-col p-16 gap-6 justify-between">
+          <div>
+            ${slots.tag ? `<span class="text-xs uppercase tracking-widest font-bold opacity-80" style="color: var(--primary);">${escapeHtml(slots.tag)}</span>` : ""}
+            <h2 class="text-3xl font-extrabold mt-1.5 leading-snug max-w-4xl" style="font-family: var(--font-display); color: var(--text);">${escapeHtml(slots.question || "Quick Check")}</h2>
+          </div>
+          <div class="w-full grid grid-cols-2 gap-5 items-stretch min-h-0 my-auto">
+            ${opts.map((opt, idx) => {
+        const letter = opt.label || String.fromCharCode(65 + idx);
+        return `
+                <div class="quiz-option p-6 rounded-xl border flex items-center gap-4 shadow-sm" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                  <span class="opt-badge w-12 h-12 rounded-xl flex items-center justify-center font-bold text-lg border shrink-0" style="border-color: var(--border); color: var(--primary);">
+                    ${escapeHtml(letter)}
+                  </span>
+                  <span class="text-lg font-medium leading-relaxed" style="color: var(--text);">${escapeHtml(opt.text || "")}</span>
+                </div>
+              `;
+      }).join("")}
+          </div>
+          ${slots.explanation ? `
+            <div class="quiz-explanation p-4 rounded-xl border text-sm flex items-center gap-3 opacity-90 shadow-sm" style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text);">
+              <span class="text-xl">\u{1F4A1}</span>
+              <div><strong class="text-primary font-bold">Hint / Explanation:</strong> ${escapeHtml(slots.explanation)}</div>
+            </div>
+          ` : ""}
+        </div>
+      `;
+    }
+  },
+  "summary-takeaways": {
+    id: "summary-takeaways",
+    name: "Summary & Takeaways",
+    category: "content",
+    description: "End-of-lesson wrap-up slide with bulleted takeaways and next lesson teaser",
+    slots: [
+      { name: "tag", label: "Tag", type: "badge", description: "e.g. Recap" },
+      { name: "title", label: "Slide Title", type: "text", description: "Wrap up headline", required: true },
+      { name: "takeaways", label: "Takeaways List", type: "list", description: "Key points students should remember" },
+      { name: "nextStep", label: "Next Lesson / Challenge", type: "text", description: "Preview of what comes next" }
+    ],
+    template: (slots, theme) => {
+      const takeaways = Array.isArray(slots.takeaways) ? slots.takeaways : [];
+      return `
+        <div class="h-full w-full flex flex-col p-16 gap-6 justify-between">
+          <div>
+            ${slots.tag ? `<span class="text-xs uppercase tracking-widest font-bold opacity-80" style="color: var(--primary);">${escapeHtml(slots.tag)}</span>` : ""}
+            <h2 class="text-4xl font-bold mt-1.5" style="font-family: var(--font-display); color: var(--text);">${escapeHtml(slots.title || "Summary")}</h2>
+          </div>
+          <div class="flex-1 flex flex-col justify-center space-y-6 min-h-0 my-auto">
+            <div class="space-y-4">
+              ${takeaways.map((t) => `
+                <div class="p-5 rounded-xl border flex items-start gap-4 shadow-sm" style="background-color: var(--bg-secondary); border-color: var(--border);">
+                  <span class="text-xs font-bold w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm" style="background-color: var(--primary); color: #FFF;">\u2713</span>
+                  <span class="text-lg font-medium leading-relaxed" style="color: var(--text);">${escapeHtml(t)}</span>
+                </div>
+              `).join("")}
+            </div>
+            ${slots.nextStep ? `
+              <div class="p-6 rounded-xl border flex items-center justify-between shadow-sm" style="border-color: var(--primary); background-color: var(--bg-secondary);">
+                <div>
+                  <div class="text-xs uppercase font-bold tracking-widest opacity-80" style="color: var(--primary);">Next Session</div>
+                  <div class="text-lg font-bold mt-1" style="color: var(--text);">${escapeHtml(slots.nextStep)}</div>
+                </div>
+                <span class="text-2xl" style="color: var(--primary);">\u2794</span>
+              </div>
+            ` : ""}
+          </div>
+        </div>
+      `;
+    }
+  }
+};
+
+// src/html-engine/shell.ts
+function generateHtmlShell(options) {
+  const { title, theme, slidesHtml, slideCount, customHeadTags = "" } = options;
+  return `<!DOCTYPE html>
+<html lang="en" class="${theme.scheme}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>${title}</title>
+  
+  <!-- Fonts -->
+  <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=Fira+Code:wght@400;500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@500;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
+
+  <!-- Core Presentation Styling & 1920x1080 Scaled Tailwind Configuration -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontSize: {
+            'xs': ['var(--font-size-xs, 14px)', { lineHeight: '1.4' }],
+            'sm': ['var(--font-size-sm, 16px)', { lineHeight: '1.45' }],
+            'base': ['var(--font-size-base, 18px)', { lineHeight: '1.5' }],
+            'lg': ['var(--font-size-lg, 20px)', { lineHeight: '1.5' }],
+            'xl': ['var(--font-size-xl, 22px)', { lineHeight: '1.5' }],
+            '2xl': ['var(--font-size-2xl, 26px)', { lineHeight: '1.4' }],
+            '3xl': ['var(--font-size-3xl, 32px)', { lineHeight: '1.3' }],
+            '4xl': ['var(--font-size-4xl, 38px)', { lineHeight: '1.25' }],
+            '5xl': ['var(--font-size-5xl, 46px)', { lineHeight: '1.2' }],
+            '6xl': ['var(--font-size-6xl, 58px)', { lineHeight: '1.15' }],
+            '7xl': ['var(--font-size-7xl, 72px)', { lineHeight: '1.1' }],
+            '8xl': ['var(--font-size-8xl, 96px)', { lineHeight: '1.05' }],
+          },
+          spacing: {
+            '2': 'calc(0.5rem * var(--scale-spacing-eff, 1))',
+            '3': 'calc(0.75rem * var(--scale-spacing-eff, 1))',
+            '4': 'calc(1rem * var(--scale-spacing-eff, 1))',
+            '5': 'calc(1.25rem * var(--scale-spacing-eff, 1))',
+            '6': 'calc(1.5rem * var(--scale-spacing-eff, 1))',
+            '8': 'calc(2rem * var(--scale-spacing-eff, 1))',
+            '10': 'calc(2.5rem * var(--scale-spacing-eff, 1))',
+            '12': 'calc(3rem * var(--scale-spacing-eff, 1))',
+            '16': 'calc(4rem * var(--scale-spacing-eff, 1))',
+            '20': 'calc(5rem * var(--scale-spacing-eff, 1))',
+            '24': 'calc(6rem * var(--scale-spacing-eff, 1))',
+          },
+          colors: {
+            themeBg: 'var(--bg)',
+            themeBgSecondary: 'var(--bg-secondary)',
+            themePrimary: 'var(--primary)',
+            themeText: 'var(--text)',
+            themeMuted: 'var(--text-muted)',
+            themeBorder: 'var(--border)',
+          }
+        }
+      }
+    }
+  </script>
+
+  <style>
+    :root {
+      /* Scaling Multiplier Architecture: Unified vs Independent */
+      --scale-mode: unified;
+      --scale-factor: 1.0;
+      --scale-headings: 1.0;
+      --scale-body: 1.0;
+      --scale-code: 1.0;
+      --scale-spacing: 1.0;
+
+      /* Effective Multipliers */
+      --scale-headings-eff: 1.0;
+      --scale-body-eff: 1.0;
+      --scale-code-eff: 1.0;
+      --scale-spacing-eff: 1.0;
+
+      --bg: ${theme.palette.bg};
+      --bg-secondary: ${theme.palette.bgSecondary || theme.palette.bg};
+      --primary: ${theme.palette.primary};
+      --accent: ${theme.palette.accent || theme.palette.primary};
+      --text: ${theme.palette.text};
+      --text-muted: ${theme.palette.textMuted};
+      --border: ${theme.palette.border || "rgba(0, 0, 0, 0.12)"};
+      --font-display: ${theme.typography.display};
+      --font-body: ${theme.typography.body};
+      --font-code: ${theme.typography.code || "monospace"};
+
+      /* Dynamic Typography calculated from effective multipliers */
+      --font-size-xs: calc(14px * var(--scale-code-eff));
+      --font-size-sm: calc(16px * var(--scale-code-eff));
+      --font-size-base: calc(18px * var(--scale-body-eff));
+      --font-size-lg: calc(20px * var(--scale-body-eff));
+      --font-size-xl: calc(22px * var(--scale-body-eff));
+      --font-size-2xl: calc(26px * var(--scale-body-eff));
+      --font-size-3xl: calc(32px * var(--scale-headings-eff));
+      --font-size-4xl: calc(38px * var(--scale-headings-eff));
+      --font-size-5xl: calc(46px * var(--scale-headings-eff));
+      --font-size-6xl: calc(58px * var(--scale-headings-eff));
+      --font-size-7xl: calc(72px * var(--scale-headings-eff));
+      --font-size-8xl: calc(96px * var(--scale-headings-eff));
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background-color: #050507;
+      font-family: var(--font-body);
+      color: var(--text);
+      user-select: none;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    #viewport {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #050507;
+      overflow: hidden;
+    }
+
+    .slide-canvas {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 1920px;
+      height: 1080px;
+      transform-origin: center center;
+      background-color: var(--bg);
+      overflow: hidden;
+      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
+      border-radius: 4px;
+    }
+
+    .slide-page {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: none;
+      opacity: 0;
+      transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .slide-page.active {
+      display: block;
+      opacity: 1;
+    }
+
+    /* Top Progress Bar */
+    #progress-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 5px;
+      background-color: var(--primary);
+      transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+      z-index: 50;
+    }
+
+    /* Floating Navigation Controls */
+    #controls {
+      position: absolute;
+      bottom: 28px;
+      right: 28px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: rgba(15, 15, 20, 0.75);
+      backdrop-filter: blur(16px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      border-radius: 9999px;
+      padding: 8px 20px;
+      z-index: 100;
+      opacity: 0;
+      transition: opacity 0.25s ease;
+    }
+
+    body:hover #controls {
+      opacity: 1;
+    }
+
+    .control-btn {
+      background: transparent;
+      border: none;
+      color: #ffffff;
+      cursor: pointer;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 6px;
+      border-radius: 8px;
+      transition: background-color 0.15s, transform 0.1s;
+    }
+
+    .control-btn:hover {
+      background: rgba(255, 255, 255, 0.2);
+      transform: scale(1.08);
+    }
+
+    #slide-counter {
+      color: #ffffff;
+      font-size: 15px;
+      font-family: var(--font-code);
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      padding: 0 4px;
+    }
+
+    /* Interactive Quiz Styling */
+    .quiz-option {
+      cursor: pointer;
+      user-select: none;
+      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .quiz-option:hover {
+      transform: translateY(-2px);
+      border-color: var(--primary) !important;
+      box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.15);
+    }
+
+    .quiz-option.selected {
+      border-color: var(--primary) !important;
+      box-shadow: 0 0 0 3px var(--primary);
+    }
+
+    .quiz-option.selected .opt-badge {
+      background-color: var(--primary) !important;
+      color: #ffffff !important;
+      border-color: var(--primary) !important;
+    }
+
+    .quiz-explanation {
+      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    /* \u2500\u2500 WYSIWYG Inline Editing (Level 1) Styles \u2500\u2500 */
+    .edit-hotzone {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 90px;
+      height: 90px;
+      z-index: 9999;
+      cursor: pointer;
+    }
+
+    .edit-toggle {
+      position: fixed;
+      top: 24px;
+      left: 24px;
+      z-index: 10000;
+      background: rgba(15, 15, 20, 0.85);
+      backdrop-filter: blur(14px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 9999px;
+      color: #ffffff;
+      padding: 7px 16px;
+      font-size: 14px;
+      font-family: var(--font-body);
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s;
+    }
+
+    .edit-toggle:hover {
+      background: rgba(255, 255, 255, 0.2);
+      transform: scale(1.04);
+    }
+
+    .edit-toggle.show,
+    .edit-toggle.active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .edit-toggle.active {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: #ffffff;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+    }
+
+    #edit-bar {
+      position: fixed;
+      bottom: 28px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(15, 15, 20, 0.92);
+      backdrop-filter: blur(16px);
+      border: 1px solid rgba(255, 255, 255, 0.22);
+      border-radius: 9999px;
+      padding: 6px 18px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      z-index: 10000;
+      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
+      animation: editBarSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @keyframes editBarSlideUp {
+      from { opacity: 0; transform: translate(-50%, 15px); }
+      to { opacity: 1; transform: translate(-50%, 0); }
+    }
+
+    .edit-bar-btn {
+      background: transparent;
+      border: none;
+      color: #ffffff;
+      font-size: 14px;
+      font-weight: 600;
+      padding: 6px 12px;
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: background 0.15s, transform 0.1s;
+    }
+
+    .edit-bar-btn:hover {
+      background: rgba(255, 255, 255, 0.2);
+      transform: translateY(-1px);
+    }
+
+    .edit-bar-btn.save-btn {
+      background: var(--primary);
+      color: #ffffff;
+    }
+    .edit-bar-btn.save-btn:hover {
+      filter: brightness(1.12);
+    }
+
+    .edit-bar-divider {
+      width: 1px;
+      height: 20px;
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    /* Editable active styles */
+    body.edit-mode-active [contenteditable="true"] {
+      outline: 1px dashed rgba(100, 149, 237, 0.35);
+      outline-offset: 3px;
+      cursor: text;
+      border-radius: 4px;
+    }
+
+    body.edit-mode-active [contenteditable="true"]:hover {
+      outline: 2px dashed var(--primary);
+    }
+
+    body.edit-mode-active [contenteditable="true"]:focus {
+      outline: 2px solid var(--primary);
+      background: rgba(100, 149, 237, 0.08);
+    }
+
+    /* \u2500\u2500\u2500 Floating Scale Tuning Panel (Unified vs Independent) \u2500\u2500\u2500 */
+    #scale-panel {
+      position: fixed;
+      bottom: 82px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 390px;
+      background: rgba(18, 18, 26, 0.94);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 16px;
+      padding: 16px 20px;
+      z-index: 10002;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
+      color: #f4f4f5;
+      font-family: var(--font-body);
+      animation: scalePanelPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    @keyframes scalePanelPop {
+      from { opacity: 0; transform: translate(-50%, 10px) scale(0.97); }
+      to { opacity: 1; transform: translate(-50%, 0) scale(1); }
+    }
+
+    .scale-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 14px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+    }
+
+    .scale-panel-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 700;
+      letter-spacing: -0.01em;
+      color: #ffffff;
+      text-transform: uppercase;
+    }
+
+    .scale-mode-switch {
+      display: flex;
+      background: rgba(0, 0, 0, 0.35);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 9999px;
+      padding: 2px;
+      gap: 2px;
+    }
+
+    .mode-tab {
+      background: transparent;
+      border: none;
+      color: #a1a1aa;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 3px 10px;
+      border-radius: 9999px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .mode-tab.active {
+      background: var(--primary);
+      color: #ffffff;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+    }
+
+    .scale-panel-close {
+      background: transparent;
+      border: none;
+      color: #71717a;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      transition: color 0.15s, background 0.15s;
+    }
+
+    .scale-panel-close:hover {
+      color: #ffffff;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .scale-slider-row {
+      margin-bottom: 12px;
+    }
+
+    .scale-slider-row:last-child {
+      margin-bottom: 0;
+    }
+
+    .scale-slider-label-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12px;
+      font-weight: 500;
+      color: #d4d4d8;
+      margin-bottom: 5px;
+    }
+
+    .scale-badge {
+      font-family: var(--font-code);
+      font-size: 11px;
+      font-weight: 600;
+      background: rgba(255, 255, 255, 0.1);
+      padding: 1px 6px;
+      border-radius: 4px;
+      color: #38bdf8;
+    }
+
+    .scale-range-slider {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 100%;
+      height: 6px;
+      border-radius: 3px;
+      background: rgba(255, 255, 255, 0.18);
+      outline: none;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .scale-range-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--primary);
+      cursor: pointer;
+      box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+      transition: transform 0.1s;
+    }
+
+    .scale-range-slider::-webkit-slider-thumb:hover {
+      transform: scale(1.2);
+    }
+
+    .density-presets {
+      display: flex;
+      gap: 8px;
+      margin-top: 14px;
+    }
+
+    .density-chip {
+      flex: 1;
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 8px;
+      color: #d4d4d8;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 6px 0;
+      cursor: pointer;
+      text-align: center;
+      transition: all 0.15s ease;
+    }
+
+    .density-chip:hover {
+      background: rgba(255, 255, 255, 0.12);
+      color: #ffffff;
+    }
+
+    .density-chip.active {
+      background: rgba(56, 189, 248, 0.2);
+      border-color: #38bdf8;
+      color: #38bdf8;
+    }
+
+    .scale-independent-footer {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 12px;
+      padding-top: 10px;
+      border-top: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .btn-reset-scales {
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      border-radius: 6px;
+      color: #a1a1aa;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 4px 10px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .btn-reset-scales:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #ffffff;
+      border-color: rgba(255, 255, 255, 0.3);
+    }
+
+    /* \u2500\u2500\u2500 Step-by-Step Reveal (Animation Steps / Build-In) \u2500\u2500\u2500 */
+    .step-reveal,
+    [data-step],
+    [data-reveal],
+    [data-click],
+    .v-click {
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      pointer-events: none;
+    }
+
+    .step-reveal.revealed,
+    [data-step].revealed,
+    [data-reveal].revealed,
+    [data-click].revealed,
+    .v-click.visible,
+    body.is-editing .step-reveal,
+    body.is-editing [data-step],
+    body.is-editing [data-reveal],
+    body.is-editing [data-click],
+    body.is-editing .v-click,
+    body.mode-deck .step-reveal,
+    body.mode-deck [data-step],
+    body.mode-deck [data-reveal],
+    body.mode-deck [data-click],
+    body.mode-deck .v-click {
+      opacity: 1 !important;
+      transform: translateY(0) !important;
+      pointer-events: auto !important;
+    }
+
+    /* \u2500\u2500\u2500 Deck Mode (Continuous Vertical Scroll) \u2500\u2500\u2500 */
+    body.mode-deck {
+      overflow-y: auto !important;
+      height: auto !important;
+      min-height: 100vh;
+      background-color: #08080c !important;
+      user-select: auto !important;
+    }
+
+    body.mode-deck #viewport {
+      position: relative !important;
+      width: 100% !important;
+      height: auto !important;
+      min-height: 100vh;
+      overflow-y: visible !important;
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: center !important;
+      padding: 60px 24px 140px 24px !important;
+      gap: 36px !important;
+      background-color: transparent !important;
+    }
+
+    body.mode-deck .slide-canvas {
+      position: relative !important;
+      top: auto !important;
+      left: auto !important;
+      transform: none !important;
+      width: 100% !important;
+      max-width: 1200px !important;
+      height: auto !important;
+      aspect-ratio: 16 / 9 !important;
+      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
+      border: 1px solid rgba(255, 255, 255, 0.1) !important;
+      border-radius: 8px !important;
+    }
+
+    body.mode-deck .slide-page {
+      display: block !important;
+      opacity: 1 !important;
+      position: relative !important;
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    /* Deck Notes Card under each slide */
+    .deck-notes-card {
+      display: none;
+      width: 100%;
+      max-width: 1200px;
+      margin-top: -16px;
+      margin-bottom: 24px;
+      background: rgba(20, 20, 28, 0.95);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-left: 4px solid var(--primary);
+      border-radius: 8px;
+      padding: 16px 22px;
+      color: #e4e4e7;
+      font-size: 14px;
+      line-height: 1.65;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+    }
+
+    .deck-notes-card-header {
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--primary);
+      margin-bottom: 6px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    body.mode-deck .deck-notes-card,
+    body.show-deck-notes .deck-notes-card {
+      display: block;
+    }
+
+    /* \u2500\u2500\u2500 Presenter Drawer (In-Page) \u2500\u2500\u2500 */
+    #presenter-drawer {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      max-height: 380px;
+      background: rgba(14, 14, 20, 0.96);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      border-top: 1px solid rgba(255, 255, 255, 0.18);
+      border-top-left-radius: 18px;
+      border-top-right-radius: 18px;
+      padding: 18px 28px 24px 28px;
+      z-index: 10005;
+      box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.7);
+      color: #f4f4f5;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      transform: translateY(100%);
+      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    #presenter-drawer.open {
+      transform: translateY(0);
+    }
+
+    .presenter-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      padding-bottom: 12px;
+    }
+
+    .presenter-meta-group {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+    }
+
+    .presenter-timer-badge {
+      font-family: var(--font-code);
+      font-size: 15px;
+      font-weight: 700;
+      color: #38bdf8;
+      background: rgba(56, 189, 248, 0.12);
+      border: 1px solid rgba(56, 189, 248, 0.3);
+      padding: 3px 10px;
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .presenter-notes-box {
+      flex: 1;
+      overflow-y: auto;
+      font-size: 16px;
+      line-height: 1.7;
+      color: #f1f5f9;
+      background: rgba(0, 0, 0, 0.25);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 8px;
+      padding: 14px 18px;
+      max-height: 220px;
+      user-select: text;
+    }
+
+    /* \u2500\u2500\u2500 Print Modal / Dialog \u2500\u2500\u2500 */
+    #print-modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(0, 0, 0, 0.65);
+      backdrop-filter: blur(8px);
+      z-index: 10010;
+      display: none;
+      align-items: center;
+      justify-content: center;
+    }
+
+    #print-modal.open {
+      display: flex;
+    }
+
+    .print-dialog-card {
+      width: 440px;
+      background: #181822;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 16px;
+      padding: 24px;
+      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
+      color: #ffffff;
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
+    }
+
+    .print-dialog-title {
+      font-size: 17px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .print-option-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      background: rgba(255, 255, 255, 0.05);
+      padding: 12px 14px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .print-dialog-actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+
+    /* \u2500\u2500\u2500 Controls Extra Buttons & Badges \u2500\u2500\u2500 */
+    .step-badge {
+      font-family: var(--font-code);
+      font-size: 11px;
+      font-weight: 600;
+      background: rgba(255, 255, 255, 0.12);
+      color: #a5f3fc;
+      padding: 2px 7px;
+      border-radius: 4px;
+      display: none;
+    }
+
+    .control-divider {
+      width: 1px;
+      height: 16px;
+      background: rgba(255, 255, 255, 0.18);
+      margin: 0 2px;
+    }
+
+    /* \u2500\u2500\u2500 Print Engine (@media print) \u2500\u2500\u2500 */
+    @media print {
+      @page {
+        size: landscape;
+        margin: 0;
+      }
+
+      html, body {
+        width: 100% !important;
+        height: auto !important;
+        background: #ffffff !important;
+        color: #000000 !important;
+        overflow: visible !important;
+        user-select: text !important;
+      }
+
+      #controls,
+      #edit-bar,
+      #scale-panel,
+      #progress-bar,
+      .edit-hotzone,
+      .edit-toggle,
+      #presenter-drawer,
+      #print-modal {
+        display: none !important;
+      }
+
+      #viewport {
+        position: static !important;
+        width: 100% !important;
+        height: auto !important;
+        display: block !important;
+        padding: 0 !important;
+        background: transparent !important;
+        overflow: visible !important;
+      }
+
+      .slide-canvas {
+        position: relative !important;
+        top: auto !important;
+        left: auto !important;
+        transform: none !important;
+        width: 100vw !important;
+        height: 56.25vw !important; /* 16:9 ratio */
+        max-height: 100vh !important;
+        margin: 0 auto !important;
+        page-break-inside: avoid !important;
+        break-inside: avoid !important;
+        page-break-after: always !important;
+        break-after: page !important;
+        box-shadow: none !important;
+        border: none !important;
+        border-radius: 0 !important;
+        background-color: var(--bg) !important;
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+      }
+
+      .slide-page {
+        display: block !important;
+        opacity: 1 !important;
+        position: relative !important;
+        width: 100% !important;
+        height: 100% !important;
+      }
+
+      /* Step elements always visible when printing */
+      .step-reveal, [data-step], [data-reveal], [data-click], .v-click {
+        opacity: 1 !important;
+        transform: none !important;
+      }
+
+      /* When printing with notes */
+      body.print-with-notes .slide-canvas {
+        height: 48vw !important;
+        page-break-after: avoid !important;
+        break-after: avoid !important;
+      }
+
+      body.print-with-notes .deck-notes-card {
+        display: block !important;
+        page-break-after: always !important;
+        break-after: page !important;
+        background: #f8fafc !important;
+        border: 1px solid #cbd5e1 !important;
+        border-left: 5px solid #2563eb !important;
+        color: #1e293b !important;
+        margin: 12px auto 32px auto !important;
+        width: 95vw !important;
+        box-shadow: none !important;
+        font-size: 12pt !important;
+        line-height: 1.5 !important;
+        padding: 12px 18px !important;
+      }
+
+      body.print-with-notes .deck-notes-card-header {
+        color: #1e40af !important;
+        font-size: 10pt !important;
+      }
+    }
+
+    ${theme.customCss || ""}
+  </style>
+  ${customHeadTags}
+</head>
+<body>
+  <div id="viewport">
+    <div class="slide-canvas" id="canvas">
+      <div id="progress-bar"></div>
+      ${slidesHtml}
+    </div>
+  </div>
+
+  <!-- WYSIWYG Inline Edit UI (Level 1) -->
+  <div class="edit-hotzone" id="edit-hotzone"></div>
+  <button class="edit-toggle" id="btn-edit-toggle" title="Toggle Inline Edit Mode (E)">
+    <span>\u270F\uFE0F</span>
+    <span id="edit-toggle-label">Edit Mode (E)</span>
+  </button>
+
+  <!-- Floating Scale Tuning Panel -->
+  <div id="scale-panel" style="display: none;">
+    <div class="scale-panel-header">
+      <div class="scale-panel-title">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 3 3 21"/><path d="m14 4 6 6"/><path d="m4 14 6 6"/></svg>
+        <span>Scale Tuning</span>
+      </div>
+      <div class="scale-mode-switch">
+        <button type="button" class="mode-tab active" id="tab-mode-unified">Unified</button>
+        <button type="button" class="mode-tab" id="tab-mode-independent">Independent</button>
+      </div>
+      <button type="button" class="scale-panel-close" id="btn-scale-panel-close" title="Close Panel">\u2715</button>
+    </div>
+
+    <!-- Unified Mode Content -->
+    <div id="scale-unified-content" class="scale-content-block">
+      <div class="scale-slider-row">
+        <div class="scale-slider-label-wrap">
+          <span class="scale-slider-label">Scale All</span>
+          <span class="scale-badge" id="badge-scale-factor">100%</span>
+        </div>
+        <input type="range" id="input-scale-factor" min="70" max="150" value="100" class="scale-range-slider" />
+      </div>
+      <div class="density-presets">
+        <button type="button" class="density-chip" data-scale="85">Compact (85%)</button>
+        <button type="button" class="density-chip active" data-scale="100">Default (100%)</button>
+        <button type="button" class="density-chip" data-scale="120">Spacious (120%)</button>
+      </div>
+    </div>
+
+    <!-- Independent Mode Content -->
+    <div id="scale-independent-content" class="scale-content-block" style="display: none;">
+      <div class="scale-slider-row">
+        <div class="scale-slider-label-wrap">
+          <span class="scale-slider-label">Headings (H1\u2013H4)</span>
+          <span class="scale-badge" id="badge-scale-headings">100%</span>
+        </div>
+        <input type="range" id="input-scale-headings" min="70" max="150" value="100" class="scale-range-slider" />
+      </div>
+      <div class="scale-slider-row">
+        <div class="scale-slider-label-wrap">
+          <span class="scale-slider-label">Body &amp; Lists</span>
+          <span class="scale-badge" id="badge-scale-body">100%</span>
+        </div>
+        <input type="range" id="input-scale-body" min="70" max="150" value="100" class="scale-range-slider" />
+      </div>
+      <div class="scale-slider-row">
+        <div class="scale-slider-label-wrap">
+          <span class="scale-slider-label">Code &amp; Notes</span>
+          <span class="scale-badge" id="badge-scale-code">100%</span>
+        </div>
+        <input type="range" id="input-scale-code" min="70" max="150" value="100" class="scale-range-slider" />
+      </div>
+      <div class="scale-slider-row">
+        <div class="scale-slider-label-wrap">
+          <span class="scale-slider-label">Padding &amp; Gaps</span>
+          <span class="scale-badge" id="badge-scale-spacing">100%</span>
+        </div>
+        <input type="range" id="input-scale-spacing" min="70" max="150" value="100" class="scale-range-slider" />
+      </div>
+      <div class="scale-independent-footer">
+        <button type="button" class="btn-reset-scales" id="btn-reset-scales">\u21BA Reset All</button>
+      </div>
+    </div>
+  </div>
+
+  <div id="edit-bar" style="display: none;">
+    <span style="font-size: 13px; font-weight: 700; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.05em; padding-left: 4px;">Editing</span>
+    <div class="edit-bar-divider"></div>
+    <button class="edit-bar-btn" id="btn-format-bold" title="Bold (Cmd+B)"><strong>B</strong></button>
+    <button class="edit-bar-btn" id="btn-format-italic" title="Italic (Cmd+I)"><em>I</em></button>
+    <button class="edit-bar-btn" id="btn-format-underline" title="Underline (Cmd+U)"><u>U</u></button>
+    <div class="edit-bar-divider"></div>
+    <button class="edit-bar-btn" id="btn-editbar-scale" title="Tune Element Scales (Unified / Independent)">
+      <span>\u{1F4D0}</span>
+      <span>Scale</span>
+    </button>
+    <div class="edit-bar-divider"></div>
+    <button class="edit-bar-btn" id="btn-reset-edits" title="Restore original content">\u21BA Reset</button>
+    <button class="edit-bar-btn save-btn" id="btn-save-html" title="Save and download clean HTML file">\u{1F4BE} Save HTML</button>
+    <button class="edit-bar-btn" id="btn-done-edit" title="Done editing (E)">\u2715 Done</button>
+  </div>
+
+  <!-- Presenter Drawer (Quick In-Page Notes & Timer) -->
+  <div id="presenter-drawer">
+    <div class="presenter-drawer-header">
+      <div class="presenter-meta-group">
+        <span style="font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa;">Presenter Console</span>
+        <div class="presenter-timer-badge">
+          <span>\u23F1</span>
+          <span id="presenter-timer-text">00:00</span>
+        </div>
+      </div>
+      <div style="display: flex; align-items: center; gap: 8px;">
+        <button type="button" class="btn-reset-scales" id="btn-open-dual-presenter" title="Open separate synced presenter console window for multi-monitor display">
+          <span>Launch 2nd Window \u2197</span>
+        </button>
+        <button type="button" class="scale-panel-close" id="btn-close-presenter-drawer" title="Close Drawer (P)">\u2715</button>
+      </div>
+    </div>
+    <div class="presenter-notes-box" id="presenter-notes-text">
+      No notes for this slide.
+    </div>
+  </div>
+
+  <!-- Print Configuration Modal -->
+  <div id="print-modal">
+    <div class="print-dialog-card">
+      <div class="print-dialog-title">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
+        <span>Print &amp; Export PDF</span>
+      </div>
+      <label class="print-option-row">
+        <input type="checkbox" id="chk-print-notes" style="width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer;" />
+        <span style="user-select: none;">In k\xE8m ghi ch\xFA gi\u1EA3ng vi\xEAn (Handout / Teacher Notes)</span>
+      </label>
+      <p style="font-size: 12px; color: #a1a1aa; line-height: 1.5; margin: 0;">
+        \u{1F4A1} Ch\u1ECDn trang in Kh\u1ED5 ngang (Landscape), B\u1EADt "Background graphics" trong h\u1ED9p tho\u1EA1i in c\u1EE7a tr\xECnh duy\u1EC7t \u0111\u1EC3 m\xE0u s\u1EAFc hi\u1EC3n th\u1ECB \u0111\xFAng 100%.
+      </p>
+      <div class="print-dialog-actions">
+        <button type="button" class="btn-reset-scales" id="btn-cancel-print">H\u1EE7y</button>
+        <button type="button" class="edit-bar-btn save-btn" id="btn-start-print" style="padding: 6px 16px;">\u{1F5A8}\uFE0F In ngay (Print)</button>
+      </div>
+    </div>
+  </div>
+
+  <div id="controls">
+    <button class="control-btn" id="btn-prev" title="Previous Slide (\u2190)">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>
+    </button>
+    <span id="slide-counter">01 / ${String(slideCount).padStart(2, "0")}</span>
+    <span id="step-badge" class="step-badge">1/1</span>
+    <button class="control-btn" id="btn-next" title="Next Slide (\u2192)">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+    </button>
+    <div class="control-divider"></div>
+    <button class="control-btn" id="btn-controls-presenter" title="Presenter Console &amp; Notes (P)">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
+    </button>
+    <button class="control-btn" id="btn-controls-view" title="Toggle Slide / Deck View (D)">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
+    </button>
+    <button class="control-btn" id="btn-controls-print" title="Print &amp; Export PDF (Cmd+P)">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
+    </button>
+    <button class="control-btn" id="btn-controls-scale" title="Tune Scale (\u{1F4D0})">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 3 3 21"/><path d="m14 4 6 6"/><path d="m4 14 6 6"/></svg>
+    </button>
+    <button class="control-btn" id="btn-fullscreen" title="Toggle Fullscreen (F)">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
+    </button>
+  </div>
+
+  <script>
+    (function() {
+      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 slides = document.querySelectorAll('.slide-page');
+      const progressBar = document.getElementById('progress-bar');
+      const counter = document.getElementById('slide-counter');
+
+      // Edit UI elements
+      const hotzone = document.getElementById('edit-hotzone');
+      const editToggleBtn = document.getElementById('btn-edit-toggle');
+      const editBar = document.getElementById('edit-bar');
+      const btnBold = document.getElementById('btn-format-bold');
+      const btnItalic = document.getElementById('btn-format-italic');
+      const btnUnderline = document.getElementById('btn-format-underline');
+      const btnReset = document.getElementById('btn-reset-edits');
+      const btnSave = document.getElementById('btn-save-html');
+      const btnDone = document.getElementById('btn-done-edit');
+
+      // Scale Panel UI Elements
+      const scalePanel = document.getElementById('scale-panel');
+      const tabModeUnified = document.getElementById('tab-mode-unified');
+      const tabModeIndependent = document.getElementById('tab-mode-independent');
+      const btnScalePanelClose = document.getElementById('btn-scale-panel-close');
+      const scaleUnifiedContent = document.getElementById('scale-unified-content');
+      const scaleIndependentContent = document.getElementById('scale-independent-content');
+
+      const inputScaleFactor = document.getElementById('input-scale-factor');
+      const badgeScaleFactor = document.getElementById('badge-scale-factor');
+      const inputScaleHeadings = document.getElementById('input-scale-headings');
+      const badgeScaleHeadings = document.getElementById('badge-scale-headings');
+      const inputScaleBody = document.getElementById('input-scale-body');
+      const badgeScaleBody = document.getElementById('badge-scale-body');
+      const inputScaleCode = document.getElementById('input-scale-code');
+      const badgeScaleCode = document.getElementById('badge-scale-code');
+      const inputScaleSpacing = document.getElementById('input-scale-spacing');
+      const badgeScaleSpacing = document.getElementById('badge-scale-spacing');
+      const btnResetScales = document.getElementById('btn-reset-scales');
+      const densityChips = document.querySelectorAll('.density-chip');
+
+      const btnEditbarScale = document.getElementById('btn-editbar-scale');
+      const btnControlsScale = document.getElementById('btn-controls-scale');
+
+      // Presenter, Deck & Print UI Elements
+      const stepBadge = document.getElementById('step-badge');
+      const btnPresenter = document.getElementById('btn-controls-presenter');
+      const btnViewMode = document.getElementById('btn-controls-view');
+      const btnPrint = document.getElementById('btn-controls-print');
+      const presenterDrawer = document.getElementById('presenter-drawer');
+      const btnClosePresenterDrawer = document.getElementById('btn-close-presenter-drawer');
+      const btnOpenDualPresenter = document.getElementById('btn-open-dual-presenter');
+      const presenterNotesText = document.getElementById('presenter-notes-text');
+      const printModal = document.getElementById('print-modal');
+      const chkPrintNotes = document.getElementById('chk-print-notes');
+      const btnStartPrint = document.getElementById('btn-start-print');
+      const btnCancelPrint = document.getElementById('btn-cancel-print');
+
+      let isDeckMode = false;
+      let presenterWindow = null;
+      let timerSeconds = 0;
+      let timerInterval = null;
+      let isTimerRunning = false;
+
+      const SCALE_STORAGE_KEY = 'deck_scale_' + encodeURIComponent(document.title.trim() || 'default');
+      let scaleState = {
+        mode: 'unified', // 'unified' | 'independent'
+        factor: 1.0,
+        headings: 1.0,
+        body: 1.0,
+        code: 1.0,
+        spacing: 1.0
+      };
+
+      // Restore saved scale state if present
+      try {
+        const savedScale = localStorage.getItem(SCALE_STORAGE_KEY);
+        if (savedScale) {
+          const parsed = JSON.parse(savedScale);
+          if (parsed && typeof parsed === 'object') {
+            scaleState = Object.assign(scaleState, parsed);
+          }
+        }
+      } catch (e) {}
+
+      // Auto-scale 1920x1080 canvas to fit window
+      function resizeCanvas() {
+        if (isDeckMode) return;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const scaleX = vw / 1920;
+        const scaleY = vh / 1080;
+        const scale = Math.min(scaleX, scaleY);
+        canvas.style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
+      }
+
+      window.addEventListener('resize', resizeCanvas);
+      resizeCanvas();
+
+      function getSlideNotes(slideIndex) {
+        if (slideIndex < 0 || slideIndex >= slides.length) return '';
+        const slide = slides[slideIndex];
+        const rawNotes = slide.getAttribute('data-notes');
+        if (!rawNotes) return '';
+        try {
+          return decodeURIComponent(rawNotes);
+        } catch (e) {
+          return rawNotes;
+        }
+      }
+
+      function renderTimerText() {
+        const mins = String(Math.floor(timerSeconds / 60)).padStart(2, '0');
+        const secs = String(timerSeconds % 60).padStart(2, '0');
+        const str = mins + ':' + secs;
+        const badge = document.getElementById('presenter-timer-text');
+        if (badge) badge.textContent = str;
+        return str;
+      }
+
+      function startTimer() {
+        if (timerInterval) return;
+        isTimerRunning = true;
+        timerInterval = setInterval(() => {
+          timerSeconds++;
+          renderTimerText();
+        }, 1000);
+      }
+
+      function pauseTimer() {
+        if (timerInterval) {
+          clearInterval(timerInterval);
+          timerInterval = null;
+        }
+        isTimerRunning = false;
+      }
+
+      function resetTimer() {
+        pauseTimer();
+        timerSeconds = 0;
+        renderTimerText();
+      }
+
+      // Step-by-Step Reveal (Animation Steps / Build-In)
+      function getSlideSteps(slideIndex) {
+        if (slideIndex < 0 || slideIndex >= slides.length) return [];
+        const slide = slides[slideIndex];
+        let stepEls = Array.from(slide.querySelectorAll('[data-step], [data-reveal], [data-click], .step-reveal, .v-click, .step-item'));
+        if (stepEls.length === 0) {
+          const autoContainers = slide.querySelectorAll('[data-auto-reveal="true"], .auto-reveal, .step-group');
+          autoContainers.forEach(container => {
+            const children = container.querySelectorAll('li, .card-item, .step-card, .compare-col');
+            children.forEach(c => {
+              c.classList.add('step-reveal');
+              stepEls.push(c);
+            });
+          });
+        }
+        return stepEls;
+      }
+
+      function updateStepBadge() {
+        if (!stepBadge) return;
+        if (isDeckMode) {
+          stepBadge.style.display = 'none';
+          return;
+        }
+        const steps = getSlideSteps(currentSlide);
+        if (steps.length === 0) {
+          stepBadge.style.display = 'none';
+          return;
+        }
+        const revealedCount = steps.filter(el => el.classList.contains('revealed') || el.classList.contains('visible')).length;
+        stepBadge.style.display = 'inline-block';
+        stepBadge.textContent = 'Step ' + revealedCount + '/' + steps.length;
+      }
+
+      function stepForward() {
+        if (isEditMode || isDeckMode) {
+          nextSlide();
+          return;
+        }
+        const steps = getSlideSteps(currentSlide);
+        if (steps.length > 0) {
+          const nextUnrevealed = steps.find(el => !el.classList.contains('revealed') && !el.classList.contains('visible'));
+          if (nextUnrevealed) {
+            nextUnrevealed.classList.add('revealed', 'visible');
+            updateStepBadge();
+            broadcastDeckState();
+            return;
+          }
+        }
+        if (currentSlide < TOTAL_SLIDES - 1) {
+          showSlide(currentSlide + 1);
+        }
+      }
+
+      function stepBackward() {
+        if (isEditMode || isDeckMode) {
+          prevSlide();
+          return;
+        }
+        const steps = getSlideSteps(currentSlide);
+        if (steps.length > 0) {
+          const revealedList = steps.filter(el => el.classList.contains('revealed') || el.classList.contains('visible'));
+          if (revealedList.length > 0) {
+            const lastRevealed = revealedList[revealedList.length - 1];
+            lastRevealed.classList.remove('revealed', 'visible');
+            updateStepBadge();
+            broadcastDeckState();
+            return;
+          }
+        }
+        if (currentSlide > 0) {
+          showSlide(currentSlide - 1);
+          const prevSteps = getSlideSteps(currentSlide);
+          prevSteps.forEach(s => s.classList.add('revealed', 'visible'));
+          updateStepBadge();
+          broadcastDeckState();
+        }
+      }
+
+      // Presenter State & Sync
+      const SYNC_CHANNEL_NAME = 'deck_sync_' + encodeURIComponent(document.title.trim() || 'default');
+      let syncChannel = null;
+      try {
+        syncChannel = new BroadcastChannel(SYNC_CHANNEL_NAME);
+        syncChannel.onmessage = function(e) {
+          if (!e.data) return;
+          if (e.data.type === 'COMMAND') {
+            if (e.data.action === 'NEXT') stepForward();
+            else if (e.data.action === 'PREV') stepBackward();
+            else if (e.data.action === 'GOTO' && typeof e.data.index === 'number') showSlide(e.data.index);
+            else if (e.data.action === 'RESET_TIMER') resetTimer();
+            else if (e.data.action === 'TOGGLE_TIMER') {
+              if (isTimerRunning) pauseTimer(); else startTimer();
+            }
+          } else if (e.data.type === 'REQUEST_STATE') {
+            broadcastDeckState();
+          }
+        };
+      } catch (err) {}
+
+      function broadcastDeckState() {
+        const currentNotes = getSlideNotes(currentSlide);
+        const nextNotes = getSlideNotes(currentSlide + 1);
+        const payload = {
+          type: 'STATE_UPDATE',
+          currentSlide: currentSlide,
+          totalSlides: TOTAL_SLIDES,
+          notes: currentNotes,
+          nextNotes: nextNotes,
+          title: document.title,
+          timerSeconds: timerSeconds,
+          timerRunning: isTimerRunning
+        };
+
+        if (syncChannel) {
+          try { syncChannel.postMessage(payload); } catch (e) {}
+        }
+        if (presenterWindow && !presenterWindow.closed) {
+          try { presenterWindow.postMessage(payload, '*'); } catch (e) {}
+        }
+        updatePresenterDrawerUI();
+      }
+
+      function updatePresenterDrawerUI() {
+        if (!presenterNotesText) return;
+        const notes = getSlideNotes(currentSlide);
+        if (notes && notes.trim()) {
+          presenterNotesText.innerHTML = notes.replace(/
+/g, '<br/>');
+        } else {
+          presenterNotesText.innerHTML = '<span style="opacity: 0.5; font-style: italic;">No speaker notes for Slide ' + (currentSlide + 1) + '.</span>';
+        }
+      }
+
+      function togglePresenterDrawer() {
+        if (!presenterDrawer) return;
+        const isOpen = presenterDrawer.classList.toggle('open');
+        if (isOpen) {
+          startTimer();
+          updatePresenterDrawerUI();
+        }
+      }
+
+      function openPresenterConsole() {
+        startTimer();
+        const popupName = 'PresenterConsole_' + encodeURIComponent(document.title.replace(/W/g, ''));
+        const win = window.open('', popupName, 'width=1100,height=720,menubar=no,toolbar=no,location=no,status=no');
+        if (!win) {
+          togglePresenterDrawer();
+          return;
+        }
+        presenterWindow = win;
+
+        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>';
+
+        win.document.open();
+        win.document.write(consoleHtml);
+        win.document.close();
+      }
+
+      // Deck Mode & Print Engine
+      function ensureDeckNotesCards() {
+        slides.forEach((slide, idx) => {
+          const notes = getSlideNotes(idx);
+          let existingCard = slide.parentElement.querySelector('.deck-notes-card[data-for-slide="' + idx + '"]');
+          if (!existingCard && notes) {
+            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>';
+            slide.after(card);
+          }
+        });
+      }
+
+      function toggleDeckMode(force) {
+        isDeckMode = typeof force === 'boolean' ? force : !isDeckMode;
+        document.body.classList.toggle('mode-deck', isDeckMode);
+        if (isDeckMode) {
+          ensureDeckNotesCards();
+          document.querySelectorAll('.step-reveal, [data-step], [data-reveal], [data-click], .v-click').forEach(el => {
+            el.classList.add('revealed', 'visible');
+          });
+        } else {
+          resizeCanvas();
+        }
+        updateStepBadge();
+      }
+
+      function openPrintModal() {
+        if (printModal) printModal.classList.add('open');
+      }
+
+      function closePrintModal() {
+        if (printModal) printModal.classList.remove('open');
+      }
+
+      function executePrint() {
+        closePrintModal();
+        const withNotes = chkPrintNotes ? chkPrintNotes.checked : false;
+        document.body.classList.toggle('print-with-notes', withNotes);
+        ensureDeckNotesCards();
+        document.querySelectorAll('.step-reveal, [data-step], [data-reveal], [data-click], .v-click').forEach(el => {
+          el.classList.add('revealed', 'visible');
+        });
+        setTimeout(() => {
+          window.print();
+        }, 100);
+      }
+
+      // Show slide by index
+      function showSlide(index) {
+        if (index < 0) index = 0;
+        if (index >= TOTAL_SLIDES) index = TOTAL_SLIDES - 1;
+        currentSlide = index;
+
+        slides.forEach((s, idx) => {
+          if (idx === currentSlide) {
+            s.classList.add('active');
+          } else {
+            s.classList.remove('active');
+          }
+        });
+
+        // Reset step state for newly shown slide
+        const steps = getSlideSteps(currentSlide);
+        steps.forEach(s => s.classList.remove('revealed', 'visible'));
+        updateStepBadge();
+        updatePresenterDrawerUI();
+        broadcastDeckState();
+
+        // Update progress bar
+        const pct = TOTAL_SLIDES > 1 ? ((currentSlide) / (TOTAL_SLIDES - 1)) * 100 : 100;
+        if (progressBar) progressBar.style.width = pct + '%';
+
+        // Update counter
+        if (counter) {
+          const curStr = String(currentSlide + 1).padStart(2, '0');
+          const totStr = String(TOTAL_SLIDES).padStart(2, '0');
+          counter.textContent = curStr + ' / ' + totStr;
+        }
+
+        // Send postMessage to parent window if embedded in iframe
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({
+            type: 'PRESENTATION_SLIDE_CHANGE',
+            currentIndex: currentSlide,
+            totalSlides: TOTAL_SLIDES
+          }, '*');
+        }
+      }
+
+      function nextSlide() {
+        showSlide(currentSlide + 1);
+      }
+
+      function prevSlide() {
+        showSlide(currentSlide - 1);
+      }
+
+      function toggleFullscreen() {
+        if (!document.fullscreenElement) {
+          document.documentElement.requestFullscreen().catch(() => {});
+        } else {
+          document.exitFullscreen().catch(() => {});
+        }
+      }
+
+      // \u2500\u2500\u2500 Scale Architecture Controller (Unified vs Independent) \u2500\u2500\u2500
+      function applyScales() {
+        const root = document.documentElement;
+        root.style.setProperty('--scale-mode', scaleState.mode);
+        root.style.setProperty('--scale-factor', scaleState.factor);
+        root.style.setProperty('--scale-headings', scaleState.headings);
+        root.style.setProperty('--scale-body', scaleState.body);
+        root.style.setProperty('--scale-code', scaleState.code);
+        root.style.setProperty('--scale-spacing', scaleState.spacing);
+
+        const isUnified = scaleState.mode === 'unified';
+        const effHeadings = isUnified ? scaleState.factor : scaleState.headings;
+        const effBody = isUnified ? scaleState.factor : scaleState.body;
+        const effCode = isUnified ? scaleState.factor : scaleState.code;
+        const effSpacing = isUnified ? scaleState.factor : scaleState.spacing;
+
+        root.style.setProperty('--scale-headings-eff', effHeadings);
+        root.style.setProperty('--scale-body-eff', effBody);
+        root.style.setProperty('--scale-code-eff', effCode);
+        root.style.setProperty('--scale-spacing-eff', effSpacing);
+
+        // Synchronize UI widgets
+        if (inputScaleFactor) inputScaleFactor.value = Math.round(scaleState.factor * 100);
+        if (badgeScaleFactor) badgeScaleFactor.textContent = Math.round(scaleState.factor * 100) + '%';
+
+        if (inputScaleHeadings) inputScaleHeadings.value = Math.round(scaleState.headings * 100);
+        if (badgeScaleHeadings) badgeScaleHeadings.textContent = Math.round(scaleState.headings * 100) + '%';
+
+        if (inputScaleBody) inputScaleBody.value = Math.round(scaleState.body * 100);
+        if (badgeScaleBody) badgeScaleBody.textContent = Math.round(scaleState.body * 100) + '%';
+
+        if (inputScaleCode) inputScaleCode.value = Math.round(scaleState.code * 100);
+        if (badgeScaleCode) badgeScaleCode.textContent = Math.round(scaleState.code * 100) + '%';
+
+        if (inputScaleSpacing) inputScaleSpacing.value = Math.round(scaleState.spacing * 100);
+        if (badgeScaleSpacing) badgeScaleSpacing.textContent = Math.round(scaleState.spacing * 100) + '%';
+
+        // Update density chips
+        densityChips.forEach(chip => {
+          const s = parseInt(chip.getAttribute('data-scale'), 10);
+          chip.classList.toggle('active', isUnified && Math.round(scaleState.factor * 100) === s);
+        });
+
+        // Save to localStorage
+        try {
+          localStorage.setItem(SCALE_STORAGE_KEY, JSON.stringify(scaleState));
+        } catch (e) {}
+
+        // Notify parent React app if embedded
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({
+            type: 'SLIDE_SCALE_CHANGED',
+            scaleState: Object.assign({}, scaleState),
+            effective: {
+              headings: effHeadings,
+              body: effBody,
+              code: effCode,
+              spacing: effSpacing
+            }
+          }, '*');
+        }
+      }
+
+      function setScaleMode(mode) {
+        scaleState.mode = mode;
+        if (tabModeUnified && tabModeIndependent) {
+          tabModeUnified.classList.toggle('active', mode === 'unified');
+          tabModeIndependent.classList.toggle('active', mode === 'independent');
+        }
+        if (scaleUnifiedContent && scaleIndependentContent) {
+          scaleUnifiedContent.style.display = mode === 'unified' ? 'block' : 'none';
+          scaleIndependentContent.style.display = mode === 'independent' ? 'block' : 'none';
+        }
+        applyScales();
+      }
+
+      function toggleScalePanel(show) {
+        if (!scalePanel) return;
+        const currentOpen = scalePanel.style.display !== 'none';
+        const willOpen = show !== undefined ? show : !currentOpen;
+        scalePanel.style.display = willOpen ? 'block' : 'none';
+        if (willOpen) {
+          setScaleMode(scaleState.mode);
+        }
+      }
+
+      // \u2500\u2500\u2500 Scale Panel Event Listeners \u2500\u2500\u2500
+      if (tabModeUnified) tabModeUnified.addEventListener('click', () => setScaleMode('unified'));
+      if (tabModeIndependent) tabModeIndependent.addEventListener('click', () => setScaleMode('independent'));
+      if (btnScalePanelClose) btnScalePanelClose.addEventListener('click', () => toggleScalePanel(false));
+
+      if (inputScaleFactor) {
+        inputScaleFactor.addEventListener('input', (e) => {
+          scaleState.factor = parseFloat(e.target.value) / 100;
+          applyScales();
+        });
+      }
+      if (inputScaleHeadings) {
+        inputScaleHeadings.addEventListener('input', (e) => {
+          scaleState.headings = parseFloat(e.target.value) / 100;
+          applyScales();
+        });
+      }
+      if (inputScaleBody) {
+        inputScaleBody.addEventListener('input', (e) => {
+          scaleState.body = parseFloat(e.target.value) / 100;
+          applyScales();
+        });
+      }
+      if (inputScaleCode) {
+        inputScaleCode.addEventListener('input', (e) => {
+          scaleState.code = parseFloat(e.target.value) / 100;
+          applyScales();
+        });
+      }
+      if (inputScaleSpacing) {
+        inputScaleSpacing.addEventListener('input', (e) => {
+          scaleState.spacing = parseFloat(e.target.value) / 100;
+          applyScales();
+        });
+      }
+
+      densityChips.forEach(chip => {
+        chip.addEventListener('click', () => {
+          const val = parseInt(chip.getAttribute('data-scale'), 10) / 100;
+          scaleState.factor = val;
+          setScaleMode('unified');
+        });
+      });
+
+      if (btnResetScales) {
+        btnResetScales.addEventListener('click', () => {
+          scaleState.factor = 1.0;
+          scaleState.headings = 1.0;
+          scaleState.body = 1.0;
+          scaleState.code = 1.0;
+          scaleState.spacing = 1.0;
+          applyScales();
+        });
+      }
+
+      if (btnEditbarScale) btnEditbarScale.addEventListener('click', () => toggleScalePanel());
+      if (btnControlsScale) btnControlsScale.addEventListener('click', () => toggleScalePanel());
+
+      // \u2500\u2500\u2500 Level 1 Inline Editing Controller \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      function toggleEditMode(force) {
+        isEditMode = force !== undefined ? force : !isEditMode;
+
+        document.body.classList.toggle('edit-mode-active', isEditMode);
+        editToggleBtn.classList.toggle('active', isEditMode);
+        editBar.style.display = isEditMode ? 'flex' : 'none';
+
+        const editableSelectors = 'h1, h2, h3, h4, p, li, span, pre code, .opt-badge';
+        const targets = canvas.querySelectorAll(editableSelectors);
+
+        targets.forEach(el => {
+          if (isEditMode) {
+            el.setAttribute('contenteditable', 'true');
+            el.setAttribute('spellcheck', 'false');
+          } else {
+            el.removeAttribute('contenteditable');
+          }
+        });
+
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({
+            type: 'SLIDE_EDIT_MODE_CHANGED',
+            isEditMode: isEditMode
+          }, '*');
+        }
+      }
+
+      // Hotzone hover with 400ms delay timeout (frontend-slides standard)
+      let hideHotzoneTimeout = null;
+      if (hotzone && editToggleBtn) {
+        hotzone.addEventListener('mouseenter', () => {
+          clearTimeout(hideHotzoneTimeout);
+          editToggleBtn.classList.add('show');
+        });
+        hotzone.addEventListener('mouseleave', () => {
+          hideHotzoneTimeout = setTimeout(() => {
+            if (!isEditMode) editToggleBtn.classList.remove('show');
+          }, 400);
+        });
+        editToggleBtn.addEventListener('mouseenter', () => {
+          clearTimeout(hideHotzoneTimeout);
+        });
+        editToggleBtn.addEventListener('mouseleave', () => {
+          hideHotzoneTimeout = setTimeout(() => {
+            if (!isEditMode) editToggleBtn.classList.remove('show');
+          }, 400);
+        });
+        hotzone.addEventListener('click', () => toggleEditMode());
+        editToggleBtn.addEventListener('click', () => toggleEditMode());
+      }
+
+      // Format actions
+      if (btnBold) btnBold.addEventListener('click', () => document.execCommand('bold'));
+      if (btnItalic) btnItalic.addEventListener('click', () => document.execCommand('italic'));
+      if (btnUnderline) btnUnderline.addEventListener('click', () => document.execCommand('underline'));
+      if (btnDone) btnDone.addEventListener('click', () => toggleEditMode(false));
+
+      // Reset action
+      if (btnReset) {
+        btnReset.addEventListener('click', () => {
+          if (confirm('Are you sure you want to reset all edits back to original?')) {
+            canvas.innerHTML = originalCanvasHtml;
+            try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}
+            showSlide(currentSlide);
+            if (isEditMode) toggleEditMode(true);
+          }
+        });
+      }
+
+      // Auto-save to LocalStorage on edit
+      let saveTimer = null;
+      canvas.addEventListener('input', () => {
+        if (!isEditMode) return;
+        clearTimeout(saveTimer);
+        saveTimer = setTimeout(() => {
+          try {
+            localStorage.setItem(STORAGE_KEY, canvas.innerHTML);
+          } catch (e) {}
+        }, 500);
+      });
+
+      // Restore from localStorage if present
+      try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (saved && saved.trim()) {
+          canvas.innerHTML = saved;
+        }
+      } catch (e) {}
+
+      // Save & Clean HTML Export
+      function exportAndSaveHtml() {
+        const wasEditing = isEditMode;
+        if (wasEditing) toggleEditMode(false);
+        if (scalePanel) scalePanel.style.display = 'none';
+
+        // Take snapshot of full HTML
+        let cleanHtml = '<!DOCTYPE html>
+' + document.documentElement.outerHTML;
+
+        // Clean any temporary runtime inline styles or attributes
+        cleanHtml = cleanHtml
+          .replace(/contenteditable="true"/g, '')
+          .replace(/spellcheck="false"/g, '')
+          .replace(/edit-mode-active/g, '')
+          .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);
+
+        // Create Blob and trigger download
+        const blob = new Blob([cleanHtml], { type: 'text/html;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        const filename = (document.title.replace(/[^a-zA-Z0-9_-]/g, '_').toLowerCase() || 'presentation') + '.html';
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+
+        // Notify parent React frame if embedded
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({
+            type: 'SLIDE_HTML_SAVED',
+            html: cleanHtml,
+            filename: filename
+          }, '*');
+        }
+
+        if (wasEditing) toggleEditMode(true);
+      }
+
+      if (btnSave) btnSave.addEventListener('click', exportAndSaveHtml);
+
+      // Keyboard navigation & Shortcuts
+      window.addEventListener('keydown', function(e) {
+        // Guard: If typing inside contenteditable, allow normal cursor movement and typing
+        if (e.target.isContentEditable || e.target.getAttribute('contenteditable') === 'true') {
+          if (e.key === 'Escape') {
+            e.target.blur();
+          }
+          return;
+        }
+
+        // Shortcut: E key toggles edit mode
+        if (e.key === 'e' || e.key === 'E') {
+          e.preventDefault();
+          toggleEditMode();
+          return;
+        }
+
+        // Shortcut: Cmd+S / Ctrl+S saves HTML
+        if ((e.metaKey || e.ctrlKey) && (e.key === 's' || e.key === 'S')) {
+          e.preventDefault();
+          exportAndSaveHtml();
+          return;
+        }
+
+        // Shortcut: Cmd+P / Ctrl+P opens Print & PDF dialog
+        if ((e.metaKey || e.ctrlKey) && (e.key === 'p' || e.key === 'P')) {
+          e.preventDefault();
+          openPrintModal();
+          return;
+        }
+
+        // Shortcut: P toggles Presenter Console / Drawer
+        if (e.key === 'p' || e.key === 'P') {
+          e.preventDefault();
+          togglePresenterDrawer();
+          return;
+        }
+
+        // Shortcut: D toggles Deck Mode (continuous scroll)
+        if (e.key === 'd' || e.key === 'D') {
+          e.preventDefault();
+          toggleDeckMode();
+          return;
+        }
+
+        if (['ArrowRight', 'ArrowDown', 'Space', 'PageDown'].includes(e.code)) {
+          e.preventDefault();
+          stepForward();
+        } else if (['ArrowLeft', 'ArrowUp', 'PageUp'].includes(e.code)) {
+          e.preventDefault();
+          stepBackward();
+        } else if (e.code === 'KeyF') {
+          e.preventDefault();
+          toggleFullscreen();
+        } else if (e.code === 'Home') {
+          e.preventDefault();
+          showSlide(0);
+        } else if (e.code === 'End') {
+          e.preventDefault();
+          showSlide(TOTAL_SLIDES - 1);
+        }
+      });
+
+      // Canvas click to advance step / slide in Presentation mode
+      document.getElementById('viewport').addEventListener('click', function(e) {
+        if (isEditMode || isDeckMode) return;
+        if (e.target.closest('#controls, #edit-bar, #scale-panel, #presenter-drawer, #print-modal, .edit-toggle, .quiz-option, button, a, input, select')) return;
+        stepForward();
+      });
+
+      // Quiz interactivity: click option to toggle selected state
+      document.addEventListener('click', function(e) {
+        if (isEditMode) return; // In edit mode, let user click to edit text instead of quiz logic
+        const option = e.target.closest('.quiz-option');
+        if (option) {
+          const parentGrid = option.parentElement;
+          if (parentGrid) {
+            parentGrid.querySelectorAll('.quiz-option').forEach(el => el.classList.remove('selected'));
+          }
+          option.classList.add('selected');
+
+          const currentSlideEl = option.closest('.slide-page');
+          if (currentSlideEl) {
+            const exp = currentSlideEl.querySelector('.quiz-explanation');
+            if (exp) {
+              exp.style.opacity = '1';
+              exp.style.filter = 'none';
+            }
+          }
+        }
+      });
+
+      // Controls click
+      document.getElementById('btn-next').addEventListener('click', stepForward);
+      document.getElementById('btn-prev').addEventListener('click', stepBackward);
+      document.getElementById('btn-fullscreen').addEventListener('click', toggleFullscreen);
+
+      if (btnPresenter) btnPresenter.addEventListener('click', togglePresenterDrawer);
+      if (btnViewMode) btnViewMode.addEventListener('click', () => toggleDeckMode());
+      if (btnPrint) btnPrint.addEventListener('click', openPrintModal);
+      if (btnClosePresenterDrawer) btnClosePresenterDrawer.addEventListener('click', togglePresenterDrawer);
+      if (btnOpenDualPresenter) btnOpenDualPresenter.addEventListener('click', openPresenterConsole);
+      if (btnStartPrint) btnStartPrint.addEventListener('click', executePrint);
+      if (btnCancelPrint) btnCancelPrint.addEventListener('click', closePrintModal);
+      if (printModal) {
+        printModal.addEventListener('click', function(e) {
+          if (e.target === printModal) closePrintModal();
+        });
+      }
+
+      // Listen for messages from parent container
+      window.addEventListener('message', function(e) {
+        if (!e.data || typeof e.data !== 'object') return;
+        if (e.data.type === 'GOTO_SLIDE' && typeof e.data.index === 'number') {
+          showSlide(e.data.index);
+        } else if (e.data.type === 'NEXT_SLIDE' || e.data.type === 'STEP_FORWARD') {
+          stepForward();
+        } else if (e.data.type === 'PREV_SLIDE' || e.data.type === 'STEP_BACKWARD') {
+          stepBackward();
+        } else if (e.data.type === 'TOGGLE_EDIT_MODE') {
+          toggleEditMode();
+        } else if (e.data.type === 'EXPORT_HTML') {
+          exportAndSaveHtml();
+        } else if (e.data.type === 'TOGGLE_PRESENTER') {
+          togglePresenterDrawer();
+        } else if (e.data.type === 'OPEN_PRESENTER_CONSOLE') {
+          openPresenterConsole();
+        } else if (e.data.type === 'TOGGLE_DECK_MODE') {
+          toggleDeckMode();
+        } else if (e.data.type === 'PRINT_DECK') {
+          executePrint();
+        } else if (e.data.type === 'SET_SCALE') {
+          if (e.data.mode) setScaleMode(e.data.mode);
+          if (typeof e.data.factor === 'number') scaleState.factor = e.data.factor;
+          if (typeof e.data.headings === 'number') scaleState.headings = e.data.headings;
+          if (typeof e.data.body === 'number') scaleState.body = e.data.body;
+          if (typeof e.data.code === 'number') scaleState.code = e.data.code;
+          if (typeof e.data.spacing === 'number') scaleState.spacing = e.data.spacing;
+          applyScales();
+        } else if (e.data.type === 'TOGGLE_SCALE_PANEL') {
+          toggleScalePanel();
+        }
+      });
+
+      // Initial setup
+      applyScales();
+      setScaleMode(scaleState.mode);
+      showSlide(0);
+    })();
+  </script>
+</body>
+</html>`;
+}
+
+// src/html-engine/compiler.ts
+function compileHtmlDeck(deckData, options) {
+  const theme = options?.themeOverride || resolveHtmlTheme(deckData.theme);
+  const slides = deckData.slides || [];
+  const slideCount = Math.max(slides.length, 1);
+  const renderedSlides = slides.map((slide, index) => {
+    const preset = HTML_SLIDE_PRESETS[slide.layoutId] || HTML_SLIDE_PRESETS["hero-cover"];
+    const innerHtml = preset.template(slide.slots || {}, theme);
+    const notesAttr = slide.notes ? ` data-notes="${encodeURIComponent(slide.notes)}"` : "";
+    const customClass = slide.customClass ? ` ${slide.customClass}` : "";
+    return `
+      <!-- Slide ${index + 1}: ${preset.name} -->
+      <section class="slide-page${customClass}" data-index="${index}" data-layout="${preset.id}"${notesAttr}>
+        ${innerHtml}
+      </section>
+    `;
+  });
+  const slidesHtml = renderedSlides.join("\n");
+  const fullHtml = generateHtmlShell({
+    title: deckData.title || "Presentation",
+    theme,
+    slidesHtml,
+    slideCount,
+    customHeadTags: options?.customHeadTags
+  });
+  return {
+    html: fullHtml,
+    slideCount,
+    theme,
+    title: deckData.title
+  };
+}
+
+exports.HTML_SLIDE_PRESETS = HTML_SLIDE_PRESETS;
+exports.HTML_THEMES = HTML_THEMES;
+exports.SLIDE_LAYOUT_PRESETS = SLIDE_LAYOUT_PRESETS;
+exports.compileHtmlDeck = compileHtmlDeck;
+exports.generateHtmlShell = generateHtmlShell;
+exports.getSlideLayoutPresetById = getSlideLayoutPresetById;
+exports.getSlideLayoutPresetsByCategory = getSlideLayoutPresetsByCategory;
+exports.removeSlideElementFromMarkdown = removeSlideElementFromMarkdown;
+exports.resolveHtmlTheme = resolveHtmlTheme;
+exports.serializeLayoutToComment = serializeLayoutToComment;
+exports.splitMarkdownSlides = splitMarkdownSlides;
+exports.updateSlideLayoutInMarkdown = updateSlideLayoutInMarkdown;
+exports.updateSlideTextInMarkdown = updateSlideTextInMarkdown;
+//# sourceMappingURL=chunk-53GLUCYC.cjs.map
+//# sourceMappingURL=chunk-53GLUCYC.cjs.map