yumiamd 0.1.19 → 0.1.21

package/dist/{chunk-YEQHWFYS.js → chunk-TJR6MU2I.js}

@@ -143,6 +143,21 @@ function createColumns(columns, ratios, gap) {
     ...gap !== void 0 ? { gap } : {}
   };
 }
+function createSection(title, subtitle, number) {
+  return {
+    type: "section",
+    title,
+    ...subtitle ? { subtitle } : {},
+    ...number !== void 0 ? { number } : {}
+  };
+}
+function createToc(title, items) {
+  return {
+    type: "toc",
+    ...title ? { title } : {},
+    ...items ? { items } : {}
+  };
+}
 function createMath(expression, displayMode = true) {
   return {
     type: "math",
@@ -157,8 +172,75 @@ function createLayoutDirective(mode, attributes) {
     ...attributes ? { attributes } : {}
   };
 }
+function createIcon(name, provider, size, color) {
+  return {
+    type: "icon",
+    name,
+    ...provider ? { provider } : {},
+    ...size !== void 0 ? { size } : {},
+    ...color ? { color } : {}
+  };
+}
+function createGrid(elements, columns = 2, gap) {
+  return {
+    type: "grid",
+    columns,
+    elements,
+    ...gap !== void 0 ? { gap } : {}
+  };
+}
+function createStack(elements, direction = "vertical", gap, align, justify) {
+  return {
+    type: "stack",
+    direction,
+    elements,
+    ...gap !== void 0 ? { gap } : {},
+    ...align ? { align } : {},
+    ...justify ? { justify } : {}
+  };
+}
+function createComponent(name, props, elements) {
+  return {
+    type: "component",
+    name,
+    ...props ? { props } : {},
+    ...elements ? { elements } : {}
+  };
+}
+function createSlot(name, elements) {
+  return {
+    type: "slot",
+    ...name ? { name } : {},
+    ...elements ? { elements } : {}
+  };
+}
 
 // ../parser/dist/parser.js
+function parseHighlightLines(highlightStr) {
+  if (!highlightStr)
+    return [];
+  const lines = /* @__PURE__ */ new Set();
+  const parts = highlightStr.split(",");
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (!trimmed)
+      continue;
+    if (trimmed.includes("-")) {
+      const [startStr, endStr] = trimmed.split("-");
+      const start = parseInt(startStr || "0", 10);
+      const end = parseInt(endStr || "0", 10);
+      if (!isNaN(start) && !isNaN(end) && start <= end) {
+        for (let n = start; n <= end; n++)
+          lines.add(n);
+      }
+    } else {
+      const num = parseInt(trimmed, 10);
+      if (!isNaN(num))
+        lines.add(num);
+    }
+  }
+  return Array.from(lines).sort((a, b) => a - b);
+}
 var DefaultYumiaParser = class {
   diagnostics = [];
   parse(source, options) {
@@ -166,6 +248,11 @@ var DefaultYumiaParser = class {
     if (!source || typeof source !== "string") {
       return createPresentation({}, []);
     }
+    const trimmed = source.trimStart();
+    if (trimmed.startsWith("document ") || trimmed.startsWith("document\n") || trimmed.startsWith("slide ") || trimmed.startsWith("slide\n")) {
+      const nativeParser = new NativeYumiaParser();
+      return nativeParser.parse(source);
+    }
     const normalized = source.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
     const { metadata, content, lineOffset } = this.extractFrontmatter(normalized);
     if (!content.trim()) {
@@ -234,16 +321,34 @@ var DefaultYumiaParser = class {
   parseYamlMetadata(block) {
     const metadata = {};
     const lines = block.split("\n");
+    let currentKey = null;
     for (const line of lines) {
       const trimmed = line.trim();
       if (!trimmed || trimmed.startsWith("#"))
         continue;
+      if (trimmed.startsWith("- ") && currentKey) {
+        const itemVal = trimmed.slice(2).trim().replace(/^['"](.*)['"]$/, "$1");
+        if (Array.isArray(metadata[currentKey])) {
+          metadata[currentKey].push(itemVal);
+        } else {
+          metadata[currentKey] = [itemVal];
+        }
+        continue;
+      }
       const colonIndex = trimmed.indexOf(":");
       if (colonIndex > 0) {
         const key = trimmed.slice(0, colonIndex).trim();
         const rawVal = trimmed.slice(colonIndex + 1).trim();
-        const unquoted = rawVal.replace(/^['"](.*)['"]$/, "$1");
-        metadata[key] = unquoted;
+        currentKey = key;
+        if (rawVal.startsWith("[") && rawVal.endsWith("]")) {
+          const listItems = rawVal.slice(1, -1).split(",").map((item) => item.trim().replace(/^['"](.*)['"]$/, "$1")).filter(Boolean);
+          metadata[key] = listItems;
+        } else if (rawVal) {
+          const unquoted = rawVal.replace(/^['"](.*)['"]$/, "$1");
+          metadata[key] = unquoted;
+        } else {
+          metadata[key] = [];
+        }
       }
     }
     const result = {};
@@ -268,6 +373,23 @@ var DefaultYumiaParser = class {
     } else if (typeof metadata["embedFonts"] === "boolean") {
       result.embedFonts = metadata["embedFonts"];
     }
+    if (typeof metadata["watermark"] === "string") {
+      if (metadata["watermark"] === "false" || metadata["watermark"] === "none" || metadata["watermark"] === "off") {
+        result.watermark = false;
+      } else if (metadata["watermark"] === "true" || metadata["watermark"] === "yes" || metadata["watermark"] === "on") {
+        result.watermark = true;
+      } else {
+        result.watermark = metadata["watermark"];
+      }
+    } else if (typeof metadata["watermark"] === "boolean") {
+      result.watermark = metadata["watermark"];
+    }
+    if (metadata["styles"] || metadata["stylesheets"] || metadata["css"]) {
+      result.styles = metadata["styles"] || metadata["stylesheets"] || metadata["css"];
+    }
+    if (metadata["scripts"] || metadata["js"]) {
+      result.scripts = metadata["scripts"] || metadata["js"];
+    }
     const colors = {};
     if (typeof metadata["background"] === "string")
       colors.background = metadata["background"];
@@ -386,7 +508,16 @@ var DefaultYumiaParser = class {
       }
       if (line.startsWith("```")) {
         flushAll();
-        const language = line.slice(3).trim() || void 0;
+        let rawLang = line.slice(3).trim() || void 0;
+        let highlight;
+        if (rawLang) {
+          const hlMatch = rawLang.match(/\{([\d,\s-]+)\}/) || rawLang.match(/highlight=['"]([\d,\s-]+)['"]/);
+          if (hlMatch) {
+            highlight = hlMatch[1]?.trim();
+            rawLang = rawLang.replace(hlMatch[0], "").trim() || void 0;
+          }
+        }
+        const language = rawLang;
         const codeLines = [];
         const codeStartLine = currentLineNum;
         i++;
@@ -413,6 +544,10 @@ var DefaultYumiaParser = class {
           });
         }
         const el = createCode(codeLines.join("\n"), language);
+        if (highlight) {
+          el.highlight = highlight;
+          el.highlightLines = parseHighlightLines(highlight);
+        }
         el.loc = {
           start: { line: codeStartLine, column: 1 },
           end: { line: baseLine + i - 1, column: 1 }
@@ -462,7 +597,7 @@ var DefaultYumiaParser = class {
           const variantMatch = directiveHeader.match(/variant=['"](.*?)['"]/);
           const descMatch = directiveHeader.match(/description=['"](.*?)['"]/);
           const unitMatch = directiveHeader.match(/unit=['"](.*?)['"]/);
-          const changeMatch = directiveHeader.match(/change=['"](.*?)['"]/);
+          const changeMatch = directiveHeader.match(/(?:change|diff)=['"](.*?)['"]/);
           const value = valueMatch ? valueMatch[1] : "0";
           const label = labelMatch ? labelMatch[1] : "";
           const variant = variantMatch ? variantMatch[1] : void 0;
@@ -606,6 +741,82 @@ var DefaultYumiaParser = class {
             end: { line: baseLine + i - 1, column: 1 }
           };
           elements.push(el);
+        } else if (directiveName === "code") {
+          const langMatch = directiveArg.match(/lang(?:uage)?=['"](.*?)['"]/);
+          const hlMatch = directiveArg.match(/highlight=['"](.*?)['"]/);
+          let lang = langMatch ? langMatch[1] : directiveArg.split(" ")[0] || void 0;
+          if (lang && (lang.includes("=") || lang.startsWith("{")))
+            lang = void 0;
+          const hlBraceMatch = directiveArg.match(/\{([\d,\s-]+)\}/);
+          const highlight = hlMatch ? hlMatch[1] : hlBraceMatch ? hlBraceMatch[1] : void 0;
+          const codeContent = blockLines.join("\n");
+          const el = createCode(codeContent, lang);
+          if (highlight) {
+            el.highlight = highlight;
+            el.highlightLines = parseHighlightLines(highlight);
+          }
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
+        } else if (directiveName === "section") {
+          const allSectionText = [directiveArg, ...blockLines].join(" ");
+          const titleMatch = allSectionText.match(/\btitle=(?:"([^"]*)"|'([^']*)'|(\S+))/);
+          const subtitleMatch = allSectionText.match(/\bsubtitle=(?:"([^"]*)"|'([^']*)'|(\S+))/);
+          const numberMatch = allSectionText.match(/\bnumber=(?:"([^"]*)"|'([^']*)'|(\S+))/);
+          let subtitle = subtitleMatch ? subtitleMatch[1] ?? subtitleMatch[2] ?? subtitleMatch[3] : void 0;
+          const number = numberMatch ? numberMatch[1] ?? numberMatch[2] ?? numberMatch[3] : void 0;
+          let title = titleMatch ? titleMatch[1] ?? titleMatch[2] ?? titleMatch[3] : void 0;
+          if (!title) {
+            const stripped = directiveArg.replace(/\bsubtitle=(?:"[^"]*"|'[^']*'|\S+)/g, "").replace(/\bnumber=(?:"[^"]*"|'[^']*'|\S+)/g, "").trim();
+            title = stripped.replace(/^['"](.*)['"]$/, "$1").trim() || void 0;
+          }
+          if (!title && blockLines.length > 0) {
+            const plainLines = blockLines.filter((l) => !l.includes("subtitle=") && !l.includes("number="));
+            if (plainLines.length > 0)
+              title = plainLines[0]?.trim();
+            if (!subtitle && plainLines.length > 1)
+              subtitle = plainLines.slice(1).join("\n").trim();
+          }
+          const el = createSection(title || "Section", subtitle, number);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
+        } else if (directiveName === "toc") {
+          const titleMatch = directiveArg.match(/\btitle=(?:"([^"]*)"|'([^']*)'|(\S+))/);
+          let title = titleMatch ? titleMatch[1] ?? titleMatch[2] ?? titleMatch[3] : void 0;
+          if (!title) {
+            title = directiveArg.replace(/^['"](.*)['"]$/, "$1").trim() || void 0;
+          }
+          const items = [];
+          for (const bl of blockLines) {
+            const trimmed = bl.trim();
+            if (!trimmed)
+              continue;
+            const matchOrdered = trimmed.match(/^(\d+)\.\s+(.*?)(?:\s+[-–—:]\s+(.*))?$/);
+            const matchUnordered = trimmed.match(/^[-*]\s+(.*?)(?:\s+[-–—:]\s+(.*))?$/);
+            if (matchOrdered && matchOrdered[1] && matchOrdered[2]) {
+              items.push({
+                number: matchOrdered[1],
+                title: matchOrdered[2].trim(),
+                description: matchOrdered[3]?.trim() || void 0
+              });
+            } else if (matchUnordered && matchUnordered[1]) {
+              items.push({
+                title: matchUnordered[1].trim(),
+                description: matchUnordered[2]?.trim() || void 0
+              });
+            }
+          }
+          const el = createToc(title, items.length > 0 ? items : void 0);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
         } else if (directiveName === "step") {
           const { elements: stepElements } = this.parseLines(blockLines, blockBaseLine);
           for (const sEl of stepElements) {
@@ -620,6 +831,39 @@ var DefaultYumiaParser = class {
             end: { line: baseLine + i - 1, column: 1 }
           };
           elements.push(el);
+        } else if (directiveName === "icon") {
+          const nameMatch = directiveArg.match(/^(?:name=)?["']?([^"'\s]+)["']?/);
+          const name = nameMatch ? nameMatch[1] : directiveArg.trim();
+          const sizeMatch = directiveArg.match(/\bsize=["']?([^"'\s]+)["']?/);
+          const colorMatch = directiveArg.match(/\bcolor=["']?([^"'\s]+)["']?/);
+          const el = createIcon(name, void 0, sizeMatch ? sizeMatch[1] : void 0, colorMatch ? colorMatch[1] : void 0);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
+        } else if (directiveName === "grid") {
+          const colsMatch = directiveArg.match(/\bcolumns=["']?([^"'\s]+)["']?/);
+          const gapMatch = directiveArg.match(/\bgap=["']?([^"'\s]+)["']?/);
+          const columns = colsMatch ? parseInt(colsMatch[1], 10) || colsMatch[1] : 2;
+          const { elements: gridChildren } = this.parseLines(blockLines, blockBaseLine);
+          const el = createGrid(gridChildren, columns, gapMatch ? gapMatch[1] : void 0);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
+        } else if (directiveName === "stack") {
+          const dirMatch = directiveArg.match(/\bdirection=["']?(horizontal|vertical)["']?/);
+          const direction = dirMatch ? dirMatch[1] : "vertical";
+          const gapMatch = directiveArg.match(/\bgap=["']?([^"'\s]+)["']?/);
+          const { elements: stackChildren } = this.parseLines(blockLines, blockBaseLine);
+          const el = createStack(stackChildren, direction, gapMatch ? gapMatch[1] : void 0);
+          el.loc = {
+            start: { line: directiveStartLine, column: 1 },
+            end: { line: baseLine + i - 1, column: 1 }
+          };
+          elements.push(el);
         }
         continue;
       }
@@ -837,6 +1081,7 @@ var DefaultYumiaParser = class {
         series.push({ name: title || "Data", values });
       }
     }
+    const singleSeriesValues = [];
     for (const line of blockLines) {
       const trimmed = line.trim();
       if (!trimmed || trimmed.startsWith("#"))
@@ -858,13 +1103,28 @@ var DefaultYumiaParser = class {
           if (l && valStr) {
             labels.push(l);
             const val = parseFloat(valStr) || 0;
-            if (series.length === 0)
-              series.push({ name: "Data", values: [] });
-            series[0]?.values.push(val);
+            singleSeriesValues.push(val);
           }
         }
+      } else {
+        const kvMatch = trimmed.match(/^[-*]?\s*(.*?)\s*[:=]\s*([+-]?\d+(?:\.\d+)?%?)$/);
+        if (kvMatch && kvMatch[1] && kvMatch[2]) {
+          labels.push(kvMatch[1].trim());
+          const val = parseFloat(kvMatch[2].replace("%", "")) || 0;
+          singleSeriesValues.push(val);
+        }
       }
     }
+    if (singleSeriesValues.length > 0) {
+      if (series.length === 0) {
+        series.push({ name: title || "Data", values: singleSeriesValues });
+      } else if (series[0]) {
+        series[0].values.push(...singleSeriesValues);
+      }
+    }
+    if (series.length === 0) {
+      series.push({ name: title || "Data", values: [] });
+    }
     if (labels.length === 0) {
       const maxLen = Math.max(0, ...series.map((s) => s.values.length));
       labels = Array.from({ length: maxLen }, (_, i) => `Item ${i + 1}`);
@@ -910,6 +1170,13 @@ var DefaultYumiaParser = class {
     const rightMatch = headerArg.match(/right=['"](.*?)['"]/);
     const leftTitle = leftMatch ? leftMatch[1] : void 0;
     const rightTitle = rightMatch ? rightMatch[1] : void 0;
+    const hasColumns = blockLines.some((l) => l.trim().startsWith(":::column"));
+    if (hasColumns) {
+      const cols = this.parseColumnsBlock(blockLines, baseLine);
+      const leftElements2 = cols[0]?.elements || [];
+      const rightElements2 = cols[1]?.elements || [];
+      return createCompare(leftElements2, rightElements2, leftTitle, rightTitle);
+    }
     let leftLines = [];
     let rightLines = [];
     let currentSide = "left";
@@ -944,6 +1211,449 @@ function parseYumia(source, options) {
   return parser.parse(source, options);
 }
 
+// ../parser/dist/native-parser.js
+var NativeYumiaParser = class {
+  parse(source) {
+    const lines = source.split(/\r?\n/);
+    const tokens = [];
+    for (let i = 0; i < lines.length; i++) {
+      const raw = lines[i];
+      const matchIndent = raw.match(/^(\s*)/);
+      const indent = matchIndent ? matchIndent[1].length : 0;
+      const text = raw.trim();
+      if (!text || text.startsWith("//") || text.startsWith("#"))
+        continue;
+      const spaceIdx = text.indexOf(" ");
+      const command = spaceIdx === -1 ? text : text.slice(0, spaceIdx);
+      const args = spaceIdx === -1 ? "" : text.slice(spaceIdx + 1).trim();
+      tokens.push({
+        indent,
+        lineNum: i + 1,
+        text,
+        command: command.toLowerCase(),
+        args
+      });
+    }
+    const metadata = {};
+    const slides = [];
+    let currentSlideElements = [];
+    let currentSlide = null;
+    const flushSlide = () => {
+      if (currentSlide) {
+        currentSlide.elements = [...currentSlideElements];
+        slides.push(currentSlide);
+        currentSlideElements = [];
+        currentSlide = null;
+      }
+    };
+    let idx = 0;
+    while (idx < tokens.length) {
+      const tok = tokens[idx];
+      const cmdLower = tok.command.toLowerCase();
+      if (cmdLower === "document" || cmdLower === "title") {
+        metadata.title = this.stripQuotes(tok.args);
+        idx++;
+        continue;
+      }
+      if (cmdLower === "theme") {
+        metadata.theme = this.stripQuotes(tok.args);
+        idx++;
+        continue;
+      }
+      if (cmdLower === "aspectratio" || cmdLower === "ratio") {
+        metadata.aspectRatio = this.stripQuotes(tok.args);
+        idx++;
+        continue;
+      }
+      if (cmdLower === "transition") {
+        metadata.transition = this.stripQuotes(tok.args);
+        idx++;
+        continue;
+      }
+      if (cmdLower === "watermark") {
+        metadata.watermark = this.stripQuotes(tok.args);
+        idx++;
+        continue;
+      }
+      if (cmdLower === "author") {
+        metadata.author = this.stripQuotes(tok.args);
+        idx++;
+        continue;
+      }
+      if (tok.command === "slide" || tok.command === "---") {
+        flushSlide();
+        const slideTitle = tok.command === "slide" ? this.stripQuotes(tok.args) : void 0;
+        currentSlide = createSlide([], {
+          loc: {
+            start: { line: tok.lineNum, column: 1 },
+            end: { line: tok.lineNum, column: tok.text.length }
+          }
+        });
+        if (slideTitle) {
+          currentSlideElements.push(createHeading(slideTitle, 1));
+        }
+        idx++;
+        continue;
+      }
+      if (!currentSlide) {
+        currentSlide = createSlide([], {
+          loc: {
+            start: { line: tok.lineNum, column: 1 },
+            end: { line: tok.lineNum, column: tok.text.length }
+          }
+        });
+      }
+      if (tok.command === "notes") {
+        const noteLines = [];
+        idx++;
+        while (idx < tokens.length && tokens[idx].indent > tok.indent) {
+          noteLines.push(tokens[idx].text);
+          idx++;
+        }
+        currentSlide.notes = (currentSlide.notes ? currentSlide.notes + "\n" : "") + noteLines.join("\n");
+        continue;
+      }
+      const parsedEl = this.parseElement(tokens, idx);
+      if (parsedEl) {
+        currentSlideElements.push(parsedEl.element);
+        idx = parsedEl.nextIdx;
+      } else {
+        idx++;
+      }
+    }
+    flushSlide();
+    if (slides.length === 0) {
+      slides.push(createSlide([createHeading(metadata.title || "Untitled Presentation", 1)]));
+    }
+    return createPresentation(metadata, slides);
+  }
+  parseElement(tokens, idx) {
+    const tok = tokens[idx];
+    const baseIndent = tok.indent;
+    switch (tok.command) {
+      case "heading":
+      case "h1":
+      case "h2":
+      case "h3": {
+        const level = tok.command === "h1" ? 1 : tok.command === "h2" ? 2 : tok.command === "h3" ? 3 : 1;
+        const text = this.stripQuotes(tok.args);
+        return { element: createHeading(text, level), nextIdx: idx + 1 };
+      }
+      case "paragraph":
+      case "text":
+      case "p": {
+        let text = this.stripQuotes(tok.args);
+        let nextIdx = idx + 1;
+        if (!text) {
+          const pLines = [];
+          while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+            pLines.push(tokens[nextIdx].text);
+            nextIdx++;
+          }
+          text = pLines.join(" ");
+        }
+        return { element: createParagraph(text), nextIdx };
+      }
+      case "icon": {
+        const nameMatch = tok.args.match(/^(?:name=)?["']?([^"'\s]+)["']?/);
+        const name = nameMatch ? nameMatch[1] : tok.args.trim();
+        const sizeMatch = tok.args.match(/\bsize=["']?([^"'\s]+)["']?/);
+        const colorMatch = tok.args.match(/\bcolor=["']?([^"'\s]+)["']?/);
+        return {
+          element: createIcon(name, void 0, sizeMatch ? sizeMatch[1] : void 0, colorMatch ? colorMatch[1] : void 0),
+          nextIdx: idx + 1
+        };
+      }
+      case "card": {
+        const titleMatch = tok.args.match(/title=["']([^"']+)["']/);
+        const variantMatch = tok.args.match(/variant=["']?([^"'\s]+)["']?/);
+        const title = titleMatch ? titleMatch[1] : this.stripQuotes(tok.args) || void 0;
+        const variant = variantMatch ? variantMatch[1] : "default";
+        const children = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const childRes = this.parseElement(tokens, nextIdx);
+          if (childRes) {
+            children.push(childRes.element);
+            nextIdx = childRes.nextIdx;
+          } else {
+            nextIdx++;
+          }
+        }
+        return { element: createCard(children, title, variant), nextIdx };
+      }
+      case "columns": {
+        const ratios = tok.args || "50:50";
+        const cols = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const childRes = this.parseElement(tokens, nextIdx);
+          if (childRes) {
+            cols.push(childRes.element);
+            nextIdx = childRes.nextIdx;
+          } else {
+            nextIdx++;
+          }
+        }
+        const colElements = cols.map((c) => c.type === "column" ? c : createColumn([c]));
+        return { element: createColumns(colElements, ratios), nextIdx };
+      }
+      case "grid": {
+        const colsMatch = tok.args.match(/columns=["']?([^"'\s]+)["']?/);
+        const gapMatch = tok.args.match(/gap=["']?([^"'\s]+)["']?/);
+        const columns = colsMatch ? parseInt(colsMatch[1], 10) || colsMatch[1] : 2;
+        const gap = gapMatch ? gapMatch[1] : void 0;
+        const children = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const childRes = this.parseElement(tokens, nextIdx);
+          if (childRes) {
+            children.push(childRes.element);
+            nextIdx = childRes.nextIdx;
+          } else {
+            nextIdx++;
+          }
+        }
+        return { element: createGrid(children, columns, gap), nextIdx };
+      }
+      case "stack": {
+        const dirMatch = tok.args.match(/direction=["']?(horizontal|vertical)["']?/);
+        const direction = dirMatch ? dirMatch[1] : "vertical";
+        const gapMatch = tok.args.match(/gap=["']?([^"'\s]+)["']?/);
+        const children = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const childRes = this.parseElement(tokens, nextIdx);
+          if (childRes) {
+            children.push(childRes.element);
+            nextIdx = childRes.nextIdx;
+          } else {
+            nextIdx++;
+          }
+        }
+        return {
+          element: createStack(children, direction, gapMatch ? gapMatch[1] : void 0),
+          nextIdx
+        };
+      }
+      case "metric": {
+        const valMatch = tok.args.match(/^(?:value=)?["']([^"']+)["']/);
+        const labelMatch = tok.args.match(/\blabel=["']([^"']+)["']/);
+        const diffMatch = tok.args.match(/\bdiff=["']([^"']+)["']/);
+        const variantMatch = tok.args.match(/\bvariant=["']?([^"'\s]+)["']?/);
+        const value = valMatch ? valMatch[1] : "0";
+        const label = labelMatch ? labelMatch[1] : "Metric";
+        return {
+          element: createMetric(value, label, variantMatch ? variantMatch[1] : "primary", void 0, void 0, diffMatch ? diffMatch[1] : void 0),
+          nextIdx: idx + 1
+        };
+      }
+      case "code": {
+        const langMatch = tok.args.match(/\blang(?:uage)?=["']?([^"'\s]+)["']?/);
+        const hlMatch = tok.args.match(/\bhighlight=["']([^"']+)["']/);
+        const codeLines = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          codeLines.push(tokens[nextIdx].text);
+          nextIdx++;
+        }
+        const el = createCode(codeLines.join("\n"), langMatch ? langMatch[1] : void 0);
+        if (hlMatch && hlMatch[1]) {
+          el.highlight = hlMatch[1];
+          el.highlightLines = parseHighlightLines(hlMatch[1]);
+        }
+        return { element: el, nextIdx };
+      }
+      case "section": {
+        const titleMatch = tok.args.match(/^(?:title=)?["']([^"']+)["']/);
+        const subtitleMatch = tok.args.match(/\bsubtitle=["']([^"']+)["']/);
+        const numMatch = tok.args.match(/\bnumber=["']?([^"'\s]+)["']?/);
+        const title = titleMatch ? titleMatch[1] : this.stripQuotes(tok.args) || "Section";
+        return {
+          element: createSection(title, subtitleMatch ? subtitleMatch[1] : void 0, numMatch ? numMatch[1] : void 0),
+          nextIdx: idx + 1
+        };
+      }
+      case "toc": {
+        const title = this.stripQuotes(tok.args) || "Table of Contents";
+        return { element: createToc(title), nextIdx: idx + 1 };
+      }
+      case "badge": {
+        const textMatch = tok.args.match(/^(?:text=)?["']([^"']+)["']/);
+        const variantMatch = tok.args.match(/\bvariant=["']?([^"'\s]+)["']?/);
+        const text = textMatch ? textMatch[1] : this.stripQuotes(tok.args);
+        return {
+          element: createBadge(text, variantMatch ? variantMatch[1] : "default"),
+          nextIdx: idx + 1
+        };
+      }
+      case "list": {
+        const items = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const sub = tokens[nextIdx];
+          if (sub.command === "item" || sub.command === "-") {
+            items.push({ text: this.stripQuotes(sub.args) });
+          } else {
+            items.push({ text: sub.text.replace(/^[-*]\s*/, "") });
+          }
+          nextIdx++;
+        }
+        return { element: createList(items, false), nextIdx };
+      }
+      case "quote": {
+        const authorMatch = tok.args.match(/\bauthor=["']([^"']+)["']/);
+        const textLines = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          textLines.push(tokens[nextIdx].text);
+          nextIdx++;
+        }
+        return {
+          element: createQuote(textLines.join(" "), authorMatch ? authorMatch[1] : void 0),
+          nextIdx
+        };
+      }
+      default:
+        return { element: createParagraph(tok.text), nextIdx: idx + 1 };
+    }
+  }
+  stripQuotes(str) {
+    if (!str)
+      return "";
+    const trimmed = str.trim();
+    if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+      return trimmed.slice(1, -1);
+    }
+    return trimmed;
+  }
+};
+function parseNativeYumia(source) {
+  const parser = new NativeYumiaParser();
+  return parser.parse(source);
+}
+
+// ../parser/dist/migrator.js
+function migrateMarkdownToNative(source) {
+  const presentation = parseYumia(source);
+  const out = [];
+  if (presentation.metadata.title) {
+    out.push(`document "${presentation.metadata.title}"`);
+  }
+  if (presentation.metadata.theme) {
+    const themeName = typeof presentation.metadata.theme === "string" ? presentation.metadata.theme : presentation.metadata.theme.name;
+    out.push(`  theme "${themeName}"`);
+  }
+  if (presentation.metadata.author) {
+    out.push(`  author "${presentation.metadata.author}"`);
+  }
+  if (presentation.metadata.aspectRatio) {
+    out.push(`  aspectRatio "${presentation.metadata.aspectRatio}"`);
+  }
+  if (presentation.metadata.transition) {
+    const trans = typeof presentation.metadata.transition === "string" ? presentation.metadata.transition : presentation.metadata.transition.type;
+    out.push(`  transition "${trans}"`);
+  }
+  if (presentation.metadata.watermark) {
+    out.push(`  watermark "${presentation.metadata.watermark}"`);
+  }
+  out.push("");
+  for (const slide of presentation.slides) {
+    const firstHeading = slide.elements.find((el) => el.type === "heading");
+    const slideTitle = firstHeading && firstHeading.level === 1 ? firstHeading.text : "";
+    if (slideTitle) {
+      out.push(`slide "${slideTitle}"`);
+    } else {
+      out.push("slide");
+    }
+    if (slide.transition) {
+      const trans = typeof slide.transition === "string" ? slide.transition : slide.transition.type;
+      out.push(`  transition "${trans}"`);
+    }
+    for (const el of slide.elements) {
+      if (el === firstHeading && firstHeading.level === 1)
+        continue;
+      out.push(serializeElement(el, 2));
+    }
+    if (slide.notes) {
+      out.push("  notes");
+      for (const nl of slide.notes.split("\n")) {
+        out.push(`    ${nl}`);
+      }
+    }
+    out.push("");
+  }
+  return out.join("\n").trim() + "\n";
+}
+function serializeElement(el, indent) {
+  const pad = " ".repeat(indent);
+  switch (el.type) {
+    case "heading":
+      return `${pad}heading "${el.text}"`;
+    case "paragraph":
+      return `${pad}text "${el.text}"`;
+    case "icon":
+      return `${pad}icon "${el.name}"`;
+    case "badge":
+      return `${pad}badge "${el.text}" variant="${el.variant || "default"}"`;
+    case "metric":
+      return `${pad}metric "${el.value}" label="${el.label}"${el.change ? ` diff="${el.change}"` : ""}`;
+    case "code": {
+      const hl = el.highlight ? ` highlight="${el.highlight}"` : "";
+      const lang = el.language ? ` lang="${el.language}"` : "";
+      const codeLines = el.code.split("\n").map((l) => `${pad}  ${l}`).join("\n");
+      return `${pad}code${lang}${hl}
+${codeLines}`;
+    }
+    case "section": {
+      const sub = el.subtitle ? ` subtitle="${el.subtitle}"` : "";
+      const num = el.number !== void 0 ? ` number="${el.number}"` : "";
+      return `${pad}section "${el.title}"${sub}${num}`;
+    }
+    case "toc":
+      return `${pad}toc "${el.title || "Table of Contents"}"`;
+    case "card": {
+      const cleanTitle = (el.title || "").replace(/^[Tt]itle=['"]?/, "").replace(/['"]$/, "");
+      const title = cleanTitle ? ` title="${cleanTitle}"` : "";
+      const v = el.variant ? ` variant="${el.variant}"` : "";
+      const cardChildren = (el.elements || []).map((c) => serializeElement(c, indent + 2)).join("\n");
+      return `${pad}card${title}${v}
+${cardChildren}`;
+    }
+    case "grid": {
+      const gridChildren = el.elements.map((c) => serializeElement(c, indent + 2)).join("\n");
+      return `${pad}grid columns=${el.columns}
+${gridChildren}`;
+    }
+    case "stack": {
+      const stackChildren = el.elements.map((c) => serializeElement(c, indent + 2)).join("\n");
+      return `${pad}stack direction="${el.direction}"
+${stackChildren}`;
+    }
+    case "columns": {
+      const colChildren = el.columns.map((col) => {
+        const inner = col.elements.map((c) => serializeElement(c, indent + 4)).join("\n");
+        return `${pad}  column
+${inner}`;
+      }).join("\n");
+      return `${pad}columns ${el.ratios || "50:50"}
+${colChildren}`;
+    }
+    case "list": {
+      const listItems = el.items.map((it) => `${pad}  item "${it.text}"`).join("\n");
+      return `${pad}list
+${listItems}`;
+    }
+    case "quote": {
+      const qAuthor = el.author ? ` author="${el.author}"` : "";
+      return `${pad}quote${qAuthor}
+${pad}  ${el.text}`;
+    }
+    default:
+      return `${pad}// [${el.type}]`;
+  }
+}
+
 // ../layout/dist/engine.js
 var DEFAULT_VIEWPORT = {
   width: 1920,
@@ -1036,6 +1746,14 @@ var DefaultLayoutEngine = class {
         const height = 90;
         return { element, bounds: { x, y, width, height } };
       }
+      case "section": {
+        const height = 280;
+        return { element, bounds: { x, y, width, height } };
+      }
+      case "toc": {
+        const height = 320;
+        return { element, bounds: { x, y, width, height } };
+      }
       case "card": {
         return this.layoutCard(element, x, y, width, gap);
       }
@@ -1753,50 +2471,559 @@ var academicTheme = {
     }
   }
 };
-var THEME_REGISTRY = {
-  default: defaultTheme,
-  cyberpunk: cyberpunkTheme,
-  minimal: minimalTheme,
-  corporate: corporateTheme,
-  terminal: terminalTheme,
-  academic: academicTheme
-};
-function resolveTheme(themeNameOrRef, explicitOverrides) {
-  const name = typeof themeNameOrRef === "string" ? themeNameOrRef : themeNameOrRef?.name || "default";
-  const baseTheme = THEME_REGISTRY[name.toLowerCase()] || defaultTheme;
-  const refOverrides = typeof themeNameOrRef === "object" ? themeNameOrRef.overrides : void 0;
-  const mergedOverrides = {
-    ...refOverrides,
-    ...explicitOverrides,
-    colors: { ...baseTheme.colors, ...refOverrides?.colors, ...explicitOverrides?.colors },
-    typography: {
-      ...baseTheme.typography,
-      ...refOverrides?.typography,
-      ...explicitOverrides?.typography,
-      sizes: {
-        ...baseTheme.typography.sizes,
-        ...refOverrides?.typography?.sizes,
-        ...explicitOverrides?.typography?.sizes
-      },
-      weights: {
-        ...baseTheme.typography.weights,
-        ...refOverrides?.typography?.weights,
-        ...explicitOverrides?.typography?.weights
-      },
-      lineHeights: {
-        ...baseTheme.typography.lineHeights,
-        ...refOverrides?.typography?.lineHeights,
-        ...explicitOverrides?.typography?.lineHeights
-      }
-    },
-    spacing: {
-      ...baseTheme.spacing,
-      ...refOverrides?.spacing,
-      ...explicitOverrides?.spacing,
-      safeArea: {
-        ...baseTheme.spacing.safeArea,
-        ...refOverrides?.spacing?.safeArea,
-        ...explicitOverrides?.spacing?.safeArea
+var nordTheme = {
+  name: "nord",
+  description: "Arctic, north-bluish clean dark palette for elegant developer decks",
+  colors: {
+    primary: "#88C0D0",
+    secondary: "#81A1C1",
+    background: "#2E3440",
+    surface: "#3B4252",
+    elevatedSurface: "#434C5E",
+    text: "#ECEFF4",
+    muted: "#D8DEE9",
+    accent: "#5E81AC",
+    border: "#4C566A",
+    divider: "#434C5E",
+    success: "#A3BE8C",
+    warning: "#EBCB8B",
+    danger: "#BF616A",
+    info: "#88C0D0"
+  },
+  typography: {
+    headingFont: "Inter, system-ui, sans-serif",
+    bodyFont: "Inter, system-ui, sans-serif",
+    codeFont: "JetBrains Mono, Fira Code, monospace",
+    sizes: {
+      display: 56,
+      h1: 44,
+      h2: 36,
+      h3: 28,
+      h4: 22,
+      body: 18,
+      small: 14,
+      caption: 12,
+      code: 16,
+      quote: 20,
+      metadata: 12
+    },
+    weights: {
+      normal: 400,
+      medium: 500,
+      bold: 700
+    },
+    lineHeights: {
+      tight: 1.15,
+      snug: 1.3,
+      normal: 1.55,
+      relaxed: 1.7
+    },
+    letterSpacing: {
+      tight: "-0.02em",
+      normal: "0em",
+      wide: "0.03em"
+    }
+  },
+  spacing: {
+    unit: 8,
+    scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96],
+    slidePadding: 48,
+    elementGap: 24,
+    safeArea: { top: 48, bottom: 48, left: 48, right: 48 }
+  },
+  radius: {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 14,
+    xl: 20,
+    full: 9999,
+    default: 8
+  },
+  shadows: {
+    none: "none",
+    sm: "0 2px 4px rgba(0, 0, 0, 0.25)",
+    md: "0 6px 12px rgba(0, 0, 0, 0.35)",
+    lg: "0 12px 24px rgba(0, 0, 0, 0.45)",
+    glow: "0 0 16px rgba(136, 192, 208, 0.35)"
+  },
+  components: {
+    card: {
+      background: "#3B4252",
+      borderColor: "#88C0D0",
+      borderRadius: 10,
+      padding: 24
+    },
+    metric: {
+      valueColor: "#88C0D0",
+      labelColor: "#D8DEE9",
+      borderRadius: 10
+    },
+    code: {
+      background: "#242933",
+      textColor: "#ECEFF4",
+      borderRadius: 8
+    },
+    table: {
+      headerBackground: "#434C5E",
+      rowAlternateBackground: "#3B4252",
+      borderColor: "#4C566A"
+    }
+  }
+};
+var draculaTheme = {
+  name: "dracula",
+  description: "Famous dark theme with rich purples, vibrant pinks and pastel highlights",
+  colors: {
+    primary: "#BD93F9",
+    secondary: "#FF79C6",
+    background: "#282A36",
+    surface: "#343746",
+    elevatedSurface: "#44475A",
+    text: "#F8F8F2",
+    muted: "#6272A4",
+    accent: "#8BE9FD",
+    border: "#44475A",
+    divider: "#6272A4",
+    success: "#50FA7B",
+    warning: "#F1FA8C",
+    danger: "#FF5555",
+    info: "#8BE9FD"
+  },
+  typography: {
+    headingFont: "Outfit, Inter, sans-serif",
+    bodyFont: "Inter, sans-serif",
+    codeFont: "Fira Code, JetBrains Mono, monospace",
+    sizes: {
+      display: 56,
+      h1: 44,
+      h2: 36,
+      h3: 28,
+      h4: 22,
+      body: 18,
+      small: 14,
+      caption: 12,
+      code: 16,
+      quote: 20,
+      metadata: 12
+    },
+    weights: {
+      normal: 400,
+      medium: 500,
+      bold: 700
+    },
+    lineHeights: {
+      tight: 1.15,
+      snug: 1.3,
+      normal: 1.55,
+      relaxed: 1.7
+    },
+    letterSpacing: {
+      tight: "-0.02em",
+      normal: "0em",
+      wide: "0.03em"
+    }
+  },
+  spacing: {
+    unit: 8,
+    scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96],
+    slidePadding: 48,
+    elementGap: 24,
+    safeArea: { top: 48, bottom: 48, left: 48, right: 48 }
+  },
+  radius: {
+    none: 0,
+    sm: 4,
+    md: 10,
+    lg: 16,
+    xl: 24,
+    full: 9999,
+    default: 10
+  },
+  shadows: {
+    none: "none",
+    sm: "0 2px 5px rgba(0, 0, 0, 0.3)",
+    md: "0 8px 16px rgba(0, 0, 0, 0.45)",
+    lg: "0 16px 32px rgba(0, 0, 0, 0.6)",
+    glow: "0 0 20px rgba(189, 147, 249, 0.4)"
+  },
+  components: {
+    card: {
+      background: "#343746",
+      borderColor: "#BD93F9",
+      borderRadius: 12,
+      padding: 24
+    },
+    metric: {
+      valueColor: "#FF79C6",
+      labelColor: "#6272A4",
+      borderRadius: 12
+    },
+    code: {
+      background: "#1E1F29",
+      textColor: "#F8F8F2",
+      borderRadius: 8
+    },
+    table: {
+      headerBackground: "#44475A",
+      rowAlternateBackground: "#343746",
+      borderColor: "#6272A4"
+    }
+  }
+};
+var tokyoNightTheme = {
+  name: "tokyo-night",
+  description: "Sleek Tokyo Night neon indigo theme with cyan, violet and magenta tones",
+  colors: {
+    primary: "#7AA2F7",
+    secondary: "#BB9AF7",
+    background: "#1A1B26",
+    surface: "#24283B",
+    elevatedSurface: "#2F354A",
+    text: "#C0CAF5",
+    muted: "#565F89",
+    accent: "#7DCFFF",
+    border: "#2F354A",
+    divider: "#414868",
+    success: "#9ECE6A",
+    warning: "#E0AF68",
+    danger: "#F7768E",
+    info: "#7DCFFF"
+  },
+  typography: {
+    headingFont: "Outfit, Inter, sans-serif",
+    bodyFont: "Inter, sans-serif",
+    codeFont: "JetBrains Mono, monospace",
+    sizes: {
+      display: 58,
+      h1: 46,
+      h2: 36,
+      h3: 28,
+      h4: 22,
+      body: 18,
+      small: 14,
+      caption: 12,
+      code: 16,
+      quote: 20,
+      metadata: 12
+    },
+    weights: {
+      normal: 400,
+      medium: 500,
+      bold: 700
+    },
+    lineHeights: {
+      tight: 1.15,
+      snug: 1.3,
+      normal: 1.55,
+      relaxed: 1.7
+    },
+    letterSpacing: {
+      tight: "-0.02em",
+      normal: "0em",
+      wide: "0.03em"
+    }
+  },
+  spacing: {
+    unit: 8,
+    scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96],
+    slidePadding: 48,
+    elementGap: 24,
+    safeArea: { top: 48, bottom: 48, left: 48, right: 48 }
+  },
+  radius: {
+    none: 0,
+    sm: 6,
+    md: 10,
+    lg: 16,
+    xl: 24,
+    full: 9999,
+    default: 10
+  },
+  shadows: {
+    none: "none",
+    sm: "0 2px 4px rgba(0, 0, 0, 0.3)",
+    md: "0 6px 14px rgba(0, 0, 0, 0.45)",
+    lg: "0 14px 28px rgba(0, 0, 0, 0.6)",
+    glow: "0 0 18px rgba(122, 162, 247, 0.4)"
+  },
+  components: {
+    card: {
+      background: "#24283B",
+      borderColor: "#7AA2F7",
+      borderRadius: 12,
+      padding: 24
+    },
+    metric: {
+      valueColor: "#7AA2F7",
+      labelColor: "#565F89",
+      borderRadius: 12
+    },
+    code: {
+      background: "#16161E",
+      textColor: "#C0CAF5",
+      borderRadius: 8
+    },
+    table: {
+      headerBackground: "#2F354A",
+      rowAlternateBackground: "#24283B",
+      borderColor: "#414868"
+    }
+  }
+};
+var emeraldTheme = {
+  name: "emerald",
+  description: "Deep forest luxury green with mint and emerald highlights",
+  colors: {
+    primary: "#10B981",
+    secondary: "#34D399",
+    background: "#022C22",
+    surface: "#064E3B",
+    elevatedSurface: "#065F46",
+    text: "#ECFDF5",
+    muted: "#6EE7B7",
+    accent: "#A7F3D0",
+    border: "#047857",
+    divider: "#065F46",
+    success: "#34D399",
+    warning: "#FBBF24",
+    danger: "#F87171",
+    info: "#38BDF8"
+  },
+  typography: {
+    headingFont: "Outfit, Inter, sans-serif",
+    bodyFont: "Inter, sans-serif",
+    codeFont: "JetBrains Mono, monospace",
+    sizes: {
+      display: 56,
+      h1: 44,
+      h2: 36,
+      h3: 28,
+      h4: 22,
+      body: 18,
+      small: 14,
+      caption: 12,
+      code: 16,
+      quote: 20,
+      metadata: 12
+    },
+    weights: {
+      normal: 400,
+      medium: 500,
+      bold: 700
+    },
+    lineHeights: {
+      tight: 1.15,
+      snug: 1.3,
+      normal: 1.55,
+      relaxed: 1.7
+    },
+    letterSpacing: {
+      tight: "-0.02em",
+      normal: "0em",
+      wide: "0.03em"
+    }
+  },
+  spacing: {
+    unit: 8,
+    scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96],
+    slidePadding: 48,
+    elementGap: 24,
+    safeArea: { top: 48, bottom: 48, left: 48, right: 48 }
+  },
+  radius: {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 16,
+    xl: 24,
+    full: 9999,
+    default: 8
+  },
+  shadows: {
+    none: "none",
+    sm: "0 2px 4px rgba(0, 0, 0, 0.3)",
+    md: "0 6px 14px rgba(0, 0, 0, 0.45)",
+    lg: "0 14px 28px rgba(0, 0, 0, 0.6)",
+    glow: "0 0 18px rgba(16, 185, 129, 0.4)"
+  },
+  components: {
+    card: {
+      background: "#064E3B",
+      borderColor: "#10B981",
+      borderRadius: 12,
+      padding: 24
+    },
+    metric: {
+      valueColor: "#10B981",
+      labelColor: "#6EE7B7",
+      borderRadius: 12
+    },
+    code: {
+      background: "#011A14",
+      textColor: "#ECFDF5",
+      borderRadius: 8
+    },
+    table: {
+      headerBackground: "#065F46",
+      rowAlternateBackground: "#064E3B",
+      borderColor: "#047857"
+    }
+  }
+};
+var synthwaveTheme = {
+  name: "synthwave",
+  description: "80s retro neon sunset with hot pink, glowing cyan and electric violet",
+  colors: {
+    primary: "#FF71CE",
+    secondary: "#01CDFE",
+    background: "#1A0E2E",
+    surface: "#261447",
+    elevatedSurface: "#351B63",
+    text: "#FFFFFF",
+    muted: "#B967FF",
+    accent: "#05FFA1",
+    border: "#4D288C",
+    divider: "#6432B8",
+    success: "#05FFA1",
+    warning: "#FFFB96",
+    danger: "#FF2A6D",
+    info: "#01CDFE"
+  },
+  typography: {
+    headingFont: "Outfit, Inter, sans-serif",
+    bodyFont: "Inter, sans-serif",
+    codeFont: "Fira Code, monospace",
+    sizes: {
+      display: 58,
+      h1: 46,
+      h2: 38,
+      h3: 28,
+      h4: 22,
+      body: 18,
+      small: 14,
+      caption: 12,
+      code: 16,
+      quote: 20,
+      metadata: 12
+    },
+    weights: {
+      normal: 400,
+      medium: 500,
+      bold: 700
+    },
+    lineHeights: {
+      tight: 1.15,
+      snug: 1.3,
+      normal: 1.55,
+      relaxed: 1.7
+    },
+    letterSpacing: {
+      tight: "-0.02em",
+      normal: "0em",
+      wide: "0.04em"
+    }
+  },
+  spacing: {
+    unit: 8,
+    scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96],
+    slidePadding: 48,
+    elementGap: 24,
+    safeArea: { top: 48, bottom: 48, left: 48, right: 48 }
+  },
+  radius: {
+    none: 0,
+    sm: 6,
+    md: 12,
+    lg: 18,
+    xl: 26,
+    full: 9999,
+    default: 12
+  },
+  shadows: {
+    none: "none",
+    sm: "0 2px 6px rgba(0, 0, 0, 0.4)",
+    md: "0 8px 18px rgba(0, 0, 0, 0.6)",
+    lg: "0 16px 36px rgba(0, 0, 0, 0.75)",
+    glow: "0 0 22px rgba(255, 113, 206, 0.5)"
+  },
+  components: {
+    card: {
+      background: "#261447",
+      borderColor: "#FF71CE",
+      borderRadius: 14,
+      padding: 24
+    },
+    metric: {
+      valueColor: "#FF71CE",
+      labelColor: "#B967FF",
+      borderRadius: 14
+    },
+    code: {
+      background: "#11091F",
+      textColor: "#05FFA1",
+      borderRadius: 8
+    },
+    table: {
+      headerBackground: "#351B63",
+      rowAlternateBackground: "#261447",
+      borderColor: "#4D288C"
+    }
+  }
+};
+var THEME_REGISTRY = {
+  default: defaultTheme,
+  cyberpunk: cyberpunkTheme,
+  minimal: minimalTheme,
+  corporate: corporateTheme,
+  terminal: terminalTheme,
+  academic: academicTheme,
+  nord: nordTheme,
+  dracula: draculaTheme,
+  "tokyo-night": tokyoNightTheme,
+  tokyonight: tokyoNightTheme,
+  midnight: tokyoNightTheme,
+  emerald: emeraldTheme,
+  forest: emeraldTheme,
+  synthwave: synthwaveTheme,
+  sunset: synthwaveTheme
+};
+function resolveTheme(themeNameOrRef, explicitOverrides) {
+  const name = typeof themeNameOrRef === "string" ? themeNameOrRef : themeNameOrRef?.name || "default";
+  const baseTheme = THEME_REGISTRY[name.toLowerCase()] || defaultTheme;
+  const refOverrides = typeof themeNameOrRef === "object" ? themeNameOrRef.overrides : void 0;
+  const mergedOverrides = {
+    ...refOverrides,
+    ...explicitOverrides,
+    colors: { ...baseTheme.colors, ...refOverrides?.colors, ...explicitOverrides?.colors },
+    typography: {
+      ...baseTheme.typography,
+      ...refOverrides?.typography,
+      ...explicitOverrides?.typography,
+      sizes: {
+        ...baseTheme.typography.sizes,
+        ...refOverrides?.typography?.sizes,
+        ...explicitOverrides?.typography?.sizes
+      },
+      weights: {
+        ...baseTheme.typography.weights,
+        ...refOverrides?.typography?.weights,
+        ...explicitOverrides?.typography?.weights
+      },
+      lineHeights: {
+        ...baseTheme.typography.lineHeights,
+        ...refOverrides?.typography?.lineHeights,
+        ...explicitOverrides?.typography?.lineHeights
+      }
+    },
+    spacing: {
+      ...baseTheme.spacing,
+      ...refOverrides?.spacing,
+      ...explicitOverrides?.spacing,
+      safeArea: {
+        ...baseTheme.spacing.safeArea,
+        ...refOverrides?.spacing?.safeArea,
+        ...explicitOverrides?.spacing?.safeArea
       }
     },
     radius: {
@@ -2248,6 +3475,174 @@ function lint(sourceOrPresentation, options) {
   return defaultCompiler.lint(sourceOrPresentation, options);
 }
 
+// ../renderer/dist/icons.js
+var BUILTIN_ICONS = {
+  // Lucide & General
+  rocket: {
+    name: "rocket",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>'
+  },
+  code: {
+    name: "code",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>'
+  },
+  terminal: {
+    name: "terminal",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>'
+  },
+  cpu: {
+    name: "cpu",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/>'
+  },
+  database: {
+    name: "database",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>'
+  },
+  zap: {
+    name: "zap",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>'
+  },
+  shield: {
+    name: "shield",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>'
+  },
+  activity: {
+    name: "activity",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>'
+  },
+  palette: {
+    name: "palette",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>'
+  },
+  chart: {
+    name: "chart",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>'
+  },
+  layers: {
+    name: "layers",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>'
+  },
+  users: {
+    name: "users",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>'
+  },
+  check: {
+    name: "check",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<polyline points="20 6 9 17 4 12"/>'
+  },
+  "git-branch": {
+    name: "git-branch",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>'
+  },
+  globe: {
+    name: "globe",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>'
+  },
+  sparkles: {
+    name: "sparkles",
+    provider: "lucide",
+    viewBox: "0 0 24 24",
+    path: '<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/>'
+  }
+};
+var IconResolver = class {
+  cache = /* @__PURE__ */ new Map();
+  customProviders = /* @__PURE__ */ new Map();
+  constructor() {
+    for (const [key, def] of Object.entries(BUILTIN_ICONS)) {
+      this.cache.set(key, def);
+      this.cache.set(`lucide:${key}`, def);
+      this.cache.set(`material:${key}`, { ...def, provider: "material" });
+      this.cache.set(`fa:${key}`, { ...def, provider: "fa" });
+      this.cache.set(`tabler:${key}`, { ...def, provider: "tabler" });
+      this.cache.set(`heroicons:${key}`, { ...def, provider: "heroicons" });
+    }
+  }
+  registerProvider(name, resolver) {
+    this.customProviders.set(name.toLowerCase(), resolver);
+  }
+  resolve(rawName, options = {}) {
+    const trimmed = rawName.trim();
+    if (!trimmed) {
+      return this.getFallback("unknown");
+    }
+    if (this.cache.has(trimmed.toLowerCase())) {
+      return this.cache.get(trimmed.toLowerCase());
+    }
+    let provider = options.defaultProvider || "lucide";
+    let iconName = trimmed;
+    if (trimmed.includes(":")) {
+      const parts = trimmed.split(":");
+      provider = parts[0].toLowerCase();
+      iconName = parts.slice(1).join(":").toLowerCase();
+    }
+    if (this.customProviders.has(provider)) {
+      const customDef = this.customProviders.get(provider)(iconName);
+      if (customDef) {
+        this.cache.set(trimmed.toLowerCase(), customDef);
+        return customDef;
+      }
+    }
+    if (this.cache.has(iconName)) {
+      const def = { ...this.cache.get(iconName), provider };
+      this.cache.set(trimmed.toLowerCase(), def);
+      return def;
+    }
+    if (options.strict) {
+      throw new Error(`Icon '${trimmed}' not found in registry (provider: ${provider})`);
+    }
+    const fallback = this.getFallback(iconName, provider);
+    this.cache.set(trimmed.toLowerCase(), fallback);
+    return fallback;
+  }
+  getFallback(iconName, provider = "lucide") {
+    const initial = iconName.charAt(0).toUpperCase() || "\u2605";
+    return {
+      name: iconName,
+      provider,
+      viewBox: "0 0 24 24",
+      path: `<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><text x="12" y="16" text-anchor="middle" font-size="11" font-weight="bold" fill="currentColor" font-family="sans-serif">${initial}</text>`
+    };
+  }
+  toSvg(rawName, size = 24, color, className = "yumia-icon") {
+    const icon = this.resolve(rawName);
+    const fill = color ? `color="${color}"` : "";
+    const style = color ? `style="color:${color}; fill:none; stroke:currentColor;"` : 'style="fill:none; stroke:currentColor;"';
+    return `<svg class="${className}" width="${size}" height="${size}" viewBox="${icon.viewBox}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ${fill} ${style}>${icon.path}</svg>`;
+  }
+};
+var defaultIconResolver = new IconResolver();
+
 // ../renderer-pptx/dist/renderer.js
 import pptxgen from "pptxgenjs";
 var CSS_NAMED_COLORS = {
@@ -2294,6 +3689,8 @@ function cleanFontFace(fontString) {
   return "Segoe UI";
 }
 function parseInlineMarkdown(rawText, baseOptions) {
+  if (!rawText)
+    return [];
   const chunks = [];
   const regex = /(\*\*.*?\*\*|\*.*?\*|`.*?`)/g;
   const parts = rawText.split(regex);
@@ -2356,7 +3753,7 @@ var PptxRenderer = class {
       pptxSlide.background = { color: bgColor };
       const slideLayout = this.layoutEngine.computeSlide(slide, pixelViewport);
       for (const node of slideLayout.nodes) {
-        this.renderNode(pptxSlide, pptx, node, scaleX, scaleY, theme);
+        this.renderNode(pptxSlide, pptx, node, scaleX, scaleY, theme, presentation);
       }
       if (slide.notes) {
         pptxSlide.addNotes(slide.notes);
@@ -2371,7 +3768,7 @@ var PptxRenderer = class {
       fileName: `${title.toLowerCase().replace(/[^a-z0-9]+/g, "-")}.pptx`
     };
   }
-  renderNode(pptxSlide, pptx, node, scaleX, scaleY, theme) {
+  renderNode(pptxSlide, pptx, node, scaleX, scaleY, theme, presentation) {
     const { element, bounds } = node;
     const rect = this.toInches(bounds, scaleX, scaleY);
     switch (element.type) {
@@ -2400,10 +3797,10 @@ var PptxRenderer = class {
         this.renderMetric(pptxSlide, pptx, node, scaleX, scaleY, theme);
         break;
       case "card":
-        this.renderCard(pptxSlide, pptx, node, scaleX, scaleY, theme);
+        this.renderCard(pptxSlide, pptx, node, scaleX, scaleY, theme, presentation);
         break;
       case "columns":
-        this.renderColumns(pptxSlide, pptx, node, scaleX, scaleY, theme);
+        this.renderColumns(pptxSlide, pptx, node, scaleX, scaleY, theme, presentation);
         break;
       case "badge":
         this.renderBadge(pptxSlide, pptx, element, rect, theme);
@@ -2417,12 +3814,42 @@ var PptxRenderer = class {
       case "compare":
         this.renderCompare(pptxSlide, pptx, node, scaleX, scaleY, theme);
         break;
+      case "section":
+        this.renderSection(pptxSlide, pptx, element, rect, theme);
+        break;
+      case "toc":
+        this.renderToc(pptxSlide, pptx, element, rect, theme, presentation);
+        break;
       case "mermaid":
         this.renderMermaid(pptxSlide, pptx, element, rect, theme);
         break;
       case "math":
         this.renderMath(pptxSlide, pptx, element, rect, theme);
         break;
+      case "icon": {
+        const ic = element;
+        const iconName = ic.name.replace(/^[^:]+:/, "").toUpperCase();
+        pptxSlide.addText(`\u2605 ${iconName}`, {
+          x: rect.x,
+          y: rect.y,
+          w: Math.max(rect.w, 1.5),
+          h: Math.max(rect.h, 0.4),
+          fontSize: 14,
+          bold: true,
+          color: this.cleanHexColor(theme.colors.primary),
+          valign: "middle"
+        });
+        break;
+      }
+      case "grid":
+      case "stack": {
+        if (node.children) {
+          for (const childNode of node.children) {
+            this.renderNode(pptxSlide, pptx, childNode, scaleX, scaleY, theme, presentation);
+          }
+        }
+        break;
+      }
       default:
         break;
     }
@@ -2636,7 +4063,7 @@ var PptxRenderer = class {
       });
     }
   }
-  renderCard(pptxSlide, pptx, node, scaleX, scaleY, theme) {
+  renderCard(pptxSlide, pptx, node, scaleX, scaleY, theme, presentation) {
     const card = node.element;
     const rect = this.toInches(node.bounds, scaleX, scaleY);
     const cardTheme = theme.components?.card;
@@ -2657,6 +4084,14 @@ var PptxRenderer = class {
       line: { color: borderColor, width: 1.5 },
       rectRadius: 0.08
     });
+    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+      x: rect.x + 0.02,
+      y: rect.y + 0.04,
+      w: 0.06,
+      h: rect.h - 0.08,
+      fill: { color: borderColor },
+      rectRadius: 0.03
+    });
     if (card.title) {
       pptxSlide.addText(card.title, {
         x: rect.x + 0.25,
@@ -2671,16 +4106,16 @@ var PptxRenderer = class {
     }
     if (node.children) {
       for (const childNode of node.children) {
-        this.renderNode(pptxSlide, pptx, childNode, scaleX, scaleY, theme);
+        this.renderNode(pptxSlide, pptx, childNode, scaleX, scaleY, theme, presentation);
       }
     }
   }
-  renderColumns(pptxSlide, pptx, node, scaleX, scaleY, theme) {
+  renderColumns(pptxSlide, pptx, node, scaleX, scaleY, theme, presentation) {
     if (node.children) {
       for (const colNode of node.children) {
         if (colNode.children) {
           for (const itemNode of colNode.children) {
-            this.renderNode(pptxSlide, pptx, itemNode, scaleX, scaleY, theme);
+            this.renderNode(pptxSlide, pptx, itemNode, scaleX, scaleY, theme, presentation);
           }
         }
       }
@@ -2688,26 +4123,88 @@ var PptxRenderer = class {
   }
   renderCode(pptxSlide, pptx, code, rect, theme) {
     const codeTheme = theme.components?.code;
-    const bgColor = this.cleanHexColor(codeTheme?.background || "#0f172a");
+    const bgColor = this.cleanHexColor(codeTheme?.background || "#0a0f1d");
     const textColor = this.cleanHexColor(codeTheme?.textColor || "#f8fafc");
+    const primaryColor = this.cleanHexColor(theme.colors.primary || "#00F0FF");
+    const mutedColor = this.cleanHexColor(theme.colors.muted || "#64748b");
     pptxSlide.addShape(pptx.ShapeType.roundRect, {
       x: rect.x,
       y: rect.y,
       w: rect.w,
       h: rect.h,
       fill: { color: bgColor },
+      line: { color: this.cleanHexColor(theme.colors.border || "#1e293b"), width: 1 },
       rectRadius: 0.05
     });
-    pptxSlide.addText(code.code, {
-      x: rect.x + 0.2,
-      y: rect.y + 0.15,
-      w: rect.w - 0.4,
-      h: rect.h - 0.3,
-      fontSize: 14,
-      fontFace: "Courier New",
-      color: textColor,
-      valign: "top"
-    });
+    const lines = code.code.split("\n");
+    if (code.highlight) {
+      const highlightSet = /* @__PURE__ */ new Set();
+      const parts = code.highlight.split(",");
+      for (const part of parts) {
+        const trimmed = part.trim();
+        if (!trimmed)
+          continue;
+        if (trimmed.includes("-")) {
+          const [startStr, endStr] = trimmed.split("-");
+          const start = parseInt(startStr || "0", 10);
+          const end = parseInt(endStr || "0", 10);
+          if (!isNaN(start) && !isNaN(end) && start <= end) {
+            for (let n = start; n <= end; n++)
+              highlightSet.add(n);
+          }
+        } else {
+          const num = parseInt(trimmed, 10);
+          if (!isNaN(num))
+            highlightSet.add(num);
+        }
+      }
+      const chunks = [];
+      lines.forEach((line, idx) => {
+        const lineNum = idx + 1;
+        const isHl = highlightSet.has(lineNum);
+        const lineNumPad = String(lineNum).padStart(2, "0");
+        const numColor = isHl ? primaryColor : mutedColor;
+        const contentColor = isHl ? primaryColor : mutedColor;
+        chunks.push({
+          text: `${lineNumPad}  `,
+          options: {
+            fontSize: 12,
+            fontFace: "Consolas",
+            color: numColor,
+            bold: isHl
+          }
+        });
+        chunks.push({
+          text: line || " ",
+          options: {
+            fontSize: 12,
+            fontFace: "Consolas",
+            color: contentColor,
+            bold: isHl,
+            breakLine: idx < lines.length - 1
+          }
+        });
+      });
+      pptxSlide.addText(chunks, {
+        x: rect.x + 0.2,
+        y: rect.y + 0.15,
+        w: rect.w - 0.4,
+        h: rect.h - 0.3,
+        valign: "top",
+        margin: 0
+      });
+    } else {
+      pptxSlide.addText(code.code, {
+        x: rect.x + 0.2,
+        y: rect.y + 0.15,
+        w: rect.w - 0.4,
+        h: rect.h - 0.3,
+        fontSize: 13,
+        fontFace: "Consolas",
+        color: textColor,
+        valign: "top"
+      });
+    }
   }
   renderQuote(pptxSlide, pptx, quote, rect, theme) {
     const accentColor = this.cleanHexColor(theme.colors.accent || theme.colors.primary);
@@ -2734,7 +4231,8 @@ var PptxRenderer = class {
   renderBadge(pptxSlide, pptx, badge, rect, theme) {
     const colorKey = badge.variant || "primary";
     const badgeColor = this.cleanHexColor(theme.colors[colorKey] || theme.colors.primary);
-    const badgeW = Math.min(2.5, Math.max(1, badge.text.length * 0.12 + 0.4));
+    const badgeText = badge.text;
+    const badgeW = Math.min(2.5, Math.max(1, badgeText.length * 0.12 + 0.4));
     const badgeH = Math.min(0.38, rect.h);
     pptxSlide.addShape(pptx.ShapeType.roundRect, {
       x: rect.x,
@@ -2745,7 +4243,7 @@ var PptxRenderer = class {
       line: { color: badgeColor, width: 1.5 },
       rectRadius: 0.15
     });
-    pptxSlide.addText(badge.text.toUpperCase(), {
+    pptxSlide.addText(badgeText.toUpperCase(), {
       x: rect.x,
       y: rect.y,
       w: badgeW,
@@ -2853,9 +4351,10 @@ var PptxRenderer = class {
           align: "center"
         });
       }
+      const cleanTitle = item.title;
       const descText = item.description ? `
 ${item.description}` : "";
-      pptxSlide.addText(`${item.title}${descText}`, {
+      pptxSlide.addText(`${cleanTitle}${descText}`, {
         x: itemX + 0.05,
         y: lineY + 0.45,
         w: itemW - 0.1,
@@ -2879,7 +4378,7 @@ ${item.description}` : "";
       w: colW,
       h: rect.h,
       fill: { color: this.cleanHexColor(theme.colors.surface) },
-      line: { color: this.cleanHexColor(theme.colors.border), width: 1 },
+      line: { color: this.cleanHexColor(theme.colors.border), width: 1.5 },
       rectRadius: 0.1
     });
     if (compare.leftTitle) {
@@ -2888,34 +4387,244 @@ ${item.description}` : "";
         y: rect.y + 0.15,
         w: colW - 0.3,
         h: 0.4,
-        fontSize: 14,
+        fontSize: 15,
+        bold: true,
+        color: this.cleanHexColor(theme.colors.primary),
+        fontFace: cleanFontFace(theme.typography.headingFont)
+      });
+    }
+    const rightX = rect.x + colW + 0.4;
+    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+      x: rightX,
+      y: rect.y,
+      w: colW,
+      h: rect.h,
+      fill: { color: this.cleanHexColor(theme.colors.surface) },
+      line: { color: this.cleanHexColor(theme.colors.border), width: 1.5 },
+      rectRadius: 0.1
+    });
+    if (compare.rightTitle) {
+      pptxSlide.addText(compare.rightTitle, {
+        x: rightX + 0.15,
+        y: rect.y + 0.15,
+        w: colW - 0.3,
+        h: 0.4,
+        fontSize: 15,
         bold: true,
         color: this.cleanHexColor(theme.colors.primary),
         fontFace: cleanFontFace(theme.typography.headingFont)
       });
     }
-    const rightX = rect.x + colW + 0.4;
-    pptxSlide.addShape(pptx.ShapeType.roundRect, {
-      x: rightX,
-      y: rect.y,
-      w: colW,
-      h: rect.h,
-      fill: { color: this.cleanHexColor(theme.colors.surface) },
-      line: { color: this.cleanHexColor(theme.colors.border), width: 1 },
-      rectRadius: 0.1
-    });
-    if (compare.rightTitle) {
-      pptxSlide.addText(compare.rightTitle, {
-        x: rightX + 0.15,
-        y: rect.y + 0.15,
-        w: colW - 0.3,
-        h: 0.4,
-        fontSize: 14,
+    const vsX = rect.x + colW + 0.05;
+    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+      x: vsX,
+      y: rect.y + rect.h / 2 - 0.18,
+      w: 0.3,
+      h: 0.3,
+      fill: { color: this.cleanHexColor(theme.colors.border || "#334155") },
+      rectRadius: 0.15
+    });
+    pptxSlide.addText("VS", {
+      x: vsX,
+      y: rect.y + rect.h / 2 - 0.18,
+      w: 0.3,
+      h: 0.3,
+      fontSize: 10,
+      bold: true,
+      color: this.cleanHexColor(theme.colors.muted || "#94a3b8"),
+      fontFace: cleanFontFace(theme.typography.headingFont),
+      align: "center",
+      valign: "middle"
+    });
+  }
+  renderSection(pptxSlide, pptx, section, rect, theme) {
+    const cardBg = this.cleanHexColor(theme.colors.surface || "#0f172a");
+    const primaryHex = this.cleanHexColor(theme.colors.primary || "#00F0FF");
+    pptxSlide.addShape(pptx.ShapeType.roundRect, {
+      x: rect.x,
+      y: rect.y,
+      w: rect.w,
+      h: rect.h,
+      fill: { color: cardBg },
+      line: { color: primaryHex, width: 2 },
+      rectRadius: 0.1
+    });
+    if (section.number !== void 0) {
+      const numStr = String(section.number);
+      const pillW = Math.min(2.4, Math.max(1.4, numStr.length * 0.15 + 0.8));
+      const pillX = rect.x + (rect.w - pillW) / 2;
+      const pillY = rect.y + 0.35;
+      pptxSlide.addShape(pptx.ShapeType.roundRect, {
+        x: pillX,
+        y: pillY,
+        w: pillW,
+        h: 0.36,
+        fill: { color: primaryHex },
+        rectRadius: 0.18
+      });
+      pptxSlide.addText(`SECTION ${numStr}`.toUpperCase(), {
+        x: pillX,
+        y: pillY,
+        w: pillW,
+        h: 0.36,
+        fontSize: 11,
+        bold: true,
+        color: "000000",
+        fontFace: cleanFontFace(theme.typography.headingFont),
+        align: "center",
+        valign: "middle"
+      });
+    }
+    const titleY = section.number !== void 0 ? rect.y + 0.85 : rect.y + 0.45;
+    pptxSlide.addText(section.title, {
+      x: rect.x + 0.3,
+      y: titleY,
+      w: rect.w - 0.6,
+      h: 0.85,
+      fontSize: 28,
+      bold: true,
+      color: this.cleanHexColor(theme.colors.text || "#ffffff"),
+      fontFace: cleanFontFace(theme.typography.headingFont),
+      align: "center",
+      valign: "middle"
+    });
+    if (section.subtitle) {
+      pptxSlide.addText(section.subtitle, {
+        x: rect.x + 0.4,
+        y: titleY + 0.85,
+        w: rect.w - 0.8,
+        h: 0.55,
+        fontSize: 15,
+        color: this.cleanHexColor(theme.colors.muted || "#94a3b8"),
+        fontFace: cleanFontFace(theme.typography.bodyFont),
+        align: "center",
+        valign: "top"
+      });
+    }
+  }
+  renderToc(pptxSlide, pptx, toc, rect, theme, presentation) {
+    const items = toc.items ? [...toc.items] : [];
+    if (items.length === 0 && presentation) {
+      let autoIdx = 1;
+      for (const s of presentation.slides) {
+        for (const el of s.elements) {
+          if (el.type === "section") {
+            const sec = el;
+            items.push({
+              number: sec.number !== void 0 ? String(sec.number) : String(autoIdx++),
+              title: sec.title,
+              description: sec.subtitle
+            });
+          }
+        }
+      }
+      if (items.length === 0) {
+        presentation.slides.forEach((s, idx) => {
+          const heading = s.elements.find((el) => el.type === "heading");
+          if (heading) {
+            items.push({
+              number: String(idx + 1),
+              title: heading.text
+            });
+          }
+        });
+      }
+    }
+    if (items.length === 0)
+      return;
+    const primaryHex = this.cleanHexColor(theme.colors.primary || "#00F0FF");
+    const surfaceHex = this.cleanHexColor(theme.colors.surface || "#0f172a");
+    const borderHex = this.cleanHexColor(theme.colors.border || "#334155");
+    const textHex = this.cleanHexColor(theme.colors.text || "#ffffff");
+    const mutedHex = this.cleanHexColor(theme.colors.muted || "#94a3b8");
+    let currentY = rect.y;
+    if (toc.title) {
+      pptxSlide.addText(toc.title, {
+        x: rect.x,
+        y: currentY,
+        w: rect.w,
+        h: 0.5,
+        fontSize: 22,
         bold: true,
-        color: this.cleanHexColor(theme.colors.primary),
+        color: primaryHex,
         fontFace: cleanFontFace(theme.typography.headingFont)
       });
+      currentY += 0.65;
     }
+    const availableH = rect.h - (currentY - rect.y);
+    const cols = items.length > 4 ? 2 : 1;
+    const rows = Math.ceil(items.length / cols);
+    const colW = (rect.w - (cols - 1) * 0.3) / cols;
+    const itemH = Math.min(0.85, (availableH - (rows - 1) * 0.12) / rows);
+    items.forEach((item, idx) => {
+      const c = idx % cols;
+      const r = Math.floor(idx / cols);
+      const itemX = rect.x + c * (colW + 0.3);
+      const itemY = currentY + r * (itemH + 0.12);
+      const num = item.number !== void 0 ? String(item.number) : String(idx + 1);
+      const descText = item.description || item.subtitle;
+      pptxSlide.addShape(pptx.ShapeType.roundRect, {
+        x: itemX,
+        y: itemY,
+        w: colW,
+        h: itemH,
+        fill: { color: surfaceHex },
+        line: { color: borderHex, width: 1 },
+        rectRadius: 0.08
+      });
+      pptxSlide.addShape(pptx.ShapeType.roundRect, {
+        x: itemX + 0.12,
+        y: itemY + (itemH - 0.36) / 2,
+        w: 0.36,
+        h: 0.36,
+        fill: { color: primaryHex },
+        rectRadius: 0.08
+      });
+      pptxSlide.addText(num, {
+        x: itemX + 0.12,
+        y: itemY + (itemH - 0.36) / 2,
+        w: 0.36,
+        h: 0.36,
+        fontSize: 11,
+        bold: true,
+        color: "000000",
+        fontFace: cleanFontFace(theme.typography.headingFont),
+        align: "center",
+        valign: "middle"
+      });
+      const textX = itemX + 0.55;
+      const textW = colW - 0.65;
+      const titleChunks = [
+        {
+          text: item.title,
+          options: {
+            fontSize: 13,
+            bold: true,
+            color: textHex,
+            fontFace: cleanFontFace(theme.typography.headingFont),
+            breakLine: Boolean(descText)
+          }
+        }
+      ];
+      if (descText) {
+        titleChunks.push({
+          text: descText,
+          options: {
+            fontSize: 10,
+            color: mutedHex,
+            fontFace: cleanFontFace(theme.typography.bodyFont)
+          }
+        });
+      }
+      pptxSlide.addText(titleChunks, {
+        x: textX,
+        y: itemY + 0.06,
+        w: textW,
+        h: itemH - 0.12,
+        valign: "middle",
+        margin: 0
+      });
+    });
   }
   renderMermaid(pptxSlide, pptx, mermaid, rect, theme) {
     pptxSlide.addShape(pptx.ShapeType.roundRect, {
@@ -3076,7 +4785,9 @@ var HtmlRenderer = class {
       })();
     </script>
 ` : "";
-    const slidesHtml = presentation.slides.map((slide, idx) => this.renderSlide(slide, idx + 1, presentation.slides.length, theme)).join("\n");
+    const slidesHtml = presentation.slides.map((slide, idx) => this.renderSlide(slide, idx + 1, presentation.slides.length, theme, presentation.metadata.watermark, presentation)).join("\n");
+    const customStyles = presentation.metadata.styles ? (Array.isArray(presentation.metadata.styles) ? presentation.metadata.styles : [presentation.metadata.styles]).map((url) => `<link rel="stylesheet" href="${url}">`).join("\n  ") : "";
+    const customScripts = presentation.metadata.scripts ? (Array.isArray(presentation.metadata.scripts) ? presentation.metadata.scripts : [presentation.metadata.scripts]).map((url) => `<script src="${url}"></script>`).join("\n  ") : "";
     const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -3085,6 +4796,11 @@ var HtmlRenderer = class {
   <title>${this.escapeHtml(title)}</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  ${customStyles}
+  ${customScripts}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous">
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
   <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
     try {
@@ -3246,9 +4962,6 @@ var HtmlRenderer = class {
       margin-bottom: 0.8em;
       overflow-wrap: break-word;
     }
-      color: var(--yumia-text);
-      margin-bottom: 0.8em;
-    }
 
     p strong, li strong {
       color: var(--yumia-primary);
@@ -3470,7 +5183,7 @@ var HtmlRenderer = class {
       padding: 6px 14px;
       border-radius: 30px;
       border: 1px solid rgba(255, 255, 255, 0.15);
-      z-index: 1000;
+      z-index: 2500;
       font-size: 13px;
       color: #e2e8f0;
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
@@ -3685,20 +5398,40 @@ var HtmlRenderer = class {
       border: 1.5px solid var(--yumia-border);
       border-left: 4px solid var(--yumia-primary);
       border-radius: var(--yumia-radius-card);
-      padding: 1.25rem 2rem;
-      margin: 1.2rem 0;
+      padding: 0.75rem 1.4rem;
+      margin: 0.7rem 0;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
+      overflow-x: auto;
+      max-width: 100%;
     }
 
     .yumia-math-equation {
-      font-family: 'Cambria Math', 'JetBrains Mono', monospace;
-      font-size: clamp(1.2rem, 2.2vw, 1.8rem);
-      font-style: italic;
+      font-size: clamp(1.1rem, 1.8vw, 1.45rem);
       color: var(--yumia-text);
-      letter-spacing: 0.05em;
+      letter-spacing: 0.03em;
+    }
+
+    /* Watermark Branding */
+    .yumia-watermark {
+      position: absolute;
+      bottom: 12px;
+      left: 20px;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--yumia-muted);
+      opacity: 0.35;
+      pointer-events: none;
+      user-select: none;
+      z-index: 10;
+      transition: opacity 0.2s ease;
+    }
+    .yumia-slide-wrapper:hover .yumia-watermark {
+      opacity: 0.65;
     }
 
     /* Slide Transitions */
@@ -3728,17 +5461,177 @@ var HtmlRenderer = class {
       to { opacity: 1; transform: scale(1); }
     }
 
-    /* Progressive Reveal (Step Builds) */
-    .yumia-slide-wrapper [data-step] {
-      transition: opacity 0.25s ease, transform 0.25s ease;
+    /* Code Block Line Highlighting & Numbers */
+    .yumia-code-block {
+      display: block;
+      padding: 0.75rem 0;
+      font-family: var(--yumia-font-code);
+      font-size: 0.95rem;
+      line-height: 1.6;
+      overflow-x: auto;
+      border-radius: var(--yumia-radius-card);
+      background: rgba(10, 15, 30, 0.88);
+      border: 1.5px solid var(--yumia-border);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
+      margin: 0.8rem 0;
+    }
+    .yumia-code-block code {
+      display: block;
+      padding: 0;
+      background: transparent;
+      border: none;
+    }
+    .yumia-code-line {
+      display: flex;
+      align-items: center;
+      min-height: 1.6em;
+      padding: 0 1rem;
+      transition: background 0.15s ease, opacity 0.15s ease;
     }
-    .yumia-slide-wrapper:not(.step-active) [data-step] {
-      opacity: 0.2;
-      transform: translateY(4px);
+    .yumia-code-line.dimmed {
+      opacity: 0.35;
     }
-    .yumia-slide-wrapper.step-active [data-step] {
+    .yumia-code-line.highlighted {
+      background: rgba(0, 240, 255, 0.16);
+      border-left: 3.5px solid var(--yumia-primary);
       opacity: 1;
-      transform: translateY(0);
+      font-weight: 600;
+    }
+    .yumia-code-line .line-num {
+      user-select: none;
+      width: 28px;
+      margin-right: 14px;
+      color: rgba(255, 255, 255, 0.3);
+      font-size: 0.8rem;
+      text-align: right;
+    }
+    .yumia-code-line .line-text {
+      flex: 1;
+    }
+
+    /* Section Divider Card */
+    .yumia-section-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 3rem 2rem;
+      margin: auto 0;
+      background: radial-gradient(circle at center, rgba(0, 240, 255, 0.12) 0%, rgba(15, 23, 42, 0.6) 100%);
+      border: 1.5px solid var(--yumia-primary);
+      border-radius: var(--yumia-radius-card);
+      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.2);
+      width: 100%;
+    }
+    .yumia-section-pill {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 14px;
+      border-radius: 999px;
+      background: var(--yumia-primary);
+      color: #000;
+      font-weight: 800;
+      font-size: 0.85rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      margin-bottom: 1.2rem;
+    }
+    .yumia-section-title {
+      font-size: clamp(2rem, 3.5vw, 3rem);
+      font-weight: 800;
+      color: var(--yumia-text);
+      margin-bottom: 0.8rem;
+      line-height: 1.2;
+    }
+    .yumia-section-subtitle {
+      font-size: 1.15rem;
+      color: var(--yumia-muted);
+      max-width: 650px;
+    }
+
+    /* Table of Contents Grid */
+    .yumia-toc-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 16px;
+      width: 100%;
+      margin: 1.2rem 0;
+    }
+    .yumia-toc-item {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      background: var(--yumia-surface);
+      border: 1.5px solid var(--yumia-border);
+      border-radius: 10px;
+      padding: 14px 18px;
+      transition: transform 0.2s ease, border-color 0.2s ease;
+    }
+    .yumia-toc-item:hover {
+      transform: translateX(4px);
+      border-color: var(--yumia-primary);
+    }
+    .yumia-toc-num {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      height: 34px;
+      border-radius: 8px;
+      background: rgba(0, 240, 255, 0.15);
+      color: var(--yumia-primary);
+      font-weight: 800;
+      font-size: 0.95rem;
+    }
+    .yumia-toc-title {
+      font-weight: 600;
+      font-size: 1.05rem;
+      color: var(--yumia-text);
+    }
+
+    /* Print & Export Media Styles */
+    @media print {
+      @page {
+        size: landscape;
+        margin: 0;
+      }
+      body {
+        background: #0f172a !important;
+        color: #f8fafc !important;
+        overflow: visible !important;
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+      }
+      #deck-container {
+        display: block !important;
+        width: 100% !important;
+        height: auto !important;
+      }
+      #yumia-deck {
+        display: block !important;
+        position: static !important;
+        width: 100% !important;
+        height: auto !important;
+      }
+      .yumia-slide-wrapper {
+        display: flex !important;
+        page-break-after: always !important;
+        break-after: page !important;
+        page-break-inside: avoid !important;
+        position: relative !important;
+        width: 100vw !important;
+        height: 100vh !important;
+        min-height: 100vh !important;
+        margin: 0 !important;
+        box-shadow: none !important;
+        opacity: 1 !important;
+        visibility: visible !important;
+        transform: none !important;
+      }
+      .yumia-controls, .yumia-notes-drawer, .yumia-overview-modal, .yumia-progress-bar {
+        display: none !important;
+      }
     }
 
     /* Notes Drawer */
@@ -3747,11 +5640,11 @@ var HtmlRenderer = class {
       bottom: 0;
       left: 0;
       right: 0;
-      max-height: 240px;
+      max-height: 260px;
       background: rgba(10, 10, 18, 0.96);
       backdrop-filter: blur(16px);
       border-top: 2px solid var(--yumia-primary);
-      padding: 18px 28px;
+      padding: 14px 24px 18px 24px;
       overflow-y: auto;
       display: none;
       z-index: 2000;
@@ -3765,6 +5658,22 @@ var HtmlRenderer = class {
       display: block;
     }
 
+    .yumia-notes-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+      padding-bottom: 6px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      font-weight: 700;
+      font-size: 14px;
+      color: var(--yumia-primary);
+    }
+
+    .yumia-notes-content {
+      padding-right: 200px;
+    }
+
     /* Slide Overview Modal */
     .yumia-overview-modal {
       position: fixed;
@@ -3952,11 +5861,18 @@ var HtmlRenderer = class {
       <button class="yumia-btn" id="btn-next" title="Next Slide (\u2192)">\u25B6</button>
       <button class="yumia-btn" id="btn-overview" title="Slide Overview (ESC / O)">\u25A6</button>
       <button class="yumia-btn" id="btn-speaker" title="Speaker View (S)">\u{1F3A4}</button>
+      <button class="yumia-btn" id="btn-print" title="Stampa / Salva PDF (Ctrl+P)">\u{1F5A8}\uFE0F</button>
       <button class="yumia-btn" id="btn-notes" title="Toggle Notes (N)">\u{1F4DD}</button>
       <button class="yumia-btn" id="btn-fs" title="Fullscreen (F)">\u26F6</button>
     </div>
 
-    <div id="notes-drawer" class="yumia-notes-drawer"></div>
+    <div id="notes-drawer" class="yumia-notes-drawer">
+      <div class="yumia-notes-header">
+        <span>\u{1F4DD} Speaker Notes</span>
+        <button class="yumia-btn" id="btn-close-notes" title="Close Notes (N / ESC)" style="font-size: 13px; padding: 2px 8px; border: 1px solid rgba(255,255,255,0.2);">\u2715 Close</button>
+      </div>
+      <div id="notes-drawer-content" class="yumia-notes-content"></div>
+    </div>
 
     <div id="overview-modal" class="yumia-overview-modal">
       <div class="yumia-overview-header">
@@ -4043,8 +5959,9 @@ var HtmlRenderer = class {
 
         const currentSlide = slides[currentIdx];
         const notes = currentSlide ? currentSlide.getAttribute('data-notes') : '';
-        if (notesDrawer) {
-          notesDrawer.innerHTML = notes ? '<strong>Speaker Notes:</strong><br>' + notes : '<em>No speaker notes for this slide.</em>';
+        const notesContent = document.getElementById('notes-drawer-content');
+        if (notesContent) {
+          notesContent.innerHTML = notes ? notes : '<em>No speaker notes for this slide.</em>';
         }
 
         window.location.hash = '#' + (currentIdx + 1);
@@ -4057,9 +5974,40 @@ var HtmlRenderer = class {
           if (window.renderMermaidInSlide && slides[currentIdx]) {
             window.renderMermaidInSlide(slides[currentIdx]);
           }
+          if (slides[currentIdx]) {
+            renderMathInSlide(slides[currentIdx]);
+          }
         }, 50);
       }
 
+      function renderMathInSlide(slideEl) {
+        if (!slideEl) return;
+        if (window.renderMathInElement) {
+          try {
+            window.renderMathInElement(slideEl, {
+              delimiters: [
+                { left: '$$', right: '$$', display: true }
+              ],
+              throwOnError: false
+            });
+          } catch (e) {
+            console.warn('KaTeX auto-render notice:', e);
+          }
+        }
+        if (window.katex) {
+          slideEl.querySelectorAll('.yumia-math-equation:not([data-katex="true"])').forEach(function(el) {
+            try {
+              const rawExpr =
+                el.getAttribute('data-expr') || el.textContent.replace(/^[$]{2}|[$]{2}$/g, '').trim();
+              window.katex.render(rawExpr, el, { displayMode: true, throwOnError: false });
+              el.setAttribute('data-katex', 'true');
+            } catch (err) {
+              console.warn('KaTeX equation render notice:', err);
+            }
+          });
+        }
+      }
+
       function openSpeakerWindow() {
         const url = new URL(window.location.href);
         url.searchParams.set('speaker', 'true');
@@ -4208,8 +6156,15 @@ var HtmlRenderer = class {
         const hash = window.location.hash.replace('#', '');
         const initialIdx = parseInt(hash, 10) - 1;
         goToSlide(isNaN(initialIdx) ? 0 : initialIdx, false);
+        setTimeout(() => {
+          slides.forEach(renderMathInSlide);
+        }, 100);
       }
 
+      window.addEventListener('load', () => {
+        slides.forEach(renderMathInSlide);
+      });
+
       window.deckController = {
         init: init,
         next: function() { goToSlide(currentIdx + 1); },
@@ -4217,6 +6172,7 @@ var HtmlRenderer = class {
         toggleNotes: function() { notesDrawer?.classList.toggle('open'); },
         toggleOverview: function() { toggleOverview(); },
         openSpeaker: openSpeakerWindow,
+        print: function() { window.print(); },
         toggleFs: function() {
           if (!document.fullscreenElement) {
             document.documentElement.requestFullscreen().catch(() => {});
@@ -4229,9 +6185,13 @@ var HtmlRenderer = class {
       document.getElementById('btn-next')?.addEventListener('click', window.deckController.next);
       document.getElementById('btn-prev')?.addEventListener('click', window.deckController.prev);
       document.getElementById('btn-notes')?.addEventListener('click', window.deckController.toggleNotes);
+      document.getElementById('btn-close-notes')?.addEventListener('click', () => {
+        notesDrawer?.classList.remove('open');
+      });
       document.getElementById('btn-overview')?.addEventListener('click', window.deckController.toggleOverview);
       document.getElementById('btn-close-overview')?.addEventListener('click', () => toggleOverview(false));
       document.getElementById('btn-speaker')?.addEventListener('click', window.deckController.openSpeaker);
+      document.getElementById('btn-print')?.addEventListener('click', window.deckController.print);
       document.getElementById('btn-fs')?.addEventListener('click', window.deckController.toggleFs);
 
       window.addEventListener('keydown', function(e) {
@@ -4242,6 +6202,18 @@ var HtmlRenderer = class {
           return;
         }
 
+        if (e.key === 'Escape') {
+          if (notesDrawer && notesDrawer.classList.contains('open')) {
+            notesDrawer.classList.remove('open');
+            return;
+          }
+        }
+
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'p') {
+          // let default browser print work or call print explicitly
+          return;
+        }
+
         if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown' || e.key.toLowerCase() === 'l') {
           e.preventDefault();
           window.deckController.next();
@@ -4252,6 +6224,8 @@ var HtmlRenderer = class {
           window.deckController.toggleFs();
         } else if (e.key.toLowerCase() === 's') {
           window.deckController.openSpeaker();
+        } else if (e.key.toLowerCase() === 'p') {
+          window.deckController.print();
         } else if (e.key.toLowerCase() === 'n') {
           window.deckController.toggleNotes();
         } else if (e.key === 'Escape' || e.key.toLowerCase() === 'o') {
@@ -4282,21 +6256,25 @@ var HtmlRenderer = class {
       slideCount: presentation.slides.length
     };
   }
-  renderSlide(slide, slideNum, totalSlides, theme) {
+  renderSlide(slide, slideNum, totalSlides, theme, watermarkOpt, presentation) {
     const activeClass = slideNum === 1 ? "active" : "";
     const notesAttr = slide.notes ? this.escapeHtml(slide.notes.replace(/\n/g, "<br>")) : "";
     const progressPercent = Math.round(slideNum / totalSlides * 100);
     const transition = slide.transition || "fade";
     const transType = typeof transition === "string" ? transition : transition.type;
     const transClass = `transition-${transType || "fade"}`;
-    const elementsHtml = slide.elements.map((el) => this.renderElement(el, theme)).join("\n");
+    const isWatermarkEnabled = watermarkOpt !== false;
+    const watermarkText = typeof watermarkOpt === "string" && watermarkOpt.trim().length > 0 ? watermarkOpt : "YumiaMD";
+    const watermarkHtml = isWatermarkEnabled ? `<div class="yumia-watermark">${this.escapeHtml(watermarkText)}</div>` : "";
+    const elementsHtml = slide.elements.map((el) => this.renderElement(el, theme, presentation)).join("\n");
     return `
     <div class="yumia-slide-wrapper ${activeClass} ${transClass}" id="slide-${slideNum}" data-notes="${notesAttr}">
       ${elementsHtml}
+      ${watermarkHtml}
       <div class="yumia-progress-bar" style="width: ${progressPercent}%;"></div>
     </div>`;
   }
-  renderElement(element, theme) {
+  renderElement(element, theme, presentation) {
     switch (element.type) {
       case "heading": {
         const h = element;
@@ -4316,8 +6294,100 @@ var HtmlRenderer = class {
       case "code": {
         const c = element;
         const langClass = c.language ? `class="language-${c.language}"` : "";
+        const lines = c.code.split("\n");
+        if (c.highlight) {
+          const highlightSet = /* @__PURE__ */ new Set();
+          const parts = c.highlight.split(",");
+          for (const part of parts) {
+            const trimmed = part.trim();
+            if (!trimmed)
+              continue;
+            if (trimmed.includes("-")) {
+              const [startStr, endStr] = trimmed.split("-");
+              const start = parseInt(startStr || "0", 10);
+              const end = parseInt(endStr || "0", 10);
+              if (!isNaN(start) && !isNaN(end) && start <= end) {
+                for (let n = start; n <= end; n++)
+                  highlightSet.add(n);
+              }
+            } else {
+              const num = parseInt(trimmed, 10);
+              if (!isNaN(num))
+                highlightSet.add(num);
+            }
+          }
+          const linesHtml = lines.map((line, idx) => {
+            const lineNum = idx + 1;
+            const isHl = highlightSet.has(lineNum);
+            const hlClass = isHl ? "highlighted" : "dimmed";
+            return `<div class="yumia-code-line ${hlClass}"><span class="line-num">${lineNum}</span><span class="line-text">${this.escapeHtml(line) || "&nbsp;"}</span></div>`;
+          }).join("");
+          return `<pre class="yumia-code-block"><code ${langClass}>${linesHtml}</code></pre>`;
+        }
         return `<pre><code ${langClass}>${this.escapeHtml(c.code)}</code></pre>`;
       }
+      case "section": {
+        const s = element;
+        const numStr = s.number !== void 0 ? `<div class="yumia-section-pill">SECTION ${this.escapeHtml(String(s.number))}</div>` : "";
+        const subStr = s.subtitle ? `<div class="yumia-section-subtitle">${this.formatInline(s.subtitle)}</div>` : "";
+        return `
+        <div class="yumia-section-card">
+          ${numStr}
+          <div class="yumia-section-title">${this.formatInline(s.title)}</div>
+          ${subStr}
+        </div>`;
+      }
+      case "toc": {
+        const t = element;
+        const items = t.items ? [...t.items] : [];
+        if (items.length === 0 && presentation) {
+          let autoSecIdx = 1;
+          for (const s of presentation.slides) {
+            for (const el of s.elements) {
+              if (el.type === "section") {
+                const sec = el;
+                items.push({
+                  number: sec.number !== void 0 ? String(sec.number) : String(autoSecIdx++),
+                  title: sec.title,
+                  description: sec.subtitle
+                });
+              }
+            }
+          }
+          if (items.length === 0) {
+            presentation.slides.forEach((s, idx) => {
+              const heading = s.elements.find((el) => el.type === "heading");
+              if (heading) {
+                items.push({
+                  number: String(idx + 1),
+                  title: heading.text
+                });
+              }
+            });
+          }
+        }
+        const titleHtml = t.title ? `<h2 style="margin-bottom:1.5rem;">${this.escapeHtml(t.title)}</h2>` : "";
+        const itemsHtml = items.map((it, idx) => {
+          const num = it.number !== void 0 ? String(it.number) : String(idx + 1);
+          const descText = it.description || it.subtitle;
+          const desc = descText ? `<div style="font-size:0.85rem; color:var(--yumia-muted); margin-top:2px;">${this.formatInline(descText)}</div>` : "";
+          return `
+          <div class="yumia-toc-item">
+            <div class="yumia-toc-num">${this.escapeHtml(num)}</div>
+            <div>
+              <div class="yumia-toc-title">${this.formatInline(it.title)}</div>
+              ${desc}
+            </div>
+          </div>`;
+        }).join("\n");
+        return `
+        <div class="yumia-toc-container">
+          ${titleHtml}
+          <div class="yumia-toc-grid">
+            ${itemsHtml}
+          </div>
+        </div>`;
+      }
       case "quote": {
         const q = element;
         const author = q.author ? `<br><small>\u2014 ${this.escapeHtml(q.author)}</small>` : "";
@@ -4393,9 +6463,10 @@ var HtmlRenderer = class {
       }
       case "math": {
         const mathEl = element;
+        const expr = mathEl.expression;
         return `
         <div class="yumia-math-container">
-          <div class="yumia-math-equation">${this.escapeHtml(mathEl.expression)}</div>
+          <div class="yumia-math-equation" data-expr="${this.escapeHtml(expr)}">$$${this.escapeHtml(expr)}$$</div>
         </div>`;
       }
       case "chart": {
@@ -4404,6 +6475,27 @@ var HtmlRenderer = class {
       case "timeline": {
         return this.renderTimeline(element);
       }
+      case "icon": {
+        const ic = element;
+        const iconSvg = defaultIconResolver.toSvg(ic.name, ic.size || 24, ic.color || "currentColor", "yumia-icon");
+        return `<span class="yumia-icon-wrapper" style="display:inline-flex; align-items:center; vertical-align:middle;">${iconSvg}</span>`;
+      }
+      case "grid": {
+        const g = element;
+        const cols = typeof g.columns === "number" ? `repeat(${g.columns}, 1fr)` : g.columns;
+        const gap = g.gap !== void 0 ? typeof g.gap === "number" ? `${g.gap}px` : g.gap : "1.5rem";
+        const inner = g.elements.map((child) => this.renderElement(child, theme, presentation)).join("\n");
+        return `<div class="yumia-grid" style="display:grid; grid-template-columns:${cols}; gap:${gap}; width:100%;">${inner}</div>`;
+      }
+      case "stack": {
+        const st = element;
+        const dir = st.direction === "horizontal" ? "row" : "column";
+        const gap = st.gap !== void 0 ? typeof st.gap === "number" ? `${st.gap}px` : st.gap : "1rem";
+        const align = st.align ? `align-items:${st.align};` : "";
+        const justify = st.justify ? `justify-content:${st.justify};` : "";
+        const inner = st.elements.map((child) => this.renderElement(child, theme, presentation)).join("\n");
+        return `<div class="yumia-stack" style="display:flex; flex-direction:${dir}; gap:${gap}; ${align} ${justify} width:100%;">${inner}</div>`;
+      }
       case "compare": {
         return this.renderCompare(element, theme);
       }
@@ -4557,8 +6649,7 @@ var HtmlRenderer = class {
     </div>`;
   }
   formatInline(text) {
-    const escaped = this.escapeHtml(text);
-    return escaped.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/\*(.*?)\*/g, "<em>$1</em>").replace(/`(.*?)`/g, "<code>$1</code>");
+    return this.escapeHtml(text).replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/\*(.*?)\*/g, "<em>$1</em>").replace(/`(.*?)`/g, "<code>$1</code>");
   }
   escapeHtml(str) {
     return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
@@ -4603,7 +6694,7 @@ var PdfRenderer = class {
         const totalSlides = presentation.slides.length;
         for (let i = 0; i < totalSlides; i++) {
           const slide = presentation.slides[i];
-          this.renderSlide(doc, slide, i + 1, totalSlides, pageWidth, pageHeight, theme);
+          this.renderSlide(doc, slide, i + 1, totalSlides, pageWidth, pageHeight, theme, presentation);
         }
         doc.end();
       } catch (err) {
@@ -4611,7 +6702,7 @@ var PdfRenderer = class {
       }
     });
   }
-  renderSlide(doc, slide, slideNum, totalSlides, pageWidth, pageHeight, theme) {
+  renderSlide(doc, slide, slideNum, totalSlides, pageWidth, pageHeight, theme, presentation) {
     doc.addPage({
       size: [pageWidth, pageHeight],
       margins: { top: 0, bottom: 0, left: 0, right: 0 }
@@ -4622,7 +6713,7 @@ var PdfRenderer = class {
     const contentWidth = pageWidth - padX * 2;
     let cursorY = padY;
     for (const element of slide.elements) {
-      cursorY = this.renderElement(doc, element, padX, cursorY, contentWidth, theme);
+      cursorY = this.renderElement(doc, element, padX, cursorY, contentWidth, theme, presentation);
       cursorY += 12;
     }
     const progressWidth = slideNum / totalSlides * pageWidth;
@@ -4632,7 +6723,7 @@ var PdfRenderer = class {
       align: "right"
     });
   }
-  renderElement(doc, element, x, y, width, theme) {
+  renderElement(doc, element, x, y, width, theme, presentation) {
     switch (element.type) {
       case "heading": {
         const h = element;
@@ -4684,12 +6775,42 @@ var PdfRenderer = class {
       }
       case "code": {
         const c = element;
-        const codeText = c.code;
-        doc.font("Courier").fontSize(11);
-        const textHeight = doc.heightOfString(codeText, { width: width - 24 });
-        const boxHeight = textHeight + 20;
+        const lines = c.code.split("\n");
+        doc.font("Courier").fontSize(10);
+        const lineHeight = 14;
+        const boxHeight = lines.length * lineHeight + 20;
         doc.roundedRect(x, y, width, boxHeight, 6).fill("#0a0a10").strokeColor(theme.colors.border || "rgba(255,255,255,0.1)").stroke();
-        doc.font("Courier").fontSize(11).fillColor(theme.colors.accent || "#38bdf8").text(codeText, x + 12, y + 10, { width: width - 24 });
+        const highlightSet = /* @__PURE__ */ new Set();
+        if (c.highlight) {
+          const parts = c.highlight.split(",");
+          for (const part of parts) {
+            const trimmed = part.trim();
+            if (!trimmed)
+              continue;
+            if (trimmed.includes("-")) {
+              const [startStr, endStr] = trimmed.split("-");
+              const start = parseInt(startStr || "0", 10);
+              const end = parseInt(endStr || "0", 10);
+              if (!isNaN(start) && !isNaN(end) && start <= end) {
+                for (let n = start; n <= end; n++)
+                  highlightSet.add(n);
+              }
+            } else {
+              const num = parseInt(trimmed, 10);
+              if (!isNaN(num))
+                highlightSet.add(num);
+            }
+          }
+        }
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const lineY = y + 10 + idx * lineHeight;
+          const isHl = highlightSet.has(lineNum);
+          const numColor = isHl ? theme.colors.primary : theme.colors.muted || "#555566";
+          const textColor = c.highlight ? isHl ? theme.colors.primary || "#00f0ff" : theme.colors.muted || "#666677" : theme.colors.accent || "#38bdf8";
+          doc.font("Courier").fontSize(9).fillColor(numColor).text(String(lineNum).padStart(2, " "), x + 10, lineY, { width: 22 });
+          doc.font("Courier").fontSize(10).fillColor(textColor).text(line || " ", x + 36, lineY, { width: width - 48 });
+        });
         return y + boxHeight;
       }
       case "card": {
@@ -4897,7 +7018,7 @@ var PdfRenderer = class {
           const barY = topY + plotH - h;
           doc.rect(barX, barY, barW, h).fill(theme.colors.primary);
           doc.font("Helvetica").fontSize(9).fillColor(theme.colors.text).text(String(val), barX, barY - 12, { width: barW, align: "center" });
-          if (ch.labels[idx]) {
+          if (ch.labels?.[idx]) {
             doc.font("Helvetica").fontSize(9).fillColor(theme.colors.muted || "#888888").text(this.stripFormatting(ch.labels[idx]), barX - 10, topY + plotH + 4, {
               width: barW + 20,
               align: "center"
@@ -4926,6 +7047,116 @@ var PdfRenderer = class {
         });
         return y + boxH + 8;
       }
+      case "section": {
+        const s = element;
+        const boxH = 130;
+        doc.roundedRect(x, y, width, boxH, 8).fill(theme.colors.surface || "rgba(255,255,255,0.06)");
+        doc.roundedRect(x, y, width, boxH, 8).lineWidth(2).strokeColor(theme.colors.primary).stroke();
+        let curY = y + 18;
+        if (s.number !== void 0) {
+          const numStr = String(s.number);
+          doc.roundedRect(x + width / 2 - 40, curY, 80, 18, 9).fill(theme.colors.primary);
+          doc.font("Helvetica-Bold").fontSize(9).fillColor("#000000").text(`SECTION ${numStr}`.toUpperCase(), x, curY + 4, { width, align: "center" });
+          curY += 28;
+        }
+        doc.font("Helvetica-Bold").fontSize(22).fillColor(theme.colors.text).text(this.stripFormatting(s.title), x + 20, curY, {
+          width: width - 40,
+          align: "center"
+        });
+        curY += 28;
+        if (s.subtitle) {
+          doc.font("Helvetica").fontSize(12).fillColor(theme.colors.muted || "#999999").text(this.stripFormatting(s.subtitle), x + 30, curY, {
+            width: width - 60,
+            align: "center"
+          });
+        }
+        return y + boxH + 8;
+      }
+      case "toc": {
+        const t = element;
+        const items = t.items ? [...t.items] : [];
+        if (items.length === 0 && presentation) {
+          let autoIdx = 1;
+          for (const s of presentation.slides) {
+            for (const el of s.elements) {
+              if (el.type === "section") {
+                const sec = el;
+                items.push({
+                  number: sec.number !== void 0 ? String(sec.number) : String(autoIdx++),
+                  title: sec.title,
+                  description: sec.subtitle
+                });
+              }
+            }
+          }
+          if (items.length === 0) {
+            presentation.slides.forEach((s, idx) => {
+              const heading = s.elements.find((el) => el.type === "heading");
+              if (heading) {
+                items.push({
+                  number: String(idx + 1),
+                  title: heading.text
+                });
+              }
+            });
+          }
+        }
+        let curY = y;
+        if (t.title) {
+          doc.font("Helvetica-Bold").fontSize(18).fillColor(theme.colors.primary).text(this.stripFormatting(t.title), x, curY, { width });
+          curY += 26;
+        }
+        const itemH = 34;
+        items.forEach((item, idx) => {
+          const num = item.number !== void 0 ? String(item.number) : String(idx + 1);
+          const descText = item.description || item.subtitle;
+          const itemY = curY + idx * (itemH + 8);
+          doc.roundedRect(x, itemY, width, itemH, 6).fill(theme.colors.surface || "rgba(255,255,255,0.04)");
+          doc.roundedRect(x, itemY, width, itemH, 6).strokeColor(theme.colors.border || "rgba(255,255,255,0.1)").stroke();
+          doc.roundedRect(x + 10, itemY + 6, 22, 22, 4).fill(theme.colors.primary);
+          doc.font("Helvetica-Bold").fontSize(10).fillColor("#000000").text(num, x + 10, itemY + 11, { width: 22, align: "center" });
+          doc.font("Helvetica-Bold").fontSize(12).fillColor(theme.colors.text).text(this.stripFormatting(item.title), x + 40, itemY + (descText ? 5 : 10), {
+            width: width - 50
+          });
+          if (descText) {
+            doc.font("Helvetica").fontSize(9).fillColor(theme.colors.muted || "#888888").text(this.stripFormatting(descText), x + 40, itemY + 19, {
+              width: width - 50
+            });
+          }
+        });
+        return curY + items.length * (itemH + 8) + 8;
+      }
+      case "icon": {
+        const ic = element;
+        const iconText = `\u2605 ${ic.name.replace(/^[^:]+:/, "").toUpperCase()}`;
+        doc.font("Helvetica-Bold").fontSize(11).fillColor(theme.colors.primary);
+        doc.text(iconText, x, y, { width: 120 });
+        return y + 20;
+      }
+      case "grid": {
+        const g = element;
+        const colCount = typeof g.columns === "number" ? g.columns : parseInt(String(g.columns), 10) || 2;
+        const gap = 16;
+        const availableWidth = width - gap * (colCount - 1);
+        const colWidth = availableWidth / colCount;
+        let maxY = y;
+        for (let i = 0; i < g.elements.length; i++) {
+          const colIdx = i % colCount;
+          const colX = x + colIdx * (colWidth + gap);
+          const childY = this.renderElement(doc, g.elements[i], colX, y, colWidth, theme, presentation);
+          if (childY > maxY)
+            maxY = childY;
+        }
+        return maxY + 8;
+      }
+      case "stack": {
+        const st = element;
+        let curY = y;
+        for (const child of st.elements) {
+          curY = this.renderElement(doc, child, x, curY, width, theme, presentation) + 8;
+        }
+        return curY;
+      }
       default:
         return y;
     }
@@ -4981,8 +7212,15 @@ function startDevServer(filePath, options = {}) {
       }
     }
     const server = createServer(async (req, res) => {
-      const url = req.url || "/";
-      if (url === "/__yumia_live_reload") {
+      const rawUrl = req.url || "/";
+      let pathname = "/";
+      try {
+        const parsed = new URL(rawUrl, `http://localhost:${port}`);
+        pathname = parsed.pathname;
+      } catch {
+        pathname = rawUrl.split("?")[0] || "/";
+      }
+      if (pathname === "/__yumia_live_reload") {
         res.writeHead(200, {
           "Content-Type": "text/event-stream",
           "Cache-Control": "no-cache",
@@ -4996,7 +7234,7 @@ function startDevServer(filePath, options = {}) {
         });
         return;
       }
-      if (url === "/" || url.startsWith("/#")) {
+      if (pathname === "/" || pathname === "/index.html" || pathname.startsWith("/#")) {
         const html = await getCompiledHtml();
         res.writeHead(200, {
           "Content-Type": "text/html; charset=utf-8",
@@ -5057,7 +7295,7 @@ function startDevServer(filePath, options = {}) {
 // src/cli.ts
 import { mkdirSync, readFileSync as readFileSync2, watch as fsWatch, writeFileSync } from "fs";
 import { basename, dirname, extname, join, resolve as resolve2 } from "path";
-var VERSION = "0.1.19";
+var VERSION = "0.1.21";
 function printHelp() {
   return `
 YumiaMD \u2014 Markdown-based presentation compiler (v${VERSION})
@@ -5596,10 +7834,21 @@ export {
   createGroup,
   createColumn,
   createColumns,
+  createSection,
+  createToc,
   createMath,
   createLayoutDirective,
+  createIcon,
+  createGrid,
+  createStack,
+  createComponent,
+  createSlot,
+  NativeYumiaParser,
+  parseNativeYumia,
+  parseHighlightLines,
   DefaultYumiaParser,
   parseYumia,
+  migrateMarkdownToNative,
   DEFAULT_VIEWPORT,
   VIEWPORT_PRESETS,
   DefaultLayoutEngine,
@@ -5609,6 +7858,11 @@ export {
   corporateTheme,
   terminalTheme,
   academicTheme,
+  nordTheme,
+  draculaTheme,
+  tokyoNightTheme,
+  emeraldTheme,
+  synthwaveTheme,
   THEME_REGISTRY,
   resolveTheme,
   createTheme,
@@ -5617,6 +7871,8 @@ export {
   parse,
   validate,
   lint,
+  IconResolver,
+  defaultIconResolver,
   cleanFontFace,
   parseInlineMarkdown,
   PptxRenderer,