Add fullscreen button and remove initial pan animation

Add a fullscreen toggle to the zoom controls using inline Lucide SVG
icons (Maximize/X). Remove the 500ms transition on initial center so the
chart starts focused on the root person immediately.

resources/css/full-diagram.css

@@ -265,6 +265,16 @@
     background: #e9ecef;
 }
 
+/* ── Fullscreen ── */
+.full-diagram-container:fullscreen {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    background: #f8f9fa;
+}
+
 /* ── Print styles ── */
 @media print {
     .full-diagram-container {

resources/js/modules/lib/chart.js

@@ -79,12 +79,9 @@ export default class Chart {
 
     centerOnRoot() {
         const { width, height } = this.svg.node().getBoundingClientRect();
-        this.svg
-            .transition()
-            .duration(500)
-            .call(
-                this.zoomBehavior.transform,
-                zoomIdentity.translate(width / 2, height / 2)
-            );
+        this.svg.call(
+            this.zoomBehavior.transform,
+            zoomIdentity.translate(width / 2, height / 2)
+        );
     }
 }

resources/js/modules/lib/chart/zoom.js

@@ -4,6 +4,10 @@
 import { zoom, zoomIdentity, select } from "../d3.js";
 import { getCanvas } from "./svg.js";
 
+// Inline Lucide SVG icons (24x24 viewBox, stroke-based)
+const ICON_MAXIMIZE = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
+const ICON_X = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+
 /**
  * Initialize zoom behavior on the SVG element.
  *
@@ -69,4 +73,28 @@ export function createZoomControls(containerSelector, svg, zoomBehavior) {
                     zoomIdentity.translate(width / 2, height / 2)
                 );
         });
+
+    // Fullscreen toggle
+    const fullscreenBtn = controls
+        .append("button")
+        .attr("type", "button")
+        .attr("title", "Toggle fullscreen")
+        .attr("class", "fullscreen-btn")
+        .html(ICON_MAXIMIZE)
+        .on("click", () => {
+            const el = container.node();
+            if (!document.fullscreenElement) {
+                (el.requestFullscreen || el.webkitRequestFullscreen || el.msRequestFullscreen).call(el);
+            } else {
+                (document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen).call(document);
+            }
+        });
+
+    function updateFullscreenIcon() {
+        fullscreenBtn.html(document.fullscreenElement ? ICON_X : ICON_MAXIMIZE);
+        fullscreenBtn.attr("title", document.fullscreenElement ? "Exit fullscreen" : "Toggle fullscreen");
+    }
+
+    document.addEventListener("fullscreenchange", updateFullscreenIcon);
+    document.addEventListener("webkitfullscreenchange", updateFullscreenIcon);
 }