@thanh01.pmt/presentation-kit 0.2.1 → 0.2.3

package/dist/chunk-3IKL6SBP.js

@@ -0,0 +1,746 @@
+import yaml from 'js-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.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;
+}
+
+// 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);
+}
+
+export { SLIDE_LAYOUT_PRESETS, getSlideLayoutPresetById, getSlideLayoutPresetsByCategory, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown };
+//# sourceMappingURL=chunk-3IKL6SBP.js.map
+//# sourceMappingURL=chunk-3IKL6SBP.js.map