@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { act, render } from "../../test/render";
+import { useResizableWidth } from "./useResizableWidth";
+
+const STORAGE_KEY = "t3code:test:resizable-width";
+
+function Probe() {
+  const { width } = useResizableWidth({
+    storageKey: STORAGE_KEY,
+    defaultWidth: 400,
+    minWidth: 300,
+    maxWidth: 800,
+    edge: "left",
+  });
+  return <output>{width}</output>;
+}
+
+describe("useResizableWidth", () => {
+  it("follows a width another tab stores under the same key", async () => {
+    using _storage = { [Symbol.dispose]: () => localStorage.removeItem(STORAGE_KEY) };
+    await using screen = await render(<Probe />, {
+      // A bare hook probe; nothing here navigates.
+      router: false,
+    });
+    await expect.element(screen.getByText("400")).toBeInTheDocument();
+
+    // Another tab's write reaches this one only as a storage event.
+    await act(() => {
+      localStorage.setItem(STORAGE_KEY, "640");
+      window.dispatchEvent(new StorageEvent("storage", { key: STORAGE_KEY }));
+    });
+    await expect.element(screen.getByText("640")).toBeInTheDocument();
+  });
+});
@@ -1,7 +1,7 @@
 import * as Schema from "effect/Schema";
-import { type PointerEvent as ReactPointerEvent, useLayoutEffect, useState } from "react";
+import { type PointerEvent as ReactPointerEvent, useLayoutEffect } from "react";
 
-import { getLocalStorageItem, setLocalStorageItem } from "./useLocalStorage";
+import { useLocalStorage, writeLocalStorageValue } from "./useLocalStorage";
 import { useResizeDrag } from "./useResizeDrag";
 
 const WidthSchema = Schema.Finite;
@@ -38,22 +38,9 @@ export function useResizableWidth(options: UseResizableWidthOptions): {
     return Math.max(minWidth, Math.min(maxWidth, value));
   };
 
-  const readWidth = () => {
-    if (typeof window === "undefined") return defaultWidth;
-    try {
-      const stored = getLocalStorageItem(storageKey, WidthSchema);
-      return clamp(stored ?? defaultWidth);
-    } catch (error) {
-      console.error("Could not read persisted panel width.", error);
-      return defaultWidth;
-    }
-  };
-  const [widthState, setWidthState] = useState(() => ({ storageKey, width: readWidth() }));
-  if (widthState.storageKey !== storageKey) {
-    setWidthState({ storageKey, width: readWidth() });
-  }
-
-  const clampedWidth = clamp(widthState.width);
+  // Panels that share a key follow each other's drags, in this tab and in others.
+  const [storedWidth] = useLocalStorage(storageKey, defaultWidth, WidthSchema);
+  const clampedWidth = clamp(storedWidth);
 
   const drag = useResizeDrag<HTMLElement>((event) => {
     const host = event.currentTarget.parentElement;
@@ -72,12 +59,7 @@ export function useResizableWidth(options: UseResizableWidthOptions): {
         return nextWidth;
       },
       finish(finalWidth) {
-        setWidthState({ storageKey: startStorageKey, width: finalWidth });
-        try {
-          setLocalStorageItem(startStorageKey, finalWidth, WidthSchema);
-        } catch (error) {
-          console.error("Could not persist panel width.", error);
-        }
+        writeLocalStorageValue(startStorageKey, finalWidth, defaultWidth, WidthSchema);
       },
       cleanup(committed) {
         host?.style.removeProperty("transition-property");