From 46dc09783e7ecf1c64cf82070d2dcd1ca7eb91d9 Mon Sep 17 00:00:00 2001
From: myrmidex <myrmidex@myrmidex.net>
Date: Sun, 22 Mar 2026 15:22:54 +0100
Subject: [PATCH] 2 - Integrate DistributionLines SVG overlay into scenario
 page

---
 resources/js/components/DistributionLines.tsx |  6 +++---
 resources/js/pages/Scenarios/Show.tsx         | 10 ++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/DistributionLines.tsx b/resources/js/components/DistributionLines.tsx
index a805683..eb3561f 100644
--- a/resources/js/components/DistributionLines.tsx
+++ b/resources/js/components/DistributionLines.tsx
@@ -3,9 +3,9 @@ import { type DistributionPreview } from '@/types';
 
 interface Props {
     distribution: DistributionPreview;
-    bucketRefs: React.RefObject<Map<string, HTMLElement>>;
-    containerRef: React.RefObject<HTMLDivElement>;
-    incomeRef: React.RefObject<HTMLDivElement>;
+    bucketRefs: React.RefObject<Map<string, HTMLElement> | null>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    incomeRef: React.RefObject<HTMLDivElement | null>;
 }
 
 interface LinePosition {
diff --git a/resources/js/pages/Scenarios/Show.tsx b/resources/js/pages/Scenarios/Show.tsx
index 7901a53..5d068ee 100644
--- a/resources/js/pages/Scenarios/Show.tsx
+++ b/resources/js/pages/Scenarios/Show.tsx
@@ -2,6 +2,7 @@ import { Head, router } from '@inertiajs/react';
 import { Settings } from 'lucide-react';
 import { useRef, useState } from 'react';
 import BucketCard from '@/components/BucketCard';
+import DistributionLines from '@/components/DistributionLines';
 import InlineEditInput from '@/components/InlineEditInput';
 import InlineEditSelect from '@/components/InlineEditSelect';
 import SettingsPanel from '@/components/SettingsPanel';
@@ -286,6 +287,15 @@ export default function Show({ scenario, buckets }: Props) {
                         {/* Middle: Connector area (SVG lines render here) */}
                         <div className="flex-1" />
 
+                        {distribution && (
+                            <DistributionLines
+                                distribution={distribution}
+                                bucketRefs={bucketRefs}
+                                containerRef={containerRef}
+                                incomeRef={incomeRef}
+                            />
+                        )}
+
                         {/* Right: Income */}
                         <div ref={incomeRef} className="w-1/5 shrink-0 self-center">
                             <div className="flex items-center justify-center border-b border-red-500/40 pb-2 mb-6">