@make-pictures/kits 0.0.0-stage → 2.0.0

package/dist/chunk-S4CHTWOS.mjs

@@ -0,0 +1,1237 @@
+// packages/kits/src/data-storytelling/AnimatedBarRace.tsx
+import {
+  Easing,
+  interpolate,
+  spring,
+  useCurrentFrame,
+  useVideoConfig
+} from "remotion";
+import {
+  FONTS,
+  SPRING_PRESETS,
+  STUDIO_THEME,
+  THEME,
+  useStudioFontsReady
+} from "@make-pictures/core";
+import { jsx, jsxs } from "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 interpolate(f, [a.frame, Math.max(a.frame + 1, b.frame)], [a.value, b.value], {
+        easing: Easing.inOut(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 = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+  useStudioFontsReady();
+  const effectiveStart = Math.max(2, startFrame ?? enterFrame ?? 2);
+  const cardEnter = spring({
+    frame: frame - effectiveStart,
+    fps,
+    config: 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__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: cardWidth,
+        padding: isVerticalViewport ? "28px 30px" : "34px 40px",
+        borderRadius: 26,
+        boxSizing: "border-box",
+        backgroundColor: isLight ? STUDIO_THEME.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.88)",
+        border: isLight ? `1.5px solid ${STUDIO_THEME.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+        boxShadow: isLight ? STUDIO_THEME.shadows.cardElevated : THEME.shadows.card,
+        backdropFilter: "blur(16px)",
+        opacity: cardEnter,
+        transform: `translateY(${interpolate(cardEnter, [0, 1], [24, 0]).toFixed(2)}px) scale(${interpolate(cardEnter, [0, 1], [0.95, 1]).toFixed(4)})`,
+        ...style
+      },
+      children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 24 }, children: [
+          title && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontFamily: FONTS.display,
+                fontSize: isVerticalViewport ? 30 : 34,
+                fontWeight: 800,
+                letterSpacing: "-0.02em",
+                color: isLight ? STUDIO_THEME.colors.text.slate900 : THEME.colors.textPrimary
+              },
+              children: title
+            }
+          ),
+          subtitle && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                marginTop: 4,
+                fontFamily: FONTS.sans,
+                fontSize: 18,
+                fontWeight: 500,
+                color: isLight ? STUDIO_THEME.colors.text.secondary : THEME.colors.textSecondary
+              },
+              children: subtitle
+            }
+          )
+        ] }),
+        orientation === "horizontal" ? /* @__PURE__ */ 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 = spring({
+                frame: frame - (effectiveStart + 4 + idx * staggerFrames),
+                fps,
+                config: 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__ */ 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__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: 38,
+                          height: 38,
+                          borderRadius: 12,
+                          flexShrink: 0,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontFamily: 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__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          minWidth: 0,
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 8
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                gap: 12
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 8,
+                                      fontFamily: FONTS.sans,
+                                      fontSize: 20,
+                                      fontWeight: 700,
+                                      color: isLight ? STUDIO_THEME.colors.text.slate900 : THEME.colors.textPrimary,
+                                      whiteSpace: "nowrap",
+                                      overflow: "hidden",
+                                      textOverflow: "ellipsis"
+                                    },
+                                    children: [
+                                      item.icon,
+                                      /* @__PURE__ */ jsx("span", { children: item.label }),
+                                      item.badge && /* @__PURE__ */ jsx(
+                                        "span",
+                                        {
+                                          style: {
+                                            fontFamily: FONTS.mono,
+                                            fontSize: 12,
+                                            fontWeight: 700,
+                                            padding: "2px 8px",
+                                            borderRadius: 9999,
+                                            color,
+                                            backgroundColor: `${color}22`
+                                          },
+                                          children: item.badge
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    style: {
+                                      fontFamily: 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__ */ 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__ */ 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__ */ 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 = spring({
+                  frame: frame - (effectiveStart + 4 + idx * staggerFrames),
+                  fps,
+                  config: SPRING_PRESETS.smooth
+                });
+                const fillRatio = Math.max(0.06, rawVal / maxVal * barGrow);
+                const displayVal = rawVal * barGrow;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      height: "100%",
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      justifyContent: "flex-end",
+                      gap: 10,
+                      opacity: barGrow
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            fontFamily: 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__ */ 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__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontFamily: FONTS.sans,
+                            fontSize: 16,
+                            fontWeight: 700,
+                            textAlign: "center",
+                            color: isLight ? STUDIO_THEME.colors.text.slate900 : THEME.colors.textPrimary
+                          },
+                          children: item.label
+                        }
+                      )
+                    ]
+                  },
+                  item.id
+                );
+              })
+            }
+          )
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/data-storytelling/TimelineTrack.tsx
+import { Check } from "lucide-react";
+import {
+  interpolate as interpolate2,
+  spring as spring2,
+  useCurrentFrame as useCurrentFrame2,
+  useVideoConfig as useVideoConfig2
+} from "remotion";
+import {
+  FONTS as FONTS2,
+  SPRING_PRESETS as SPRING_PRESETS2,
+  STUDIO_THEME as STUDIO_THEME2,
+  THEME as THEME2,
+  useStudioFontsReady as useStudioFontsReady2
+} from "@make-pictures/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TimelineTrack = ({
+  milestones,
+  orientation,
+  accentColor = STUDIO_THEME2.colors.brand[600],
+  enterFrame,
+  startFrame,
+  variant = "dark",
+  safeBox9x16 = true,
+  style
+}) => {
+  const frame = useCurrentFrame2();
+  const { fps, width, height } = useVideoConfig2();
+  useStudioFontsReady2();
+  const effectiveStart = Math.max(2, startFrame ?? enterFrame ?? 2);
+  const trackEnter = spring2({
+    frame: frame - effectiveStart,
+    fps,
+    config: SPRING_PRESETS2.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 = spring2({
+        frame: frame - sorted[i].resolvedFrame,
+        fps,
+        config: SPRING_PRESETS2.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__ */ jsx2(
+      "div",
+      {
+        style: {
+          width: Math.min(containerWidth, 680),
+          padding: "30px 34px",
+          borderRadius: 26,
+          boxSizing: "border-box",
+          backgroundColor: isLight ? STUDIO_THEME2.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.88)",
+          border: isLight ? `1.5px solid ${STUDIO_THEME2.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+          boxShadow: isLight ? STUDIO_THEME2.shadows.cardElevated : THEME2.shadows.card,
+          opacity: trackEnter,
+          transform: `translateY(${interpolate2(trackEnter, [0, 1], [22, 0]).toFixed(2)}px)`,
+          ...style
+        },
+        children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              gap: 28
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "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__ */ jsx2(
+                    "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 = spring2({
+                  frame: Math.max(0, frame - m.resolvedFrame),
+                  fps,
+                  config: SPRING_PRESETS2.snappy
+                });
+                return /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 20,
+                      zIndex: 2
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx2(
+                        "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__ */ jsx2(Check, { size: 22, color: "#FFFFFF", strokeWidth: 3 }) : /* @__PURE__ */ jsx2(
+                            "span",
+                            {
+                              style: {
+                                fontFamily: FONTS2.mono,
+                                fontSize: 15,
+                                fontWeight: 800,
+                                color: isActive ? "#FFFFFF" : isLight ? "#64748B" : "#94A3B8"
+                              },
+                              children: idx + 1
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+                        m.era && /* @__PURE__ */ jsx2(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: FONTS2.mono,
+                              fontSize: 13,
+                              fontWeight: 700,
+                              letterSpacing: "0.07em",
+                              textTransform: "uppercase",
+                              color: isActive ? nodeColor : isLight ? STUDIO_THEME2.colors.text.muted : THEME2.colors.textMuted
+                            },
+                            children: m.era
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: FONTS2.display,
+                              fontSize: 22,
+                              fontWeight: 800,
+                              color: isActive || isCompleted ? isLight ? STUDIO_THEME2.colors.text.slate900 : THEME2.colors.textPrimary : isLight ? "#94A3B8" : "#64748B"
+                            },
+                            children: m.label
+                          }
+                        ),
+                        m.detail && /* @__PURE__ */ jsx2(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: FONTS2.sans,
+                              fontSize: 16,
+                              fontWeight: 500,
+                              color: isLight ? STUDIO_THEME2.colors.text.secondary : THEME2.colors.textSecondary
+                            },
+                            children: m.detail
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  m.id
+                );
+              })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width: containerWidth,
+        padding: isVerticalViewport ? "28px 26px" : "32px 42px",
+        borderRadius: 26,
+        boxSizing: "border-box",
+        backgroundColor: isLight ? STUDIO_THEME2.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.88)",
+        border: isLight ? `1.5px solid ${STUDIO_THEME2.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+        boxShadow: isLight ? STUDIO_THEME2.shadows.cardElevated : THEME2.shadows.card,
+        opacity: trackEnter,
+        transform: `translateY(${interpolate2(trackEnter, [0, 1], [22, 0]).toFixed(2)}px)`,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            position: "relative",
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "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__ */ jsx2(
+                  "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__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    zIndex: 2,
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    textAlign: "center",
+                    gap: 10,
+                    padding: "0 8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "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__ */ jsx2(Check, { size: 22, color: "#FFFFFF", strokeWidth: 3 }) : /* @__PURE__ */ jsx2(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: FONTS2.mono,
+                              fontSize: 16,
+                              fontWeight: 800,
+                              color: isActive ? "#FFFFFF" : isLight ? "#64748B" : "#94A3B8"
+                            },
+                            children: idx + 1
+                          }
+                        )
+                      }
+                    ),
+                    m.era && /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: FONTS2.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__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          fontFamily: FONTS2.display,
+                          fontSize: isVerticalViewport ? 19 : 21,
+                          fontWeight: 800,
+                          lineHeight: 1.2,
+                          color: isActive || isCompleted ? isLight ? STUDIO_THEME2.colors.text.slate900 : THEME2.colors.textPrimary : isLight ? "#94A3B8" : "#64748B"
+                        },
+                        children: m.label
+                      }
+                    ),
+                    m.detail && /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          fontFamily: FONTS2.sans,
+                          fontSize: 15,
+                          fontWeight: 500,
+                          color: isLight ? STUDIO_THEME2.colors.text.secondary : THEME2.colors.textSecondary
+                        },
+                        children: m.detail
+                      }
+                    )
+                  ]
+                },
+                m.id
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// packages/kits/src/data-storytelling/MetricComparisonCard.tsx
+import { ArrowRight } from "lucide-react";
+import {
+  Easing as Easing2,
+  interpolate as interpolate3,
+  spring as spring3,
+  useCurrentFrame as useCurrentFrame3,
+  useVideoConfig as useVideoConfig3
+} from "remotion";
+import {
+  FONTS as FONTS3,
+  SPRING_PRESETS as SPRING_PRESETS3,
+  STUDIO_THEME as STUDIO_THEME3,
+  THEME as THEME3,
+  useStudioFontsReady as useStudioFontsReady3
+} from "@make-pictures/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "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__ */ jsxs3(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxs3("svg", { width: size, height: size, style: { transform: "rotate(-90deg)" }, children: [
+          /* @__PURE__ */ jsx3(
+            "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__ */ jsx3(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: color,
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: dashOffset
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              fontFamily: FONTS3.display,
+              fontVariantNumeric: "tabular-nums",
+              fontSize: size >= 156 ? 32 : 28,
+              fontWeight: 800,
+              letterSpacing: "-0.03em",
+              color: isLight ? STUDIO_THEME3.colors.text.slate900 : THEME3.colors.textPrimary
+            },
+            children: textLabel
+          }
+        )
+      ]
+    }
+  );
+};
+var MetricComparisonCard = ({
+  title,
+  beforeLabel,
+  beforeValue,
+  afterLabel,
+  afterValue,
+  maxValue,
+  prefix = "",
+  unit = "",
+  decimals = 0,
+  deltaBadge,
+  mode = "rings",
+  beforeColor = "#64748B",
+  afterColor = STUDIO_THEME3.colors.accents.emerald,
+  enterFrame,
+  startFrame,
+  variant = "dark",
+  safeBox9x16 = true,
+  style
+}) => {
+  const frame = useCurrentFrame3();
+  const { fps, width, height } = useVideoConfig3();
+  useStudioFontsReady3();
+  const effectiveStart = Math.max(2, startFrame ?? enterFrame ?? 2);
+  const enter = spring3({
+    frame: frame - effectiveStart,
+    fps,
+    config: SPRING_PRESETS3.snappy
+  });
+  if (enter <= 5e-3) {
+    return null;
+  }
+  const beforeProgress = interpolate3(
+    frame,
+    [effectiveStart + 4, effectiveStart + 44],
+    [0, 1],
+    {
+      easing: Easing2.out(Easing2.cubic),
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }
+  );
+  const afterProgress = interpolate3(
+    frame,
+    [effectiveStart + 14, effectiveStart + 60],
+    [0, 1],
+    {
+      easing: Easing2.out(Easing2.cubic),
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }
+  );
+  const badgePop = spring3({
+    frame: frame - (effectiveStart + 24),
+    fps,
+    config: SPRING_PRESETS3.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__ */ jsxs3(
+    "div",
+    {
+      style: {
+        width: cardWidth,
+        padding: isVerticalViewport ? "28px 30px" : "34px 42px",
+        borderRadius: 26,
+        boxSizing: "border-box",
+        backgroundColor: isLight ? STUDIO_THEME3.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.88)",
+        border: isLight ? `1.5px solid ${STUDIO_THEME3.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+        boxShadow: isLight ? STUDIO_THEME3.shadows.cardElevated : THEME3.shadows.glow(afterColor, 0.7),
+        backdropFilter: "blur(16px)",
+        opacity: enter,
+        transform: `translateY(${interpolate3(enter, [0, 1], [24, 0]).toFixed(2)}px) scale(${interpolate3(enter, [0, 1], [0.95, 1]).toFixed(4)})`,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 16,
+              marginBottom: 26
+            },
+            children: [
+              title ? /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    fontFamily: FONTS3.display,
+                    fontSize: isVerticalViewport ? 28 : 30,
+                    fontWeight: 800,
+                    letterSpacing: "-0.02em",
+                    color: isLight ? STUDIO_THEME3.colors.text.slate900 : THEME3.colors.textPrimary
+                  },
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx3("div", {}),
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    fontFamily: FONTS3.mono,
+                    fontSize: 17,
+                    fontWeight: 800,
+                    padding: "6px 16px",
+                    borderRadius: 9999,
+                    color: "#FFFFFF",
+                    backgroundColor: afterColor,
+                    boxShadow: `0 8px 24px ${afterColor}55`,
+                    opacity: badgePop,
+                    transform: `scale(${interpolate3(badgePop, [0, 1], [0.85, 1]).toFixed(3)})`
+                  },
+                  children: resolvedDelta
+                }
+              )
+            ]
+          }
+        ),
+        mode === "rings" ? /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-around",
+              gap: 20
+            },
+            children: [
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 12
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      RadialGauge,
+                      {
+                        fraction: beforeFrac,
+                        color: beforeColor,
+                        textLabel: formattedBefore,
+                        isLight,
+                        size: gaugeSize
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: FONTS3.sans,
+                          fontSize: 19,
+                          fontWeight: 600,
+                          color: isLight ? STUDIO_THEME3.colors.text.secondary : THEME3.colors.textSecondary
+                        },
+                        children: beforeLabel
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "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__ */ jsx3(ArrowRight, { size: 26, color: afterColor, strokeWidth: 2.8 })
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 12
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      RadialGauge,
+                      {
+                        fraction: afterFrac,
+                        color: afterColor,
+                        textLabel: formattedAfter,
+                        isLight,
+                        size: gaugeSize
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: FONTS3.sans,
+                          fontSize: 19,
+                          fontWeight: 700,
+                          color: isLight ? STUDIO_THEME3.colors.text.slate900 : THEME3.colors.textPrimary
+                        },
+                        children: afterLabel
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) : (
+          /* Horizontal Bars Mode */
+          /* @__PURE__ */ jsx3("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__ */ jsxs3(
+            "div",
+            {
+              style: { display: "flex", flexDirection: "column", gap: 8 },
+              children: [
+                /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx3(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: FONTS3.sans,
+                            fontSize: 20,
+                            fontWeight: row.bold ? 700 : 600,
+                            color: row.bold ? isLight ? STUDIO_THEME3.colors.text.slate900 : THEME3.colors.textPrimary : isLight ? STUDIO_THEME3.colors.text.secondary : THEME3.colors.textSecondary
+                          },
+                          children: row.lbl
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3(
+                        "span",
+                        {
+                          style: {
+                            fontFamily: FONTS3.mono,
+                            fontVariantNumeric: "tabular-nums",
+                            fontSize: 22,
+                            fontWeight: 800,
+                            color: row.bold ? row.col : isLight ? "#475569" : "#CBD5E1"
+                          },
+                          children: row.txt
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "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__ */ jsx3(
+                      "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
+          )) })
+        )
+      ]
+    }
+  );
+};
+
+export {
+  AnimatedBarRace,
+  TimelineTrack,
+  MetricComparisonCard
+};