fix(design-system): keep resizing when the cursor crosses an iframe

packages/@intlayer/design-system/src/api/pushDictionariesInBatches.test.ts

@@ -1,3 +1,11 @@
+// @vitest-environment node
+//
+// This suite loads esbuild (via the config bundler), whose startup invariant
+// requires TextEncoder / Uint8Array from a single realm. jsdom swaps those
+// globals for its own realm's versions, which makes esbuild fail to load
+// intermittently. The test asserts on request batching only and needs no DOM,
+// so run it in node.
+
 import type {
   PushDictionariesBody,
   PushDictionariesResult,

packages/@intlayer/design-system/src/components/HeightResizer/heightResizer.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { HeightResizer } from './index';
+
+afterEach(() => {
+  for (const iframe of Array.from(document.querySelectorAll('iframe'))) {
+    iframe.remove();
+  }
+});
+
+describe('HeightResizer', () => {
+  it('disables pointer events on iframes while dragging and restores them on release', () => {
+    // Same iframe-swallows-pointer-events issue as WithResizer (#524).
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+
+    render(
+      <HeightResizer initialHeight={200}>
+        <div>content</div>
+      </HeightResizer>
+    );
+
+    fireEvent.mouseDown(screen.getByRole('slider'), { clientY: 100 });
+    expect(iframe.style.pointerEvents).toBe('none');
+
+    fireEvent.mouseUp(window);
+    expect(iframe.style.pointerEvents).toBe('');
+  });
+
+  it('restores iframe pointer events when unmounted mid-drag', () => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+
+    const { unmount } = render(
+      <HeightResizer initialHeight={200}>
+        <div>content</div>
+      </HeightResizer>
+    );
+
+    fireEvent.mouseDown(screen.getByRole('slider'), { clientY: 100 });
+    expect(iframe.style.pointerEvents).toBe('none');
+
+    unmount();
+    expect(iframe.style.pointerEvents).toBe('');
+  });
+});

packages/@intlayer/design-system/src/components/HeightResizer/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useIframePointerEventsShield } from '@hooks/useIframePointerEventsShield';
 import { cn } from '@utils/cn';
 import type React from 'react';
 import {
@@ -136,6 +137,10 @@ export const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({
   const [isResizing, setIsResizing] = useState(false);
   const lastExpandedHeightRef = useRef(initialHeight);
 
+  // Shield against iframes swallowing pointer events while dragging (#524)
+  const { disableIframePointerEvents, restoreIframePointerEvents } =
+    useIframePointerEventsShield();
+
   /**
    * Handler to initiate the resizing process
    * Prevents default browser behavior and sets the resizing state
@@ -151,8 +156,9 @@ export const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({
       if (isDisabled) return;
       setIsResizing(true);
       mouseDownEvent.preventDefault();
+      disableIframePointerEvents();
     },
-    [isDisabled]
+    [isDisabled, disableIframePointerEvents]
   );
 
   /**
@@ -161,7 +167,8 @@ export const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({
    */
   const stopResizing = useCallback(() => {
     setIsResizing(false);
-  }, []);
+    restoreIframePointerEvents();
+  }, [restoreIframePointerEvents]);
 
   /**
    * Core resize logic that calculates new height based on cursor position
@@ -219,6 +226,13 @@ export const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({
     };
   }, [resize, stopResizing, isDisabled]);
 
+  // Unmount-only: release the iframe shield if the component unmounts mid-drag.
+  // (This must not live in the listener effect above — that effect re-runs
+  // when the drag starts, and its cleanup would restore the shield instantly.)
+  useEffect(() => {
+    return () => restoreIframePointerEvents();
+  }, [restoreIframePointerEvents]);
+
   useEffect(() => {
     if (height > minHeight) {
       lastExpandedHeightRef.current = height;

packages/@intlayer/design-system/src/components/WithResizer/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useIframePointerEventsShield } from '@hooks/useIframePointerEventsShield';
 import { cn } from '@utils/cn';
 import React, {
   type FC,
@@ -197,6 +198,10 @@ export const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({
     isHandleOnPhysicalLeft: false,
   });
 
+  // Shield against iframes swallowing pointer events while dragging (#524)
+  const { disableIframePointerEvents, restoreIframePointerEvents } =
+    useIframePointerEventsShield();
+
   /** Whether the handle renders on the physical left, given the text direction. */
   const getIsHandleOnPhysicalLeft = useCallback(() => {
     const container = containerRef.current;
@@ -243,11 +248,12 @@ export const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({
     setIsResizing(false);
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
+    restoreIframePointerEvents();
     window.removeEventListener('mousemove', resize);
     window.removeEventListener('mouseup', stopResizing);
     window.removeEventListener('touchmove', resize);
     window.removeEventListener('touchend', stopResizing);
-  }, [resize]);
+  }, [resize, restoreIframePointerEvents]);
 
   // Handler to start resizing
   const startResizing = useCallback(
@@ -283,23 +289,31 @@ export const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({
       setIsResizing(true);
       document.body.style.cursor = 'ew-resize';
       document.body.style.userSelect = 'none';
+      disableIframePointerEvents();
 
       window.addEventListener('mousemove', resize, { passive: true });
       window.addEventListener('mouseup', stopResizing);
       window.addEventListener('touchmove', resize, { passive: true });
       window.addEventListener('touchend', stopResizing);
     },
-    [isOpen, resize, stopResizing, getIsHandleOnPhysicalLeft]
+    [
+      isOpen,
+      resize,
+      stopResizing,
+      getIsHandleOnPhysicalLeft,
+      disableIframePointerEvents,
+    ]
   );
 
   useEffect(() => {
     return () => {
+      restoreIframePointerEvents();
       window.removeEventListener('mousemove', resize);
       window.removeEventListener('mouseup', stopResizing);
       window.removeEventListener('touchmove', resize);
       window.removeEventListener('touchend', stopResizing);
     };
-  }, [resize, stopResizing]);
+  }, [resize, stopResizing, restoreIframePointerEvents]);
 
   useEffect(() => {
     if (width > minWidth) {

packages/@intlayer/design-system/src/components/WithResizer/withResizer.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { WithResizer } from './index';
+
+const getHandle = (container: HTMLElement): HTMLElement => {
+  const slider = container.querySelector('[role="slider"]');
+  if (!slider?.lastElementChild) throw new Error('resize handle not found');
+  return slider.lastElementChild as HTMLElement;
+};
+
+afterEach(() => {
+  for (const iframe of Array.from(document.querySelectorAll('iframe'))) {
+    iframe.remove();
+  }
+});
+
+describe('WithResizer', () => {
+  it('disables pointer events on iframes while dragging and restores them on release', () => {
+    // Iframes swallow pointer events once the cursor crosses them, which used
+    // to freeze the drag and lose the release over the iframe (#524).
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    const styledIframe = document.createElement('iframe');
+    styledIframe.style.pointerEvents = 'auto';
+    document.body.appendChild(styledIframe);
+
+    const { container } = render(
+      <WithResizer initialWidth={300}>
+        <div>panel</div>
+      </WithResizer>
+    );
+
+    fireEvent.mouseDown(getHandle(container), { clientX: 300 });
+
+    expect(iframe.style.pointerEvents).toBe('none');
+    expect(styledIframe.style.pointerEvents).toBe('none');
+
+    fireEvent.mouseUp(window);
+
+    expect(iframe.style.pointerEvents).toBe('');
+    expect(styledIframe.style.pointerEvents).toBe('auto');
+  });
+
+  it('restores iframe pointer events when unmounted mid-drag', () => {
+    const iframe = document.createElement('iframe');
+    document.body.appendChild(iframe);
+
+    const { container, unmount } = render(
+      <WithResizer initialWidth={300}>
+        <div>panel</div>
+      </WithResizer>
+    );
+
+    fireEvent.mouseDown(getHandle(container), { clientX: 300 });
+    expect(iframe.style.pointerEvents).toBe('none');
+
+    unmount();
+    expect(iframe.style.pointerEvents).toBe('');
+  });
+});

packages/@intlayer/design-system/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './useDevice';
 export * from './useDragReorder';
 export * from './useGetElementById';
 export * from './useGetElementOrWindow';
+export * from './useIframePointerEventsShield';
 export * from './useHorizontalSwipe';
 export * from './useIsMounted';
 export * from './useItemSelector';

packages/@intlayer/design-system/src/hooks/useIframePointerEventsShield.ts

@@ -0,0 +1,59 @@
+import { useCallback, useRef } from 'react';
+
+/**
+ * Shield against iframes swallowing pointer events during drag interactions.
+ *
+ * While dragging (e.g. resizing a panel), once the cursor crosses an iframe,
+ * `mousemove` / `mouseup` are dispatched to the iframe's document instead of
+ * the parent window — so listeners attached to `window` stop firing, the drag
+ * freezes, and releasing the mouse over the iframe is never seen.
+ *
+ * Call `disableIframePointerEvents` when the interaction starts to set
+ * `pointer-events: none` on every iframe in the document (previous inline
+ * values are saved), and `restoreIframePointerEvents` when it ends — including
+ * on unmount mid-interaction — to put them back.
+ *
+ * @returns The `disableIframePointerEvents` / `restoreIframePointerEvents` callbacks.
+ *
+ * @example
+ * ```tsx
+ * const { disableIframePointerEvents, restoreIframePointerEvents } =
+ *   useIframePointerEventsShield();
+ *
+ * const startDragging = () => {
+ *   disableIframePointerEvents();
+ *   // attach window listeners…
+ * };
+ * const stopDragging = () => {
+ *   restoreIframePointerEvents();
+ *   // detach window listeners…
+ * };
+ * ```
+ */
+export const useIframePointerEventsShield = () => {
+  const savedPointerEventsRef = useRef<
+    Map<HTMLIFrameElement, string> | undefined
+  >(undefined);
+
+  /** Disable pointer events on all iframes so the drag keeps tracking over them. */
+  const disableIframePointerEvents = useCallback(() => {
+    const saved = new Map<HTMLIFrameElement, string>();
+    for (const iframe of Array.from(document.querySelectorAll('iframe'))) {
+      saved.set(iframe, iframe.style.pointerEvents);
+      iframe.style.pointerEvents = 'none';
+    }
+    savedPointerEventsRef.current = saved;
+  }, []);
+
+  /** Restore the pointer events saved when the interaction started. */
+  const restoreIframePointerEvents = useCallback(() => {
+    const saved = savedPointerEventsRef.current;
+    if (!saved) return;
+    for (const [iframe, pointerEvents] of saved) {
+      iframe.style.pointerEvents = pointerEvents;
+    }
+    savedPointerEventsRef.current = undefined;
+  }, []);
+
+  return { disableIframePointerEvents, restoreIframePointerEvents };
+};