@thanh01.pmt/presentation-kit 0.2.17 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/README.md +26 -0
  2. package/dist/ai/index.cjs +33 -28
  3. package/dist/ai/index.cjs.map +1 -1
  4. package/dist/ai/index.d.cts +4 -3
  5. package/dist/ai/index.d.ts +4 -3
  6. package/dist/ai/index.js +3 -2
  7. package/dist/ai/index.js.map +1 -1
  8. package/dist/assets/fonts/NOTICE.md +25 -0
  9. package/dist/assets/fonts/SOURCES.json +47 -0
  10. package/dist/assets/fonts/fira-code.woff2 +0 -0
  11. package/dist/assets/fonts/inter.woff2 +0 -0
  12. package/dist/assets/fonts/jetbrains-mono.woff2 +0 -0
  13. package/dist/assets/fonts/playfair-display.woff2 +0 -0
  14. package/dist/assets/fonts/plus-jakarta-sans.woff2 +0 -0
  15. package/dist/assets/fonts/space-grotesk.woff2 +0 -0
  16. package/dist/chunk-3Q4RMZVQ.cjs +867 -0
  17. package/dist/chunk-3Q4RMZVQ.cjs.map +1 -0
  18. package/dist/chunk-HSVXH7DD.cjs +1624 -0
  19. package/dist/chunk-HSVXH7DD.cjs.map +1 -0
  20. package/dist/{chunk-NYLDRVHZ.js → chunk-I5RG2L3M.js} +4 -78
  21. package/dist/chunk-I5RG2L3M.js.map +1 -0
  22. package/dist/{chunk-7QHDWDSB.js → chunk-INAOTYLK.cjs} +437 -849
  23. package/dist/chunk-INAOTYLK.cjs.map +1 -0
  24. package/dist/{chunk-TGI6YSZP.cjs → chunk-JBGGQGSQ.cjs} +4 -80
  25. package/dist/chunk-JBGGQGSQ.cjs.map +1 -0
  26. package/dist/{chunk-JNTRKKJX.cjs → chunk-OCP2TAY2.js} +421 -868
  27. package/dist/chunk-OCP2TAY2.js.map +1 -0
  28. package/dist/chunk-V6X7D44H.js +854 -0
  29. package/dist/chunk-V6X7D44H.js.map +1 -0
  30. package/dist/chunk-VRXEXUHR.js +1610 -0
  31. package/dist/chunk-VRXEXUHR.js.map +1 -0
  32. package/dist/{click-css-Bcc1CkTN.d.cts → click-css-C8VciwZ6.d.cts} +1 -1
  33. package/dist/{click-css-B2s9B_uP.d.ts → click-css-COIiFo1I.d.ts} +1 -1
  34. package/dist/index.cjs +143 -110
  35. package/dist/index.cjs.map +1 -1
  36. package/dist/index.d.cts +62 -6
  37. package/dist/index.d.ts +62 -6
  38. package/dist/index.js +6 -5
  39. package/dist/index.js.map +1 -1
  40. package/dist/node/index.cjs +117 -0
  41. package/dist/node/index.cjs.map +1 -0
  42. package/dist/node/index.d.cts +36 -0
  43. package/dist/node/index.d.ts +36 -0
  44. package/dist/node/index.js +105 -0
  45. package/dist/node/index.js.map +1 -0
  46. package/dist/{presets-D_hfPJX9.d.ts → presets-DPRGtpO-.d.ts} +1 -1
  47. package/dist/{presets-BYvgAAkJ.d.cts → presets-MIi91wZg.d.cts} +1 -1
  48. package/dist/react/index.cjs +17 -16
  49. package/dist/react/index.cjs.map +1 -1
  50. package/dist/react/index.d.cts +4 -3
  51. package/dist/react/index.d.ts +4 -3
  52. package/dist/react/index.js +4 -3
  53. package/dist/react/index.js.map +1 -1
  54. package/dist/skills/index.cjs +16 -12
  55. package/dist/skills/index.d.cts +36 -20
  56. package/dist/skills/index.d.ts +36 -20
  57. package/dist/skills/index.js +1 -1
  58. package/dist/{types-C3d04zzP.d.cts → types-CvxCxWus.d.cts} +1 -67
  59. package/dist/{types-C3d04zzP.d.ts → types-CvxCxWus.d.ts} +1 -67
  60. package/dist/types-k_eae8UV.d.cts +74 -0
  61. package/dist/types-k_eae8UV.d.ts +74 -0
  62. package/package.json +8 -2
  63. package/dist/chunk-6R6L6KSC.cjs +0 -601
  64. package/dist/chunk-6R6L6KSC.cjs.map +0 -1
  65. package/dist/chunk-7QHDWDSB.js.map +0 -1
  66. package/dist/chunk-BHJXQCVE.js +0 -588
  67. package/dist/chunk-BHJXQCVE.js.map +0 -1
  68. package/dist/chunk-JNTRKKJX.cjs.map +0 -1
  69. package/dist/chunk-NYLDRVHZ.js.map +0 -1
  70. package/dist/chunk-TGI6YSZP.cjs.map +0 -1
@@ -1,852 +1,78 @@
1
- import yaml from 'js-yaml';
2
-
3
- // src/core/layout/serializer.ts
4
- function serializeLayoutToComment(layout) {
5
- if (!layout.boxes || layout.boxes.length === 0) return "";
6
- const cleanData = {
7
- boxes: layout.boxes.map((box) => {
8
- const b = {
9
- id: box.id,
10
- target: box.target || `h1`,
11
- pos: [
12
- Math.round(box.pos[0]),
13
- Math.round(box.pos[1]),
14
- Math.round(box.pos[2]),
15
- Math.round(box.pos[3])
16
- ]
17
- };
18
- if (box.fontSize) b.fontSize = box.fontSize;
19
- if (box.color) b.color = box.color;
20
- if (box.textAlign) b.textAlign = box.textAlign;
21
- if (box.style) b.style = box.style;
22
- return b;
23
- })
24
- };
25
- const yamlStr = yaml.dump(cleanData, {
26
- indent: 2,
27
- lineWidth: -1,
28
- noRefs: true
29
- }).trim();
30
- return `<!-- layout:
31
- ${yamlStr.split("\n").join("\n ")}
32
- -->`;
33
- }
34
- function splitMarkdownSlides(markdown) {
35
- const lines = markdown.split("\n");
36
- let frontmatter = null;
37
- const slideBuffers = [];
38
- let currentBuffer = [];
39
- let inCodeFence = false;
40
- let lineIdx = 0;
41
- if (lines.length > 0 && lines[0].trim() === "---") {
42
- const fmBuffer = [lines[0]];
43
- lineIdx = 1;
44
- while (lineIdx < lines.length) {
45
- const line = lines[lineIdx];
46
- fmBuffer.push(line);
47
- if (line.trim() === "---") {
48
- frontmatter = fmBuffer.join("\n");
49
- lineIdx++;
50
- break;
51
- }
52
- lineIdx++;
53
- }
1
+ 'use strict';
2
+
3
+ // src/plugins/shiki.ts
4
+ var highlighterPromise = null;
5
+ var highlighterFailed = false;
6
+ var SUPPORTED_LANGS = [
7
+ "javascript",
8
+ "typescript",
9
+ "python",
10
+ "cpp",
11
+ "c",
12
+ "java",
13
+ "html",
14
+ "css",
15
+ "json",
16
+ "yaml",
17
+ "bash",
18
+ "shell",
19
+ "sql",
20
+ "go",
21
+ "rust",
22
+ "swift",
23
+ "kotlin",
24
+ "ruby",
25
+ "php",
26
+ "xml",
27
+ "markdown",
28
+ "dockerfile",
29
+ "toml",
30
+ "ini",
31
+ "graphql",
32
+ "prisma",
33
+ "solidity"
34
+ ];
35
+ async function getHighlighter() {
36
+ if (highlighterFailed) {
37
+ highlighterPromise = null;
38
+ highlighterFailed = false;
54
39
  }
55
- for (let i = lineIdx; i < lines.length; i++) {
56
- const line = lines[i];
57
- if (/^```/.test(line.trim())) {
58
- inCodeFence = !inCodeFence;
59
- currentBuffer.push(line);
60
- continue;
61
- }
62
- if (!inCodeFence && line.trim() === "---") {
63
- slideBuffers.push(currentBuffer);
64
- currentBuffer = [];
65
- continue;
66
- }
67
- currentBuffer.push(line);
40
+ if (!highlighterPromise) {
41
+ highlighterPromise = import('shiki').then(
42
+ (mod) => mod.createHighlighter({
43
+ themes: ["vitesse-dark", "vitesse-light"],
44
+ langs: [...SUPPORTED_LANGS]
45
+ })
46
+ ).catch((err) => {
47
+ highlighterPromise = null;
48
+ highlighterFailed = true;
49
+ throw new Error(`[presentation-kit] Failed to load Shiki highlighter: ${err}`);
50
+ });
68
51
  }
69
- slideBuffers.push(currentBuffer);
70
- const slides = slideBuffers.map((b) => b.join("\n"));
71
- return { frontmatter, slides };
52
+ return highlighterPromise;
72
53
  }
73
- function updateSlideLayoutInMarkdown(markdown, slideIndex, layout) {
74
- const { frontmatter, slides } = splitMarkdownSlides(markdown);
75
- if (slideIndex < 0 || slideIndex >= slides.length) {
76
- return markdown;
77
- }
78
- let slideContent = slides[slideIndex];
79
- const layoutCommentRegex = /<!--\s*layout:\s*[\s\S]*?-->/i;
80
- const newComment = layout && layout.boxes && layout.boxes.length > 0 ? serializeLayoutToComment(layout) : "";
81
- if (layoutCommentRegex.test(slideContent)) {
82
- if (newComment) {
83
- slideContent = slideContent.replace(layoutCommentRegex, newComment);
84
- } else {
85
- slideContent = slideContent.replace(layoutCommentRegex, "").trim();
86
- }
87
- } else if (newComment) {
88
- const trimmed = slideContent.trimStart();
89
- slideContent = `${newComment}
90
-
91
- ${trimmed}`;
92
- }
93
- slides[slideIndex] = slideContent;
94
- const joinedSlides = slides.join("\n---\n");
95
- if (frontmatter) {
96
- return `${frontmatter}
97
-
98
- ${joinedSlides}`;
99
- }
100
- return joinedSlides;
54
+ function decodeHtmlEntities(html) {
55
+ return html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&#x27;/g, "'").replace(/&nbsp;/g, " ").replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code))).replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
101
56
  }
102
- function updateSlideTextInMarkdown(markdown, slideIndex, oldText, newText) {
103
- const { frontmatter, slides } = splitMarkdownSlides(markdown);
104
- if (slideIndex < 0 || slideIndex >= slides.length) {
105
- return markdown;
106
- }
107
- const cleanOld = oldText.trim();
108
- const cleanNew = newText.trim();
109
- if (!cleanOld || cleanOld === cleanNew) return markdown;
110
- let slideContent = slides[slideIndex];
111
- if (slideContent.includes(cleanOld)) {
112
- slideContent = slideContent.replace(cleanOld, cleanNew);
113
- } else {
114
- const lines = slideContent.split("\n");
115
- let replaced = false;
116
- for (let i = 0; i < lines.length; i++) {
117
- const line = lines[i];
118
- const stripped = line.replace(/^[#\s\-\*\>]+/, "").replace(/[*_`]/g, "").trim();
119
- if (stripped === cleanOld) {
120
- const prefixMatch = line.match(/^([#\s\-\*\>]+)/);
121
- const prefix = prefixMatch ? prefixMatch[1] : "";
122
- lines[i] = `${prefix}${cleanNew}`;
123
- replaced = true;
124
- break;
125
- }
126
- }
127
- if (replaced) {
128
- slideContent = lines.join("\n");
129
- } else {
130
- const escaped = cleanOld.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
131
- const regex = new RegExp(escaped, "i");
132
- if (regex.test(slideContent)) {
133
- slideContent = slideContent.replace(regex, cleanNew);
134
- } else {
135
- const words = cleanOld.split(/\s+/).filter((w) => w.length > 2);
136
- if (words.length > 0) {
137
- const pattern = words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("[\\s\\S]*?");
138
- const fuzzyRegex = new RegExp(pattern, "i");
139
- if (fuzzyRegex.test(slideContent)) {
140
- slideContent = slideContent.replace(fuzzyRegex, cleanNew);
141
- }
142
- }
143
- }
144
- }
145
- }
146
- slides[slideIndex] = slideContent;
147
- const joinedSlides = slides.join("\n---\n");
148
- if (frontmatter) {
149
- return `${frontmatter}
150
-
151
- ${joinedSlides}`;
152
- }
153
- return joinedSlides;
57
+ function getShikiTheme(theme) {
58
+ if (theme === "light") return "vitesse-light";
59
+ return "vitesse-dark";
154
60
  }
155
- function removeSlideElementFromMarkdown(markdown, slideIndex, options) {
156
- const { frontmatter, slides } = splitMarkdownSlides(markdown);
157
- if (slideIndex < 0 || slideIndex >= slides.length) {
158
- return markdown;
159
- }
160
- let slideContent = slides[slideIndex];
161
- const cleanContent = options.content?.trim();
162
- if (cleanContent) {
163
- const lines = slideContent.split("\n");
164
- let removed = false;
165
- const updatedLines = lines.filter((line) => {
166
- if (removed) return true;
167
- const stripped = line.replace(/^[#\s\-\*\>]+/, "").replace(/[*_`]/g, "").trim();
168
- if (stripped === cleanContent || line.includes(cleanContent)) {
169
- removed = true;
170
- return false;
171
- }
172
- return true;
173
- });
174
- if (removed) {
175
- slideContent = updatedLines.join("\n");
176
- }
177
- }
178
- const layoutCommentRegex = /<!--\s*layout:\s*([\s\S]*?)-->/i;
179
- const match = slideContent.match(layoutCommentRegex);
180
- if (match && match[1]) {
181
- try {
182
- const parsed = yaml.load(match[1]);
183
- if (parsed && Array.isArray(parsed.boxes)) {
184
- const remainingBoxes = parsed.boxes.filter((b) => {
185
- if (options.boxId && b.id === options.boxId) return false;
186
- if (options.target && b.target === options.target) return false;
187
- return true;
188
- });
189
- if (remainingBoxes.length > 0) {
190
- const yamlStr = yaml.dump({ boxes: remainingBoxes }, { indent: 2, lineWidth: -1, noRefs: true }).trim();
191
- slideContent = slideContent.replace(layoutCommentRegex, `<!-- layout:
192
- ${yamlStr.split("\n").join("\n ")}
193
- -->`);
194
- } else {
195
- slideContent = slideContent.replace(layoutCommentRegex, "").trim();
196
- }
61
+ async function highlightCodeBlocks(html, theme = "dark") {
62
+ if (!html.includes("<pre><code")) return html;
63
+ const highlighter = await getHighlighter();
64
+ const shikiTheme = getShikiTheme(theme);
65
+ return html.replace(
66
+ /<pre><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g,
67
+ (_, lang, code) => {
68
+ const decoded = decodeHtmlEntities(code);
69
+ try {
70
+ return highlighter.codeToHtml(decoded, { lang, theme: shikiTheme });
71
+ } catch {
72
+ return `<pre><code class="language-${lang}">${code}</code></pre>`;
197
73
  }
198
- } catch {
199
74
  }
200
- }
201
- slides[slideIndex] = slideContent;
202
- const joinedSlides = slides.join("\n---\n");
203
- if (frontmatter) {
204
- return `${frontmatter}
205
-
206
- ${joinedSlides}`;
207
- }
208
- return joinedSlides;
209
- }
210
-
211
- // src/core/layout/presets.ts
212
- var SLIDE_LAYOUT_PRESETS = [
213
- {
214
- id: "title-hero",
215
- name: "Title & Speaker Cover",
216
- category: "cover",
217
- description: "High-impact opening slide with large title, subtitle, and speaker credentials.",
218
- layout: {
219
- boxes: [
220
- {
221
- id: "title",
222
- target: "h1",
223
- pos: [100, 180, 1080, 140],
224
- fontSize: "3rem",
225
- textAlign: "center"
226
- },
227
- {
228
- id: "subtitle",
229
- target: "h3",
230
- pos: [100, 350, 1080, 70],
231
- fontSize: "1.5rem",
232
- textAlign: "center"
233
- },
234
- {
235
- id: "speaker-meta",
236
- target: "p",
237
- pos: [100, 460, 1080, 80],
238
- fontSize: "1.1rem",
239
- textAlign: "center"
240
- }
241
- ]
242
- },
243
- markdownSnippet: `<!-- layout:
244
- boxes:
245
- - id: title
246
- target: h1
247
- pos: [100, 180, 1080, 140]
248
- fontSize: 3rem
249
- textAlign: center
250
- - id: subtitle
251
- target: h3
252
- pos: [100, 350, 1080, 70]
253
- fontSize: 1.5rem
254
- textAlign: center
255
- - id: speaker-meta
256
- target: p
257
- pos: [100, 460, 1080, 80]
258
- fontSize: 1.1rem
259
- textAlign: center
260
- -->
261
-
262
- # \u{1F680} Engineering Scalable Cloud Systems
263
- ### Principles, Bottlenecks, and Real-World Architecture Patterns
264
-
265
- **Presenter:** Senior Systems Architect | **Duration:** 45 mins | **Level:** Intermediate
266
-
267
- <!--
268
- Presenter Notes:
269
- - Welcome the audience and outline today's primary engineering goals.
270
- - Spark curiosity with an opening hook about scaling under high concurrency.
271
- -->`
272
- },
273
- {
274
- id: "two-column-split",
275
- name: "Two-Column Comparison",
276
- category: "split",
277
- description: "Balanced side-by-side comparison for legacy vs modern patterns or pros vs cons.",
278
- layout: {
279
- boxes: [
280
- {
281
- id: "heading",
282
- target: "h2",
283
- pos: [80, 50, 1120, 70],
284
- fontSize: "2rem"
285
- },
286
- {
287
- id: "col-left",
288
- target: ".columns-2 > div:first-child",
289
- pos: [80, 150, 530, 510]
290
- },
291
- {
292
- id: "col-right",
293
- target: ".columns-2 > div:last-child",
294
- pos: [670, 150, 530, 510]
295
- }
296
- ]
297
- },
298
- markdownSnippet: `<!-- layout:
299
- boxes:
300
- - id: heading
301
- target: h2
302
- pos: [80, 50, 1120, 70]
303
- fontSize: 2rem
304
- - id: col-left
305
- target: '.columns-2 > div:first-child'
306
- pos: [80, 150, 530, 510]
307
- - id: col-right
308
- target: '.columns-2 > div:last-child'
309
- pos: [670, 150, 530, 510]
310
- -->
311
-
312
- ## \u2696\uFE0F Monolithic Polling vs Event-Driven Architecture
313
-
314
- <div class="columns-2">
315
- <div>
316
-
317
- ### \u{1F534} Legacy Polling
318
- - Heavy database CPU overhead on idle cycles
319
- - High network latency between updates
320
- - Prone to cascading timeouts during spikes
321
-
322
- </div>
323
- <div>
324
-
325
- ### \u{1F7E2} Event-Driven Streams
326
- - Real-time event propagation via webhooks
327
- - Zero idle compute waste with serverless consumers
328
- - Automatic backpressure and queue isolation
329
-
330
- </div>
331
- </div>
332
-
333
- <!--
334
- Presenter Notes:
335
- - Emphasize the core failure mode of periodic polling under sudden load spikes.
336
- - Ask the room if anyone has experienced database lockups caused by polling loops.
337
- -->`
338
- },
339
- {
340
- id: "code-explainer",
341
- name: "Code Walkthrough & Analysis",
342
- category: "code",
343
- description: "Syntax-highlighted code block on the left with step-by-step key annotations on the right.",
344
- layout: {
345
- boxes: [
346
- {
347
- id: "heading",
348
- target: "h2",
349
- pos: [80, 45, 1120, 65],
350
- fontSize: "1.9rem"
351
- },
352
- {
353
- id: "code-box",
354
- target: ".columns-2 > div:first-child",
355
- pos: [80, 135, 630, 535]
356
- },
357
- {
358
- id: "notes-box",
359
- target: ".columns-2 > div:last-child",
360
- pos: [740, 135, 460, 535]
361
- }
362
- ]
363
- },
364
- markdownSnippet: `<!-- layout:
365
- boxes:
366
- - id: heading
367
- target: h2
368
- pos: [80, 45, 1120, 65]
369
- fontSize: 1.9rem
370
- - id: code-box
371
- target: '.columns-2 > div:first-child'
372
- pos: [80, 135, 630, 535]
373
- - id: notes-box
374
- target: '.columns-2 > div:last-child'
375
- pos: [740, 135, 460, 535]
376
- -->
377
-
378
- ## \u{1F4BB} Robust Async Transaction Pipeline
379
-
380
- <div class="columns-2">
381
- <div>
382
-
383
- \`\`\`ts
384
- // Process payment with idempotency guarantee
385
- export async function processPayment(order: Order) {
386
- const isValid = await validateOrder(order);
387
- if (!isValid) throw new Error("ValidationFailed");
388
-
389
- const receipt = await chargeCard(order);
390
- return sendConfirmation(receipt);
391
- }
392
- \`\`\`
393
-
394
- </div>
395
- <div>
396
-
397
- ### \u{1F50D} Key Engineering Invariants:
398
- 1. **Early Guard Clause:** Validates payload immediately at line 3 before triggering external calls.
399
- 2. **Deterministic Sequence:** Enforces strict order of operations using native \`await\`.
400
- 3. **Audit Trail:** Returns immutable payment receipt upon successful execution.
401
-
402
- </div>
403
- </div>
404
-
405
- <!--
406
- Presenter Notes:
407
- - Walk through lines 1 to 7 sequentially.
408
- - Cold-call check: "What happens if line 6 throws a network timeout?"
409
- - Cognitive scaffolding: Highlight the importance of idempotency keys in payment APIs.
410
- -->`
411
- },
412
- {
413
- id: "metrics-3-card",
414
- name: "3-Metric Key Results Grid",
415
- category: "metrics",
416
- description: "Three high-visibility KPI stat cards for benchmarks, impact, and success criteria.",
417
- layout: {
418
- boxes: [
419
- {
420
- id: "heading",
421
- target: "h2",
422
- pos: [80, 50, 1120, 70],
423
- fontSize: "2rem",
424
- textAlign: "center"
425
- },
426
- {
427
- id: "metric-1",
428
- target: ".columns-3 > div:nth-child(1)",
429
- pos: [80, 165, 340, 485]
430
- },
431
- {
432
- id: "metric-2",
433
- target: ".columns-3 > div:nth-child(2)",
434
- pos: [470, 165, 340, 485]
435
- },
436
- {
437
- id: "metric-3",
438
- target: ".columns-3 > div:nth-child(3)",
439
- pos: [860, 165, 340, 485]
440
- }
441
- ]
442
- },
443
- markdownSnippet: `<!-- layout:
444
- boxes:
445
- - id: heading
446
- target: h2
447
- pos: [80, 50, 1120, 70]
448
- fontSize: 2rem
449
- textAlign: center
450
- - id: metric-1
451
- target: '.columns-3 > div:nth-child(1)'
452
- pos: [80, 165, 340, 485]
453
- - id: metric-2
454
- target: '.columns-3 > div:nth-child(2)'
455
- pos: [470, 165, 340, 485]
456
- - id: metric-3
457
- target: '.columns-3 > div:nth-child(3)'
458
- pos: [860, 165, 340, 485]
459
- -->
460
-
461
- ## \u{1F4CA} Performance & Reliability Benchmarks
462
-
463
- <div class="columns-3">
464
- <div>
465
-
466
- # \u26A1 99.99%
467
- ### SLA Availability
468
- High-availability multi-region cluster with automated failover routing.
469
-
470
- </div>
471
- <div>
472
-
473
- # \u{1F680} 15ms
474
- ### P99 Latency
475
- Sub-20ms roundtrip response time via distributed edge caching.
476
-
477
- </div>
478
- <div>
479
-
480
- # \u{1F6E1}\uFE0F Zero
481
- ### Unhandled Breaches
482
- Full SOC2 Type II compliance and end-to-end payload encryption.
483
-
484
- </div>
485
- </div>
486
-
487
- <!--
488
- Presenter Notes:
489
- - Highlight the 15ms P99 latency target as the primary technical milestone.
490
- - Connect these metrics directly to the architecture decisions discussed next.
491
- -->`
492
- },
493
- {
494
- id: "process-flow",
495
- name: "Architecture & Process Flow",
496
- category: "diagram",
497
- description: "Multi-stage workflow with responsive Mermaid diagram and phase summaries.",
498
- layout: {
499
- boxes: [
500
- {
501
- id: "heading",
502
- target: "h2",
503
- pos: [80, 45, 1120, 65],
504
- fontSize: "1.9rem"
505
- },
506
- {
507
- id: "diagram-box",
508
- target: "pre.mermaid, .mermaid",
509
- pos: [80, 130, 1120, 310]
510
- },
511
- {
512
- id: "summary-box",
513
- target: "ul, p",
514
- pos: [80, 465, 1120, 205]
515
- }
516
- ]
517
- },
518
- markdownSnippet: `<!-- layout:
519
- boxes:
520
- - id: heading
521
- target: h2
522
- pos: [80, 45, 1120, 65]
523
- fontSize: 1.9rem
524
- - id: diagram-box
525
- target: 'pre.mermaid, .mermaid'
526
- pos: [80, 130, 1120, 310]
527
- - id: summary-box
528
- target: 'ul, p'
529
- pos: [80, 465, 1120, 205]
530
- -->
531
-
532
- ## \u{1F504} End-to-End Data Ingestion Pipeline
533
-
534
- \`\`\`mermaid
535
- graph LR
536
- A[1. Client Ingress] --> B[2. API Gateway]
537
- B --> C[3. Auth Verifier]
538
- C --> D[4. Distributed DB]
539
- style A fill:#0284c7,stroke:#38bdf8,stroke-width:2px,color:#fff
540
- style B fill:#1e293b,stroke:#64748b,stroke-width:2px,color:#fff
541
- style C fill:#059669,stroke:#34d399,stroke-width:2px,color:#fff
542
- style D fill:#7c3aed,stroke:#a78bfa,stroke-width:2px,color:#fff
543
- \`\`\`
544
-
545
- - **Ingress & Gateway:** Rate-limits traffic and applies reverse-proxy load balancing.
546
- - **Verification & Storage:** Decodes cryptographic JWT tokens before transactional write commit.
547
-
548
- <!--
549
- Presenter Notes:
550
- - Trace each hop across the diagram from left to right.
551
- - Ask: "Where should rate limiting be applied to prevent DDoS attacks?"
552
- -->`
553
- },
554
- {
555
- id: "quote-highlight",
556
- name: "Core Principle & Quote Highlight",
557
- category: "quote",
558
- description: "Prominent quote callout for fundamental engineering rules or memorable mantras.",
559
- layout: {
560
- boxes: [
561
- {
562
- id: "heading",
563
- target: "h2",
564
- pos: [100, 100, 1080, 80],
565
- fontSize: "2.2rem",
566
- textAlign: "center"
567
- },
568
- {
569
- id: "quote-box",
570
- target: "blockquote",
571
- pos: [140, 230, 1e3, 360],
572
- fontSize: "1.4rem"
573
- }
574
- ]
575
- },
576
- markdownSnippet: `<!-- layout:
577
- boxes:
578
- - id: heading
579
- target: h2
580
- pos: [100, 100, 1080, 80]
581
- fontSize: 2.2rem
582
- textAlign: center
583
- - id: quote-box
584
- target: blockquote
585
- pos: [140, 230, 1000, 360]
586
- fontSize: 1.4rem
587
- -->
588
-
589
- ## \u{1F4A1} Foundational Architecture Principle
590
-
591
- > "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."
592
- >
593
- > \u2014 **Edsger W. Dijkstra**
594
-
595
- <!--
596
- Presenter Notes:
597
- - Pause for 5 seconds of silence to let the quote sink in.
598
- - Ask: "How do our current architectural choices reflect this principle?"
599
- -->`
600
- },
601
- {
602
- id: "quiz-checkpoint",
603
- name: "Interactive Formative Checkpoint",
604
- category: "assessment",
605
- description: "Interactive multiple-choice diagnostic checkpoint with A/B/C/D voting options.",
606
- layout: {
607
- boxes: [
608
- {
609
- id: "heading",
610
- target: "h2",
611
- pos: [80, 45, 1120, 65],
612
- fontSize: "1.9rem"
613
- },
614
- {
615
- id: "question-callout",
616
- target: "blockquote",
617
- pos: [80, 130, 1120, 110],
618
- fontSize: "1.2rem"
619
- },
620
- {
621
- id: "options-list",
622
- target: "ul",
623
- pos: [80, 260, 1120, 390],
624
- fontSize: "1.15rem"
625
- }
626
- ]
627
- },
628
- markdownSnippet: `<!-- layout:
629
- boxes:
630
- - id: heading
631
- target: h2
632
- pos: [80, 45, 1120, 65]
633
- fontSize: 1.9rem
634
- - id: question-callout
635
- target: blockquote
636
- pos: [80, 130, 1120, 110]
637
- fontSize: 1.2rem
638
- - id: options-list
639
- target: ul
640
- pos: [80, 260, 1120, 390]
641
- fontSize: 1.15rem
642
- -->
643
-
644
- ## \u{1F3AF} Formative Checkpoint: Verify Your Understanding
645
-
646
- > **Question:** In an event-driven architecture, which pattern guarantees that messages are never permanently lost if a downstream consumer crashes?
647
-
648
- - **A.** Direct HTTP POST call with a short 2-second timeout
649
- - **B.** Persistent Message Broker with Dead-Letter Queue (DLQ) & retry policy
650
- - **C.** In-memory client RAM cache without disk persistence
651
- - **D.** Discarding failed packets and prompting the user to re-submit
652
-
653
- <!--
654
- Presenter Notes:
655
- - Give students 30 seconds to vote on option A, B, C, or D.
656
- - Correct answer: B.
657
- - Explain why options A and C introduce catastrophic data loss in production.
658
- -->`
659
- },
660
- {
661
- id: "tiered-practice-3cards",
662
- name: "Tiered Differentiation (Bronze / Silver / Gold)",
663
- category: "content",
664
- description: "Three progressive competency tiers allowing self-paced learning acceleration.",
665
- layout: {
666
- boxes: [
667
- {
668
- id: "heading",
669
- target: "h2",
670
- pos: [80, 45, 1120, 65],
671
- fontSize: "1.9rem"
672
- },
673
- {
674
- id: "tier-bronze",
675
- target: ".columns-3 > div:nth-child(1)",
676
- pos: [80, 140, 350, 520]
677
- },
678
- {
679
- id: "tier-silver",
680
- target: ".columns-3 > div:nth-child(2)",
681
- pos: [465, 140, 350, 520]
682
- },
683
- {
684
- id: "tier-gold",
685
- target: ".columns-3 > div:nth-child(3)",
686
- pos: [850, 140, 350, 520]
687
- }
688
- ]
689
- },
690
- markdownSnippet: `<!-- layout:
691
- boxes:
692
- - id: heading
693
- target: h2
694
- pos: [80, 45, 1120, 65]
695
- fontSize: 1.9rem
696
- - id: tier-bronze
697
- target: '.columns-3 > div:nth-child(1)'
698
- pos: [80, 140, 350, 520]
699
- - id: tier-silver
700
- target: '.columns-3 > div:nth-child(2)'
701
- pos: [465, 140, 350, 520]
702
- - id: tier-gold
703
- target: '.columns-3 > div:nth-child(3)'
704
- pos: [850, 140, 350, 520]
705
- -->
706
-
707
- ## \u{1F6E0}\uFE0F Hands-On Challenge: 3-Tier Differentiation
708
-
709
- <div class="columns-3">
710
- <div>
711
-
712
- ### \u{1F949} Bronze Tier
713
- - Implement basic handler logic
714
- - Pass 3 baseline unit tests
715
- - *Goal: Foundational mastery*
716
-
717
- </div>
718
- <div>
719
-
720
- ### \u{1F948} Silver Tier
721
- - Add boundary error handling
722
- - Enforce O(N) memory complexity
723
- - *Goal: Production-ready code*
724
-
725
- </div>
726
- <div>
727
-
728
- ### \u{1F947} Gold Tier
729
- - Design distributed retry queue
730
- - Add 95% automated test coverage
731
- - *Goal: Architectural leadership*
732
-
733
- </div>
734
- </div>
735
-
736
- <!--
737
- Presenter Notes:
738
- - All learners begin at Bronze to establish baseline competency.
739
- - Accelerate self-directed learners to Silver and Gold as they complete each tier.
740
- -->`
741
- },
742
- {
743
- id: "agenda-timeline",
744
- name: "Session Agenda & Milestones",
745
- category: "content",
746
- description: "Structured time-budgeted agenda mapping stages to measurable deliverables.",
747
- layout: {
748
- boxes: [
749
- {
750
- id: "heading",
751
- target: "h2",
752
- pos: [80, 45, 1120, 65],
753
- fontSize: "1.9rem"
754
- },
755
- {
756
- id: "table-box",
757
- target: "table",
758
- pos: [80, 140, 1120, 520]
759
- }
760
- ]
761
- },
762
- markdownSnippet: `<!-- layout:
763
- boxes:
764
- - id: heading
765
- target: h2
766
- pos: [80, 45, 1120, 65]
767
- fontSize: 1.9rem
768
- - id: table-box
769
- target: table
770
- pos: [80, 140, 1120, 520]
771
- -->
772
-
773
- ## \u{1F5FA}\uFE0F Milestone Roadmap & Time Budget
774
-
775
- | Allocated Time | Session Stage | Core Learning Focus | Deliverable Milestone |
776
- |:---:|---|---|---|
777
- | **05 mins** | Warm-Up | Real-World Scenario & Context | Identify system bottleneck |
778
- | **15 mins** | Concept Discovery | Core Architectural Patterns | Deconstruct message queue models |
779
- | **20 mins** | Hands-On Lab | Tiered Code Implementation | Complete Bronze + Silver tasks |
780
- | **05 mins** | Wrap-Up | Formative Checkpoint & Debrief | Consolidate key principles |
781
-
782
- <!--
783
- Presenter Notes:
784
- - Walk through the time budget so students understand expectations and pacing.
785
- -->`
786
- },
787
- {
788
- id: "takeaways-summary",
789
- name: "Key Takeaways & Wrap-up",
790
- category: "content",
791
- description: "Three memorable synthesis takeaways with actionable next steps.",
792
- layout: {
793
- boxes: [
794
- {
795
- id: "heading",
796
- target: "h2",
797
- pos: [80, 50, 1120, 70],
798
- fontSize: "2rem"
799
- },
800
- {
801
- id: "list-box",
802
- target: "ol",
803
- pos: [80, 150, 1120, 340],
804
- fontSize: "1.25rem"
805
- },
806
- {
807
- id: "callout-next",
808
- target: "blockquote",
809
- pos: [80, 520, 1120, 140],
810
- fontSize: "1.1rem"
811
- }
812
- ]
813
- },
814
- markdownSnippet: `<!-- layout:
815
- boxes:
816
- - id: heading
817
- target: h2
818
- pos: [80, 50, 1120, 70]
819
- fontSize: 2rem
820
- - id: list-box
821
- target: ol
822
- pos: [80, 150, 1120, 340]
823
- fontSize: 1.25rem
824
- - id: callout-next
825
- target: blockquote
826
- pos: [80, 520, 1120, 140]
827
- fontSize: 1.1rem
828
- -->
829
-
830
- ## \u{1F3C1} Key Takeaways & Action Items
831
-
832
- 1. **Decouple Before Scaling:** Separate producer rate from consumer processing capacity.
833
- 2. **Design for Failure:** Always configure retries, backoff intervals, and dead-letter queues.
834
- 3. **Measure End-to-End:** Track P99 latency and error rates across all distributed boundaries.
835
-
836
- > \u{1F4DD} **Next Action Item:** Complete the Silver Tier refactoring challenge before our next peer-review session.
837
-
838
- <!--
839
- Presenter Notes:
840
- - Deliver a crisp 2-minute wrap-up reinforcing the 3 core takeaways.
841
- - Acknowledge strong peer collaboration during the hands-on lab.
842
- -->`
843
- }
844
- ];
845
- function getSlideLayoutPresetById(id) {
846
- return SLIDE_LAYOUT_PRESETS.find((p) => p.id === id);
847
- }
848
- function getSlideLayoutPresetsByCategory(category) {
849
- return SLIDE_LAYOUT_PRESETS.filter((p) => p.category === category);
75
+ );
850
76
  }
851
77
 
852
78
  // src/html-engine/themes.ts
@@ -1274,6 +500,133 @@ var HTML_SLIDE_PRESETS = {
1274
500
  }
1275
501
  };
1276
502
 
503
+ // src/html-engine/utilities.ts
504
+ var FONT_SIZES = [
505
+ // class, var, fallback px, line-height
506
+ ["xs", "--font-size-xs", "14px", "1.4"],
507
+ ["sm", "--font-size-sm", "16px", "1.45"],
508
+ ["base", "--font-size-base", "18px", "1.5"],
509
+ ["lg", "--font-size-lg", "20px", "1.5"],
510
+ ["xl", "--font-size-xl", "22px", "1.5"],
511
+ ["2xl", "--font-size-2xl", "26px", "1.4"],
512
+ ["3xl", "--font-size-3xl", "32px", "1.3"],
513
+ ["4xl", "--font-size-4xl", "38px", "1.25"],
514
+ ["6xl", "--font-size-6xl", "58px", "1.15"],
515
+ ["8xl", "--font-size-8xl", "96px", "1.05"]
516
+ ];
517
+ var SPACING = {
518
+ "0.5": "0.125rem",
519
+ "1": "0.25rem",
520
+ "1.5": "0.375rem",
521
+ "2": "0.5rem",
522
+ "2.5": "0.625rem",
523
+ "3": "0.75rem",
524
+ "4": "1rem",
525
+ "5": "1.25rem",
526
+ "6": "1.5rem",
527
+ "7": "1.75rem",
528
+ "8": "2rem",
529
+ "10": "2.5rem",
530
+ "12": "3rem",
531
+ "16": "4rem",
532
+ "20": "5rem",
533
+ "24": "6rem"
534
+ };
535
+ function sp(value) {
536
+ return `calc(${SPACING[value]} * var(--scale-spacing-eff, 1))`;
537
+ }
538
+ function fontSizeRules() {
539
+ return FONT_SIZES.map(
540
+ ([cls, cssVar, fallback, lh]) => `.text-${cls}{font-size:var(${cssVar}, ${fallback});line-height:${lh}}`
541
+ ).join("\n");
542
+ }
543
+ function spacingRules() {
544
+ const out = [];
545
+ for (const value of Object.keys(SPACING)) {
546
+ out.push(`.p-${value}{padding:${sp(value)}}`);
547
+ out.push(`.px-${value}{padding-left:${sp(value)};padding-right:${sp(value)}}`);
548
+ out.push(`.py-${value}{padding-top:${sp(value)};padding-bottom:${sp(value)}}`);
549
+ out.push(`.pt-${value}{padding-top:${sp(value)}}`);
550
+ out.push(`.pb-${value}{padding-bottom:${sp(value)}}`);
551
+ out.push(`.mt-${value}{margin-top:${sp(value)}}`);
552
+ out.push(`.mb-${value}{margin-bottom:${sp(value)}}`);
553
+ out.push(`.my-${value}{margin-top:${sp(value)};margin-bottom:${sp(value)}`);
554
+ out.push(`.gap-${value}{gap:${sp(value)}}`);
555
+ }
556
+ return out.join("\n");
557
+ }
558
+ function sizeRules() {
559
+ const out = [];
560
+ for (const value of Object.keys(SPACING)) {
561
+ out.push(`.w-${value}{width:${sp(value)}}`);
562
+ out.push(`.h-${value}{height:${sp(value)}}`);
563
+ }
564
+ return out.join("\n");
565
+ }
566
+ var SLIDE_UTILITY_CSS = `
567
+ /* preflight \u2014 the presets were authored against Tailwind's reset (no default
568
+ margins, no list markers, border-box everywhere), so it has to come along. */
569
+ .slide-page *,.slide-page *::before,.slide-page *::after{box-sizing:border-box;border-width:0;border-style:solid}
570
+ .slide-page h1,.slide-page h2,.slide-page h3,.slide-page h4,.slide-page h5,.slide-page h6,
571
+ .slide-page p,.slide-page ul,.slide-page ol,.slide-page li,.slide-page figure,.slide-page blockquote,
572
+ .slide-page pre,.slide-page dl,.slide-page dd{margin:0;padding:0}
573
+ .slide-page ul,.slide-page ol{list-style:none}
574
+ .slide-page img,.slide-page svg,.slide-page video{display:block;max-width:100%}
575
+ .slide-page button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
576
+ .slide-page table{border-collapse:collapse}
577
+ .slide-page a{color:inherit;text-decoration:inherit}
578
+ /* layout */
579
+ .flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-block{display:inline-block}
580
+ .flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.shrink-0{flex-shrink:0}
581
+ .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
582
+ .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
583
+ .grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
584
+ .col-span-5{grid-column:span 5/span 5}.col-span-7{grid-column:span 7/span 7}
585
+ .items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}
586
+ .justify-center{justify-content:center}.justify-between{justify-content:space-between}
587
+ .relative{position:relative}.overflow-hidden{overflow:hidden}.z-10{z-index:10}
588
+ .h-full{height:100%}.w-full{width:100%}.min-h-0{min-height:0}.my-auto{margin-top:auto;margin-bottom:auto}
589
+ .text-center{text-align:center}
590
+ /* typography */
591
+ .font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
592
+ .font-extrabold{font-weight:800}.font-black{font-weight:900}.font-mono{font-family:var(--font-code)}
593
+ .tracking-tighter{letter-spacing:-0.05em}.tracking-tight{letter-spacing:-0.025em}
594
+ .tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}
595
+ .uppercase{text-transform:uppercase}
596
+ .leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}
597
+ .max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}
598
+ ${fontSizeRules()}
599
+ /* spacing (scaled by the density editor) */
600
+ ${spacingRules()}
601
+ ${sizeRules()}
602
+ .space-y-3 > * + *{margin-top:${sp("3")}}
603
+ .space-y-4 > * + *{margin-top:${sp("4")}}
604
+ .space-y-6 > * + *{margin-top:${sp("6")}}
605
+ /* surfaces & color (theme-variable driven) */
606
+ .rounded{border-radius:0.25rem}.rounded-xl{border-radius:0.75rem}.rounded-full{border-radius:9999px}
607
+ .border{border-width:1px;border-style:solid;border-color:var(--border)}
608
+ .border-t{border-top-width:1px;border-top-style:solid;border-top-color:var(--border)}
609
+ .border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--border)}
610
+ .border-current{border-color:currentColor}
611
+ .shadow{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08)}
612
+ .shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.08)}
613
+ .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.15),0 4px 6px -4px rgba(0,0,0,.1)}
614
+ .opacity-60{opacity:.6}.opacity-65{opacity:.65}.opacity-75{opacity:.75}
615
+ .opacity-80{opacity:.8}.opacity-85{opacity:.85}.opacity-90{opacity:.9}
616
+ .bg-red-500\\/70{background-color:rgba(239,68,68,.7)}
617
+ .bg-yellow-500\\/70{background-color:rgba(234,179,8,.7)}
618
+ .bg-green-500\\/70{background-color:rgba(34,197,94,.7)}
619
+ /* theme color utilities (previously provided by tailwind.config extend) */
620
+ .text-primary{color:var(--primary)}.text-muted{color:var(--text-muted)}.text-themeText{color:var(--text)}
621
+ .bg-themeBg{background-color:var(--bg)}.bg-themeBgSecondary{background-color:var(--bg-secondary)}
622
+ .bg-themePrimary{background-color:var(--primary)}.border-themeBorder{border-color:var(--border)}
623
+ `.trim();
624
+ function listUtilityClasses() {
625
+ return Array.from(SLIDE_UTILITY_CSS.matchAll(/\.([a-zA-Z0-9\\/_.-]+)(?=[{,: >])/g)).map(
626
+ (m) => m[1].replace(/\\\//g, "/")
627
+ );
628
+ }
629
+
1277
630
  // src/html-engine/shell.ts
1278
631
  function generateHtmlShell(options) {
1279
632
  const { title, theme, slidesHtml, slideCount, customHeadTags = "", deckId = "" } = options;
@@ -1285,12 +638,16 @@ function generateHtmlShell(options) {
1285
638
  <title>${title}</title>
1286
639
 
1287
640
  <!-- Fonts -->
641
+ <!-- DECK_FONT_BLOCK_START -->${options?.fontFaceCss ? `
642
+ <style>
643
+ ${options.fontFaceCss}
644
+ </style>` : `
1288
645
  <link rel="preconnect" href="https://fonts.googleapis.com">
1289
646
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1290
- <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">
647
+ <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 -->
1291
648
 
1292
- <!-- Core Presentation Styling & 1920x1080 Scaled Tailwind Configuration -->
1293
- <script src="https://cdn.tailwindcss.com"></script>
649
+ <!-- Core Presentation Styling & 1920x1080 Scaled Layout Utilities (inlined) -->
650
+ <style>${SLIDE_UTILITY_CSS}</style>
1294
651
  <script>
1295
652
  window.tailwind = window.tailwind || {};
1296
653
  tailwind.config = {
@@ -1440,6 +797,59 @@ function generateHtmlShell(options) {
1440
797
  opacity: 1;
1441
798
  }
1442
799
 
800
+ /* \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
801
+ The frontend-slides mode hands the model the whole slide surface, so the
802
+ shell owns only what must stay invariant: full-stage sizing, border-box
803
+ maths, theme type defaults, and one orchestrated entrance. */
804
+ .bespoke-slide {
805
+ position: relative;
806
+ width: 100%;
807
+ height: 100%;
808
+ overflow: hidden;
809
+ }
810
+
811
+ .bespoke-slide,
812
+ .bespoke-slide *,
813
+ .bespoke-slide *::before,
814
+ .bespoke-slide *::after {
815
+ box-sizing: border-box;
816
+ }
817
+
818
+ .bespoke-slide h1,
819
+ .bespoke-slide h2 {
820
+ font-family: var(--font-display);
821
+ letter-spacing: -0.02em;
822
+ }
823
+
824
+ .bespoke-slide img,
825
+ .bespoke-slide svg {
826
+ max-width: 100%;
827
+ height: auto;
828
+ }
829
+
830
+ .slide-page.active .bespoke-slide > * {
831
+ animation: bespokeReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
832
+ }
833
+
834
+ .slide-page.active .bespoke-slide > *:nth-child(2) { animation-delay: 0.08s; }
835
+ .slide-page.active .bespoke-slide > *:nth-child(3) { animation-delay: 0.16s; }
836
+ .slide-page.active .bespoke-slide > *:nth-child(4) { animation-delay: 0.24s; }
837
+ .slide-page.active .bespoke-slide > *:nth-child(5) { animation-delay: 0.32s; }
838
+ .slide-page.active .bespoke-slide > *:nth-child(n + 6) { animation-delay: 0.4s; }
839
+
840
+ @keyframes bespokeReveal {
841
+ from { opacity: 0; transform: translateY(14px); }
842
+ to { opacity: 1; transform: none; }
843
+ }
844
+
845
+ @media (prefers-reduced-motion: reduce) {
846
+ .slide-page.active .bespoke-slide > * {
847
+ animation: none;
848
+ opacity: 1;
849
+ transform: none;
850
+ }
851
+ }
852
+
1443
853
  /* Top Progress Bar */
1444
854
  #progress-bar {
1445
855
  position: absolute;
@@ -3582,15 +2992,152 @@ main();`;
3582
2992
  return slots;
3583
2993
  }
3584
2994
 
2995
+ // src/html-engine/sanitize.ts
2996
+ var CONTAINER_TAGS = ["script", "iframe", "object", "embed", "applet", "form", "button", "textarea", "select", "template"];
2997
+ var VOID_TAGS = ["link", "meta", "base", "input"];
2998
+ var CONTAINER_ELEMENT_RE = new RegExp(
2999
+ `<(${CONTAINER_TAGS.join("|")})\\b[\\s\\S]*?<\\/\\1\\s*>`,
3000
+ "gi"
3001
+ );
3002
+ var STRAY_TAG_RE = new RegExp(`<\\/?(?:${[...CONTAINER_TAGS, ...VOID_TAGS].join("|")})\\b[^>]*>`, "gi");
3003
+ var EVENT_ATTR_RE = /\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi;
3004
+ var EXTERNAL_URL_RE = /^(?:https?:)?\/\//i;
3005
+ var CSS_URL_RE = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)'"\s]*))\s*\)/gi;
3006
+ var CSS_IMPORT_RE = /@import[^;]+;/gi;
3007
+ function isOffBoxUrl(url) {
3008
+ const value = url.trim();
3009
+ if (!value) return false;
3010
+ return EXTERNAL_URL_RE.test(value) || /^javascript:/i.test(value) || /^data:(?!image\/)/i.test(value);
3011
+ }
3012
+ function sanitizeSlideHtml(raw) {
3013
+ const removed = [];
3014
+ let html = String(raw ?? "");
3015
+ html = html.replace(CONTAINER_ELEMENT_RE, (_match, tag) => {
3016
+ removed.push(`<${String(tag).toLowerCase()}>`);
3017
+ return "";
3018
+ });
3019
+ html = html.replace(STRAY_TAG_RE, (match) => {
3020
+ const tag = (match.match(/^<\/?\s*([a-z]+)/i) || [])[1]?.toLowerCase();
3021
+ if (tag) removed.push(`<${tag}>`);
3022
+ return "";
3023
+ });
3024
+ const beforeEvents = html.length;
3025
+ html = html.replace(EVENT_ATTR_RE, "");
3026
+ if (html.length !== beforeEvents) removed.push("inline event handler");
3027
+ html = html.replace(CSS_URL_RE, (match, dq, sq, bare) => {
3028
+ if (!isOffBoxUrl(String(dq ?? sq ?? bare ?? ""))) return match;
3029
+ removed.push("external url()");
3030
+ return "none";
3031
+ });
3032
+ const beforeImports = html.length;
3033
+ html = html.replace(CSS_IMPORT_RE, "");
3034
+ if (html.length !== beforeImports) removed.push("@import");
3035
+ html = html.replace(/\s+(href|src|srcset|poster)\s*=\s*("([^"]*)"|'([^']*)')/gi, (match, attr, _q, dq, sq) => {
3036
+ const value = String(dq ?? sq ?? "").trim();
3037
+ if (!isOffBoxUrl(value)) return match;
3038
+ removed.push(`${attr}="${value.slice(0, 60)}"`);
3039
+ return "";
3040
+ });
3041
+ return { html: html.trim(), removed: Array.from(new Set(removed)) };
3042
+ }
3043
+ function validateBespokeSlideHtml(raw, contract = {}) {
3044
+ const maxChars = contract.maxChars ?? 16e3;
3045
+ const minChars = contract.minChars ?? 120;
3046
+ const issues = [];
3047
+ const html = String(raw ?? "").trim();
3048
+ if (!html) return { valid: false, issues: ["slide html is empty"] };
3049
+ if (html.length > maxChars) issues.push(`slide html exceeds ${maxChars} chars (${html.length})`);
3050
+ if (html.replace(/<[^>]*>/g, "").replace(/\s+/g, "").length < minChars) {
3051
+ issues.push("slide has too little text content to teach anything");
3052
+ }
3053
+ if (!/<h[12]\b/i.test(html)) {
3054
+ issues.push("slide has no <h1>/<h2> \u2014 typographic hierarchy is required");
3055
+ }
3056
+ const { html: clean, removed } = sanitizeSlideHtml(html);
3057
+ if (removed.length > 0) {
3058
+ issues.push(`slide is not self-contained (stripped: ${removed.join(", ")})`);
3059
+ }
3060
+ if (/<script\b/i.test(clean)) issues.push("slide still contains a script tag after sanitizing");
3061
+ if (/\b(todo|tbd|lorem ipsum|<code>)\b/i.test(clean) && !/<pre\b/i.test(clean)) {
3062
+ issues.push("slide contains placeholder text");
3063
+ }
3064
+ if (/<html\b|<body\b|<section\b[^>]*class="[^"]*slide-page/i.test(clean)) {
3065
+ issues.push("slide markup carries deck-level structure (html/body/section.slide-page)");
3066
+ }
3067
+ return { valid: issues.length === 0, issues };
3068
+ }
3069
+ function buildBespokeSlideMarkup(raw) {
3070
+ const { html } = sanitizeSlideHtml(raw);
3071
+ return `<div class="bespoke-slide">${html}</div>`;
3072
+ }
3073
+
3585
3074
  // src/html-engine/compiler.ts
3075
+ var SHIKI_LANGS = /* @__PURE__ */ new Set([
3076
+ "javascript",
3077
+ "typescript",
3078
+ "python",
3079
+ "cpp",
3080
+ "c",
3081
+ "java",
3082
+ "html",
3083
+ "css",
3084
+ "json",
3085
+ "yaml",
3086
+ "bash",
3087
+ "shell",
3088
+ "sql",
3089
+ "go",
3090
+ "rust",
3091
+ "swift",
3092
+ "kotlin",
3093
+ "ruby",
3094
+ "php",
3095
+ "xml",
3096
+ "markdown",
3097
+ "dockerfile",
3098
+ "toml",
3099
+ "ini",
3100
+ "graphql",
3101
+ "prisma",
3102
+ "solidity"
3103
+ ]);
3104
+ function normalizeShikiLang(lang) {
3105
+ if (!lang) return null;
3106
+ const l = String(lang).toLowerCase().trim();
3107
+ if (SHIKI_LANGS.has(l)) return l;
3108
+ if (l === "js") return "javascript";
3109
+ if (l === "ts") return "typescript";
3110
+ if (l === "py") return "python";
3111
+ if (l === "sh") return "bash";
3112
+ if (l === "yml") return "yaml";
3113
+ if (l === "c++") return "cpp";
3114
+ return null;
3115
+ }
3116
+ function decodeHtmlEntities2(html) {
3117
+ return html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#039;/g, "'").replace(/&#x27;/g, "'");
3118
+ }
3586
3119
  function compileHtmlDeck(deckData, options) {
3587
3120
  const theme = options?.themeOverride || resolveHtmlTheme(deckData.theme);
3588
3121
  const slides = deckData.slides || [];
3589
3122
  const slideCount = Math.max(slides.length, 1);
3590
3123
  const renderedSlides = slides.map((slide, index) => {
3124
+ if (typeof slide.html === "string" && slide.html.trim()) {
3125
+ const notesAttr2 = slide.notes ? ` data-notes="${encodeURIComponent(slide.notes)}"` : "";
3126
+ const customClass2 = slide.customClass ? ` ${slide.customClass}` : "";
3127
+ return `
3128
+ <!-- Slide ${index + 1}: authored html -->
3129
+ <section class="slide-page${customClass2}" data-index="${index}" data-layout="bespoke"${notesAttr2}>
3130
+ ${buildBespokeSlideMarkup(slide.html)}
3131
+ </section>
3132
+ `;
3133
+ }
3591
3134
  const preset = HTML_SLIDE_PRESETS[slide.layoutId] || HTML_SLIDE_PRESETS["hero-cover"];
3592
3135
  const normalizedSlots = normalizeSlideSlots(slide);
3593
- const innerHtml = preset.template(normalizedSlots, theme);
3136
+ let innerHtml = preset.template(normalizedSlots, theme);
3137
+ if (normalizedSlots.code != null && String(normalizedSlots.code).trim()) {
3138
+ const lang = normalizeShikiLang(normalizedSlots.language) || "typescript";
3139
+ innerHtml = innerHtml.replace("<code>", `<code class="language-${lang}">`);
3140
+ }
3594
3141
  const notesAttr = slide.notes ? ` data-notes="${encodeURIComponent(slide.notes)}"` : "";
3595
3142
  const customClass = slide.customClass ? ` ${slide.customClass}` : "";
3596
3143
  return `
@@ -3616,7 +3163,48 @@ function compileHtmlDeck(deckData, options) {
3616
3163
  title: deckData.title
3617
3164
  };
3618
3165
  }
3166
+ async function highlightDeckCodeBlocks(html, scheme = "dark") {
3167
+ if (!html.includes('<code class="language-')) return html;
3168
+ const highlighter = await getHighlighter();
3169
+ const shikiTheme = scheme === "light" ? "vitesse-light" : "vitesse-dark";
3170
+ return html.replace(
3171
+ /<pre([^>]*)><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g,
3172
+ (full, preAttrs, lang, escapedCode) => {
3173
+ try {
3174
+ const decoded = decodeHtmlEntities2(escapedCode);
3175
+ return highlighter.codeToHtml(decoded, { lang, theme: shikiTheme }).replace("<pre", `<pre${preAttrs}`);
3176
+ } catch {
3177
+ return full;
3178
+ }
3179
+ }
3180
+ );
3181
+ }
3182
+ async function compileHtmlDeckAsync(deckData, options) {
3183
+ const result = compileHtmlDeck(deckData, options);
3184
+ if (options?.highlight === false) return result;
3185
+ try {
3186
+ const html = await highlightDeckCodeBlocks(result.html, result.theme.scheme);
3187
+ return { ...result, html };
3188
+ } catch (err) {
3189
+ console.warn("[html-engine] Shiki highlighting unavailable, using plain escaped code:", err);
3190
+ return result;
3191
+ }
3192
+ }
3619
3193
 
3620
- export { HTML_SLIDE_PRESETS, HTML_THEMES, SLIDE_LAYOUT_PRESETS, compileHtmlDeck, generateHtmlShell, getSlideLayoutPresetById, getSlideLayoutPresetsByCategory, normalizeSlideSlots, removeSlideElementFromMarkdown, resolveHtmlTheme, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown, updateSlideTextInMarkdown };
3621
- //# sourceMappingURL=chunk-7QHDWDSB.js.map
3622
- //# sourceMappingURL=chunk-7QHDWDSB.js.map
3194
+ exports.HTML_SLIDE_PRESETS = HTML_SLIDE_PRESETS;
3195
+ exports.HTML_THEMES = HTML_THEMES;
3196
+ exports.SLIDE_UTILITY_CSS = SLIDE_UTILITY_CSS;
3197
+ exports.buildBespokeSlideMarkup = buildBespokeSlideMarkup;
3198
+ exports.compileHtmlDeck = compileHtmlDeck;
3199
+ exports.compileHtmlDeckAsync = compileHtmlDeckAsync;
3200
+ exports.generateHtmlShell = generateHtmlShell;
3201
+ exports.getHighlighter = getHighlighter;
3202
+ exports.highlightCodeBlocks = highlightCodeBlocks;
3203
+ exports.highlightDeckCodeBlocks = highlightDeckCodeBlocks;
3204
+ exports.listUtilityClasses = listUtilityClasses;
3205
+ exports.normalizeSlideSlots = normalizeSlideSlots;
3206
+ exports.resolveHtmlTheme = resolveHtmlTheme;
3207
+ exports.sanitizeSlideHtml = sanitizeSlideHtml;
3208
+ exports.validateBespokeSlideHtml = validateBespokeSlideHtml;
3209
+ //# sourceMappingURL=chunk-INAOTYLK.cjs.map
3210
+ //# sourceMappingURL=chunk-INAOTYLK.cjs.map