@make-pictures/kits 0.0.0-stage → 2.0.1

package/dist/motion-diagrams-2d/index.cjs

@@ -0,0 +1,1137 @@
+"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/motion-diagrams-2d/index.ts
+var motion_diagrams_2d_exports = {};
+__export(motion_diagrams_2d_exports, {
+  CameraRig: () => CameraRig,
+  CodePayloadToast: () => CodePayloadToast,
+  DataFlowEdge: () => DataFlowEdge,
+  FlowCurve: () => FlowCurve,
+  SystemNode: () => SystemNode,
+  WorldBox: () => WorldBox,
+  evaluateCameraState: () => evaluateCameraState,
+  evaluateCubicBezier: () => evaluateCubicBezier,
+  portBottom: () => portBottom,
+  portLeft: () => portLeft,
+  portRight: () => portRight,
+  portTop: () => portTop
+});
+module.exports = __toCommonJS(motion_diagrams_2d_exports);
+
+// packages/kits/src/motion-diagrams-2d/CameraRig.tsx
+var import_remotion = require("remotion");
+var import_core = require("@make-pictures/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function evaluateCameraState(frame, fps, keyframes) {
+  if (keyframes.length === 0) {
+    return {
+      x: 960,
+      y: 540,
+      zoom: 1,
+      rotateZ: 0,
+      velocity: 0
+    };
+  }
+  let x = keyframes[0].x;
+  let y = keyframes[0].y;
+  let zoom = keyframes[0].zoom;
+  let rotateZ = keyframes[0].rotateZ ?? 0;
+  let velocity = 0;
+  for (let i = 1; i < keyframes.length; i++) {
+    const prev = keyframes[i - 1];
+    const curr = keyframes[i];
+    if (frame < curr.startFrame) {
+      break;
+    }
+    const p = (0, import_remotion.spring)({
+      frame: frame - curr.startFrame,
+      fps,
+      config: {
+        damping: 200,
+        stiffness: curr.stiffness ?? 42,
+        mass: 1.25
+      }
+    });
+    const midFlightArc = 0.5 * (1 - Math.cos(2 * Math.PI * p));
+    const zoomDip = (curr.flightZoomDip ?? 0) * midFlightArc;
+    const bankAdd = (curr.flightBankDeg ?? 0) * midFlightArc;
+    x += (curr.x - prev.x) * p;
+    y += (curr.y - prev.y) * p;
+    zoom += (curr.zoom - prev.zoom) * p + zoomDip;
+    rotateZ += ((curr.rotateZ ?? 0) - (prev.rotateZ ?? 0)) * p + bankAdd;
+    velocity = Math.max(velocity, midFlightArc);
+  }
+  const floatX = Math.sin(frame / 45) * 4;
+  const floatY = Math.cos(frame / 55) * 3.5;
+  return {
+    x: x + floatX,
+    y: y + floatY,
+    zoom,
+    rotateZ,
+    velocity
+  };
+}
+var CameraRig = ({
+  keyframes,
+  stageWidth = 1920,
+  stageHeight = 1080,
+  variant = "light",
+  children
+}) => {
+  const frame = (0, import_remotion.useCurrentFrame)();
+  const { fps } = (0, import_remotion.useVideoConfig)();
+  (0, import_core.useStudioFontsReady)();
+  const cam = evaluateCameraState(frame, fps, keyframes);
+  const centerX = stageWidth / 2;
+  const centerY = stageHeight / 2;
+  const gridSpacing = Math.max(24, 80 * cam.zoom);
+  const dotSpacing = Math.max(16, 40 * cam.zoom);
+  const gridOffsetX = centerX - cam.x * cam.zoom;
+  const gridOffsetY = centerY - cam.y * cam.zoom;
+  const isDark = variant === "dark";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_remotion.AbsoluteFill,
+    {
+      style: {
+        backgroundColor: isDark ? import_core.THEME.colors.bgPrimary : import_core.STUDIO_THEME.colors.bgCanvas,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_remotion.AbsoluteFill,
+          {
+            style: {
+              backgroundImage: isDark ? `
+            radial-gradient(circle at 20% 25%, rgba(0, 240, 255, 0.14) 0%, transparent 48%),
+            radial-gradient(circle at 80% 30%, rgba(139, 92, 246, 0.16) 0%, transparent 50%),
+            radial-gradient(circle at 50% 82%, rgba(16, 185, 129, 0.12) 0%, transparent 55%)
+          ` : `
+            radial-gradient(circle at 20% 25%, rgba(165, 180, 252, 0.35) 0%, transparent 48%),
+            radial-gradient(circle at 80% 30%, rgba(199, 210, 254, 0.32) 0%, transparent 50%),
+            radial-gradient(circle at 50% 82%, rgba(224, 231, 255, 0.42) 0%, transparent 55%)
+          `,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_remotion.AbsoluteFill,
+          {
+            style: {
+              backgroundImage: isDark ? `
+            linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px)
+          ` : `
+            linear-gradient(to right, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(15, 23, 42, 0.045) 1px, transparent 1px)
+          `,
+              backgroundSize: `${gridSpacing}px ${gridSpacing}px`,
+              backgroundPosition: `${gridOffsetX}px ${gridOffsetY}px`,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_remotion.AbsoluteFill,
+          {
+            style: {
+              backgroundImage: isDark ? "radial-gradient(rgba(56, 189, 248, 0.18) 1.5px, transparent 1.5px)" : "radial-gradient(rgba(37, 99, 235, 0.14) 1.5px, transparent 1.5px)",
+              backgroundSize: `${dotSpacing}px ${dotSpacing}px`,
+              backgroundPosition: `${gridOffsetX + dotSpacing / 2}px ${gridOffsetY + dotSpacing / 2}px`,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: 0,
+              height: 0,
+              transformOrigin: "0 0",
+              willChange: "transform",
+              transform: `translate3d(${centerX}px, ${centerY}px, 0) scale(${cam.zoom}) rotate(${cam.rotateZ}deg) translate3d(${-cam.x}px, ${-cam.y}px, 0)`
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/motion-diagrams-2d/NodeBox.tsx
+var import_remotion2 = require("remotion");
+var import_core2 = require("@make-pictures/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var portRight = (n, dy = 0) => ({
+  x: n.cx + n.w / 2,
+  y: n.cy + dy
+});
+var portLeft = (n, dy = 0) => ({
+  x: n.cx - n.w / 2,
+  y: n.cy + dy
+});
+var portTop = (n, dx = 0) => ({
+  x: n.cx + dx,
+  y: n.cy - n.h / 2
+});
+var portBottom = (n, dx = 0) => ({
+  x: n.cx + dx,
+  y: n.cy + n.h / 2
+});
+var WorldBox = ({
+  node,
+  scale = 1,
+  opacity = 1,
+  zIndex = 2,
+  style,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      left: node.cx - node.w / 2,
+      top: node.cy - node.h / 2,
+      width: node.w,
+      height: node.h,
+      boxSizing: "border-box",
+      transformOrigin: "center center",
+      transform: `scale(${scale})`,
+      opacity,
+      zIndex,
+      fontFamily: import_core2.STUDIO_FONTS.sans,
+      ...style
+    },
+    children
+  }
+);
+var FlowCurve = ({
+  from,
+  to,
+  curveY = 0,
+  curveX = 0,
+  orientation = "horizontal",
+  color = import_core2.STUDIO_THEME.colors.brand[600],
+  activeFromFrame,
+  packetSpeedFrames = 100,
+  packetCount = 2,
+  strokeWidth = 4,
+  dashed = false,
+  blocked = false
+}) => {
+  const frame = (0, import_remotion2.useCurrentFrame)();
+  const { fps } = (0, import_remotion2.useVideoConfig)();
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const p0 = from;
+  const p1 = orientation === "vertical" ? { x: from.x + curveX, y: from.y + dy * 0.45 } : { x: from.x + dx * 0.4, y: from.y + curveY };
+  const p2 = orientation === "vertical" ? { x: to.x + curveX, y: to.y - dy * 0.45 } : { x: from.x + dx * 0.6, y: to.y + curveY };
+  const p3 = to;
+  const d = `M ${p0.x} ${p0.y} C ${p1.x} ${p1.y}, ${p2.x} ${p2.y}, ${p3.x} ${p3.y}`;
+  const drawProgress = (0, import_remotion2.spring)({
+    frame: frame - activeFromFrame,
+    fps,
+    config: import_core2.SPRING_PRESETS.smooth
+  });
+  if (drawProgress <= 0.01) return null;
+  const evalBezier = (t) => {
+    const u = 1 - t;
+    return {
+      x: u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x,
+      y: u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y
+    };
+  };
+  const packets = [];
+  if (!blocked && frame >= activeFromFrame + 10) {
+    for (let i = 0; i < packetCount; i++) {
+      const offset = i / packetCount * packetSpeedFrames;
+      const elapsed = frame - (activeFromFrame + 10) - offset;
+      if (elapsed < 0) continue;
+      const t = elapsed % packetSpeedFrames / packetSpeedFrames;
+      const alpha = t < 0.1 ? t / 0.1 : t > 0.9 ? (1 - t) / 0.1 : 1;
+      const pt = evalBezier(t);
+      packets.push({ x: pt.x, y: pt.y, alpha });
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: 1,
+        height: 1,
+        overflow: "visible",
+        pointerEvents: "none",
+        zIndex: 1
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: color,
+            strokeWidth: strokeWidth + 6,
+            strokeOpacity: 0.14 * drawProgress,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeOpacity: 0.85 * drawProgress,
+            strokeDasharray: dashed ? "10 10" : void 0,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "circle",
+          {
+            cx: from.x,
+            cy: from.y,
+            r: 6,
+            fill: "#FFFFFF",
+            stroke: color,
+            strokeWidth: 3,
+            opacity: drawProgress
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "circle",
+          {
+            cx: to.x,
+            cy: to.y,
+            r: 6,
+            fill: "#FFFFFF",
+            stroke: color,
+            strokeWidth: 3,
+            opacity: drawProgress
+          }
+        ),
+        packets.map((pkt, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { opacity: pkt.alpha * drawProgress, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: pkt.x, cy: pkt.y, r: 12, fill: color, opacity: 0.22 }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "circle",
+            {
+              cx: pkt.x,
+              cy: pkt.y,
+              r: 6.5,
+              fill: "#FFFFFF",
+              stroke: color,
+              strokeWidth: 3
+            }
+          )
+        ] }, idx))
+      ]
+    }
+  );
+};
+
+// packages/kits/src/motion-diagrams-2d/SystemNode.tsx
+var import_remotion3 = require("remotion");
+var import_core3 = require("@make-pictures/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SystemNode = ({
+  title,
+  subtitle,
+  badge,
+  statusText,
+  activeStatusText,
+  icon: Icon,
+  x,
+  y,
+  width = 340,
+  height = 188,
+  accentColor = import_core3.THEME.colors.accents.cyan,
+  enterFrame = 0,
+  activeRanges = [],
+  metricsLabel,
+  metricsValue
+}) => {
+  const frame = (0, import_remotion3.useCurrentFrame)();
+  const { fps } = (0, import_remotion3.useVideoConfig)();
+  const enterProgress = (0, import_remotion3.spring)({
+    frame: frame - enterFrame,
+    fps,
+    config: import_core3.SPRING_PRESETS.snappy
+  });
+  if (enterProgress <= 2e-3) {
+    return null;
+  }
+  let activeStrength = 0;
+  for (const [start, end] of activeRanges) {
+    if (frame >= start - 8 && frame <= end + 24) {
+      const rampIn = (0, import_remotion3.spring)({
+        frame: frame - start,
+        fps,
+        config: import_core3.SPRING_PRESETS.smooth
+      });
+      const rampOut = (0, import_remotion3.interpolate)(frame, [end, end + 22], [1, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      activeStrength = Math.max(activeStrength, rampIn * rampOut);
+    }
+  }
+  const isCurrentlyActive = activeStrength > 0.35;
+  const pulseWave = (0, import_remotion3.interpolate)(
+    Math.sin((frame - enterFrame) * 0.045),
+    [-1, 1],
+    [0.82, 1.1]
+  );
+  const glowIntensity = activeStrength * pulseWave;
+  const scale = (0, import_remotion3.interpolate)(enterProgress, [0, 1], [0.88, 1]) + (0, import_remotion3.interpolate)(activeStrength, [0, 1], [0, 0.024]);
+  const translateY = (0, import_remotion3.interpolate)(enterProgress, [0, 1], [28, 0]);
+  const opacity = (0, import_remotion3.interpolate)(enterProgress, [0, 0.65, 1], [0, 0.9, 1]);
+  const displayedStatus = isCurrentlyActive && activeStatusText ? activeStatusText : statusText;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x - width / 2,
+        top: y - height / 2,
+        width,
+        height,
+        opacity,
+        willChange: "transform, opacity",
+        transform: `translate3d(0, ${translateY}px, 0) scale(${scale})`,
+        borderRadius: import_core3.THEME.radii.lg,
+        backgroundColor: "rgba(15, 18, 29, 0.95)",
+        backgroundImage: `radial-gradient(130% 110% at 50% 0%, ${accentColor}${isCurrentlyActive ? "26" : "0E"} 0%, rgba(15, 18, 29, 0.6) 68%)`,
+        border: `1px solid ${isCurrentlyActive ? `${accentColor}88` : "rgba(255, 255, 255, 0.09)"}`,
+        boxShadow: activeStrength > 0.02 ? import_core3.THEME.shadows.glow(accentColor, glowIntensity) : import_core3.THEME.shadows.card,
+        padding: "20px 22px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        boxSizing: "border-box",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: "12%",
+              right: "12%",
+              height: 1.5,
+              background: `linear-gradient(90deg, transparent, ${isCurrentlyActive ? accentColor : "rgba(255,255,255,0.22)"}, transparent)`,
+              opacity: (0, import_remotion3.interpolate)(activeStrength, [0, 1], [0.55, 1])
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 44,
+                    height: 44,
+                    borderRadius: 12,
+                    backgroundColor: `${accentColor}${isCurrentlyActive ? "28" : "14"}`,
+                    border: `1px solid ${accentColor}${isCurrentlyActive ? "77" : "33"}`,
+                    boxShadow: isCurrentlyActive ? `0 0 22px ${accentColor}55` : "none",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    Icon,
+                    {
+                      size: 22,
+                      color: isCurrentlyActive ? "#FFFFFF" : accentColor,
+                      strokeWidth: 2
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    padding: "4px 10px",
+                    borderRadius: import_core3.THEME.radii.pill,
+                    backgroundColor: "rgba(255, 255, 255, 0.045)",
+                    border: "1px solid rgba(255, 255, 255, 0.08)",
+                    fontFamily: import_core3.FONTS.mono,
+                    fontSize: 11,
+                    fontWeight: 500,
+                    letterSpacing: "0.06em",
+                    textTransform: "uppercase",
+                    color: isCurrentlyActive ? accentColor : import_core3.THEME.colors.textSecondary
+                  },
+                  children: badge
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              style: {
+                fontFamily: import_core3.FONTS.sans,
+                fontSize: 21,
+                fontWeight: 600,
+                letterSpacing: "-0.025em",
+                color: import_core3.THEME.colors.textPrimary,
+                lineHeight: 1.2
+              },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              style: {
+                fontFamily: import_core3.FONTS.sans,
+                fontSize: 13,
+                fontWeight: 400,
+                color: import_core3.THEME.colors.textSecondary,
+                marginTop: 4,
+                lineHeight: 1.35
+              },
+              children: subtitle
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingTop: 10,
+              borderTop: "1px solid rgba(255, 255, 255, 0.06)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "span",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: "50%",
+                          backgroundColor: isCurrentlyActive ? accentColor : "rgba(148, 163, 184, 0.45)",
+                          boxShadow: isCurrentlyActive ? `0 0 12px ${accentColor}, 0 0 24px ${accentColor}` : "none"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: import_core3.FONTS.mono,
+                          fontSize: 11.5,
+                          fontWeight: 500,
+                          color: isCurrentlyActive ? import_core3.THEME.colors.textPrimary : import_core3.THEME.colors.textMuted,
+                          letterSpacing: "0.02em"
+                        },
+                        children: displayedStatus
+                      }
+                    )
+                  ]
+                }
+              ),
+              metricsLabel && metricsValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  style: {
+                    fontFamily: import_core3.FONTS.mono,
+                    fontSize: 11,
+                    color: import_core3.THEME.colors.textSecondary
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: import_core3.THEME.colors.textMuted }, children: [
+                      metricsLabel,
+                      ": "
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: isCurrentlyActive ? accentColor : "#E2E8F0" }, children: metricsValue })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/motion-diagrams-2d/DataFlowEdge.tsx
+var import_remotion4 = require("remotion");
+var import_core4 = require("@make-pictures/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function evaluateCubicBezier(p0, p1, p2, p3, t) {
+  const u = 1 - t;
+  const tt = t * t;
+  const uu = u * u;
+  const uuu = uu * u;
+  const ttt = tt * t;
+  return {
+    x: uuu * p0.x + 3 * uu * t * p1.x + 3 * u * tt * p2.x + ttt * p3.x,
+    y: uuu * p0.y + 3 * uu * t * p1.y + 3 * u * tt * p2.y + ttt * p3.y
+  };
+}
+var DataFlowEdge = ({
+  id,
+  from,
+  to,
+  curveOffsetY = -70,
+  color = import_core4.THEME.colors.accents.cyan,
+  secondaryColor,
+  drawStartFrame = 0,
+  flowStartFrame = 30,
+  flowEndFrame = 600,
+  packetCount = 2,
+  traverseFrames = 96,
+  direction = "forward",
+  label,
+  subLabel,
+  labelOffsetY = -28
+}) => {
+  const frame = (0, import_remotion4.useCurrentFrame)();
+  const { fps } = (0, import_remotion4.useVideoConfig)();
+  const endColor = secondaryColor ?? color;
+  const dx = to.x - from.x;
+  const p0 = from;
+  const p1 = {
+    x: from.x + dx * 0.36,
+    y: from.y + curveOffsetY
+  };
+  const p2 = {
+    x: from.x + dx * 0.64,
+    y: to.y + curveOffsetY
+  };
+  const p3 = to;
+  const pathData = `M ${p0.x} ${p0.y} C ${p1.x} ${p1.y}, ${p2.x} ${p2.y}, ${p3.x} ${p3.y}`;
+  const drawProgress = (0, import_remotion4.spring)({
+    frame: frame - drawStartFrame,
+    fps,
+    config: import_core4.SPRING_PRESETS.smooth
+  });
+  if (drawProgress <= 5e-3) {
+    return null;
+  }
+  const isFlowActive = frame >= flowStartFrame && frame <= flowEndFrame;
+  const flowFadeIn = (0, import_remotion4.interpolate)(
+    frame,
+    [flowStartFrame, flowStartFrame + 16],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const flowFadeOut = (0, import_remotion4.interpolate)(
+    frame,
+    [flowEndFrame - 18, flowEndFrame],
+    [1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const flowAlpha = isFlowActive ? flowFadeIn * flowFadeOut : 0;
+  const midPoint = evaluateCubicBezier(p0, p1, p2, p3, 0.5);
+  const pathLengthEstimate = 1600;
+  const dashOffset = (0, import_remotion4.interpolate)(
+    drawProgress,
+    [0, 1],
+    [pathLengthEstimate, 0]
+  );
+  const gradId = `edge-grad-${id}`;
+  const packets = [];
+  if (flowAlpha > 0.01) {
+    for (let i = 0; i < packetCount; i++) {
+      const staggerFrames = Math.round(i / packetCount * traverseFrames);
+      const localElapsed = frame - flowStartFrame - staggerFrames;
+      if (localElapsed < 0) continue;
+      const rawProgress = localElapsed % traverseFrames / traverseFrames;
+      const t = direction === "forward" ? rawProgress : 1 - rawProgress;
+      const edgeFade = (0, import_remotion4.interpolate)(t, [0, 0.08, 0.92, 1], [0, 1, 1, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      }) * flowAlpha;
+      const head = evaluateCubicBezier(p0, p1, p2, p3, t);
+      const trail = [];
+      const trailSteps = 5;
+      for (let s = 1; s <= trailSteps; s++) {
+        const dt = s * 0.016 * (direction === "forward" ? -1 : 1);
+        const clampedT = Math.max(0, Math.min(1, t + dt));
+        trail.push(evaluateCubicBezier(p0, p1, p2, p3, clampedT));
+      }
+      packets.push({ head, trail, opacity: edgeFade });
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "svg",
+          {
+            width: 1920,
+            height: 1080,
+            viewBox: "0 0 1920 1080",
+            style: { position: "absolute", inset: 0, overflow: "visible" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "linearGradient",
+                {
+                  id: gradId,
+                  x1: from.x,
+                  y1: from.y,
+                  x2: to.x,
+                  y2: to.y,
+                  gradientUnits: "userSpaceOnUse",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: color }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: endColor })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "path",
+                {
+                  d: pathData,
+                  fill: "none",
+                  stroke: "rgba(255, 255, 255, 0.09)",
+                  strokeWidth: 2,
+                  strokeDasharray: pathLengthEstimate,
+                  strokeDashoffset: dashOffset,
+                  strokeLinecap: "round"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "path",
+                {
+                  d: pathData,
+                  fill: "none",
+                  stroke: `url(#${gradId})`,
+                  strokeWidth: 2,
+                  strokeDasharray: "6 10",
+                  strokeOpacity: 0.32 * drawProgress + 0.35 * flowAlpha,
+                  strokeLinecap: "round"
+                }
+              ),
+              flowAlpha > 0.01 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    d: pathData,
+                    fill: "none",
+                    stroke: `url(#${gradId})`,
+                    strokeWidth: 11,
+                    strokeOpacity: 0.14 * flowAlpha,
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    d: pathData,
+                    fill: "none",
+                    stroke: `url(#${gradId})`,
+                    strokeWidth: 3,
+                    strokeOpacity: 0.62 * flowAlpha,
+                    strokeLinecap: "round"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "circle",
+                {
+                  cx: from.x,
+                  cy: from.y,
+                  r: 4.5,
+                  fill: color,
+                  opacity: drawProgress
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "circle",
+                {
+                  cx: to.x,
+                  cy: to.y,
+                  r: 4.5,
+                  fill: endColor,
+                  opacity: drawProgress
+                }
+              ),
+              packets.map((pkt, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: pkt.opacity, children: [
+                pkt.trail.map((pt, tIdx) => {
+                  const ratio = 1 - (tIdx + 1) / (pkt.trail.length + 1);
+                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "circle",
+                    {
+                      cx: pt.x,
+                      cy: pt.y,
+                      r: 5.2 * ratio,
+                      fill: color,
+                      opacity: 0.4 * ratio
+                    },
+                    `trail-${tIdx}`
+                  );
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "circle",
+                  {
+                    cx: pkt.head.x,
+                    cy: pkt.head.y,
+                    r: 16,
+                    fill: color,
+                    opacity: 0.14
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "circle",
+                  {
+                    cx: pkt.head.x,
+                    cy: pkt.head.y,
+                    r: 10,
+                    fill: color,
+                    opacity: 0.28
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "circle",
+                  {
+                    cx: pkt.head.x,
+                    cy: pkt.head.y,
+                    r: 5.2,
+                    fill: "#FFFFFF",
+                    stroke: color,
+                    strokeWidth: 2.5
+                  }
+                )
+              ] }, `pkt-${idx}`))
+            ]
+          }
+        ),
+        label && drawProgress > 0.4 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: midPoint.x,
+              top: midPoint.y + labelOffsetY,
+              transform: `translate3d(-50%, -50%, 0) scale(${(0, import_remotion4.interpolate)(
+                drawProgress,
+                [0.4, 1],
+                [0.85, 1],
+                { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+              )})`,
+              opacity: (0, import_remotion4.interpolate)(drawProgress, [0.4, 0.9], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp"
+              }),
+              padding: "5px 12px",
+              borderRadius: import_core4.THEME.radii.pill,
+              backgroundColor: "rgba(11, 14, 23, 0.94)",
+              border: `1px solid ${flowAlpha > 0.2 ? `${color}77` : "rgba(255,255,255,0.1)"}`,
+              boxShadow: flowAlpha > 0.2 ? `0 0 20px ${color}33, 0 8px 20px rgba(0,0,0,0.6)` : "0 8px 20px rgba(0,0,0,0.6)",
+              display: "flex",
+              alignItems: "center",
+              gap: 7,
+              whiteSpace: "nowrap"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "span",
+                {
+                  style: {
+                    width: 6,
+                    height: 6,
+                    borderRadius: "50%",
+                    backgroundColor: color,
+                    boxShadow: flowAlpha > 0.2 ? `0 0 8px ${color}` : "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "span",
+                {
+                  style: {
+                    fontFamily: import_core4.FONTS.mono,
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: import_core4.THEME.colors.textPrimary,
+                    letterSpacing: "0.04em"
+                  },
+                  children: label
+                }
+              ),
+              subLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "span",
+                {
+                  style: {
+                    fontFamily: import_core4.FONTS.mono,
+                    fontSize: 10.5,
+                    color: import_core4.THEME.colors.textSecondary
+                  },
+                  children: [
+                    "\u2022 ",
+                    subLabel
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/motion-diagrams-2d/CodePayloadToast.tsx
+var import_remotion5 = require("remotion");
+var import_core5 = require("@make-pictures/core");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function renderHighlightedLine(line, accentColor) {
+  const jsonKeyMatch = line.match(/^(\s*)("[^"]+")(\s*:\s*)(.*)$/);
+  if (jsonKeyMatch) {
+    const [, indent, keyPart, colonPart, valuePart] = jsonKeyMatch;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: indent }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#93C5FD" }, children: keyPart }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#64748B" }, children: colonPart }),
+      renderJsonValue(valuePart, accentColor)
+    ] });
+  }
+  const sqlKeywords = /\b(INSERT|INTO|VALUES|SELECT|FROM|WHERE|RETURNING|await|const|return)\b/g;
+  if (sqlKeywords.test(line)) {
+    const tokens = line.split(/(\b(?:INSERT|INTO|VALUES|SELECT|FROM|WHERE|RETURNING|await|const|return)\b)/g);
+    return tokens.map(
+      (tok, idx) => /^(INSERT|INTO|VALUES|SELECT|FROM|WHERE|RETURNING|await|const|return)$/.test(tok) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: accentColor, fontWeight: 600 }, children: tok }, idx) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#E2E8F0" }, children: tok }, idx)
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#94A3B8" }, children: line });
+}
+function renderJsonValue(raw, accentColor) {
+  const trailingComma = raw.endsWith(",") ? "," : "";
+  const clean = raw.endsWith(",") ? raw.slice(0, -1) : raw;
+  if (/^".*"$/.test(clean)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#6EE7B7" }, children: clean }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#64748B" }, children: trailingComma })
+    ] });
+  }
+  if (/^(true|false|null)$/.test(clean)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: accentColor, fontWeight: 600 }, children: clean }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#64748B" }, children: trailingComma })
+    ] });
+  }
+  if (/^-?\d+(\.\d+)?$/.test(clean)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#FCD34D" }, children: clean }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#64748B" }, children: trailingComma })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#E2E8F0" }, children: raw });
+}
+var CodePayloadToast = ({
+  x,
+  y,
+  width = 410,
+  methodBadge,
+  endpoint,
+  latencyText = "18ms",
+  code,
+  accentColor = import_core5.THEME.colors.accents.cyan,
+  startFrame,
+  endFrame
+}) => {
+  const frame = (0, import_remotion5.useCurrentFrame)();
+  const { fps } = (0, import_remotion5.useVideoConfig)();
+  if (frame < startFrame - 2 || frame > endFrame + 24) {
+    return null;
+  }
+  const enterProgress = (0, import_remotion5.spring)({
+    frame: frame - startFrame,
+    fps,
+    config: import_core5.SPRING_PRESETS.snappy
+  });
+  const exitProgress = (0, import_remotion5.interpolate)(frame, [endFrame, endFrame + 18], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const combined = enterProgress * exitProgress;
+  const translateY = (0, import_remotion5.interpolate)(enterProgress, [0, 1], [18, 0]);
+  const scale = (0, import_remotion5.interpolate)(combined, [0, 1], [0.92, 1]);
+  const lines = code.trim().split("\n");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x - width / 2,
+        top: y,
+        width,
+        opacity: combined,
+        willChange: "transform, opacity",
+        transform: `translate3d(0, ${translateY}px, 0) scale(${scale})`,
+        borderRadius: import_core5.THEME.radii.md,
+        backgroundColor: "rgba(11, 14, 23, 0.95)",
+        border: `1px solid ${accentColor}44`,
+        boxShadow: `0 24px 60px rgba(0, 0, 0, 0.8), 0 0 28px ${accentColor}22, 0 1px 0 rgba(255, 255, 255, 0.1) inset`,
+        overflow: "hidden",
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "9px 14px",
+              backgroundColor: "rgba(255, 255, 255, 0.03)",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.07)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    style: {
+                      padding: "2px 7px",
+                      borderRadius: 5,
+                      backgroundColor: `${accentColor}24`,
+                      border: `1px solid ${accentColor}66`,
+                      fontFamily: import_core5.FONTS.mono,
+                      fontSize: 10,
+                      fontWeight: 600,
+                      color: accentColor,
+                      letterSpacing: "0.04em"
+                    },
+                    children: methodBadge
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: import_core5.FONTS.mono,
+                      fontSize: 11.5,
+                      fontWeight: 500,
+                      color: import_core5.THEME.colors.textPrimary
+                    },
+                    children: endpoint
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "span",
+                {
+                  style: {
+                    fontFamily: import_core5.FONTS.mono,
+                    fontSize: 10.5,
+                    color: import_core5.THEME.colors.textSecondary
+                  },
+                  children: latencyText
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              fontFamily: import_core5.FONTS.mono,
+              fontSize: 12,
+              lineHeight: 1.55,
+              whiteSpace: "pre"
+            },
+            children: lines.map((line, idx) => {
+              const lineOpacity = (0, import_remotion5.interpolate)(
+                frame - startFrame,
+                [idx * 2, idx * 2 + 10],
+                [0, 1],
+                { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+              );
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "div",
+                {
+                  style: {
+                    opacity: lineOpacity,
+                    display: "flex"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "span",
+                      {
+                        style: {
+                          width: 22,
+                          color: "rgba(100, 116, 139, 0.45)",
+                          userSelect: "none",
+                          fontSize: 10.5
+                        },
+                        children: idx + 1
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: renderHighlightedLine(line, accentColor) })
+                  ]
+                },
+                idx
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};