@squadbase/vantage 0.6.2-dev1.0017a4d → 0.6.2-dev1.02aab78

package/dist/slide/index.js

@@ -1,3 +1,5 @@
+import { DeltaText } from '../chunk-6OTTGAPO.js';
+export { DeltaText } from '../chunk-6OTTGAPO.js';
 import { useSearchState } from '../chunk-ZO62C6T4.js';
 import '../chunk-6S4BAIGV.js';
 import { EChart } from '../chunk-JXFCSF3K.js';
@@ -226,8 +228,13 @@ async function exportDeckAsPptx({
       background: "var(--slide-bg)",
       color: "var(--slide-fg)",
       fontFamily: "var(--slide-font-body)",
-      fontSize: "var(--slide-size-body)"
+      fontSize: "var(--slide-size-body)",
+      // Same phrase-aware line breaking as the on-screen canvas (see canvas.tsx).
+      wordBreak: "auto-phrase",
+      lineBreak: "strict",
+      overflowWrap: "break-word"
     });
+    if (document.documentElement.lang) host.lang = document.documentElement.lang;
     if (themeVars) {
       for (const [key, value] of Object.entries(themeVars)) {
         host.style.setProperty(key, String(value));
@@ -1636,16 +1643,32 @@ var SLIDE_SPEC = {
   /** Gaps between elements, in canvas px. */
   space: { sm: 32, md: 48, lg: 64 }
 };
-var MAX_INSIGHTS = 3;
-var MAX_INSIGHT_CHARS = 40;
-var LINE_TYPES = ["solid", "dashed", "dotted"];
-var SYMBOLS = ["circle", "rect", "triangle", "diamond"];
-function SlideHeading({ title }) {
+function SlideColumns({ children, align = "stretch" }) {
   return /* @__PURE__ */ jsx(
-    "h2",
+    "div",
     {
       style: {
         gridColumn: "1 / -1",
+        minHeight: 0,
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: "minmax(0, 1fr)",
+        columnGap: SLIDE_SPEC.grid.gutter,
+        alignItems: align
+      },
+      children
+    }
+  );
+}
+function SlideColumn({ span, children }) {
+  return /* @__PURE__ */ jsx("div", { style: { gridColumn: `span ${span}`, minWidth: 0, minHeight: 0 }, children });
+}
+function SlideHeading({ title, eyebrow }) {
+  const heading = /* @__PURE__ */ jsx(
+    "h2",
+    {
+      style: {
+        ...eyebrow ? {} : { gridColumn: "1 / -1" },
         margin: 0,
         fontFamily: "var(--slide-font-display)",
         fontSize: SLIDE_SPEC.fontSize.page,
@@ -1659,8 +1682,27 @@ function SlideHeading({ title }) {
       children: title
     }
   );
+  if (!eyebrow) return heading;
+  return /* @__PURE__ */ jsxs("div", { style: { gridColumn: "1 / -1", display: "flex", flexDirection: "column", gap: SLIDE_SPEC.space.sm }, children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          margin: 0,
+          fontSize: SLIDE_SPEC.fontSize.caption,
+          lineHeight: SLIDE_SPEC.lineHeight.body,
+          fontWeight: 700,
+          color: "var(--slide-accent)"
+        },
+        children: eyebrow
+      }
+    ),
+    heading
+  ] });
 }
-function SlideSourceLine({ asOf, source }) {
+function SlideSourceLine({ asOf, source, page }) {
+  const text = [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ");
+  if (!text && !page) return null;
   return /* @__PURE__ */ jsx(
     "p",
     {
@@ -1669,49 +1711,110 @@ function SlideSourceLine({ asOf, source }) {
         margin: 0,
         fontSize: SLIDE_SPEC.fontSize.caption,
         lineHeight: SLIDE_SPEC.lineHeight.body,
-        color: "var(--slide-muted)"
+        color: "var(--slide-muted)",
+        ...page ? { display: "flex", justifyContent: "space-between", gap: SLIDE_SPEC.space.md } : {}
       },
-      children: [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ")
+      children: page ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { children: text }),
+        /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: `${page.current} / ${page.total}` })
+      ] }) : text
     }
   );
 }
+var MAX_INSIGHTS = 3;
+var MAX_INSIGHT_CHARS = 40;
+var LINE_TYPES = ["solid", "dashed", "dotted"];
+var SYMBOLS = ["circle", "rect", "triangle", "diamond"];
+function buildSlideChartOption(chart) {
+  return {
+    animation: false,
+    textStyle: { fontSize: SLIDE_SPEC.fontSize.caption },
+    grid: {
+      left: 0,
+      right: SLIDE_SPEC.space.sm,
+      top: chart.series.length > 1 ? SLIDE_SPEC.space.lg : SLIDE_SPEC.space.sm,
+      bottom: 0,
+      containLabel: true
+    },
+    legend: chart.series.length > 1 ? {
+      top: 0,
+      left: 0,
+      textStyle: { fontSize: SLIDE_SPEC.fontSize.caption }
+    } : { show: false },
+    // The first x label and the lowest y label meet at the corner: the margin keeps the x labels clear of the axis, and
+    // `hideOverlap` drops whichever still collides.
+    xAxis: {
+      type: "category",
+      data: chart.categories,
+      // Half a category of room on both sides keeps the first point off the y-axis labels (a line from the axis touches them).
+      boundaryGap: true,
+      axisLabel: {
+        fontSize: SLIDE_SPEC.fontSize.caption,
+        margin: SLIDE_SPEC.space.sm,
+        hideOverlap: true
+      }
+    },
+    yAxis: {
+      type: "value",
+      // A line from 0 hugs the top when the values sit in a narrow band; bars must keep their zero baseline.
+      scale: chart.type !== "bar",
+      axisLabel: {
+        fontSize: SLIDE_SPEC.fontSize.caption,
+        hideOverlap: true,
+        formatter: (v) => formatValue(v, "compact")
+      }
+    },
+    ...chart.type === "bar" && chart.series.length > 1 ? { aria: { enabled: true, decal: { show: true } } } : {},
+    series: chart.series.map((s, i) => ({
+      name: s.name,
+      type: chart.type === "bar" ? "bar" : "line",
+      data: s.data,
+      ...chart.type === "bar" ? {} : {
+        symbol: SYMBOLS[i % SYMBOLS.length],
+        symbolSize: SLIDE_SPEC.space.sm / 2,
+        lineStyle: { width: 6, type: LINE_TYPES[i % LINE_TYPES.length] }
+      },
+      ...chart.type === "area" ? { areaStyle: { opacity: 0.16 } } : {}
+    }))
+  };
+}
 function SlideChartInsight({ title, chart, insights, chartSide = "left", asOf, source }) {
   const hasSource = Boolean(asOf || source);
   if (insights.some((t) => t.length > MAX_INSIGHT_CHARS)) console.warn(`SlideChartInsight: an insight is over ${MAX_INSIGHT_CHARS} characters; the column is narrow. Shorten it.`);
   if (insights.length > MAX_INSIGHTS) console.warn(`SlideChartInsight: ${insights.length} insights; ${MAX_INSIGHTS} fit beside the chart. Split the slide.`);
-  const option = useMemo(
-    () => ({
-      animation: false,
-      textStyle: { fontSize: SLIDE_SPEC.fontSize.caption },
-      grid: { left: 0, right: SLIDE_SPEC.space.sm, top: chart.series.length > 1 ? SLIDE_SPEC.space.lg : SLIDE_SPEC.space.sm, bottom: 0, containLabel: true },
-      legend: chart.series.length > 1 ? { top: 0, left: 0, textStyle: { fontSize: SLIDE_SPEC.fontSize.caption } } : { show: false },
-      // The first x label and the lowest y label meet at the corner: the margin keeps the x labels clear of the axis, and
-      // `hideOverlap` drops whichever still collides.
-      xAxis: {
-        type: "category",
-        data: chart.categories,
-        // Half a category of room on both sides keeps the first point off the y-axis labels (a line from the axis touches them).
-        boundaryGap: true,
-        axisLabel: { fontSize: SLIDE_SPEC.fontSize.caption, margin: SLIDE_SPEC.space.sm, hideOverlap: true }
-      },
-      yAxis: {
-        type: "value",
-        // A line from 0 hugs the top when the values sit in a narrow band; bars must keep their zero baseline.
-        scale: chart.type !== "bar",
-        axisLabel: { fontSize: SLIDE_SPEC.fontSize.caption, hideOverlap: true, formatter: (v) => formatValue(v, "compact") }
-      },
-      ...chart.type === "bar" && chart.series.length > 1 ? { aria: { enabled: true, decal: { show: true } } } : {},
-      series: chart.series.map((s, i) => ({
-        name: s.name,
-        type: chart.type === "bar" ? "bar" : "line",
-        data: s.data,
-        ...chart.type === "bar" ? {} : { symbol: SYMBOLS[i % SYMBOLS.length], symbolSize: SLIDE_SPEC.space.sm / 2, lineStyle: { width: 6, type: LINE_TYPES[i % LINE_TYPES.length] } },
-        ...chart.type === "area" ? { areaStyle: { opacity: 0.16 } } : {}
-      }))
-    }),
-    [chart]
-  );
+  const option = useMemo(() => buildSlideChartOption(chart), [chart]);
   const chartFirst = chartSide === "left";
+  const chartColumn = /* @__PURE__ */ jsx(SlideColumn, { span: 7, children: /* @__PURE__ */ jsx("div", { "data-waitfor": "canvas", style: { minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: title }) }) });
+  const insightsColumn = /* @__PURE__ */ jsx(SlideColumn, { span: 5, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      style: {
+        height: "100%",
+        boxSizing: "border-box",
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: SLIDE_SPEC.space.md
+      },
+      children: insights.map((text, i) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          style: {
+            paddingLeft: SLIDE_SPEC.space.sm,
+            borderLeft: "4px solid var(--slide-accent)",
+            fontSize: "var(--slide-size-body)",
+            lineHeight: SLIDE_SPEC.lineHeight.body
+          },
+          children: text
+        },
+        i
+      ))
+    }
+  ) });
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -1731,37 +1834,10 @@ function SlideChartInsight({ title, chart, insights, chartSide = "left", asOf, s
       },
       children: [
         /* @__PURE__ */ jsx(SlideHeading, { title }),
-        /* @__PURE__ */ jsx("div", { "data-waitfor": "canvas", style: { gridColumn: chartFirst ? "1 / span 7" : "6 / span 7", gridRow: 2, minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: title }) }),
-        /* @__PURE__ */ jsx(
-          "ul",
-          {
-            style: {
-              gridColumn: chartFirst ? "8 / span 5" : "1 / span 5",
-              gridRow: 2,
-              margin: 0,
-              padding: 0,
-              listStyle: "none",
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gap: SLIDE_SPEC.space.md
-            },
-            children: insights.map((text, i) => /* @__PURE__ */ jsx(
-              "li",
-              {
-                style: {
-                  paddingLeft: SLIDE_SPEC.space.sm,
-                  borderLeft: "4px solid var(--slide-accent)",
-                  fontSize: "var(--slide-size-body)",
-                  lineHeight: SLIDE_SPEC.lineHeight.body
-                },
-                children: text
-              },
-              i
-            ))
-          }
-        ),
+        /* @__PURE__ */ jsxs(SlideColumns, { children: [
+          chartFirst ? chartColumn : insightsColumn,
+          chartFirst ? insightsColumn : chartColumn
+        ] }),
         hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
       ]
     }
@@ -1791,11 +1867,12 @@ function SlideCover({ title, subtitle, period, author, asOf, source }) {
         fontFamily: "var(--slide-font-body)"
       },
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(SlideColumns, { children: /* @__PURE__ */ jsx(SlideColumn, { span: 8, children: /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
-              gridColumn: "1 / span 8",
+              height: "100%",
+              boxSizing: "border-box",
               display: "flex",
               flexDirection: "column",
               justifyContent: "center",
@@ -1821,7 +1898,7 @@ function SlideCover({ title, subtitle, period, author, asOf, source }) {
               subtitle && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.body, color: "var(--slide-muted)" }, children: subtitle })
             ]
           }
-        ),
+        ) }) }),
         meta.length > 0 && /* @__PURE__ */ jsx(
           "p",
           {
@@ -1840,41 +1917,6 @@ function SlideCover({ title, subtitle, period, author, asOf, source }) {
   );
 }
 var MAX_POINTS = 5;
-function SlideHeading2({ title }) {
-  return /* @__PURE__ */ jsx(
-    "h2",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontFamily: "var(--slide-font-display)",
-        fontSize: SLIDE_SPEC.fontSize.page,
-        lineHeight: SLIDE_SPEC.lineHeight.heading,
-        fontWeight: 700,
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        WebkitLineClamp: 2,
-        overflow: "hidden"
-      },
-      children: title
-    }
-  );
-}
-function SlideSourceLine2({ asOf, source }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontSize: SLIDE_SPEC.fontSize.caption,
-        lineHeight: SLIDE_SPEC.lineHeight.body,
-        color: "var(--slide-muted)"
-      },
-      children: [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ")
-    }
-  );
-}
 function SlideExecSummary({ title, points, layout = "rows", asOf, source }) {
   const hasSource = Boolean(asOf || source);
   if (points.length > MAX_POINTS) console.warn(`SlideExecSummary: ${points.length} points; ${MAX_POINTS} fit the canvas. Split the slide.`);
@@ -1897,7 +1939,7 @@ function SlideExecSummary({ title, points, layout = "rows", asOf, source }) {
         fontFamily: "var(--slide-font-body)"
       },
       children: [
-        /* @__PURE__ */ jsx(SlideHeading2, { title }),
+        /* @__PURE__ */ jsx(SlideHeading, { title }),
         layout === "columns" ? /* @__PURE__ */ jsx(
           "ol",
           {
@@ -1965,47 +2007,12 @@ function SlideExecSummary({ title, points, layout = "rows", asOf, source }) {
             ))
           }
         ),
-        hasSource && /* @__PURE__ */ jsx(SlideSourceLine2, { asOf, source })
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
       ]
     }
   );
 }
 var MAX_ITEMS = 4;
-function SlideHeading3({ title }) {
-  return /* @__PURE__ */ jsx(
-    "h2",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontFamily: "var(--slide-font-display)",
-        fontSize: SLIDE_SPEC.fontSize.page,
-        lineHeight: SLIDE_SPEC.lineHeight.heading,
-        fontWeight: 700,
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        WebkitLineClamp: 2,
-        overflow: "hidden"
-      },
-      children: title
-    }
-  );
-}
-function SlideSourceLine3({ asOf, source }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontSize: SLIDE_SPEC.fontSize.caption,
-        lineHeight: SLIDE_SPEC.lineHeight.body,
-        color: "var(--slide-muted)"
-      },
-      children: [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ")
-    }
-  );
-}
 var ARROW = { up: "\u25B2", down: "\u25BC", flat: "\u25AC" };
 var WORD = { up: "\u5897", down: "\u6E1B", flat: "\u6A2A\u3070\u3044" };
 function deltaView(delta, betterWhen) {
@@ -2042,7 +2049,7 @@ function SlideKpiGrid({ title, items, asOf, source }) {
         fontFamily: "var(--slide-font-body)"
       },
       children: [
-        /* @__PURE__ */ jsx(SlideHeading3, { title }),
+        /* @__PURE__ */ jsx(SlideHeading, { title }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -2100,46 +2107,11 @@ function SlideKpiGrid({ title, items, asOf, source }) {
             })
           }
         ),
-        hasSource && /* @__PURE__ */ jsx(SlideSourceLine3, { asOf, source })
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
       ]
     }
   );
 }
-function SlideHeading4({ title }) {
-  return /* @__PURE__ */ jsx(
-    "h2",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontFamily: "var(--slide-font-display)",
-        fontSize: SLIDE_SPEC.fontSize.page,
-        lineHeight: SLIDE_SPEC.lineHeight.heading,
-        fontWeight: 700,
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        WebkitLineClamp: 2,
-        overflow: "hidden"
-      },
-      children: title
-    }
-  );
-}
-function SlideSourceLine4({ asOf, source }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontSize: SLIDE_SPEC.fontSize.caption,
-        lineHeight: SLIDE_SPEC.lineHeight.body,
-        color: "var(--slide-muted)"
-      },
-      children: [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ")
-    }
-  );
-}
 var ARROW2 = { up: "\u25B2", down: "\u25BC", flat: "\u25AC" };
 var WORD2 = { up: "\u5897", down: "\u6E1B", flat: "\u6A2A\u3070\u3044" };
 function deltaView2(delta, betterWhen) {
@@ -2200,84 +2172,51 @@ function SlideKpiHero({ title, label, value, format, display, delta, betterWhen
         fontFamily: "var(--slide-font-body)"
       },
       children: [
-        /* @__PURE__ */ jsx(SlideHeading4, { title }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              gridColumn: option ? "1 / span 6" : "1 / -1",
-              minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              gap: SLIDE_SPEC.space.sm
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading, color: "var(--slide-muted)" }, children: label }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-raw": value ?? void 0,
-                  style: {
-                    fontFamily: "var(--slide-font-display)",
-                    fontSize: "var(--slide-size-hero)",
-                    lineHeight: SLIDE_SPEC.lineHeight.heading,
-                    fontWeight: 700,
-                    fontVariantNumeric: "tabular-nums"
-                  },
-                  children: display ?? formatValue(value, format)
-                }
-              ),
-              (deltaShown || comparisonLabel) && /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: SLIDE_SPEC.space.sm, fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading }, children: [
-                deltaShown && /* @__PURE__ */ jsx("span", { style: { color: deltaShown.color, fontWeight: 700 }, children: deltaShown.text }),
-                comparisonLabel && /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, color: "var(--slide-muted)" }, children: comparisonLabel })
-              ] })
-            ]
-          }
-        ),
-        option && /* @__PURE__ */ jsx("div", { "data-waitfor": "canvas", style: { gridColumn: "7 / span 6", minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: `${label}\u306E\u63A8\u79FB` }) }),
-        hasSource && /* @__PURE__ */ jsx(SlideSourceLine4, { asOf, source })
+        /* @__PURE__ */ jsx(SlideHeading, { title }),
+        /* @__PURE__ */ jsxs(SlideColumns, { children: [
+          /* @__PURE__ */ jsx(SlideColumn, { span: option ? 6 : 12, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                height: "100%",
+                boxSizing: "border-box",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                gap: SLIDE_SPEC.space.sm
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading, color: "var(--slide-muted)" }, children: label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-raw": value ?? void 0,
+                    style: {
+                      fontFamily: "var(--slide-font-display)",
+                      fontSize: "var(--slide-size-hero)",
+                      lineHeight: SLIDE_SPEC.lineHeight.heading,
+                      fontWeight: 700,
+                      fontVariantNumeric: "tabular-nums"
+                    },
+                    children: display ?? formatValue(value, format)
+                  }
+                ),
+                (deltaShown || comparisonLabel) && /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: SLIDE_SPEC.space.sm, fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading }, children: [
+                  deltaShown && /* @__PURE__ */ jsx("span", { style: { color: deltaShown.color, fontWeight: 700 }, children: deltaShown.text }),
+                  comparisonLabel && /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, color: "var(--slide-muted)" }, children: comparisonLabel })
+                ] })
+              ]
+            }
+          ) }),
+          option && /* @__PURE__ */ jsx(SlideColumn, { span: 6, children: /* @__PURE__ */ jsx("div", { "data-waitfor": "canvas", style: { minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: `${label}\u306E\u63A8\u79FB` }) }) })
+        ] }),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
       ]
     }
   );
 }
 var MAX_ITEMS2 = 5;
 var MAX_DUE_CHARS = 10;
-function SlideHeading5({ title }) {
-  return /* @__PURE__ */ jsx(
-    "h2",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontFamily: "var(--slide-font-display)",
-        fontSize: SLIDE_SPEC.fontSize.page,
-        lineHeight: SLIDE_SPEC.lineHeight.heading,
-        fontWeight: 700,
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        WebkitLineClamp: 2,
-        overflow: "hidden"
-      },
-      children: title
-    }
-  );
-}
-function SlideSourceLine5({ asOf, source }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontSize: SLIDE_SPEC.fontSize.caption,
-        lineHeight: SLIDE_SPEC.lineHeight.body,
-        color: "var(--slide-muted)"
-      },
-      children: [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ")
-    }
-  );
-}
 function SlideNextActions({ title, items, asOf, source }) {
   const hasSource = Boolean(asOf || source);
   if (items.length > MAX_ITEMS2) console.warn(`SlideNextActions: ${items.length} items; ${MAX_ITEMS2} fit the canvas. Split the slide.`);
@@ -2308,7 +2247,7 @@ function SlideNextActions({ title, items, asOf, source }) {
         fontFamily: "var(--slide-font-body)"
       },
       children: [
-        /* @__PURE__ */ jsx(SlideHeading5, { title }),
+        /* @__PURE__ */ jsx(SlideHeading, { title }),
         /* @__PURE__ */ jsxs("div", { style: { gridColumn: "1 / -1", minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
           shown.length > 0 && /* @__PURE__ */ jsxs(
             "div",
@@ -2354,48 +2293,13 @@ function SlideNextActions({ title, items, asOf, source }) {
             i
           )) })
         ] }),
-        hasSource && /* @__PURE__ */ jsx(SlideSourceLine5, { asOf, source })
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
       ]
     }
   );
 }
 var MAX_ROWS = 8;
 var DENSE_ROWS = 6;
-function SlideHeading6({ title }) {
-  return /* @__PURE__ */ jsx(
-    "h2",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontFamily: "var(--slide-font-display)",
-        fontSize: SLIDE_SPEC.fontSize.page,
-        lineHeight: SLIDE_SPEC.lineHeight.heading,
-        fontWeight: 700,
-        display: "-webkit-box",
-        WebkitBoxOrient: "vertical",
-        WebkitLineClamp: 2,
-        overflow: "hidden"
-      },
-      children: title
-    }
-  );
-}
-function SlideSourceLine6({ asOf, source }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      style: {
-        gridColumn: "1 / -1",
-        margin: 0,
-        fontSize: SLIDE_SPEC.fontSize.caption,
-        lineHeight: SLIDE_SPEC.lineHeight.body,
-        color: "var(--slide-muted)"
-      },
-      children: [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${source}` : null].filter(Boolean).join(" / ")
-    }
-  );
-}
 var STATUS = {
   on: { label: "\u9806\u8ABF", color: "var(--positive)" },
   risk: { label: "\u8981\u6CE8\u610F", color: "var(--warning)" },
@@ -2438,7 +2342,7 @@ function SlideScorecardTable({ title, rows, columns, asOf, source }) {
         fontFamily: "var(--slide-font-body)"
       },
       children: [
-        /* @__PURE__ */ jsx(SlideHeading6, { title }),
+        /* @__PURE__ */ jsx(SlideHeading, { title }),
         /* @__PURE__ */ jsx("div", { style: { gridColumn: "1 / -1", minHeight: 0 }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: cellSize, lineHeight: SLIDE_SPEC.lineHeight.body }, children: [
           /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { color: "var(--slide-muted)", fontSize: SLIDE_SPEC.fontSize.caption }, children: [
             /* @__PURE__ */ jsx("th", { style: { ...cell, fontWeight: 700 }, children: head.metric }),
@@ -2459,12 +2363,225 @@ function SlideScorecardTable({ title, rows, columns, asOf, source }) {
             ] })
           ] }, i)) })
         ] }) }),
-        hasSource && /* @__PURE__ */ jsx(SlideSourceLine6, { asOf, source })
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+function SlideChartFull({ title, chart, note, asOf, source }) {
+  const hasSource = Boolean(asOf || source);
+  const option = useMemo(() => buildSlideChartOption(chart), [chart]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "slide-chart-full",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: ["auto", "1fr", note ? "auto" : null, hasSource ? "auto" : null].filter(Boolean).join(" "),
+        columnGap: SLIDE_SPEC.grid.gutter,
+        rowGap: SLIDE_SPEC.space.lg,
+        padding: `${SLIDE_SPEC.safeArea.y}px ${SLIDE_SPEC.safeArea.x}px`,
+        color: "var(--slide-fg)",
+        fontFamily: "var(--slide-font-body)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(SlideHeading, { title }),
+        /* @__PURE__ */ jsx(SlideColumns, { children: /* @__PURE__ */ jsx(SlideColumn, { span: 12, children: /* @__PURE__ */ jsx("div", { "data-waitfor": "canvas", style: { minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: title }) }) }) }),
+        note && /* @__PURE__ */ jsx("p", { style: { gridColumn: "1 / -1", margin: 0, fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.body }, children: note }),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+var MAX_POINTS2 = 3;
+var MAX_POINT_CHARS = 24;
+function SlideComparison({ title, columns, verdict, asOf, source }) {
+  const hasSource = Boolean(asOf || source);
+  if (columns.length < 2 || columns.length > 3) console.warn(`SlideComparison: ${columns.length} columns; 2\u20133 fit. Split the slide.`);
+  if (columns.some((c) => c.points.length > MAX_POINTS2 || c.points.some((t) => t.length > MAX_POINT_CHARS)))
+    console.warn(`SlideComparison: a column has over ${MAX_POINTS2} points or a point over ${MAX_POINT_CHARS} characters. Shorten it.`);
+  const span = Math.floor(SLIDE_SPEC.grid.columns / Math.max(columns.length, 1));
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "slide-comparison",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: ["auto", "1fr", verdict ? "auto" : null, hasSource ? "auto" : null].filter(Boolean).join(" "),
+        columnGap: SLIDE_SPEC.grid.gutter,
+        rowGap: SLIDE_SPEC.space.lg,
+        padding: `${SLIDE_SPEC.safeArea.y}px ${SLIDE_SPEC.safeArea.x}px`,
+        color: "var(--slide-fg)",
+        fontFamily: "var(--slide-font-body)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(SlideHeading, { title }),
+        /* @__PURE__ */ jsx(SlideColumns, { children: columns.map((col, i) => {
+          const main = col.display ?? (col.value === void 0 ? void 0 : col.value === null ? "\u2014" : formatValue(col.value, col.format));
+          return /* @__PURE__ */ jsx(SlideColumn, { span, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                height: "100%",
+                boxSizing: "border-box",
+                display: "flex",
+                flexDirection: "column",
+                gap: SLIDE_SPEC.space.md,
+                paddingTop: SLIDE_SPEC.space.sm,
+                borderTop: "4px solid var(--slide-accent)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: "var(--slide-size-body)",
+                      lineHeight: SLIDE_SPEC.lineHeight.heading,
+                      fontWeight: 700
+                    },
+                    children: col.heading
+                  }
+                ),
+                main !== void 0 && /* @__PURE__ */ jsxs("p", { style: { margin: 0, display: "flex", flexDirection: "column", gap: SLIDE_SPEC.space.sm }, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: "var(--slide-font-display)",
+                        fontSize: SLIDE_SPEC.fontSize.section,
+                        lineHeight: SLIDE_SPEC.lineHeight.heading,
+                        fontWeight: 700,
+                        fontVariantNumeric: "tabular-nums"
+                      },
+                      children: main
+                    }
+                  ),
+                  col.delta && /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.body }, children: /* @__PURE__ */ jsx(DeltaText, { value: col.delta.value, format: col.delta.format ?? col.format, betterWhen: col.betterWhen, comparisonLabel: col.comparisonLabel }) })
+                ] }),
+                col.points.length > 0 && /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    style: {
+                      margin: 0,
+                      padding: 0,
+                      listStyle: "none",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: SLIDE_SPEC.space.sm
+                    },
+                    children: col.points.map((text, j) => /* @__PURE__ */ jsx("li", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.body }, children: text }, j))
+                  }
+                )
+              ]
+            }
+          ) }, i);
+        }) }),
+        verdict && /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              gridColumn: "1 / -1",
+              margin: 0,
+              paddingLeft: SLIDE_SPEC.space.sm,
+              borderLeft: "4px solid var(--slide-accent)",
+              fontSize: "var(--slide-size-body)",
+              lineHeight: SLIDE_SPEC.lineHeight.body,
+              fontWeight: 700
+            },
+            children: verdict
+          }
+        ),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
       ]
     }
   );
 }
+function SlideSection({ index, title, lead, items, current }) {
+  const hasItems = Boolean(items && items.length > 0);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "data-slot": "slide-section",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: "minmax(0, 1fr)",
+        columnGap: SLIDE_SPEC.grid.gutter,
+        padding: `${SLIDE_SPEC.safeArea.y}px ${SLIDE_SPEC.safeArea.x}px`,
+        color: "var(--slide-fg)",
+        fontFamily: "var(--slide-font-body)"
+      },
+      children: /* @__PURE__ */ jsxs(SlideColumns, { align: "center", children: [
+        /* @__PURE__ */ jsx(SlideColumn, { span: hasItems ? 7 : 12, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: SLIDE_SPEC.space.md }, children: [
+          /* @__PURE__ */ jsx("div", { style: { width: SLIDE_SPEC.grid.columnWidth, height: 8, background: "var(--slide-accent)" } }),
+          index !== void 0 && /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                margin: 0,
+                fontSize: SLIDE_SPEC.fontSize.page,
+                lineHeight: SLIDE_SPEC.lineHeight.heading,
+                fontWeight: 700,
+                color: "var(--slide-accent)",
+                fontVariantNumeric: "tabular-nums"
+              },
+              children: String(index).padStart(2, "0")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h1",
+            {
+              style: {
+                margin: 0,
+                fontFamily: "var(--slide-font-display)",
+                fontSize: SLIDE_SPEC.fontSize.section,
+                lineHeight: SLIDE_SPEC.lineHeight.heading,
+                fontWeight: 700
+              },
+              children: title
+            }
+          ),
+          lead && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.body, color: "var(--slide-muted)" }, children: lead })
+        ] }) }),
+        hasItems && /* @__PURE__ */ jsx(SlideColumn, { span: 5, children: /* @__PURE__ */ jsx("ol", { style: { margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: SLIDE_SPEC.space.sm }, children: items.map((text, i) => {
+          const active = current === i + 1;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              "aria-current": active ? "step" : void 0,
+              style: {
+                display: "flex",
+                gap: SLIDE_SPEC.space.sm,
+                fontSize: "var(--slide-size-body)",
+                lineHeight: SLIDE_SPEC.lineHeight.body,
+                fontWeight: active ? 700 : 400,
+                color: active ? "var(--slide-accent)" : "var(--slide-muted)"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: String(i + 1).padStart(2, "0") }),
+                /* @__PURE__ */ jsx("span", { children: text })
+              ]
+            },
+            i
+          );
+        }) }) })
+      ] })
+    }
+  );
+}
 
-export { CANVAS_HEIGHT, CANVAS_WIDTH, MorphElement, Slide, SlideCanvas, SlideChartInsight, SlideCover, SlideDeck, SlideExecSummary, SlideKpiGrid, SlideKpiHero, SlideNextActions, SlideScorecardTable, Step, Steps, exportDeckAsPptx, useIsActiveSlide, useSlideNumber };
+export { CANVAS_HEIGHT, CANVAS_WIDTH, MorphElement, Slide, SlideCanvas, SlideChartFull, SlideChartInsight, SlideColumn, SlideColumns, SlideComparison, SlideCover, SlideDeck, SlideExecSummary, SlideHeading, SlideKpiGrid, SlideKpiHero, SlideNextActions, SlideScorecardTable, SlideSection, SlideSourceLine, Step, Steps, exportDeckAsPptx, useIsActiveSlide, useSlideNumber };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map