From 77dc0ad2eb8f7cacd921de8b6c690e159b6feaa7 Mon Sep 17 00:00:00 2001
From: Colby McHenry <me@colbymchenry.com>
Date: Sat, 29 Aug 2026 11:21:32 -0500
Subject: [PATCH] fix(ui): a double-click on a box no longer zooms the canvas

The flow canvas zooms on any double-click that reaches its pane, including one bubbling up from a step or screen box. A box's double-click is a navigation, not a zoom: it is stopped at the box in the capture phase (the delegated handler runs at the root, after the pane), so the picture keeps its fit while the pane's own double-click still zooms.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01REFyW9hmNrxhwN5wxRoAkC
---
 ui/src/components/screens/ScreenNode.svelte | 8 +++++++-
 ui/src/components/steps/StepNode.svelte     | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/screens/ScreenNode.svelte b/ui/src/components/screens/ScreenNode.svelte
index d7449fc..763388c 100644
--- a/ui/src/components/screens/ScreenNode.svelte
+++ b/ui/src/components/screens/ScreenNode.svelte
@@ -56,7 +56,13 @@
   class:unreached={info.unreached}
   style={`width:${layout.width}px;height:${layout.height}px`}
   onclick={() => node.onSelect(info.id)}
-  ondblclick={() => node.onOpen?.(info.id)}
+  ondblclickcapture={(e) => {
+    // The flow canvas zooms on a double-click that reaches its pane; a
+    // double-click on a box is a navigation, not a zoom — stop it here,
+    // at the target, before it bubbles. The pane's own double-click keeps zooming.
+    e.stopPropagation();
+    node.onOpen?.(info.id);
+  }}
   aria-pressed={node.selected}
   title={(info.origin
     ? `${info.label} — navigates, but no screen reaches it within the walk. In ${info.sub}.`
diff --git a/ui/src/components/steps/StepNode.svelte b/ui/src/components/steps/StepNode.svelte
index 49d492a..ec58b48 100644
--- a/ui/src/components/steps/StepNode.svelte
+++ b/ui/src/components/steps/StepNode.svelte
@@ -79,7 +79,13 @@
   class:anchor={step.anchor}
   style={`width:${layout.width}px;height:${layout.height}px`}
   onclick={() => node.onSelect(info.id)}
-  ondblclick={() => node.onStart?.(info.id)}
+  ondblclickcapture={(e) => {
+    // The flow canvas zooms on a double-click that reaches its pane; a
+    // double-click on a box is a navigation, not a zoom — stop it here,
+    // at the target, before it bubbles. The pane's own double-click keeps zooming.
+    e.stopPropagation();
+    node.onStart?.(info.id);
+  }}
   aria-pressed={node.selected}
   title={`${info.label} — ${step.anchor ? 'where this picture starts; ' : ''}${kindWord(step.kind, node.project, step)}. ${info.sub}.${cutNote}${node.onStart && !step.anchor ? ' Double-click to start here.' : ''}`}
 >