@nyaruka/temba-components 0.141.1 → 0.142.0

package/static/svg/work/traced/expand-06.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.311 2.307 C 2.023 2.517,2.000 2.748,2.000 5.410 C 2.000 8.014,2.029 8.318,2.305 8.623 C 2.711 9.072,3.430 9.063,3.751 8.604 C 3.932 8.346,4.000 7.853,4.000 6.807 L 4.000 5.365 5.803 7.163 C 7.706 9.060,8.137 9.285,8.695 8.667 C 9.243 8.062,9.042 7.688,7.163 5.803 L 5.365 4.000 6.807 4.000 C 8.466 4.000,8.960 3.783,8.960 3.056 C 8.960 2.162,8.670 2.080,5.498 2.080 C 3.266 2.080,2.552 2.131,2.311 2.307 M15.291 2.331 C 15.153 2.470,15.040 2.790,15.040 3.042 C 15.040 3.785,15.524 4.000,17.193 4.000 L 18.635 4.000 16.837 5.803 C 14.940 7.706,14.715 8.137,15.333 8.695 C 15.938 9.243,16.312 9.042,18.197 7.163 L 20.000 5.365 20.000 6.807 C 20.000 7.853,20.068 8.346,20.249 8.604 C 20.570 9.063,21.289 9.072,21.695 8.623 C 21.971 8.318,22.000 8.014,22.000 5.410 C 22.000 2.748,21.977 2.517,21.689 2.307 C 21.211 1.957,15.644 1.979,15.291 2.331 M2.338 15.285 C 1.965 15.658,1.891 16.358,1.948 19.004 C 1.992 21.075,2.042 21.471,2.286 21.715 C 2.538 21.967,2.901 22.000,5.429 22.000 C 8.014 22.000,8.318 21.971,8.623 21.695 C 9.072 21.289,9.063 20.570,8.604 20.249 C 8.346 20.068,7.853 20.000,6.807 20.000 L 5.365 20.000 7.163 18.197 C 9.060 16.294,9.285 15.863,8.667 15.305 C 8.062 14.757,7.688 14.958,5.803 16.837 L 4.000 18.635 4.000 17.193 C 4.000 15.524,3.785 15.040,3.042 15.040 C 2.790 15.040,2.473 15.150,2.338 15.285 M15.305 15.333 C 14.757 15.938,14.958 16.312,16.837 18.197 L 18.635 20.000 17.193 20.000 C 16.147 20.000,15.654 20.068,15.396 20.249 C 14.938 20.570,14.928 21.289,15.376 21.695 C 15.672 21.963,16.023 22.006,18.276 22.051 C 21.112 22.108,21.621 22.001,21.918 21.286 C 22.039 20.992,22.085 19.965,22.051 18.276 C 22.006 16.023,21.963 15.672,21.695 15.376 C 21.289 14.928,20.570 14.938,20.249 15.396 C 20.068 15.654,20.000 16.147,20.000 17.193 L 20.000 18.635 18.197 16.837 C 16.294 14.940,15.863 14.715,15.305 15.333 " stroke="none" fill-rule="evenodd" fill="black"></path></svg>

package/static/svg/work/used/expand-06.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8L21 3M21 3H16M21 3V8M8 8L3 3M3 3L3 8M3 3L8 3M8 16L3 21M3 21H8M3 21L3 16M16 16L21 21M21 21V16M21 21H16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/test/temba-canvas-menu.test.ts

@@ -107,6 +107,61 @@ describe('temba-canvas-menu', () => {
     expect(menu.open).to.be.false;
   });
 
+  it('shows reflow option when showReflow is true', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 }, true, true);
+    await menu.updateComplete;
+
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    expect(menuItems?.length).to.equal(4);
+
+    const titles = Array.from(menuItems || []).map(
+      (item) => item.querySelector('.menu-item-title')?.textContent
+    );
+    expect(titles).to.deep.equal([
+      'Add Action',
+      'Add Split',
+      'Add Sticky Note',
+      'Reflow'
+    ]);
+  });
+
+  it('fires reflow selection event when reflow is clicked', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 }, true, true);
+    await menu.updateComplete;
+
+    let selectionDetail = null;
+    menu.addEventListener('temba-selection', (event: any) => {
+      selectionDetail = event.detail;
+    });
+
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    const reflowItem = menuItems?.[3] as HTMLElement;
+    reflowItem.click();
+    await menu.updateComplete;
+
+    expect(selectionDetail).to.deep.equal({
+      action: 'reflow',
+      position: { x: 50, y: 50 }
+    });
+    expect(menu.open).to.be.false;
+  });
+
+  it('hides reflow option by default', async () => {
+    const menu = await createCanvasMenu();
+    menu.show(100, 100, { x: 50, y: 50 });
+    await menu.updateComplete;
+
+    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');
+    expect(menuItems?.length).to.equal(3);
+
+    const titles = Array.from(menuItems || []).map(
+      (item) => item.querySelector('.menu-item-title')?.textContent
+    );
+    expect(titles).to.not.include('Reflow');
+  });
+
   it('adjusts position to stay within viewport bounds', async () => {
     const menu = await createCanvasMenu();
 

package/test/temba-flow-collision.test.ts

@@ -37,6 +37,37 @@ describe('Collision Detection Utilities', () => {
 
       document.body.removeChild(mockElement);
     });
+
+    it('uses layout-space dimensions unaffected by ancestor CSS transform', () => {
+      // Simulate zoom: ancestor has transform: scale(0.5)
+      const container = document.createElement('div');
+      container.style.transform = 'scale(0.5)';
+      container.style.transformOrigin = '0 0';
+      document.body.appendChild(container);
+
+      const mockElement = document.createElement('div');
+      mockElement.id = 'zoom-test-node';
+      mockElement.style.width = '200px';
+      mockElement.style.height = '150px';
+      container.appendChild(mockElement);
+
+      const position = { left: 100, top: 200 };
+      const bounds = getNodeBounds('zoom-test-node', position, mockElement);
+
+      // getNodeBounds uses offsetWidth/offsetHeight which are layout-space
+      expect(bounds).to.not.be.null;
+      expect(bounds!.width).to.equal(200);
+      expect(bounds!.height).to.equal(150);
+      expect(bounds!.right).to.equal(300); // left + layout width
+      expect(bounds!.bottom).to.equal(350); // top + layout height
+
+      // Verify that getBoundingClientRect WOULD return scaled values
+      const rect = mockElement.getBoundingClientRect();
+      expect(rect.width).to.equal(100); // 200 * 0.5 scale
+      expect(rect.height).to.equal(75); // 150 * 0.5 scale
+
+      container.remove();
+    });
   });
 
   describe('nodesOverlap', () => {

package/test/temba-flow-editor-zoom.test.ts

@@ -0,0 +1,583 @@
+import { expect } from '@open-wc/testing';
+import { Editor } from '../src/flow/Editor';
+import { stub, restore, spy } from 'sinon';
+
+customElements.define('temba-flow-editor-zoom', Editor);
+
+/** Create an Editor instance with a mock plumber, suitable for unit-testing
+ *  zoom methods without needing a full flow definition. */
+const createEditorWithMockPlumber = (): Editor => {
+  const editor = new Editor();
+  (editor as any).plumber = {
+    zoom: 1,
+    repaintEverything: stub()
+  };
+  return editor;
+};
+
+describe('Editor Zoom', () => {
+  beforeEach(() => {
+    restore();
+  });
+
+  afterEach(() => {
+    restore();
+  });
+
+  // --- A. setZoom state management ---
+
+  describe('setZoom', () => {
+    it('clamps to minimum of 0.1', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).setZoom(0.02);
+      expect((editor as any).zoom).to.equal(0.1);
+    });
+
+    it('clamps to maximum of 1.0', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).setZoom(1.5);
+      expect((editor as any).zoom).to.equal(1.0);
+    });
+
+    it('rounds to 2 decimal places', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).setZoom(0.333);
+      expect((editor as any).zoom).to.equal(0.33);
+    });
+
+    it('rounds 0.555 to 0.56', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).setZoom(0.555);
+      expect((editor as any).zoom).to.equal(0.56);
+    });
+
+    it('is a no-op when clamped value equals current zoom', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      const rafSpy = spy(window, 'requestAnimationFrame');
+      (editor as any).setZoom(0.5);
+      expect((editor as any).zoom).to.equal(0.5);
+      expect(rafSpy).to.not.have.been.called;
+      rafSpy.restore();
+    });
+
+    it('syncs plumber.zoom', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).setZoom(0.75);
+      expect((editor as any).plumber.zoom).to.equal(0.75);
+    });
+
+    it('clears zoomFitted flag', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).zoomFitted = true;
+      (editor as any).setZoom(0.8);
+      expect((editor as any).zoomFitted).to.be.false;
+    });
+
+    it('preserves viewport center point when center is provided', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 1.0;
+
+      // Create mock #editor element with known geometry
+      const mockEditor = {
+        scrollLeft: 100,
+        scrollTop: 200,
+        getBoundingClientRect: () => ({
+          left: 50,
+          top: 50,
+          width: 800,
+          height: 600
+        })
+      };
+      stub(editor, 'querySelector').returns(mockEditor as any);
+
+      // Stub rAF to invoke callback synchronously
+      const rafStub = stub(window, 'requestAnimationFrame').callsFake(
+        (cb: FrameRequestCallback) => {
+          cb(0);
+          return 0;
+        }
+      );
+
+      const center = { clientX: 450, clientY: 350 };
+      (editor as any).setZoom(0.5, center);
+
+      // Verify scroll math:
+      // ox = 450 - 50 = 400, oy = 350 - 50 = 300
+      // cx = (100 + 400) / 1.0 = 500, cy = (200 + 300) / 1.0 = 500
+      // newScrollLeft = 500 * 0.5 - 400 = -150
+      // newScrollTop  = 500 * 0.5 - 300 = -50
+      expect(mockEditor.scrollLeft).to.equal(-150);
+      expect(mockEditor.scrollTop).to.equal(-50);
+
+      rafStub.restore();
+    });
+  });
+
+  // --- B. Convenience methods ---
+
+  describe('zoomIn', () => {
+    it('increments zoom by 0.05', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).zoomIn();
+      expect((editor as any).zoom).to.equal(0.55);
+    });
+
+    it('stays at 1.0 when already at maximum', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 1.0;
+      (editor as any).zoomIn();
+      expect((editor as any).zoom).to.equal(1.0);
+    });
+  });
+
+  describe('zoomOut', () => {
+    it('decrements zoom by 0.05', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).zoomOut();
+      expect((editor as any).zoom).to.equal(0.45);
+    });
+
+    it('stays at 0.1 when already at minimum', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.1;
+      (editor as any).zoomOut();
+      expect((editor as any).zoom).to.equal(0.1);
+    });
+  });
+
+  describe('zoomToFull', () => {
+    it('resets zoom to 1.0', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.4;
+      (editor as any).zoomToFull();
+      expect((editor as any).zoom).to.equal(1.0);
+    });
+  });
+
+  // --- C. zoomToFit ---
+
+  describe('zoomToFit', () => {
+    it('returns early when no definition', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).definition = null;
+      (editor as any).zoomToFit();
+      expect((editor as any).zoom).to.equal(1.0);
+    });
+
+    it('returns early when definition has zero nodes', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).definition = { nodes: [], _ui: { nodes: {} } };
+      (editor as any).zoomToFit();
+      expect((editor as any).zoom).to.equal(1.0);
+    });
+
+    it('sets zoomFitted to true', () => {
+      const editor = createEditorWithMockPlumber();
+
+      // Create mock definition with nodes spread wide enough for zoom < 1.0
+      const node1uuid = 'node-1-uuid';
+      const node2uuid = 'node-2-uuid';
+      (editor as any).definition = {
+        nodes: [{ uuid: node1uuid }, { uuid: node2uuid }],
+        _ui: {
+          nodes: {
+            [node1uuid]: { position: { left: 0, top: 0 } },
+            [node2uuid]: { position: { left: 2000, top: 1500 } }
+          },
+          stickies: {}
+        }
+      };
+
+      // Create mock node elements
+      const el1 = document.createElement('div');
+      el1.id = node1uuid;
+      el1.style.width = '200px';
+      el1.style.height = '100px';
+      document.body.appendChild(el1);
+
+      const el2 = document.createElement('div');
+      el2.id = node2uuid;
+      el2.style.width = '200px';
+      el2.style.height = '100px';
+      document.body.appendChild(el2);
+
+      // Create mock #editor element
+      const mockEditor = document.createElement('div');
+      mockEditor.id = 'mock-editor-for-zoom';
+      Object.defineProperty(mockEditor, 'clientWidth', { value: 800 });
+      Object.defineProperty(mockEditor, 'clientHeight', { value: 600 });
+      mockEditor.scrollLeft = 0;
+      mockEditor.scrollTop = 0;
+
+      stub(editor, 'querySelector').callsFake((selector: string) => {
+        if (selector === '#editor') return mockEditor;
+        if (selector.includes(node1uuid)) return el1;
+        if (selector.includes(node2uuid)) return el2;
+        return null;
+      });
+
+      stub(window, 'requestAnimationFrame').callsFake(
+        (cb: FrameRequestCallback) => {
+          cb(0);
+          return 0;
+        }
+      );
+
+      (editor as any).zoomToFit();
+      expect((editor as any).zoomFitted).to.be.true;
+
+      el1.remove();
+      el2.remove();
+    });
+
+    it('caps zoom at 1.0 when nodes fit easily', () => {
+      const editor = createEditorWithMockPlumber();
+
+      // Tiny content that fits easily
+      const nodeUuid = 'small-node';
+      (editor as any).definition = {
+        nodes: [{ uuid: nodeUuid }],
+        _ui: {
+          nodes: {
+            [nodeUuid]: { position: { left: 100, top: 100 } }
+          },
+          stickies: {}
+        }
+      };
+
+      const el = document.createElement('div');
+      el.id = nodeUuid;
+      el.style.width = '50px';
+      el.style.height = '30px';
+      document.body.appendChild(el);
+
+      const mockEditor = document.createElement('div');
+      Object.defineProperty(mockEditor, 'clientWidth', { value: 800 });
+      Object.defineProperty(mockEditor, 'clientHeight', { value: 600 });
+      mockEditor.scrollLeft = 0;
+      mockEditor.scrollTop = 0;
+
+      stub(editor, 'querySelector').callsFake((selector: string) => {
+        if (selector === '#editor') return mockEditor;
+        if (selector.includes(nodeUuid)) return el;
+        return null;
+      });
+
+      stub(window, 'requestAnimationFrame').callsFake(
+        (cb: FrameRequestCallback) => {
+          cb(0);
+          return 0;
+        }
+      );
+
+      (editor as any).zoomToFit();
+      expect((editor as any).zoom).to.equal(1.0);
+
+      el.remove();
+    });
+
+    it('rounds zoom to nearest 0.05', () => {
+      const editor = createEditorWithMockPlumber();
+
+      // Create nodes that produce a zoom that's not a multiple of 0.05
+      const node1uuid = 'fit-node-1';
+      const node2uuid = 'fit-node-2';
+      (editor as any).definition = {
+        nodes: [{ uuid: node1uuid }, { uuid: node2uuid }],
+        _ui: {
+          nodes: {
+            [node1uuid]: { position: { left: 0, top: 0 } },
+            [node2uuid]: { position: { left: 3000, top: 2000 } }
+          },
+          stickies: {}
+        }
+      };
+
+      const el1 = document.createElement('div');
+      el1.id = node1uuid;
+      el1.style.width = '200px';
+      el1.style.height = '100px';
+      document.body.appendChild(el1);
+
+      const el2 = document.createElement('div');
+      el2.id = node2uuid;
+      el2.style.width = '200px';
+      el2.style.height = '100px';
+      document.body.appendChild(el2);
+
+      const mockEditor = document.createElement('div');
+      Object.defineProperty(mockEditor, 'clientWidth', { value: 800 });
+      Object.defineProperty(mockEditor, 'clientHeight', { value: 600 });
+      mockEditor.scrollLeft = 0;
+      mockEditor.scrollTop = 0;
+
+      stub(editor, 'querySelector').callsFake((selector: string) => {
+        if (selector === '#editor') return mockEditor;
+        if (selector.includes(node1uuid)) return el1;
+        if (selector.includes(node2uuid)) return el2;
+        return null;
+      });
+
+      stub(window, 'requestAnimationFrame').callsFake(
+        (cb: FrameRequestCallback) => {
+          cb(0);
+          return 0;
+        }
+      );
+
+      (editor as any).zoomToFit();
+
+      const zoom = (editor as any).zoom;
+      // Zoom should be a multiple of 0.05 (within float tolerance)
+      const remainder = Math.round((zoom % 0.05) * 1000) / 1000;
+      expect(remainder === 0 || remainder === 0.05).to.be.true;
+
+      el1.remove();
+      el2.remove();
+    });
+  });
+
+  // --- D. handleWheel ---
+
+  describe('handleWheel', () => {
+    it('ignores non-ctrl/meta scroll', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+
+      const event = new WheelEvent('wheel', {
+        deltaY: 100,
+        clientX: 400,
+        clientY: 300
+      });
+
+      (editor as any).handleWheel(event);
+      expect((editor as any).zoom).to.equal(0.5);
+    });
+
+    it('zooms out by 0.05 on Ctrl+scroll-down', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+
+      // Stub querySelector for setZoom's editor lookup
+      stub(editor, 'querySelector').returns(null);
+
+      const event = new WheelEvent('wheel', {
+        ctrlKey: true,
+        deltaY: 100,
+        clientX: 400,
+        clientY: 300
+      });
+
+      (editor as any).handleWheel(event);
+      expect((editor as any).zoom).to.equal(0.45);
+    });
+
+    it('zooms in by 0.05 on Meta+scroll-up', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+
+      stub(editor, 'querySelector').returns(null);
+
+      const event = new WheelEvent('wheel', {
+        metaKey: true,
+        deltaY: -100,
+        clientX: 400,
+        clientY: 300
+      });
+
+      (editor as any).handleWheel(event);
+      expect((editor as any).zoom).to.equal(0.55);
+    });
+
+    it('calls preventDefault on ctrl/meta wheel events', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+
+      stub(editor, 'querySelector').returns(null);
+
+      const event = new WheelEvent('wheel', {
+        ctrlKey: true,
+        deltaY: 100,
+        clientX: 400,
+        clientY: 300,
+        cancelable: true
+      });
+
+      const preventDefaultSpy = spy(event, 'preventDefault');
+      (editor as any).handleWheel(event);
+      expect(preventDefaultSpy).to.have.been.calledOnce;
+    });
+  });
+
+  // --- E. Coordinate conversions ---
+
+  describe('coordinate conversions', () => {
+    it('handleCanvasContextMenu divides by zoom', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+      (editor as any).viewingRevision = null;
+      (editor as any).isTranslating = false;
+      (editor as any).definition = { nodes: [{ uuid: 'n' }] };
+
+      // Track the canvas-space position passed to canvasMenu.show
+      // show() is called with: (clientX, clientY, {x: snappedLeft, y: snappedTop}, true, hasNodes)
+      let capturedPosition: any = null;
+      const mockCanvasMenu = {
+        show: (
+          _clientX: number,
+          _clientY: number,
+          position: any,
+          ..._rest: any[]
+        ) => {
+          capturedPosition = position;
+        }
+      };
+
+      const mockCanvas = {
+        getBoundingClientRect: () => ({
+          left: 0,
+          top: 0,
+          width: 1000,
+          height: 800
+        })
+      };
+
+      stub(editor, 'querySelector').callsFake(((selector: string) => {
+        if (selector === '#canvas') return mockCanvas;
+        if (selector === 'temba-canvas-menu') return mockCanvasMenu;
+        return null;
+      }) as any);
+
+      const event = {
+        clientX: 200,
+        clientY: 300,
+        target: { id: 'canvas' },
+        preventDefault: stub(),
+        stopPropagation: stub()
+      };
+
+      (editor as any).handleCanvasContextMenu(event);
+
+      // relativeX = (200 - 0) / 0.5 - 10 = 390, snapped to grid(20): 400
+      // relativeY = (300 - 0) / 0.5 - 10 = 590, snapped to grid(20): 600
+      expect(capturedPosition).to.not.be.null;
+      expect(capturedPosition.x).to.equal(400);
+      expect(capturedPosition.y).to.equal(600);
+    });
+
+    it('calculateCanvasDropPosition divides by zoom', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+
+      const mockCanvas = {
+        getBoundingClientRect: () => ({
+          left: 0,
+          top: 0,
+          width: 1000,
+          height: 800
+        })
+      };
+
+      stub(editor, 'querySelector').callsFake(((selector: string) => {
+        if (selector === '#canvas') return mockCanvas;
+        return null;
+      }) as any);
+
+      // DROP_PREVIEW_OFFSET_X = 20, DROP_PREVIEW_OFFSET_Y = 20
+      const pos = (editor as any).calculateCanvasDropPosition(200, 300, true);
+
+      // left = (200 - 0) / 0.5 - 20 = 380, snapped: 380
+      // top  = (300 - 0) / 0.5 - 20 = 580, snapped: 580
+      expect(pos.left).to.equal(380);
+      expect(pos.top).to.equal(580);
+    });
+
+    it('focusNode multiplies by zoom for scroll position', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+
+      const mockNode = {
+        offsetLeft: 200,
+        offsetTop: 300,
+        offsetWidth: 100,
+        offsetHeight: 60
+      };
+
+      let scrollToArgs: any = null;
+      const mockEditor = {
+        getBoundingClientRect: () => ({
+          width: 800,
+          height: 600,
+          left: 0,
+          top: 0
+        }),
+        scrollTo: (args: any) => {
+          scrollToArgs = args;
+        }
+      };
+
+      stub(editor, 'querySelector').callsFake(((selector: string) => {
+        if (selector.includes('temba-flow-node')) return mockNode;
+        if (selector === '#editor') return mockEditor;
+        return null;
+      }) as any);
+
+      editor.focusNode('test-uuid');
+
+      // nodeCenterX = 200 + 50 = 250, nodeCenterY = 300 + 30 = 330
+      // targetScrollX = 250 * 0.5 - 400 = -275 -> max(0, -275) = 0
+      // targetScrollY = 330 * 0.5 - 300 = -135 -> max(0, -135) = 0
+      expect(scrollToArgs).to.not.be.null;
+      expect(scrollToArgs.left).to.equal(0);
+      expect(scrollToArgs.top).to.equal(0);
+    });
+
+    it('focusNode scroll positions scale with zoom for distant nodes', () => {
+      const editor = createEditorWithMockPlumber();
+      (editor as any).zoom = 0.5;
+
+      const mockNode = {
+        offsetLeft: 2000,
+        offsetTop: 1500,
+        offsetWidth: 200,
+        offsetHeight: 100
+      };
+
+      let scrollToArgs: any = null;
+      const mockEditor = {
+        getBoundingClientRect: () => ({
+          width: 800,
+          height: 600,
+          left: 0,
+          top: 0
+        }),
+        scrollTo: (args: any) => {
+          scrollToArgs = args;
+        }
+      };
+
+      stub(editor, 'querySelector').callsFake(((selector: string) => {
+        if (selector.includes('temba-flow-node')) return mockNode;
+        if (selector === '#editor') return mockEditor;
+        return null;
+      }) as any);
+
+      editor.focusNode('distant-node');
+
+      // nodeCenterX = 2000 + 100 = 2100, nodeCenterY = 1500 + 50 = 1550
+      // targetScrollX = 2100 * 0.5 - 400 = 650
+      // targetScrollY = 1550 * 0.5 - 300 = 475
+      expect(scrollToArgs.left).to.equal(650);
+      expect(scrollToArgs.top).to.equal(475);
+    });
+  });
+});