@make-pictures/kits 0.0.0-stage → 2.0.1

package/dist/data-storytelling/index.cjs

@@ -0,0 +1,1224 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/kits/src/data-storytelling/index.ts
+var data_storytelling_exports = {};
+__export(data_storytelling_exports, {
+  AnimatedBarRace: () => AnimatedBarRace,
+  MetricComparisonCard: () => MetricComparisonCard,
+  TimelineTrack: () => TimelineTrack
+});
+module.exports = __toCommonJS(data_storytelling_exports);
+
+// packages/kits/src/data-storytelling/AnimatedBarRace.tsx
+var import_remotion = require("remotion");
+var import_theme = require("@make-pictures/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_BAR_PALETTE = [
+  "#2563EB",
+  "#10B981",
+  "#38BDF8",
+  "#F59E0B",
+  "#F43F5E",
+  "#A855F7"
+];
+function evaluateItemValueAtFrame(item, f) {
+  const kf = item.keyframes;
+  if (!kf || kf.length === 0) {
+    return item.value;
+  }
+  const sorted = [...kf].sort((a, b) => a.frame - b.frame);
+  if (f <= sorted[0].frame) return sorted[0].value;
+  if (f >= sorted[sorted.length - 1].frame) {
+    return sorted[sorted.length - 1].value;
+  }
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const a = sorted[i];
+    const b = sorted[i + 1];
+    if (f >= a.frame && f <= b.frame) {
+      return (0, import_remotion.interpolate)(f, [a.frame, Math.max(a.frame + 1, b.frame)], [a.value, b.value], {
+        easing: import_remotion.Easing.inOut(import_remotion.Easing.cubic),
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+    }
+  }
+  return item.value;
+}
+function getExactRanksAtFrame(items, f) {
+  const scored = items.map((item, origIdx) => ({
+    id: item.id,
+    val: evaluateItemValueAtFrame(item, f),
+    origIdx
+  }));
+  scored.sort((a, b) => b.val !== a.val ? b.val - a.val : a.origIdx - b.origIdx);
+  const map = /* @__PURE__ */ new Map();
+  scored.forEach((entry, rank) => {
+    map.set(entry.id, rank);
+  });
+  return map;
+}
+function getSmoothedRanks(items, frame) {
+  const hasKeyframes = items.some((it) => it.keyframes && it.keyframes.length > 1);
+  if (!hasKeyframes) {
+    return getExactRanksAtFrame(items, frame);
+  }
+  const radius = 12;
+  const accum = /* @__PURE__ */ new Map();
+  let weightSum = 0;
+  for (let df = -radius; df <= radius; df++) {
+    const w = 0.5 * (1 + Math.cos(Math.PI * df / (radius + 1)));
+    weightSum += w;
+    const ranks = getExactRanksAtFrame(items, Math.max(0, frame + df));
+    for (const [id, r] of ranks.entries()) {
+      accum.set(id, (accum.get(id) ?? 0) + r * w);
+    }
+  }
+  const result = /* @__PURE__ */ new Map();
+  for (const [id, sum] of accum.entries()) {
+    result.set(id, sum / Math.max(1e-6, weightSum));
+  }
+  return result;
+}
+var AnimatedBarRace = ({
+  items,
+  orientation = "horizontal",
+  title,
+  subtitle,
+  valuePrefix = "",
+  valueSuffix = "",
+  decimals = 0,
+  maxItems = 6,
+  enterFrame,
+  startFrame,
+  staggerFrames = 5,
+  variant = "dark",
+  safeBox9x16 = true,
+  style
+}) => {
+  const frame = (0, import_remotion.useCurrentFrame)();
+  const { fps, width, height } = (0, import_remotion.useVideoConfig)();
+  (0, import_theme.useStudioFontsReady)();
+  const effectiveStart = Math.max(2, startFrame ?? enterFrame ?? 2);
+  const cardEnter = (0, import_remotion.spring)({
+    frame: frame - effectiveStart,
+    fps,
+    config: import_theme.SPRING_PRESETS.snappy
+  });
+  if (cardEnter <= 5e-3 || items.length === 0) {
+    return null;
+  }
+  const visibleCount = Math.min(items.length, Math.max(1, maxItems));
+  const smoothedRanks = getSmoothedRanks(items, frame);
+  const evaluated = items.map((item, idx) => {
+    const rawVal = evaluateItemValueAtFrame(item, frame);
+    const rank = smoothedRanks.get(item.id) ?? idx;
+    const color = item.color ?? DEFAULT_BAR_PALETTE[idx % DEFAULT_BAR_PALETTE.length];
+    return {
+      item,
+      idx,
+      rawVal,
+      rank,
+      color
+    };
+  });
+  const maxVal = Math.max(1e-6, ...evaluated.map((e) => e.rawVal));
+  const isVerticalViewport = height > width;
+  const isLight = variant === "light";
+  const cardWidth = isVerticalViewport && safeBox9x16 ? Math.min(830, width - 90) : 980;
+  const rowHeight = isVerticalViewport ? 72 : 76;
+  const rowGap = 14;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        width: cardWidth,
+        padding: isVerticalViewport ? "28px 30px" : "34px 40px",
+        borderRadius: 26,
+        boxSizing: "border-box",
+        backgroundColor: isLight ? import_theme.STUDIO_THEME.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.88)",
+        border: isLight ? `1.5px solid ${import_theme.STUDIO_THEME.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+        boxShadow: isLight ? import_theme.STUDIO_THEME.shadows.cardElevated : import_theme.THEME.shadows.card,
+        backdropFilter: "blur(16px)",
+        opacity: cardEnter,
+        transform: `translateY(${(0, import_remotion.interpolate)(cardEnter, [0, 1], [24, 0]).toFixed(2)}px) scale(${(0, import_remotion.interpolate)(cardEnter, [0, 1], [0.95, 1]).toFixed(4)})`,
+        ...style
+      },
+      children: [
+        (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 24 }, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                fontFamily: import_theme.FONTS.display,
+                fontSize: isVerticalViewport ? 30 : 34,
+                fontWeight: 800,
+                letterSpacing: "-0.02em",
+                color: isLight ? import_theme.STUDIO_THEME.colors.text.slate900 : import_theme.THEME.colors.textPrimary
+              },
+              children: title
+            }
+          ),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                marginTop: 4,
+                fontFamily: import_theme.FONTS.sans,
+                fontSize: 18,
+                fontWeight: 500,
+                color: isLight ? import_theme.STUDIO_THEME.colors.text.secondary : import_theme.THEME.colors.textSecondary
+              },
+              children: subtitle
+            }
+          )
+        ] }),
+        orientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              position: "relative",
+              height: visibleCount * (rowHeight + rowGap) - rowGap
+            },
+            children: evaluated.map(({ item, idx, rawVal, rank, color }) => {
+              if (rank > visibleCount - 0.15) return null;
+              const barGrow = (0, import_remotion.spring)({
+                frame: frame - (effectiveStart + 4 + idx * staggerFrames),
+                fps,
+                config: import_theme.SPRING_PRESETS.smooth
+              });
+              const fillRatio = Math.max(0.04, rawVal / maxVal * barGrow);
+              const displayVal = rawVal * barGrow;
+              const yTop = rank * (rowHeight + rowGap);
+              const rankBadge = Math.min(visibleCount, Math.round(rank) + 1);
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    height: rowHeight,
+                    transform: `translate3d(0, ${yTop.toFixed(2)}px, 0)`,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 16,
+                    opacity: barGrow
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: 38,
+                          height: 38,
+                          borderRadius: 12,
+                          flexShrink: 0,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontFamily: import_theme.FONTS.mono,
+                          fontSize: 16,
+                          fontWeight: 800,
+                          color: rankBadge === 1 ? "#FFFFFF" : isLight ? "#334155" : "#CBD5E1",
+                          backgroundColor: rankBadge === 1 ? color : isLight ? "rgba(15, 23, 42, 0.07)" : "rgba(255, 255, 255, 0.08)"
+                        },
+                        children: rankBadge
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          minWidth: 0,
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 8
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                gap: 12
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 8,
+                                      fontFamily: import_theme.FONTS.sans,
+                                      fontSize: 20,
+                                      fontWeight: 700,
+                                      color: isLight ? import_theme.STUDIO_THEME.colors.text.slate900 : import_theme.THEME.colors.textPrimary,
+                                      whiteSpace: "nowrap",
+                                      overflow: "hidden",
+                                      textOverflow: "ellipsis"
+                                    },
+                                    children: [
+                                      item.icon,
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.label }),
+                                      item.badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        "span",
+                                        {
+                                          style: {
+                                            fontFamily: import_theme.FONTS.mono,
+                                            fontSize: 12,
+                                            fontWeight: 700,
+                                            padding: "2px 8px",
+                                            borderRadius: 9999,
+                                            color,
+                                            backgroundColor: `${color}22`
+                                          },
+                                          children: item.badge
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "div",
+                                  {
+                                    style: {
+                                      fontFamily: import_theme.FONTS.mono,
+                                      fontVariantNumeric: "tabular-nums",
+                                      fontSize: 17,
+                                      fontWeight: 700,
+                                      padding: "4px 12px",
+                                      borderRadius: 9999,
+                                      color: "#FFFFFF",
+                                      backgroundColor: color,
+                                      boxShadow: `0 4px 14px ${color}44`
+                                    },
+                                    children: [
+                                      valuePrefix,
+                                      displayVal.toFixed(decimals),
+                                      valueSuffix
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                width: "100%",
+                                height: 16,
+                                borderRadius: 9999,
+                                backgroundColor: isLight ? "rgba(15, 23, 42, 0.07)" : "rgba(255, 255, 255, 0.08)",
+                                overflow: "hidden"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "div",
+                                {
+                                  style: {
+                                    width: `${(fillRatio * 100).toFixed(2)}%`,
+                                    height: "100%",
+                                    borderRadius: 9999,
+                                    background: `linear-gradient(90deg, ${color}CC 0%, ${color} 100%)`,
+                                    boxShadow: `0 0 18px ${color}66`
+                                  }
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        ) : (
+          /* Vertical Column Chart Mode */
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "flex-end",
+                justifyContent: "space-between",
+                gap: 18,
+                height: isVerticalViewport ? 340 : 320,
+                paddingTop: 28
+              },
+              children: [...evaluated].sort((a, b) => a.rank - b.rank).slice(0, visibleCount).map(({ item, idx, rawVal, color }) => {
+                const barGrow = (0, import_remotion.spring)({
+                  frame: frame - (effectiveStart + 4 + idx * staggerFrames),
+                  fps,
+                  config: import_theme.SPRING_PRESETS.smooth
+                });
+                const fillRatio = Math.max(0.06, rawVal / maxVal * barGrow);
+                const displayVal = rawVal * barGrow;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      height: "100%",
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "flex-end",
+                      gap: 10,
+                      opacity: barGrow
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          style: {
+                            fontFamily: import_theme.FONTS.mono,
+                            fontVariantNumeric: "tabular-nums",
+                            fontSize: 15,
+                            fontWeight: 700,
+                            padding: "3px 10px",
+                            borderRadius: 9999,
+                            color: "#FFFFFF",
+                            backgroundColor: color
+                          },
+                          children: [
+                            valuePrefix,
+                            displayVal.toFixed(decimals),
+                            valueSuffix
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: "100%",
+                            maxWidth: 74,
+                            height: `${(fillRatio * 74).toFixed(2)}%`,
+                            borderRadius: "14px 14px 6px 6px",
+                            background: `linear-gradient(180deg, ${color} 0%, ${color}AA 100%)`,
+                            boxShadow: `0 8px 24px ${color}44`
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          style: {
+                            fontFamily: import_theme.FONTS.sans,
+                            fontSize: 16,
+                            fontWeight: 700,
+                            textAlign: "center",
+                            color: isLight ? import_theme.STUDIO_THEME.colors.text.slate900 : import_theme.THEME.colors.textPrimary
+                          },
+                          children: item.label
+                        }
+                      )
+                    ]
+                  },
+                  item.id
+                );
+              })
+            }
+          )
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/data-storytelling/TimelineTrack.tsx
+var import_lucide_react = require("lucide-react");
+var import_remotion2 = require("remotion");
+var import_theme2 = require("@make-pictures/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TimelineTrack = ({
+  milestones,
+  orientation,
+  accentColor = import_theme2.STUDIO_THEME.colors.brand[600],
+  enterFrame,
+  startFrame,
+  variant = "dark",
+  safeBox9x16 = true,
+  style
+}) => {
+  const frame = (0, import_remotion2.useCurrentFrame)();
+  const { fps, width, height } = (0, import_remotion2.useVideoConfig)();
+  (0, import_theme2.useStudioFontsReady)();
+  const effectiveStart = Math.max(2, startFrame ?? enterFrame ?? 2);
+  const trackEnter = (0, import_remotion2.spring)({
+    frame: frame - effectiveStart,
+    fps,
+    config: import_theme2.SPRING_PRESETS.snappy
+  });
+  if (trackEnter <= 5e-3 || milestones.length === 0) {
+    return null;
+  }
+  const normalized = milestones.map((m) => ({
+    ...m,
+    resolvedFrame: m.fromFrame ?? m.frame ?? 0
+  }));
+  const sorted = [...normalized].sort(
+    (a, b) => a.resolvedFrame - b.resolvedFrame
+  );
+  const isVerticalViewport = height > width;
+  const resolvedOrientation = orientation ?? (isVerticalViewport && sorted.length >= 4 ? "vertical" : "horizontal");
+  const isLight = variant === "light";
+  let activeIdx = 0;
+  let continuousIndex = 0;
+  for (let i = 0; i < sorted.length; i++) {
+    if (frame >= sorted[i].resolvedFrame) {
+      activeIdx = i;
+    }
+    if (i > 0 && frame >= sorted[i].resolvedFrame) {
+      const segProgress = (0, import_remotion2.spring)({
+        frame: frame - sorted[i].resolvedFrame,
+        fps,
+        config: import_theme2.SPRING_PRESETS.smooth
+      });
+      continuousIndex = i - 1 + segProgress;
+    }
+  }
+  const totalSteps = Math.max(1, sorted.length - 1);
+  const fillFraction = sorted.length <= 1 ? 1 : Math.min(1, Math.max(0, continuousIndex / totalSteps));
+  const activeColor = sorted[activeIdx]?.color ?? accentColor;
+  const containerWidth = isVerticalViewport && safeBox9x16 ? Math.min(830, width - 90) : 1120;
+  const haloScale = 1 + 0.08 * Math.sin(frame * (60 / Math.max(1, fps)) * 0.042);
+  if (resolvedOrientation === "vertical") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          width: Math.min(containerWidth, 680),
+          padding: "30px 34px",
+          borderRadius: 26,
+          boxSizing: "border-box",
+          backgroundColor: isLight ? import_theme2.STUDIO_THEME.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.88)",
+          border: isLight ? `1.5px solid ${import_theme2.STUDIO_THEME.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+          boxShadow: isLight ? import_theme2.STUDIO_THEME.shadows.cardElevated : import_theme2.THEME.shadows.card,
+          opacity: trackEnter,
+          transform: `translateY(${(0, import_remotion2.interpolate)(trackEnter, [0, 1], [22, 0]).toFixed(2)}px)`,
+          ...style
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              gap: 28
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 21,
+                    top: 22,
+                    bottom: 22,
+                    width: 4,
+                    borderRadius: 9999,
+                    backgroundColor: isLight ? "rgba(15, 23, 42, 0.10)" : "rgba(255, 255, 255, 0.12)"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      style: {
+                        width: "100%",
+                        height: `${(fillFraction * 100).toFixed(2)}%`,
+                        borderRadius: 9999,
+                        backgroundColor: activeColor,
+                        boxShadow: `0 0 16px ${activeColor}88`
+                      }
+                    }
+                  )
+                }
+              ),
+              sorted.map((m, idx) => {
+                const isCompleted = idx < activeIdx;
+                const isActive = idx === activeIdx;
+                const nodeColor = m.color ?? accentColor;
+                const pop = (0, import_remotion2.spring)({
+                  frame: Math.max(0, frame - m.resolvedFrame),
+                  fps,
+                  config: import_theme2.SPRING_PRESETS.snappy
+                });
+                return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 20,
+                      zIndex: 2
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: 46,
+                            height: 46,
+                            borderRadius: 9999,
+                            flexShrink: 0,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            backgroundColor: isActive || isCompleted ? nodeColor : isLight ? "#FFFFFF" : "#1E293B",
+                            border: `3px solid ${isActive || isCompleted ? nodeColor : isLight ? "#CBD5E1" : "rgba(255,255,255,0.2)"}`,
+                            boxShadow: isActive ? `0 0 28px ${nodeColor}88` : "none",
+                            transform: `scale(${isActive ? (haloScale * (0.94 + 0.08 * pop)).toFixed(3) : "1"})`
+                          },
+                          children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Check, { size: 22, color: "#FFFFFF", strokeWidth: 3 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            "span",
+                            {
+                              style: {
+                                fontFamily: import_theme2.FONTS.mono,
+                                fontSize: 15,
+                                fontWeight: 800,
+                                color: isActive ? "#FFFFFF" : isLight ? "#64748B" : "#94A3B8"
+                              },
+                              children: idx + 1
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+                        m.era && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: import_theme2.FONTS.mono,
+                              fontSize: 13,
+                              fontWeight: 700,
+                              letterSpacing: "0.07em",
+                              textTransform: "uppercase",
+                              color: isActive ? nodeColor : isLight ? import_theme2.STUDIO_THEME.colors.text.muted : import_theme2.THEME.colors.textMuted
+                            },
+                            children: m.era
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: import_theme2.FONTS.display,
+                              fontSize: 22,
+                              fontWeight: 800,
+                              color: isActive || isCompleted ? isLight ? import_theme2.STUDIO_THEME.colors.text.slate900 : import_theme2.THEME.colors.textPrimary : isLight ? "#94A3B8" : "#64748B"
+                            },
+                            children: m.label
+                          }
+                        ),
+                        m.detail && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: import_theme2.FONTS.sans,
+                              fontSize: 16,
+                              fontWeight: 500,
+                              color: isLight ? import_theme2.STUDIO_THEME.colors.text.secondary : import_theme2.THEME.colors.textSecondary
+                            },
+                            children: m.detail
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  m.id
+                );
+              })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        width: containerWidth,
+        padding: isVerticalViewport ? "28px 26px" : "32px 42px",
+        borderRadius: 26,
+        boxSizing: "border-box",
+        backgroundColor: isLight ? import_theme2.STUDIO_THEME.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.88)",
+        border: isLight ? `1.5px solid ${import_theme2.STUDIO_THEME.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+        boxShadow: isLight ? import_theme2.STUDIO_THEME.shadows.cardElevated : import_theme2.THEME.shadows.card,
+        opacity: trackEnter,
+        transform: `translateY(${(0, import_remotion2.interpolate)(trackEnter, [0, 1], [22, 0]).toFixed(2)}px)`,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          style: {
+            position: "relative",
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: "8%",
+                  right: "8%",
+                  top: 22,
+                  height: 5,
+                  borderRadius: 9999,
+                  backgroundColor: isLight ? "rgba(15, 23, 42, 0.10)" : "rgba(255, 255, 255, 0.12)",
+                  zIndex: 1
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: `${(fillFraction * 100).toFixed(2)}%`,
+                      height: "100%",
+                      borderRadius: 9999,
+                      backgroundColor: activeColor,
+                      boxShadow: `0 0 18px ${activeColor}88`
+                    }
+                  }
+                )
+              }
+            ),
+            sorted.map((m, idx) => {
+              const isCompleted = idx < activeIdx;
+              const isActive = idx === activeIdx;
+              const nodeColor = m.color ?? accentColor;
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    zIndex: 2,
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    textAlign: "center",
+                    gap: 10,
+                    padding: "0 8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: 48,
+                          height: 48,
+                          borderRadius: 9999,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          backgroundColor: isActive || isCompleted ? nodeColor : isLight ? "#FFFFFF" : "#0F172A",
+                          border: `3px solid ${isActive || isCompleted ? nodeColor : isLight ? "#CBD5E1" : "rgba(255,255,255,0.22)"}`,
+                          boxShadow: isActive ? `0 0 28px ${nodeColor}99` : "none",
+                          transform: `scale(${isActive ? haloScale.toFixed(3) : "1"})`
+                        },
+                        children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Check, { size: 22, color: "#FFFFFF", strokeWidth: 3 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: import_theme2.FONTS.mono,
+                              fontSize: 16,
+                              fontWeight: 800,
+                              color: isActive ? "#FFFFFF" : isLight ? "#64748B" : "#94A3B8"
+                            },
+                            children: idx + 1
+                          }
+                        )
+                      }
+                    ),
+                    m.era && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: import_theme2.FONTS.mono,
+                          fontSize: 13,
+                          fontWeight: 700,
+                          letterSpacing: "0.07em",
+                          textTransform: "uppercase",
+                          padding: "2px 10px",
+                          borderRadius: 9999,
+                          color: isActive ? "#FFFFFF" : isLight ? "#64748B" : "#94A3B8",
+                          backgroundColor: isActive ? nodeColor : isLight ? "rgba(15, 23, 42, 0.06)" : "rgba(255, 255, 255, 0.07)"
+                        },
+                        children: m.era
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        style: {
+                          fontFamily: import_theme2.FONTS.display,
+                          fontSize: isVerticalViewport ? 19 : 21,
+                          fontWeight: 800,
+                          lineHeight: 1.2,
+                          color: isActive || isCompleted ? isLight ? import_theme2.STUDIO_THEME.colors.text.slate900 : import_theme2.THEME.colors.textPrimary : isLight ? "#94A3B8" : "#64748B"
+                        },
+                        children: m.label
+                      }
+                    ),
+                    m.detail && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        style: {
+                          fontFamily: import_theme2.FONTS.sans,
+                          fontSize: 15,
+                          fontWeight: 500,
+                          color: isLight ? import_theme2.STUDIO_THEME.colors.text.secondary : import_theme2.THEME.colors.textSecondary
+                        },
+                        children: m.detail
+                      }
+                    )
+                  ]
+                },
+                m.id
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// packages/kits/src/data-storytelling/MetricComparisonCard.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_remotion3 = require("remotion");
+var import_theme3 = require("@make-pictures/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function computeAutoDelta(before, after) {
+  if (Math.abs(before) < 1e-6) {
+    return after >= 0 ? `+${after.toFixed(0)}` : `${after.toFixed(0)}`;
+  }
+  const pct = (after - before) / Math.abs(before) * 100;
+  const sign = pct >= 0 ? "+" : "";
+  return `${sign}${Math.round(pct)}%`;
+}
+var RadialGauge = ({
+  fraction,
+  color,
+  textLabel,
+  isLight,
+  size
+}) => {
+  const stroke = 12;
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const clamped = Math.max(0, Math.min(1, fraction));
+  const dashOffset = circumference * (1 - clamped);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: isLight ? "rgba(15, 23, 42, 0.08)" : "rgba(255, 255, 255, 0.10)",
+              strokeWidth: stroke
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: color,
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: dashOffset
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              fontFamily: import_theme3.FONTS.display,
+              fontVariantNumeric: "tabular-nums",
+              fontSize: size >= 156 ? 32 : 28,
+              fontWeight: 800,
+              letterSpacing: "-0.03em",
+              color: isLight ? import_theme3.STUDIO_THEME.colors.text.slate900 : import_theme3.THEME.colors.textPrimary
+            },
+            children: textLabel
+          }
+        )
+      ]
+    }
+  );
+};
+var MetricComparisonCard = ({
+  title,
+  beforeLabel,
+  beforeValue,
+  afterLabel,
+  afterValue,
+  maxValue,
+  prefix = "",
+  unit = "",
+  decimals = 0,
+  deltaBadge,
+  mode = "rings",
+  beforeColor = "#64748B",
+  afterColor = import_theme3.STUDIO_THEME.colors.accents.emerald,
+  enterFrame,
+  startFrame,
+  variant = "dark",
+  safeBox9x16 = true,
+  style
+}) => {
+  const frame = (0, import_remotion3.useCurrentFrame)();
+  const { fps, width, height } = (0, import_remotion3.useVideoConfig)();
+  (0, import_theme3.useStudioFontsReady)();
+  const effectiveStart = Math.max(2, startFrame ?? enterFrame ?? 2);
+  const enter = (0, import_remotion3.spring)({
+    frame: frame - effectiveStart,
+    fps,
+    config: import_theme3.SPRING_PRESETS.snappy
+  });
+  if (enter <= 5e-3) {
+    return null;
+  }
+  const beforeProgress = (0, import_remotion3.interpolate)(
+    frame,
+    [effectiveStart + 4, effectiveStart + 44],
+    [0, 1],
+    {
+      easing: import_remotion3.Easing.out(import_remotion3.Easing.cubic),
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }
+  );
+  const afterProgress = (0, import_remotion3.interpolate)(
+    frame,
+    [effectiveStart + 14, effectiveStart + 60],
+    [0, 1],
+    {
+      easing: import_remotion3.Easing.out(import_remotion3.Easing.cubic),
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }
+  );
+  const badgePop = (0, import_remotion3.spring)({
+    frame: frame - (effectiveStart + 24),
+    fps,
+    config: import_theme3.SPRING_PRESETS.snappy
+  });
+  const ceiling = Math.max(
+    1e-6,
+    maxValue ?? Math.max(Math.abs(beforeValue), Math.abs(afterValue)) * 1.12
+  );
+  const curBefore = beforeValue * beforeProgress;
+  const curAfter = afterValue * afterProgress;
+  const beforeFrac = Math.abs(curBefore) / ceiling;
+  const afterFrac = Math.abs(curAfter) / ceiling;
+  const formattedBefore = `${prefix}${curBefore.toFixed(decimals)}${unit}`;
+  const formattedAfter = `${prefix}${curAfter.toFixed(decimals)}${unit}`;
+  const resolvedDelta = deltaBadge ?? computeAutoDelta(beforeValue, afterValue);
+  const isVerticalViewport = height > width;
+  const isLight = variant === "light";
+  const cardWidth = isVerticalViewport && safeBox9x16 ? Math.min(830, width - 90) : 880;
+  const gaugeSize = isVerticalViewport ? 148 : 164;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        width: cardWidth,
+        padding: isVerticalViewport ? "28px 30px" : "34px 42px",
+        borderRadius: 26,
+        boxSizing: "border-box",
+        backgroundColor: isLight ? import_theme3.STUDIO_THEME.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.88)",
+        border: isLight ? `1.5px solid ${import_theme3.STUDIO_THEME.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+        boxShadow: isLight ? import_theme3.STUDIO_THEME.shadows.cardElevated : import_theme3.THEME.shadows.glow(afterColor, 0.7),
+        backdropFilter: "blur(16px)",
+        opacity: enter,
+        transform: `translateY(${(0, import_remotion3.interpolate)(enter, [0, 1], [24, 0]).toFixed(2)}px) scale(${(0, import_remotion3.interpolate)(enter, [0, 1], [0.95, 1]).toFixed(4)})`,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 16,
+              marginBottom: 26
+            },
+            children: [
+              title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    fontFamily: import_theme3.FONTS.display,
+                    fontSize: isVerticalViewport ? 28 : 30,
+                    fontWeight: 800,
+                    letterSpacing: "-0.02em",
+                    color: isLight ? import_theme3.STUDIO_THEME.colors.text.slate900 : import_theme3.THEME.colors.textPrimary
+                  },
+                  children: title
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    fontFamily: import_theme3.FONTS.mono,
+                    fontSize: 17,
+                    fontWeight: 800,
+                    padding: "6px 16px",
+                    borderRadius: 9999,
+                    color: "#FFFFFF",
+                    backgroundColor: afterColor,
+                    boxShadow: `0 8px 24px ${afterColor}55`,
+                    opacity: badgePop,
+                    transform: `scale(${(0, import_remotion3.interpolate)(badgePop, [0, 1], [0.85, 1]).toFixed(3)})`
+                  },
+                  children: resolvedDelta
+                }
+              )
+            ]
+          }
+        ),
+        mode === "rings" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-around",
+              gap: 20
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 12
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      RadialGauge,
+                      {
+                        fraction: beforeFrac,
+                        color: beforeColor,
+                        textLabel: formattedBefore,
+                        isLight,
+                        size: gaugeSize
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: import_theme3.FONTS.sans,
+                          fontSize: 19,
+                          fontWeight: 600,
+                          color: isLight ? import_theme3.STUDIO_THEME.colors.text.secondary : import_theme3.THEME.colors.textSecondary
+                        },
+                        children: beforeLabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 52,
+                    height: 52,
+                    borderRadius: 9999,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: isLight ? "rgba(15, 23, 42, 0.06)" : "rgba(255, 255, 255, 0.08)",
+                    opacity: badgePop
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ArrowRight, { size: 26, color: afterColor, strokeWidth: 2.8 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 12
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      RadialGauge,
+                      {
+                        fraction: afterFrac,
+                        color: afterColor,
+                        textLabel: formattedAfter,
+                        isLight,
+                        size: gaugeSize
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: import_theme3.FONTS.sans,
+                          fontSize: 19,
+                          fontWeight: 700,
+                          color: isLight ? import_theme3.STUDIO_THEME.colors.text.slate900 : import_theme3.THEME.colors.textPrimary
+                        },
+                        children: afterLabel
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) : (
+          /* Horizontal Bars Mode */
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 22 }, children: [
+            {
+              lbl: beforeLabel,
+              txt: formattedBefore,
+              frac: beforeFrac,
+              col: beforeColor,
+              bold: false
+            },
+            {
+              lbl: afterLabel,
+              txt: formattedAfter,
+              frac: afterFrac,
+              col: afterColor,
+              bold: true
+            }
+          ].map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              style: { display: "flex", flexDirection: "column", gap: 8 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: import_theme3.FONTS.sans,
+                            fontSize: 20,
+                            fontWeight: row.bold ? 700 : 600,
+                            color: row.bold ? isLight ? import_theme3.STUDIO_THEME.colors.text.slate900 : import_theme3.THEME.colors.textPrimary : isLight ? import_theme3.STUDIO_THEME.colors.text.secondary : import_theme3.THEME.colors.textSecondary
+                          },
+                          children: row.lbl
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: import_theme3.FONTS.mono,
+                            fontVariantNumeric: "tabular-nums",
+                            fontSize: 22,
+                            fontWeight: 800,
+                            color: row.bold ? row.col : isLight ? "#475569" : "#CBD5E1"
+                          },
+                          children: row.txt
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: "100%",
+                      height: 18,
+                      borderRadius: 9999,
+                      backgroundColor: isLight ? "rgba(15, 23, 42, 0.08)" : "rgba(255, 255, 255, 0.09)",
+                      overflow: "hidden"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "div",
+                      {
+                        style: {
+                          width: `${Math.max(4, row.frac * 100).toFixed(2)}%`,
+                          height: "100%",
+                          borderRadius: 9999,
+                          backgroundColor: row.col,
+                          boxShadow: row.bold ? `0 0 18px ${row.col}66` : "none"
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            idx
+          )) })
+        )
+      ]
+    }
+  );
+};