@nyaruka/temba-components 0.141.1 → 0.142.0

package/out-tsc/test/temba-sortable-list.test.js

@@ -1,6 +1,7 @@
 import { expect, fixture, oneEvent } from '@open-wc/testing';
 import { html } from 'lit';
 import { CustomEventType } from '../src/interfaces';
+import { SortableList } from '../src/list/SortableList';
 import { assertScreenshot, getClip } from './utils.test';
 import { useFakeTimers } from 'sinon';
 const BORING_LIST = html `
@@ -171,5 +172,97 @@ describe('temba-sortable-list', () => {
         const dragStopEvent = await dragStop;
         expect(dragStopEvent.detail.isExternal).to.be.true;
     });
+    describe('zoom-aware dimensions', () => {
+        it('stores layout dimensions on mousedown via offsetWidth/offsetHeight', async () => {
+            const list = await createSorter(BORING_LIST);
+            await list.updateComplete;
+            const bounds = list.getBoundingClientRect();
+            // Start drag
+            await moveMouse(bounds.left + 20, bounds.bottom - 10);
+            await mouseDown();
+            // originalLayoutSize should be set using offsetWidth/offsetHeight
+            expect(list.originalLayoutSize).to.not.be.null;
+            // At zoom=1.0, layout size equals viewport size
+            expect(list.originalLayoutSize.width).to.equal(list.originalElementRect.width);
+            expect(list.originalLayoutSize.height).to.equal(list.originalElementRect.height);
+            await mouseUp();
+            clock.runAll();
+        });
+        it('ghost uses scale(1.03) without ancestor transform', async () => {
+            const list = await createSorter(BORING_LIST);
+            await list.updateComplete;
+            const bounds = list.getBoundingClientRect();
+            // Start drag past threshold to create ghost
+            await moveMouse(bounds.left + 20, bounds.bottom - 10);
+            await mouseDown();
+            await moveMouse(bounds.left + 30, bounds.bottom - 10);
+            clock.runAll();
+            expect(list.ghostElement).to.not.be.null;
+            expect(list.ghostElement.style.transform).to.equal('scale(1.03)');
+            // transformOrigin should NOT be set to '0 0' when there's no ancestor scale
+            expect(list.ghostElement.style.transformOrigin).to.not.equal('0 0');
+            await mouseUp();
+            clock.runAll();
+        });
+        it('detects ancestor scale and applies it to ghost', () => {
+            // Unit test the ghost scaling logic directly:
+            // When originalElementRect (viewport) differs from originalLayoutSize (layout),
+            // the ancestor scale is detected and applied to the ghost.
+            const list = new SortableList();
+            // Simulate being inside a container with transform: scale(0.5)
+            // Layout dimensions: 100x20, viewport dimensions: 50x10
+            list.originalElementRect = {
+                width: 50,
+                height: 10,
+                left: 0,
+                top: 0,
+                right: 50,
+                bottom: 10,
+                x: 0,
+                y: 0,
+                toJSON: () => ({})
+            };
+            list.originalLayoutSize = { width: 100, height: 20 };
+            // Calculate ancestor scale the same way the component does
+            const ancestorScale = list.originalLayoutSize.width > 0
+                ? list.originalElementRect.width / list.originalLayoutSize.width
+                : 1;
+            const hasAncestorScale = Math.abs(ancestorScale - 1) > 0.001;
+            expect(hasAncestorScale).to.be.true;
+            expect(ancestorScale).to.equal(0.5);
+            // The ghost would get: transform: scale(0.5 * 1.03) = scale(0.515)
+            const expectedScale = ancestorScale * 1.03;
+            expect(expectedScale).to.be.closeTo(0.515, 0.001);
+        });
+        it('uses originalLayoutSize for placeholder sizing', () => {
+            // Verify that the component stores separate layout vs viewport dimensions
+            const list = new SortableList();
+            // At zoom=1.0, both should be the same
+            const mockRect = {
+                width: 100,
+                height: 20,
+                left: 0,
+                top: 0,
+                right: 100,
+                bottom: 20,
+                x: 0,
+                y: 0,
+                toJSON: () => ({})
+            };
+            list.originalElementRect = mockRect;
+            list.originalLayoutSize = { width: 100, height: 20 };
+            // At zoom=1.0, they match
+            expect(list.originalLayoutSize.width).to.equal(list.originalElementRect.width);
+            // At zoom=0.5, viewport rect would be half but layout stays the same
+            list.originalElementRect = {
+                ...mockRect,
+                width: 50,
+                height: 10
+            };
+            // Layout size is independent of zoom
+            expect(list.originalLayoutSize.width).to.equal(100);
+            expect(list.originalLayoutSize.height).to.equal(20);
+        });
+    });
 });
 //# sourceMappingURL=temba-sortable-list.test.js.map

package/out-tsc/test/temba-sortable-list.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-sortable-list.test.js","sourceRoot":"","sources":["../../test/temba-sortable-list.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html, TemplateResult } from 'lit';\nimport { CustomEventType } from '../src/interfaces';\nimport { SortableList } from '../src/list/SortableList';\nimport { assertScreenshot, getClip } from './utils.test';\nimport Sinon, { useFakeTimers } from 'sinon';\n\nconst BORING_LIST = html`\n  <temba-sortable-list>\n    <style>\n      .sortable {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        height: 20px;\n      }\n    </style>\n    <div class=\"sortable\" id=\"chicken\" style=\"\">Chicken</div>\n    <div class=\"sortable\" id=\"fish\">Fish</div>\n  </temba-sortable-list>\n`;\n\nconst HORIZONTAL_LIST = html`\n  <temba-sortable-list horizontal>\n    <style>\n      .sortable {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        height: 20px;\n        width: 50px;\n      }\n    </style>\n    <div class=\"sortable\" id=\"red\">Red</div>\n    <div class=\"sortable\" id=\"blue\">Blue</div>\n    <div class=\"sortable\" id=\"green\">Green</div>\n  </temba-sortable-list>\n`;\n\nconst createSorter = async (def: TemplateResult) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 100px;');\n  return (await fixture(def, { parentNode })) as SortableList;\n};\n\ndescribe('temba-sortable-list', () => {\n  let clock: Sinon.SinonFakeTimers;\n  beforeEach(function () {\n    clock = useFakeTimers();\n    clock.runAll();\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('renders default', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    await assertScreenshot('list/sortable', getClip(list));\n  });\n\n  it('can get ids of sortable elements', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    await list.updateComplete;\n\n    const ids = list.getIds();\n    expect(ids).to.deep.equal(['chicken', 'fish']);\n  });\n\n  it('works with horizontal layout', async () => {\n    const list: SortableList = await createSorter(HORIZONTAL_LIST);\n    await list.updateComplete;\n\n    const ids = list.getIds();\n    expect(ids).to.deep.equal(['red', 'blue', 'green']);\n\n    // Test horizontal drag behavior\n    const bounds = list.getBoundingClientRect();\n    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);\n\n    // Drag the first item (red) to after the second item (blue)\n    await moveMouse(bounds.left + 10, bounds.top + 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 80, bounds.top + 10);\n    await mouseUp();\n    clock.runAll();\n\n    const orderEvent = await orderChanged;\n    expect(orderEvent.detail).to.deep.equal({\n      swap: [0, 2]\n    });\n  });\n\n  it('handles prepareGhost callback', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    let ghostPrepared = false;\n\n    list.prepareGhost = (ghost: HTMLElement) => {\n      ghostPrepared = true;\n      ghost.style.backgroundColor = 'red';\n    };\n\n    const bounds = list.getBoundingClientRect();\n\n    // Start dragging to trigger ghost creation\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 30, bounds.bottom - 10);\n\n    expect(ghostPrepared).to.be.true;\n\n    // Clean up\n    await mouseUp();\n    clock.runAll();\n  });\n\n  it('drags', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    const updated = oneEvent(list, 'change', false);\n\n    const bounds = list.getBoundingClientRect();\n\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 20, bounds.top + 5);\n\n    // should be hovered\n    await assertScreenshot('list/sortable-dragging', getClip(list));\n\n    // now lets drop - this will fire the order changed event\n    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);\n    await mouseUp();\n    clock.runAll();\n    await list.updateComplete;\n    clock.runAll();\n\n    // we should fire an order changed event on drop\n    const orderEvent = await orderChanged;\n    expect(orderEvent.detail).to.deep.equal({\n      swap: [1, 0]\n    });\n\n    await assertScreenshot('list/sortable-dropped', getClip(list));\n\n    // we should fire a change event\n    const changeEvent = await updated;\n    expect(changeEvent.type).to.equal('change');\n  });\n\n  it('detects external drag when dragging outside container', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    list.externalDrag = true;\n    await list.updateComplete;\n\n    const bounds = list.getBoundingClientRect();\n\n    // track external drag events\n    let externalDragFired = false;\n    let internalDragFired = false;\n\n    list.addEventListener(CustomEventType.DragExternal, () => {\n      externalDragFired = true;\n    });\n\n    list.addEventListener(CustomEventType.DragInternal, () => {\n      internalDragFired = true;\n    });\n\n    // start dragging an item\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n\n    // drag outside the container (far to the right)\n    await moveMouse(bounds.right + 100, bounds.top + 10);\n    clock.runAll();\n\n    // should have fired external drag event\n    expect(externalDragFired).to.be.true;\n\n    // drag back inside\n    externalDragFired = false; // reset\n    await moveMouse(bounds.left + 20, bounds.top + 10);\n    clock.runAll();\n\n    // should have fired internal drag event\n    expect(internalDragFired).to.be.true;\n\n    // clean up\n    await mouseUp();\n    clock.runAll();\n  });\n\n  it('fires DragStop with isExternal=true when dropped outside container', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    list.externalDrag = true;\n    await list.updateComplete;\n\n    const bounds = list.getBoundingClientRect();\n\n    // start dragging an item\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n\n    // drag outside the container\n    await moveMouse(bounds.right + 100, bounds.top + 10);\n    clock.runAll();\n\n    // listen for drag stop event\n    const dragStop = oneEvent(list, CustomEventType.DragStop, false);\n\n    // drop outside\n    await mouseUp();\n    clock.runAll();\n\n    const dragStopEvent = await dragStop;\n    expect(dragStopEvent.detail.isExternal).to.be.true;\n  });\n});\n"]}
+{"version":3,"file":"temba-sortable-list.test.js","sourceRoot":"","sources":["../../test/temba-sortable-list.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html, TemplateResult } from 'lit';\nimport { CustomEventType } from '../src/interfaces';\nimport { SortableList } from '../src/list/SortableList';\nimport { assertScreenshot, getClip } from './utils.test';\nimport Sinon, { useFakeTimers } from 'sinon';\n\nconst BORING_LIST = html`\n  <temba-sortable-list>\n    <style>\n      .sortable {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        height: 20px;\n      }\n    </style>\n    <div class=\"sortable\" id=\"chicken\" style=\"\">Chicken</div>\n    <div class=\"sortable\" id=\"fish\">Fish</div>\n  </temba-sortable-list>\n`;\n\nconst HORIZONTAL_LIST = html`\n  <temba-sortable-list horizontal>\n    <style>\n      .sortable {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        height: 20px;\n        width: 50px;\n      }\n    </style>\n    <div class=\"sortable\" id=\"red\">Red</div>\n    <div class=\"sortable\" id=\"blue\">Blue</div>\n    <div class=\"sortable\" id=\"green\">Green</div>\n  </temba-sortable-list>\n`;\n\nconst createSorter = async (def: TemplateResult) => {\n  const parentNode = document.createElement('div');\n  parentNode.setAttribute('style', 'width: 100px;');\n  return (await fixture(def, { parentNode })) as SortableList;\n};\n\ndescribe('temba-sortable-list', () => {\n  let clock: Sinon.SinonFakeTimers;\n  beforeEach(function () {\n    clock = useFakeTimers();\n    clock.runAll();\n  });\n\n  afterEach(function () {\n    clock.restore();\n  });\n\n  it('renders default', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    await assertScreenshot('list/sortable', getClip(list));\n  });\n\n  it('can get ids of sortable elements', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    await list.updateComplete;\n\n    const ids = list.getIds();\n    expect(ids).to.deep.equal(['chicken', 'fish']);\n  });\n\n  it('works with horizontal layout', async () => {\n    const list: SortableList = await createSorter(HORIZONTAL_LIST);\n    await list.updateComplete;\n\n    const ids = list.getIds();\n    expect(ids).to.deep.equal(['red', 'blue', 'green']);\n\n    // Test horizontal drag behavior\n    const bounds = list.getBoundingClientRect();\n    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);\n\n    // Drag the first item (red) to after the second item (blue)\n    await moveMouse(bounds.left + 10, bounds.top + 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 80, bounds.top + 10);\n    await mouseUp();\n    clock.runAll();\n\n    const orderEvent = await orderChanged;\n    expect(orderEvent.detail).to.deep.equal({\n      swap: [0, 2]\n    });\n  });\n\n  it('handles prepareGhost callback', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    let ghostPrepared = false;\n\n    list.prepareGhost = (ghost: HTMLElement) => {\n      ghostPrepared = true;\n      ghost.style.backgroundColor = 'red';\n    };\n\n    const bounds = list.getBoundingClientRect();\n\n    // Start dragging to trigger ghost creation\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 30, bounds.bottom - 10);\n\n    expect(ghostPrepared).to.be.true;\n\n    // Clean up\n    await mouseUp();\n    clock.runAll();\n  });\n\n  it('drags', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    const updated = oneEvent(list, 'change', false);\n\n    const bounds = list.getBoundingClientRect();\n\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n    await moveMouse(bounds.left + 20, bounds.top + 5);\n\n    // should be hovered\n    await assertScreenshot('list/sortable-dragging', getClip(list));\n\n    // now lets drop - this will fire the order changed event\n    const orderChanged = oneEvent(list, CustomEventType.OrderChanged, false);\n    await mouseUp();\n    clock.runAll();\n    await list.updateComplete;\n    clock.runAll();\n\n    // we should fire an order changed event on drop\n    const orderEvent = await orderChanged;\n    expect(orderEvent.detail).to.deep.equal({\n      swap: [1, 0]\n    });\n\n    await assertScreenshot('list/sortable-dropped', getClip(list));\n\n    // we should fire a change event\n    const changeEvent = await updated;\n    expect(changeEvent.type).to.equal('change');\n  });\n\n  it('detects external drag when dragging outside container', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    list.externalDrag = true;\n    await list.updateComplete;\n\n    const bounds = list.getBoundingClientRect();\n\n    // track external drag events\n    let externalDragFired = false;\n    let internalDragFired = false;\n\n    list.addEventListener(CustomEventType.DragExternal, () => {\n      externalDragFired = true;\n    });\n\n    list.addEventListener(CustomEventType.DragInternal, () => {\n      internalDragFired = true;\n    });\n\n    // start dragging an item\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n\n    // drag outside the container (far to the right)\n    await moveMouse(bounds.right + 100, bounds.top + 10);\n    clock.runAll();\n\n    // should have fired external drag event\n    expect(externalDragFired).to.be.true;\n\n    // drag back inside\n    externalDragFired = false; // reset\n    await moveMouse(bounds.left + 20, bounds.top + 10);\n    clock.runAll();\n\n    // should have fired internal drag event\n    expect(internalDragFired).to.be.true;\n\n    // clean up\n    await mouseUp();\n    clock.runAll();\n  });\n\n  it('fires DragStop with isExternal=true when dropped outside container', async () => {\n    const list: SortableList = await createSorter(BORING_LIST);\n    list.externalDrag = true;\n    await list.updateComplete;\n\n    const bounds = list.getBoundingClientRect();\n\n    // start dragging an item\n    await moveMouse(bounds.left + 20, bounds.bottom - 10);\n    await mouseDown();\n\n    // drag outside the container\n    await moveMouse(bounds.right + 100, bounds.top + 10);\n    clock.runAll();\n\n    // listen for drag stop event\n    const dragStop = oneEvent(list, CustomEventType.DragStop, false);\n\n    // drop outside\n    await mouseUp();\n    clock.runAll();\n\n    const dragStopEvent = await dragStop;\n    expect(dragStopEvent.detail.isExternal).to.be.true;\n  });\n\n  describe('zoom-aware dimensions', () => {\n    it('stores layout dimensions on mousedown via offsetWidth/offsetHeight', async () => {\n      const list: SortableList = await createSorter(BORING_LIST);\n      await list.updateComplete;\n\n      const bounds = list.getBoundingClientRect();\n\n      // Start drag\n      await moveMouse(bounds.left + 20, bounds.bottom - 10);\n      await mouseDown();\n\n      // originalLayoutSize should be set using offsetWidth/offsetHeight\n      expect(list.originalLayoutSize).to.not.be.null;\n      // At zoom=1.0, layout size equals viewport size\n      expect(list.originalLayoutSize.width).to.equal(\n        list.originalElementRect.width\n      );\n      expect(list.originalLayoutSize.height).to.equal(\n        list.originalElementRect.height\n      );\n\n      await mouseUp();\n      clock.runAll();\n    });\n\n    it('ghost uses scale(1.03) without ancestor transform', async () => {\n      const list: SortableList = await createSorter(BORING_LIST);\n      await list.updateComplete;\n\n      const bounds = list.getBoundingClientRect();\n\n      // Start drag past threshold to create ghost\n      await moveMouse(bounds.left + 20, bounds.bottom - 10);\n      await mouseDown();\n      await moveMouse(bounds.left + 30, bounds.bottom - 10);\n      clock.runAll();\n\n      expect(list.ghostElement).to.not.be.null;\n      expect(list.ghostElement.style.transform).to.equal('scale(1.03)');\n      // transformOrigin should NOT be set to '0 0' when there's no ancestor scale\n      expect(list.ghostElement.style.transformOrigin).to.not.equal('0 0');\n\n      await mouseUp();\n      clock.runAll();\n    });\n\n    it('detects ancestor scale and applies it to ghost', () => {\n      // Unit test the ghost scaling logic directly:\n      // When originalElementRect (viewport) differs from originalLayoutSize (layout),\n      // the ancestor scale is detected and applied to the ghost.\n      const list = new SortableList();\n\n      // Simulate being inside a container with transform: scale(0.5)\n      // Layout dimensions: 100x20, viewport dimensions: 50x10\n      list.originalElementRect = {\n        width: 50,\n        height: 10,\n        left: 0,\n        top: 0,\n        right: 50,\n        bottom: 10,\n        x: 0,\n        y: 0,\n        toJSON: () => ({})\n      } as DOMRect;\n      list.originalLayoutSize = { width: 100, height: 20 };\n\n      // Calculate ancestor scale the same way the component does\n      const ancestorScale =\n        list.originalLayoutSize.width > 0\n          ? list.originalElementRect.width / list.originalLayoutSize.width\n          : 1;\n      const hasAncestorScale = Math.abs(ancestorScale - 1) > 0.001;\n\n      expect(hasAncestorScale).to.be.true;\n      expect(ancestorScale).to.equal(0.5);\n\n      // The ghost would get: transform: scale(0.5 * 1.03) = scale(0.515)\n      const expectedScale = ancestorScale * 1.03;\n      expect(expectedScale).to.be.closeTo(0.515, 0.001);\n    });\n\n    it('uses originalLayoutSize for placeholder sizing', () => {\n      // Verify that the component stores separate layout vs viewport dimensions\n      const list = new SortableList();\n\n      // At zoom=1.0, both should be the same\n      const mockRect = {\n        width: 100,\n        height: 20,\n        left: 0,\n        top: 0,\n        right: 100,\n        bottom: 20,\n        x: 0,\n        y: 0,\n        toJSON: () => ({})\n      } as DOMRect;\n\n      list.originalElementRect = mockRect;\n      list.originalLayoutSize = { width: 100, height: 20 };\n\n      // At zoom=1.0, they match\n      expect(list.originalLayoutSize.width).to.equal(\n        list.originalElementRect.width\n      );\n\n      // At zoom=0.5, viewport rect would be half but layout stays the same\n      list.originalElementRect = {\n        ...mockRect,\n        width: 50,\n        height: 10\n      } as DOMRect;\n\n      // Layout size is independent of zoom\n      expect(list.originalLayoutSize.width).to.equal(100);\n      expect(list.originalLayoutSize.height).to.equal(20);\n    });\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.141.1",
+  "version": "0.142.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/Icons.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values */
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = '129c04a9f99f9f4e99c436a68bc95470';
+export const SVG_FINGERPRINT = 'de580a861152b5d164592ae63b65e5aa';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -198,6 +198,8 @@ export enum Icon {
   video = 'video-recorder',
   webhook = 'link-external-01',
   workspace = 'folder',
+  zoom_fit = 'maximize-02',
+  zoom_in = 'expand-06',
 
   // channel types
   channel_a = 'channel-android',

package/src/display/Button.ts

@@ -46,7 +46,7 @@ export class Button extends LitElement {
       }
 
       .secondary-button:hover .button-mask {
-        border: 1px solid var(--color-button-secondary);
+        border: 1px solid rgba(0, 0, 0, 0.15);
       }
 
       .button-mask:hover {
@@ -100,7 +100,7 @@ export class Button extends LitElement {
       }
 
       .secondary-button.active-button .button-mask {
-        border: none;
+        border: 1px solid transparent;
       }
 
       .button-container.secondary-button.active-button:focus .button-mask {

package/src/display/FloatingTab.ts

@@ -104,7 +104,7 @@ export class FloatingTab extends RapidElement {
     FloatingTab.updateAllPositions();
   }
 
-  private static updateAllPositions() {
+  public static updateAllPositions() {
     const sorted = [...FloatingTab.allTabs].sort((a, b) => a.order - b.order);
     sorted.forEach((tab, index) => {
       tab.top =

package/src/flow/CanvasMenu.ts

@@ -7,7 +7,7 @@ import { CustomEventType } from '../interfaces';
  * Event detail for canvas menu selection
  */
 export interface CanvasMenuSelection {
-  action: 'sticky' | 'action' | 'split';
+  action: 'sticky' | 'action' | 'split' | 'reflow';
   position: { x: number; y: number };
 }
 
@@ -90,6 +90,9 @@ export class CanvasMenu extends RapidElement {
   @property({ type: Boolean })
   public showStickyNote = true;
 
+  @property({ type: Boolean })
+  public showReflow = false;
+
   @state()
   private clickPosition = { x: 0, y: 0 };
 
@@ -127,12 +130,14 @@ export class CanvasMenu extends RapidElement {
     x: number,
     y: number,
     clickPosition: { x: number; y: number },
-    showStickyNote: boolean = true
+    showStickyNote: boolean = true,
+    showReflow: boolean = false
   ) {
     this.x = x;
     this.y = y;
     this.clickPosition = clickPosition;
     this.showStickyNote = showStickyNote;
+    this.showReflow = showReflow;
     this.open = true;
 
     // Adjust position after menu renders to ensure it fits on screen
@@ -180,7 +185,9 @@ export class CanvasMenu extends RapidElement {
     }
   }
 
-  private handleMenuItemClick(action: 'sticky' | 'action' | 'split') {
+  private handleMenuItemClick(
+    action: 'sticky' | 'action' | 'split' | 'reflow'
+  ) {
     this.fireCustomEvent(CustomEventType.Selection, {
       action,
       position: this.clickPosition
@@ -238,6 +245,24 @@ export class CanvasMenu extends RapidElement {
               </div>
             `
           : ''}
+        ${this.showReflow
+          ? html`
+              <div class="divider"></div>
+
+              <div
+                class="menu-item"
+                @click=${() => this.handleMenuItemClick('reflow')}
+              >
+                <temba-icon name="flow" size="1.25"></temba-icon>
+                <div class="menu-item-content">
+                  <div class="menu-item-title">Reflow</div>
+                  <div class="menu-item-description">
+                    Auto-arrange nodes in this flow
+                  </div>
+                </div>
+              </div>
+            `
+          : ''}
       </div>
     `;
   }

package/src/flow/CanvasNode.ts

@@ -6,6 +6,7 @@ import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
+import { isRightClick } from './utils';
 import { Plumber } from './Plumber';
 import { getStore } from '../store/Store';
 import { CustomEventType } from '../interfaces';
@@ -873,8 +874,8 @@ export class CanvasNode extends RapidElement {
     const actionElement = this.querySelector(`#${actionId}`) as HTMLElement;
 
     if (actionElement) {
-      const rect = actionElement.getBoundingClientRect();
-      this.draggedActionHeight = rect.height;
+      // Use offsetHeight (unaffected by ancestor CSS transforms like zoom)
+      this.draggedActionHeight = actionElement.offsetHeight;
     } else {
       // Fallback to a reasonable default
       this.draggedActionHeight = 60;
@@ -970,6 +971,8 @@ export class CanvasNode extends RapidElement {
   }
 
   private handleActionMouseDown(event: MouseEvent, action: Action): void {
+    if (isRightClick(event)) return;
+
     // Don't handle clicks on the remove button, drag handle, or when action is in removing state
     const target = event.target as HTMLElement;
     if (
@@ -1097,6 +1100,8 @@ export class CanvasNode extends RapidElement {
   }
 
   private handleNodeMouseDown(event: MouseEvent): void {
+    if (isRightClick(event)) return;
+
     // Don't handle clicks on the remove button, exits, drag handle, or when node is in removing state
     const target = event.target as HTMLElement;
     if (