xiod-ui 1.0.0

package/dist/components/resizable.js

@@ -0,0 +1,964 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { GripVertical } from "xiod-icons/icons/GripVertical";
+import { GripHorizontal } from "xiod-icons/icons/GripHorizontal";
+//#region src/components/resizable.tsx
+const activeGroups = /* @__PURE__ */ new Map();
+const ResizableGroupContext = React$1.createContext(null);
+function useResizableGroup() {
+	const context = React$1.useContext(ResizableGroupContext);
+	if (!context) throw new Error("useResizableGroup must be used within a ResizablePanelGroup");
+	return context;
+}
+function parseSizeAndUnit(size) {
+	if (size === void 0) return [0, "%"];
+	if (typeof size === "number") return [size, "px"];
+	const numeric = parseFloat(size);
+	if (Number.isNaN(numeric)) return [0, "%"];
+	if (size.endsWith("%")) return [numeric, "%"];
+	if (size.endsWith("px")) return [numeric, "px"];
+	if (size.endsWith("rem")) return [numeric, "rem"];
+	if (size.endsWith("em")) return [numeric, "em"];
+	if (size.endsWith("vh")) return [numeric, "vh"];
+	if (size.endsWith("vw")) return [numeric, "vw"];
+	return [numeric, "%"];
+}
+function convertSizeToPixels(size, element, groupSize) {
+	if (size === void 0) return 0;
+	const [val, unit] = parseSizeAndUnit(size);
+	switch (unit) {
+		case "%": return val / 100 * groupSize;
+		case "px": return val;
+		case "rem": {
+			if (typeof window === "undefined" || !element) return val * 16;
+			const style = window.getComputedStyle(element.ownerDocument.documentElement);
+			return val * (parseFloat(style.fontSize) || 16);
+		}
+		case "em": {
+			if (typeof window === "undefined" || !element) return val * 16;
+			const style = window.getComputedStyle(element);
+			return val * (parseFloat(style.fontSize) || 16);
+		}
+		case "vh":
+			if (typeof window === "undefined") return val * 800;
+			return val / 100 * window.innerHeight;
+		case "vw":
+			if (typeof window === "undefined") return val * 1200;
+			return val / 100 * window.innerWidth;
+		default: return 0;
+	}
+}
+function getResolvedConstraints(panel, groupSizeInPixels) {
+	const element = panel.ref.current;
+	const config = panel.config;
+	return {
+		collapsedSize: config.collapsedSize !== void 0 ? parseFloat((convertSizeToPixels(config.collapsedSize, element, groupSizeInPixels) / groupSizeInPixels * 100).toFixed(3)) : 0,
+		minSize: config.minSize !== void 0 ? parseFloat((convertSizeToPixels(config.minSize, element, groupSizeInPixels) / groupSizeInPixels * 100).toFixed(3)) : 0,
+		maxSize: config.maxSize !== void 0 ? parseFloat((convertSizeToPixels(config.maxSize, element, groupSizeInPixels) / groupSizeInPixels * 100).toFixed(3)) : 100,
+		defaultSize: config.defaultSize !== void 0 ? parseFloat((convertSizeToPixels(config.defaultSize, element, groupSizeInPixels) / groupSizeInPixels * 100).toFixed(3)) : void 0,
+		collapsible: !!config.collapsible,
+		disabled: !!config.disabled
+	};
+}
+function validatePanelSize({ size, prevSize, constraints, overrideDisabledPanels }) {
+	const { collapsedSize, minSize, maxSize, collapsible, disabled } = constraints;
+	if (disabled && !overrideDisabledPanels) return prevSize;
+	let finalSize = size;
+	if (finalSize < minSize) {
+		if (collapsible) {
+			const halfway = (collapsedSize + minSize) / 2;
+			if (finalSize < halfway) finalSize = collapsedSize;
+			else finalSize = minSize;
+		} else finalSize = minSize;
+	}
+	finalSize = Math.min(maxSize, finalSize);
+	return parseFloat(finalSize.toFixed(3));
+}
+function validateLayoutUnderConstraints(layout, groupSize, panels) {
+	if (groupSize <= 0 || layout.length === 0) return layout;
+	const constraints = panels.map((p) => getResolvedConstraints(p, groupSize));
+	const nextLayout = [...layout];
+	let remainingSize = 0;
+	for (let i = 0; i < nextLayout.length; i++) {
+		const prevSize = layout[i];
+		const unsafeSize = nextLayout[i];
+		const safeSize = validatePanelSize({
+			size: unsafeSize,
+			prevSize,
+			constraints: constraints[i],
+			overrideDisabledPanels: true
+		});
+		if (Math.abs(unsafeSize - safeSize) > .001) {
+			remainingSize += unsafeSize - safeSize;
+			nextLayout[i] = safeSize;
+		}
+	}
+	if (Math.abs(remainingSize) > .001) for (let i = 0; i < nextLayout.length; i++) {
+		const prevSize = nextLayout[i];
+		const safeSize = validatePanelSize({
+			size: prevSize + remainingSize,
+			prevSize,
+			constraints: constraints[i],
+			overrideDisabledPanels: true
+		});
+		if (Math.abs(prevSize - safeSize) > .001) {
+			remainingSize -= safeSize - prevSize;
+			nextLayout[i] = safeSize;
+			if (Math.abs(remainingSize) <= .001) break;
+		}
+	}
+	const finalTotal = nextLayout.reduce((a, b) => a + b, 0);
+	if (Math.abs(finalTotal - 100) > .01) return nextLayout.map((val) => parseFloat((val / finalTotal * 100).toFixed(3)));
+	return nextLayout;
+}
+function adjustLayout({ delta, layout: initialLayout, panels, handleIndex, groupSize, overrideDisabledPanels = false }) {
+	if (Math.abs(delta) < .001) return initialLayout;
+	const nextLayout = [...initialLayout];
+	const totalPanels = panels.length;
+	const isLeftGrowing = delta > 0;
+	const absDelta = Math.abs(delta);
+	const constraints = panels.map((p) => getResolvedConstraints(p, groupSize));
+	let deltaToShrink = absDelta;
+	let shrinkDeltaApplied = 0;
+	if (isLeftGrowing) for (let i = handleIndex + 1; i < totalPanels; i++) {
+		const prevSize = nextLayout[i];
+		const newSize = validatePanelSize({
+			size: prevSize - deltaToShrink,
+			prevSize,
+			constraints: constraints[i],
+			overrideDisabledPanels
+		});
+		const applied = prevSize - newSize;
+		shrinkDeltaApplied += applied;
+		nextLayout[i] = parseFloat(newSize.toFixed(3));
+		deltaToShrink -= applied;
+		if (deltaToShrink <= .001) break;
+	}
+	else for (let i = handleIndex; i >= 0; i--) {
+		const prevSize = nextLayout[i];
+		const newSize = validatePanelSize({
+			size: prevSize - deltaToShrink,
+			prevSize,
+			constraints: constraints[i],
+			overrideDisabledPanels
+		});
+		const applied = prevSize - newSize;
+		shrinkDeltaApplied += applied;
+		nextLayout[i] = parseFloat(newSize.toFixed(3));
+		deltaToShrink -= applied;
+		if (deltaToShrink <= .001) break;
+	}
+	let deltaToGrow = shrinkDeltaApplied;
+	if (isLeftGrowing) for (let i = handleIndex; i >= 0; i--) {
+		const prevSize = nextLayout[i];
+		const newSize = validatePanelSize({
+			size: prevSize + deltaToGrow,
+			prevSize,
+			constraints: constraints[i],
+			overrideDisabledPanels
+		});
+		const applied = newSize - prevSize;
+		nextLayout[i] = parseFloat(newSize.toFixed(3));
+		deltaToGrow -= applied;
+		if (deltaToGrow <= .001) break;
+	}
+	else for (let i = handleIndex + 1; i < totalPanels; i++) {
+		const prevSize = nextLayout[i];
+		const newSize = validatePanelSize({
+			size: prevSize + deltaToGrow,
+			prevSize,
+			constraints: constraints[i],
+			overrideDisabledPanels
+		});
+		const applied = newSize - prevSize;
+		nextLayout[i] = parseFloat(newSize.toFixed(3));
+		deltaToGrow -= applied;
+		if (deltaToGrow <= .001) break;
+	}
+	const total = nextLayout.reduce((sum, size) => sum + size, 0);
+	if (Math.abs(total - 100) > .01) return nextLayout.map((val) => parseFloat((val / total * 100).toFixed(3)));
+	return nextLayout;
+}
+function ResizablePanelGroup({ children, className, direction = "horizontal", onLayoutChange, onLayoutChanged, defaultLayout, storageKey, storage, groupRef, disabled = false, ...props }) {
+	const id = React$1.useId();
+	const panelsRef = React$1.useRef([]);
+	const handlesRef = React$1.useRef([]);
+	const containerRef = React$1.useRef(null);
+	const [layout, setLayout] = React$1.useState([]);
+	const [panelsList, setPanelsList] = React$1.useState([]);
+	const [activeHandleId, setActiveHandleId] = React$1.useState(null);
+	const [groupSize, setGroupSize] = React$1.useState(0);
+	const layoutRef = React$1.useRef(layout);
+	React$1.useEffect(() => {
+		layoutRef.current = layout;
+	}, [layout]);
+	const directionRef = React$1.useRef(direction);
+	React$1.useEffect(() => {
+		directionRef.current = direction;
+	}, [direction]);
+	const sortPanels = React$1.useCallback(() => {
+		panelsRef.current.sort((a, b) => {
+			const elA = a.ref.current;
+			const elB = b.ref.current;
+			if (!elA || !elB) return 0;
+			return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+		});
+		setPanelsList([...panelsRef.current]);
+	}, []);
+	const sortHandles = React$1.useCallback(() => {
+		handlesRef.current.sort((a, b) => {
+			const elA = a.ref.current;
+			const elB = b.ref.current;
+			if (!elA || !elB) return 0;
+			return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+		});
+	}, []);
+	const registerPanel = React$1.useCallback((panelId, ref, config) => {
+		panelsRef.current.push({
+			id: panelId,
+			ref,
+			config
+		});
+		sortPanels();
+		return () => {
+			panelsRef.current = panelsRef.current.filter((p) => p.id !== panelId);
+			sortPanels();
+		};
+	}, [sortPanels]);
+	const registerHandle = React$1.useCallback((handleId, ref, config) => {
+		handlesRef.current.push({
+			id: handleId,
+			ref,
+			config
+		});
+		sortHandles();
+		return () => {
+			handlesRef.current = handlesRef.current.filter((handle) => handle.id !== handleId);
+			sortHandles();
+		};
+	}, [sortHandles]);
+	React$1.useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) if (entry.target === container) {
+				const isHorizontal = directionRef.current === "horizontal";
+				const newSize = panelsRef.current.reduce((total, panel) => {
+					const el = panel.ref.current;
+					if (!el) return total;
+					return total + (isHorizontal ? el.offsetWidth : el.offsetHeight);
+				}, 0);
+				if (newSize > 0) setGroupSize((prevSize) => {
+					if (prevSize === newSize) return prevSize;
+					setLayout((prevLayout) => {
+						if (prevLayout.length === 0 || prevSize <= 0) return prevLayout;
+						let fixedPanelsTotalPercent = 0;
+						let flexiblePanelsTotalPrevPercent = 0;
+						let hasPreservePixelSize = false;
+						const fixedPercentMap = /* @__PURE__ */ new Map();
+						const flexibleIndices = [];
+						panelsRef.current.forEach((panel, i) => {
+							const prevVal = prevLayout[i] ?? 0;
+							if (panel.config.groupResizeBehavior === "preserve-pixel-size") {
+								hasPreservePixelSize = true;
+								const prevSizeInPixels = prevVal / 100 * prevSize;
+								const nextPercent = parseFloat((prevSizeInPixels / newSize * 100).toFixed(3));
+								fixedPercentMap.set(i, nextPercent);
+								fixedPanelsTotalPercent += nextPercent;
+							} else {
+								flexibleIndices.push(i);
+								flexiblePanelsTotalPrevPercent += prevVal;
+							}
+						});
+						if (!hasPreservePixelSize || flexibleIndices.length === 0) return prevLayout;
+						const remainingPercent = 100 - fixedPanelsTotalPercent;
+						const nextLayout = [...prevLayout];
+						fixedPercentMap.forEach((pct, i) => {
+							nextLayout[i] = pct;
+						});
+						if (flexiblePanelsTotalPrevPercent > 0) flexibleIndices.forEach((i) => {
+							const prevVal = prevLayout[i] ?? 0;
+							nextLayout[i] = parseFloat((prevVal / flexiblePanelsTotalPrevPercent * remainingPercent).toFixed(3));
+						});
+						else {
+							const share = remainingPercent / flexibleIndices.length;
+							flexibleIndices.forEach((i) => {
+								nextLayout[i] = parseFloat(share.toFixed(3));
+							});
+						}
+						return validateLayoutUnderConstraints(nextLayout, newSize, panelsRef.current);
+					});
+					return newSize;
+				});
+			}
+		});
+		observer.observe(container);
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+	React$1.useEffect(() => {
+		if (panelsList.length === 0) return;
+		setLayout((prev) => {
+			if (prev.length === panelsList.length) return prev;
+			const newLayout = Array.from({ length: panelsList.length }).fill(0);
+			let totalSpecified = 0;
+			let unspecifiedCount = 0;
+			panelsList.forEach((panel, i) => {
+				const def = defaultLayout?.[i] ?? panel.config.defaultSize;
+				if (def !== void 0) {
+					const [val, unit] = parseSizeAndUnit(def);
+					let pct = val;
+					if (unit !== "%") {
+						if (groupSize > 0) pct = convertSizeToPixels(def, panel.ref.current, groupSize) / groupSize * 100;
+						else pct = unit === "px" ? 0 : val;
+					}
+					newLayout[i] = parseFloat(pct.toFixed(3));
+					totalSpecified += pct;
+				} else unspecifiedCount++;
+			});
+			if (unspecifiedCount > 0) {
+				const share = Math.max(0, 100 - totalSpecified) / unspecifiedCount;
+				panelsList.forEach((panel, i) => {
+					if (defaultLayout?.[i] === void 0 && panel.config.defaultSize === void 0) newLayout[i] = parseFloat(share.toFixed(3));
+				});
+			} else if (Math.abs(totalSpecified - 100) > .05 && totalSpecified > 0) panelsList.forEach((_, i) => {
+				newLayout[i] = parseFloat((newLayout[i] / totalSpecified * 100).toFixed(3));
+			});
+			return validateLayoutUnderConstraints(newLayout, groupSize, panelsList);
+		});
+	}, [
+		panelsList,
+		groupSize,
+		defaultLayout
+	]);
+	const onLayoutChangedRef = React$1.useRef(onLayoutChanged);
+	React$1.useEffect(() => {
+		onLayoutChangedRef.current = onLayoutChanged;
+	}, [onLayoutChanged]);
+	const triggerLayoutChanged = React$1.useCallback(() => {
+		onLayoutChangedRef.current?.(layoutRef.current);
+	}, []);
+	React$1.useEffect(() => {
+		if (!storageKey || panelsList.length === 0) return;
+		try {
+			const finalKey = `${storageKey}:${panelsRef.current.map((p) => p.id).join(":")}`;
+			const saved = (storage || window.localStorage).getItem(finalKey);
+			if (saved) {
+				const parsed = JSON.parse(saved);
+				if (Array.isArray(parsed) && parsed.length === panelsRef.current.length) {
+					const validated = validateLayoutUnderConstraints(parsed, groupSize, panelsList);
+					setLayout(validated);
+				}
+			}
+		} catch (e) {
+			console.warn("Resizable: Failed to load layout from storage", e);
+		}
+	}, [
+		storageKey,
+		storage,
+		panelsList,
+		groupSize
+	]);
+	const prevLayoutStringRef = React$1.useRef("");
+	React$1.useEffect(() => {
+		if (layout.length === 0) return;
+		const layoutStr = JSON.stringify(layout);
+		if (prevLayoutStringRef.current !== layoutStr) {
+			prevLayoutStringRef.current = layoutStr;
+			onLayoutChange?.(layout);
+			if (storageKey && panelsRef.current.length > 0) try {
+				const finalKey = `${storageKey}:${panelsRef.current.map((p) => p.id).join(":")}`;
+				(storage || window.localStorage).setItem(finalKey, layoutStr);
+			} catch (e) {
+				console.warn("Resizable: Failed to save layout to storage", e);
+			}
+		}
+	}, [
+		layout,
+		onLayoutChange,
+		storageKey,
+		storage
+	]);
+	const prevCollapsedRef = React$1.useRef({});
+	React$1.useEffect(() => {
+		if (layout.length === 0 || panelsList.length !== layout.length || groupSize === 0) return;
+		const nextCollapsed = {};
+		panelsList.forEach((panel, i) => {
+			const size = layout[i];
+			if (size === void 0) return;
+			const pc = getResolvedConstraints(panel, groupSize);
+			const isCollapsed = pc.collapsible && Math.abs(size - pc.collapsedSize) < .01;
+			nextCollapsed[panel.id] = isCollapsed;
+			const wasCollapsed = prevCollapsedRef.current[panel.id];
+			if (wasCollapsed !== void 0 && wasCollapsed !== isCollapsed) {
+				if (isCollapsed) panel.config.onCollapse?.();
+				else panel.config.onExpand?.();
+			}
+		});
+		prevCollapsedRef.current = nextCollapsed;
+	}, [
+		layout,
+		panelsList,
+		groupSize
+	]);
+	React$1.useEffect(() => {
+		activeGroups.set(id, {
+			groupId: id,
+			direction,
+			element: containerRef.current,
+			groupSize,
+			panels: panelsRef.current,
+			handles: handlesRef.current,
+			layout,
+			setLayout: (nextLayout) => {
+				setLayout(nextLayout);
+			},
+			setActiveHandleId,
+			triggerLayoutChanged
+		});
+		return () => {
+			activeGroups.delete(id);
+		};
+	}, [
+		id,
+		direction,
+		groupSize,
+		layout,
+		triggerLayoutChanged
+	]);
+	React$1.useImperativeHandle(groupRef, () => ({
+		getLayout: () => layoutRef.current,
+		setLayout: (newLayout) => {
+			if (newLayout.length !== panelsRef.current.length) return;
+			const validated = validateLayoutUnderConstraints(newLayout, groupSize, panelsRef.current);
+			setLayout(validated);
+		}
+	}));
+	const startDragging = React$1.useCallback((handleId, event) => {
+		if (disabled) return;
+		event.preventDefault();
+		if (!containerRef.current || groupSize === 0) return;
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const activeDragHandles = [];
+		activeGroups.forEach((group) => {
+			group.handles.forEach((h) => {
+				const handleEl = h.ref.current;
+				if (!handleEl || h.config?.disabled) return;
+				const rect = handleEl.getBoundingClientRect();
+				const threshold = 12;
+				if (startX >= rect.left - threshold && startX <= rect.right + threshold && startY >= rect.top - threshold && startY <= rect.bottom + threshold) {
+					const handleIndex = group.handles.findIndex((item) => item.id === h.id);
+					if (handleIndex !== -1 && handleIndex < group.panels.length - 1) activeDragHandles.push({
+						groupId: group.groupId,
+						handleId: h.id,
+						handleIndex,
+						direction: group.direction,
+						initialLayout: [...group.layout],
+						groupSize: group.groupSize,
+						handleEl
+					});
+				}
+			});
+		});
+		if (activeDragHandles.length === 0) return;
+		activeDragHandles.forEach((adh) => {
+			const group = activeGroups.get(adh.groupId);
+			if (group) group.setActiveHandleId(adh.handleId);
+		});
+		const hasHorizontal = activeDragHandles.some((h) => h.direction === "horizontal");
+		const hasVertical = activeDragHandles.some((h) => h.direction === "vertical");
+		let cursorStyle = "col-resize";
+		if (hasHorizontal && hasVertical) cursorStyle = "move";
+		else if (hasVertical) cursorStyle = "row-resize";
+		const style = document.createElement("style");
+		style.id = `resizable-style-${handleId}`;
+		style.innerHTML = `* { cursor: ${cursorStyle} !important; user-select: none !important; }`;
+		document.head.appendChild(style);
+		const handlePointerMove = (moveEvent) => {
+			const clickedAdh = activeDragHandles.find((adh) => adh.handleId === handleId);
+			if (clickedAdh?.handleEl && !clickedAdh.handleEl.hasPointerCapture(moveEvent.pointerId)) clickedAdh.handleEl.setPointerCapture(moveEvent.pointerId);
+			activeDragHandles.forEach((adh) => {
+				const { direction: activeDirection, initialLayout, handleIndex, groupSize: activeGroupSize, groupId } = adh;
+				const group = activeGroups.get(groupId);
+				if (!group || activeGroupSize === 0) return;
+				const next = adjustLayout({
+					delta: ((activeDirection === "horizontal" ? moveEvent.clientX : moveEvent.clientY) - (activeDirection === "horizontal" ? startX : startY)) / activeGroupSize * 100,
+					layout: initialLayout,
+					panels: group.panels,
+					handleIndex,
+					groupSize: activeGroupSize,
+					overrideDisabledPanels: false
+				});
+				group.setLayout(next);
+			});
+		};
+		const handlePointerUp = () => {
+			activeDragHandles.forEach((adh) => {
+				const group = activeGroups.get(adh.groupId);
+				if (group) {
+					group.setActiveHandleId(null);
+					group.triggerLayoutChanged();
+				}
+			});
+			document.getElementById(`resizable-style-${handleId}`)?.remove();
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+	}, [disabled, groupSize]);
+	const handleKeyDown = React$1.useCallback((handleId, event) => {
+		if (disabled || groupSize <= 0) return;
+		const handleIndex = handlesRef.current.findIndex((h) => h.id === handleId);
+		if (handleIndex === -1 || handleIndex >= panelsRef.current.length - 1) return;
+		if (handlesRef.current[handleIndex].config?.disabled) return;
+		const isHorizontal = directionRef.current === "horizontal";
+		const currentLayout = [...layoutRef.current];
+		const panelA = panelsRef.current[handleIndex];
+		const panelB = panelsRef.current[handleIndex + 1];
+		let deltaPercent = 0;
+		const step = event.shiftKey ? 10 : 5;
+		switch (event.key) {
+			case "ArrowLeft":
+				if (isHorizontal) deltaPercent = -step;
+				break;
+			case "ArrowUp":
+				if (!isHorizontal) deltaPercent = -step;
+				break;
+			case "ArrowRight":
+				if (isHorizontal) deltaPercent = step;
+				break;
+			case "ArrowDown":
+				if (!isHorizontal) deltaPercent = step;
+				break;
+			case "Home": {
+				const pc = getResolvedConstraints(panelA, groupSize);
+				deltaPercent = -currentLayout[handleIndex] + (pc.collapsible ? pc.collapsedSize : pc.minSize);
+				break;
+			}
+			case "End": {
+				const pc = getResolvedConstraints(panelB, groupSize);
+				deltaPercent = currentLayout[handleIndex + 1] - (pc.collapsible ? pc.collapsedSize : pc.minSize);
+				break;
+			}
+			case "Enter": {
+				event.preventDefault();
+				const pc = getResolvedConstraints(panelA, groupSize);
+				if (pc.collapsible) {
+					const sizeA = currentLayout[handleIndex];
+					const isCollapsed = Math.abs(sizeA - pc.collapsedSize) < .01;
+					let targetSize = sizeA;
+					if (isCollapsed) {
+						targetSize = panelA.expandToSize ?? pc.minSize;
+						if (targetSize === pc.collapsedSize) targetSize = pc.minSize > pc.collapsedSize ? pc.minSize : pc.collapsedSize + 1;
+					} else {
+						panelA.expandToSize = sizeA;
+						targetSize = pc.collapsedSize;
+					}
+					deltaPercent = targetSize - sizeA;
+				}
+				break;
+			}
+			case "F6": {
+				event.preventDefault();
+				const separatorElements = handlesRef.current.map((h) => h.ref.current).filter(Boolean);
+				const currentIndex = separatorElements.indexOf(event.currentTarget);
+				if (currentIndex !== -1) separatorElements[event.shiftKey ? currentIndex > 0 ? currentIndex - 1 : separatorElements.length - 1 : currentIndex + 1 < separatorElements.length ? currentIndex + 1 : 0]?.focus({ preventScroll: true });
+				return;
+			}
+			default: return;
+		}
+		event.preventDefault();
+		if (Math.abs(deltaPercent) < .001) return;
+		const next = adjustLayout({
+			delta: deltaPercent,
+			layout: currentLayout,
+			panels: panelsRef.current,
+			handleIndex,
+			groupSize,
+			overrideDisabledPanels: false
+		});
+		setLayout(next);
+		onLayoutChanged?.(next);
+	}, [
+		groupSize,
+		disabled,
+		onLayoutChanged
+	]);
+	const handleDoubleClick = React$1.useCallback((handleId) => {
+		if (disabled) return;
+		const handleIndex = handlesRef.current.findIndex((h) => h.id === handleId);
+		if (handleIndex === -1 || handleIndex >= panelsRef.current.length - 1) return;
+		const handle = handlesRef.current[handleIndex];
+		if (handle?.config?.disabled || handle?.config?.disableDoubleClick) return;
+		const currentLayout = [...layoutRef.current];
+		const panelA = panelsRef.current[handleIndex];
+		const sizeA = currentLayout[handleIndex];
+		const pc = getResolvedConstraints(panelA, groupSize);
+		if (!pc.collapsible) return;
+		const isCollapsed = Math.abs(sizeA - pc.collapsedSize) < .01;
+		let targetSize = sizeA;
+		if (isCollapsed) {
+			targetSize = panelA.expandToSize ?? pc.minSize;
+			if (targetSize === pc.collapsedSize) targetSize = pc.minSize > pc.collapsedSize ? pc.minSize : pc.collapsedSize + 1;
+		} else {
+			panelA.expandToSize = sizeA;
+			targetSize = pc.collapsedSize;
+		}
+		if (Math.abs(targetSize - sizeA) > .01) {
+			const next = adjustLayout({
+				delta: targetSize - sizeA,
+				layout: currentLayout,
+				panels: panelsRef.current,
+				handleIndex,
+				groupSize,
+				overrideDisabledPanels: false
+			});
+			setLayout(next);
+			onLayoutChanged?.(next);
+		}
+	}, [
+		groupSize,
+		disabled,
+		onLayoutChanged
+	]);
+	const resizePanel = React$1.useCallback((panelId, targetSize) => {
+		const panelIndex = panelsRef.current.findIndex((p) => p.id === panelId);
+		if (panelIndex === -1 || groupSize === 0) return;
+		const prev = layoutRef.current;
+		const currentSize = prev[panelIndex];
+		if (currentSize === void 0) return;
+		const delta = targetSize - currentSize;
+		if (Math.abs(delta) < .001) return;
+		const handleIndex = panelIndex === prev.length - 1 ? panelIndex - 1 : panelIndex;
+		const next = adjustLayout({
+			delta: panelIndex === handleIndex ? delta : -delta,
+			layout: prev,
+			panels: panelsRef.current,
+			handleIndex,
+			groupSize,
+			overrideDisabledPanels: true
+		});
+		if (JSON.stringify(prev) !== JSON.stringify(next)) setLayout(next);
+	}, [groupSize]);
+	const contextValue = React$1.useMemo(() => ({
+		direction,
+		registerPanel,
+		registerHandle,
+		startDragging,
+		handleKeyDown,
+		handleDoubleClick,
+		activeHandleId,
+		layout,
+		panels: panelsList,
+		handles: handlesRef.current,
+		groupSize,
+		resizePanel
+	}), [
+		direction,
+		registerPanel,
+		registerHandle,
+		startDragging,
+		handleKeyDown,
+		handleDoubleClick,
+		activeHandleId,
+		layout,
+		panelsList,
+		groupSize,
+		resizePanel
+	]);
+	return /* @__PURE__ */ jsx(ResizableGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: (node) => {
+				containerRef.current = node;
+			},
+			className: cn("flex size-full data-[panel-group-direction=vertical]:flex-col", className),
+			"data-panel-group": true,
+			"data-panel-group-direction": direction,
+			"data-slot": "resizable-group",
+			style: { touchAction: direction === "horizontal" ? "pan-y" : "pan-x" },
+			...props,
+			children
+		})
+	});
+}
+function ResizablePanel({ id: idProp, children, className, defaultSize, minSize = "0%", maxSize = "100%", collapsible = false, collapsedSize = "0%", disabled = false, groupResizeBehavior = "preserve-relative-size", onResize, onCollapse, onExpand, panelRef, style, ...props }) {
+	const reactId = React$1.useId();
+	const id = idProp || reactId;
+	const ref = React$1.useRef(null);
+	const { registerPanel, layout, panels, resizePanel, groupSize, direction } = useResizableGroup();
+	const expandToSizeRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
+		return registerPanel(id, ref, {
+			defaultSize,
+			minSize,
+			maxSize,
+			collapsible,
+			collapsedSize,
+			disabled,
+			groupResizeBehavior,
+			onResize,
+			onCollapse,
+			onExpand
+		});
+	}, [
+		id,
+		registerPanel,
+		defaultSize,
+		minSize,
+		maxSize,
+		collapsible,
+		collapsedSize,
+		disabled,
+		groupResizeBehavior,
+		onResize,
+		onCollapse,
+		onExpand
+	]);
+	const index = panels.findIndex((p) => p.id === id);
+	const size = index !== -1 ? layout[index] : void 0;
+	const pc = index !== -1 && groupSize > 0 ? getResolvedConstraints(panels[index], groupSize) : {
+		collapsedSize: 0,
+		minSize: 0,
+		maxSize: 100,
+		collapsible: false,
+		disabled: false
+	};
+	const isCollapsed = size !== void 0 && pc.collapsible && Math.abs(size - pc.collapsedSize) < .01;
+	const prevSizeRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
+		if (size === void 0) return;
+		const currentPixels = ref.current ? direction === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight : 0;
+		const currentSizeObj = {
+			asPercentage: size,
+			inPixels: currentPixels
+		};
+		if (!prevSizeRef.current || Math.abs(prevSizeRef.current.asPercentage - currentSizeObj.asPercentage) > .01 || Math.abs(prevSizeRef.current.inPixels - currentSizeObj.inPixels) > 1) {
+			onResize?.(currentSizeObj);
+			prevSizeRef.current = currentSizeObj;
+		}
+	}, [
+		size,
+		direction,
+		onResize
+	]);
+	React$1.useEffect(() => {
+		if (index !== -1 && size !== void 0) {
+			const activePanel = panels[index];
+			if (activePanel) {
+				if (!isCollapsed) {
+					activePanel.expandToSize = size;
+					expandToSizeRef.current = size;
+				} else activePanel.expandToSize = expandToSizeRef.current;
+			}
+		}
+	}, [
+		size,
+		isCollapsed,
+		index,
+		panels
+	]);
+	React$1.useImperativeHandle(panelRef, () => ({
+		collapse: () => {
+			const idx = panels.findIndex((p) => p.id === id);
+			if (idx === -1) return;
+			const constraints = getResolvedConstraints(panels[idx], groupSize);
+			if (constraints.collapsible && size !== constraints.collapsedSize) {
+				expandToSizeRef.current = size;
+				panels[idx].expandToSize = size;
+				resizePanel(id, constraints.collapsedSize);
+			}
+		},
+		expand: () => {
+			const idx = panels.findIndex((p) => p.id === id);
+			if (idx === -1) return;
+			const constraints = getResolvedConstraints(panels[idx], groupSize);
+			const panelIsCollapsed = size === constraints.collapsedSize;
+			if (constraints.collapsible && panelIsCollapsed) {
+				let target = expandToSizeRef.current ?? constraints.minSize;
+				if (target === constraints.collapsedSize) target = constraints.minSize > constraints.collapsedSize ? constraints.minSize : constraints.collapsedSize + 1;
+				resizePanel(id, target);
+			}
+		},
+		resize: (newSize) => {
+			const pixels = convertSizeToPixels(newSize, ref.current, groupSize);
+			const pct = parseFloat((pixels / groupSize * 100).toFixed(3));
+			resizePanel(id, pct);
+		},
+		isCollapsed: () => {
+			const idx = panels.findIndex((p) => p.id === id);
+			if (idx === -1) return false;
+			const constraints = getResolvedConstraints(panels[idx], groupSize);
+			return constraints.collapsible && Math.abs((size ?? 0) - constraints.collapsedSize) < .01;
+		},
+		isExpanded: () => {
+			const idx = panels.findIndex((p) => p.id === id);
+			if (idx === -1) return true;
+			const constraints = getResolvedConstraints(panels[idx], groupSize);
+			return !constraints.collapsible || Math.abs((size ?? 0) - constraints.collapsedSize) >= .01;
+		},
+		getSize: () => {
+			return {
+				asPercentage: size ?? 0,
+				inPixels: ref.current ? direction === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight : 0
+			};
+		}
+	}));
+	const outerStyle = {
+		...size !== void 0 ? {
+			flexGrow: size,
+			flexShrink: 1,
+			flexBasis: "0px"
+		} : {
+			flexGrow: 1,
+			flexShrink: 1,
+			flexBasis: "0px"
+		},
+		display: "flex",
+		flexBasis: "0px",
+		flexShrink: 1,
+		overflow: "hidden",
+		minHeight: 0,
+		minWidth: 0
+	};
+	const innerStyle = {
+		maxHeight: "100%",
+		maxWidth: "100%",
+		flexGrow: 1,
+		overflow: "auto",
+		touchAction: direction === "horizontal" ? "pan-y" : "pan-x",
+		...style
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			ref.current = node;
+		},
+		style: outerStyle,
+		"data-panel": true,
+		"data-disabled": disabled || void 0,
+		"data-state": isCollapsed ? "collapsed" : "expanded",
+		"data-slot": "resizable-panel-outer",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("size-full select-none relative", isCollapsed && "pointer-events-none", className),
+			style: innerStyle,
+			"data-slot": "resizable-panel",
+			children
+		})
+	});
+}
+function ResizableHandle({ className, style, withHandle = false, disabled = false, disableDoubleClick = false, ...props }) {
+	const id = React$1.useId();
+	const ref = React$1.useRef(null);
+	const { direction, registerHandle, startDragging, handleKeyDown, handleDoubleClick, activeHandleId, layout, panels, handles, groupSize } = useResizableGroup();
+	const [isFocused, setIsFocused] = React$1.useState(false);
+	React$1.useEffect(() => {
+		return registerHandle(id, ref, {
+			disabled,
+			disableDoubleClick
+		});
+	}, [
+		id,
+		registerHandle,
+		disabled,
+		disableDoubleClick
+	]);
+	const isHorizontal = direction === "horizontal";
+	const isDragging = activeHandleId === id;
+	const handleClasses = cn("relative flex items-center justify-center transition-colors select-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 z-10 bg-border", isHorizontal ? "w-px h-full cursor-col-resize before:absolute before:inset-y-0 before:inset-x-0 before:bg-gradient-to-b before:from-transparent before:via-ring/80 before:to-transparent before:opacity-0 before:transition-opacity before:duration-300 hover:before:opacity-100 data-[state=dragging]:before:opacity-100 after:absolute after:-inset-x-2 after:inset-y-0 pointer-coarse:after:-inset-x-5" : "h-px w-full cursor-row-resize before:absolute before:inset-x-0 before:inset-y-0 before:bg-gradient-to-r before:from-transparent before:via-ring/80 before:to-transparent before:opacity-0 before:transition-opacity before:duration-300 hover:before:opacity-100 data-[state=dragging]:before:opacity-100 after:absolute after:-inset-y-2 after:inset-x-0 pointer-coarse:after:-inset-y-5", isDragging && "before:opacity-100", disabled && "pointer-events-none opacity-64", className);
+	const handlePointerDown = React$1.useCallback((event) => {
+		if (disabled) return;
+		startDragging(id, event);
+	}, [
+		id,
+		disabled,
+		startDragging
+	]);
+	const onKeyDown = React$1.useCallback((event) => {
+		if (disabled) return;
+		handleKeyDown(id, event);
+	}, [
+		id,
+		disabled,
+		handleKeyDown
+	]);
+	const onDoubleClick = React$1.useCallback((event) => {
+		if (disabled) return;
+		event.preventDefault();
+		handleDoubleClick(id);
+	}, [
+		id,
+		disabled,
+		handleDoubleClick
+	]);
+	const handleIndex = handles.findIndex((h) => h.id === id);
+	let ariaValueNow;
+	let ariaValueMin;
+	let ariaValueMax;
+	let controlledPanelId;
+	if (handleIndex !== -1 && handleIndex < panels.length - 1 && layout.length > handleIndex && groupSize > 0) {
+		controlledPanelId = panels[handleIndex].id;
+		ariaValueNow = Math.round(layout[handleIndex]);
+		const minLayout = adjustLayout({
+			delta: -100,
+			layout,
+			panels,
+			handleIndex,
+			groupSize,
+			overrideDisabledPanels: false
+		});
+		ariaValueMin = Math.round(minLayout[handleIndex]);
+		const maxLayout = adjustLayout({
+			delta: 100,
+			layout,
+			panels,
+			handleIndex,
+			groupSize,
+			overrideDisabledPanels: false
+		});
+		ariaValueMax = Math.round(maxLayout[handleIndex]);
+	}
+	let dataSeparator = "idle";
+	if (disabled) dataSeparator = "disabled";
+	else if (isDragging) dataSeparator = "active";
+	else if (isFocused) dataSeparator = "focus";
+	return /* @__PURE__ */ jsx("button", {
+		ref: (node) => {
+			ref.current = node;
+		},
+		type: "button",
+		className: handleClasses,
+		onPointerDown: handlePointerDown,
+		onKeyDown,
+		onDoubleClick,
+		onFocus: () => setIsFocused(true),
+		onBlur: () => setIsFocused(false),
+		role: "separator",
+		tabIndex: disabled ? -1 : 0,
+		"aria-orientation": isHorizontal ? "vertical" : "horizontal",
+		"aria-valuenow": ariaValueNow,
+		"aria-valuemin": ariaValueMin,
+		"aria-valuemax": ariaValueMax,
+		"aria-controls": controlledPanelId,
+		"aria-disabled": disabled || void 0,
+		"data-separator": dataSeparator,
+		"data-slot": "resizable-handle",
+		"data-state": isDragging ? "dragging" : "idle",
+		style: {
+			touchAction: "none",
+			...style
+		},
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("div", {
+			className: cn("absolute rounded-md bg-background border shadow-xs/5 flex items-center justify-center pointer-events-none z-20 hover:scale-105 transition-transform [&_svg:not([class*='size-'])]:size-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", isHorizontal ? "h-6 w-3.5 left-1/2 -translate-x-1/2" : "h-3.5 w-6 top-1/2 -translate-y-1/2"),
+			children: isHorizontal ? /* @__PURE__ */ jsx(GripVertical, { className: "size-2 text-muted-foreground/64" }) : /* @__PURE__ */ jsx(GripHorizontal, { className: "size-2 text-muted-foreground/64" })
+		})
+	});
+}
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };