Function SplitPane

src/components/SplitPane.tsx:47–417

(props: SplitPaneProps)

 * ```
 */
export function SplitPane(props: SplitPaneProps) {
  const {
    direction = 'horizontal',
    resizable = true,
    snapPoints,
    snapTolerance = 10,
    step,
    onResizeStart,
    onResize,
    onResizeEnd,
    className,
    style,
    divider: CustomDivider,
    dividerStyle,
    dividerClassName,
    dividerSize = 1,
    children,
  } = props;

  const containerRef = useRef<HTMLDivElement>(null);
  const [containerSize, setContainerSize] = useState(0);
  const prevContainerSizeRef = useRef(0);

  // Extract pane configuration from children - memoized to avoid recreating on every render
  const paneConfigs = useMemo(() => {
    const paneElements = Children.toArray(children).filter(
      (child): child is ReactElement<PaneProps> =>
        typeof child === 'object' && child !== null && 'props' in child
    );

    return paneElements.map((pane) => ({
      props: pane.props,
      size: pane.props.size,
      defaultSize: pane.props.defaultSize,
      minSize: pane.props.minSize ?? 0,
      maxSize: pane.props.maxSize ?? Infinity,
    }));
  }, [children]);

  const paneCount = paneConfigs.length;
  const warnedRef = useRef(false);

  // Warn once if fewer than 2 panes
  if (paneCount < MIN_PANES && !warnedRef.current) {
    warnedRef.current = true;
    console.warn(
      `SplitPane requires at least ${MIN_PANES} Pane children. Received ${paneCount}.`
    );
  }

  // Calculate min/max sizes from pane configs
  const { minSizes, maxSizes } = useMemo(() => {
    if (containerSize === 0) {
      return {
        minSizes: new Array(paneCount).fill(0),
        maxSizes: new Array(paneCount).fill(Infinity),
      };
    }