@squadbase/vantage 0.6.2-dev1.42c4e48 → 0.6.2-dev1.81c1bbe

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';
@@ -454,7 +458,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.
@@ -590,7 +594,7 @@ 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: [
@@ -1611,7 +1615,866 @@ 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 WRAP = { wordBreak: "keep-all", overflowWrap: "anywhere" };
+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",
+        ...WRAP
+      },
+      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,
+        boundaryGap: chart.type === "bar",
+        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 8" : "5 / span 8", gridRow: 2, minHeight: 0, height: "100%" }, children: /* @__PURE__ */ jsx(EChart, { option, height: "100%", ariaLabel: title }) }),
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            style: {
+              gridColumn: chartFirst ? "9 / span 4" : "1 / span 4",
+              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,
+                  ...WRAP
+                },
+                children: text
+              },
+              i
+            ))
+          }
+        ),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine, { asOf, source })
+      ]
+    }
+  );
+}
+var WRAP2 = { wordBreak: "keep-all", overflowWrap: "anywhere" };
+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,
+                    ...WRAP2
+                  },
+                  children: title
+                }
+              ),
+              subtitle && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "var(--slide-size-body)", lineHeight: SLIDE_SPEC.lineHeight.body, color: "var(--slide-muted)", ...WRAP2 }, 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 WRAP3 = { wordBreak: "keep-all", overflowWrap: "anywhere" };
+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",
+        ...WRAP3
+      },
+      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, ...WRAP3 }, children: p.headline }),
+                  p.detail && /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, lineHeight: SLIDE_SPEC.lineHeight.body, color: "var(--slide-muted)", ...WRAP3 }, 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, ...WRAP3 }, children: p.headline }),
+                    p.detail && /* @__PURE__ */ jsx("span", { style: { fontSize: SLIDE_SPEC.fontSize.caption, lineHeight: SLIDE_SPEC.lineHeight.body, color: "var(--slide-muted)", ...WRAP3 }, children: p.detail })
+                  ] })
+                ]
+              },
+              i
+            ))
+          }
+        ),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine2, { asOf, source })
+      ]
+    }
+  );
+}
+var MAX_ITEMS = 4;
+var WRAP4 = { wordBreak: "keep-all", overflowWrap: "anywhere" };
+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",
+        ...WRAP4
+      },
+      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",
+                          ...WRAP4
+                        },
+                        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, ...WRAP4 }, 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)", ...WRAP4 }, children: target })
+                  ]
+                },
+                i
+              );
+            })
+          }
+        ),
+        hasSource && /* @__PURE__ */ jsx(SlideSourceLine3, { asOf, source })
+      ]
+    }
+  );
+}
+var WRAP5 = { wordBreak: "keep-all", overflowWrap: "anywhere" };
+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",
+        ...WRAP5
+      },
+      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)", ...WRAP5 }, 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",
+                    ...WRAP5
+                  },
+                  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 WRAP6 = { wordBreak: "keep-all", overflowWrap: "anywhere" };
+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",
+        ...WRAP6
+      },
+      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, ...WRAP6 }, children: it.action }),
+                shown.map((c) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: { fontSize: SLIDE_SPEC.fontSize.caption, lineHeight: SLIDE_SPEC.lineHeight.body, ...WRAP6, ...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;
+var WRAP7 = { wordBreak: "keep-all", overflowWrap: "anywhere" };
+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",
+        ...WRAP7
+      },
+      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, ...WRAP7 }, 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