@squadbase/vantage 0.6.1 → 0.6.2-dev1.0010f67

package/dist/slide/index.js

@@ -1,5 +1,11 @@
+import { DeltaText } from '../chunk-TRMHNMMZ.js';
+export { DeltaText } from '../chunk-TRMHNMMZ.js';
 import { useSearchState } from '../chunk-ZO62C6T4.js';
 import '../chunk-6S4BAIGV.js';
+import { EChart } from '../chunk-EG4PX726.js';
+import { formatValue, EMPTY_VALUE } from '../chunk-3RJEOP3J.js';
+import { uiLanguage, useLocale } from '../chunk-ROHNXP7J.js';
+import '../chunk-U736PVHY.js';
 import { createContext, useRef, useState, useLayoutEffect, useContext, createElement, Children, isValidElement, useCallback, cloneElement, useMemo, useEffect } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createRoot } from 'react-dom/client';
@@ -58,6 +64,11 @@ function SlideCanvas({ children, scale, themeVars }) {
             transformOrigin: "top left",
             fontFamily: "var(--slide-font-body)",
             fontSize: "var(--slide-size-body)",
+            // Phrase-aware Japanese line breaks for every block. Browsers without
+            // `auto-phrase` drop the declaration and keep the strict line-break rules.
+            wordBreak: "auto-phrase",
+            lineBreak: "strict",
+            overflowWrap: "break-word",
             ...themeVars
           },
           children
@@ -217,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));
@@ -380,6 +396,41 @@ function isForwardKey(e) {
 function isBackwardKey(e) {
   return e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "PageUp";
 }
+
+// src/slide/messages.ts
+var MESSAGES_JA = {
+  previousSlide: "\u524D\u306E\u30B9\u30E9\u30A4\u30C9",
+  nextSlide: "\u6B21\u306E\u30B9\u30E9\u30A4\u30C9",
+  slideList: "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7",
+  closeSlideList: "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u9589\u3058\u308B (L)",
+  openSlideList: "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u958B\u304F (L)",
+  fullscreen: "\u5168\u753B\u9762\u8868\u793A (F)",
+  exitFullscreen: "\u5168\u753B\u9762\u8868\u793A\u3092\u7D42\u4E86 (F)",
+  exportToPowerPoint: "PowerPoint \u3068\u3057\u3066\u66F8\u304D\u51FA\u3059",
+  slideNumber: (n) => `\u30B9\u30E9\u30A4\u30C9 ${n}`
+};
+var MESSAGES_EN = {
+  previousSlide: "Previous slide",
+  nextSlide: "Next slide",
+  slideList: "Slide list",
+  closeSlideList: "Close slide list (L)",
+  openSlideList: "Open slide list (L)",
+  fullscreen: "Fullscreen (F)",
+  exitFullscreen: "Exit fullscreen (F)",
+  exportToPowerPoint: "Export to PowerPoint",
+  slideNumber: (n) => `Slide ${n}`
+};
+function detectLanguage() {
+  if (typeof document === "undefined") return "ja";
+  const lang = document.documentElement.lang;
+  if (!lang) return "ja";
+  if (lang.toLowerCase().startsWith("en")) return "en";
+  return "ja";
+}
+function getSlideMessages() {
+  const lang = detectLanguage();
+  return lang === "en" ? MESSAGES_EN : MESSAGES_JA;
+}
 var THUMB_WIDTH = 176;
 var THUMB_HEIGHT = Math.round(THUMB_WIDTH * CANVAS_HEIGHT / CANVAS_WIDTH);
 var NUMBER_COLUMN = 20;
@@ -400,6 +451,7 @@ var ITEM_BUTTON = {
 };
 function SlideRail({ slides, index, onSelect, themeVars }) {
   const listRef = useRef(null);
+  const messages = useMemo(() => getSlideMessages(), []);
   useEffect(() => {
     const item = listRef.current?.children[index];
     item?.scrollIntoView({ block: "nearest" });
@@ -408,7 +460,7 @@ function SlideRail({ slides, index, onSelect, themeVars }) {
     "div",
     {
       "data-slide-chrome": "",
-      "aria-label": "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7",
+      "aria-label": messages.slideList,
       style: {
         flex: "0 0 auto",
         width: RAIL_WIDTH,
@@ -418,7 +470,7 @@ function SlideRail({ slides, index, onSelect, themeVars }) {
         background: "color-mix(in oklab, var(--slide-fg) 6%, var(--slide-bg))",
         color: "var(--slide-fg)",
         borderRight: "1px solid color-mix(in oklab, var(--slide-fg) 14%, transparent)",
-        fontFamily: 'system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif',
         userSelect: "none",
         // An embedded deck does not put the theme on its root, so the rail
         // carries it too rather than reading whatever cascaded in.
@@ -452,7 +504,7 @@ function SlideRail({ slides, index, onSelect, themeVars }) {
                     style: ITEM_BUTTON,
                     onClick: () => onSelect(i),
                     "aria-current": active ? "true" : void 0,
-                    "aria-label": `\u30B9\u30E9\u30A4\u30C9 ${i + 1}`,
+                    "aria-label": messages.slideNumber(i + 1),
                     children: [
                       /* @__PURE__ */ jsx(
                         "span",
@@ -523,6 +575,7 @@ function SlideToolbar({
   onPrev,
   onNext,
   onFullscreen,
+  canFullscreen,
   onExport,
   exportProgress,
   railOpen,
@@ -531,6 +584,7 @@ function SlideToolbar({
 }) {
   const [hovered, setHovered] = useState(false);
   const busy = exportProgress !== null && exportProgress.phase !== "done";
+  const messages = useMemo(() => getSlideMessages(), []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -552,40 +606,40 @@ function SlideToolbar({
         backdropFilter: "blur(8px)",
         opacity: hovered || busy ? 1 : 0.25,
         transition: "opacity 150ms ease",
-        fontFamily: 'system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif',
         userSelect: "none"
       },
       children: [
-        /* @__PURE__ */ jsx("button", { type: "button", style: BUTTON, onClick: onPrev, "aria-label": "\u524D\u306E\u30B9\u30E9\u30A4\u30C9", children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 16, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", style: BUTTON, onClick: onPrev, "aria-label": messages.previousSlide, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 16, "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsxs("span", { style: { padding: "0 8px", fontSize: 13, fontVariantNumeric: "tabular-nums" }, children: [
           current,
           " / ",
           total
         ] }),
-        /* @__PURE__ */ jsx("button", { type: "button", style: BUTTON, onClick: onNext, "aria-label": "\u6B21\u306E\u30B9\u30E9\u30A4\u30C9", children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", style: BUTTON, onClick: onNext, "aria-label": messages.nextSlide, children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16, "aria-hidden": "true" }) }),
         isFullscreen ? null : /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             style: BUTTON,
             onClick: onToggleRail,
-            "aria-label": railOpen ? "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u9589\u3058\u308B (L)" : "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u958B\u304F (L)",
-            title: railOpen ? "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u9589\u3058\u308B (L)" : "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u958B\u304F (L)",
+            "aria-label": railOpen ? messages.closeSlideList : messages.openSlideList,
+            title: railOpen ? messages.closeSlideList : messages.openSlideList,
             "aria-pressed": railOpen,
             children: railOpen ? /* @__PURE__ */ jsx(PanelLeftCloseIcon, { size: 16, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PanelLeftOpenIcon, { size: 16, "aria-hidden": "true" })
           }
         ),
-        /* @__PURE__ */ jsx(
+        canFullscreen ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             style: BUTTON,
             onClick: onFullscreen,
-            "aria-label": isFullscreen ? "\u5168\u753B\u9762\u8868\u793A\u3092\u7D42\u4E86 (F)" : "\u5168\u753B\u9762\u8868\u793A (F)",
-            title: isFullscreen ? "\u5168\u753B\u9762\u8868\u793A\u3092\u7D42\u4E86 (F)" : "\u5168\u753B\u9762\u8868\u793A (F)",
+            "aria-label": isFullscreen ? messages.exitFullscreen : messages.fullscreen,
+            title: isFullscreen ? messages.exitFullscreen : messages.fullscreen,
             children: isFullscreen ? /* @__PURE__ */ jsx(MinimizeIcon, { size: 16, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MaximizeIcon, { size: 16, "aria-hidden": "true" })
           }
-        ),
+        ) : null,
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -593,8 +647,8 @@ function SlideToolbar({
             style: { ...BUTTON, opacity: busy ? 0.6 : 1, cursor: busy ? "progress" : "pointer" },
             onClick: onExport,
             disabled: busy,
-            "aria-label": "PowerPoint \u3068\u3057\u3066\u66F8\u304D\u51FA\u3059",
-            title: "PowerPoint \u3068\u3057\u3066\u66F8\u304D\u51FA\u3059",
+            "aria-label": messages.exportToPowerPoint,
+            title: messages.exportToPowerPoint,
             children: [
               /* @__PURE__ */ jsx(DownloadIcon, { size: 16, "aria-hidden": "true" }),
               busy ? /* @__PURE__ */ jsxs("span", { children: [
@@ -1376,6 +1430,10 @@ function collectSlides(children) {
   }
   return { slides, transitions };
 }
+function fullscreenEnabled() {
+  if (typeof document === "undefined") return false;
+  return document.fullscreenEnabled === true;
+}
 function defaultExportName() {
   if (typeof window === "undefined") return "slides";
   const parts = window.location.pathname.split("/").filter(Boolean);
@@ -1396,6 +1454,7 @@ function SlideDeck({
   const index = Math.min(Math.max(Math.floor(page) - 1, 0), Math.max(total - 1, 0));
   const [railOpen, setRailOpen] = useSearchState("rail", rail);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [canFullscreen] = useState(fullscreenEnabled);
   const [entryDirection, setEntryDirection] = useState("jump");
   const [exporting, setExporting] = useState(null);
   const stepControllerRef = useRef(null);
@@ -1421,9 +1480,11 @@ function SlideDeck({
   const toggleRail = useCallback(() => setRailOpen((open) => !open), [setRailOpen]);
   const toggleFullscreen = useCallback(() => {
     const el = viewportRef.current;
-    if (!el) return;
-    if (document.fullscreenElement) void document.exitFullscreen();
-    else void el.requestFullscreen?.();
+    if (!el || !fullscreenEnabled()) return;
+    if (document.fullscreenElement) document.exitFullscreen().catch(() => {
+    });
+    else el.requestFullscreen?.().catch(() => {
+    });
   }, []);
   useEffect(() => {
     const onChange = () => setIsFullscreen(document.fullscreenElement === viewportRef.current);
@@ -1541,6 +1602,7 @@ function SlideDeck({
               onPrev: goPrev,
               onNext: goNext,
               onFullscreen: toggleFullscreen,
+              canFullscreen,
               onExport,
               exportProgress: exporting,
               railOpen,
@@ -1565,7 +1627,1012 @@ function MorphElement({ id, children, className, style }) {
   }
   return /* @__PURE__ */ jsx("div", { className, style, "data-slide-morph": id, children });
 }
+var SAFE_X = 160;
+var SAFE_Y = 120;
+var COLUMNS = 12;
+var GUTTER2 = 32;
+var COLUMN_WIDTH = 104;
+var SLIDE_SPEC = {
+  /** Keep content inside this margin; backgrounds may bleed past it. */
+  safeArea: { x: SAFE_X, y: SAFE_Y },
+  /** Spans the content width: 12 columns + 11 gutters = 1600. */
+  grid: { columns: COLUMNS, gutter: GUTTER2, columnWidth: COLUMN_WIDTH },
+  /** Font sizes in canvas px, strictly increasing. */
+  fontSize: { caption: 24, page: 64, section: 88},
+  lineHeight: { heading: 1.2, body: 1.6 },
+  /** Gaps between elements, in canvas px. */
+  space: { sm: 32, md: 48, lg: 64 }
+};
+function SlideColumns({ children, align = "stretch" }) {
+  return /* @__PURE__ */ jsx(
+    "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,
+        lineHeight: SLIDE_SPEC.lineHeight.heading,
+        fontWeight: 700,
+        display: "-webkit-box",
+        WebkitBoxOrient: "vertical",
+        WebkitLineClamp: 2,
+        overflow: "hidden"
+      },
+      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
+  ] });
+}
+var TEXT = {
+  ja: { asOf: (asOf) => `${asOf} \u6642\u70B9`, source: (source) => `\u51FA\u5178: ${source}` },
+  en: { asOf: (asOf) => `As of ${asOf}`, source: (source) => `Source: ${source}` }
+};
+function SlideSourceLine({ asOf, source, page }) {
+  const t = TEXT[uiLanguage(useLocale())];
+  const text = [asOf ? t.asOf(asOf) : null, source ? t.source(source) : null].filter(Boolean).join(" / ");
+  if (!text && !page) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      style: {
+        gridColumn: "1 / -1",
+        margin: 0,
+        fontSize: SLIDE_SPEC.fontSize.caption,
+        lineHeight: SLIDE_SPEC.lineHeight.body,
+        color: "var(--slide-muted)",
+        ...page ? { display: "flex", justifyContent: "space-between", gap: SLIDE_SPEC.space.md } : {}
+      },
+      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, locale) {
+  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", locale)
+      }
+    },
+    ...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 locale = useLocale();
+  const option = useMemo(() => buildSlideChartOption(chart, locale), [chart, locale]);
+  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",
+    {
+      "data-slot": "slide-chart-insight",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: hasSource ? "auto 1fr auto" : "auto 1fr",
+        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__ */ jsxs(SlideColumns, { children: [
+          chartFirst ? chartColumn : insightsColumn,
+          chartFirst ? insightsColumn : chartColumn
+        ] }),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+var TEXT2 = {
+  ja: { asOf: (asOf) => `${asOf} \u6642\u70B9`, source: (source) => `\u51FA\u5178: ${source}`, separator: "\u3000|\u3000" },
+  en: { asOf: (asOf) => `As of ${asOf}`, source: (source) => `Source: ${source}`, separator: " | " }
+};
+function SlideCover({ title, subtitle, period, author, asOf, source }) {
+  const t = TEXT2[uiLanguage(useLocale())];
+  const meta = [
+    period,
+    author,
+    [asOf ? t.asOf(asOf) : null, source ? t.source(source) : null].filter(Boolean).join(" / ") || void 0
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "slide-cover",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: "1fr auto",
+        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(SlideColumns, { children: /* @__PURE__ */ jsx(SlideColumn, { span: 8, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              height: "100%",
+              boxSizing: "border-box",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: SLIDE_SPEC.space.md,
+              minHeight: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { width: SLIDE_SPEC.grid.columnWidth, height: 8, background: "var(--slide-accent)" } }),
+              /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  style: {
+                    margin: 0,
+                    fontFamily: "var(--slide-font-display)",
+                    fontSize: SLIDE_SPEC.fontSize.section,
+                    lineHeight: SLIDE_SPEC.lineHeight.heading,
+                    fontWeight: 700,
+                    textWrap: "balance"
+                  },
+                  children: title
+                }
+              ),
+              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",
+          {
+            style: {
+              gridColumn: "1 / -1",
+              margin: 0,
+              fontSize: SLIDE_SPEC.fontSize.caption,
+              lineHeight: SLIDE_SPEC.lineHeight.body,
+              color: "var(--slide-muted)"
+            },
+            children: meta.join(t.separator)
+          }
+        )
+      ]
+    }
+  );
+}
+var MAX_POINTS = 5;
+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.`);
+  const number = (i) => String(i + 1).padStart(2, "0");
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "slide-exec-summary",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: hasSource ? "auto 1fr auto" : "auto 1fr",
+        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 }),
+        layout === "columns" ? /* @__PURE__ */ jsx(
+          "ol",
+          {
+            style: {
+              gridColumn: "1 / -1",
+              margin: 0,
+              padding: 0,
+              listStyle: "none",
+              minHeight: 0,
+              display: "grid",
+              gridTemplateColumns: `repeat(${Math.max(points.length, 1)}, 1fr)`,
+              columnGap: SLIDE_SPEC.grid.gutter
+            },
+            children: points.map((p, i) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: SLIDE_SPEC.space.sm,
+                  paddingTop: SLIDE_SPEC.space.md,
+                  borderTop: "4px solid var(--slide-accent)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.page, lineHeight: SLIDE_SPEC.lineHeight.heading, fontWeight: 700, color: "var(--slide-accent)" }, children: number(i) }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading, fontWeight: 700 }, children: p.headline }),
+                  p.detail && /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, lineHeight: SLIDE_SPEC.lineHeight.body, color: "var(--slide-muted)" }, children: p.detail })
+                ]
+              },
+              i
+            ))
+          }
+        ) : /* @__PURE__ */ jsx(
+          "ol",
+          {
+            style: {
+              gridColumn: "1 / -1",
+              margin: 0,
+              padding: 0,
+              listStyle: "none",
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: SLIDE_SPEC.space.sm
+            },
+            children: points.map((p, i) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: `${SLIDE_SPEC.grid.columnWidth}px 1fr`,
+                  columnGap: SLIDE_SPEC.space.md,
+                  alignItems: "baseline"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.page, lineHeight: SLIDE_SPEC.lineHeight.heading, fontWeight: 700, color: "var(--slide-accent)" }, children: number(i) }),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading, fontWeight: 700 }, children: p.headline }),
+                    p.detail && /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, lineHeight: SLIDE_SPEC.lineHeight.body, color: "var(--slide-muted)" }, children: p.detail })
+                  ] })
+                ]
+              },
+              i
+            ))
+          }
+        ),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+var MAX_ITEMS = 4;
+var ARROW = { up: "\u25B2", down: "\u25BC", flat: "\u25AC" };
+var TEXT3 = {
+  ja: {
+    up: "\u5897",
+    down: "\u6E1B",
+    flat: "\u6A2A\u3070\u3044",
+    target: (target) => `\u76EE\u6A19 ${target}`,
+    attainment: (shown, rate) => `${shown}(\u9054\u6210\u7387 ${rate})`
+  },
+  en: {
+    up: "Up",
+    down: "Down",
+    flat: "Flat",
+    target: (target) => `Target ${target}`,
+    attainment: (shown, rate) => `${shown} (${rate} attained)`
+  }
+};
+function deltaView(delta, betterWhen, locale) {
+  const direction = delta.value > 0 ? "up" : delta.value < 0 ? "down" : "flat";
+  const color = direction === "flat" ? "var(--slide-muted)" : direction === betterWhen ? "var(--positive)" : "var(--negative)";
+  const amount = formatValue(delta.value, delta.format, locale, { signDisplay: "exceptZero" });
+  return { color, text: `${ARROW[direction]} ${TEXT3[uiLanguage(locale)][direction]} ${amount}` };
+}
+function targetText(item, locale) {
+  if (item.target === void 0) return void 0;
+  const t = TEXT3[uiLanguage(locale)];
+  const { value, target, betterWhen = "up" } = item;
+  const rate = value === null ? void 0 : betterWhen === "down" ? target / value : value / target;
+  const shown = t.target(formatValue(target, item.format, locale));
+  return rate === void 0 || !Number.isFinite(rate) ? shown : t.attainment(shown, formatValue(rate, { type: "percent", digits: 0 }, locale));
+}
+function SlideKpiGrid({ title, items, asOf, source }) {
+  const locale = useLocale();
+  const hasSource = Boolean(asOf || source);
+  if (items.length > MAX_ITEMS) console.warn(`SlideKpiGrid: ${items.length} items; ${MAX_ITEMS} fit the canvas. Split the slide.`);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "slide-kpi-grid",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: hasSource ? "auto 1fr auto" : "auto 1fr",
+        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(
+          "div",
+          {
+            style: {
+              gridColumn: "1 / -1",
+              minHeight: 0,
+              display: "grid",
+              gridTemplateColumns: `repeat(${Math.max(items.length, 1)}, 1fr)`,
+              columnGap: SLIDE_SPEC.grid.gutter,
+              alignItems: "center"
+            },
+            children: items.map((item, i) => {
+              const delta = item.delta ? deltaView({ value: item.delta.value, format: item.delta.format ?? item.format }, item.betterWhen ?? "up", locale) : void 0;
+              const target = targetText(item, locale);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: SLIDE_SPEC.space.sm,
+                    padding: SLIDE_SPEC.space.md,
+                    border: "2px solid var(--border)",
+                    borderRadius: "var(--slide-radius)",
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, lineHeight: SLIDE_SPEC.lineHeight.body, fontWeight: 700, color: "var(--slide-muted)" }, children: item.label }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-raw": item.value ?? void 0,
+                        style: {
+                          fontFamily: "var(--slide-font-display)",
+                          fontSize: SLIDE_SPEC.fontSize.page,
+                          lineHeight: SLIDE_SPEC.lineHeight.heading,
+                          fontWeight: 700,
+                          fontVariantNumeric: "tabular-nums"
+                        },
+                        children: item.display ?? formatValue(item.value, item.format, locale)
+                      }
+                    ),
+                    delta && /* @__PURE__ */ jsxs("span", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading, fontWeight: 700, color: delta.color }, children: [
+                      delta.text,
+                      item.comparisonLabel && /* @__PURE__ */ jsxs("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, fontWeight: 400, color: "var(--slide-muted)" }, children: [
+                        " ",
+                        item.comparisonLabel
+                      ] })
+                    ] }),
+                    target && /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, lineHeight: SLIDE_SPEC.lineHeight.body, color: "var(--slide-muted)" }, children: target })
+                  ]
+                },
+                i
+              );
+            })
+          }
+        ),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+var ARROW2 = { up: "\u25B2", down: "\u25BC", flat: "\u25AC" };
+var TEXT4 = {
+  ja: { up: "\u5897", down: "\u6E1B", flat: "\u6A2A\u3070\u3044", trend: (label) => `${label}\u306E\u63A8\u79FB` },
+  en: { up: "Up", down: "Down", flat: "Flat", trend: (label) => `${label} trend` }
+};
+function deltaView2(delta, betterWhen, locale) {
+  const direction = delta.value > 0 ? "up" : delta.value < 0 ? "down" : "flat";
+  const color = direction === "flat" ? "var(--slide-muted)" : direction === betterWhen ? "var(--positive)" : "var(--negative)";
+  const amount = formatValue(delta.value, delta.format, locale, { signDisplay: "exceptZero" });
+  return { color, text: `${ARROW2[direction]} ${TEXT4[uiLanguage(locale)][direction]} ${amount}` };
+}
+function SlideKpiHero({ title, label, value, format, display, delta, betterWhen = "up", comparisonLabel, trend, asOf, source }) {
+  const locale = useLocale();
+  const t = TEXT4[uiLanguage(locale)];
+  const hasSource = Boolean(asOf || source);
+  const deltaShown = delta ? deltaView2({ value: delta.value, format: delta.format ?? format }, betterWhen, locale) : void 0;
+  const option = useMemo(() => {
+    if (!trend || trend.length === 0) return void 0;
+    return {
+      animation: false,
+      textStyle: { fontSize: SLIDE_SPEC.fontSize.caption },
+      grid: { left: 0, right: SLIDE_SPEC.space.sm, top: SLIDE_SPEC.space.sm, bottom: 0, containLabel: true },
+      // 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: trend.map((p) => p.x),
+        boundaryGap: false,
+        axisLabel: { fontSize: SLIDE_SPEC.fontSize.caption, margin: SLIDE_SPEC.space.sm, hideOverlap: true }
+      },
+      yAxis: {
+        type: "value",
+        scale: true,
+        axisLabel: { fontSize: SLIDE_SPEC.fontSize.caption, hideOverlap: true, formatter: (v) => formatValue(v, "compact", locale) }
+      },
+      series: [
+        {
+          type: "line",
+          data: trend.map((p) => p.y),
+          symbol: "circle",
+          symbolSize: SLIDE_SPEC.space.sm / 2,
+          lineStyle: { width: 6 },
+          areaStyle: { opacity: 0.12 }
+        }
+      ]
+    };
+  }, [trend, locale]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "slide-kpi-hero",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: hasSource ? "auto 1fr auto" : "auto 1fr",
+        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__ */ 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, locale)
+                  }
+                ),
+                (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: t.trend(label) }) }) })
+        ] }),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+var MAX_ITEMS2 = 5;
+var MAX_DUE_CHARS = 10;
+var HEADS = {
+  ja: { owner: "\u62C5\u5F53", due: "\u671F\u9650", metric: "\u78BA\u8A8D\u3059\u308B\u6307\u6A19" },
+  en: { owner: "Owner", due: "Due", metric: "Metric to watch" }
+};
+function SlideNextActions({ title, items, asOf, source }) {
+  const head = HEADS[uiLanguage(useLocale())];
+  const hasSource = Boolean(asOf || source);
+  if (items.length > MAX_ITEMS2) console.warn(`SlideNextActions: ${items.length} items; ${MAX_ITEMS2} fit the canvas. Split the slide.`);
+  if (items.some((it) => (it.due?.length ?? 0) > MAX_DUE_CHARS)) console.warn(`SlideNextActions: a due date is over ${MAX_DUE_CHARS} characters; the column is one line wide. Shorten it.`);
+  const cols = [
+    { key: "owner", head: head.owner, fr: 2 },
+    { key: "due", head: head.due, fr: 2 },
+    { key: "metric", head: head.metric, fr: 3 }
+  ];
+  const shown = cols.filter((c) => items.some((it) => it[c.key]));
+  const template = [`${SLIDE_SPEC.grid.columnWidth}px`, "minmax(0, 6fr)", ...shown.map((c) => `minmax(0, ${c.fr}fr)`)].join(" ");
+  const row = { display: "grid", gridTemplateColumns: template, columnGap: SLIDE_SPEC.space.md, alignItems: "baseline" };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "slide-next-actions",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: hasSource ? "auto 1fr auto" : "auto 1fr",
+        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__ */ jsxs("div", { style: { gridColumn: "1 / -1", minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+          shown.length > 0 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-hidden": true,
+              style: {
+                ...row,
+                paddingBottom: SLIDE_SPEC.space.sm,
+                fontSize: SLIDE_SPEC.fontSize.caption,
+                lineHeight: SLIDE_SPEC.lineHeight.body,
+                fontWeight: 700,
+                color: "var(--slide-muted)"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", {}),
+                /* @__PURE__ */ jsx("span", {}),
+                shown.map((c) => /* @__PURE__ */ jsx("span", { children: c.head }, c.key))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("ol", { style: { margin: 0, padding: 0, listStyle: "none" }, children: items.map((it, i) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              style: {
+                ...row,
+                paddingTop: SLIDE_SPEC.space.sm,
+                paddingBottom: SLIDE_SPEC.space.sm,
+                borderTop: "2px solid var(--border)"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.page, lineHeight: SLIDE_SPEC.lineHeight.heading, fontWeight: 700, color: "var(--slide-accent)" }, children: String(i + 1).padStart(2, "0") }),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.heading, fontWeight: 700 }, children: it.action }),
+                shown.map((c) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: { fontSize: SLIDE_SPEC.fontSize.caption, lineHeight: SLIDE_SPEC.lineHeight.body, ...c.key === "due" ? { whiteSpace: "nowrap" } : {} },
+                    children: it[c.key]
+                  },
+                  c.key
+                ))
+              ]
+            },
+            i
+          )) })
+        ] }),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+var MAX_ROWS = 8;
+var DENSE_ROWS = 6;
+var STATUS_COLOR = {
+  on: "var(--positive)",
+  risk: "var(--warning)",
+  off: "var(--negative)"
+};
+var TEXT5 = {
+  ja: {
+    status: { on: "\u9806\u8ABF", risk: "\u8981\u6CE8\u610F", off: "\u9045\u5EF6" },
+    head: { metric: "\u6307\u6A19", target: "\u76EE\u6A19", actual: "\u5B9F\u7E3E", attainment: "\u9054\u6210\u7387", status: "\u72B6\u614B" }
+  },
+  en: {
+    status: { on: "On track", risk: "At risk", off: "Off track" },
+    head: { metric: "Metric", target: "Target", actual: "Actual", attainment: "Attainment", status: "Status" }
+  }
+};
+function attainment(row) {
+  if (row.value === null || row.target === void 0) return void 0;
+  const rate = row.betterWhen === "down" ? row.target / row.value : row.value / row.target;
+  return Number.isFinite(rate) ? rate : void 0;
+}
+function SlideScorecardTable({ title, rows, columns, asOf, source }) {
+  const locale = useLocale();
+  const t = TEXT5[uiLanguage(locale)];
+  const hasSource = Boolean(asOf || source);
+  if (rows.length > MAX_ROWS) console.warn(`SlideScorecardTable: ${rows.length} rows; ${MAX_ROWS} fit the canvas. Split the slide.`);
+  const head = { ...t.head, ...columns };
+  const showAttainment = rows.some((r) => attainment(r) !== void 0);
+  const cellSize = rows.length > DENSE_ROWS ? SLIDE_SPEC.fontSize.caption : "var(--slide-size-body)";
+  const cell = {
+    paddingLeft: SLIDE_SPEC.space.sm,
+    paddingRight: SLIDE_SPEC.space.sm,
+    borderBottom: "2px solid var(--border)",
+    textAlign: "left",
+    verticalAlign: "middle"
+  };
+  const num = { ...cell, textAlign: "right", fontVariantNumeric: "tabular-nums" };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "slide-scorecard-table",
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        display: "grid",
+        gridTemplateColumns: `repeat(${SLIDE_SPEC.grid.columns}, 1fr)`,
+        gridTemplateRows: hasSource ? "auto 1fr auto" : "auto 1fr",
+        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("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 }),
+            /* @__PURE__ */ jsx("th", { style: { ...num, fontWeight: 700 }, children: head.target }),
+            /* @__PURE__ */ jsx("th", { style: { ...num, fontWeight: 700 }, children: head.actual }),
+            showAttainment && /* @__PURE__ */ jsx("th", { style: { ...num, fontWeight: 700 }, children: head.attainment }),
+            /* @__PURE__ */ jsx("th", { style: { ...cell, fontWeight: 700 }, children: head.status })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", style: { ...cell, fontWeight: 700 }, children: r.metric }),
+            /* @__PURE__ */ jsx("td", { style: num, children: r.target === void 0 ? EMPTY_VALUE : formatValue(r.target, r.format, locale) }),
+            /* @__PURE__ */ jsx("td", { style: { ...num, fontWeight: 700 }, children: r.display ?? formatValue(r.value, r.format, locale) }),
+            showAttainment && /* @__PURE__ */ jsx("td", { style: num, children: attainment(r) === void 0 ? EMPTY_VALUE : formatValue(attainment(r), { type: "percent", digits: 0 }, locale) }),
+            /* @__PURE__ */ jsxs("td", { style: cell, children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { color: STATUS_COLOR[r.status] }, children: "\u25CF" }),
+              " ",
+              t.status[r.status]
+            ] })
+          ] }, i)) })
+        ] }) }),
+        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 locale = useLocale();
+  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, locale));
+          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, SlideDeck, 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