slideshow now stops when user clicks outside the popover

apps/memory-graph-playground/src/app/page.tsx

@@ -125,6 +125,11 @@ export default function Home() {
 		console.log("Slideshow showing node:", nodeId)
 	}, [])
 
+	// Handle slideshow stop (when user clicks outside)
+	const handleSlideshowStop = useCallback(() => {
+		setIsSlideshowActive(false)
+	}, [])
+
 	return (
 		<div className="flex flex-col h-screen bg-zinc-950">
 			{/* Header */}
@@ -191,10 +196,9 @@ export default function Home() {
 											viewBox="0 0 24 24"
 											fill="currentColor"
 										>
-											<rect x="6" y="4" width="4" height="16" />
-											<rect x="14" y="4" width="4" height="16" />
+											<rect x="6" y="6" width="12" height="12" />
 										</svg>
-										Stop Slideshow
+										Slideshow
 									</>
 								) : (
 									<>
@@ -206,7 +210,7 @@ export default function Home() {
 										>
 											<path d="M8 5v14l11-7z" />
 										</svg>
-										Start Slideshow
+										Slideshow
 									</>
 								)}
 							</button>
@@ -282,6 +286,7 @@ export default function Home() {
 							// Slideshow control
 							isSlideshowActive={isSlideshowActive}
 							onSlideshowNodeChange={handleSlideshowNodeChange}
+							onSlideshowStop={handleSlideshowStop}
 						>
 							<div className="flex h-full items-center justify-center">
 								<p className="text-zinc-400">

packages/memory-graph/src/components/memory-graph.tsx

@@ -43,6 +43,7 @@ export const MemoryGraph = ({
 	// Slideshow control
 	isSlideshowActive = false,
 	onSlideshowNodeChange,
+	onSlideshowStop,
 }: MemoryGraphProps) => {
 	// Inject styles on first render (client-side only)
 	useEffect(() => {
@@ -706,6 +707,7 @@ export const MemoryGraph = ({
 					y={popoverPosition.y}
 					onClose={() => setSelectedNode(null)}
 					containerBounds={containerRef.current?.getBoundingClientRect()}
+					onBackdropClick={isSlideshowActive ? onSlideshowStop : undefined}
 				/>
 			)}
 

packages/memory-graph/src/components/node-popover.tsx

@@ -9,6 +9,7 @@ export interface NodePopoverProps {
 	y: number // Screen Y position
 	onClose: () => void
 	containerBounds?: DOMRect // Optional container bounds to limit backdrop
+	onBackdropClick?: () => void // Optional callback when backdrop is clicked
 }
 
 export const NodePopover = memo<NodePopoverProps>(function NodePopover({
@@ -17,6 +18,7 @@ export const NodePopover = memo<NodePopoverProps>(function NodePopover({
 	y,
 	onClose,
 	containerBounds,
+	onBackdropClick,
 }) {
 	// Handle Escape key to close popover
 	useEffect(() => {
@@ -50,10 +52,15 @@ export const NodePopover = memo<NodePopoverProps>(function NodePopover({
 				backgroundColor: "transparent",
 			}
 
+	const handleBackdropClick = () => {
+		onBackdropClick?.()
+		onClose()
+	}
+
 	return (
 		<>
 			{/* Invisible backdrop to catch clicks outside */}
-			<div onClick={onClose} style={backdropStyle} />
+			<div onClick={handleBackdropClick} style={backdropStyle} />
 
 			{/* Popover content */}
 			<div

packages/memory-graph/src/types.ts

@@ -139,6 +139,8 @@ export interface MemoryGraphProps {
 	isSlideshowActive?: boolean
 	/** Callback when slideshow selects a new node (provides node ID) */
 	onSlideshowNodeChange?: (nodeId: string | null) => void
+	/** Callback when user clicks outside during slideshow (to stop it) */
+	onSlideshowStop?: () => void
 }
 
 export interface LegendProps {