yumiamd 0.1.21 → 0.1.23

package/dist/bin.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   runCli
-} from "./chunk-TJR6MU2I.js";
+} from "./chunk-GKERS3TA.js";
 
 // src/bin.ts
 var result = await runCli(process.argv);

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

@@ -31,12 +31,13 @@ function createList(items, ordered = false) {
     items: normalizedItems
   };
 }
-function createImage(src, alt, caption) {
+function createImage(src, alt, caption, options) {
   return {
     type: "image",
     src,
     ...alt ? { alt } : {},
-    ...caption ? { caption } : {}
+    ...caption ? { caption } : {},
+    ...options || {}
   };
 }
 function createCard(elements, title, variant) {
@@ -1501,6 +1502,147 @@ var NativeYumiaParser = class {
         }
         return { element: createList(items, false), nextIdx };
       }
+      case "image":
+      case "img": {
+        const srcMatch = tok.args.match(/^(?:src=)?["']([^"']+)["']/);
+        const altMatch = tok.args.match(/\balt=["']([^"']+)["']/);
+        const capMatch = tok.args.match(/\bcaption=["']([^"']+)["']/);
+        const fitMatch = tok.args.match(/\bfit=["']?([^"'\s]+)["']?/);
+        const widthMatch = tok.args.match(/\bwidth=["']?([^"'\s]+)["']?/);
+        const heightMatch = tok.args.match(/\bheight=["']?([^"'\s]+)["']?/);
+        const radiusMatch = tok.args.match(/\bradius=["']?([^"'\s]+)["']?/);
+        const aspectMatch = tok.args.match(/\baspect=["']?([^"'\s]+)["']?/);
+        const src = srcMatch ? srcMatch[1] : this.stripQuotes(tok.args);
+        return {
+          element: createImage(src, altMatch ? altMatch[1] : void 0, capMatch ? capMatch[1] : void 0, {
+            fit: fitMatch ? fitMatch[1] : void 0,
+            width: widthMatch ? widthMatch[1] : void 0,
+            height: heightMatch ? heightMatch[1] : void 0,
+            radius: radiusMatch ? radiusMatch[1] : void 0,
+            aspectRatio: aspectMatch ? aspectMatch[1] : void 0
+          }),
+          nextIdx: idx + 1
+        };
+      }
+      case "chart": {
+        const typeMatch = tok.args.match(/type=["']?([^"'\s]+)["']?/);
+        const titleMatch = tok.args.match(/title=["']([^"']+)["']/);
+        const chartType = typeMatch ? typeMatch[1] : "bar";
+        const title = titleMatch ? titleMatch[1] : void 0;
+        const labels = [];
+        const series = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const sub = tokens[nextIdx];
+          if (sub.command === "labels") {
+            const rawLabels = sub.args.split(",").map((l) => this.stripQuotes(l.trim()));
+            labels.push(...rawLabels);
+          } else if (sub.command === "series") {
+            const sNameMatch = sub.args.match(/^["']?([^:"']+):/);
+            const name = sNameMatch ? sNameMatch[1].trim() : "Series";
+            const dataStr = sub.args.replace(/^["']?[^:"']+:?\s*/, "").replace(/["']$/, "");
+            const values = dataStr.split(",").map((v) => parseFloat(v.trim())).filter((v) => !isNaN(v));
+            series.push({ name, values });
+          }
+          nextIdx++;
+        }
+        if (labels.length === 0)
+          labels.push("A", "B", "C");
+        if (series.length === 0)
+          series.push({ name: "Data", values: [10, 20, 30] });
+        return { element: createChart(chartType, labels, series, title), nextIdx };
+      }
+      case "compare": {
+        const leftTitleMatch = tok.args.match(/left(?:Title)?=["']([^"']+)["']/);
+        const rightTitleMatch = tok.args.match(/right(?:Title)?=["']([^"']+)["']/);
+        const leftTitle = leftTitleMatch ? leftTitleMatch[1] : void 0;
+        const rightTitle = rightTitleMatch ? rightTitleMatch[1] : void 0;
+        const leftEls = [];
+        const rightEls = [];
+        let currentSide = "left";
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const sub = tokens[nextIdx];
+          if (sub.command === "left") {
+            currentSide = "left";
+            nextIdx++;
+            continue;
+          } else if (sub.command === "right") {
+            currentSide = "right";
+            nextIdx++;
+            continue;
+          }
+          const childRes = this.parseElement(tokens, nextIdx);
+          if (childRes) {
+            if (currentSide === "left")
+              leftEls.push(childRes.element);
+            else
+              rightEls.push(childRes.element);
+            nextIdx = childRes.nextIdx;
+          } else {
+            nextIdx++;
+          }
+        }
+        return { element: createCompare(leftEls, rightEls, leftTitle, rightTitle), nextIdx };
+      }
+      case "timeline": {
+        const layoutMatch = tok.args.match(/layout=["']?(horizontal|vertical)["']?/);
+        const layout = layoutMatch ? layoutMatch[1] : "horizontal";
+        const items = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const sub = tokens[nextIdx];
+          if (sub.command === "item") {
+            const dateMatch = sub.args.match(/date=["']([^"']+)["']/);
+            const titleMatch = sub.args.match(/title=["']([^"']+)["']/);
+            const descMatch = sub.args.match(/desc(?:ription)?=["']([^"']+)["']/);
+            items.push({
+              date: dateMatch ? dateMatch[1] : "2026",
+              title: titleMatch ? titleMatch[1] : "Milestone",
+              description: descMatch ? descMatch[1] : void 0
+            });
+          }
+          nextIdx++;
+        }
+        return { element: createTimeline(items, layout), nextIdx };
+      }
+      case "mermaid": {
+        const mLines = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          mLines.push(tokens[nextIdx].text);
+          nextIdx++;
+        }
+        return { element: createMermaid(mLines.join("\n")), nextIdx };
+      }
+      case "math": {
+        let expr = this.stripQuotes(tok.args);
+        let nextIdx = idx + 1;
+        if (!expr) {
+          const mathLines = [];
+          while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+            mathLines.push(tokens[nextIdx].text);
+            nextIdx++;
+          }
+          expr = mathLines.join("\n");
+        }
+        return { element: createMath(expr), nextIdx };
+      }
+      case "table": {
+        let headers = void 0;
+        const rows = [];
+        let nextIdx = idx + 1;
+        while (nextIdx < tokens.length && tokens[nextIdx].indent > baseIndent) {
+          const sub = tokens[nextIdx];
+          if (sub.command === "headers" || sub.command === "header") {
+            headers = sub.args.split(",").map((h) => this.stripQuotes(h.trim()));
+          } else if (sub.command === "row") {
+            rows.push(sub.args.split(",").map((c) => this.stripQuotes(c.trim())));
+          }
+          nextIdx++;
+        }
+        return { element: createTable(rows, headers), nextIdx };
+      }
       case "quote": {
         const authorMatch = tok.args.match(/\bauthor=["']([^"']+)["']/);
         const textLines = [];
@@ -2333,36 +2475,36 @@ var terminalTheme = {
   },
   radius: {
     none: 0,
-    sm: 0,
-    md: 0,
-    lg: 0,
-    xl: 0,
-    full: 0,
-    default: 0
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+    default: 10
   },
   shadows: {
     none: "none",
-    sm: "none",
-    md: "none",
-    lg: "none",
-    glow: "0 0 15px rgba(0, 255, 102, 0.4)"
+    sm: "0 2px 4px rgba(0, 0, 0, 0.3)",
+    md: "0 4px 12px rgba(0, 0, 0, 0.4)",
+    lg: "0 10px 24px rgba(0, 0, 0, 0.5)",
+    glow: "0 0 16px rgba(0, 255, 102, 0.35)"
   },
   components: {
     card: {
-      background: "#141A14",
-      borderColor: "#00FF66",
-      borderRadius: 0,
+      background: "#111711",
+      borderColor: "rgba(0, 255, 102, 0.35)",
+      borderRadius: 12,
       padding: 24
     },
     metric: {
       valueColor: "#00FF66",
       labelColor: "#4E7A4E",
-      borderRadius: 0
+      borderRadius: 12
     },
     code: {
-      background: "#070A07",
+      background: "#080C08",
       textColor: "#00FF66",
-      borderRadius: 0
+      borderRadius: 8
     },
     table: {
       headerBackground: "#1F331F",
@@ -4754,6 +4896,8 @@ var HtmlRenderer = class {
     const aspectRatio = presentation.metadata.aspectRatio || "16:9";
     const is43 = aspectRatio === "4:3";
     const ratioAspect = is43 ? "4 / 3" : "16 / 9";
+    const ratioW = is43 ? 4 : 16;
+    const ratioH = is43 ? 3 : 9;
     const options = context.options || {};
     const liveReloadScript = options.liveReload ? `
     <!-- YumiaMD Live Reload -->
@@ -4796,6 +4940,7 @@ 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>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Fira+Code:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Orbitron:wght@500;700;900&family=Outfit:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,400;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;600;700&display=swap">
   ${customStyles}
   ${customScripts}
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous">
@@ -4869,6 +5014,8 @@ var HtmlRenderer = class {
       --yumia-radius-card: ${theme.components?.card?.borderRadius ?? theme.radius.default}px;
       --yumia-shadow-glow: ${theme.shadows?.glow || "none"};
       --yumia-ratio: ${ratioAspect};
+      --yumia-ratio-w: ${ratioW};
+      --yumia-ratio-h: ${ratioH};
     }
 
     * {
@@ -4890,19 +5037,34 @@ var HtmlRenderer = class {
       user-select: none;
     }
 
+    #deck-container {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      background: #050508;
+    }
+
     #yumia-deck {
       position: relative;
       width: 100%;
       height: 100%;
+      max-width: calc(100vh * var(--yumia-ratio-w) / var(--yumia-ratio-h));
+      max-height: calc(100vw * var(--yumia-ratio-h) / var(--yumia-ratio-w));
+      aspect-ratio: var(--yumia-ratio);
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
     .yumia-slide-wrapper {
-      position: relative;
-      width: min(94vw, calc(94vh * (${is43 ? "4 / 3" : "16 / 9"})));
-      height: min(calc(94vw / (${is43 ? "4 / 3" : "16 / 9"})), 94vh);
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
       aspect-ratio: var(--yumia-ratio);
       background-color: var(--yumia-bg);
       border-radius: var(--yumia-radius-default);
@@ -4910,7 +5072,10 @@ var HtmlRenderer = class {
       overflow: hidden;
       display: none;
       flex-direction: column;
-      padding: 4.5% 5.5%;
+      justify-content: flex-start;
+      align-items: stretch;
+      padding: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem);
+      box-sizing: border-box;
       animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     }
 
@@ -4928,38 +5093,40 @@ var HtmlRenderer = class {
       font-family: var(--yumia-font-heading), system-ui, -apple-system, sans-serif;
       font-weight: 700;
       line-height: var(--yumia-line-height-tight);
-      margin-bottom: 0.7em;
+      margin-bottom: 0.4em;
       letter-spacing: var(--yumia-letter-spacing-tight);
       overflow-wrap: break-word;
       word-break: break-word;
     }
 
     h1 {
-      font-size: clamp(2rem, 3.8vw, 3.4rem);
+      font-size: clamp(1.8rem, 3.2vw, 2.9rem);
       color: var(--yumia-primary);
+      line-height: 1.15;
     }
 
     h2 {
-      font-size: clamp(1.6rem, 2.8vw, 2.5rem);
+      font-size: clamp(1.5rem, 2.6vw, 2.3rem);
       color: var(--yumia-text);
+      line-height: 1.2;
     }
 
     h3 {
-      font-size: clamp(1.3rem, 2.2vw, 1.9rem);
+      font-size: clamp(1.25rem, 2vw, 1.8rem);
       color: var(--yumia-text);
     }
 
     h4 {
-      font-size: clamp(1.1rem, 1.7vw, 1.4rem);
+      font-size: clamp(1.05rem, 1.5vw, 1.35rem);
       color: var(--yumia-muted);
     }
 
     /* Paragraphs */
     p {
-      font-size: clamp(1rem, 1.4vw, 1.25rem);
+      font-size: clamp(0.95rem, 1.35vw, 1.2rem);
       line-height: var(--yumia-line-height-normal);
       color: var(--yumia-text);
-      margin-bottom: 0.8em;
+      margin-bottom: 0.6em;
       overflow-wrap: break-word;
     }
 
@@ -4984,14 +5151,14 @@ var HtmlRenderer = class {
 
     /* Lists */
     ul, ol {
-      font-size: clamp(1rem, 1.35vw, 1.2rem);
-      line-height: 1.65;
-      margin-bottom: 1em;
+      font-size: clamp(0.95rem, 1.3vw, 1.15rem);
+      line-height: 1.6;
+      margin-bottom: 0.8em;
       padding-left: 1.5em;
     }
 
     li {
-      margin-bottom: 0.5em;
+      margin-bottom: 0.4em;
       color: var(--yumia-text);
     }
 
@@ -4999,12 +5166,41 @@ var HtmlRenderer = class {
       color: var(--yumia-primary);
     }
 
+    /* Grid & Stack Layout Containers */
+    .yumia-grid {
+      display: grid;
+      width: 100%;
+      flex: 1;
+      min-height: 0;
+      gap: clamp(1rem, 1.8vw, 1.6rem);
+      align-items: stretch;
+      margin-top: 0.4rem;
+    }
+
+    .yumia-stack {
+      display: flex;
+      width: 100%;
+      flex: 1;
+      min-height: 0;
+      gap: clamp(1rem, 1.8vw, 1.6rem);
+      align-items: stretch;
+      margin-top: 0.4rem;
+    }
+
+    .yumia-stack.stack-horizontal > * {
+      flex: 1 1 0px;
+      min-width: 0;
+      height: 100%;
+    }
+
     /* Columns */
     .yumia-columns {
       display: grid;
-      gap: 1.5rem;
+      gap: clamp(1rem, 1.8vw, 1.6rem);
       width: 100%;
-      margin: 0.8rem 0;
+      flex: 1;
+      min-height: 0;
+      margin: 0.4rem 0;
       align-items: stretch;
     }
 
@@ -5012,18 +5208,29 @@ var HtmlRenderer = class {
       display: flex;
       flex-direction: column;
       gap: 0.8rem;
+      height: 100%;
     }
 
     /* Cards */
     .yumia-card {
       background: var(--yumia-surface);
       border: 1.5px solid var(--yumia-border);
-      border-radius: 12px;
-      padding: 1.25rem 1.5rem;
+      border-radius: 14px;
+      padding: clamp(1.2rem, 2vw, 1.8rem);
       display: flex;
       flex-direction: column;
-      gap: 0.6rem;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      justify-content: flex-start;
+      gap: 0.7rem;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+      height: 100%;
+      min-height: 0;
+      box-sizing: border-box;
+      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .yumia-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
     }
 
     .yumia-card[data-variant="primary"] {
@@ -5047,6 +5254,13 @@ var HtmlRenderer = class {
       color: var(--yumia-success);
     }
 
+    .yumia-card[data-variant="accent"] {
+      border-color: var(--yumia-accent);
+    }
+    .yumia-card[data-variant="accent"] .yumia-card-title {
+      color: var(--yumia-accent);
+    }
+
     .yumia-card[data-variant="info"] {
       border-color: var(--yumia-info);
     }
@@ -5056,30 +5270,41 @@ var HtmlRenderer = class {
 
     .yumia-card-title {
       font-family: var(--yumia-font-heading);
-      font-size: 1.25rem;
+      font-size: clamp(1.1rem, 1.6vw, 1.35rem);
       font-weight: 700;
       color: var(--yumia-primary);
-      margin-bottom: 0.3rem;
+      margin-bottom: 0.2rem;
     }
 
     /* Metrics */
     .yumia-metric {
       background: var(--yumia-surface);
       border: 1.5px solid var(--yumia-border);
-      border-radius: 12px;
-      padding: 1rem 1.2rem;
+      border-radius: 14px;
+      padding: clamp(1.4rem, 2.5vw, 2.4rem) clamp(1rem, 2vw, 1.8rem);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
-      gap: 0.25rem;
+      gap: 0.5rem;
+      height: 100%;
+      min-height: 150px;
+      box-sizing: border-box;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+      transition: transform 0.2s ease, border-color 0.2s ease;
+    }
+
+    .yumia-metric:hover {
+      transform: translateY(-2px);
     }
 
     .yumia-metric[data-variant="primary"] { border-color: var(--yumia-primary); }
     .yumia-metric[data-variant="primary"] .yumia-metric-value { color: var(--yumia-primary); }
     .yumia-metric[data-variant="success"] { border-color: var(--yumia-success); }
     .yumia-metric[data-variant="success"] .yumia-metric-value { color: var(--yumia-success); }
+    .yumia-metric[data-variant="accent"] { border-color: var(--yumia-accent); }
+    .yumia-metric[data-variant="accent"] .yumia-metric-value { color: var(--yumia-accent); }
     .yumia-metric[data-variant="info"] { border-color: var(--yumia-info); }
     .yumia-metric[data-variant="info"] .yumia-metric-value { color: var(--yumia-info); }
     .yumia-metric[data-variant="warning"] { border-color: var(--yumia-warning); }
@@ -5088,28 +5313,55 @@ var HtmlRenderer = class {
     .yumia-metric[data-variant="danger"] .yumia-metric-value { color: var(--yumia-danger); }
 
     .yumia-metric-label {
-      font-size: 0.75rem;
+      font-size: clamp(0.72rem, 1vw, 0.9rem);
       font-weight: 700;
       text-transform: uppercase;
-      letter-spacing: 0.08em;
+      letter-spacing: 0.1em;
       color: var(--yumia-muted);
     }
 
     .yumia-metric-value {
       font-family: var(--yumia-font-heading);
-      font-size: clamp(1.8rem, 3.2vw, 2.6rem);
+      font-size: clamp(2.3rem, 4.2vw, 3.8rem);
       font-weight: 800;
-      line-height: 1.1;
+      line-height: 1.05;
       color: var(--yumia-primary);
     }
 
     .yumia-metric-change {
-      font-size: 0.85rem;
+      font-size: clamp(0.8rem, 1.1vw, 1rem);
       font-weight: 600;
+      padding: 4px 12px;
+      border-radius: 9999px;
+      background: rgba(255, 255, 255, 0.08);
     }
     .yumia-metric-change.positive { color: var(--yumia-success); }
     .yumia-metric-change.negative { color: var(--yumia-danger); }
 
+    /* Chart Containers */
+    .yumia-chart-container {
+      width: 100%;
+      flex: 1;
+      min-height: 220px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      background: var(--yumia-surface);
+      border: 1.5px solid var(--yumia-border);
+      border-radius: 14px;
+      padding: clamp(1rem, 2vw, 1.6rem);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    }
+
+    .yumia-chart-title {
+      font-family: var(--yumia-font-heading);
+      font-size: clamp(1.1rem, 1.5vw, 1.35rem);
+      font-weight: 700;
+      color: var(--yumia-primary);
+      margin-bottom: 0.6rem;
+      text-align: center;
+    }
+
     /* Tables */
     table {
       width: 100%;
@@ -6263,8 +6515,8 @@ var HtmlRenderer = class {
     const transition = slide.transition || "fade";
     const transType = typeof transition === "string" ? transition : transition.type;
     const transClass = `transition-${transType || "fade"}`;
-    const isWatermarkEnabled = watermarkOpt !== false;
-    const watermarkText = typeof watermarkOpt === "string" && watermarkOpt.trim().length > 0 ? watermarkOpt : "YumiaMD";
+    const isWatermarkEnabled = watermarkOpt !== void 0 && watermarkOpt !== false && watermarkOpt !== "none" && watermarkOpt !== "false" && watermarkOpt !== "off";
+    const watermarkText = typeof watermarkOpt === "string" && watermarkOpt.trim().length > 0 && watermarkOpt !== "true" && watermarkOpt !== "yes" && watermarkOpt !== "on" ? watermarkOpt : "Yumia";
     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 `
@@ -6416,7 +6668,18 @@ var HtmlRenderer = class {
       case "image": {
         const img = element;
         const alt = img.alt ? `alt="${this.escapeHtml(img.alt)}"` : "";
-        return `<img src="${this.escapeHtml(img.src)}" ${alt} style="max-width: 100%; border-radius: 8px;">`;
+        const width = img.width ? typeof img.width === "number" ? `${img.width}px` : img.width : "100%";
+        const height = img.height ? typeof img.height === "number" ? `${img.height}px` : img.height : "auto";
+        const fit = img.fit || "cover";
+        const radius = img.radius !== void 0 ? typeof img.radius === "number" ? `${img.radius}px` : img.radius : "var(--yumia-radius-card)";
+        const shadowStyle = img.shadow ? "box-shadow: 0 12px 30px rgba(0,0,0,0.45);" : "";
+        const aspect = img.aspectRatio ? `aspect-ratio: ${img.aspectRatio};` : "";
+        const cap = img.caption ? `<figcaption style="margin-top: 6px; font-size: 0.85rem; color: var(--yumia-muted); text-align: center;">${this.formatInline(img.caption)}</figcaption>` : "";
+        return `
+        <figure class="yumia-image-wrapper" style="margin: 0.4rem 0; width: ${width}; max-width: 100%; display: flex; flex-direction: column; align-items: center;">
+          <img src="${this.escapeHtml(img.src)}" ${alt} style="width: 100%; height: ${height}; object-fit: ${fit}; border-radius: ${radius}; ${aspect} ${shadowStyle} border: 1.5px solid var(--yumia-border);">
+          ${cap}
+        </figure>`;
       }
       case "metric": {
         const m = element;
@@ -6477,24 +6740,25 @@ var HtmlRenderer = class {
       }
       case "icon": {
         const ic = element;
-        const iconSvg = defaultIconResolver.toSvg(ic.name, ic.size || 24, ic.color || "currentColor", "yumia-icon");
+        const iconSvg = defaultIconResolver.toSvg(ic.name, ic.size || 28, 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 cols = typeof g.columns === "number" ? `repeat(${g.columns}, minmax(0, 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>`;
+        return `<div class="yumia-grid" style="grid-template-columns:${cols}; gap:${gap};">${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 isHoriz = st.direction === "horizontal";
+        const dir = isHoriz ? "row" : "column";
+        const gap = st.gap !== void 0 ? typeof st.gap === "number" ? `${st.gap}px` : st.gap : "1.5rem";
         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>`;
+        return `<div class="yumia-stack ${isHoriz ? "stack-horizontal" : "stack-vertical"}" style="flex-direction:${dir}; gap:${gap}; ${align} ${justify}">${inner}</div>`;
       }
       case "compare": {
         return this.renderCompare(element, theme);
@@ -6554,11 +6818,18 @@ var HtmlRenderer = class {
     if (c.chartType === "line") {
       const allValues = series.flatMap((s) => s.values);
       const maxVal2 = Math.max(...allValues, 1);
-      const width2 = 500;
-      const height2 = 180;
-      const padding2 = 35;
+      const width2 = 640;
+      const height2 = 240;
+      const padding2 = 45;
       const plotW2 = width2 - padding2 * 2;
       const plotH2 = height2 - padding2 * 2;
+      const gridLines2 = [0.25, 0.5, 0.75, 1].map((ratio) => {
+        const y = height2 - padding2 - ratio * plotH2;
+        const valLabel = Math.round(ratio * maxVal2);
+        return `
+          <line x1="${padding2}" y1="${y}" x2="${width2 - padding2}" y2="${y}" stroke="rgba(255,255,255,0.08)" stroke-dasharray="4 4" />
+          <text x="${padding2 - 8}" y="${y + 4}" text-anchor="end" fill="${theme.colors.muted || "#64748b"}" font-size="10" font-family="sans-serif">${valLabel}</text>`;
+      }).join("");
       let pathsHtml = "";
       series.forEach((s, sIdx) => {
         const sColor = s.color || colors[sIdx % colors.length];
@@ -6568,20 +6839,21 @@ var HtmlRenderer = class {
           return `${x},${y}`;
         });
         const pointsStr = pts.join(" ");
-        const circles = pts.map((pt) => `<circle cx="${pt.split(",")[0]}" cy="${pt.split(",")[1]}" r="4" fill="${sColor}" />`).join("");
+        const circles = pts.map((pt) => `<circle cx="${pt.split(",")[0]}" cy="${pt.split(",")[1]}" r="5" fill="${sColor}" stroke="var(--yumia-surface)" stroke-width="2" />`).join("");
         pathsHtml += `
-        <polyline fill="none" stroke="${sColor}" stroke-width="3" stroke-linecap="round" points="${pointsStr}" />
+        <polyline fill="none" stroke="${sColor}" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" points="${pointsStr}" />
         ${circles}`;
       });
       const labelTexts = labels.map((l, i) => {
         const x = padding2 + i / Math.max(labels.length - 1, 1) * plotW2;
-        return `<text x="${x}" y="${height2 - 10}" text-anchor="middle" fill="${theme.colors.muted || "#94a3b8"}" font-size="11" font-family="sans-serif">${this.escapeHtml(l)}</text>`;
+        return `<text x="${x}" y="${height2 - 12}" text-anchor="middle" fill="${theme.colors.muted || "#94a3b8"}" font-size="11" font-weight="600" font-family="sans-serif">${this.escapeHtml(l)}</text>`;
       }).join("");
       return `
       <div class="yumia-chart-container">
         ${titleHtml}
-        <svg viewBox="0 0 ${width2} ${height2}" style="width:100%; max-height:220px;">
-          <line x1="${padding2}" y1="${height2 - padding2}" x2="${width2 - padding2}" y2="${height2 - padding2}" stroke="rgba(255,255,255,0.15)" stroke-width="1" />
+        <svg viewBox="0 0 ${width2} ${height2}" style="width:100%; height:100%; max-height:280px;">
+          ${gridLines2}
+          <line x1="${padding2}" y1="${height2 - padding2}" x2="${width2 - padding2}" y2="${height2 - padding2}" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" />
           ${pathsHtml}
           ${labelTexts}
         </svg>
@@ -6591,10 +6863,10 @@ var HtmlRenderer = class {
       const values2 = series[0]?.values || [];
       const total = values2.reduce((a, b) => a + b, 0) || 1;
       let cumulativePercent = 0;
-      const radius = 60;
-      const cx = 100;
-      const cy = 100;
-      const strokeWidth = c.chartType === "doughnut" ? 24 : 60;
+      const radius = 65;
+      const cx = 110;
+      const cy = 110;
+      const strokeWidth = c.chartType === "doughnut" ? 26 : 65;
       const circ = 2 * Math.PI * radius;
       const slices = values2.map((val, i) => {
         const percent = val / total;
@@ -6607,27 +6879,34 @@ var HtmlRenderer = class {
       const legend = labels.map((l, i) => {
         const sColor = colors[i % colors.length];
         const pct = Math.round((values2[i] || 0) / total * 100);
-        return `<div style="display:flex; align-items:center; gap:8px; font-size:12px; margin:4px 0;"><span style="width:10px; height:10px; border-radius:50%; background:${sColor};"></span><span style="color:var(--yumia-text);">${this.escapeHtml(l)} (${pct}%)</span></div>`;
+        return `<div style="display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; margin:6px 0;"><span style="width:12px; height:12px; border-radius:50%; background:${sColor}; box-shadow:0 0 6px ${sColor};"></span><span style="color:var(--yumia-text);">${this.escapeHtml(l)} <strong style="color:var(--yumia-primary);">(${pct}%)</strong></span></div>`;
       }).join("");
       return `
       <div class="yumia-chart-container">
         ${titleHtml}
-        <div style="display:flex; align-items:center; justify-content:center; gap:28px; width:100%;">
-          <svg viewBox="0 0 200 200" style="width:160px; height:160px; transform: rotate(-90deg);">
+        <div style="display:flex; align-items:center; justify-content:center; gap:36px; width:100%; padding:10px 0;">
+          <svg viewBox="0 0 220 220" style="width:180px; height:180px; transform: rotate(-90deg);">
             ${slices}
           </svg>
-          <div style="display:flex; flex-direction:column;">${legend}</div>
+          <div style="display:flex; flex-direction:column; justify-content:center;">${legend}</div>
         </div>
       </div>`;
     }
     const values = series[0]?.values || [];
     const maxVal = Math.max(...values, 1);
-    const width = 500;
-    const height = 180;
-    const padding = 35;
+    const width = 640;
+    const height = 240;
+    const padding = 45;
     const plotW = width - padding * 2;
     const plotH = height - padding * 2;
-    const barWidth = Math.min(48, Math.max(16, plotW / Math.max(values.length, 1) * 0.6));
+    const barWidth = Math.min(56, Math.max(20, plotW / Math.max(values.length, 1) * 0.55));
+    const gridLines = [0.25, 0.5, 0.75, 1].map((ratio) => {
+      const y = height - padding - ratio * plotH;
+      const valLabel = Math.round(ratio * maxVal);
+      return `
+        <line x1="${padding}" y1="${y}" x2="${width - padding}" y2="${y}" stroke="rgba(255,255,255,0.08)" stroke-dasharray="4 4" />
+        <text x="${padding - 8}" y="${y + 4}" text-anchor="end" fill="${theme.colors.muted || "#64748b"}" font-size="10" font-family="sans-serif">${valLabel}</text>`;
+    }).join("");
     const bars = values.map((val, i) => {
       const x = padding + (i + 0.5) * (plotW / Math.max(values.length, 1)) - barWidth / 2;
       const barH = val / maxVal * plotH;
@@ -6635,15 +6914,16 @@ var HtmlRenderer = class {
       const color = colors[i % colors.length];
       const label = labels[i] || "";
       return `
-        <rect x="${x}" y="${y}" width="${barWidth}" height="${barH}" rx="4" fill="${color}" opacity="0.9" />
-        <text x="${x + barWidth / 2}" y="${y - 6}" text-anchor="middle" fill="${color}" font-size="11" font-weight="600" font-family="sans-serif">${val}</text>
-        <text x="${x + barWidth / 2}" y="${height - 12}" text-anchor="middle" fill="${theme.colors.muted || "#94a3b8"}" font-size="11" font-family="sans-serif">${this.escapeHtml(label)}</text>`;
+        <rect x="${x}" y="${y}" width="${barWidth}" height="${barH}" rx="6" fill="${color}" opacity="0.95" />
+        <text x="${x + barWidth / 2}" y="${y - 8}" text-anchor="middle" fill="${color}" font-size="12" font-weight="700" font-family="sans-serif">${val}</text>
+        <text x="${x + barWidth / 2}" y="${height - 12}" text-anchor="middle" fill="${theme.colors.text || "#f8fafc"}" font-size="11" font-weight="600" font-family="sans-serif">${this.escapeHtml(label)}</text>`;
     }).join("");
     return `
     <div class="yumia-chart-container">
       ${titleHtml}
-      <svg viewBox="0 0 ${width} ${height}" style="width:100%; max-height:220px;">
-        <line x1="${padding}" y1="${height - padding}" x2="${width - padding}" y2="${height - padding}" stroke="rgba(255,255,255,0.15)" stroke-width="1" />
+      <svg viewBox="0 0 ${width} ${height}" style="width:100%; height:100%; max-height:280px;">
+        ${gridLines}
+        <line x1="${padding}" y1="${height - padding}" x2="${width - padding}" y2="${height - padding}" stroke="rgba(255,255,255,0.2)" stroke-width="1.5" />
         ${bars}
       </svg>
     </div>`;
@@ -7295,7 +7575,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.21";
+var VERSION = "0.1.23";
 function printHelp() {
   return `
 YumiaMD \u2014 Markdown-based presentation compiler (v${VERSION})

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export * from '@yumiamd/renderer-pptx';
 export * from '@yumiamd/renderer-html';
 export * from '@yumiamd/renderer-pdf';
 
-declare const VERSION = "0.1.21";
+declare const VERSION = "0.1.23";
 declare function printHelp(): string;
 declare function runCli(argv: string[]): Promise<{
     exitCode: number;

package/dist/index.js

@@ -66,7 +66,7 @@ import {
   terminalTheme,
   tokyoNightTheme,
   validate
-} from "./chunk-TJR6MU2I.js";
+} from "./chunk-GKERS3TA.js";
 export {
   DEFAULT_VIEWPORT,
   DefaultLayoutEngine,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yumiamd",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Command line interface and compiler for YumiaMD presentations",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,15 +21,15 @@
   },
   "devDependencies": {
     "tsup": "^8.5.1",
-    "@yumiamd/ast": "0.1.21",
-    "@yumiamd/layout": "0.1.21",
-    "@yumiamd/renderer": "0.1.21",
-    "@yumiamd/renderer-html": "0.1.21",
-    "@yumiamd/core": "0.1.21",
-    "@yumiamd/renderer-pptx": "0.1.21",
-    "@yumiamd/renderer-pdf": "0.1.21",
-    "@yumiamd/theme": "0.1.21",
-    "@yumiamd/parser": "0.1.21"
+    "@yumiamd/ast": "0.1.23",
+    "@yumiamd/core": "0.1.23",
+    "@yumiamd/parser": "0.1.23",
+    "@yumiamd/layout": "0.1.23",
+    "@yumiamd/renderer": "0.1.23",
+    "@yumiamd/renderer-html": "0.1.23",
+    "@yumiamd/renderer-pdf": "0.1.23",
+    "@yumiamd/renderer-pptx": "0.1.23",
+    "@yumiamd/theme": "0.1.23"
   },
   "keywords": [
     "yumia",