@postxl/ui-components 1.6.0 → 1.6.2

package/dist/index.js

@@ -2,6 +2,7 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, Cross1Icon, Cross2Icon, DotFilledIcon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DragHandleDots2Icon, EnterFullScreenIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import * as React$60 from "react";
 import * as React$59 from "react";
 import * as React$58 from "react";
 import * as React$57 from "react";
@@ -70,7 +71,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, ClipboardCopy, 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";
@@ -128,13 +129,13 @@ function testId(baseId, suffix) {
 //#endregion
 //#region src/accordion/accordion.tsx
 const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React$59.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+const AccordionItem = React$60.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
 	ref,
 	className: cn("border-b", className),
 	...props
 }));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React$59.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+const AccordionTrigger = React$60.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
 		ref,
@@ -144,7 +145,7 @@ const AccordionTrigger = React$59.forwardRef(({ className, children,...props },
 	})
 }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React$59.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+const AccordionContent = React$60.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 	ref,
 	className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
 	...props,
@@ -164,21 +165,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Alert = React$58.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Alert = React$59.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	role: "alert",
 	className: cn(alertVariants({ variant }), className),
 	...props
 }));
 Alert.displayName = "Alert";
-const AlertTitle = React$58.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
+const AlertTitle = React$59.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
 	ref,
 	className: cn("mb-1 font-medium leading-none tracking-tight", className),
 	...props,
 	children
 }));
 AlertTitle.displayName = "AlertTitle";
-const AlertDescription = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const AlertDescription = React$59.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("text-sm [&_p]:leading-relaxed", className),
 	...props
@@ -238,13 +239,13 @@ function Button({ className, variant, size, asChild = false, __e2e_test_id__,...
 const AlertDialog = AlertDialogPrimitive.Root;
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
-const AlertDialogOverlay = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
+const AlertDialogOverlay = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
 	className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
 	...props,
 	ref
 }));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
+const AlertDialogContent = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
 	ref,
 	className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className),
 	...props
@@ -260,25 +261,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
 	...props
 });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-const AlertDialogTitle = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
+const AlertDialogTitle = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
 	ref,
 	className: cn("text-lg font-semibold", className),
 	...props
 }));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-const AlertDialogDescription = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
+const AlertDialogDescription = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-const AlertDialogAction = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
+const AlertDialogAction = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
 	ref,
 	className: cn(buttonVariants(), className),
 	...props
 }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
+const AlertDialogCancel = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
 	ref,
 	className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
 	...props
@@ -287,19 +288,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 //#endregion
 //#region src/avatar/avatar.tsx
-const Avatar = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+const Avatar = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
 	ref,
 	className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
 	...props
 }));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+const AvatarImage = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
 	ref,
 	className: cn("aspect-square h-full w-full", className),
 	...props
 }));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+const AvatarFallback = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
 	ref,
 	className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
 	...props
@@ -345,25 +346,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
 
 //#endregion
 //#region src/breadcrumb/breadcrumb.tsx
-const Breadcrumb = React$55.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+const Breadcrumb = React$56.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
 	ref,
 	"aria-label": "breadcrumb",
 	...props
 }));
 Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
+const BreadcrumbList = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
 	ref,
 	className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
 	...props
 }));
 BreadcrumbList.displayName = "BreadcrumbList";
-const BreadcrumbItem = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
+const BreadcrumbItem = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
 	ref,
 	className: cn("inline-flex items-center gap-1.5", className),
 	...props
 }));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-const BreadcrumbLink = React$55.forwardRef(({ asChild, className,...props }, ref) => {
+const BreadcrumbLink = React$56.forwardRef(({ asChild, className,...props }, ref) => {
 	const Comp = asChild ? Slot : "a";
 	return /* @__PURE__ */ jsx(Comp, {
 		ref,
@@ -372,7 +373,7 @@ const BreadcrumbLink = React$55.forwardRef(({ asChild, className,...props }, ref
 	});
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
+const BreadcrumbPage = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
 	ref,
 	"aria-disabled": "true",
 	"aria-current": "page",
@@ -402,8 +403,8 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 //#region src/calendar/calendar.tsx
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components, __e2e_test_id__,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const [rangeSelectionStep, setRangeSelectionStep] = React$54.useState("from");
-	const handleDayClick = React$54.useCallback((day, modifiers, e) => {
+	const [rangeSelectionStep, setRangeSelectionStep] = React$55.useState("from");
+	const handleDayClick = React$55.useCallback((day, modifiers, e) => {
 		if (props.mode === "range") {
 			const range = props.selected;
 			if (rangeSelectionStep === "from") {
@@ -433,8 +434,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 		fromMonth = props.startMonth ?? new Date(nowYear - 100, 0);
 		toMonth = props.endMonth ?? new Date(nowYear + 100, 11);
 	}
-	const [currentMonth, setCurrentMonth] = React$54.useState(props.defaultMonth ?? props.month ?? new Date());
-	React$54.useEffect(() => {
+	const [currentMonth, setCurrentMonth] = React$55.useState(props.defaultMonth ?? props.month ?? new Date());
+	React$55.useEffect(() => {
 		if (props.month) setCurrentMonth(props.month);
 	}, [props.month]);
 	const addMonths = (date, months) => {
@@ -578,8 +579,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 }
 function CalendarDayButton({ className, day, modifiers,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const ref = React$54.useRef(null);
-	React$54.useEffect(() => {
+	const ref = React$55.useRef(null);
+	React$55.useEffect(() => {
 		if (modifiers.focused) ref.current?.focus();
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
@@ -598,38 +599,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
 
 //#endregion
 //#region src/card/card.tsx
-const Card = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Card = React$54.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
 	...props
 }));
 Card.displayName = "Card";
-const CardHeader = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardHeader = React$54.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex flex-col space-y-1.5 p-6", className),
 	...props
 }));
 CardHeader.displayName = "CardHeader";
-const CardTitle = React$53.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
+const CardTitle = React$54.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
 	ref,
 	className: cn("font-semibold leading-none tracking-tight", className),
 	...props,
 	children
 }));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
+const CardDescription = React$54.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 CardDescription.displayName = "CardDescription";
-const CardContent = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardContent = React$54.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("p-6 pt-0", className),
 	...props
 }));
 CardContent.displayName = "CardContent";
-const CardFooter = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardFooter = React$54.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex items-center p-6 pt-0", className),
 	...props
@@ -640,7 +641,7 @@ CardFooter.displayName = "CardFooter";
 //#region src/card-hover/card-hover.tsx
 const HoverCard = HoverCardPrimitive.Root;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
-const HoverCardContent = React$52.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+const HoverCardContent = React$53.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
 	ref,
 	align,
 	sideOffset,
@@ -651,31 +652,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 //#endregion
 //#region src/carousel/carousel.tsx
-const CarouselContext = React$51.createContext(null);
+const CarouselContext = React$52.createContext(null);
 function useCarousel() {
-	const context = React$51.useContext(CarouselContext);
+	const context = React$52.useContext(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
 	return context;
 }
-const Carousel = React$51.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
+const Carousel = React$52.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
 	const [carouselRef, api] = useEmblaCarousel({
 		...opts,
 		axis: orientation === "horizontal" ? "x" : "y"
 	}, plugins);
-	const [canScrollPrev, setCanScrollPrev] = React$51.useState(false);
-	const [canScrollNext, setCanScrollNext] = React$51.useState(false);
-	const onSelect = React$51.useCallback(() => {
+	const [canScrollPrev, setCanScrollPrev] = React$52.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$52.useState(false);
+	const onSelect = React$52.useCallback(() => {
 		if (!api) return;
 		setCanScrollPrev(api.canScrollPrev());
 		setCanScrollNext(api.canScrollNext());
 	}, [api]);
-	const scrollPrev = React$51.useCallback(() => {
+	const scrollPrev = React$52.useCallback(() => {
 		api?.scrollPrev();
 	}, [api]);
-	const scrollNext = React$51.useCallback(() => {
+	const scrollNext = React$52.useCallback(() => {
 		api?.scrollNext();
 	}, [api]);
-	const handleKeyDown = React$51.useCallback((event) => {
+	const handleKeyDown = React$52.useCallback((event) => {
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			scrollPrev();
@@ -684,11 +685,11 @@ const Carousel = React$51.forwardRef(({ orientation = "horizontal", opts, setApi
 			scrollNext();
 		}
 	}, [scrollPrev, scrollNext]);
-	React$51.useEffect(() => {
+	React$52.useEffect(() => {
 		if (!api || !setApi) return;
 		setApi(api);
 	}, [api, setApi]);
-	React$51.useEffect(() => {
+	React$52.useEffect(() => {
 		if (!api) return;
 		onSelect();
 		api.on("reInit", onSelect);
@@ -729,7 +730,7 @@ const Carousel = React$51.forwardRef(({ orientation = "horizontal", opts, setApi
 	});
 });
 Carousel.displayName = "Carousel";
-const CarouselContent = React$51.forwardRef(({ className,...props }, ref) => {
+const CarouselContent = React$52.forwardRef(({ className,...props }, ref) => {
 	const { carouselRef, orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref: carouselRef,
@@ -742,7 +743,7 @@ const CarouselContent = React$51.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselContent.displayName = "CarouselContent";
-const CarouselItem = React$51.forwardRef(({ className,...props }, ref) => {
+const CarouselItem = React$52.forwardRef(({ className,...props }, ref) => {
 	const { orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -752,7 +753,7 @@ const CarouselItem = React$51.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React$51.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselPrevious = React$52.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -769,7 +770,7 @@ const CarouselPrevious = React$51.forwardRef(({ className, variant = "outline",
 	});
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React$51.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselNext = React$52.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -1219,7 +1220,7 @@ function DialogDescription({ className,...props }) {
 
 //#endregion
 //#region src/command-palette/command-palette.tsx
-const CommandPalette = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+const CommandPalette = React$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
 	ref,
 	className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
 	...props
@@ -1237,7 +1238,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
 		})
 	});
 };
-const CommandPaletteInput = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const CommandPaletteInput = React$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	className: "flex items-center border-b px-3",
 	"data-cmdk-input-wrapper": "",
 	children: [/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
@@ -1247,31 +1248,31 @@ const CommandPaletteInput = React$50.forwardRef(({ className,...props }, ref) =>
 	})]
 }));
 CommandPaletteInput.displayName = Command$1.Input.displayName;
-const CommandPaletteList = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+const CommandPaletteList = React$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
 	ref,
 	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
 	...props
 }));
 CommandPaletteList.displayName = Command$1.List.displayName;
-const CommandPaletteEmpty = React$50.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+const CommandPaletteEmpty = React$51.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
 	ref,
 	className: "py-6 text-center text-sm",
 	...props
 }));
 CommandPaletteEmpty.displayName = Command$1.Empty.displayName;
-const CommandPaletteGroup = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+const CommandPaletteGroup = React$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
 	ref,
 	className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
 	...props
 }));
 CommandPaletteGroup.displayName = Command$1.Group.displayName;
-const CommandPaletteSeparator = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+const CommandPaletteSeparator = React$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
 	ref,
 	className: cn("-mx-1 h-px bg-border", className),
 	...props
 }));
 CommandPaletteSeparator.displayName = Command$1.Separator.displayName;
-const CommandPaletteItem = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+const CommandPaletteItem = React$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", className),
 	...props
@@ -1347,8 +1348,8 @@ const frameworks = [
 	}
 ];
 function ComboboxDemo() {
-	const [open, setOpen] = React$49.useState(false);
-	const [value, setValue] = React$49.useState("");
+	const [open, setOpen] = React$50.useState(false);
+	const [value, setValue] = React$50.useState("");
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -1588,32 +1589,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-const ContextMenuSubTrigger = React$48.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
+const ContextMenuSubTrigger = React$49.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
 	ref,
 	className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
 }));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-const ContextMenuSubContent = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
+const ContextMenuSubContent = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
 	ref,
 	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
 	...props
 }));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-const ContextMenuContent = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
+const ContextMenuContent = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
 	ref,
 	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
 	...props
 }) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-const ContextMenuItem = React$48.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
+const ContextMenuItem = React$49.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
 	...props
 }));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-const ContextMenuCheckboxItem = React$48.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
+const ContextMenuCheckboxItem = React$49.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	checked,
@@ -1624,7 +1625,7 @@ const ContextMenuCheckboxItem = React$48.forwardRef(({ className, children, chec
 	}), children]
 }));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-const ContextMenuRadioItem = React$48.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
+const ContextMenuRadioItem = React$49.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
 	ref,
 	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	...props,
@@ -1634,13 +1635,13 @@ const ContextMenuRadioItem = React$48.forwardRef(({ className, children,...props
 	}), children]
 }));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-const ContextMenuLabel = React$48.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
+const ContextMenuLabel = React$49.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
 	ref,
 	className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
 	...props
 }));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-const ContextMenuSeparator = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
+const ContextMenuSeparator = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
 	ref,
 	className: cn("-mx-1 my-1 h-px bg-border", className),
 	...props
@@ -1785,7 +1786,7 @@ function DropdownMenuSubContent({ className,...props }) {
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React$47.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+const TooltipContent = React$48.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
 	ref,
 	sideOffset,
 	className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
@@ -2270,7 +2271,7 @@ const inputVariants = cva("file:text-foreground placeholder:text-muted-foregroun
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Input = React$46.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
+const Input = React$47.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
 	const input = /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
@@ -2352,10 +2353,10 @@ const numberInputWrapperVariants = cva("border-input bg-background grid grid-col
 	} },
 	defaultVariants: { variant: "default" }
 });
-const NumberInput = React$45.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
-	const [isFocused, setIsFocused] = React$45.useState(false);
-	const [inputString, setInputString] = React$45.useState("");
-	const intlFormatter = React$45.useMemo(() => {
+const NumberInput = React$46.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
+	const [isFocused, setIsFocused] = React$46.useState(false);
+	const [inputString, setInputString] = React$46.useState("");
+	const intlFormatter = React$46.useMemo(() => {
 		if (!format$1 || typeof format$1 === "function") return void 0;
 		return new Intl.NumberFormat(format$1.locale, format$1.options);
 	}, [format$1]);
@@ -2402,7 +2403,7 @@ const NumberInput = React$45.forwardRef(({ className, wrapperClassName, prefix,
 		setInputString("");
 		props.onBlur?.(e);
 	};
-	const displayValue = React$45.useMemo(() => {
+	const displayValue = React$46.useMemo(() => {
 		if (isFocused && format$1) {
 			if (inputString !== "") return inputString;
 			if (controlledValue !== void 0) {
@@ -2479,26 +2480,26 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 	const rowOriginal = cell?.row?.original ?? {};
 	const colCellMeta = cell?.column?.columnDef?.meta;
 	const align = colCellMeta?.align ?? "left";
-	const editableResolver = React$44.useMemo(() => {
+	const editableResolver = React$45.useMemo(() => {
 		const v = colCellMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colCellMeta?.editable]);
 	const isEditable = editableResolver(rowOriginal);
-	const classNameResolver = React$44.useMemo(() => {
+	const classNameResolver = React$45.useMemo(() => {
 		const v = colCellMeta?.className;
 		return typeof v === "function" ? v : () => v;
 	}, [colCellMeta?.className]);
 	const colCellClassName = classNameResolver(rowOriginal);
 	const rowClassNameMeta = meta?.rowClassName;
-	const rowCellClassName = React$44.useMemo(() => {
+	const rowCellClassName = React$45.useMemo(() => {
 		if (!rowClassNameMeta) return void 0;
 		if (typeof rowClassNameMeta === "function") return rowClassNameMeta(cell.row);
 		return rowClassNameMeta;
 	}, [rowClassNameMeta, cell.row]);
 	const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
 	const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
-	const onClick = React$44.useCallback((event) => {
+	const onClick = React$45.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			onClickProp?.(event);
@@ -2511,7 +2512,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		onClickProp
 	]);
-	const onContextMenu = React$44.useCallback((event) => {
+	const onContextMenu = React$45.useCallback((event) => {
 		if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2519,7 +2520,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseDown = React$44.useCallback((event) => {
+	const onMouseDown = React$45.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2527,7 +2528,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseEnter = React$44.useCallback((event) => {
+	const onMouseEnter = React$45.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2535,10 +2536,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseUp = React$44.useCallback(() => {
+	const onMouseUp = React$45.useCallback(() => {
 		if (!isEditing) meta?.onCellMouseUp?.();
 	}, [meta, isEditing]);
-	const onDoubleClick = React$44.useCallback((event) => {
+	const onDoubleClick = React$45.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
@@ -2550,7 +2551,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		isEditable
 	]);
-	const onKeyDown = React$44.useCallback((event) => {
+	const onKeyDown = React$45.useCallback((event) => {
 		onKeyDownProp?.(event);
 		if (event.defaultPrevented) return;
 		if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown" || event.key === "Enter" || event.key === "Tab") return;
@@ -2764,22 +2765,22 @@ function HierarchyItem({ option, selectedValue, expandedIds, onToggleExpand, onS
 }
 function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$43.useState(initialValue);
-	const [open, setOpen] = React$43.useState(false);
-	const [searchValue, setSearchValue] = React$43.useState("");
-	const containerRef = React$43.useRef(null);
-	const inputRef = React$43.useRef(null);
+	const [value, setValue] = React$44.useState(initialValue);
+	const [open, setOpen] = React$44.useState(false);
+	const [searchValue, setSearchValue] = React$44.useState("");
+	const containerRef = React$44.useRef(null);
+	const inputRef = React$44.useRef(null);
 	const meta = table.options.meta;
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const sideOffset = -(containerRef.current?.clientHeight ?? 0);
 	const options = cellOpts?.variant === "hierarchy" ? cellOpts.options : [];
-	const [expandedIds, setExpandedIds] = React$43.useState(() => getInitialExpandedIds(options, initialValue));
-	const labelMap = React$43.useMemo(() => buildLabelMap(options), [options]);
-	const displayLabel = React$43.useMemo(() => {
+	const [expandedIds, setExpandedIds] = React$44.useState(() => getInitialExpandedIds(options, initialValue));
+	const labelMap = React$44.useMemo(() => buildLabelMap(options), [options]);
+	const displayLabel = React$44.useMemo(() => {
 		if (!value) return "";
 		return labelMap.get(value) ?? value;
 	}, [value, labelMap]);
-	const toggleExpand = React$43.useCallback((id) => {
+	const toggleExpand = React$44.useCallback((id) => {
 		setExpandedIds((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
@@ -2787,7 +2788,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 			return next;
 		});
 	}, []);
-	const onOptionSelect = React$43.useCallback((option) => {
+	const onOptionSelect = React$44.useCallback((option) => {
 		const newValue = option.id;
 		setValue(newValue);
 		meta?.onDataUpdate?.({
@@ -2802,18 +2803,18 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$43.useCallback((isOpen) => {
+	const onOpenChange = React$44.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen) {
 			setSearchValue("");
 			meta?.onCellEditingStop?.();
 		}
 	}, [meta]);
-	const onOpenAutoFocus = React$43.useCallback((event) => {
+	const onOpenAutoFocus = React$44.useCallback((event) => {
 		event.preventDefault();
 		inputRef.current?.focus();
 	}, []);
-	const onWrapperKeyDown = React$43.useCallback((event) => {
+	const onWrapperKeyDown = React$44.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -2833,10 +2834,10 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 		initialValue,
 		meta
 	]);
-	React$43.useEffect(() => {
+	React$44.useEffect(() => {
 		setValue(initialValue);
 	}, [initialValue]);
-	React$43.useEffect(() => {
+	React$44.useEffect(() => {
 		if (value) {
 			const ancestors = getAncestorIds(options, value);
 			if (ancestors && ancestors.length > 0) setExpandedIds((prev) => {
@@ -2846,7 +2847,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
 			});
 		}
 	}, [value, options]);
-	React$43.useEffect(() => {
+	React$44.useEffect(() => {
 		if (isEditing && !open) setOpen(true);
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
@@ -2944,9 +2945,9 @@ function EditorFooter({ count, onApply, onCancel }) {
 	});
 }
 function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$42.useState("");
-	const inputRef = React$42.useRef(null);
-	const handleApply = React$42.useCallback(() => {
+	const [value, setValue] = React$43.useState("");
+	const inputRef = React$43.useRef(null);
+	const handleApply = React$43.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -2958,14 +2959,14 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
 		value,
 		onApply
 	]);
-	const onKeyDown = React$42.useCallback((e) => {
+	const onKeyDown = React$43.useCallback((e) => {
 		stopGridKeys(e);
 		if (e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$42.useEffect(() => {
+	React$43.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -2987,9 +2988,9 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
 	});
 }
 function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$42.useState("");
-	const textareaRef = React$42.useRef(null);
-	const handleApply = React$42.useCallback(() => {
+	const [value, setValue] = React$43.useState("");
+	const textareaRef = React$43.useRef(null);
+	const handleApply = React$43.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3001,14 +3002,14 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
 		value,
 		onApply
 	]);
-	const onKeyDown = React$42.useCallback((e) => {
+	const onKeyDown = React$43.useCallback((e) => {
 		stopGridKeys(e);
 		if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$42.useEffect(() => {
+	React$43.useEffect(() => {
 		textareaRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3031,12 +3032,12 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
 	});
 }
 function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
-	const [value, setValue] = React$42.useState(void 0);
-	const inputRef = React$42.useRef(null);
+	const [value, setValue] = React$43.useState(void 0);
+	const inputRef = React$43.useRef(null);
 	const { min, max, step, prefix, suffix } = cell.variant === "number" ? cell : {};
 	const stringPrefix = typeof prefix === "string" ? prefix : void 0;
 	const stringSuffix = typeof suffix === "string" ? suffix : void 0;
-	const handleApply = React$42.useCallback(() => {
+	const handleApply = React$43.useCallback(() => {
 		const numValue = value ?? null;
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
@@ -3049,14 +3050,14 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
 		value,
 		onApply
 	]);
-	const onKeyDown = React$42.useCallback((e) => {
+	const onKeyDown = React$43.useCallback((e) => {
 		stopGridKeys(e);
 		if (e.key === "Enter") {
 			e.preventDefault();
 			handleApply();
 		}
 	}, [handleApply]);
-	React$42.useEffect(() => {
+	React$43.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3085,8 +3086,8 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
 }
 function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
 	const { options: arrayOptions, optionsMap, optionsRenderer } = cell.variant === "select" ? cell : {};
-	const inputRef = React$42.useRef(null);
-	const options = React$42.useMemo(() => {
+	const inputRef = React$43.useRef(null);
+	const options = React$43.useMemo(() => {
 		if (arrayOptions) return arrayOptions.map((opt) => ({
 			value: opt.value,
 			data: opt.label
@@ -3097,7 +3098,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
 		}));
 		return [];
 	}, [arrayOptions, optionsMap]);
-	const handleSelect = React$42.useCallback((newValue) => {
+	const handleSelect = React$43.useCallback((newValue) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3108,7 +3109,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
 		columnId,
 		onApply
 	]);
-	React$42.useEffect(() => {
+	React$43.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3132,10 +3133,10 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
 }
 function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
 	const { options: arrayOptions, optionsMap } = cell.variant === "multi-select" ? cell : {};
-	const [selectedValues, setSelectedValues] = React$42.useState([]);
-	const [searchValue, setSearchValue] = React$42.useState("");
-	const inputRef = React$42.useRef(null);
-	const options = React$42.useMemo(() => {
+	const [selectedValues, setSelectedValues] = React$43.useState([]);
+	const [searchValue, setSearchValue] = React$43.useState("");
+	const inputRef = React$43.useRef(null);
+	const options = React$43.useMemo(() => {
 		if (arrayOptions) return arrayOptions;
 		if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
 			value: id,
@@ -3143,12 +3144,12 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 		}));
 		return [];
 	}, [arrayOptions, optionsMap]);
-	const toggleValue = React$42.useCallback((value) => {
+	const toggleValue = React$43.useCallback((value) => {
 		setSelectedValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
 		setSearchValue("");
 		queueMicrotask(() => inputRef.current?.focus());
 	}, []);
-	const handleApply = React$42.useCallback(() => {
+	const handleApply = React$43.useCallback(() => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3160,7 +3161,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 		selectedValues,
 		onApply
 	]);
-	React$42.useEffect(() => {
+	React$43.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3226,7 +3227,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
 	});
 }
 function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const setAll = React$42.useCallback((val) => {
+	const setAll = React$43.useCallback((val) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3263,10 +3264,10 @@ function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
 }
 function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
 	const options = cell.variant === "hierarchy" ? cell.options : [];
-	const inputRef = React$42.useRef(null);
-	const [searchValue, setSearchValue] = React$42.useState("");
-	const [expandedIds, setExpandedIds] = React$42.useState(() => getInitialExpandedIds(options, null));
-	const toggleExpand = React$42.useCallback((id) => {
+	const inputRef = React$43.useRef(null);
+	const [searchValue, setSearchValue] = React$43.useState("");
+	const [expandedIds, setExpandedIds] = React$43.useState(() => getInitialExpandedIds(options, null));
+	const toggleExpand = React$43.useCallback((id) => {
 		setExpandedIds((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
@@ -3274,7 +3275,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 			return next;
 		});
 	}, []);
-	const handleSelect = React$42.useCallback((option) => {
+	const handleSelect = React$43.useCallback((option) => {
 		onApply(selectedRowIndices.map((rowIndex) => ({
 			rowIndex,
 			columnId,
@@ -3285,7 +3286,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 		columnId,
 		onApply
 	]);
-	React$42.useEffect(() => {
+	React$43.useEffect(() => {
 		inputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
@@ -3316,7 +3317,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
 	});
 }
 function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
-	const onDateSelect = React$42.useCallback((date) => {
+	const onDateSelect = React$43.useCallback((date) => {
 		if (!date) return;
 		const year = date.getFullYear();
 		const month = String(date.getMonth() + 1).padStart(2, "0");
@@ -3348,28 +3349,28 @@ function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
 	});
 }
 function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }) {
-	const selectedRowIndices = React$42.useMemo(() => {
+	const selectedRowIndices = React$43.useMemo(() => {
 		if (!open) return [];
 		const allRows = table.getRowModel().rows;
 		const indices = [];
 		for (let i = 0; i < allRows.length; i++) if (allRows[i].getIsSelected()) indices.push(i);
 		return indices;
 	}, [open, table]);
-	React$42.useEffect(() => {
+	React$43.useEffect(() => {
 		if (open && selectedRowIndices.length === 0) onOpenChange(false);
 	}, [
 		open,
 		selectedRowIndices.length,
 		onOpenChange
 	]);
-	const onApply = React$42.useCallback((updates) => {
+	const onApply = React$43.useCallback((updates) => {
 		table.options.meta?.onDataUpdate?.(updates);
 		onOpenChange(false);
 	}, [table, onOpenChange]);
-	const onCancel = React$42.useCallback(() => {
+	const onCancel = React$43.useCallback(() => {
 		onOpenChange(false);
 	}, [onOpenChange]);
-	const onOpenAutoFocus = React$42.useCallback((e) => {
+	const onOpenAutoFocus = React$43.useCallback((e) => {
 		e.preventDefault();
 	}, []);
 	const editorProps = {
@@ -3379,7 +3380,7 @@ function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }
 		onApply,
 		onCancel
 	};
-	const editor = React$42.useMemo(() => {
+	const editor = React$43.useMemo(() => {
 		switch (cell.variant) {
 			case "short-text": return /* @__PURE__ */ jsx(BulkEditShortText, { ...editorProps });
 			case "long-text": return /* @__PURE__ */ jsx(BulkEditLongText, { ...editorProps });
@@ -3461,8 +3462,8 @@ function getColumnVariant(variant) {
 	}
 }
 function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
-	const [open, setOpen] = React$41.useState(false);
-	const [bulkEditOpen, setBulkEditOpen] = React$41.useState(false);
+	const [open, setOpen] = React$42.useState(false);
+	const [bulkEditOpen, setBulkEditOpen] = React$42.useState(false);
 	const column = header.column;
 	const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
 	const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
@@ -3471,13 +3472,13 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 	const enableBulkEdit = column.columnDef.meta?.enableBulkEdit ?? false;
 	const selectedRowCount = Object.keys(table.getState().rowSelection).length;
 	const showBulkEdit = enableBulkEdit && selectedRowCount > 1 && cellVariant != null && EditableCellVariantsSet.has(cellVariant?.variant);
-	React$41.useEffect(() => {
+	React$42.useEffect(() => {
 		if (!showBulkEdit) setBulkEditOpen(false);
 	}, [showBulkEdit]);
 	const pinnedPosition = column.getIsPinned();
 	const isPinnedLeft = pinnedPosition === "left";
 	const isPinnedRight = pinnedPosition === "right";
-	const onSortingChange = React$41.useCallback((direction) => {
+	const onSortingChange = React$42.useCallback((direction) => {
 		table.setSorting((prev) => {
 			const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
 			const newSort = {
@@ -3491,19 +3492,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 			} else return [...prev, newSort];
 		});
 	}, [column.id, table]);
-	const onSortRemove = React$41.useCallback(() => {
+	const onSortRemove = React$42.useCallback(() => {
 		table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
 	}, [column.id, table]);
-	const onLeftPin = React$41.useCallback(() => {
+	const onLeftPin = React$42.useCallback(() => {
 		column.pin("left");
 	}, [column]);
-	const onRightPin = React$41.useCallback(() => {
+	const onRightPin = React$42.useCallback(() => {
 		column.pin("right");
 	}, [column]);
-	const onUnpin = React$41.useCallback(() => {
+	const onUnpin = React$42.useCallback(() => {
 		column.pin(false);
 	}, [column]);
-	const onTriggerPointerDown = React$41.useCallback((event) => {
+	const onTriggerPointerDown = React$42.useCallback((event) => {
 		onPointerDown?.(event);
 		if (event.defaultPrevented) return;
 		if (event.button !== 0) return;
@@ -3630,7 +3631,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 		})
 	] });
 }
-const DataGridColumnResizer = React$41.memo(DataGridColumnResizerImpl, (prev, next) => {
+const DataGridColumnResizer = React$42.memo(DataGridColumnResizerImpl, (prev, next) => {
 	const prevColumn = prev.header.column;
 	const nextColumn = next.header.column;
 	if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) return false;
@@ -3639,7 +3640,7 @@ const DataGridColumnResizer = React$41.memo(DataGridColumnResizerImpl, (prev, ne
 });
 function DataGridColumnResizerImpl({ header, table, label }) {
 	const defaultColumnDef = table._getDefaultColumnDef();
-	const onDoubleClick = React$41.useCallback(() => {
+	const onDoubleClick = React$42.useCallback(() => {
 		header.column.resetSize();
 	}, [header.column]);
 	return /* @__PURE__ */ jsx("div", {
@@ -3748,7 +3749,7 @@ function DataGridContextMenu({ table }) {
 		onRowsDelete
 	});
 }
-const ContextMenu$1 = React$40.memo(ContextMenuImpl, (prev, next) => {
+const ContextMenu$1 = React$41.memo(ContextMenuImpl, (prev, next) => {
 	if (prev.contextMenu.open !== next.contextMenu.open) return false;
 	if (!next.contextMenu.open) return true;
 	if (prev.contextMenu.x !== next.contextMenu.x) return false;
@@ -3759,7 +3760,7 @@ const ContextMenu$1 = React$40.memo(ContextMenuImpl, (prev, next) => {
 	return true;
 });
 function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
-	const triggerStyle = React$40.useMemo(() => ({
+	const triggerStyle = React$41.useMemo(() => ({
 		position: "fixed",
 		left: `${contextMenu.x}px`,
 		top: `${contextMenu.y}px`,
@@ -3772,11 +3773,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		pointerEvents: "none",
 		opacity: 0
 	}), [contextMenu.x, contextMenu.y]);
-	const onCloseAutoFocus = React$40.useCallback((event) => {
+	const onCloseAutoFocus = React$41.useCallback((event) => {
 		event.preventDefault();
 		dataGridRef?.current?.focus();
 	}, [dataGridRef]);
-	const onCopy = React$40.useCallback(async () => {
+	const onCopy = React$41.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rows = table.getRowModel().rows;
 		const columnIds = [];
@@ -3815,7 +3816,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		await navigator.clipboard.writeText(tsvData);
 		toast$1.success(`${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? "s" : ""} copied`);
 	}, [table, selectionState]);
-	const canClear = React$40.useMemo(() => {
+	const canClear = React$41.useMemo(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
 		const visibleCols = table.getVisibleLeafColumns();
 		const rows = table.getRowModel().rows;
@@ -3832,7 +3833,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		}
 		return true;
 	}, [selectionState, table]);
-	const onClear = React$40.useCallback(() => {
+	const onClear = React$41.useCallback(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		if (!canClear) return;
 		const updates = [];
@@ -3851,7 +3852,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		selectionState,
 		canClear
 	]);
-	const onDelete = React$40.useCallback(async () => {
+	const onDelete = React$41.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rowIndices = new Set();
 		for (const cellKey of selectionState.selectedCells) {
@@ -3928,12 +3929,12 @@ function composeRefs(...refs) {
 * Accepts callback refs and RefObject(s)
 */
 function useComposedRefs(...refs) {
-	return React$39.useCallback(composeRefs(...refs), refs);
+	return React$40.useCallback(composeRefs(...refs), refs);
 }
 
 //#endregion
 //#region src/data-grid/data-grid-row.tsx
-const DataGridRow = React$38.memo(DataGridRowImpl, (prev, next) => {
+const DataGridRow = React$39.memo(DataGridRowImpl, (prev, next) => {
 	if (prev.row.id !== next.row.id) return false;
 	if (prev.row.original !== next.row.original) return false;
 	const prevRowIndex = prev.virtualRowIndex;
@@ -3965,7 +3966,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 		}
 	});
 	const isRowSelected = row.getIsSelected();
-	const handleRowClick = React$38.useCallback((event) => {
+	const handleRowClick = React$39.useCallback((event) => {
 		const target = event.target;
 		if (target.closest("input, button, [role=\"checkbox\"]")) return;
 		if (event.detail === 1) onRowClick?.(virtualRowIndex);
@@ -4015,20 +4016,20 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 * prop or avoid re-executing effects when passed as a dependency
 */
 function useCallbackRef(callback) {
-	const callbackRef = React$37.useRef(callback);
-	React$37.useEffect(() => {
+	const callbackRef = React$38.useRef(callback);
+	React$38.useEffect(() => {
 		callbackRef.current = callback;
 	});
-	return React$37.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+	return React$38.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
 //#endregion
 //#region src/hooks/use-debounced-callback.ts
 function useDebouncedCallback(callback, delay) {
 	const handleCallback = useCallbackRef(callback);
-	const debounceTimerRef = React$36.useRef(0);
-	React$36.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	const setValue = React$36.useCallback((...args) => {
+	const debounceTimerRef = React$37.useRef(0);
+	React$37.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+	const setValue = React$37.useCallback((...args) => {
 		window.clearTimeout(debounceTimerRef.current);
 		debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
 	}, [handleCallback, delay]);
@@ -4037,7 +4038,7 @@ function useDebouncedCallback(callback, delay) {
 
 //#endregion
 //#region src/data-grid/data-grid-search.tsx
-const DataGridSearch = React$35.memo(DataGridSearchImpl, (prev, next) => {
+const DataGridSearch = React$36.memo(DataGridSearchImpl, (prev, next) => {
 	if (prev.searchOpen !== next.searchOpen) return false;
 	if (!next.searchOpen) return true;
 	if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) return false;
@@ -4051,13 +4052,13 @@ const DataGridSearch = React$35.memo(DataGridSearchImpl, (prev, next) => {
 	return true;
 });
 function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
-	const inputRef = React$35.useRef(null);
-	React$35.useEffect(() => {
+	const inputRef = React$36.useRef(null);
+	React$36.useEffect(() => {
 		if (searchOpen) requestAnimationFrame(() => {
 			inputRef.current?.focus();
 		});
 	}, [searchOpen]);
-	React$35.useEffect(() => {
+	React$36.useEffect(() => {
 		if (!searchOpen) return;
 		function onEscape(event) {
 			if (event.key === "Escape") {
@@ -4068,7 +4069,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 		document.addEventListener("keydown", onEscape);
 		return () => document.removeEventListener("keydown", onEscape);
 	}, [searchOpen, onSearchOpenChange]);
-	const onKeyDown = React$35.useCallback((event) => {
+	const onKeyDown = React$36.useCallback((event) => {
 		event.stopPropagation();
 		if (event.key === "Enter") {
 			event.preventDefault();
@@ -4079,20 +4080,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 	const debouncedSearch = useDebouncedCallback((query) => {
 		onSearch(query);
 	}, 150);
-	const onChange = React$35.useCallback((event) => {
+	const onChange = React$36.useCallback((event) => {
 		const value = event.target.value;
 		onSearchQueryChange(value);
 		debouncedSearch(value);
 	}, [onSearchQueryChange, debouncedSearch]);
-	const onTriggerPointerDown = React$35.useCallback((event) => {
+	const onTriggerPointerDown = React$36.useCallback((event) => {
 		const target = event.target;
 		if (!(target instanceof HTMLElement)) return;
 		if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
 		if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) event.preventDefault();
 	}, []);
-	const onPrevMatchPointerDown = React$35.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onNextMatchPointerDown = React$35.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onClose = React$35.useCallback(() => {
+	const onPrevMatchPointerDown = React$36.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onNextMatchPointerDown = React$36.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onClose = React$36.useCallback(() => {
 		onSearchOpenChange(false);
 	}, [onSearchOpenChange]);
 	if (!searchOpen) return null;
@@ -4173,15 +4174,15 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 	const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
 	const pinningState = table.getState().columnPinning;
 	const columnPinningKey = `${(pinningState.left ?? []).join(",")}|${(pinningState.right ?? []).join(",")}`;
-	const prevVisibleColumnIdsRef = React$34.useRef(visibleColumnIds);
+	const prevVisibleColumnIdsRef = React$35.useRef(visibleColumnIds);
 	if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
 		rowMapRef.current.clear();
 		prevVisibleColumnIdsRef.current = visibleColumnIds;
 	}
-	const onGridContextMenu = React$34.useCallback((event) => {
+	const onGridContextMenu = React$35.useCallback((event) => {
 		event.preventDefault();
 	}, []);
-	const onAddRowKeyDown = React$34.useCallback(async (event) => {
+	const onAddRowKeyDown = React$35.useCallback(async (event) => {
 		if (!onRowAdd) return;
 		if (event.key === "Enter" || event.key === "") {
 			event.preventDefault();
@@ -4333,17 +4334,17 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
 	const cellValue = cell.getValue();
 	const cellValueAsBoolean = Boolean(cellValue);
-	const [value, setValue] = React$33.useState(cellValueAsBoolean);
-	const containerRef = React$33.useRef(null);
+	const [value, setValue] = React$34.useState(cellValueAsBoolean);
+	const containerRef = React$34.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
-	const editableResolver = React$33.useMemo(() => {
+	const editableResolver = React$34.useMemo(() => {
 		const v = colMeta?.editable;
 		if (v === void 0) return () => true;
 		return typeof v === "function" ? v : () => Boolean(v);
 	}, [colMeta?.editable]);
 	const isEditable = editableResolver(cell.row.original);
-	const onCheckedChange = React$33.useCallback((checked) => {
+	const onCheckedChange = React$34.useCallback((checked) => {
 		setValue(checked);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -4355,7 +4356,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		rowIndex,
 		columnId
 	]);
-	const onWrapperKeyDown = React$33.useCallback((event) => {
+	const onWrapperKeyDown = React$34.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused && (event.key === "" || event.key === "Enter")) {
 			event.preventDefault();
@@ -4368,17 +4369,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	React$33.useEffect(() => {
+	React$34.useEffect(() => {
 		setValue(cellValueAsBoolean);
 	}, [cellValueAsBoolean]);
-	React$33.useEffect(() => {
+	React$34.useEffect(() => {
 		if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
 		meta?.searchOpen,
 		meta?.isScrolling
 	]);
-	const onWrapperClick = React$33.useCallback((event) => {
+	const onWrapperClick = React$34.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused) {
 			event.preventDefault();
@@ -4391,13 +4392,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	const onCheckboxClick = React$33.useCallback((event) => {
+	const onCheckboxClick = React$34.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxMouseDown = React$33.useCallback((event) => {
+	const onCheckboxMouseDown = React$34.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxDoubleClick = React$33.useCallback((event) => {
+	const onCheckboxDoubleClick = React$34.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
 	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
@@ -4452,20 +4453,20 @@ function formatDateToISOString(date) {
 }
 function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$32.useState(parseToLocalDate(initialValue));
-	const [open, setOpen] = React$32.useState(false);
-	const containerRef = React$32.useRef(null);
-	const hasStoppedRef = React$32.useRef(false);
+	const [value, setValue] = React$33.useState(parseToLocalDate(initialValue));
+	const [open, setOpen] = React$33.useState(false);
+	const containerRef = React$33.useRef(null);
+	const hasStoppedRef = React$33.useRef(false);
 	const meta = table.options.meta;
-	const prevInitialValueRef = React$32.useRef(initialValue);
+	const prevInitialValueRef = React$33.useRef(initialValue);
 	if (initialValue !== prevInitialValueRef.current) {
 		prevInitialValueRef.current = initialValue;
 		setValue(parseToLocalDate(initialValue));
 	}
-	React$32.useEffect(() => {
+	React$33.useEffect(() => {
 		if (isEditing) hasStoppedRef.current = false;
 	}, [isEditing]);
-	const onDateSelect = React$32.useCallback((date) => {
+	const onDateSelect = React$33.useCallback((date) => {
 		if (!date) return;
 		setValue(date);
 		meta?.onDataUpdate?.({
@@ -4481,14 +4482,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$32.useCallback((isOpen) => {
+	const onOpenChange = React$33.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen && isEditing && !hasStoppedRef.current) {
 			hasStoppedRef.current = true;
 			meta?.onCellEditingStop?.();
 		}
 	}, [isEditing, meta]);
-	const onWrapperKeyDown = React$32.useCallback((event) => {
+	const onWrapperKeyDown = React$33.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -4508,10 +4509,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		initialValue,
 		meta
 	]);
-	React$32.useEffect(() => {
+	React$33.useEffect(() => {
 		setOpen(isEditing);
 	}, [isEditing]);
-	React$32.useEffect(() => {
+	React$33.useEffect(() => {
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
@@ -4604,7 +4605,7 @@ function DownloadFileCell({ cell, table, rowIndex, columnId, isEditing, isFocuse
 //#region src/data-grid/cell-variants/gantt-cell.tsx
 function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const containerRef = React$31.useRef(null);
+	const containerRef = React$32.useRef(null);
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
 	const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
@@ -4639,6 +4640,191 @@ function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSe
 	});
 }
 
+//#endregion
+//#region src/data-grid/cell-variants/json-cell.tsx
+function formatJson(value) {
+	if (value == null || value === "") return null;
+	try {
+		const parsed = typeof value === "string" ? JSON.parse(value) : value;
+		return JSON.stringify(parsed, null, 2);
+	} catch {
+		return typeof value === "string" ? value : String(value);
+	}
+}
+function isValidJson(str) {
+	if (!str) return false;
+	try {
+		JSON.parse(str);
+		return true;
+	} catch {
+		return false;
+	}
+}
+function JsonCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
+	const rawValue = cell.getValue();
+	const [dialogOpen, setDialogOpen] = React$31.useState(false);
+	const [editValue, setEditValue] = React$31.useState("");
+	const [copied, setCopied] = React$31.useState(false);
+	const containerRef = React$31.useRef(null);
+	const copiedTimerRef = React$31.useRef(null);
+	const meta = table.options.meta;
+	const displayValue = React$31.useMemo(() => {
+		if (rawValue == null || rawValue === "") return "";
+		if (typeof rawValue === "string") try {
+			return JSON.stringify(JSON.parse(rawValue));
+		} catch {
+			return rawValue;
+		}
+		return JSON.stringify(rawValue);
+	}, [rawValue]);
+	const formattedJson = React$31.useMemo(() => formatJson(rawValue), [rawValue]);
+	const jsonParseError = React$31.useMemo(() => {
+		if (!editValue) return null;
+		try {
+			JSON.parse(editValue);
+			return null;
+		} catch (e) {
+			return e.message;
+		}
+	}, [editValue]);
+	const hasChanges = React$31.useMemo(() => editValue !== (formattedJson ?? ""), [editValue, formattedJson]);
+	const onContentDoubleClick = React$31.useCallback((event) => {
+		event.stopPropagation();
+		setEditValue(formattedJson ?? "");
+		setCopied(false);
+		setDialogOpen(true);
+	}, [formattedJson]);
+	const onCopy = React$31.useCallback(() => {
+		navigator.clipboard.writeText(editValue).then(() => {
+			if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+			setCopied(true);
+			copiedTimerRef.current = setTimeout(() => setCopied(false), 2e3);
+		}, () => {});
+	}, [editValue]);
+	const onSave = React$31.useCallback(() => {
+		if (!hasChanges) return;
+		if (!editValue) {
+			meta?.onDataUpdate?.({
+				rowIndex,
+				columnId,
+				value: null
+			});
+			setDialogOpen(false);
+			return;
+		}
+		if (jsonParseError) return;
+		const compactValue = JSON.stringify(JSON.parse(editValue));
+		meta?.onDataUpdate?.({
+			rowIndex,
+			columnId,
+			value: compactValue
+		});
+		setDialogOpen(false);
+	}, [
+		editValue,
+		jsonParseError,
+		hasChanges,
+		meta,
+		rowIndex,
+		columnId
+	]);
+	const onFormat = React$31.useCallback(() => {
+		if (isValidJson(editValue)) setEditValue(JSON.stringify(JSON.parse(editValue), null, 2));
+	}, [editValue]);
+	const onCancel = React$31.useCallback(() => {
+		setDialogOpen(false);
+	}, []);
+	React$31.useEffect(() => {
+		return () => {
+			if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+		};
+	}, []);
+	React$31.useEffect(() => {
+		if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
+	}, [
+		isFocused,
+		meta?.searchOpen,
+		meta?.isScrolling
+	]);
+	const onKeyDown = React$31.useCallback((event) => {
+		if (event.key === "Enter" && !dialogOpen) {
+			event.preventDefault();
+			setEditValue(formattedJson ?? "");
+			setCopied(false);
+			setDialogOpen(true);
+		}
+	}, [dialogOpen, formattedJson]);
+	const headerLabel = typeof cell.column.columnDef.header === "string" ? cell.column.columnDef.header : "JSON";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DataGridCellWrapper, {
+		ref: containerRef,
+		cell,
+		table,
+		rowIndex,
+		columnId,
+		isEditing: false,
+		isFocused,
+		isSelected,
+		onKeyDown,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "grid-cell-content",
+			className: "font-mono text-xs text-muted-foreground",
+			onDoubleClick: onContentDoubleClick,
+			children: displayValue
+		})
+	}), /* @__PURE__ */ jsx(Dialog, {
+		open: dialogOpen,
+		onOpenChange: setDialogOpen,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-w-2xl max-h-[80vh]",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { children: [headerLabel, " (JSON)"] }) }),
+				/* @__PURE__ */ jsx(Textarea, {
+					value: editValue,
+					onChange: (e) => setEditValue(e.target.value),
+					className: "min-h-[200px] max-h-[50vh] font-mono text-sm resize-y",
+					spellCheck: false
+				}),
+				jsonParseError && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-destructive",
+					children: jsonParseError
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "flex-row justify-between sm:justify-between gap-2",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: onCopy,
+						children: [copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ jsx(ClipboardCopy, { className: "h-4 w-4" }), copied ? "Copied" : "Copy"]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: onCancel,
+								children: "Cancel"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								size: "sm",
+								onClick: onFormat,
+								disabled: !!jsonParseError || !editValue,
+								children: "Format"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								onClick: onSave,
+								disabled: !!jsonParseError || !hasChanges,
+								children: "Save"
+							})
+						]
+					})]
+				})
+			]
+		})
+	})] });
+}
+
 //#endregion
 //#region src/data-grid/cell-variants/long-text-cell.tsx
 function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
@@ -5655,6 +5841,15 @@ function DataGridCell({ cell, table }) {
 			isFocused,
 			isSelected
 		});
+		case "json": return /* @__PURE__ */ jsx(JsonCell, {
+			cell,
+			table,
+			rowIndex,
+			columnId,
+			isEditing,
+			isFocused,
+			isSelected
+		});
 		case "gantt": return /* @__PURE__ */ jsx(GanttCell, {
 			cell,
 			table,
@@ -11335,114 +11530,316 @@ 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
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTabbedSidebar, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSideContext, SidebarTab, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperSeparator, StepperTitle, StepperTrigger, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useRegisteredSidebars, useSidebar, useSidebarTabs, useStore as useStepper };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTabbedSidebar, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, JsonCell, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarContext, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSideContext, SidebarTab, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperSeparator, StepperTitle, StepperTrigger, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useRegisteredSidebars, useSidebar, useSidebarTabs, useStore as useStepper };
 //# sourceMappingURL=index.js.map