@postxl/ui-components 1.5.5 → 1.6.1

package/dist/index.js

@@ -70,7 +70,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import useEmblaCarousel from "embla-carousel-react";
-import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, Check, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, DownloadIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PanelRightIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
+import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, Check, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, DownloadIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, GripVerticalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PanelRightIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
 import * as CollapsePrimitive from "@radix-ui/react-collapsible";
 import { Command as Command$1 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -91,6 +91,7 @@ import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, MeasuringStrateg
 import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import * as ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
@@ -9756,12 +9757,24 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
 const SidebarTabsContext = React$11.createContext(null);
 function SidebarTabsProvider({ children, storageKey }) {
 	const [tabsMap, setTabsMap] = React$11.useState({});
+	const [portalTargets, setPortalTargets] = React$11.useState({});
 	const fallbackKey = React$11.useId();
 	const [storedActiveTabs, setStoredActiveTabs] = useLocalStorageState(storageKey ?? fallbackKey, {
 		defaultValue: {},
 		storageSync: !!storageKey
 	});
 	const [activeTab, setActiveTabState] = React$11.useState(storedActiveTabs);
+	const setPortalTarget = React$11.useCallback((side, tabId, element) => {
+		setPortalTargets((prev) => {
+			const next = new Map(prev[side]);
+			if (element) next.set(tabId, element);
+			else next.delete(tabId);
+			return {
+				...prev,
+				[side]: next
+			};
+		});
+	}, []);
 	const register = React$11.useCallback((side, tab) => {
 		setTabsMap((prev) => {
 			const next = new Map(prev[side]);
@@ -9815,13 +9828,17 @@ function SidebarTabsProvider({ children, storageKey }) {
 		activeTab: resolvedActiveTab,
 		register,
 		unregister,
-		setActiveTab
+		setActiveTab,
+		portalTargets,
+		setPortalTarget
 	}), [
 		sortedTabs,
 		resolvedActiveTab,
 		register,
 		unregister,
-		setActiveTab
+		setActiveTab,
+		portalTargets,
+		setPortalTarget
 	]);
 	return /* @__PURE__ */ jsx(SidebarTabsContext.Provider, {
 		value,
@@ -9850,21 +9867,17 @@ function useSidebarTabs(side) {
 
 //#endregion
 //#region src/sidebar/sidebar-tab.tsx
-function SidebarTab({ side, id, icon, label, render, order, badge }) {
+function SidebarTab({ side, id, icon, label, order, badge, children }) {
 	const ctx = React$10.useContext(SidebarTabsContext);
 	if (!ctx) throw new Error("SidebarTab must be used within a SidebarTabsProvider.");
 	const { register, unregister } = ctx;
-	const renderRef = React$10.useRef(render);
-	renderRef.current = render;
 	const iconRef = React$10.useRef(icon);
 	iconRef.current = icon;
-	const stableRender = React$10.useCallback(() => renderRef.current(), []);
 	React$10.useEffect(() => {
 		register(side, {
 			id,
 			icon: iconRef.current,
 			label,
-			render: stableRender,
 			order,
 			badge
 		});
@@ -9876,17 +9889,17 @@ function SidebarTab({ side, id, icon, label, render, order, badge }) {
 		order,
 		badge,
 		register,
-		unregister,
-		stableRender
+		unregister
 	]);
-	return null;
+	const target = ctx.portalTargets[side]?.get(id);
+	if (!target) return null;
+	return createPortal(children, target);
 }
 function DynamicTabbedSidebar({ side, orientation = "horizontal", collapsible = "offcanvas", className,...sidebarProps }) {
 	const ctx = React$10.useContext(SidebarTabsContext);
 	if (!ctx) throw new Error("DynamicTabbedSidebar must be used within a SidebarTabsProvider.");
 	const tabs = ctx.tabs[side] ?? [];
 	const activeTabId = ctx.activeTab[side] ?? null;
-	const activeTab = tabs.find((t) => t.id === activeTabId);
 	const isVertical = orientation === "vertical";
 	const effectiveCollapsible = isVertical && collapsible === "offcanvas" ? "icon" : collapsible;
 	if (tabs.length === 0) return null;
@@ -9899,23 +9912,49 @@ function DynamicTabbedSidebar({ side, orientation = "horizontal", collapsible =
 			side,
 			tabs,
 			activeTabId,
-			activeTab,
 			isVertical,
 			collapsible: effectiveCollapsible
 		}), /* @__PURE__ */ jsx(SidebarRail, {})] })
 	});
 }
-function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical, collapsible }) {
+function TabPortalTargets({ side, tabs, activeTabId, hidden }) {
+	const ctx = React$10.useContext(SidebarTabsContext);
+	const callbackRefs = React$10.useRef(new Map());
+	const getRef = (tabId) => {
+		let ref = callbackRefs.current.get(tabId);
+		if (!ref) {
+			ref = (el) => {
+				ctx.setPortalTarget(side, tabId, el);
+			};
+			callbackRefs.current.set(tabId, ref);
+		}
+		return ref;
+	};
+	return /* @__PURE__ */ jsx(Fragment, { children: tabs.map((tab) => {
+		const isVisible = !hidden && tab.id === activeTabId;
+		return /* @__PURE__ */ jsx("div", {
+			ref: getRef(tab.id),
+			hidden: !isVisible || void 0,
+			className: isVisible ? "flex flex-col flex-1 min-h-0" : void 0
+		}, tab.id);
+	}) });
+}
+function TabbedSidebarContent({ side, tabs, activeTabId, isVertical, collapsible }) {
 	const { state } = useSidebar(side);
 	const isCollapsed = state === "collapsed";
 	const isIconCollapsible = collapsible === "icon";
-	if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsx("div", {
+	if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col",
-		children: /* @__PURE__ */ jsx(VerticalTabBar, {
+		children: [/* @__PURE__ */ jsx(VerticalTabBar, {
 			side,
 			tabs,
 			activeTabId
-		})
+		}), /* @__PURE__ */ jsx(TabPortalTargets, {
+			side,
+			tabs,
+			activeTabId,
+			hidden: true
+		})]
 	});
 	if (isVertical) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-row",
@@ -9923,7 +9962,11 @@ function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical,
 			side,
 			tabs,
 			activeTabId
-		}), /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })]
+		}), /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(TabPortalTargets, {
+			side,
+			tabs,
+			activeTabId
+		}) })]
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col",
@@ -9934,7 +9977,11 @@ function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical,
 				activeTabId
 			}),
 			tabs.length > 0 && /* @__PURE__ */ jsx(SidebarSeparator, {}),
-			/* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
+			/* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(TabPortalTargets, {
+				side,
+				tabs,
+				activeTabId
+			}) })
 		]
 	});
 }
@@ -11288,112 +11335,314 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 //#endregion
 //#region src/tree-view/tree-view.tsx
-const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, isLast = false, parentIsLast = [], defaultExpandedIds = [], selectedId }) => {
+const DragContext = React$1.createContext({
+	dragState: {
+		draggedNodeId: null,
+		dropTarget: null
+	},
+	setDragState: () => {}
+});
+/** Checks if `targetId` is a descendant of `ancestorId` in the tree. Used to prevent dropping a node into itself. */
+function isDescendant(nodes, ancestorId, targetId) {
+	for (const node of nodes) {
+		if (node.id === ancestorId && node.children) return containsNode(node.children, targetId);
+		if (node.children && isDescendant(node.children, ancestorId, targetId)) return true;
+	}
+	return false;
+}
+/** Recursively checks if any node in the subtree has the given id. */
+function containsNode(nodes, targetId) {
+	for (const node of nodes) {
+		if (node.id === targetId) return true;
+		if (node.children && containsNode(node.children, targetId)) return true;
+	}
+	return false;
+}
+/** Finds and returns a node by id from anywhere in the tree. */
+function findNode(nodes, id) {
+	for (const node of nodes) {
+		if (node.id === id) return node;
+		if (node.children) {
+			const found = findNode(node.children, id);
+			if (found) return found;
+		}
+	}
+	return void 0;
+}
+const TreeBranch = ({ node, level, onNodeSelect, onGroupSelect, onToggleGroup, onNodeDelete, onNodeDrop, defaultExpandedIds = [], selectedId, rootData }) => {
 	const isGroup = node.type === "group";
 	const hasChildren = node.children && node.children.length > 0;
+	const { dragState, setDragState } = React$1.useContext(DragContext);
+	/** Determines drop position (before/after/inside) based on cursor proximity to element edges. */
+	const handleDragOver = (e) => {
+		if (!dragState.draggedNodeId || dragState.draggedNodeId === node.id) return;
+		if (isDescendant(rootData, dragState.draggedNodeId, node.id)) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const rect = e.currentTarget.getBoundingClientRect();
+		const distFromTop = e.clientY - rect.top;
+		const distFromBottom = rect.bottom - e.clientY;
+		const isExpanded = isGroup && hasChildren && defaultExpandedIds.includes(node.id);
+		let position;
+		if (distFromTop < 10) position = "before";
+		else if (!isExpanded && distFromBottom < 10) position = "after";
+		else position = "inside";
+		if (node.locked && position !== "inside") return;
+		setDragState((prev) => {
+			if (prev.dropTarget?.nodeId === node.id && prev.dropTarget.position === position) return prev;
+			return {
+				...prev,
+				dropTarget: {
+					nodeId: node.id,
+					position
+				}
+			};
+		});
+	};
+	/** Fires onNodeDrop with the source node and target info, then resets drag state. */
+	const handleDrop = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!dragState.draggedNodeId || !dragState.dropTarget || !onNodeDrop) return;
+		const sourceNode = findNode(rootData, dragState.draggedNodeId);
+		if (!sourceNode) return;
+		onNodeDrop(sourceNode, {
+			node,
+			position: dragState.dropTarget.position
+		});
+		setDragState({
+			draggedNodeId: null,
+			dropTarget: null
+		});
+	};
+	/** Clears drop target when the cursor leaves this node (but not when moving to a child element). */
+	const handleDragLeave = (e) => {
+		if (!e.currentTarget.contains(e.relatedTarget)) setDragState((prev) => prev.dropTarget?.nodeId === node.id ? {
+			...prev,
+			dropTarget: null
+		} : prev);
+	};
+	const isDraggedOver = dragState.dropTarget?.nodeId === node.id;
+	const dropPosition = dragState.dropTarget?.position;
+	const isDragging = dragState.draggedNodeId === node.id;
+	const indent = level * 24;
+	const dropLineBase = "after:absolute after:right-0 after:h-[2.5px] after:bg-primary after:left-(--drop-left) after:z-10";
+	const showLine = isDraggedOver && dropPosition;
+	const dropLineClass = cn("relative", {
+		[`after:top-0 ${dropLineBase}`]: showLine === "before",
+		[`after:-bottom-px ${dropLineBase}`]: showLine === "after" || showLine === "inside",
+		"opacity-50": isDragging
+	});
+	const dropLineStyle = (offset) => isDraggedOver ? { "--drop-left": `${offset + (dropPosition === "inside" ? 24 : 0)}px` } : {};
+	const dropHighlightClass = cn({ "bg-accent text-accent-foreground": isDraggedOver && dropPosition === "inside" });
 	if (!isGroup) return /* @__PURE__ */ jsxs("div", {
 		"data-test-id": `tree-node-${node.id}`,
-		className: cn("relative flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", node.className, { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }),
-		style: { marginLeft: `${level * 24}px` },
-		onClick: () => onNodeSelect?.(node),
+		className: cn("relative group/node flex items-center gap-2 py-1.5 px-2 rounded-md cursor-pointer hover:bg-accent hover:text-accent-foreground transition-colors border border-transparent hover:border hover:border-(--discreet-border)", node.className, { "bg-primary text-primary-foreground hover:border hover:border-(--discreet-border)": selectedId === node.id }, dropLineClass, dropHighlightClass),
+		style: {
+			marginLeft: `${indent}px`,
+			...dropLineStyle(0)
+		},
+		onClick: (e) => {
+			if (e.target.closest("[data-slot=\"drag-handle\"]")) return;
+			onNodeSelect?.(node);
+		},
+		onDragOver: onNodeDrop ? handleDragOver : void 0,
+		onDrop: onNodeDrop ? handleDrop : void 0,
+		onDragLeave: onNodeDrop ? handleDragLeave : void 0,
 		children: [
 			node.icon,
 			/* @__PURE__ */ jsx("span", {
 				className: "text-sm select-none truncate",
 				children: node.name
 			}),
-			node.trailing
+			node.trailing,
+			!node.locked && (onNodeDelete || onNodeDrop) && /* @__PURE__ */ jsx(NodeActions, {
+				node,
+				onNodeDelete,
+				onNodeDrop
+			})
 		]
 	});
 	return /* @__PURE__ */ jsxs(AccordionItem, {
 		value: node.id,
-		className: "border-0",
+		className: "border-0 overflow-y-visible overflow-x-clip",
 		"data-test-id": `tree-group-${node.id}`,
-		children: [/* @__PURE__ */ jsxs(AccordionTrigger, {
-			style: { "--margin-left": `calc(${level * 24 + 16}px - 16px)` },
-			className: cn("flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) hover:bg-accent hover:text-accent-foreground hover:no-underline transition-colors border border-transparent hover:border hover:border-(--discreet-border)", "[&>svg:last-child]:hidden", node.className, { "bg-primary text-primary-foreground": selectedId === node.id }),
-			children: [
-				/* @__PURE__ */ jsx(PlusIcon, {
-					"data-test-id": `tree-expand-${node.id}`,
-					className: "size-4 shrink-0 hidden [[data-state=closed]>&]:block hover:border rounded",
-					onClick: () => {
-						onToggleGroup?.({
-							isExpanded: true,
-							node
-						});
-					}
-				}),
-				/* @__PURE__ */ jsx(MinusIcon, {
-					"data-test-id": `tree-collapse-${node.id}`,
-					className: "size-4 shrink-0 hidden [[data-state=open]>&]:block hover:border rounded",
-					onClick: () => {
-						onToggleGroup?.({
-							isExpanded: false,
-							node
-						});
-					}
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					"data-test-id": `tree-group-label-${node.id}`,
-					className: "flex w-[calc(100%-16px)] gap-2",
-					onClick: (e) => {
-						e.stopPropagation();
-						onGroupSelect?.(node);
-					},
-					children: [
-						node.icon,
-						/* @__PURE__ */ jsx("span", {
-							className: "text-sm select-none truncate text-left",
-							children: node.name
-						}),
-						node.trailing
-					]
-				})
-			]
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative group/node overflow-y-visible overflow-x-clip", dropLineClass),
+			style: dropLineStyle(indent),
+			onDragOver: onNodeDrop ? handleDragOver : void 0,
+			onDrop: onNodeDrop ? handleDrop : void 0,
+			onDragLeave: onNodeDrop ? handleDragLeave : void 0,
+			children: [/* @__PURE__ */ jsxs(AccordionTrigger, {
+				style: { "--margin-left": `calc(${level * 24 + 16}px - 16px)` },
+				className: cn("relative flex flex-1 overflow-hidden items-center gap-2 py-1.5 px-2 rounded-md ml-(--margin-left) group-hover/node:bg-accent group-hover/node:text-accent-foreground hover:no-underline transition-colors border border-transparent group-hover/node:border group-hover/node:border-(--discreet-border)", "[&>svg:last-child]:hidden", node.className, { "bg-primary text-primary-foreground": selectedId === node.id }, dropHighlightClass),
+				children: [
+					/* @__PURE__ */ jsx(PlusIcon, {
+						"data-test-id": `tree-expand-${node.id}`,
+						className: "size-4 shrink-0 hidden [[data-state=closed]>&]:block hover:border rounded",
+						onClick: () => {
+							onToggleGroup?.({
+								isExpanded: true,
+								node
+							});
+						}
+					}),
+					/* @__PURE__ */ jsx(MinusIcon, {
+						"data-test-id": `tree-collapse-${node.id}`,
+						className: "size-4 shrink-0 hidden [[data-state=open]>&]:block hover:border rounded",
+						onClick: () => {
+							onToggleGroup?.({
+								isExpanded: false,
+								node
+							});
+						}
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-test-id": `tree-group-label-${node.id}`,
+						className: "flex w-[calc(100%-16px)] gap-2",
+						onClick: (e) => {
+							e.stopPropagation();
+							if (e.target.closest("[data-slot=\"dropdown-menu-trigger\"]")) return;
+							if (e.target.closest("[data-slot=\"drag-handle\"]")) return;
+							onGroupSelect?.(node);
+						},
+						children: [
+							node.icon,
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm select-none truncate text-left",
+								children: node.name
+							}),
+							node.trailing
+						]
+					})
+				]
+			}), !node.locked && (onNodeDelete || onNodeDrop) && /* @__PURE__ */ jsx(NodeActions, {
+				node,
+				onNodeDelete,
+				onNodeDrop
+			})]
 		}), hasChildren && /* @__PURE__ */ jsxs(AccordionContent, {
-			className: "pb-0 pt-0 relative",
+			className: "pb-0 pt-0 relative overflow-y-visible overflow-x-clip",
 			children: [/* @__PURE__ */ jsx("div", {
 				style: { "--left-offset": `calc(${level * 24 + 32}px - 16px)` },
 				className: "before:absolute before:top-0 before:start-(--left-offset) before:w-0.5 before:-ms-px before:h-full before:bg-sidebar-ring dark:before:bg-sidebar-ring"
 			}), /* @__PURE__ */ jsx(Accordion, {
 				type: "multiple",
 				value: defaultExpandedIds,
-				children: node.children?.map((child, index) => /* @__PURE__ */ jsx(TreeBranch, {
+				children: node.children?.map((child) => /* @__PURE__ */ jsx(TreeBranch, {
 					node: child,
 					level: level + 1,
 					onNodeSelect,
 					onGroupSelect,
 					onToggleGroup,
-					isLast: index === node.children.length - 1,
-					parentIsLast: [...parentIsLast, isLast],
+					onNodeDelete,
+					onNodeDrop,
 					defaultExpandedIds,
-					selectedId
+					selectedId,
+					rootData
 				}, child.id))
 			})]
 		})]
 	});
 };
-const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onToggleGroup, className, defaultExpandedIds = [], selectedId }, ref) => {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cn("w-full select-none", className),
-		children: /* @__PURE__ */ jsx(Accordion, {
-			type: "multiple",
-			value: defaultExpandedIds,
-			children: data.map((node, index) => /* @__PURE__ */ jsx(TreeBranch, {
-				node,
-				level: 0,
-				onNodeSelect,
-				onGroupSelect,
-				onToggleGroup,
-				isLast: index === data.length - 1,
-				parentIsLast: [],
-				defaultExpandedIds,
-				selectedId
-			}, node.id))
+const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onToggleGroup, onNodeDelete, onNodeDrop, className, defaultExpandedIds = [], selectedId }, ref) => {
+	const [dragState, setDragState] = React$1.useState({
+		draggedNodeId: null,
+		dropTarget: null
+	});
+	return /* @__PURE__ */ jsx(DragContext.Provider, {
+		value: {
+			dragState,
+			setDragState
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cn("w-full select-none", className),
+			onDragOver: onNodeDrop && dragState.draggedNodeId ? (e) => e.preventDefault() : void 0,
+			children: /* @__PURE__ */ jsx(Accordion, {
+				type: "multiple",
+				value: defaultExpandedIds,
+				children: data.map((node) => /* @__PURE__ */ jsx(TreeBranch, {
+					node,
+					level: 0,
+					onNodeSelect,
+					onGroupSelect,
+					onToggleGroup,
+					onNodeDelete,
+					onNodeDrop,
+					defaultExpandedIds,
+					selectedId,
+					rootData: data
+				}, node.id))
+			})
 		})
 	});
 });
+const NodeActions = ({ node, onNodeDelete, onNodeDrop }) => {
+	const [showDeleteConfirmation, setShowDeleteConfirmation] = React$1.useState(false);
+	const containerRef = React$1.useRef(null);
+	const { setDragState } = React$1.useContext(DragContext);
+	React$1.useEffect(() => {
+		if (!showDeleteConfirmation) return;
+		const handleClickOutside = (e) => {
+			if (containerRef.current && !containerRef.current.contains(e.target)) setShowDeleteConfirmation(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [showDeleteConfirmation]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "absolute top-1/2 -translate-y-1/2 end-1 flex items-center gap-0.5 rounded transition-none group-hover/node:bg-accent",
+		children: showDeleteConfirmation && onNodeDelete ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "iconXs",
+			onClick: (e) => {
+				e.stopPropagation();
+				setShowDeleteConfirmation(false);
+			},
+			children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "destructive",
+			size: "iconXs",
+			onClick: (e) => {
+				e.stopPropagation();
+				onNodeDelete(node);
+				setShowDeleteConfirmation(false);
+			},
+			children: /* @__PURE__ */ jsx(CheckIcon$1, { className: "size-4" })
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [onNodeDelete && /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "iconXs",
+			className: "opacity-0 group-hover/node:opacity-100",
+			onClick: (e) => {
+				e.stopPropagation();
+				setShowDeleteConfirmation(true);
+			},
+			children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-4" })
+		}), onNodeDrop && /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "iconXs",
+			"data-slot": "drag-handle",
+			draggable: true,
+			className: "opacity-0 group-hover/node:opacity-100 cursor-grab active:cursor-grabbing bg-transparent",
+			onDragStart: (e) => {
+				e.dataTransfer.effectAllowed = "move";
+				e.dataTransfer.setData("text/plain", node.id);
+				setDragState({
+					draggedNodeId: node.id,
+					dropTarget: null
+				});
+			},
+			onDragEnd: () => {
+				setDragState({
+					draggedNodeId: null,
+					dropTarget: null
+				});
+			},
+			children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-4" })
+		})] })
+	});
+};
 TreeView.displayName = "TreeView";
 
 //#endregion