@thanh01.pmt/presentation-kit 0.2.18 → 0.3.1

package/dist/{chunk-JJQDQIRG.js → chunk-5HIDQQHE.js}

@@ -1,5 +1,3 @@
-import yaml from 'js-yaml';
-
 // src/plugins/shiki.ts
 var highlighterPromise = null;
 var highlighterFailed = false;
@@ -74,853 +72,6 @@ async function highlightCodeBlocks(html, theme = "dark") {
     }
   );
 }
-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.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.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.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 = {
@@ -1347,6 +498,133 @@ var HTML_SLIDE_PRESETS = {
   }
 };
 
+// src/html-engine/utilities.ts
+var FONT_SIZES = [
+  // class, var, fallback px, line-height
+  ["xs", "--font-size-xs", "14px", "1.4"],
+  ["sm", "--font-size-sm", "16px", "1.45"],
+  ["base", "--font-size-base", "18px", "1.5"],
+  ["lg", "--font-size-lg", "20px", "1.5"],
+  ["xl", "--font-size-xl", "22px", "1.5"],
+  ["2xl", "--font-size-2xl", "26px", "1.4"],
+  ["3xl", "--font-size-3xl", "32px", "1.3"],
+  ["4xl", "--font-size-4xl", "38px", "1.25"],
+  ["6xl", "--font-size-6xl", "58px", "1.15"],
+  ["8xl", "--font-size-8xl", "96px", "1.05"]
+];
+var SPACING = {
+  "0.5": "0.125rem",
+  "1": "0.25rem",
+  "1.5": "0.375rem",
+  "2": "0.5rem",
+  "2.5": "0.625rem",
+  "3": "0.75rem",
+  "4": "1rem",
+  "5": "1.25rem",
+  "6": "1.5rem",
+  "7": "1.75rem",
+  "8": "2rem",
+  "10": "2.5rem",
+  "12": "3rem",
+  "16": "4rem",
+  "20": "5rem",
+  "24": "6rem"
+};
+function sp(value) {
+  return `calc(${SPACING[value]} * var(--scale-spacing-eff, 1))`;
+}
+function fontSizeRules() {
+  return FONT_SIZES.map(
+    ([cls, cssVar, fallback, lh]) => `.text-${cls}{font-size:var(${cssVar}, ${fallback});line-height:${lh}}`
+  ).join("\n");
+}
+function spacingRules() {
+  const out = [];
+  for (const value of Object.keys(SPACING)) {
+    out.push(`.p-${value}{padding:${sp(value)}}`);
+    out.push(`.px-${value}{padding-left:${sp(value)};padding-right:${sp(value)}}`);
+    out.push(`.py-${value}{padding-top:${sp(value)};padding-bottom:${sp(value)}}`);
+    out.push(`.pt-${value}{padding-top:${sp(value)}}`);
+    out.push(`.pb-${value}{padding-bottom:${sp(value)}}`);
+    out.push(`.mt-${value}{margin-top:${sp(value)}}`);
+    out.push(`.mb-${value}{margin-bottom:${sp(value)}}`);
+    out.push(`.my-${value}{margin-top:${sp(value)};margin-bottom:${sp(value)}`);
+    out.push(`.gap-${value}{gap:${sp(value)}}`);
+  }
+  return out.join("\n");
+}
+function sizeRules() {
+  const out = [];
+  for (const value of Object.keys(SPACING)) {
+    out.push(`.w-${value}{width:${sp(value)}}`);
+    out.push(`.h-${value}{height:${sp(value)}}`);
+  }
+  return out.join("\n");
+}
+var SLIDE_UTILITY_CSS = `
+/* preflight \u2014 the presets were authored against Tailwind's reset (no default
+   margins, no list markers, border-box everywhere), so it has to come along. */
+.slide-page *,.slide-page *::before,.slide-page *::after{box-sizing:border-box;border-width:0;border-style:solid}
+.slide-page h1,.slide-page h2,.slide-page h3,.slide-page h4,.slide-page h5,.slide-page h6,
+.slide-page p,.slide-page ul,.slide-page ol,.slide-page li,.slide-page figure,.slide-page blockquote,
+.slide-page pre,.slide-page dl,.slide-page dd{margin:0;padding:0}
+.slide-page ul,.slide-page ol{list-style:none}
+.slide-page img,.slide-page svg,.slide-page video{display:block;max-width:100%}
+.slide-page button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
+.slide-page table{border-collapse:collapse}
+.slide-page a{color:inherit;text-decoration:inherit}
+/* layout */
+.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-block{display:inline-block}
+.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.shrink-0{flex-shrink:0}
+.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
+.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
+.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
+.col-span-5{grid-column:span 5/span 5}.col-span-7{grid-column:span 7/span 7}
+.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}
+.justify-center{justify-content:center}.justify-between{justify-content:space-between}
+.relative{position:relative}.overflow-hidden{overflow:hidden}.z-10{z-index:10}
+.h-full{height:100%}.w-full{width:100%}.min-h-0{min-height:0}.my-auto{margin-top:auto;margin-bottom:auto}
+.text-center{text-align:center}
+/* typography */
+.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
+.font-extrabold{font-weight:800}.font-black{font-weight:900}.font-mono{font-family:var(--font-code)}
+.tracking-tighter{letter-spacing:-0.05em}.tracking-tight{letter-spacing:-0.025em}
+.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}
+.uppercase{text-transform:uppercase}
+.leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}
+.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}
+${fontSizeRules()}
+/* spacing (scaled by the density editor) */
+${spacingRules()}
+${sizeRules()}
+.space-y-3 > * + *{margin-top:${sp("3")}}
+.space-y-4 > * + *{margin-top:${sp("4")}}
+.space-y-6 > * + *{margin-top:${sp("6")}}
+/* surfaces & color (theme-variable driven) */
+.rounded{border-radius:0.25rem}.rounded-xl{border-radius:0.75rem}.rounded-full{border-radius:9999px}
+.border{border-width:1px;border-style:solid;border-color:var(--border)}
+.border-t{border-top-width:1px;border-top-style:solid;border-top-color:var(--border)}
+.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--border)}
+.border-current{border-color:currentColor}
+.shadow{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08)}
+.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.08)}
+.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.15),0 4px 6px -4px rgba(0,0,0,.1)}
+.opacity-60{opacity:.6}.opacity-65{opacity:.65}.opacity-75{opacity:.75}
+.opacity-80{opacity:.8}.opacity-85{opacity:.85}.opacity-90{opacity:.9}
+.bg-red-500\\/70{background-color:rgba(239,68,68,.7)}
+.bg-yellow-500\\/70{background-color:rgba(234,179,8,.7)}
+.bg-green-500\\/70{background-color:rgba(34,197,94,.7)}
+/* theme color utilities (previously provided by tailwind.config extend) */
+.text-primary{color:var(--primary)}.text-muted{color:var(--text-muted)}.text-themeText{color:var(--text)}
+.bg-themeBg{background-color:var(--bg)}.bg-themeBgSecondary{background-color:var(--bg-secondary)}
+.bg-themePrimary{background-color:var(--primary)}.border-themeBorder{border-color:var(--border)}
+`.trim();
+function listUtilityClasses() {
+  return Array.from(SLIDE_UTILITY_CSS.matchAll(/\.([a-zA-Z0-9\\/_.-]+)(?=[{,: >])/g)).map(
+    (m) => m[1].replace(/\\\//g, "/")
+  );
+}
+
 // src/html-engine/shell.ts
 function generateHtmlShell(options) {
   const { title, theme, slidesHtml, slideCount, customHeadTags = "", deckId = "" } = options;
@@ -1358,12 +636,16 @@ function generateHtmlShell(options) {
   <title>${title}</title>
   
   <!-- Fonts -->
+  <!-- DECK_FONT_BLOCK_START -->${options?.fontFaceCss ? `
+  <style>
+${options.fontFaceCss}
+  </style>` : `
   <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">
+  <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">`}<!-- DECK_FONT_BLOCK_END -->
 
-  <!-- Core Presentation Styling & 1920x1080 Scaled Tailwind Configuration -->
-  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Core Presentation Styling & 1920x1080 Scaled Layout Utilities (inlined) -->
+  <style>${SLIDE_UTILITY_CSS}</style>
   <script>
     window.tailwind = window.tailwind || {};
     tailwind.config = {
@@ -1513,6 +795,59 @@ function generateHtmlShell(options) {
       opacity: 1;
     }
 
+    /* \u2500\u2500 Bespoke (authored) slides \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+       The frontend-slides mode hands the model the whole slide surface, so the
+       shell owns only what must stay invariant: full-stage sizing, border-box
+       maths, theme type defaults, and one orchestrated entrance. */
+    .bespoke-slide {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .bespoke-slide,
+    .bespoke-slide *,
+    .bespoke-slide *::before,
+    .bespoke-slide *::after {
+      box-sizing: border-box;
+    }
+
+    .bespoke-slide h1,
+    .bespoke-slide h2 {
+      font-family: var(--font-display);
+      letter-spacing: -0.02em;
+    }
+
+    .bespoke-slide img,
+    .bespoke-slide svg {
+      max-width: 100%;
+      height: auto;
+    }
+
+    .slide-page.active .bespoke-slide > * {
+      animation: bespokeReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+    }
+
+    .slide-page.active .bespoke-slide > *:nth-child(2) { animation-delay: 0.08s; }
+    .slide-page.active .bespoke-slide > *:nth-child(3) { animation-delay: 0.16s; }
+    .slide-page.active .bespoke-slide > *:nth-child(4) { animation-delay: 0.24s; }
+    .slide-page.active .bespoke-slide > *:nth-child(5) { animation-delay: 0.32s; }
+    .slide-page.active .bespoke-slide > *:nth-child(n + 6) { animation-delay: 0.4s; }
+
+    @keyframes bespokeReveal {
+      from { opacity: 0; transform: translateY(14px); }
+      to { opacity: 1; transform: none; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .slide-page.active .bespoke-slide > * {
+        animation: none;
+        opacity: 1;
+        transform: none;
+      }
+    }
+
     /* Top Progress Bar */
     #progress-bar {
       position: absolute;
@@ -3655,6 +2990,94 @@ main();`;
   return slots;
 }
 
+// src/html-engine/sanitize.ts
+var CONTAINER_TAGS = ["script", "iframe", "object", "embed", "applet", "form", "button", "textarea", "select", "template"];
+var VOID_TAGS = ["link", "meta", "base", "input"];
+var CONTAINER_ELEMENT_RE = new RegExp(
+  `<(${CONTAINER_TAGS.join("|")})\\b[\\s\\S]*?<\\/\\1\\s*>`,
+  "gi"
+);
+var STRAY_TAG_RE = new RegExp(`<\\/?(?:${[...CONTAINER_TAGS, ...VOID_TAGS].join("|")})\\b[^>]*>`, "gi");
+var EVENT_ATTR_RE = /\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi;
+var EXTERNAL_URL_RE = /^(?:https?:)?\/\//i;
+var CSS_URL_RE = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)'"\s]*))\s*\)/gi;
+var CSS_IMPORT_RE = /@import[^;]+;/gi;
+function isOffBoxUrl(url) {
+  const value = url.trim();
+  if (!value) return false;
+  return EXTERNAL_URL_RE.test(value) || /^javascript:/i.test(value) || /^data:(?!image\/)/i.test(value);
+}
+function sanitizeSlideHtml(raw) {
+  const removed = [];
+  let html = String(raw ?? "");
+  html = html.replace(CONTAINER_ELEMENT_RE, (_match, tag) => {
+    removed.push(`<${String(tag).toLowerCase()}>`);
+    return "";
+  });
+  html = html.replace(STRAY_TAG_RE, (match) => {
+    const tag = (match.match(/^<\/?\s*([a-z]+)/i) || [])[1]?.toLowerCase();
+    if (tag) removed.push(`<${tag}>`);
+    return "";
+  });
+  const beforeEvents = html.length;
+  html = html.replace(EVENT_ATTR_RE, "");
+  if (html.length !== beforeEvents) removed.push("inline event handler");
+  html = html.replace(CSS_URL_RE, (match, dq, sq, bare) => {
+    if (!isOffBoxUrl(String(dq ?? sq ?? bare ?? ""))) return match;
+    removed.push("external url()");
+    return "none";
+  });
+  const beforeImports = html.length;
+  html = html.replace(CSS_IMPORT_RE, "");
+  if (html.length !== beforeImports) removed.push("@import");
+  html = html.replace(/\s+(href|src|srcset|poster)\s*=\s*("([^"]*)"|'([^']*)')/gi, (match, attr, _q, dq, sq) => {
+    const value = String(dq ?? sq ?? "").trim();
+    if (!isOffBoxUrl(value)) return match;
+    removed.push(`${attr}="${value.slice(0, 60)}"`);
+    return "";
+  });
+  return { html: html.trim(), removed: Array.from(new Set(removed)) };
+}
+function validateBespokeSlideHtml(raw, contract = {}) {
+  const maxChars = contract.maxChars ?? 16e3;
+  const minChars = contract.minChars ?? 120;
+  const issues = [];
+  const html = String(raw ?? "").trim();
+  if (!html) return { valid: false, issues: ["slide html is empty"] };
+  if (html.length > maxChars) issues.push(`slide html exceeds ${maxChars} chars (${html.length})`);
+  if (html.replace(/<[^>]*>/g, "").replace(/\s+/g, "").length < minChars) {
+    issues.push("slide has too little text content to teach anything");
+  }
+  if (!/<h[12]\b/i.test(html)) {
+    issues.push("slide has no <h1>/<h2> \u2014 typographic hierarchy is required");
+  }
+  const { html: clean, removed } = sanitizeSlideHtml(html);
+  if (removed.length > 0) {
+    issues.push(`slide is not self-contained (stripped: ${removed.join(", ")})`);
+  }
+  if (/<script\b/i.test(clean)) issues.push("slide still contains a script tag after sanitizing");
+  if (/\b(todo|tbd|lorem ipsum|<code>)\b/i.test(clean) && !/<pre\b/i.test(clean)) {
+    issues.push("slide contains placeholder text");
+  }
+  if (/<html\b|<body\b|<section\b[^>]*class="[^"]*slide-page/i.test(clean)) {
+    issues.push("slide markup carries deck-level structure (html/body/section.slide-page)");
+  }
+  const pseudoRe = /::(before|after)\s*\{([^}]*)\}/g;
+  for (const [, , body] of clean.matchAll(pseudoRe)) {
+    if (/content:\s*['"]{2}/.test(body) && /position:\s*absolute/.test(body) && /rotate\(|translate\(/.test(body)) {
+      issues.push(
+        "decorative pseudo-element with absolute positioning + rotate/translate overlaps text \u2014 draw the decoration inside a sized box instead"
+      );
+      break;
+    }
+  }
+  return { valid: issues.length === 0, issues };
+}
+function buildBespokeSlideMarkup(raw) {
+  const { html } = sanitizeSlideHtml(raw);
+  return `<div class="bespoke-slide">${html}</div>`;
+}
+
 // src/html-engine/compiler.ts
 var SHIKI_LANGS = /* @__PURE__ */ new Set([
   "javascript",
@@ -3705,6 +3128,16 @@ function compileHtmlDeck(deckData, options) {
   const slides = deckData.slides || [];
   const slideCount = Math.max(slides.length, 1);
   const renderedSlides = slides.map((slide, index) => {
+    if (typeof slide.html === "string" && slide.html.trim()) {
+      const notesAttr2 = slide.notes ? ` data-notes="${encodeURIComponent(slide.notes)}"` : "";
+      const customClass2 = slide.customClass ? ` ${slide.customClass}` : "";
+      return `
+      <!-- Slide ${index + 1}: authored html -->
+      <section class="slide-page${customClass2}" data-index="${index}" data-layout="bespoke"${notesAttr2}>
+        ${buildBespokeSlideMarkup(slide.html)}
+      </section>
+    `;
+    }
     const preset = HTML_SLIDE_PRESETS[slide.layoutId] || HTML_SLIDE_PRESETS["hero-cover"];
     const normalizedSlots = normalizeSlideSlots(slide);
     let innerHtml = preset.template(normalizedSlots, theme);
@@ -3765,6 +3198,6 @@ async function compileHtmlDeckAsync(deckData, options) {
   }
 }
 
-export { HTML_SLIDE_PRESETS, HTML_THEMES, SLIDE_LAYOUT_PRESETS, compileHtmlDeck, compileHtmlDeckAsync, generateHtmlShell, getHighlighter, getSlideLayoutPresetById, getSlideLayoutPresetsByCategory, highlightCodeBlocks, highlightDeckCodeBlocks, normalizeSlideSlots, removeSlideElementFromMarkdown, resolveHtmlTheme, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown, updateSlideTextInMarkdown };
-//# sourceMappingURL=chunk-JJQDQIRG.js.map
-//# sourceMappingURL=chunk-JJQDQIRG.js.map
+export { HTML_SLIDE_PRESETS, HTML_THEMES, SLIDE_UTILITY_CSS, buildBespokeSlideMarkup, compileHtmlDeck, compileHtmlDeckAsync, generateHtmlShell, getHighlighter, highlightCodeBlocks, highlightDeckCodeBlocks, listUtilityClasses, normalizeSlideSlots, resolveHtmlTheme, sanitizeSlideHtml, validateBespokeSlideHtml };
+//# sourceMappingURL=chunk-5HIDQQHE.js.map
+//# sourceMappingURL=chunk-5HIDQQHE.js.map