@thanh01.pmt/presentation-kit 0.1.1 → 0.2.0

package/dist/{chunk-N4Q6GUAQ.cjs → chunk-O4Y3VEOA.cjs}

@@ -1,7 +1,12 @@
 'use strict';
 
+var yaml = require('js-yaml');
 var marpCore = require('@marp-team/marp-core');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var yaml__default = /*#__PURE__*/_interopDefault(yaml);
+
 // src/core/arrow-converter.ts
 function convertTextArrows(text) {
   if (!text) return "";
@@ -390,9 +395,13 @@ function generateScopedCss(tokens, containerId = "marp-container") {
 }
 
 /* Slide Inner Section (1280x720 Canvas Coordinate Scale) */
+#${safeId} section:not([data-background-color]):not([style*="background"]),
+#${safeId} foreignObject > section:not([data-background-color]):not([style*="background"]) {
+  background-color: ${tokens.background} !important;
+}
+
 #${safeId} section,
 #${safeId} foreignObject > section {
-  background-color: ${tokens.background} !important;
   color: ${tokens.text} !important;
   font-family: var(--font-sans), Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
   padding: 50px 60px !important;
@@ -638,6 +647,43 @@ div#${safeId} svg foreignObject section table tr:hover td,
   padding-top: 6px !important;
 }
 
+/* Multi-column Grid & Flex Layout Utilities */
+#${safeId} section .columns,
+#${safeId} section .grid-2 {
+  display: grid !important;
+  grid-template-columns: 1fr 1fr !important;
+  gap: 28px !important;
+  width: 100% !important;
+  margin: 16px 0 !important;
+  align-items: start !important;
+}
+
+#${safeId} section .columns > div,
+#${safeId} section .grid-2 > div {
+  min-width: 0 !important;
+}
+
+#${safeId} section .card {
+  background: ${tokens.quoteBg} !important;
+  border: 1px solid ${tokens.cardBorder} !important;
+  border-radius: 10px !important;
+  padding: 18px 22px !important;
+  margin: 12px 0 !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+#${safeId} section .card.highlight {
+  border-left: 4px solid ${tokens.link} !important;
+}
+
+#${safeId} section .card.warning {
+  border-left: 4px solid #f59e0b !important;
+}
+
+#${safeId} section .card.success {
+  border-left: 4px solid #10b981 !important;
+}
+
 /* Marp Split Layout Container */
 #${safeId} section[data-marpit-advanced-background="background"] {
   display: flex !important;
@@ -1163,6 +1209,207 @@ ${prefix}[data-click-group].visible {
 
 `;
 }
+function isLayoutComment(comment) {
+  const trimmed = comment.trim();
+  return trimmed.startsWith("layout:") || trimmed.startsWith("layout :");
+}
+function parseLayoutFromComment(comment) {
+  try {
+    const trimmed = comment.trim();
+    if (!isLayoutComment(trimmed)) return null;
+    const parsed = yaml__default.default.load(trimmed);
+    if (!parsed || typeof parsed !== "object") return null;
+    const boxes = parsed.boxes ?? parsed.layout?.boxes;
+    if (Array.isArray(boxes)) {
+      return { boxes };
+    }
+    return null;
+  } catch (err) {
+    console.warn("[presentation-kit] Failed to parse layout comment YAML:", err);
+    return null;
+  }
+}
+function filterPresenterNotes(comments) {
+  return comments.map((c) => c.trim()).filter((c) => {
+    if (!c) return false;
+    if (isLayoutComment(c)) return false;
+    if (/^_?[a-zA-Z0-9_-]+\s*:/i.test(c) && !c.toLowerCase().startsWith("note:")) {
+      return false;
+    }
+    return true;
+  }).map((c) => {
+    return c.replace(/^_?note:\s*/i, "").trim();
+  });
+}
+function extractLayoutsAndNotes(rawComments) {
+  const layouts = [];
+  const notes = [];
+  for (const slideComments of rawComments) {
+    if (!slideComments || slideComments.length === 0) {
+      layouts.push(null);
+      notes.push([]);
+      continue;
+    }
+    let slideLayout = null;
+    for (const comment of slideComments) {
+      if (isLayoutComment(comment)) {
+        const parsed = parseLayoutFromComment(comment);
+        if (parsed) {
+          slideLayout = parsed;
+        }
+      }
+    }
+    layouts.push(slideLayout);
+    notes.push(filterPresenterNotes(slideComments));
+  }
+  return { layouts, notes };
+}
+function serializeLayoutToComment(layout) {
+  if (!layout.boxes || layout.boxes.length === 0) return "";
+  const cleanData = {
+    boxes: layout.boxes.map((box) => {
+      const b = {
+        id: box.id,
+        target: box.target || `h1`,
+        pos: [
+          Math.round(box.pos[0]),
+          Math.round(box.pos[1]),
+          Math.round(box.pos[2]),
+          Math.round(box.pos[3])
+        ]
+      };
+      if (box.fontSize) b.fontSize = box.fontSize;
+      if (box.color) b.color = box.color;
+      if (box.textAlign) b.textAlign = box.textAlign;
+      if (box.style) b.style = box.style;
+      return b;
+    })
+  };
+  const yamlStr = yaml__default.default.dump(cleanData, {
+    indent: 2,
+    lineWidth: -1,
+    noRefs: true
+  }).trim();
+  return `<!-- layout:
+  ${yamlStr.split("\n").join("\n  ")}
+-->`;
+}
+function splitMarkdownSlides(markdown) {
+  const lines = markdown.split("\n");
+  let frontmatter = null;
+  const slideBuffers = [];
+  let currentBuffer = [];
+  let inCodeFence = false;
+  let lineIdx = 0;
+  if (lines.length > 0 && lines[0].trim() === "---") {
+    const fmBuffer = [lines[0]];
+    lineIdx = 1;
+    while (lineIdx < lines.length) {
+      const line = lines[lineIdx];
+      fmBuffer.push(line);
+      if (line.trim() === "---") {
+        frontmatter = fmBuffer.join("\n");
+        lineIdx++;
+        break;
+      }
+      lineIdx++;
+    }
+  }
+  for (let i = lineIdx; i < lines.length; i++) {
+    const line = lines[i];
+    if (/^```/.test(line.trim())) {
+      inCodeFence = !inCodeFence;
+      currentBuffer.push(line);
+      continue;
+    }
+    if (!inCodeFence && line.trim() === "---") {
+      slideBuffers.push(currentBuffer);
+      currentBuffer = [];
+      continue;
+    }
+    currentBuffer.push(line);
+  }
+  slideBuffers.push(currentBuffer);
+  const slides = slideBuffers.map((b) => b.join("\n"));
+  return { frontmatter, slides };
+}
+function updateSlideLayoutInMarkdown(markdown, slideIndex, layout) {
+  const { frontmatter, slides } = splitMarkdownSlides(markdown);
+  if (slideIndex < 0 || slideIndex >= slides.length) {
+    return markdown;
+  }
+  let slideContent = slides[slideIndex];
+  const layoutCommentRegex = /<!--\s*layout:\s*[\s\S]*?-->/i;
+  const newComment = layout && layout.boxes && layout.boxes.length > 0 ? serializeLayoutToComment(layout) : "";
+  if (layoutCommentRegex.test(slideContent)) {
+    if (newComment) {
+      slideContent = slideContent.replace(layoutCommentRegex, newComment);
+    } else {
+      slideContent = slideContent.replace(layoutCommentRegex, "").trim();
+    }
+  } else if (newComment) {
+    const trimmed = slideContent.trimStart();
+    slideContent = `${newComment}
+
+${trimmed}`;
+  }
+  slides[slideIndex] = slideContent;
+  const joinedSlides = slides.join("\n---\n");
+  if (frontmatter) {
+    return `${frontmatter}
+
+${joinedSlides}`;
+  }
+  return joinedSlides;
+}
+
+// src/core/layout/css-generator.ts
+function generateLayoutCss(layouts, containerId = "marp-container") {
+  const cssRules = [];
+  layouts.forEach((layout, index) => {
+    if (!layout || !layout.boxes || layout.boxes.length === 0) return;
+    const slideNum = index + 1;
+    const slideSectionSelector = `#${containerId} svg[data-marpit-svg]:nth-of-type(${slideNum}) section, #${containerId} .marpit > svg:nth-of-type(${slideNum}) section`;
+    cssRules.push(`
+/* Slide ${slideNum} Layout Container */
+${slideSectionSelector} {
+  position: relative !important;
+  display: block !important;
+}`);
+    for (const box of layout.boxes) {
+      if (!box || !Array.isArray(box.pos) || box.pos.length < 4) continue;
+      const [x, y, w, h] = box.pos;
+      const targetSelector = box.target || `[data-box-id="${box.id}"]`;
+      const ruleSelector = `${slideSectionSelector} ${targetSelector}`;
+      const styles = [
+        `position: absolute !important`,
+        `left: ${Math.round(x)}px !important`,
+        `top: ${Math.round(y)}px !important`,
+        `width: ${Math.round(w)}px !important`,
+        `min-height: ${Math.round(h)}px !important`,
+        `box-sizing: border-box !important`,
+        `margin: 0 !important`
+      ];
+      if (box.fontSize) {
+        styles.push(`font-size: ${box.fontSize} !important`);
+      }
+      if (box.color) {
+        styles.push(`color: ${box.color} !important`);
+      }
+      if (box.textAlign) {
+        styles.push(`text-align: ${box.textAlign} !important`);
+      }
+      if (box.style) {
+        styles.push(box.style);
+      }
+      cssRules.push(`
+${ruleSelector} {
+  ${styles.join(";\n  ")};
+}`);
+    }
+  });
+  return cssRules.join("\n");
+}
 function renderMarp(markdown, containerId = "marp-container", enableClicks = false) {
   const cleanSource = extractMarpSource(markdown);
   const { markdown: clickProcessed, totalClicks } = enableClicks ? preprocessClicks(cleanSource) : { markdown: cleanSource, totalClicks: 0 };
@@ -1172,12 +1419,12 @@ function renderMarp(markdown, containerId = "marp-container", enableClicks = fal
     html: true,
     emoji: { unicode: true }
   });
-  const { html, css } = marp.render(arrowsConverted);
+  const { html, css, comments } = marp.render(arrowsConverted);
   if (enableClicks && totalClicks > 0) {
     const { html: processedHtml, totalClicks: finalClicks } = postprocessClicks(html);
-    return { html: processedHtml, css, maxClicks: finalClicks };
+    return { html: processedHtml, css, comments: comments ?? [], maxClicks: finalClicks };
   }
-  return { html, css, maxClicks: 0 };
+  return { html, css, comments: comments ?? [], maxClicks: 0 };
 }
 function countSlides(html) {
   const matches = html.match(/<svg[^>]*data-marpit-svg/g);
@@ -1187,44 +1434,51 @@ function renderSlide(markdown, options) {
   const containerId = options?.containerId ?? "marp-container";
   const theme = resolveTheme(options?.theme ?? "dark");
   const enableClicks = options?.enableClicks ?? false;
-  const { html, css, maxClicks } = renderMarp(markdown, containerId, enableClicks);
+  const { html, css, comments, maxClicks } = renderMarp(markdown, containerId, enableClicks);
   const themeCss = generateScopedCss2(theme, containerId);
   const slideCount = countSlides(html);
   const mermaidBlocks = options?.enableMermaid !== false ? detectMermaidBlocks(html) : [];
   const clickCss = enableClicks ? generateClickCss({ containerId }) : "";
+  const { layouts, notes } = extractLayoutsAndNotes(comments);
+  const layoutCss = generateLayoutCss(layouts, containerId);
   return {
     html,
     css,
     themeCss,
+    layoutCss,
     slideCount,
     mermaidBlocks,
     clickCss,
-    maxClicks
+    maxClicks,
+    notes,
+    layouts
   };
 }
 async function renderSlideAsync(markdown, options) {
   const containerId = options?.containerId ?? "marp-container";
   const theme = resolveTheme(options?.theme ?? "dark");
   const enableClicks = options?.enableClicks ?? false;
-  const { html, css, maxClicks } = renderMarp(markdown, containerId, enableClicks);
+  const { html, css, comments, maxClicks } = renderMarp(markdown, containerId, enableClicks);
   const themeCss = generateScopedCss2(theme, containerId);
   const slideCount = countSlides(html);
   const mermaidBlocks = options?.enableMermaid !== false ? detectMermaidBlocks(html) : [];
   const clickCss = enableClicks ? generateClickCss({ containerId }) : "";
-  let processedHtml = html;
-  if (options?.enableShiki !== false) {
-    const shikiThemeName = theme.name === "light" ? "light" : "dark";
-    processedHtml = await highlightCodeBlocks(html, shikiThemeName);
-  }
+  const { layouts, notes } = extractLayoutsAndNotes(comments);
+  const layoutCss = generateLayoutCss(layouts, containerId);
+  const enableShiki = options?.enableShiki ?? true;
+  const processedHtml = enableShiki ? await highlightCodeBlocks(html, theme.name) : html;
   return {
     html,
     css,
     themeCss,
+    layoutCss,
+    processedHtml,
     slideCount,
     mermaidBlocks,
     clickCss,
     maxClicks,
-    processedHtml
+    notes,
+    layouts
   };
 }
 
@@ -1233,16 +1487,21 @@ exports.countSlides = countSlides;
 exports.darkThemeTokens = darkThemeTokens;
 exports.defineTheme = defineTheme;
 exports.detectMermaidBlocks = detectMermaidBlocks;
+exports.extractLayoutsAndNotes = extractLayoutsAndNotes;
 exports.extractMarpSource = extractMarpSource;
 exports.extractMaxClicks = extractMaxClicks;
+exports.filterPresenterNotes = filterPresenterNotes;
 exports.generateClickCss = generateClickCss;
+exports.generateLayoutCss = generateLayoutCss;
 exports.generateScopedCss = generateScopedCss;
 exports.generateScopedCss2 = generateScopedCss2;
 exports.getHighlighter = getHighlighter;
 exports.getThemeTokens = getThemeTokens;
 exports.highlightCodeBlocks = highlightCodeBlocks;
+exports.isLayoutComment = isLayoutComment;
 exports.lightThemeTokens = lightThemeTokens;
 exports.navyThemeTokens = navyThemeTokens;
+exports.parseLayoutFromComment = parseLayoutFromComment;
 exports.postprocessClicks = postprocessClicks;
 exports.preprocessClicks = preprocessClicks;
 exports.renderMarp = renderMarp;
@@ -1251,5 +1510,8 @@ exports.renderSlide = renderSlide;
 exports.renderSlideAsync = renderSlideAsync;
 exports.resolveTheme = resolveTheme;
 exports.sanitizeMermaidCode = sanitizeMermaidCode;
-//# sourceMappingURL=chunk-N4Q6GUAQ.cjs.map
-//# sourceMappingURL=chunk-N4Q6GUAQ.cjs.map
+exports.serializeLayoutToComment = serializeLayoutToComment;
+exports.splitMarkdownSlides = splitMarkdownSlides;
+exports.updateSlideLayoutInMarkdown = updateSlideLayoutInMarkdown;
+//# sourceMappingURL=chunk-O4Y3VEOA.cjs.map
+//# sourceMappingURL=chunk-O4Y3VEOA.cjs.map