@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/layout/resizable-panels/index.js

@@ -0,0 +1,224 @@
+"use client";
+import { getPanelPairBounds, normalizePanelSizes, resizePanelPair } from "./resizable-panels.utils.js";
+import "./resizable-panels.css";
+import { cn } from "@puzzle-ui/core";
+import { Children, cloneElement, isValidElement, useId, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/resizable-panels/index.tsx
+const isResizablePanelElement = (child) => isValidElement(child) && child.type === ResizablePanel;
+const isResizableHandleElement = (child) => isValidElement(child) && child.type === ResizableHandle;
+const parsePixels = (value) => Number.parseFloat(value ?? "") || 0;
+const getAvailableSize = (group, orientation) => {
+	const computedStyle = group.ownerDocument.defaultView?.getComputedStyle(group);
+	const isHorizontal = orientation === "horizontal";
+	const totalSize = isHorizontal ? group.clientWidth : group.clientHeight;
+	const paddingSize = computedStyle ? isHorizontal ? parsePixels(computedStyle.paddingLeft) + parsePixels(computedStyle.paddingRight) : parsePixels(computedStyle.paddingTop) + parsePixels(computedStyle.paddingBottom) : 0;
+	const handleSize = Array.from(group.children).reduce((total, child) => {
+		const element = child;
+		if (!element.hasAttribute("data-puzzle-resizable-handle")) return total;
+		const rect = element.getBoundingClientRect();
+		return total + (isHorizontal ? rect.width : rect.height);
+	}, 0);
+	return Math.max(0, totalSize - paddingSize - handleSize);
+};
+const getResizeDirection = (element, orientation) => {
+	if (orientation !== "horizontal") return 1;
+	return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? -1 : 1;
+};
+const getPointerCoordinate = (event, orientation) => orientation === "horizontal" ? event.clientX : event.clientY;
+const ResizablePanel = ({ id, minSize = 0, maxSize = 100, panelIndex = 0, panelSize = 1, panelId, className, style, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	id: panelId ?? id,
+	className: cn("puzzle-resizable-panels__panel", className),
+	style: {
+		...style,
+		flex: `${panelSize} 1 0%`
+	},
+	"data-panel-index": panelIndex,
+	"data-panel-size": panelSize,
+	"data-panel-min-size": minSize,
+	"data-panel-max-size": maxSize
+});
+const ResizableHandle = ({ withGrip = false, disabled = false, handleIndex = -1, orientation = "horizontal", value, minValue, maxValue, panelIds, inheritedDisabled = false, onResizeStart, onResizeMove, onResizeEnd, onResizeKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, className, children, tabIndex, "aria-label": ariaLabel, ...props }) => {
+	const isDisabled = disabled || inheritedDisabled;
+	const handlePointerDown = (event) => {
+		onPointerDown?.(event);
+		if (!event.defaultPrevented && !isDisabled) onResizeStart?.(event, handleIndex);
+	};
+	const handlePointerMove = (event) => {
+		onPointerMove?.(event);
+		if (!event.defaultPrevented && !isDisabled) onResizeMove?.(event, handleIndex);
+	};
+	const handlePointerUp = (event) => {
+		onResizeEnd?.(event, handleIndex);
+		onPointerUp?.(event);
+	};
+	const handlePointerCancel = (event) => {
+		onResizeEnd?.(event, handleIndex);
+		onPointerCancel?.(event);
+	};
+	const handleLostPointerCapture = (event) => {
+		onResizeEnd?.(event, handleIndex);
+		onLostPointerCapture?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!event.defaultPrevented && !isDisabled) onResizeKeyDown?.(event, handleIndex);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("puzzle-resizable-panels__handle", className),
+		role: "separator",
+		tabIndex: isDisabled ? -1 : tabIndex ?? 0,
+		"aria-label": ariaLabel ?? "Resize panels",
+		"aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal",
+		"aria-controls": panelIds?.join(" "),
+		"aria-valuenow": value,
+		"aria-valuemin": minValue,
+		"aria-valuemax": maxValue,
+		"aria-valuetext": value === void 0 ? void 0 : `${Math.round(value * 100) / 100}%`,
+		"aria-disabled": isDisabled || void 0,
+		"data-puzzle-resizable-handle": "",
+		"data-orientation": orientation,
+		"data-disabled": isDisabled ? "true" : void 0,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerCancel,
+		onLostPointerCapture: handleLostPointerCapture,
+		onKeyDown: handleKeyDown,
+		children: withGrip ? /* @__PURE__ */ jsx("span", {
+			className: "puzzle-resizable-panels__handle-grip",
+			"aria-hidden": "true"
+		}) : children
+	});
+};
+const ResizablePanelsRoot = ({ children, orientation = "horizontal", sizes, defaultSizes, onSizesChange, disabled = false, keyboardStep = 1, id, role, className, style, ref: forwardedRef, ...rootProps }) => {
+	const generatedId = useId();
+	const groupId = id ?? `puzzle-resizable-panels-${generatedId}`;
+	if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) throw new RangeError("keyboardStep must be a positive finite number.");
+	const childrenArray = Children.toArray(children);
+	if (!(childrenArray.length >= 3 && childrenArray.length % 2 === 1 && childrenArray.every((child, index) => index % 2 === 0 ? isResizablePanelElement(child) : isResizableHandleElement(child)))) throw new Error("ResizablePanels requires alternating Panel and Handle children, starting and ending with a Panel. At least two panels are required.");
+	const panelElements = childrenArray.filter(isResizablePanelElement);
+	const panelCount = panelElements.length;
+	const panelConstraints = panelElements.map((panel) => ({
+		minSize: panel.props.minSize,
+		maxSize: panel.props.maxSize
+	}));
+	const panelIds = panelElements.map((panel, index) => panel.props.id ?? `${groupId}-panel-${index}`);
+	if (new Set(panelIds).size !== panelIds.length) throw new Error("ResizablePanels requires unique panel IDs.");
+	const [uncontrolledSizes, setUncontrolledSizes] = useState(() => normalizePanelSizes(sizes === void 0 ? defaultSizes : void 0, panelConstraints));
+	const layoutInput = sizes ?? (uncontrolledSizes.length === panelCount ? uncontrolledSizes : void 0);
+	const currentSizes = normalizePanelSizes(layoutInput, panelConstraints);
+	const [isResizing, setIsResizing] = useState(false);
+	const groupRef = useRef(null);
+	const pointerDragRef = useRef(null);
+	const updateSizes = (nextSizes) => {
+		const normalized = normalizePanelSizes(nextSizes, panelConstraints);
+		if (!normalized.some((size, index) => Math.abs(size - currentSizes[index]) > 1e-6)) return;
+		if (sizes === void 0) setUncontrolledSizes(normalized);
+		onSizesChange?.(normalized);
+	};
+	const handlePointerDown = (event, handleIndex) => {
+		const group = groupRef.current;
+		if (!group || disabled) return;
+		if (event.button !== 0 && event.pointerType !== "touch" && event.pointerType !== "pen") return;
+		const availableSize = getAvailableSize(group, orientation);
+		if (availableSize <= 0) return;
+		pointerDragRef.current = {
+			handleIndex,
+			pointerId: event.pointerId,
+			startCoordinate: getPointerCoordinate(event, orientation),
+			availableSize,
+			direction: getResizeDirection(group, orientation),
+			sizes: [...currentSizes]
+		};
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		event.preventDefault();
+		setIsResizing(true);
+	};
+	const handlePointerMove = (event, handleIndex) => {
+		const drag = pointerDragRef.current;
+		if (!drag || drag.pointerId !== event.pointerId || drag.handleIndex !== handleIndex) return;
+		const delta = (getPointerCoordinate(event, orientation) - drag.startCoordinate) / drag.availableSize * 100 * drag.direction;
+		const nextSizes = resizePanelPair(drag.sizes, panelConstraints, handleIndex, delta);
+		event.preventDefault();
+		updateSizes(nextSizes);
+	};
+	const handlePointerEnd = (event, handleIndex) => {
+		const drag = pointerDragRef.current;
+		if (!drag || drag.pointerId !== event.pointerId || drag.handleIndex !== handleIndex) return;
+		pointerDragRef.current = null;
+		setIsResizing(false);
+	};
+	const handleKeyDown = (event, handleIndex) => {
+		if (disabled) return;
+		const currentSize = currentSizes[handleIndex];
+		const bounds = getPanelPairBounds(currentSizes, panelConstraints, handleIndex);
+		const group = groupRef.current;
+		const direction = group ? getResizeDirection(group, orientation) : 1;
+		const step = keyboardStep * (event.shiftKey ? 10 : 1);
+		let nextSize;
+		if (event.key === "Home") nextSize = bounds.minSize;
+		else if (event.key === "End") nextSize = bounds.maxSize;
+		else if (orientation === "horizontal") {
+			if (event.key === "ArrowRight") nextSize = currentSize + step * direction;
+			else if (event.key === "ArrowLeft") nextSize = currentSize - step * direction;
+		} else if (event.key === "ArrowDown") nextSize = currentSize + step;
+		else if (event.key === "ArrowUp") nextSize = currentSize - step;
+		if (nextSize === void 0) return;
+		event.preventDefault();
+		updateSizes(resizePanelPair(currentSizes, panelConstraints, handleIndex, nextSize - currentSize));
+	};
+	let panelIndex = 0;
+	const enhancedChildren = childrenArray.map((child) => {
+		if (isResizablePanelElement(child)) {
+			const index = panelIndex++;
+			return cloneElement(child, {
+				panelIndex: index,
+				panelSize: currentSizes[index],
+				panelId: panelIds[index]
+			});
+		}
+		const handleIndex = panelIndex - 1;
+		const bounds = getPanelPairBounds(currentSizes, panelConstraints, handleIndex);
+		return cloneElement(child, {
+			handleIndex,
+			orientation,
+			value: currentSizes[handleIndex],
+			minValue: bounds.minSize,
+			maxValue: bounds.maxSize,
+			panelIds: [panelIds[handleIndex], panelIds[handleIndex + 1]],
+			inheritedDisabled: disabled,
+			onResizeStart: handlePointerDown,
+			onResizeMove: handlePointerMove,
+			onResizeEnd: handlePointerEnd,
+			onResizeKeyDown: handleKeyDown
+		});
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...rootProps,
+		ref: (node) => {
+			groupRef.current = node;
+			if (typeof forwardedRef === "function") forwardedRef(node);
+			else if (forwardedRef) forwardedRef.current = node;
+		},
+		id: groupId,
+		role: role ?? "group",
+		className: cn("puzzle-resizable-panels", className),
+		style,
+		"data-orientation": orientation,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-resizing": isResizing ? "true" : void 0,
+		children: enhancedChildren
+	});
+};
+const ResizablePanels = Object.assign(ResizablePanelsRoot, {
+	Panel: ResizablePanel,
+	Handle: ResizableHandle
+});
+export { ResizableHandle, ResizablePanel, ResizablePanels };
+
+//# sourceMappingURL=index.js.map

package/dist/components/layout/resizable-panels/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/layout/resizable-panels/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  getPanelPairBounds,\n  normalizePanelSizes,\n  resizePanelPair,\n  type PanelSizeConstraint,\n} from \"./resizable-panels.utils\";\n\nimport \"./resizable-panels.css\";\n\ntype ResizablePanelsOrientation = \"horizontal\" | \"vertical\";\n\ntype ResizablePanelsProps = Omit<ComponentPropsWithRef<\"div\">, \"children\"> & {\n  /** Layout direction. Defaults to horizontal. */\n  orientation?: ResizablePanelsOrientation;\n\n  /** Controlled panel sizes, expressed as percentages. */\n  sizes?: readonly number[];\n\n  /** Initial panel sizes for uncontrolled usage. */\n  defaultSizes?: readonly number[];\n\n  /** Called whenever the panel layout changes. */\n  onSizesChange?: (sizes: number[]) => void;\n\n  /** Disables all resizing interactions. */\n  disabled?: boolean;\n\n  /** Percentage change per keyboard interaction. Defaults to 1. */\n  keyboardStep?: number;\n\n  /** Panels and handles that make up the group. */\n  children: ReactNode;\n};\n\ntype ResizablePanelProps = ComponentPropsWithRef<\"div\"> & {\n  /** Minimum panel size in percentages. Defaults to 0. */\n  minSize?: number;\n\n  /** Maximum panel size in percentages. Defaults to 100. */\n  maxSize?: number;\n};\n\ntype ResizableHandleProps = ComponentPropsWithRef<\"div\"> & {\n  /** Renders a visible grip inside the resize handle. */\n  withGrip?: boolean;\n\n  /** Disables resizing through this handle. */\n  disabled?: boolean;\n};\n\ntype ResizePointerHandler = (\n  event: ReactPointerEvent<HTMLDivElement>,\n  handleIndex: number,\n) => void;\n\ntype ResizeKeyboardHandler = (\n  event: ReactKeyboardEvent<HTMLDivElement>,\n  handleIndex: number,\n) => void;\n\ntype InternalResizablePanelProps = {\n  panelIndex?: number;\n  panelSize?: number;\n  panelId?: string;\n};\n\ntype InternalResizableHandleProps = {\n  handleIndex?: number;\n  orientation?: ResizablePanelsOrientation;\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  panelIds?: [string, string];\n  inheritedDisabled?: boolean;\n\n  onResizeStart?: ResizePointerHandler;\n  onResizeMove?: ResizePointerHandler;\n  onResizeEnd?: ResizePointerHandler;\n  onResizeKeyDown?: ResizeKeyboardHandler;\n};\n\ntype PointerDragState = {\n  handleIndex: number;\n  pointerId: number;\n  startCoordinate: number;\n  availableSize: number;\n  direction: number;\n  sizes: number[];\n};\n\nconst isResizablePanelElement = (\n  child: ReactNode,\n): child is ReactElement<ResizablePanelProps> =>\n  isValidElement(child) && child.type === ResizablePanel;\n\nconst isResizableHandleElement = (\n  child: ReactNode,\n): child is ReactElement<ResizableHandleProps> =>\n  isValidElement(child) && child.type === ResizableHandle;\n\nconst parsePixels = (value: string | undefined) =>\n  Number.parseFloat(value ?? \"\") || 0;\n\nconst getAvailableSize = (\n  group: HTMLDivElement,\n  orientation: ResizablePanelsOrientation,\n) => {\n  const computedStyle =\n    group.ownerDocument.defaultView?.getComputedStyle(group);\n\n  const isHorizontal = orientation === \"horizontal\";\n\n  const totalSize = isHorizontal ? group.clientWidth : group.clientHeight;\n\n  const paddingSize = computedStyle\n    ? isHorizontal\n      ? parsePixels(computedStyle.paddingLeft) +\n        parsePixels(computedStyle.paddingRight)\n      : parsePixels(computedStyle.paddingTop) +\n        parsePixels(computedStyle.paddingBottom)\n    : 0;\n\n  const handleSize = Array.from(group.children).reduce((total, child) => {\n    const element = child as HTMLElement;\n\n    if (!element.hasAttribute(\"data-puzzle-resizable-handle\")) {\n      return total;\n    }\n\n    const rect = element.getBoundingClientRect();\n\n    return total + (isHorizontal ? rect.width : rect.height);\n  }, 0);\n\n  return Math.max(0, totalSize - paddingSize - handleSize);\n};\n\nconst getResizeDirection = (\n  element: HTMLElement,\n  orientation: ResizablePanelsOrientation,\n) => {\n  if (orientation !== \"horizontal\") {\n    return 1;\n  }\n\n  const direction =\n    element.ownerDocument.defaultView?.getComputedStyle(element).direction;\n\n  return direction === \"rtl\" ? -1 : 1;\n};\n\nconst getPointerCoordinate = (\n  event: ReactPointerEvent<HTMLDivElement>,\n  orientation: ResizablePanelsOrientation,\n) => (orientation === \"horizontal\" ? event.clientX : event.clientY);\n\nconst ResizablePanel = ({\n  id,\n  minSize = 0,\n  maxSize = 100,\n  panelIndex = 0,\n  panelSize = 1,\n  panelId,\n  className,\n  style,\n  ...props\n}: ResizablePanelProps & InternalResizablePanelProps) => (\n  <div\n    {...props}\n    id={panelId ?? id}\n    className={cn(\"puzzle-resizable-panels__panel\", className)}\n    style={{\n      ...style,\n      flex: `${panelSize} 1 0%`,\n    }}\n    data-panel-index={panelIndex}\n    data-panel-size={panelSize}\n    data-panel-min-size={minSize}\n    data-panel-max-size={maxSize}\n  />\n);\n\nconst ResizableHandle = ({\n  withGrip = false,\n  disabled = false,\n  handleIndex = -1,\n  orientation = \"horizontal\",\n  value,\n  minValue,\n  maxValue,\n  panelIds,\n  inheritedDisabled = false,\n  onResizeStart,\n  onResizeMove,\n  onResizeEnd,\n  onResizeKeyDown,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  onPointerCancel,\n  onLostPointerCapture,\n  onKeyDown,\n  className,\n  children,\n  tabIndex,\n  \"aria-label\": ariaLabel,\n  ...props\n}: ResizableHandleProps & InternalResizableHandleProps) => {\n  const isDisabled = disabled || inheritedDisabled;\n\n  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onPointerDown?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeStart?.(event, handleIndex);\n    }\n  };\n\n  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onPointerMove?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeMove?.(event, handleIndex);\n    }\n  };\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onResizeEnd?.(event, handleIndex);\n    onPointerUp?.(event);\n  };\n\n  const handlePointerCancel = (event: ReactPointerEvent<HTMLDivElement>) => {\n    onResizeEnd?.(event, handleIndex);\n    onPointerCancel?.(event);\n  };\n\n  const handleLostPointerCapture = (\n    event: ReactPointerEvent<HTMLDivElement>,\n  ) => {\n    onResizeEnd?.(event, handleIndex);\n    onLostPointerCapture?.(event);\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.defaultPrevented && !isDisabled) {\n      onResizeKeyDown?.(event, handleIndex);\n    }\n  };\n\n  return (\n    <div\n      {...props}\n      className={cn(\"puzzle-resizable-panels__handle\", className)}\n      role=\"separator\"\n      tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}\n      aria-label={ariaLabel ?? \"Resize panels\"}\n      aria-orientation={\n        orientation === \"horizontal\" ? \"vertical\" : \"horizontal\"\n      }\n      aria-controls={panelIds?.join(\" \")}\n      aria-valuenow={value}\n      aria-valuemin={minValue}\n      aria-valuemax={maxValue}\n      aria-valuetext={\n        value === undefined ? undefined : `${Math.round(value * 100) / 100}%`\n      }\n      aria-disabled={isDisabled || undefined}\n      data-puzzle-resizable-handle=\"\"\n      data-orientation={orientation}\n      data-disabled={isDisabled ? \"true\" : undefined}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerCancel}\n      onLostPointerCapture={handleLostPointerCapture}\n      onKeyDown={handleKeyDown}\n    >\n      {withGrip ? (\n        <span\n          className=\"puzzle-resizable-panels__handle-grip\"\n          aria-hidden=\"true\"\n        />\n      ) : (\n        children\n      )}\n    </div>\n  );\n};\n\nconst ResizablePanelsRoot = ({\n  children,\n  orientation = \"horizontal\",\n  sizes,\n  defaultSizes,\n  onSizesChange,\n  disabled = false,\n  keyboardStep = 1,\n  id,\n  role,\n  className,\n  style,\n  ref: forwardedRef,\n  ...rootProps\n}: ResizablePanelsProps) => {\n  const generatedId = useId();\n\n  const groupId = id ?? `puzzle-resizable-panels-${generatedId}`;\n\n  if (!Number.isFinite(keyboardStep) || keyboardStep <= 0) {\n    throw new RangeError(\"keyboardStep must be a positive finite number.\");\n  }\n\n  const childrenArray = Children.toArray(children);\n\n  const validChildren =\n    childrenArray.length >= 3 &&\n    childrenArray.length % 2 === 1 &&\n    childrenArray.every((child, index) =>\n      index % 2 === 0\n        ? isResizablePanelElement(child)\n        : isResizableHandleElement(child),\n    );\n\n  if (!validChildren) {\n    throw new Error(\n      \"ResizablePanels requires alternating Panel and Handle children, starting and ending with a Panel. At least two panels are required.\",\n    );\n  }\n\n  const panelElements = childrenArray.filter(isResizablePanelElement);\n\n  const panelCount = panelElements.length;\n\n  const panelConstraints: PanelSizeConstraint[] = panelElements.map(\n    (panel) => ({\n      minSize: panel.props.minSize,\n      maxSize: panel.props.maxSize,\n    }),\n  );\n\n  const panelIds = panelElements.map(\n    (panel, index) => panel.props.id ?? `${groupId}-panel-${index}`,\n  );\n\n  if (new Set(panelIds).size !== panelIds.length) {\n    throw new Error(\"ResizablePanels requires unique panel IDs.\");\n  }\n\n  const [uncontrolledSizes, setUncontrolledSizes] = useState<number[]>(() =>\n    normalizePanelSizes(\n      sizes === undefined ? defaultSizes : undefined,\n      panelConstraints,\n    ),\n  );\n\n  const layoutInput =\n    sizes ??\n    (uncontrolledSizes.length === panelCount ? uncontrolledSizes : undefined);\n\n  const currentSizes = normalizePanelSizes(layoutInput, panelConstraints);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const groupRef = useRef<HTMLDivElement | null>(null);\n\n  const pointerDragRef = useRef<PointerDragState | null>(null);\n\n  const updateSizes = (nextSizes: readonly number[]) => {\n    const normalized = normalizePanelSizes(nextSizes, panelConstraints);\n\n    const hasChanged = normalized.some(\n      (size, index) => Math.abs(size - currentSizes[index]) > 0.000001,\n    );\n\n    if (!hasChanged) {\n      return;\n    }\n\n    if (sizes === undefined) {\n      setUncontrolledSizes(normalized);\n    }\n\n    onSizesChange?.(normalized);\n  };\n\n  const handlePointerDown: ResizePointerHandler = (event, handleIndex) => {\n    const group = groupRef.current;\n\n    if (!group || disabled) {\n      return;\n    }\n\n    if (\n      event.button !== 0 &&\n      event.pointerType !== \"touch\" &&\n      event.pointerType !== \"pen\"\n    ) {\n      return;\n    }\n\n    const availableSize = getAvailableSize(group, orientation);\n\n    if (availableSize <= 0) {\n      return;\n    }\n\n    pointerDragRef.current = {\n      handleIndex,\n      pointerId: event.pointerId,\n      startCoordinate: getPointerCoordinate(event, orientation),\n      availableSize,\n      direction: getResizeDirection(group, orientation),\n      sizes: [...currentSizes],\n    };\n\n    try {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    } catch {\n      // Synthetic pointer events and detached elements may not\n      // support pointer capture.\n    }\n\n    event.preventDefault();\n    setIsResizing(true);\n  };\n\n  const handlePointerMove: ResizePointerHandler = (event, handleIndex) => {\n    const drag = pointerDragRef.current;\n\n    if (\n      !drag ||\n      drag.pointerId !== event.pointerId ||\n      drag.handleIndex !== handleIndex\n    ) {\n      return;\n    }\n\n    const currentCoordinate = getPointerCoordinate(event, orientation);\n\n    const delta =\n      ((currentCoordinate - drag.startCoordinate) / drag.availableSize) *\n      100 *\n      drag.direction;\n\n    const nextSizes = resizePanelPair(\n      drag.sizes,\n      panelConstraints,\n      handleIndex,\n      delta,\n    );\n\n    event.preventDefault();\n    updateSizes(nextSizes);\n  };\n\n  const handlePointerEnd: ResizePointerHandler = (event, handleIndex) => {\n    const drag = pointerDragRef.current;\n\n    if (\n      !drag ||\n      drag.pointerId !== event.pointerId ||\n      drag.handleIndex !== handleIndex\n    ) {\n      return;\n    }\n\n    pointerDragRef.current = null;\n    setIsResizing(false);\n  };\n\n  const handleKeyDown: ResizeKeyboardHandler = (event, handleIndex) => {\n    if (disabled) {\n      return;\n    }\n\n    const currentSize = currentSizes[handleIndex];\n\n    const bounds = getPanelPairBounds(\n      currentSizes,\n      panelConstraints,\n      handleIndex,\n    );\n\n    const group = groupRef.current;\n\n    const direction = group ? getResizeDirection(group, orientation) : 1;\n\n    const step = keyboardStep * (event.shiftKey ? 10 : 1);\n\n    let nextSize: number | undefined;\n\n    if (event.key === \"Home\") {\n      nextSize = bounds.minSize;\n    } else if (event.key === \"End\") {\n      nextSize = bounds.maxSize;\n    } else if (orientation === \"horizontal\") {\n      if (event.key === \"ArrowRight\") {\n        nextSize = currentSize + step * direction;\n      } else if (event.key === \"ArrowLeft\") {\n        nextSize = currentSize - step * direction;\n      }\n    } else {\n      if (event.key === \"ArrowDown\") {\n        nextSize = currentSize + step;\n      } else if (event.key === \"ArrowUp\") {\n        nextSize = currentSize - step;\n      }\n    }\n\n    if (nextSize === undefined) {\n      return;\n    }\n\n    event.preventDefault();\n\n    updateSizes(\n      resizePanelPair(\n        currentSizes,\n        panelConstraints,\n        handleIndex,\n        nextSize - currentSize,\n      ),\n    );\n  };\n\n  let panelIndex = 0;\n\n  const enhancedChildren = childrenArray.map((child) => {\n    if (isResizablePanelElement(child)) {\n      const index = panelIndex++;\n\n      return cloneElement(\n        child as ReactElement<\n          ResizablePanelProps & InternalResizablePanelProps\n        >,\n        {\n          panelIndex: index,\n          panelSize: currentSizes[index],\n          panelId: panelIds[index],\n        },\n      );\n    }\n\n    const handleIndex = panelIndex - 1;\n\n    const bounds = getPanelPairBounds(\n      currentSizes,\n      panelConstraints,\n      handleIndex,\n    );\n\n    return cloneElement(\n      child as ReactElement<\n        ResizableHandleProps & InternalResizableHandleProps\n      >,\n      {\n        handleIndex,\n        orientation,\n        value: currentSizes[handleIndex],\n        minValue: bounds.minSize,\n        maxValue: bounds.maxSize,\n        panelIds: [panelIds[handleIndex], panelIds[handleIndex + 1]],\n        inheritedDisabled: disabled,\n        onResizeStart: handlePointerDown,\n        onResizeMove: handlePointerMove,\n        onResizeEnd: handlePointerEnd,\n        onResizeKeyDown: handleKeyDown,\n      },\n    );\n  });\n\n  return (\n    <div\n      {...rootProps}\n      ref={(node) => {\n        groupRef.current = node;\n\n        if (typeof forwardedRef === \"function\") {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      }}\n      id={groupId}\n      role={role ?? \"group\"}\n      className={cn(\"puzzle-resizable-panels\", className)}\n      style={style}\n      data-orientation={orientation}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-resizing={isResizing ? \"true\" : undefined}\n    >\n      {enhancedChildren}\n    </div>\n  );\n};\n\ntype ResizablePanelsComponent = typeof ResizablePanelsRoot & {\n  Panel: typeof ResizablePanel;\n  Handle: typeof ResizableHandle;\n};\n\nconst ResizablePanels = Object.assign(ResizablePanelsRoot, {\n  Panel: ResizablePanel,\n  Handle: ResizableHandle,\n}) as ResizablePanelsComponent;\n\nexport {\n  ResizablePanels,\n  ResizablePanel,\n  ResizableHandle,\n  type ResizablePanelsProps,\n  type ResizablePanelProps,\n  type ResizableHandleProps,\n  type ResizablePanelsOrientation,\n};\n"],"mappings":"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"}

package/dist/components/layout/resizable-panels/resizable-panels.css

@@ -0,0 +1,121 @@
+.puzzle-resizable-panels {
+  --puzzle-resizable-panels-handle-size: var(--puzzle-space-3, .75rem);
+  box-sizing: border-box;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.puzzle-resizable-panels[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+.puzzle-resizable-panels__panel {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  overflow: auto;
+}
+
+.puzzle-resizable-panels__handle {
+  z-index: 1;
+  flex: 0 0 var(--puzzle-resizable-panels-handle-size);
+  color: var(--puzzle-color-text-muted);
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+  background: none;
+  border: 0;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.puzzle-resizable-panels[data-orientation="horizontal"] .puzzle-resizable-panels__handle {
+  cursor: col-resize;
+}
+
+.puzzle-resizable-panels[data-orientation="vertical"] .puzzle-resizable-panels__handle {
+  cursor: row-resize;
+}
+
+.puzzle-resizable-panels__handle:before {
+  inline-size: var(--puzzle-border-width, 1px);
+  content: "";
+  background-color: var(--puzzle-color-border);
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+.puzzle-resizable-panels[data-orientation="vertical"] .puzzle-resizable-panels__handle:before {
+  inline-size: auto;
+  block-size: var(--puzzle-border-width, 1px);
+  inset-block: 50%;
+  inset-inline: 0;
+  transform: translateY(-50%);
+}
+
+.puzzle-resizable-panels__handle:hover:not([data-disabled="true"]):before, .puzzle-resizable-panels__handle:focus-visible:before {
+  background-color: var(--puzzle-color-border-strong);
+}
+
+.puzzle-resizable-panels__handle:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: -2px;
+}
+
+.puzzle-resizable-panels__handle:active:not([data-disabled="true"]):before {
+  background-color: var(--puzzle-color-ring);
+}
+
+.puzzle-resizable-panels__handle[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
+.puzzle-resizable-panels__handle-grip {
+  z-index: 1;
+  inline-size: var(--puzzle-space-1, .25rem);
+  background-image: radial-gradient(circle, currentColor 1px, #0000 1.5px);
+  background-size: var(--puzzle-space-1, .25rem) var(--puzzle-space-1, .25rem);
+  background-position: center;
+  background-repeat: repeat;
+  border-radius: 999px;
+  block-size: 1.5rem;
+  display: block;
+  position: relative;
+}
+
+.puzzle-resizable-panels[data-orientation="vertical"] .puzzle-resizable-panels__handle-grip {
+  inline-size: 1.5rem;
+  block-size: var(--puzzle-space-1, .25rem);
+}
+
+.puzzle-resizable-panels[data-resizing="true"] {
+  user-select: none;
+  cursor: inherit;
+}
+
+.puzzle-resizable-panels[data-resizing="true"] .puzzle-resizable-panels__panel {
+  user-select: none;
+}
+
+@media (forced-colors: active) {
+  .puzzle-resizable-panels__handle:before {
+    background-color: canvastext;
+  }
+
+  .puzzle-resizable-panels__handle:focus-visible {
+    outline-color: highlight;
+  }
+}

package/dist/components/layout/resizable-panels/resizable-panels.utils.cjs

@@ -0,0 +1,107 @@
+// src/components/layout/resizable-panels/resizable-panels.utils.ts
+const normalizePanelConstraints = (constraints) => {
+	if (constraints.length < 2) throw new RangeError("ResizablePanels requires at least two panels.");
+	const normalized = constraints.map((constraint, index) => {
+		const minSize = constraint.minSize ?? 0;
+		const maxSize = constraint.maxSize ?? 100;
+		if (!Number.isFinite(minSize) || !Number.isFinite(maxSize) || minSize < 0 || maxSize > 100 || minSize > maxSize) throw new RangeError(`Invalid size constraints for panel ${index}.`);
+		return {
+			minSize,
+			maxSize
+		};
+	});
+	const minimumTotal = normalized.reduce((total, constraint) => total + constraint.minSize, 0);
+	const maximumTotal = normalized.reduce((total, constraint) => total + constraint.maxSize, 0);
+	if (minimumTotal > 100 || maximumTotal < 100) throw new RangeError("Panel size constraints cannot produce a layout totaling 100%.");
+	return normalized;
+};
+/**
+* Normalizes panel sizes to 100% while respecting every panel constraint.
+*
+* When a panel reaches its minimum or maximum, the remaining space is
+* distributed proportionally between the other panels.
+*/
+const normalizePanelSizes = (sizes, constraints) => {
+	const normalizedConstraints = normalizePanelConstraints(constraints);
+	if (sizes && sizes.length !== constraints.length) throw new RangeError("The number of panel sizes must match the number of panels.");
+	const weights = normalizedConstraints.map((_, index) => {
+		const size = sizes?.[index] ?? 1;
+		return Number.isFinite(size) ? Math.max(0, size) : 0;
+	});
+	const result = new Array(constraints.length).fill(0);
+	const unresolved = normalizedConstraints.map((_, index) => index);
+	let remainingSize = 100;
+	while (unresolved.length > 0) {
+		const activeWeightTotal = unresolved.reduce((total, index) => total + weights[index], 0);
+		const useEqualDistribution = activeWeightTotal === 0;
+		const candidates = unresolved.map((index) => ({
+			index,
+			size: remainingSize * (useEqualDistribution ? 1 : weights[index]) / (useEqualDistribution ? unresolved.length : activeWeightTotal)
+		}));
+		const violations = candidates.filter(({ index, size }) => {
+			const constraint = normalizedConstraints[index];
+			return size < constraint.minSize || size > constraint.maxSize;
+		});
+		if (violations.length === 0) {
+			for (const candidate of candidates) result[candidate.index] = candidate.size;
+			break;
+		}
+		const clampedViolations = violations.map(({ index, size }) => {
+			const constraint = normalizedConstraints[index];
+			return {
+				index,
+				size,
+				fixedSize: Math.min(constraint.maxSize, Math.max(constraint.minSize, size))
+			};
+		});
+		const totalCorrection = clampedViolations.reduce((total, { size, fixedSize }) => total + fixedSize - size, 0);
+		const fixedIndexes = /* @__PURE__ */ new Set();
+		for (const { index, size, fixedSize } of clampedViolations) {
+			if (totalCorrection > 0 && fixedSize < size || totalCorrection < 0 && fixedSize > size) continue;
+			result[index] = fixedSize;
+			remainingSize -= fixedSize;
+			fixedIndexes.add(index);
+		}
+		for (let index = unresolved.length - 1; index >= 0; index--) if (fixedIndexes.has(unresolved[index])) unresolved.splice(index, 1);
+	}
+	return result;
+};
+/**
+* Returns the allowed size range of the first panel in a pair.
+*
+* Both panels retain their combined size during resizing.
+*/
+const getPanelPairBounds = (sizes, constraints, panelIndex) => {
+	const normalizedConstraints = normalizePanelConstraints(constraints);
+	const normalizedSizes = normalizePanelSizes(sizes, normalizedConstraints);
+	if (!Number.isInteger(panelIndex) || panelIndex < 0 || panelIndex >= normalizedSizes.length - 1) throw new RangeError("Invalid panel resize index.");
+	const first = normalizedConstraints[panelIndex];
+	const second = normalizedConstraints[panelIndex + 1];
+	const combinedSize = normalizedSizes[panelIndex] + normalizedSizes[panelIndex + 1];
+	return {
+		minSize: Math.max(first.minSize, combinedSize - second.maxSize),
+		maxSize: Math.min(first.maxSize, combinedSize - second.minSize)
+	};
+};
+/**
+* Resizes two adjacent panels while keeping their combined size unchanged.
+*
+* A positive delta increases the first panel.
+* A negative delta decreases the first panel.
+*/
+const resizePanelPair = (sizes, constraints, panelIndex, delta) => {
+	if (!Number.isFinite(delta)) throw new RangeError("Resize delta must be a finite number.");
+	const normalizedSizes = normalizePanelSizes(sizes, constraints);
+	const bounds = getPanelPairBounds(normalizedSizes, constraints, panelIndex);
+	const combinedSize = normalizedSizes[panelIndex] + normalizedSizes[panelIndex + 1];
+	const nextFirstSize = Math.min(bounds.maxSize, Math.max(bounds.minSize, normalizedSizes[panelIndex] + delta));
+	const nextSizes = [...normalizedSizes];
+	nextSizes[panelIndex] = nextFirstSize;
+	nextSizes[panelIndex + 1] = combinedSize - nextFirstSize;
+	return nextSizes;
+};
+exports.getPanelPairBounds = getPanelPairBounds;
+exports.normalizePanelSizes = normalizePanelSizes;
+exports.resizePanelPair = resizePanelPair;
+
+//# sourceMappingURL=resizable-panels.utils.cjs.map

package/dist/components/layout/resizable-panels/resizable-panels.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-panels.utils.cjs","names":[],"sources":["../../../../src/components/layout/resizable-panels/resizable-panels.utils.ts"],"sourcesContent":["export type PanelSizeConstraint = {\n  minSize?: number;\n  maxSize?: number;\n};\n\ntype NormalizedPanelSizeConstraint = {\n  minSize: number;\n  maxSize: number;\n};\n\ntype PanelPairBounds = {\n  minSize: number;\n  maxSize: number;\n};\n\nconst normalizePanelConstraints = (\n  constraints: readonly PanelSizeConstraint[],\n): NormalizedPanelSizeConstraint[] => {\n  if (constraints.length < 2) {\n    throw new RangeError(\"ResizablePanels requires at least two panels.\");\n  }\n\n  const normalized = constraints.map((constraint, index) => {\n    const minSize = constraint.minSize ?? 0;\n    const maxSize = constraint.maxSize ?? 100;\n\n    if (\n      !Number.isFinite(minSize) ||\n      !Number.isFinite(maxSize) ||\n      minSize < 0 ||\n      maxSize > 100 ||\n      minSize > maxSize\n    ) {\n      throw new RangeError(`Invalid size constraints for panel ${index}.`);\n    }\n\n    return { minSize, maxSize };\n  });\n\n  const minimumTotal = normalized.reduce(\n    (total, constraint) => total + constraint.minSize,\n    0,\n  );\n\n  const maximumTotal = normalized.reduce(\n    (total, constraint) => total + constraint.maxSize,\n    0,\n  );\n\n  if (minimumTotal > 100 || maximumTotal < 100) {\n    throw new RangeError(\n      \"Panel size constraints cannot produce a layout totaling 100%.\",\n    );\n  }\n\n  return normalized;\n};\n\n/**\n * Normalizes panel sizes to 100% while respecting every panel constraint.\n *\n * When a panel reaches its minimum or maximum, the remaining space is\n * distributed proportionally between the other panels.\n */\nconst normalizePanelSizes = (\n  sizes: readonly number[] | undefined,\n  constraints: readonly PanelSizeConstraint[],\n): number[] => {\n  const normalizedConstraints = normalizePanelConstraints(constraints);\n\n  if (sizes && sizes.length !== constraints.length) {\n    throw new RangeError(\n      \"The number of panel sizes must match the number of panels.\",\n    );\n  }\n\n  const weights = normalizedConstraints.map((_, index) => {\n    const size = sizes?.[index] ?? 1;\n\n    return Number.isFinite(size) ? Math.max(0, size) : 0;\n  });\n\n  const result = new Array<number>(constraints.length).fill(0);\n\n  const unresolved = normalizedConstraints.map((_, index) => index);\n\n  let remainingSize = 100;\n\n  while (unresolved.length > 0) {\n    const activeWeightTotal = unresolved.reduce(\n      (total, index) => total + weights[index],\n      0,\n    );\n\n    const useEqualDistribution = activeWeightTotal === 0;\n\n    const candidates = unresolved.map((index) => ({\n      index,\n      size:\n        (remainingSize * (useEqualDistribution ? 1 : weights[index])) /\n        (useEqualDistribution ? unresolved.length : activeWeightTotal),\n    }));\n\n    const violations = candidates.filter(({ index, size }) => {\n      const constraint = normalizedConstraints[index];\n\n      return size < constraint.minSize || size > constraint.maxSize;\n    });\n\n    if (violations.length === 0) {\n      for (const candidate of candidates) {\n        result[candidate.index] = candidate.size;\n      }\n\n      break;\n    }\n\n    const clampedViolations = violations.map(({ index, size }) => {\n      const constraint = normalizedConstraints[index];\n\n      return {\n        index,\n        size,\n        fixedSize: Math.min(\n          constraint.maxSize,\n          Math.max(constraint.minSize, size),\n        ),\n      };\n    });\n\n    // Only clamp in the direction of the net correction; clamping both\n    // directions at once can overshoot or undershoot 100%.\n    const totalCorrection = clampedViolations.reduce(\n      (total, { size, fixedSize }) => total + fixedSize - size,\n      0,\n    );\n\n    const fixedIndexes = new Set<number>();\n\n    for (const { index, size, fixedSize } of clampedViolations) {\n      if (\n        (totalCorrection > 0 && fixedSize < size) ||\n        (totalCorrection < 0 && fixedSize > size)\n      ) {\n        continue;\n      }\n\n      result[index] = fixedSize;\n      remainingSize -= fixedSize;\n      fixedIndexes.add(index);\n    }\n\n    for (let index = unresolved.length - 1; index >= 0; index--) {\n      if (fixedIndexes.has(unresolved[index])) {\n        unresolved.splice(index, 1);\n      }\n    }\n  }\n\n  return result;\n};\n\n/**\n * Returns the allowed size range of the first panel in a pair.\n *\n * Both panels retain their combined size during resizing.\n */\nconst getPanelPairBounds = (\n  sizes: readonly number[],\n  constraints: readonly PanelSizeConstraint[],\n  panelIndex: number,\n): PanelPairBounds => {\n  const normalizedConstraints = normalizePanelConstraints(constraints);\n\n  const normalizedSizes = normalizePanelSizes(sizes, normalizedConstraints);\n\n  if (\n    !Number.isInteger(panelIndex) ||\n    panelIndex < 0 ||\n    panelIndex >= normalizedSizes.length - 1\n  ) {\n    throw new RangeError(\"Invalid panel resize index.\");\n  }\n\n  const first = normalizedConstraints[panelIndex];\n  const second = normalizedConstraints[panelIndex + 1];\n\n  const combinedSize =\n    normalizedSizes[panelIndex] + normalizedSizes[panelIndex + 1];\n\n  return {\n    minSize: Math.max(first.minSize, combinedSize - second.maxSize),\n    maxSize: Math.min(first.maxSize, combinedSize - second.minSize),\n  };\n};\n\n/**\n * Resizes two adjacent panels while keeping their combined size unchanged.\n *\n * A positive delta increases the first panel.\n * A negative delta decreases the first panel.\n */\nconst resizePanelPair = (\n  sizes: readonly number[],\n  constraints: readonly PanelSizeConstraint[],\n  panelIndex: number,\n  delta: number,\n): number[] => {\n  if (!Number.isFinite(delta)) {\n    throw new RangeError(\"Resize delta must be a finite number.\");\n  }\n\n  const normalizedSizes = normalizePanelSizes(sizes, constraints);\n\n  const bounds = getPanelPairBounds(normalizedSizes, constraints, panelIndex);\n\n  const combinedSize =\n    normalizedSizes[panelIndex] + normalizedSizes[panelIndex + 1];\n\n  const nextFirstSize = Math.min(\n    bounds.maxSize,\n    Math.max(bounds.minSize, normalizedSizes[panelIndex] + delta),\n  );\n\n  const nextSizes = [...normalizedSizes];\n\n  nextSizes[panelIndex] = nextFirstSize;\n  nextSizes[panelIndex + 1] = combinedSize - nextFirstSize;\n\n  return nextSizes;\n};\n\nexport { normalizePanelSizes, getPanelPairBounds, resizePanelPair };\n"],"mappings":"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"}

package/dist/components/layout/resizable-panels/resizable-panels.utils.js

@@ -0,0 +1,105 @@
+// src/components/layout/resizable-panels/resizable-panels.utils.ts
+const normalizePanelConstraints = (constraints) => {
+	if (constraints.length < 2) throw new RangeError("ResizablePanels requires at least two panels.");
+	const normalized = constraints.map((constraint, index) => {
+		const minSize = constraint.minSize ?? 0;
+		const maxSize = constraint.maxSize ?? 100;
+		if (!Number.isFinite(minSize) || !Number.isFinite(maxSize) || minSize < 0 || maxSize > 100 || minSize > maxSize) throw new RangeError(`Invalid size constraints for panel ${index}.`);
+		return {
+			minSize,
+			maxSize
+		};
+	});
+	const minimumTotal = normalized.reduce((total, constraint) => total + constraint.minSize, 0);
+	const maximumTotal = normalized.reduce((total, constraint) => total + constraint.maxSize, 0);
+	if (minimumTotal > 100 || maximumTotal < 100) throw new RangeError("Panel size constraints cannot produce a layout totaling 100%.");
+	return normalized;
+};
+/**
+* Normalizes panel sizes to 100% while respecting every panel constraint.
+*
+* When a panel reaches its minimum or maximum, the remaining space is
+* distributed proportionally between the other panels.
+*/
+const normalizePanelSizes = (sizes, constraints) => {
+	const normalizedConstraints = normalizePanelConstraints(constraints);
+	if (sizes && sizes.length !== constraints.length) throw new RangeError("The number of panel sizes must match the number of panels.");
+	const weights = normalizedConstraints.map((_, index) => {
+		const size = sizes?.[index] ?? 1;
+		return Number.isFinite(size) ? Math.max(0, size) : 0;
+	});
+	const result = new Array(constraints.length).fill(0);
+	const unresolved = normalizedConstraints.map((_, index) => index);
+	let remainingSize = 100;
+	while (unresolved.length > 0) {
+		const activeWeightTotal = unresolved.reduce((total, index) => total + weights[index], 0);
+		const useEqualDistribution = activeWeightTotal === 0;
+		const candidates = unresolved.map((index) => ({
+			index,
+			size: remainingSize * (useEqualDistribution ? 1 : weights[index]) / (useEqualDistribution ? unresolved.length : activeWeightTotal)
+		}));
+		const violations = candidates.filter(({ index, size }) => {
+			const constraint = normalizedConstraints[index];
+			return size < constraint.minSize || size > constraint.maxSize;
+		});
+		if (violations.length === 0) {
+			for (const candidate of candidates) result[candidate.index] = candidate.size;
+			break;
+		}
+		const clampedViolations = violations.map(({ index, size }) => {
+			const constraint = normalizedConstraints[index];
+			return {
+				index,
+				size,
+				fixedSize: Math.min(constraint.maxSize, Math.max(constraint.minSize, size))
+			};
+		});
+		const totalCorrection = clampedViolations.reduce((total, { size, fixedSize }) => total + fixedSize - size, 0);
+		const fixedIndexes = /* @__PURE__ */ new Set();
+		for (const { index, size, fixedSize } of clampedViolations) {
+			if (totalCorrection > 0 && fixedSize < size || totalCorrection < 0 && fixedSize > size) continue;
+			result[index] = fixedSize;
+			remainingSize -= fixedSize;
+			fixedIndexes.add(index);
+		}
+		for (let index = unresolved.length - 1; index >= 0; index--) if (fixedIndexes.has(unresolved[index])) unresolved.splice(index, 1);
+	}
+	return result;
+};
+/**
+* Returns the allowed size range of the first panel in a pair.
+*
+* Both panels retain their combined size during resizing.
+*/
+const getPanelPairBounds = (sizes, constraints, panelIndex) => {
+	const normalizedConstraints = normalizePanelConstraints(constraints);
+	const normalizedSizes = normalizePanelSizes(sizes, normalizedConstraints);
+	if (!Number.isInteger(panelIndex) || panelIndex < 0 || panelIndex >= normalizedSizes.length - 1) throw new RangeError("Invalid panel resize index.");
+	const first = normalizedConstraints[panelIndex];
+	const second = normalizedConstraints[panelIndex + 1];
+	const combinedSize = normalizedSizes[panelIndex] + normalizedSizes[panelIndex + 1];
+	return {
+		minSize: Math.max(first.minSize, combinedSize - second.maxSize),
+		maxSize: Math.min(first.maxSize, combinedSize - second.minSize)
+	};
+};
+/**
+* Resizes two adjacent panels while keeping their combined size unchanged.
+*
+* A positive delta increases the first panel.
+* A negative delta decreases the first panel.
+*/
+const resizePanelPair = (sizes, constraints, panelIndex, delta) => {
+	if (!Number.isFinite(delta)) throw new RangeError("Resize delta must be a finite number.");
+	const normalizedSizes = normalizePanelSizes(sizes, constraints);
+	const bounds = getPanelPairBounds(normalizedSizes, constraints, panelIndex);
+	const combinedSize = normalizedSizes[panelIndex] + normalizedSizes[panelIndex + 1];
+	const nextFirstSize = Math.min(bounds.maxSize, Math.max(bounds.minSize, normalizedSizes[panelIndex] + delta));
+	const nextSizes = [...normalizedSizes];
+	nextSizes[panelIndex] = nextFirstSize;
+	nextSizes[panelIndex + 1] = combinedSize - nextFirstSize;
+	return nextSizes;
+};
+export { getPanelPairBounds, normalizePanelSizes, resizePanelPair };
+
+//# sourceMappingURL=resizable-panels.utils.js.map

package/dist/components/layout/resizable-panels/resizable-panels.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-panels.utils.js","names":[],"sources":["../../../../src/components/layout/resizable-panels/resizable-panels.utils.ts"],"sourcesContent":["export type PanelSizeConstraint = {\n  minSize?: number;\n  maxSize?: number;\n};\n\ntype NormalizedPanelSizeConstraint = {\n  minSize: number;\n  maxSize: number;\n};\n\ntype PanelPairBounds = {\n  minSize: number;\n  maxSize: number;\n};\n\nconst normalizePanelConstraints = (\n  constraints: readonly PanelSizeConstraint[],\n): NormalizedPanelSizeConstraint[] => {\n  if (constraints.length < 2) {\n    throw new RangeError(\"ResizablePanels requires at least two panels.\");\n  }\n\n  const normalized = constraints.map((constraint, index) => {\n    const minSize = constraint.minSize ?? 0;\n    const maxSize = constraint.maxSize ?? 100;\n\n    if (\n      !Number.isFinite(minSize) ||\n      !Number.isFinite(maxSize) ||\n      minSize < 0 ||\n      maxSize > 100 ||\n      minSize > maxSize\n    ) {\n      throw new RangeError(`Invalid size constraints for panel ${index}.`);\n    }\n\n    return { minSize, maxSize };\n  });\n\n  const minimumTotal = normalized.reduce(\n    (total, constraint) => total + constraint.minSize,\n    0,\n  );\n\n  const maximumTotal = normalized.reduce(\n    (total, constraint) => total + constraint.maxSize,\n    0,\n  );\n\n  if (minimumTotal > 100 || maximumTotal < 100) {\n    throw new RangeError(\n      \"Panel size constraints cannot produce a layout totaling 100%.\",\n    );\n  }\n\n  return normalized;\n};\n\n/**\n * Normalizes panel sizes to 100% while respecting every panel constraint.\n *\n * When a panel reaches its minimum or maximum, the remaining space is\n * distributed proportionally between the other panels.\n */\nconst normalizePanelSizes = (\n  sizes: readonly number[] | undefined,\n  constraints: readonly PanelSizeConstraint[],\n): number[] => {\n  const normalizedConstraints = normalizePanelConstraints(constraints);\n\n  if (sizes && sizes.length !== constraints.length) {\n    throw new RangeError(\n      \"The number of panel sizes must match the number of panels.\",\n    );\n  }\n\n  const weights = normalizedConstraints.map((_, index) => {\n    const size = sizes?.[index] ?? 1;\n\n    return Number.isFinite(size) ? Math.max(0, size) : 0;\n  });\n\n  const result = new Array<number>(constraints.length).fill(0);\n\n  const unresolved = normalizedConstraints.map((_, index) => index);\n\n  let remainingSize = 100;\n\n  while (unresolved.length > 0) {\n    const activeWeightTotal = unresolved.reduce(\n      (total, index) => total + weights[index],\n      0,\n    );\n\n    const useEqualDistribution = activeWeightTotal === 0;\n\n    const candidates = unresolved.map((index) => ({\n      index,\n      size:\n        (remainingSize * (useEqualDistribution ? 1 : weights[index])) /\n        (useEqualDistribution ? unresolved.length : activeWeightTotal),\n    }));\n\n    const violations = candidates.filter(({ index, size }) => {\n      const constraint = normalizedConstraints[index];\n\n      return size < constraint.minSize || size > constraint.maxSize;\n    });\n\n    if (violations.length === 0) {\n      for (const candidate of candidates) {\n        result[candidate.index] = candidate.size;\n      }\n\n      break;\n    }\n\n    const clampedViolations = violations.map(({ index, size }) => {\n      const constraint = normalizedConstraints[index];\n\n      return {\n        index,\n        size,\n        fixedSize: Math.min(\n          constraint.maxSize,\n          Math.max(constraint.minSize, size),\n        ),\n      };\n    });\n\n    // Only clamp in the direction of the net correction; clamping both\n    // directions at once can overshoot or undershoot 100%.\n    const totalCorrection = clampedViolations.reduce(\n      (total, { size, fixedSize }) => total + fixedSize - size,\n      0,\n    );\n\n    const fixedIndexes = new Set<number>();\n\n    for (const { index, size, fixedSize } of clampedViolations) {\n      if (\n        (totalCorrection > 0 && fixedSize < size) ||\n        (totalCorrection < 0 && fixedSize > size)\n      ) {\n        continue;\n      }\n\n      result[index] = fixedSize;\n      remainingSize -= fixedSize;\n      fixedIndexes.add(index);\n    }\n\n    for (let index = unresolved.length - 1; index >= 0; index--) {\n      if (fixedIndexes.has(unresolved[index])) {\n        unresolved.splice(index, 1);\n      }\n    }\n  }\n\n  return result;\n};\n\n/**\n * Returns the allowed size range of the first panel in a pair.\n *\n * Both panels retain their combined size during resizing.\n */\nconst getPanelPairBounds = (\n  sizes: readonly number[],\n  constraints: readonly PanelSizeConstraint[],\n  panelIndex: number,\n): PanelPairBounds => {\n  const normalizedConstraints = normalizePanelConstraints(constraints);\n\n  const normalizedSizes = normalizePanelSizes(sizes, normalizedConstraints);\n\n  if (\n    !Number.isInteger(panelIndex) ||\n    panelIndex < 0 ||\n    panelIndex >= normalizedSizes.length - 1\n  ) {\n    throw new RangeError(\"Invalid panel resize index.\");\n  }\n\n  const first = normalizedConstraints[panelIndex];\n  const second = normalizedConstraints[panelIndex + 1];\n\n  const combinedSize =\n    normalizedSizes[panelIndex] + normalizedSizes[panelIndex + 1];\n\n  return {\n    minSize: Math.max(first.minSize, combinedSize - second.maxSize),\n    maxSize: Math.min(first.maxSize, combinedSize - second.minSize),\n  };\n};\n\n/**\n * Resizes two adjacent panels while keeping their combined size unchanged.\n *\n * A positive delta increases the first panel.\n * A negative delta decreases the first panel.\n */\nconst resizePanelPair = (\n  sizes: readonly number[],\n  constraints: readonly PanelSizeConstraint[],\n  panelIndex: number,\n  delta: number,\n): number[] => {\n  if (!Number.isFinite(delta)) {\n    throw new RangeError(\"Resize delta must be a finite number.\");\n  }\n\n  const normalizedSizes = normalizePanelSizes(sizes, constraints);\n\n  const bounds = getPanelPairBounds(normalizedSizes, constraints, panelIndex);\n\n  const combinedSize =\n    normalizedSizes[panelIndex] + normalizedSizes[panelIndex + 1];\n\n  const nextFirstSize = Math.min(\n    bounds.maxSize,\n    Math.max(bounds.minSize, normalizedSizes[panelIndex] + delta),\n  );\n\n  const nextSizes = [...normalizedSizes];\n\n  nextSizes[panelIndex] = nextFirstSize;\n  nextSizes[panelIndex + 1] = combinedSize - nextFirstSize;\n\n  return nextSizes;\n};\n\nexport { normalizePanelSizes, getPanelPairBounds, resizePanelPair };\n"],"mappings":";AAeA,MAAM,6BACJ,gBACoC;CACpC,IAAI,YAAY,SAAS,GACvB,MAAM,IAAI,WAAW,+CAA+C;CAGtE,MAAM,aAAa,YAAY,KAAK,YAAY,UAAU;EACxD,MAAM,UAAU,WAAW,WAAW;EACtC,MAAM,UAAU,WAAW,WAAW;EAEtC,IACE,CAAC,OAAO,SAAS,OAAO,KACxB,CAAC,OAAO,SAAS,OAAO,KACxB,UAAU,KACV,UAAU,OACV,UAAU,SAEV,MAAM,IAAI,WAAW,sCAAsC,MAAM,EAAE;EAGrE,OAAO;GAAE;GAAS;EAAQ;CAC5B,CAAC;CAED,MAAM,eAAe,WAAW,QAC7B,OAAO,eAAe,QAAQ,WAAW,SAC1C,CACF;CAEA,MAAM,eAAe,WAAW,QAC7B,OAAO,eAAe,QAAQ,WAAW,SAC1C,CACF;CAEA,IAAI,eAAe,OAAO,eAAe,KACvC,MAAM,IAAI,WACR,+DACF;CAGF,OAAO;AACT;;;;;;;AAQA,MAAM,uBACJ,OACA,gBACa;CACb,MAAM,wBAAwB,0BAA0B,WAAW;CAEnE,IAAI,SAAS,MAAM,WAAW,YAAY,QACxC,MAAM,IAAI,WACR,4DACF;CAGF,MAAM,UAAU,sBAAsB,KAAK,GAAG,UAAU;EACtD,MAAM,OAAO,QAAQ,UAAU;EAE/B,OAAO,OAAO,SAAS,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,IAAI;CACrD,CAAC;CAED,MAAM,SAAS,IAAI,MAAc,YAAY,MAAM,CAAC,CAAC,KAAK,CAAC;CAE3D,MAAM,aAAa,sBAAsB,KAAK,GAAG,UAAU,KAAK;CAEhE,IAAI,gBAAgB;CAEpB,OAAO,WAAW,SAAS,GAAG;EAC5B,MAAM,oBAAoB,WAAW,QAClC,OAAO,UAAU,QAAQ,QAAQ,QAClC,CACF;EAEA,MAAM,uBAAuB,sBAAsB;EAEnD,MAAM,aAAa,WAAW,KAAK,WAAW;GAC5C;GACA,MACG,iBAAiB,uBAAuB,IAAI,QAAQ,WACpD,uBAAuB,WAAW,SAAS;EAChD,EAAE;EAEF,MAAM,aAAa,WAAW,QAAQ,EAAE,OAAO,WAAW;GACxD,MAAM,aAAa,sBAAsB;GAEzC,OAAO,OAAO,WAAW,WAAW,OAAO,WAAW;EACxD,CAAC;EAED,IAAI,WAAW,WAAW,GAAG;GAC3B,KAAK,MAAM,aAAa,YACtB,OAAO,UAAU,SAAS,UAAU;GAGtC;EACF;EAEA,MAAM,oBAAoB,WAAW,KAAK,EAAE,OAAO,WAAW;GAC5D,MAAM,aAAa,sBAAsB;GAEzC,OAAO;IACL;IACA;IACA,WAAW,KAAK,IACd,WAAW,SACX,KAAK,IAAI,WAAW,SAAS,IAAI,CACnC;GACF;EACF,CAAC;EAID,MAAM,kBAAkB,kBAAkB,QACvC,OAAO,EAAE,MAAM,gBAAgB,QAAQ,YAAY,MACpD,CACF;EAEA,MAAM,+BAAe,IAAI,IAAY;EAErC,KAAK,MAAM,EAAE,OAAO,MAAM,eAAe,mBAAmB;GAC1D,IACG,kBAAkB,KAAK,YAAY,QACnC,kBAAkB,KAAK,YAAY,MAEpC;GAGF,OAAO,SAAS;GAChB,iBAAiB;GACjB,aAAa,IAAI,KAAK;EACxB;EAEA,KAAK,IAAI,QAAQ,WAAW,SAAS,GAAG,SAAS,GAAG,SAClD,IAAI,aAAa,IAAI,WAAW,MAAM,GACpC,WAAW,OAAO,OAAO,CAAC;CAGhC;CAEA,OAAO;AACT;;;;;;AAOA,MAAM,sBACJ,OACA,aACA,eACoB;CACpB,MAAM,wBAAwB,0BAA0B,WAAW;CAEnE,MAAM,kBAAkB,oBAAoB,OAAO,qBAAqB;CAExE,IACE,CAAC,OAAO,UAAU,UAAU,KAC5B,aAAa,KACb,cAAc,gBAAgB,SAAS,GAEvC,MAAM,IAAI,WAAW,6BAA6B;CAGpD,MAAM,QAAQ,sBAAsB;CACpC,MAAM,SAAS,sBAAsB,aAAa;CAElD,MAAM,eACJ,gBAAgB,cAAc,gBAAgB,aAAa;CAE7D,OAAO;EACL,SAAS,KAAK,IAAI,MAAM,SAAS,eAAe,OAAO,OAAO;EAC9D,SAAS,KAAK,IAAI,MAAM,SAAS,eAAe,OAAO,OAAO;CAChE;AACF;;;;;;;AAQA,MAAM,mBACJ,OACA,aACA,YACA,UACa;CACb,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,MAAM,IAAI,WAAW,uCAAuC;CAG9D,MAAM,kBAAkB,oBAAoB,OAAO,WAAW;CAE9D,MAAM,SAAS,mBAAmB,iBAAiB,aAAa,UAAU;CAE1E,MAAM,eACJ,gBAAgB,cAAc,gBAAgB,aAAa;CAE7D,MAAM,gBAAgB,KAAK,IACzB,OAAO,SACP,KAAK,IAAI,OAAO,SAAS,gBAAgB,cAAc,KAAK,CAC9D;CAEA,MAAM,YAAY,CAAC,GAAG,eAAe;CAErC,UAAU,cAAc;CACxB,UAAU,aAAa,KAAK,eAAe;CAE3C,OAAO;AACT"}