fix: use default spacing for document export diagrams, add pages tooltip

1. Document export now uses default editor spacing (nodeSpacing: 40,
   layerSpacing: 60) instead of compact (25/40) for both the overview
   diagram and per-branch diagrams. This matches the image export fix
   and produces cleaner smoothstep edge routing.

2. Add info tooltip next to the "Pages" label in the diagram options
   explaining that per-branch mode splits the diagram by top-level
   branches for readability.

Author: chrisdburr

components/modals/_share-modal/document-export-section.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronDown, Download, Loader2 } from "lucide-react";
+import { ChevronDown, Download, Info, Loader2 } from "lucide-react";
 import { useState } from "react";
 import type { Edge, Node } from "reactflow";
 import { getDocumentExportData } from "@/actions/export-document";
@@ -25,6 +25,12 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "../../ui/select";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "../../ui/tooltip";
 
 /**
  * Section labels for display in the customisation panel
@@ -368,7 +374,22 @@ export function DocumentExportSection({
 							</Select>
 						</div>
 						<div className="flex items-center gap-4">
-							<Label className="text-xs">Pages</Label>
+							<div className="flex items-center gap-1">
+								<Label className="text-xs">Pages</Label>
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<Info className="h-3.5 w-3.5 cursor-help text-muted-foreground" />
+										</TooltipTrigger>
+										<TooltipContent side="top">
+											<p className="max-w-52">
+												Per-branch splits the diagram by each top-level branch,
+												creating a separate page per branch for readability.
+											</p>
+										</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							</div>
 							<RadioGroup
 								className="flex items-center gap-4"
 								onValueChange={(v) => setDiagramMode(v as DiagramMode)}

lib/case/document-export.ts

@@ -427,12 +427,15 @@ async function captureBranchDiagrams(
 				hidden: !(branch.nodeIds.has(e.source) && branch.nodeIds.has(e.target)),
 			}));
 
-			// Layout only the visible branch nodes
+			// Layout only the visible branch nodes (default spacing for cleaner edges)
 			const {
 				nodes: layoutedNodes,
 				edges: layoutedEdges,
 				direction,
-			} = await layoutForExport(branchNodes, branchEdges, layoutDirection);
+			} = await layoutForExport(branchNodes, branchEdges, layoutDirection, {
+				nodeSpacing: 40,
+				layerSpacing: 60,
+			});
 
 			// Push to DOM (including direction for correct handle positioning)
 			applyLayout(layoutedNodes, layoutedEdges, direction);
@@ -499,12 +502,15 @@ export async function exportDocument(
 			exportEdges = pruned.edges;
 		}
 
-		// Apply compact export layout
+		// Apply export layout with default spacing for cleaner edge routing
 		const {
 			nodes: layoutedNodes,
 			edges: layoutedEdges,
 			direction,
-		} = await layoutForExport(exportNodes, exportEdges, layoutDirection);
+		} = await layoutForExport(exportNodes, exportEdges, layoutDirection, {
+			nodeSpacing: 40,
+			layerSpacing: 60,
+		});
 
 		// Push export layout to DOM (including direction for correct handle positioning)
 		applyLayout(layoutedNodes, layoutedEdges, direction);