From 7f585232f29232e357b88f1f3bd59bf295a7efc1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 31 Jan 2026 14:27:29 -0500
Subject: [PATCH 1/3] Reset seperator hover-state on Document "pointerout"
 (#648)

This issue (reported in #645) can be reproduced using the following:

```tsx
<Group>
  <Panel>
    <iframe className="w-full h-full" />
  </Panel>
  <Separator className="w-2 bg-slate-600 [&[data-separator='hover']]:bg-red-500" />
  <Panel />
</Group>
```
---
 integrations/tests/src/components/IFrame.tsx  |  9 ++++++
 .../tests/src/utils/serializer/decode.ts      | 13 ++++++++
 .../tests/src/utils/serializer/encode.ts      | 15 ++++++++++
 .../tests/src/utils/serializer/types.ts       |  7 +++++
 .../tests/tests/pointer-interactions.spec.tsx | 30 +++++++++++++++++++
 .../event-handlers/onDocumentPointerOut.ts    | 20 +++++++++++++
 lib/global/mountGroup.ts                      |  3 ++
 7 files changed, 97 insertions(+)
 create mode 100644 integrations/tests/src/components/IFrame.tsx
 create mode 100644 lib/global/event-handlers/onDocumentPointerOut.ts

diff --git a/integrations/tests/src/components/IFrame.tsx b/integrations/tests/src/components/IFrame.tsx
new file mode 100644
index 000000000..4aa4f9744
--- /dev/null
+++ b/integrations/tests/src/components/IFrame.tsx
@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from "react";
+
+export type IFrameProps = PropsWithChildren<{
+  className?: string | undefined;
+}>;
+
+export function IFrame({ className }: IFrameProps) {
+  return <iframe className={className} />;
+}
diff --git a/integrations/tests/src/utils/serializer/decode.ts b/integrations/tests/src/utils/serializer/decode.ts
index 8f6413710..7b24de032 100644
--- a/integrations/tests/src/utils/serializer/decode.ts
+++ b/integrations/tests/src/utils/serializer/decode.ts
@@ -17,12 +17,14 @@ import type {
   EncodedDisplayModeToggleElement,
   EncodedElement,
   EncodedGroupElement,
+  EncodedIFrameElement,
   EncodedPanelElement,
   EncodedPopupWindowElement,
   EncodedSeparatorElement,
   EncodedTextElement,
   TextProps
 } from "./types";
+import { IFrame } from "../../components/IFrame";
 
 type Config = {
   groupProps?: Partial<GroupProps>;
@@ -65,6 +67,10 @@ function decodeChildren(
         elements.push(decodeGroup(current, config));
         break;
       }
+      case "IFrame": {
+        elements.push(decodeIFrame(current));
+        break;
+      }
       case "Panel": {
         elements.push(decodePanel(current, config));
         break;
@@ -137,6 +143,13 @@ function decodeGroup(
   });
 }
 
+function decodeIFrame(json: EncodedIFrameElement): ReactElement<PanelProps> {
+  return createElement(IFrame, {
+    key: ++key,
+    ...json.props
+  });
+}
+
 function decodePanel(
   json: EncodedPanelElement,
   config: Config
diff --git a/integrations/tests/src/utils/serializer/encode.ts b/integrations/tests/src/utils/serializer/encode.ts
index a12f3c880..ca4fb2533 100644
--- a/integrations/tests/src/utils/serializer/encode.ts
+++ b/integrations/tests/src/utils/serializer/encode.ts
@@ -29,12 +29,14 @@ import type {
   EncodedDisplayModeToggleElement,
   EncodedElement,
   EncodedGroupElement,
+  EncodedIFrameElement,
   EncodedPanelElement,
   EncodedPopupWindowElement,
   EncodedSeparatorElement,
   EncodedTextElement,
   TextProps
 } from "./types";
+import { IFrame, type IFrameProps } from "../../components/IFrame";
 
 export function encode(element: ReactElement<unknown>) {
   const json = encodeChildren([element]);
@@ -72,6 +74,10 @@ function encodeChildren(children: ReactElement<unknown>[]): EncodedElement[] {
         elements.push(encodeGroup(current as ReactElement<GroupProps>));
         break;
       }
+      case IFrame: {
+        elements.push(encodeIFrame(current as ReactElement<IFrameProps>));
+        break;
+      }
       case Panel: {
         elements.push(encodePanel(current as ReactElement<PanelProps>));
         break;
@@ -163,6 +169,15 @@ function encodeGroup(element: ReactElement<GroupProps>): EncodedGroupElement {
   };
 }
 
+function encodeIFrame(
+  element: ReactElement<IFrameProps>
+): EncodedIFrameElement {
+  return {
+    props: element.props,
+    type: "IFrame"
+  };
+}
+
 function encodePanel(element: ReactElement<PanelProps>): EncodedPanelElement {
   const { children, onResize: __, ...props } = element.props;
 
diff --git a/integrations/tests/src/utils/serializer/types.ts b/integrations/tests/src/utils/serializer/types.ts
index 6b92b32f7..4d3c32bfb 100644
--- a/integrations/tests/src/utils/serializer/types.ts
+++ b/integrations/tests/src/utils/serializer/types.ts
@@ -7,6 +7,7 @@ import type { ContainerProps } from "../../../src/components/Container";
 import type { DisplayModeToggleProps } from "../../../src/components/DisplayModeToggle";
 import type { PopupWindowProps } from "../../../src/components/PopupWindow";
 import type { ClickableProps } from "../../../src/components/Clickable";
+import type { IFrameProps } from "../../components/IFrame";
 
 type EncodedElementWithChildren<Props extends object = object> = Omit<
   Props,
@@ -33,6 +34,11 @@ export interface EncodedGroupElement {
   type: "Group";
 }
 
+export interface EncodedIFrameElement {
+  props: IFrameProps;
+  type: "IFrame";
+}
+
 export interface EncodedPanelElement {
   props: EncodedElementWithChildren<PanelProps>;
   type: "Panel";
@@ -63,6 +69,7 @@ export type EncodedElement =
   | EncodedContainerElement
   | EncodedDisplayModeToggleElement
   | EncodedGroupElement
+  | EncodedIFrameElement
   | EncodedPanelElement
   | EncodedPopupWindowElement
   | EncodedSeparatorElement
diff --git a/integrations/tests/tests/pointer-interactions.spec.tsx b/integrations/tests/tests/pointer-interactions.spec.tsx
index ed8c7c678..2c612999b 100644
--- a/integrations/tests/tests/pointer-interactions.spec.tsx
+++ b/integrations/tests/tests/pointer-interactions.spec.tsx
@@ -2,6 +2,7 @@ import { expect, test } from "@playwright/test";
 import { Group, Panel, Separator } from "react-resizable-panels";
 import { Clickable } from "../src/components/Clickable";
 import { Container } from "../src/components/Container";
+import { IFrame } from "../src/components/IFrame";
 import { assertLayoutChangeCounts } from "../src/utils/assertLayoutChangeCounts";
 import { calculateHitArea } from "../src/utils/calculateHitArea";
 import { getCenterCoordinates } from "../src/utils/getCenterCoordinates";
@@ -532,6 +533,35 @@ test.describe("pointer interactions", () => {
           }
         });
       });
+
+      // See github.com/bvaughn/react-resizable-panels/issues/645
+      test("should update separator state when the cursor mouses over an iframe", async ({
+        page: mainPage
+      }) => {
+        const page = await goToUrl(
+          mainPage,
+          <Group className="gap-0!">
+            <Panel className="p-0! *:p-0!" id="left">
+              <IFrame className="w-full h-full" />
+            </Panel>
+            <Separator id="separator" />
+            <Panel className="p-0! *:p-0!" id="right" />
+          </Group>,
+          { usePopUpWindow }
+        );
+
+        const separator = page.getByTestId("separator");
+
+        const { x, y } = getCenterCoordinates((await separator.boundingBox())!);
+
+        await expect(separator).toHaveAttribute("data-separator", "inactive");
+
+        await page.mouse.move(x, y);
+        await expect(separator).toHaveAttribute("data-separator", "hover");
+
+        await page.mouse.move(x - 25, y);
+        await expect(separator).toHaveAttribute("data-separator", "inactive");
+      });
     });
   }
 });
diff --git a/lib/global/event-handlers/onDocumentPointerOut.ts b/lib/global/event-handlers/onDocumentPointerOut.ts
new file mode 100644
index 000000000..3d63d66c7
--- /dev/null
+++ b/lib/global/event-handlers/onDocumentPointerOut.ts
@@ -0,0 +1,20 @@
+import { read, update } from "../mutableState";
+
+export function onDocumentPointerOut(event: PointerEvent) {
+  // For some reason, "pointerout" events don't fire if the `relatedTarget` is an iframe
+  // This can leave the `data-separator` attribute in an invalid state ("hover") which in turn might break styles
+  // The easiest fix for this case is to reset the interaction state in this specific circumstance
+  // See issues/645
+  if (event.relatedTarget instanceof HTMLIFrameElement) {
+    const { interactionState } = read();
+    switch (interactionState.state) {
+      case "hover": {
+        update({
+          interactionState: {
+            state: "inactive"
+          }
+        });
+      }
+    }
+  }
+}
diff --git a/lib/global/mountGroup.ts b/lib/global/mountGroup.ts
index d16fb8075..dea067fa3 100644
--- a/lib/global/mountGroup.ts
+++ b/lib/global/mountGroup.ts
@@ -8,6 +8,7 @@ import { onDocumentKeyDown } from "./event-handlers/onDocumentKeyDown";
 import { onDocumentPointerDown } from "./event-handlers/onDocumentPointerDown";
 import { onDocumentPointerLeave } from "./event-handlers/onDocumentPointerLeave";
 import { onDocumentPointerMove } from "./event-handlers/onDocumentPointerMove";
+import { onDocumentPointerOut } from "./event-handlers/onDocumentPointerOut";
 import { onDocumentPointerUp } from "./event-handlers/onDocumentPointerUp";
 import { update, type SeparatorToPanelsMap } from "./mutableState";
 import { calculateDefaultLayout } from "./utils/calculateDefaultLayout";
@@ -175,6 +176,7 @@ export function mountGroup(group: RegisteredGroup) {
     ownerDocument.addEventListener("pointerdown", onDocumentPointerDown, true);
     ownerDocument.addEventListener("pointerleave", onDocumentPointerLeave);
     ownerDocument.addEventListener("pointermove", onDocumentPointerMove);
+    ownerDocument.addEventListener("pointerout", onDocumentPointerOut);
     ownerDocument.addEventListener("pointerup", onDocumentPointerUp, true);
   }
 
@@ -211,6 +213,7 @@ export function mountGroup(group: RegisteredGroup) {
       );
       ownerDocument.removeEventListener("pointerleave", onDocumentPointerLeave);
       ownerDocument.removeEventListener("pointermove", onDocumentPointerMove);
+      ownerDocument.removeEventListener("pointerout", onDocumentPointerOut);
       ownerDocument.removeEventListener("pointerup", onDocumentPointerUp, true);
     }
 

From 5948c2b2024d484b2f85f232740c5a06740d08a2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 31 Jan 2026 14:27:52 -0500
Subject: [PATCH 2/3] Update CHANGELOG with pending release changes

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b253330fe..1853a8047 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 - [646](https://github.com/bvaughn/react-resizable-panels/pull/646): Re-enable the collapsible `Panel` from 4.5.3 that was disabled in 4.5.6
+- [648](https://github.com/bvaughn/react-resizable-panels/pull/648): **Bugfix**: Reset `Separator` hover-state on `Document` "pointerout"
 
 ## 4.5.6
 

From db20c9be1ea11d88f005222a0150c135392c9392 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 31 Jan 2026 14:34:45 -0500
Subject: [PATCH 3/3] 4.5.6 -> 4.5.7

---
 CHANGELOG.md | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1853a8047..282fa8fca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Changelog
 
-## Unreleased
+## 4.5.7
 
 - [646](https://github.com/bvaughn/react-resizable-panels/pull/646): Re-enable the collapsible `Panel` from 4.5.3 that was disabled in 4.5.6
 - [648](https://github.com/bvaughn/react-resizable-panels/pull/648): **Bugfix**: Reset `Separator` hover-state on `Document` "pointerout"
diff --git a/package.json b/package.json
index ce4d8cee4..2922812be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.5.6",
+  "version": "4.5.7",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [