fix(panel): ignore handle clicks and flag pane value mistakes

A press on the resize handle that never moved still committed the
rendered width on release. When the container had clamped a stored
width, that click silently overwrote the user's choice. When the stored
width equalled the default, the click reset it. The pointer now has to
travel 4px before the press counts as a drag, and only a drag commits.

In development, PanelContent now logs a console error when two panes
share a value or when its value names no pane. Each pane registers its
value from an effect, so this check also catches a missing value
without keepMounted, where panes that are not shown never reach the DOM.

Adds tests for both, and for the right-to-left mirroring of keys and
drags, which had none.

Author: pratikbuilds

src/hooks/use-resizable.test.ts

@@ -61,6 +61,7 @@ type Mounted = {
   readonly handle: HTMLElement;
   readonly changes: (number | null)[];
   press(key: string, init?: KeyboardEventInit): void;
+  pointer(type: string, clientX: number): void;
   rerender(options?: Partial<UseResizableOptions>): void;
   unmount(): void;
 };
@@ -71,7 +72,10 @@ function find(container: HTMLElement, selector: string): HTMLElement {
   return element;
 }
 
-function mount(options: Partial<UseResizableOptions> = {}): Mounted {
+function mount(
+  options: Partial<UseResizableOptions> = {},
+  dir?: "rtl",
+): Mounted {
   const changes: (number | null)[] = [];
   const container = document.createElement("div");
   document.body.appendChild(container);
@@ -89,7 +93,11 @@ function mount(options: Partial<UseResizableOptions> = {}): Mounted {
       { "data-row": "" },
       createElement(
         "aside",
-        { ref: resizable.panelRef },
+        {
+          ref: resizable.panelRef,
+          // happy-dom does not derive `direction` from a `dir` attribute.
+          style: dir === undefined ? undefined : { direction: dir },
+        },
         createElement("div", {
           "data-handle": "",
           "aria-label": "Resize",
@@ -106,6 +114,10 @@ function mount(options: Partial<UseResizableOptions> = {}): Mounted {
   });
   render(options);
   const handle = find(container, "[data-handle]");
+  // happy-dom has no pointer capture; the hook only needs it not to throw.
+  handle.setPointerCapture = () => {};
+  handle.releasePointerCapture = () => {};
+  handle.hasPointerCapture = () => false;
   return {
     panel: find(container, "aside"),
     handle,
@@ -117,6 +129,19 @@ function mount(options: Partial<UseResizableOptions> = {}): Mounted {
         );
       });
     },
+    pointer(type, clientX) {
+      act(() => {
+        handle.dispatchEvent(
+          new PointerEvent(type, {
+            bubbles: true,
+            button: 0,
+            isPrimary: true,
+            pointerId: 1,
+            clientX,
+          }),
+        );
+      });
+    },
     rerender(next = options) {
       render(next);
     },
@@ -243,4 +268,48 @@ describe("useResizable", () => {
     expect(mounted.changes).toEqual([]);
     mounted.unmount();
   });
+
+  test("a drag commits once on release, from where the pointer stopped", () => {
+    const mounted = mount();
+    mounted.pointer("pointerdown", 500);
+    mounted.pointer("pointermove", 450);
+    mounted.pointer("pointermove", 400);
+    expect(mounted.changes).toEqual([]);
+    mounted.pointer("pointerup", 400);
+    expect(mounted.changes).toEqual([744]);
+    mounted.unmount();
+  });
+
+  test("a press that never moves past the drag threshold commits nothing", () => {
+    // The stored 900 renders clamped to 560: a commit would overwrite it.
+    rowWidth = 1000;
+    const clamped = mount({ defaultWidth: 900 });
+    expect(shownWidth(clamped)).toBe(560);
+    clamped.pointer("pointerdown", 500);
+    clamped.pointer("pointermove", 498);
+    clamped.pointer("pointerup", 498);
+    expect(clamped.changes).toEqual([]);
+    clamped.unmount();
+
+    // A stored width equal to the default: a commit would reset it.
+    rowWidth = 1400;
+    const atDefault = mount({ defaultWidth: 644 });
+    atDefault.pointer("pointerdown", 500);
+    atDefault.pointer("pointerup", 500);
+    expect(atDefault.changes).toEqual([]);
+    atDefault.unmount();
+  });
+
+  test("mirrors keys and drags in right-to-left text", () => {
+    const mounted = mount({}, "rtl");
+    mounted.press("ArrowRight");
+    expect(mounted.changes).toEqual([660]);
+    mounted.press("ArrowLeft");
+    expect(mounted.changes).toEqual([660, null]);
+    mounted.pointer("pointerdown", 500);
+    mounted.pointer("pointermove", 600);
+    mounted.pointer("pointerup", 600);
+    expect(mounted.changes).toEqual([660, null, 744]);
+    mounted.unmount();
+  });
 });

src/hooks/use-resizable.ts

@@ -17,6 +17,8 @@ const KEY_STEP_PX = 16;
 const LARGE_STEP_FACTOR = 4;
 /** A drag ending this close to the default width lands on the default. */
 const SNAP_PX = 12;
+/** How far the pointer travels before a press on the handle becomes a drag. */
+const DRAG_THRESHOLD_PX = 4;
 
 export type UseResizableOptions = {
   /**
@@ -114,8 +116,9 @@ function growDirection(element: HTMLElement): 1 | -1 {
  * A pointer drag writes the variable straight to the element each frame and
  * updates the handle's ARIA value by hand, so nothing re-renders until
  * release, when the width is committed once (snapping to the default when
- * close). Like a controlled input, a parent that ignores `onWidthChange`
- * keeps its width: the drag's override is dropped before the commit.
+ * close). A press that never moves is a click and commits nothing. Like a
+ * controlled input, a parent that ignores `onWidthChange` keeps its width:
+ * the drag's override is dropped before the commit.
  *
  * Keys on the handle: Left/Right arrows step (mirrored in right-to-left
  * text), Shift for bigger steps, Home and End jump to the limits, Enter
@@ -239,13 +242,19 @@ export function useResizable(options: UseResizableOptions): UseResizableResult {
     const previousUserSelect = root.style.userSelect;
     let latest = startWidth;
     let frame = 0;
+    // A press that never travels is a click (focus, or half a double-click),
+    // not a resize: it commits nothing.
+    let moved = false;
 
     draggingRef.current = true;
     handle.dataset["dragging"] = "true";
     root.style.cursor = "col-resize";
     root.style.userSelect = "none";
 
     const move = (moveEvent: PointerEvent) => {
+      if (!moved && Math.abs(moveEvent.clientX - startX) < DRAG_THRESHOLD_PX)
+        return;
+      moved = true;
       let next = clamp(
         startWidth + direction * (startX - moveEvent.clientX),
         min,
@@ -280,7 +289,7 @@ export function useResizable(options: UseResizableOptions): UseResizableResult {
 
     function end() {
       stop();
-      commit(latest);
+      if (moved) commit(latest);
     }
 
     handle.addEventListener("pointermove", move);

src/ui/panel.test.tsx

@@ -217,4 +217,48 @@ describe("Panel", () => {
       console.error = original;
     }
   });
+
+  test("in development, pane values that cannot show one pane log an error", () => {
+    const errors: unknown[][] = [];
+    const original = console.error;
+    console.error = (...args: unknown[]) => errors.push(args);
+    try {
+      const duplicate = mount(
+        <PanelContent value="a">
+          <PanelPane value="a">first</PanelPane>
+          <PanelPane value="a">second</PanelPane>
+        </PanelContent>,
+      );
+      duplicate.unmount();
+      expect(errors).toEqual([
+        ["PanelContent: two PanelPanes share the value `a`."],
+      ]);
+
+      errors.length = 0;
+      const missing = mount(
+        <PanelContent value="missing">
+          <PanelPane value="a">first</PanelPane>
+        </PanelContent>,
+      );
+      missing.unmount();
+      expect(errors).toEqual([
+        [
+          "PanelContent: `value` names none of its panes, so the panel body is empty.",
+        ],
+      ]);
+
+      errors.length = 0;
+      const fine = mount(
+        <PanelContent value="b" keepMounted>
+          <PanelPane value="a">first</PanelPane>
+          <PanelPane value="b">second</PanelPane>
+        </PanelContent>,
+      );
+      fine.render(<PanelContent value="b" />);
+      fine.unmount();
+      expect(errors).toEqual([]);
+    } finally {
+      console.error = original;
+    }
+  });
 });

src/ui/panel.tsx

@@ -5,6 +5,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useId,
   useLayoutEffect,
   useRef,
@@ -19,6 +20,9 @@ import { inertSiblings } from "../lib/inert-siblings.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 
+const isProduction =
+  typeof process !== "undefined" && process.env?.NODE_ENV === "production";
+
 const DEFAULT_MIN_WIDTH_PX = 320;
 const DEFAULT_MAIN_MIN_WIDTH_PX = 440;
 
@@ -38,6 +42,8 @@ function usePanelContext(part: string): PanelContextValue {
 type PanelPanesContextValue = {
   readonly value: string;
   readonly keepMounted: boolean;
+  /** Development only: a pane reports its value; returns its removal. */
+  readonly register: (value: string) => () => void;
 };
 
 const PanelPanesContext = createContext<PanelPanesContextValue | null>(null);
@@ -305,8 +311,36 @@ export function PanelContent({
   className,
   ...props
 }: PanelContentProps) {
+  // Every mounted pane's value, kept in development to catch host mistakes:
+  // panes report from effects, which run before this component's own.
+  const registeredRef = useRef<string[]>([]);
+  const register = useCallback((paneValue: string) => {
+    const registered = registeredRef.current;
+    registered.push(paneValue);
+    return () => {
+      registered.splice(registered.indexOf(paneValue), 1);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isProduction) return;
+    const registered = registeredRef.current;
+    if (registered.length === 0) return;
+    const duplicate = registered.find(
+      (paneValue, index) => registered.indexOf(paneValue) !== index,
+    );
+    if (duplicate !== undefined)
+      console.error(
+        `PanelContent: two PanelPanes share the value \`${duplicate}\`.`,
+      );
+    if (!registered.includes(value))
+      console.error(
+        "PanelContent: `value` names none of its panes, so the panel body is empty.",
+      );
+  });
+
   return (
-    <PanelPanesContext.Provider value={{ value, keepMounted }}>
+    <PanelPanesContext.Provider value={{ value, keepMounted, register }}>
       <div
         data-slot="panel-content"
         className={cn("grid min-h-0 flex-1 grid-cols-1 grid-rows-1", className)}
@@ -330,6 +364,11 @@ export function PanelPane({ value, className, ...props }: PanelPaneProps) {
   const context = useContext(PanelPanesContext);
   if (context === null)
     throw new Error("PanelPane must be inside PanelContent.");
+  const { register } = context;
+  useEffect(
+    () => (isProduction ? undefined : register(value)),
+    [register, value],
+  );
   const shown = context.value === value;
   if (!shown && !context.keepMounted) return null;
   return (