@squadbase/vantage 0.6.1 → 0.6.2-dev1.0017a4d

package/dist/slide/index.js

@@ -1,5 +1,9 @@
 import { useSearchState } from '../chunk-ZO62C6T4.js';
 import '../chunk-6S4BAIGV.js';
+import { EChart } from '../chunk-JXFCSF3K.js';
+import { formatValue, EMPTY_VALUE } from '../chunk-57GHR5LN.js';
+import '../chunk-PDOBHMUQ.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 +62,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
@@ -380,6 +389,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 +444,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 +453,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 +463,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 +497,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 +568,7 @@ function SlideToolbar({
   onPrev,
   onNext,
   onFullscreen,
+  canFullscreen,
   onExport,
   exportProgress,
   railOpen,
@@ -531,6 +577,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 +599,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 +640,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 +1423,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 +1447,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 +1473,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 +1595,7 @@ function SlideDeck({
               onPrev: goPrev,
               onNext: goNext,
               onFullscreen: toggleFullscreen,
+              canFullscreen,
               onExport,
               exportProgress: exporting,
               railOpen,
@@ -1565,7 +1620,851 @@ 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 }
+};
+var MAX_INSIGHTS = 3;
+var MAX_INSIGHT_CHARS = 40;
+var LINE_TYPES = ["solid", "dashed", "dotted"];
+var SYMBOLS = ["circle", "rect", "triangle", "diamond"];
+function SlideHeading({ 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 SlideSourceLine({ 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 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 chartFirst = chartSide === "left";
+  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__ */ 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
+            ))
+          }
+        ),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+function SlideCover({ title, subtitle, period, author, asOf, source }) {
+  const meta = [
+    period,
+    author,
+    [asOf ? `${asOf} \u6642\u70B9` : null, source ? `\u51FA\u5178: ${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__ */ jsxs(
+          "div",
+          {
+            style: {
+              gridColumn: "1 / span 8",
+              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("\u3000|\u3000")
+          }
+        )
+      ]
+    }
+  );
+}
+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.`);
+  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(SlideHeading2, { 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(SlideSourceLine2, { 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) {
+  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, void 0, { signDisplay: "exceptZero" });
+  return { color, text: `${ARROW[direction]} ${WORD[direction]} ${amount}` };
+}
+function targetText(item) {
+  if (item.target === void 0) return void 0;
+  const { value, target, betterWhen = "up" } = item;
+  const rate = value === null ? void 0 : betterWhen === "down" ? target / value : value / target;
+  const shown = `\u76EE\u6A19 ${formatValue(target, item.format)}`;
+  return rate === void 0 || !Number.isFinite(rate) ? shown : `${shown}(\u9054\u6210\u7387 ${formatValue(rate, { type: "percent", digits: 0 })})`;
+}
+function SlideKpiGrid({ title, items, asOf, source }) {
+  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(SlideHeading3, { 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") : void 0;
+              const target = targetText(item);
+              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)
+                      }
+                    ),
+                    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(SlideSourceLine3, { 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) {
+  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, void 0, { signDisplay: "exceptZero" });
+  return { color, text: `${ARROW2[direction]} ${WORD2[direction]} ${amount}` };
+}
+function SlideKpiHero({ title, label, value, format, display, delta, betterWhen = "up", comparisonLabel, trend, asOf, source }) {
+  const hasSource = Boolean(asOf || source);
+  const deltaShown = delta ? deltaView2({ value: delta.value, format: delta.format ?? format }, betterWhen) : 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") }
+      },
+      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]);
+  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(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 })
+      ]
+    }
+  );
+}
+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.`);
+  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: "\u62C5\u5F53", fr: 2 },
+    { key: "due", head: "\u671F\u9650", fr: 2 },
+    { key: "metric", head: "\u78BA\u8A8D\u3059\u308B\u6307\u6A19", 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(SlideHeading5, { 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(SlideSourceLine5, { 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)" },
+  off: { label: "\u9045\u5EF6", color: "var(--negative)" }
+};
+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 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 = { metric: "\u6307\u6A19", target: "\u76EE\u6A19", actual: "\u5B9F\u7E3E", attainment: "\u9054\u6210\u7387", status: "\u72B6\u614B", ...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(SlideHeading6, { 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) }),
+            /* @__PURE__ */ jsx("td", { style: { ...num, fontWeight: 700 }, children: r.display ?? formatValue(r.value, r.format) }),
+            showAttainment && /* @__PURE__ */ jsx("td", { style: num, children: attainment(r) === void 0 ? EMPTY_VALUE : formatValue(attainment(r), { type: "percent", digits: 0 }) }),
+            /* @__PURE__ */ jsxs("td", { style: cell, children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { color: STATUS[r.status].color }, children: "\u25CF" }),
+              " ",
+              STATUS[r.status].label
+            ] })
+          ] }, i)) })
+        ] }) }),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine6, { asOf, source })
+      ]
+    }
+  );
+}
 
-export { CANVAS_HEIGHT, CANVAS_WIDTH, MorphElement, Slide, SlideCanvas, SlideDeck, Step, Steps, exportDeckAsPptx, useIsActiveSlide, useSlideNumber };
+export { CANVAS_HEIGHT, CANVAS_WIDTH, MorphElement, Slide, SlideCanvas, SlideChartInsight, SlideCover, SlideDeck, SlideExecSummary, SlideKpiGrid, SlideKpiHero, SlideNextActions, SlideScorecardTable, Step, Steps, exportDeckAsPptx, useIsActiveSlide, useSlideNumber };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map