Split pane

"use client";

import {
  Children,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type KeyboardEvent,
  type PointerEvent,
  type ReactNode,
} from "react";
import "./split-pane.css";

export type SplitPaneProps = Omit<ComponentProps<"div">, "children"> & {
  /** Names the first panel. The divider carries this name, as the window splitter pattern asks. */
  label: string;
  /** "horizontal" puts the panels side by side; "vertical" stacks them. */
  orientation?: "horizontal" | "vertical";
  /** Size of the first panel in percent, when you control it. */
  size?: number;
  /** Starting size of the first panel in percent. */
  defaultSize?: number;
  onSizeChange?: (size: number) => void;
  /** Smallest size of the first panel, in percent. */
  min?: number;
  /** Largest size of the first panel, in percent. */
  max?: number;
  /** Double click or Enter on the divider sends the first panel to min and back. */
  collapsible?: boolean;
  /** Exactly two children: the first panel and the second. */
  children: [ReactNode, ReactNode];
};

export function SplitPane({
  label,
  orientation = "horizontal",
  size,
  defaultSize = 50,
  onSizeChange,
  min = 10,
  max = 90,
  collapsible = false,
  className,
  style,
  children,
  ...rest
}: SplitPaneProps) {
  const id = useId();
  const root = useRef<HTMLDivElement>(null);
  const restore = useRef<number | null>(null);
  const grab = useRef(0);
  const [inner, setInner] = useState(defaultSize);
  const [dragging, setDragging] = useState(false);
  const clamp = (value: number) => Math.min(max, Math.max(min, value));
  const current = clamp(size ?? inner);
  const [first, second] = Children.toArray(children);
  const side = orientation === "horizontal";

  function resize(next: number) {
    const value = Math.round(clamp(next) * 10) / 10;
    if (value === current) return;
    if (size === undefined) setInner(value);
    onSizeChange?.(value);
  }

  function toggle() {
    if (!collapsible) return;
    if (current > min) {
      restore.current = current;
      resize(min);
    } else {
      resize(restore.current ?? Math.max(defaultSize, min + 1));
      restore.current = null;
    }
  }

  function fromPointer(event: PointerEvent<HTMLDivElement>) {
    const box = root.current?.getBoundingClientRect();
    if (!box) return;
    const at = (side ? event.clientX : event.clientY) - grab.current;
    const ratio = side ? (at - box.left) / box.width : (at - box.top) / box.height;
    resize(ratio * 100);
  }

  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
    if (event.button !== 0) return;
    event.preventDefault();
    // Remember where on the grip it was taken, so the line does not jump to the pointer.
    const line = event.currentTarget.getBoundingClientRect();
    grab.current = side ? event.clientX - line.left : event.clientY - line.top;
    event.currentTarget.focus();
    event.currentTarget.setPointerCapture(event.pointerId);
    setDragging(true);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    const step = event.shiftKey ? 10 : 2;
    const less = side ? "ArrowLeft" : "ArrowUp";
    const more = side ? "ArrowRight" : "ArrowDown";
    if (event.key === less) resize(current - step);
    else if (event.key === more) resize(current + step);
    else if (event.key === "Home") resize(min);
    else if (event.key === "End") resize(max);
    else if (event.key === "Enter" && collapsible) toggle();
    else return;
    event.preventDefault();
  }

  return (
    <div
      ref={root}
      {...rest}
      className={["eq-split-pane", className].filter(Boolean).join(" ")}
      data-orientation={orientation}
      data-dragging={dragging || undefined}
      style={{ "--_size": `${current}%`, ...style } as CSSProperties}
    >
      <div id={id} className="eq-split-pane-panel">
        {first}
      </div>
      <div
        role="separator"
        tabIndex={0}
        aria-label={label}
        aria-controls={id}
        aria-orientation={side ? "vertical" : "horizontal"}
        aria-valuenow={Math.round(current)}
        aria-valuemin={min}
        aria-valuemax={max}
        className="eq-split-pane-divider"
        onPointerDown={handlePointerDown}
        onPointerMove={(event) => {
          if (dragging) fromPointer(event);
        }}
        onLostPointerCapture={() => setDragging(false)}
        onDoubleClick={toggle}
        onKeyDown={handleKeyDown}
      />
      <div className="eq-split-pane-panel">{second}</div>
    </div>
  );
}