@postxl/ui-components 1.3.5 → 1.3.7

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$49 from "react";
 import * as React$48 from "react";
 import * as React$47 from "react";
 import * as React$46 from "react";
@@ -59,7 +60,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, CalendarIcon as CalendarIcon$1, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUpIcon as ChevronUpIcon$1, CopyIcon, EraserIcon, EyeOffIcon, FilterX, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, PanelLeftIcon, PinIcon, PinOffIcon, PlusIcon, Settings2Icon, SquareIcon, TextInitialIcon, TrashIcon, XIcon } from "lucide-react";
+import { BaselineIcon, CalendarIcon as CalendarIcon$1, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CopyIcon, EraserIcon, EyeOffIcon, FilterX, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MinusIcon, PanelLeftIcon, PinIcon, PinOffIcon, PlusIcon, Settings2Icon, SquareIcon, TextInitialIcon, TrashIcon, XIcon } from "lucide-react";
 import * as CollapsePrimitive from "@radix-ui/react-collapsible";
 import { Command as Command$1 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -91,17 +92,32 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
+/**
+* Generates a test ID by combining a base ID with a suffix.
+* Returns undefined if no base ID is provided.
+*
+* For the root element, use `data-test-id={__e2e_test_id__}` directly.
+* Use this function only for sub-elements that need a suffix.
+*
+* @example
+* <div data-test-id={__e2e_test_id__}>                      // root element - use directly
+* <input data-test-id={testId(__e2e_test_id__, 'search')}>  // sub-element - returns `${baseId}-search` or undefined
+*/
+function testId(baseId, suffix) {
+	if (!baseId) return void 0;
+	return `${baseId}-${suffix}`;
+}
 
 //#endregion
 //#region src/accordion/accordion.tsx
 const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+const AccordionItem = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
 	ref,
 	className: cn("border-b", className),
 	...props
 }));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React$48.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+const AccordionTrigger = React$49.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
 		ref,
@@ -111,7 +127,7 @@ const AccordionTrigger = React$48.forwardRef(({ className, children,...props },
 	})
 }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React$48.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+const AccordionContent = React$49.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,
@@ -131,21 +147,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Alert = React$47.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Alert = React$48.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	role: "alert",
 	className: cn(alertVariants({ variant }), className),
 	...props
 }));
 Alert.displayName = "Alert";
-const AlertTitle = React$47.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
+const AlertTitle = React$48.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$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const AlertDescription = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("text-sm [&_p]:leading-relaxed", className),
 	...props
@@ -204,13 +220,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$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
+const AlertDialogOverlay = React$47.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$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
+const AlertDialogContent = React$47.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
@@ -226,25 +242,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
 	...props
 });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-const AlertDialogTitle = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
+const AlertDialogTitle = React$47.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$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
+const AlertDialogDescription = React$47.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$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
+const AlertDialogAction = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
 	ref,
 	className: cn(buttonVariants(), className),
 	...props
 }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
+const AlertDialogCancel = React$47.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
 	ref,
 	className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
 	...props
@@ -253,19 +269,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 //#endregion
 //#region src/avatar/avatar.tsx
-const Avatar = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+const Avatar = React$46.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$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+const AvatarImage = React$46.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$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+const AvatarFallback = React$46.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
@@ -311,25 +327,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
 
 //#endregion
 //#region src/breadcrumb/breadcrumb.tsx
-const Breadcrumb = React$44.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
+const Breadcrumb = React$45.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
 	ref,
 	"aria-label": "breadcrumb",
 	...props
 }));
 Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
+const BreadcrumbList = React$45.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$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
+const BreadcrumbItem = React$45.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$44.forwardRef(({ asChild, className,...props }, ref) => {
+const BreadcrumbLink = React$45.forwardRef(({ asChild, className,...props }, ref) => {
 	const Comp = asChild ? Slot : "a";
 	return /* @__PURE__ */ jsx(Comp, {
 		ref,
@@ -338,7 +354,7 @@ const BreadcrumbLink = React$44.forwardRef(({ asChild, className,...props }, ref
 	});
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React$44.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
+const BreadcrumbPage = React$45.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
 	ref,
 	"aria-disabled": "true",
 	"aria-current": "page",
@@ -366,10 +382,10 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 //#endregion
 //#region src/calendar/calendar.tsx
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components,...props }) {
+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$43.useState("from");
-	const handleDayClick = React$43.useCallback((day, modifiers, e) => {
+	const [rangeSelectionStep, setRangeSelectionStep] = React$44.useState("from");
+	const handleDayClick = React$44.useCallback((day, modifiers, e) => {
 		if (props.mode === "range") {
 			const range = props.selected;
 			if (rangeSelectionStep === "from") {
@@ -399,8 +415,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$43.useState(props.defaultMonth ?? props.month ?? new Date());
-	React$43.useEffect(() => {
+	const [currentMonth, setCurrentMonth] = React$44.useState(props.defaultMonth ?? props.month ?? new Date());
+	React$44.useEffect(() => {
 		if (props.month) setCurrentMonth(props.month);
 	}, [props.month]);
 	const addMonths = (date, months) => {
@@ -467,6 +483,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 							disabled: fromMonth && currentMonth <= fromMonth,
 							className: btnClassNames,
 							onClick: () => setCurrentMonth((m) => addMonths(m ?? new Date(), -12)),
+							__e2e_test_id__: testId(__e2e_test_id__, "prev-year"),
 							children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, { className: "" })
 						}), /* @__PURE__ */ jsx(Button, {
 							"aria-label": "previous month",
@@ -475,6 +492,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 							disabled: fromMonth && currentMonth <= fromMonth,
 							className: btnClassNames,
 							onClick: () => setCurrentMonth((m) => addMonths(m ?? new Date(), -1)),
+							__e2e_test_id__: testId(__e2e_test_id__, "prev-month"),
 							children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
@@ -486,6 +504,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 							disabled: toMonth && currentMonth >= toMonth,
 							className: btnClassNames,
 							onClick: () => setCurrentMonth((m) => addMonths(m ?? new Date(), 1)),
+							__e2e_test_id__: testId(__e2e_test_id__, "next-month"),
 							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 						}), showYearNavigation && /* @__PURE__ */ jsx(Button, {
 							"aria-label": "next year",
@@ -494,6 +513,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 							disabled: toMonth && currentMonth >= toMonth,
 							className: btnClassNames,
 							onClick: () => setCurrentMonth((m) => addMonths(m ?? new Date(), 12)),
+							__e2e_test_id__: testId(__e2e_test_id__, "next-year"),
 							children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, {})
 						})]
 					})]
@@ -502,6 +522,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 			Root: ({ className: className$1, rootRef,...props$1 }) => {
 				return /* @__PURE__ */ jsx("div", {
 					"data-slot": "calendar",
+					"data-test-id": __e2e_test_id__,
 					ref: rootRef,
 					className: cn(className$1),
 					...props$1
@@ -539,8 +560,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 }
 function CalendarDayButton({ className, day, modifiers,...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const ref = React$43.useRef(null);
-	React$43.useEffect(() => {
+	const ref = React$44.useRef(null);
+	React$44.useEffect(() => {
 		if (modifiers.focused) ref.current?.focus();
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
@@ -559,38 +580,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
 
 //#endregion
 //#region src/card/card.tsx
-const Card = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Card = React$43.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$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardHeader = React$43.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$42.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
+const CardTitle = React$43.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$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
+const CardDescription = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
 	ref,
 	className: cn("text-sm text-muted-foreground", className),
 	...props
 }));
 CardDescription.displayName = "CardDescription";
-const CardContent = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardContent = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("p-6 pt-0", className),
 	...props
 }));
 CardContent.displayName = "CardContent";
-const CardFooter = React$42.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const CardFooter = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
 	ref,
 	className: cn("flex items-center p-6 pt-0", className),
 	...props
@@ -601,7 +622,7 @@ CardFooter.displayName = "CardFooter";
 //#region src/card-hover/card-hover.tsx
 const HoverCard = HoverCardPrimitive.Root;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
-const HoverCardContent = React$41.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+const HoverCardContent = React$42.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
 	ref,
 	align,
 	sideOffset,
@@ -612,31 +633,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 //#endregion
 //#region src/carousel/carousel.tsx
-const CarouselContext = React$40.createContext(null);
+const CarouselContext = React$41.createContext(null);
 function useCarousel() {
-	const context = React$40.useContext(CarouselContext);
+	const context = React$41.useContext(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
 	return context;
 }
-const Carousel = React$40.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
+const Carousel = React$41.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$40.useState(false);
-	const [canScrollNext, setCanScrollNext] = React$40.useState(false);
-	const onSelect = React$40.useCallback(() => {
+	const [canScrollPrev, setCanScrollPrev] = React$41.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$41.useState(false);
+	const onSelect = React$41.useCallback(() => {
 		if (!api) return;
 		setCanScrollPrev(api.canScrollPrev());
 		setCanScrollNext(api.canScrollNext());
 	}, [api]);
-	const scrollPrev = React$40.useCallback(() => {
+	const scrollPrev = React$41.useCallback(() => {
 		api?.scrollPrev();
 	}, [api]);
-	const scrollNext = React$40.useCallback(() => {
+	const scrollNext = React$41.useCallback(() => {
 		api?.scrollNext();
 	}, [api]);
-	const handleKeyDown = React$40.useCallback((event) => {
+	const handleKeyDown = React$41.useCallback((event) => {
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			scrollPrev();
@@ -645,11 +666,11 @@ const Carousel = React$40.forwardRef(({ orientation = "horizontal", opts, setApi
 			scrollNext();
 		}
 	}, [scrollPrev, scrollNext]);
-	React$40.useEffect(() => {
+	React$41.useEffect(() => {
 		if (!api || !setApi) return;
 		setApi(api);
 	}, [api, setApi]);
-	React$40.useEffect(() => {
+	React$41.useEffect(() => {
 		if (!api) return;
 		onSelect();
 		api.on("reInit", onSelect);
@@ -690,7 +711,7 @@ const Carousel = React$40.forwardRef(({ orientation = "horizontal", opts, setApi
 	});
 });
 Carousel.displayName = "Carousel";
-const CarouselContent = React$40.forwardRef(({ className,...props }, ref) => {
+const CarouselContent = React$41.forwardRef(({ className,...props }, ref) => {
 	const { carouselRef, orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref: carouselRef,
@@ -703,7 +724,7 @@ const CarouselContent = React$40.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselContent.displayName = "CarouselContent";
-const CarouselItem = React$40.forwardRef(({ className,...props }, ref) => {
+const CarouselItem = React$41.forwardRef(({ className,...props }, ref) => {
 	const { orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -713,7 +734,7 @@ const CarouselItem = React$40.forwardRef(({ className,...props }, ref) => {
 	});
 });
 CarouselItem.displayName = "CarouselItem";
-const CarouselPrevious = React$40.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselPrevious = React$41.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -730,7 +751,7 @@ const CarouselPrevious = React$40.forwardRef(({ className, variant = "outline",
 	});
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-const CarouselNext = React$40.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
+const CarouselNext = React$41.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
 		ref,
@@ -765,7 +786,8 @@ const checkboxVariants = cva("cursor-pointer peer appearance-none rounded-sm bor
 		checkIcon: {
 			default: "cross",
 			check: "check",
-			square: "square"
+			square: "square",
+			minus: "minus"
 		},
 		iconStyle: {
 			default: "text-foreground",
@@ -788,6 +810,7 @@ function Checkbox({ label, className, variant, checkIcon, checkboxSize, iconStyl
 		fill: "var(--muted-foreground)",
 		className: "size-1/3"
 	});
+	else if (checkIcon === "minus") icon = /* @__PURE__ */ jsx(MinusIcon, {});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative flex gap-2 items-center", className),
 		"data-test-id": __e2e_test_id__,
@@ -863,6 +886,7 @@ function DialogContent({ className, children, showCloseButton = true, __e2e_test
 		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 			"data-slot": "dialog-content",
 			className: cn("bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
+			"data-test-id": __e2e_test_id__,
 			...props,
 			children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 				title: "Close",
@@ -873,7 +897,7 @@ function DialogContent({ className, children, showCloseButton = true, __e2e_test
 					variant: "outline",
 					size: "icon",
 					className: "size-6 rounded",
-					__e2e_test_id__: __e2e_test_id__ ? `${__e2e_test_id__}-close` : void 0,
+					__e2e_test_id__: testId(__e2e_test_id__, "close"),
 					children: /* @__PURE__ */ jsx(Cross2Icon, {})
 				}), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
@@ -914,7 +938,7 @@ function DialogDescription({ className,...props }) {
 
 //#endregion
 //#region src/command-palette/command-palette.tsx
-const CommandPalette = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
+const CommandPalette = React$40.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
@@ -932,7 +956,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
 		})
 	});
 };
-const CommandPaletteInput = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const CommandPaletteInput = React$40.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, {
@@ -942,31 +966,31 @@ const CommandPaletteInput = React$39.forwardRef(({ className,...props }, ref) =>
 	})]
 }));
 CommandPaletteInput.displayName = Command$1.Input.displayName;
-const CommandPaletteList = React$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+const CommandPaletteList = React$40.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$39.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
+const CommandPaletteEmpty = React$40.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$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
+const CommandPaletteGroup = React$40.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$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+const CommandPaletteSeparator = React$40.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$39.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
+const CommandPaletteItem = React$40.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
@@ -1042,8 +1066,8 @@ const frameworks = [
 	}
 ];
 function ComboboxDemo() {
-	const [open, setOpen] = React$38.useState(false);
-	const [value, setValue] = React$38.useState("");
+	const [open, setOpen] = React$39.useState(false);
+	const [value, setValue] = React$39.useState("");
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -1247,7 +1271,7 @@ const ContentFrame = ({ title = "", controls = [], indicators = [], children, on
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-grow gap-2 overflow-hidden",
 					children: [/* @__PURE__ */ jsx("h2", {
-						className: "text-xl overflow-hidden text-ellipsis whitespace-nowrap",
+						className: "text-xl overflow-hidden text-ellipsis whitespace-nowrap w-full",
 						children: titleLink ?? title
 					}), indicators.length > 0 && /* @__PURE__ */ jsx("div", {
 						className: "flex gap-2 whitespace-nowrap",
@@ -1283,32 +1307,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-const ContextMenuSubTrigger = React$37.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
+const ContextMenuSubTrigger = React$38.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$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
+const ContextMenuSubContent = React$38.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$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
+const ContextMenuContent = React$38.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$37.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
+const ContextMenuItem = React$38.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$37.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
+const ContextMenuCheckboxItem = React$38.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,
@@ -1319,7 +1343,7 @@ const ContextMenuCheckboxItem = React$37.forwardRef(({ className, children, chec
 	}), children]
 }));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-const ContextMenuRadioItem = React$37.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
+const ContextMenuRadioItem = React$38.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,
@@ -1329,13 +1353,13 @@ const ContextMenuRadioItem = React$37.forwardRef(({ className, children,...props
 	}), children]
 }));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-const ContextMenuLabel = React$37.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
+const ContextMenuLabel = React$38.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$37.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
+const ContextMenuSeparator = React$38.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
 	ref,
 	className: cn("-mx-1 my-1 h-px bg-border", className),
 	...props
@@ -1480,7 +1504,7 @@ function DropdownMenuSubContent({ className,...props }) {
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React$36.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+const TooltipContent = React$37.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),
@@ -1975,6 +1999,10 @@ function getColumnVariant(variant) {
 			icon: ListChecksIcon,
 			label: "Multi-select"
 		};
+		case "hierarchy": return {
+			icon: ListTreeIcon,
+			label: "Hierarchy"
+		};
 		case "checkbox": return {
 			icon: CheckSquareIcon,
 			label: "Checkbox"
@@ -1987,7 +2015,7 @@ function getColumnVariant(variant) {
 	}
 }
 function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
-	const [open, setOpen] = React$35.useState(false);
+	const [open, setOpen] = React$36.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;
@@ -1996,7 +2024,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 	const pinnedPosition = column.getIsPinned();
 	const isPinnedLeft = pinnedPosition === "left";
 	const isPinnedRight = pinnedPosition === "right";
-	const onSortingChange = React$35.useCallback((direction) => {
+	const onSortingChange = React$36.useCallback((direction) => {
 		table.setSorting((prev) => {
 			const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
 			const newSort = {
@@ -2010,19 +2038,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 			} else return [...prev, newSort];
 		});
 	}, [column.id, table]);
-	const onSortRemove = React$35.useCallback(() => {
+	const onSortRemove = React$36.useCallback(() => {
 		table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
 	}, [column.id, table]);
-	const onLeftPin = React$35.useCallback(() => {
+	const onLeftPin = React$36.useCallback(() => {
 		column.pin("left");
 	}, [column]);
-	const onRightPin = React$35.useCallback(() => {
+	const onRightPin = React$36.useCallback(() => {
 		column.pin("right");
 	}, [column]);
-	const onUnpin = React$35.useCallback(() => {
+	const onUnpin = React$36.useCallback(() => {
 		column.pin(false);
 	}, [column]);
-	const onTriggerPointerDown = React$35.useCallback((event) => {
+	const onTriggerPointerDown = React$36.useCallback((event) => {
 		onPointerDown?.(event);
 		if (event.defaultPrevented) return;
 		if (event.button !== 0) return;
@@ -2134,7 +2162,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
 		})
 	] });
 }
-const DataGridColumnResizer = React$35.memo(DataGridColumnResizerImpl, (prev, next) => {
+const DataGridColumnResizer = React$36.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;
@@ -2143,7 +2171,7 @@ const DataGridColumnResizer = React$35.memo(DataGridColumnResizerImpl, (prev, ne
 });
 function DataGridColumnResizerImpl({ header, table, label }) {
 	const defaultColumnDef = table._getDefaultColumnDef();
-	const onDoubleClick = React$35.useCallback(() => {
+	const onDoubleClick = React$36.useCallback(() => {
 		header.column.resetSize();
 	}, [header.column]);
 	return /* @__PURE__ */ jsx("div", {
@@ -2252,7 +2280,7 @@ function DataGridContextMenu({ table }) {
 		onRowsDelete
 	});
 }
-const ContextMenu$1 = React$34.memo(ContextMenuImpl, (prev, next) => {
+const ContextMenu$1 = React$35.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;
@@ -2263,7 +2291,7 @@ const ContextMenu$1 = React$34.memo(ContextMenuImpl, (prev, next) => {
 	return true;
 });
 function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
-	const triggerStyle = React$34.useMemo(() => ({
+	const triggerStyle = React$35.useMemo(() => ({
 		position: "fixed",
 		left: `${contextMenu.x}px`,
 		top: `${contextMenu.y}px`,
@@ -2276,11 +2304,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		pointerEvents: "none",
 		opacity: 0
 	}), [contextMenu.x, contextMenu.y]);
-	const onCloseAutoFocus = React$34.useCallback((event) => {
+	const onCloseAutoFocus = React$35.useCallback((event) => {
 		event.preventDefault();
 		dataGridRef?.current?.focus();
 	}, [dataGridRef]);
-	const onCopy = React$34.useCallback(async () => {
+	const onCopy = React$35.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rows = table.getRowModel().rows;
 		const columnIds = [];
@@ -2319,7 +2347,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$34.useMemo(() => {
+	const canClear = React$35.useMemo(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
 		const visibleCols = table.getVisibleLeafColumns();
 		const rows = table.getRowModel().rows;
@@ -2336,7 +2364,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		}
 		return true;
 	}, [selectionState, table]);
-	const onClear = React$34.useCallback(() => {
+	const onClear = React$35.useCallback(() => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		if (!canClear) return;
 		const updates = [];
@@ -2355,7 +2383,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
 		selectionState,
 		canClear
 	]);
-	const onDelete = React$34.useCallback(async () => {
+	const onDelete = React$35.useCallback(async () => {
 		if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
 		const rowIndices = new Set();
 		for (const cellKey of selectionState.selectedCells) {
@@ -2432,12 +2460,12 @@ function composeRefs(...refs) {
 * Accepts callback refs and RefObject(s)
 */
 function useComposedRefs(...refs) {
-	return React$33.useCallback(composeRefs(...refs), refs);
+	return React$34.useCallback(composeRefs(...refs), refs);
 }
 
 //#endregion
 //#region src/data-grid/data-grid-row.tsx
-const DataGridRow = React$32.memo(DataGridRowImpl, (prev, next) => {
+const DataGridRow = React$33.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;
@@ -2457,9 +2485,10 @@ const DataGridRow = React$32.memo(DataGridRowImpl, (prev, next) => {
 	if (prev.selectionSize !== next.selectionSize) return false;
 	if (prev.visibleColumnIds !== next.visibleColumnIds) return false;
 	if (prev.isHighlighted !== next.isHighlighted) return false;
+	if (prev.columnDefsVersion !== next.columnDefsVersion) return false;
 	return true;
 });
-function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, isHighlighted = false, onRowClick, ref, className,...props }) {
+function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, rowMapRef, rowHeight, focusedCell, editingCell: _editingCell, selectionSize: _selectionSize, visibleColumnIds: _visibleColumnIds, columnDefsVersion: _columnDefsVersion, isHighlighted = false, onRowClick, ref, className,...props }) {
 	const rowRef = useComposedRefs(ref, (node) => {
 		if (node && typeof virtualRowIndex !== "undefined") {
 			rowVirtualizer.measureElement(node);
@@ -2467,7 +2496,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
 		}
 	});
 	const isRowSelected = row.getIsSelected();
-	const handleRowClick = React$32.useCallback((event) => {
+	const handleRowClick = React$33.useCallback((event) => {
 		const target = event.target;
 		if (target.closest("input, button, [role=\"checkbox\"]")) return;
 		if (event.detail === 1) onRowClick?.(virtualRowIndex);
@@ -2517,20 +2546,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$31.useRef(callback);
-	React$31.useEffect(() => {
+	const callbackRef = React$32.useRef(callback);
+	React$32.useEffect(() => {
 		callbackRef.current = callback;
 	});
-	return React$31.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+	return React$32.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 
 //#endregion
 //#region src/hooks/use-debounced-callback.ts
 function useDebouncedCallback(callback, delay) {
 	const handleCallback = useCallbackRef(callback);
-	const debounceTimerRef = React$30.useRef(0);
-	React$30.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	const setValue = React$30.useCallback((...args) => {
+	const debounceTimerRef = React$31.useRef(0);
+	React$31.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+	const setValue = React$31.useCallback((...args) => {
 		window.clearTimeout(debounceTimerRef.current);
 		debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
 	}, [handleCallback, delay]);
@@ -2546,11 +2575,12 @@ function useDebouncedCallback(callback, delay) {
 const inputVariants = cva("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
 	variants: { variant: {
 		default: "min-h-9 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-		simple: "min-h-8"
+		simple: "min-h-8",
+		discreet: "py-0 min-h-7 border-transparent shadow-none hover:border-input hover:shadow-sm focus:border-input focus:shadow-sm bg-transparent hover:bg-accent/30"
 	} },
 	defaultVariants: { variant: "default" }
 });
-const Input = React$29.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
+const Input = React$30.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
 	const input = /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
@@ -2576,7 +2606,7 @@ Input.displayName = "Input";
 
 //#endregion
 //#region src/data-grid/data-grid-search.tsx
-const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
+const DataGridSearch = React$29.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;
@@ -2590,13 +2620,13 @@ const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
 	return true;
 });
 function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
-	const inputRef = React$28.useRef(null);
-	React$28.useEffect(() => {
+	const inputRef = React$29.useRef(null);
+	React$29.useEffect(() => {
 		if (searchOpen) requestAnimationFrame(() => {
 			inputRef.current?.focus();
 		});
 	}, [searchOpen]);
-	React$28.useEffect(() => {
+	React$29.useEffect(() => {
 		if (!searchOpen) return;
 		function onEscape(event) {
 			if (event.key === "Escape") {
@@ -2607,7 +2637,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 		document.addEventListener("keydown", onEscape);
 		return () => document.removeEventListener("keydown", onEscape);
 	}, [searchOpen, onSearchOpenChange]);
-	const onKeyDown = React$28.useCallback((event) => {
+	const onKeyDown = React$29.useCallback((event) => {
 		event.stopPropagation();
 		if (event.key === "Enter") {
 			event.preventDefault();
@@ -2618,20 +2648,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
 	const debouncedSearch = useDebouncedCallback((query) => {
 		onSearch(query);
 	}, 150);
-	const onChange = React$28.useCallback((event) => {
+	const onChange = React$29.useCallback((event) => {
 		const value = event.target.value;
 		onSearchQueryChange(value);
 		debouncedSearch(value);
 	}, [onSearchQueryChange, debouncedSearch]);
-	const onTriggerPointerDown = React$28.useCallback((event) => {
+	const onTriggerPointerDown = React$29.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$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onNextMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
-	const onClose = React$28.useCallback(() => {
+	const onPrevMatchPointerDown = React$29.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onNextMatchPointerDown = React$29.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
+	const onClose = React$29.useCallback(() => {
 		onSearchOpenChange(false);
 	}, [onSearchOpenChange]);
 	if (!searchOpen) return null;
@@ -2708,16 +2738,17 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 	const selectionSize = meta?.selectionState?.selectedCells?.size ?? 0;
 	const highlightedRowIndex = meta?.highlightedRowIndex ?? -1;
 	const onRowClick = meta?.onRowClick;
+	const columnDefsVersion = meta?.columnDefsVersion ?? 0;
 	const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
-	const prevVisibleColumnIdsRef = React$27.useRef(visibleColumnIds);
+	const prevVisibleColumnIdsRef = React$28.useRef(visibleColumnIds);
 	if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
 		rowMapRef.current.clear();
 		prevVisibleColumnIdsRef.current = visibleColumnIds;
 	}
-	const onGridContextMenu = React$27.useCallback((event) => {
+	const onGridContextMenu = React$28.useCallback((event) => {
 		event.preventDefault();
 	}, []);
-	const onAddRowKeyDown = React$27.useCallback(async (event) => {
+	const onAddRowKeyDown = React$28.useCallback(async (event) => {
 		if (!onRowAdd) return;
 		if (event.key === "Enter" || event.key === "") {
 			event.preventDefault();
@@ -2820,6 +2851,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
 								editingCell,
 								selectionSize,
 								visibleColumnIds,
+								columnDefsVersion,
 								isHighlighted: highlightedRowIndex === virtualItem.index,
 								onRowClick
 							}, row.id);
@@ -2869,20 +2901,20 @@ 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$26.useMemo(() => {
+	const editableResolver = React$27.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$26.useMemo(() => {
+	const classNameResolver = React$27.useMemo(() => {
 		const v = colCellMeta?.className;
 		return typeof v === "function" ? v : () => v;
 	}, [colCellMeta?.className]);
 	const colCellClassName = classNameResolver(rowOriginal);
 	const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
 	const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
-	const onClick = React$26.useCallback((event) => {
+	const onClick = React$27.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			onClickProp?.(event);
@@ -2895,7 +2927,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		onClickProp
 	]);
-	const onContextMenu = React$26.useCallback((event) => {
+	const onContextMenu = React$27.useCallback((event) => {
 		if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2903,7 +2935,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseDown = React$26.useCallback((event) => {
+	const onMouseDown = React$27.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2911,7 +2943,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseEnter = React$26.useCallback((event) => {
+	const onMouseEnter = React$27.useCallback((event) => {
 		if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
 	}, [
 		meta,
@@ -2919,10 +2951,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		columnId,
 		isEditing
 	]);
-	const onMouseUp = React$26.useCallback(() => {
+	const onMouseUp = React$27.useCallback(() => {
 		if (!isEditing) meta?.onCellMouseUp?.();
 	}, [meta, isEditing]);
-	const onDoubleClick = React$26.useCallback((event) => {
+	const onDoubleClick = React$27.useCallback((event) => {
 		if (!isEditing) {
 			event.preventDefault();
 			if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
@@ -2934,7 +2966,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 		isEditing,
 		isEditable
 	]);
-	const onKeyDown = React$26.useCallback((event) => {
+	const onKeyDown = React$27.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;
@@ -3008,17 +3040,17 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
 //#region src/data-grid/cell-variants/checkbox-cell.tsx
 function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$25.useState(Boolean(initialValue));
-	const containerRef = React$25.useRef(null);
+	const [value, setValue] = React$26.useState(Boolean(initialValue));
+	const containerRef = React$26.useRef(null);
 	const meta = table.options.meta;
 	const colMeta = cell.column.columnDef.meta;
-	const editableResolver = React$25.useMemo(() => {
+	const editableResolver = React$26.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$25.useCallback((checked) => {
+	const onCheckedChange = React$26.useCallback((checked) => {
 		setValue(checked);
 		meta?.onDataUpdate?.({
 			rowIndex,
@@ -3030,7 +3062,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		rowIndex,
 		columnId
 	]);
-	const onWrapperKeyDown = React$25.useCallback((event) => {
+	const onWrapperKeyDown = React$26.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused && (event.key === "" || event.key === "Enter")) {
 			event.preventDefault();
@@ -3043,17 +3075,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	React$25.useEffect(() => {
+	React$26.useEffect(() => {
 		setValue(Boolean(initialValue));
 	}, [initialValue]);
-	React$25.useEffect(() => {
+	React$26.useEffect(() => {
 		if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
 		meta?.searchOpen,
 		meta?.isScrolling
 	]);
-	const onWrapperClick = React$25.useCallback((event) => {
+	const onWrapperClick = React$26.useCallback((event) => {
 		if (!isEditable) return;
 		if (isFocused) {
 			event.preventDefault();
@@ -3066,13 +3098,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
 		onCheckedChange,
 		isEditable
 	]);
-	const onCheckboxClick = React$25.useCallback((event) => {
+	const onCheckboxClick = React$26.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxMouseDown = React$25.useCallback((event) => {
+	const onCheckboxMouseDown = React$26.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
-	const onCheckboxDoubleClick = React$25.useCallback((event) => {
+	const onCheckboxDoubleClick = React$26.useCallback((event) => {
 		event.stopPropagation();
 	}, []);
 	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
@@ -3127,20 +3159,20 @@ function formatDateToISOString(date) {
 }
 function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
 	const initialValue = cell.getValue();
-	const [value, setValue] = React$24.useState(parseToLocalDate(initialValue));
-	const [open, setOpen] = React$24.useState(false);
-	const containerRef = React$24.useRef(null);
-	const hasStoppedRef = React$24.useRef(false);
+	const [value, setValue] = React$25.useState(parseToLocalDate(initialValue));
+	const [open, setOpen] = React$25.useState(false);
+	const containerRef = React$25.useRef(null);
+	const hasStoppedRef = React$25.useRef(false);
 	const meta = table.options.meta;
-	const prevInitialValueRef = React$24.useRef(initialValue);
+	const prevInitialValueRef = React$25.useRef(initialValue);
 	if (initialValue !== prevInitialValueRef.current) {
 		prevInitialValueRef.current = initialValue;
 		setValue(parseToLocalDate(initialValue));
 	}
-	React$24.useEffect(() => {
+	React$25.useEffect(() => {
 		if (isEditing) hasStoppedRef.current = false;
 	}, [isEditing]);
-	const onDateSelect = React$24.useCallback((date) => {
+	const onDateSelect = React$25.useCallback((date) => {
 		if (!date) return;
 		setValue(date);
 		meta?.onDataUpdate?.({
@@ -3156,14 +3188,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		rowIndex,
 		columnId
 	]);
-	const onOpenChange = React$24.useCallback((isOpen) => {
+	const onOpenChange = React$25.useCallback((isOpen) => {
 		setOpen(isOpen);
 		if (!isOpen && isEditing && !hasStoppedRef.current) {
 			hasStoppedRef.current = true;
 			meta?.onCellEditingStop?.();
 		}
 	}, [isEditing, meta]);
-	const onWrapperKeyDown = React$24.useCallback((event) => {
+	const onWrapperKeyDown = React$25.useCallback((event) => {
 		if (isEditing) {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -3183,10 +3215,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 		initialValue,
 		meta
 	]);
-	React$24.useEffect(() => {
+	React$25.useEffect(() => {
 		setOpen(isEditing);
 	}, [isEditing]);
-	React$24.useEffect(() => {
+	React$25.useEffect(() => {
 		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
 	}, [
 		isFocused,
@@ -3238,7 +3270,7 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
 //#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$23.useRef(null);
+	const containerRef = React$24.useRef(null);
 	const cellOpts = cell.column.columnDef.meta?.cell;
 	const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
 	const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
@@ -3247,8 +3279,9 @@ function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSe
 	if (!timelineStartMs || !timelineEndMs) return null;
 	const timelineDurationMs = timelineEndMs - timelineStartMs;
 	const hasValidDates = initialValue && initialValue.start instanceof Date && initialValue.end instanceof Date;
-	const msUntilStart = hasValidDates ? initialValue.start.getTime() - timelineStartMs : 0;
 	const barWidthMs = hasValidDates ? Math.min(initialValue.end.getTime(), timelineEndMs) - Math.max(initialValue.start.getTime(), timelineStartMs) : 0;
+	const hasVisibleBar = hasValidDates && barWidthMs > 0;
+	const msUntilStart = hasVisibleBar ? Math.max(0, initialValue.start.getTime() - timelineStartMs) : 0;
 	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
 		ref: containerRef,
 		cell,
@@ -3261,9 +3294,9 @@ function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSe
 		className: "px-1",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "size-full flex overflow-hidden",
-			children: hasValidDates && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			children: hasVisibleBar && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 				className: "shrink-0",
-				style: { width: `${Math.max(0, msUntilStart / timelineDurationMs * 100)}%` }
+				style: { width: `${msUntilStart / timelineDurationMs * 100}%` }
 			}), /* @__PURE__ */ jsx("div", {
 				className: cn("shrink-0 h-full rounded-sm bg-primary", initialValue.barClassName),
 				style: { width: `${barWidthMs / timelineDurationMs * 100}%` }
@@ -3272,12 +3305,299 @@ function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSe
 	});
 }
 
+//#endregion
+//#region src/data-grid/cell-variants/hierarchy-cell.tsx
+/**
+* Collects all descendant IDs from a hierarchy option.
+*/
+function getAllDescendantIds(option) {
+	const ids = [];
+	if (option.children) for (const child of option.children) {
+		ids.push(child.id);
+		ids.push(...getAllDescendantIds(child));
+	}
+	return ids;
+}
+/**
+* Collects all IDs in the hierarchy tree (including the option itself).
+*/
+function getAllIds(option) {
+	return [option.id, ...getAllDescendantIds(option)];
+}
+/**
+* Finds an option by ID in the hierarchy tree.
+*/
+function findOptionById(options, id) {
+	for (const opt of options) {
+		if (opt.id === id) return opt;
+		if (opt.children) {
+			const found = findOptionById(opt.children, id);
+			if (found) return found;
+		}
+	}
+	return null;
+}
+/**
+* Gets the label path from root to the given ID.
+*/
+function getLabelPath(options, id, path = []) {
+	for (const opt of options) {
+		if (opt.id === id) return {
+			found: true,
+			path: [...path, opt.label]
+		};
+		if (opt.children) {
+			const result = getLabelPath(opt.children, id, [...path, opt.label]);
+			if (result.found) return result;
+		}
+	}
+	return {
+		found: false,
+		path
+	};
+}
+/**
+* Gets the ancestor IDs (parent chain) from root to the given ID.
+* Returns the IDs of all ancestors, NOT including the target ID itself.
+*/
+function getAncestorIds(options, targetId, currentPath = []) {
+	for (const opt of options) {
+		if (opt.id === targetId) return currentPath;
+		if (opt.children) {
+			const result = getAncestorIds(opt.children, targetId, [...currentPath, opt.id]);
+			if (result !== null) return result;
+		}
+	}
+	return null;
+}
+/**
+* Builds a flat lookup map from ID to label for O(1) display lookups.
+*/
+function buildLabelMap(options, map = new Map()) {
+	for (const opt of options) {
+		map.set(opt.id, opt.label);
+		if (opt.children) buildLabelMap(opt.children, map);
+	}
+	return map;
+}
+/**
+* Checks if an option or any of its descendants contain the search term.
+*/
+function matchesSearch$1(option, searchTerm) {
+	const term = searchTerm.toLowerCase();
+	if (option.label.toLowerCase().includes(term)) return true;
+	if (option.children) return option.children.some((child) => matchesSearch$1(child, term));
+	return false;
+}
+/**
+* Computes the initial expanded IDs.
+* - If there's only one top-level option with children, expand it by default.
+* - If there's a selected value, expand all ancestors to show it.
+*/
+function getInitialExpandedIds(options, selectedValue) {
+	const expandedIds = new Set();
+	const firstOption = options[0];
+	if (options.length === 1 && firstOption?.children && firstOption.children.length > 0) expandedIds.add(firstOption.id);
+	if (selectedValue) {
+		const ancestors = getAncestorIds(options, selectedValue);
+		if (ancestors) for (const id of ancestors) expandedIds.add(id);
+	}
+	return expandedIds;
+}
+/**
+* Renders a single hierarchy item with expand/collapse and selection capabilities.
+*/
+function HierarchyItem({ option, selectedValue, expandedIds, onToggleExpand, onSelect, depth = 0, searchTerm = "", ancestorMatched = false }) {
+	const hasChildren = option.children && option.children.length > 0;
+	const isExpanded = expandedIds.has(option.id);
+	const isSelected = option.id === selectedValue;
+	const matchesSelf = searchTerm && option.label.toLowerCase().includes(searchTerm.toLowerCase());
+	const childrenMatchSearch = searchTerm && hasChildren && option.children.some((c) => matchesSearch$1(c, searchTerm));
+	if (searchTerm && !matchesSelf && !childrenMatchSearch && !ancestorMatched) return null;
+	const shouldShowExpanded = isExpanded || searchTerm !== "" && childrenMatchSearch;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
+		value: `${option.label}-${option.id}`,
+		onSelect: () => onSelect(option),
+		style: { paddingLeft: `${depth * 20 + 8}px` },
+		children: [
+			hasChildren ? /* @__PURE__ */ jsx(Button, {
+				onClick: (e) => {
+					e.stopPropagation();
+					onToggleExpand(option.id);
+				},
+				variant: "extraGhost",
+				size: "sm",
+				className: "size-4",
+				children: shouldShowExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon$1, {}) : /* @__PURE__ */ jsx(ChevronRightIcon$1, {})
+			}) : /* @__PURE__ */ jsx("span", { className: "size-4" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children: option.label
+			}),
+			isSelected && /* @__PURE__ */ jsx(CheckIcon$1, { className: "ml-auto h-4 w-4" })
+		]
+	}), hasChildren && shouldShowExpanded && /* @__PURE__ */ jsx(Fragment, { children: option.children.map((child) => /* @__PURE__ */ jsx(HierarchyItem, {
+		option: child,
+		selectedValue,
+		expandedIds,
+		onToggleExpand,
+		onSelect,
+		depth: depth + 1,
+		searchTerm,
+		ancestorMatched: ancestorMatched || !!matchesSelf
+	}, child.id)) })] });
+}
+function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
+	const initialValue = cell.getValue();
+	const [value, setValue] = React$23.useState(initialValue);
+	const [open, setOpen] = React$23.useState(false);
+	const [searchValue, setSearchValue] = React$23.useState("");
+	const containerRef = React$23.useRef(null);
+	const inputRef = React$23.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$23.useState(() => getInitialExpandedIds(options, initialValue));
+	const labelMap = React$23.useMemo(() => buildLabelMap(options), [options]);
+	const displayLabel = React$23.useMemo(() => {
+		if (!value) return "";
+		return labelMap.get(value) ?? value;
+	}, [value, labelMap]);
+	const toggleExpand = React$23.useCallback((id) => {
+		setExpandedIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const onOptionSelect = React$23.useCallback((option) => {
+		const newValue = option.id;
+		setValue(newValue);
+		meta?.onDataUpdate?.({
+			rowIndex,
+			columnId,
+			value: newValue
+		});
+		meta?.onCellEditingStop?.();
+		setOpen(false);
+	}, [
+		meta,
+		rowIndex,
+		columnId
+	]);
+	const onOpenChange = React$23.useCallback((isOpen) => {
+		setOpen(isOpen);
+		if (!isOpen) {
+			setSearchValue("");
+			meta?.onCellEditingStop?.();
+		}
+	}, [meta]);
+	const onOpenAutoFocus = React$23.useCallback((event) => {
+		event.preventDefault();
+		inputRef.current?.focus();
+	}, []);
+	const onWrapperKeyDown = React$23.useCallback((event) => {
+		if (isEditing) {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setValue(initialValue);
+				setOpen(false);
+				setSearchValue("");
+				meta?.onCellEditingStop?.();
+			} else if (event.key === "Tab") {
+				event.preventDefault();
+				setOpen(false);
+				setSearchValue("");
+				meta?.onCellEditingStop?.({ direction: event.shiftKey ? "left" : "right" });
+			}
+		}
+	}, [
+		isEditing,
+		initialValue,
+		meta
+	]);
+	React$23.useEffect(() => {
+		setValue(initialValue);
+	}, [initialValue]);
+	React$23.useEffect(() => {
+		if (value) {
+			const ancestors = getAncestorIds(options, value);
+			if (ancestors && ancestors.length > 0) setExpandedIds((prev) => {
+				const next = new Set(prev);
+				for (const id of ancestors) next.add(id);
+				return next;
+			});
+		}
+	}, [value, options]);
+	React$23.useEffect(() => {
+		if (isEditing && !open) setOpen(true);
+		if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
+	}, [
+		isFocused,
+		isEditing,
+		open,
+		meta?.searchOpen,
+		meta?.isScrolling
+	]);
+	return /* @__PURE__ */ jsx(DataGridCellWrapper, {
+		ref: containerRef,
+		cell,
+		table,
+		rowIndex,
+		columnId,
+		isEditing,
+		isFocused,
+		isSelected,
+		onKeyDown: onWrapperKeyDown,
+		children: isEditing ? /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "size-full items-start text-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden line-clamp-1",
+					children: displayLabel
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				"data-grid-cell-editor": "",
+				align: "start",
+				sideOffset,
+				className: "max-w-[500px] w-full rounded-none p-0",
+				onOpenAutoFocus,
+				children: /* @__PURE__ */ jsxs(Command, {
+					shouldFilter: false,
+					children: [/* @__PURE__ */ jsx(CommandInput, {
+						ref: inputRef,
+						value: searchValue,
+						onValueChange: setSearchValue,
+						placeholder: "Search...",
+						className: "h-auto flex-1 p-0 rounded-none"
+					}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No options found." }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx(HierarchyItem, {
+						option,
+						selectedValue: value,
+						expandedIds,
+						onToggleExpand: toggleExpand,
+						onSelect: onOptionSelect,
+						searchTerm: searchValue
+					}, option.id)) })] })]
+				})
+			})]
+		}) : /* @__PURE__ */ jsx("span", {
+			"data-slot": "grid-cell-content",
+			children: displayLabel
+		})
+	});
+}
+
 //#endregion
 //#region src/textarea/textarea.tsx
 const textareaVariants = cva("border-input placeholder:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50", {
 	variants: { variant: {
 		default: "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-		simple: ""
+		simple: "",
+		discreet: "border-transparent shadow-none hover:border-input hover:shadow-sm focus:border-input focus:shadow-sm bg-transparent hover:bg-accent/30"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -3680,7 +4000,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
 							onValueChange: setSearchValue,
 							onKeyDown: onInputKeyDown,
 							placeholder: "Search...",
-							className: "h-auto flex-1 p-0"
+							className: "h-auto flex-1 p-0 rounded-none"
 						})]
 					}), /* @__PURE__ */ jsxs(CommandList, {
 						className: "max-h-full",
@@ -4023,7 +4343,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
 				hasSearch && /* @__PURE__ */ jsx(CommandInput, {
 					ref: inputRef,
 					placeholder: "Search...",
-					className: "h-auto flex-1 p-0"
+					className: "h-auto flex-1 p-0 rounded-none"
 				}),
 				/* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
 				/* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
@@ -4261,6 +4581,15 @@ function DataGridCell({ cell, table }) {
 			isFocused,
 			isSelected
 		});
+		case "hierarchy": return /* @__PURE__ */ jsx(HierarchyCell, {
+			cell,
+			table,
+			rowIndex,
+			columnId,
+			isEditing,
+			isFocused,
+			isSelected
+		});
 		case "checkbox": return /* @__PURE__ */ jsx(CheckboxCell, {
 			cell,
 			table,
@@ -4702,6 +5031,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			return void 0;
 		}).filter((id) => Boolean(id));
 	}, [columns]);
+	const columnDefsVersionRef = React$15.useRef(0);
+	const prevColumnsRef = React$15.useRef(columns);
+	if (prevColumnsRef.current !== columns) {
+		prevColumnsRef.current = columns;
+		columnDefsVersionRef.current += 1;
+	}
+	const columnDefsVersion = columnDefsVersionRef.current;
 	const storageKey = React$15.useMemo(() => {
 		if (typeof window === "undefined") return void 0;
 		const path = globalThis.location?.pathname ?? "unknown";
@@ -5593,6 +5929,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 			rowHeight,
 			isScrolling,
 			highlightedRowIndex,
+			columnDefsVersion,
 			onRowClick: onRowClickProp,
 			getIsCellSelected,
 			getIsSearchMatch,
@@ -5630,6 +5967,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
 		searchOpen,
 		isScrolling,
 		highlightedRowIndex,
+		columnDefsVersion,
 		onRowClickProp,
 		getIsCellSelected,
 		getIsSearchMatch,
@@ -6215,6 +6553,47 @@ const InfoCard = ({ variant, title, message, showHomeButton = false, children })
 	});
 };
 
+//#endregion
+//#region src/input/deferred-input.tsx
+/**
+* An Input that buffers changes locally and only commits to the parent
+* on blur or Enter key press. Useful for forms where you don't want to
+* trigger expensive operations (like API calls) on every keystroke.
+*/
+function DeferredInput({ value, onCommit, onValueChange, commitOnEnter = true, onBlur, onKeyDown,...props }) {
+	const [localValue, setLocalValue] = useState(value);
+	useEffect(() => {
+		setLocalValue(value);
+	}, [value]);
+	const commitValue = useCallback(() => {
+		if (localValue !== value) onCommit(localValue);
+	}, [
+		localValue,
+		value,
+		onCommit
+	]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+		onValueChange?.(newValue);
+	}, [onValueChange]);
+	const handleBlur = useCallback((e) => {
+		commitValue();
+		onBlur?.(e);
+	}, [commitValue, onBlur]);
+	const handleKeyDown = useCallback((e) => {
+		if (commitOnEnter && e.key === "Enter") e.currentTarget.blur();
+		onKeyDown?.(e);
+	}, [commitOnEnter, onKeyDown]);
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		value: localValue,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown
+	});
+}
+
 //#endregion
 //#region src/input/number-input.tsx
 /**
@@ -6268,7 +6647,8 @@ function parseFormattedNumberHeuristic(formatted) {
 const numberInputWrapperVariants = cva("border-input bg-background grid grid-cols-[auto_1fr_auto] items-center overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50", {
 	variants: { variant: {
 		default: "min-h-9 focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
-		simple: "min-h-8"
+		simple: "min-h-8",
+		discreet: "py-0 min-h-7 border-transparent shadow-none hover:border-input hover:shadow-sm focus-within:border-input focus-within:shadow-sm bg-transparent hover:bg-accent/30"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -6361,7 +6741,7 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 					inputVariants({ variant }),
 					// Remove border/shadow/ring from input since wrapper handles it
 					// Use min-h-full to override min-h-9/min-h-8 from inputVariants - wrapper controls height - never use explicit h-* in input since it breaks the spinner buttons for some browsers
-					"min-h-full border-0 shadow-none focus-visible:ring-0 p-0 tabular-nums",
+					"min-h-full bg-transparent hover:bg-transparent border-0 shadow-none focus-visible:ring-0 p-0 tabular-nums",
 					!prefix && !suffix ? "col-span-3" : !prefix || !suffix ? "col-span-2" : "col-span-1",
 					"text-right",
 					!prefix && "pl-2",
@@ -6392,6 +6772,51 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 });
 NumberInput.displayName = "NumberInput";
 
+//#endregion
+//#region src/input/deferred-number-input.tsx
+/**
+* A NumberInput that buffers changes locally and only commits to the parent
+* on blur or Enter key press. Useful for forms where you don't want to
+* trigger expensive operations (like API calls) on every keystroke.
+*/
+function DeferredNumberInput({ value, onCommit, onValueChange, commitOnEnter = true, onBlur, onEnter,...props }) {
+	const [localValue, setLocalValue] = useState(value);
+	useEffect(() => {
+		setLocalValue(value);
+	}, [value]);
+	const commitValue = useCallback(() => {
+		if (localValue !== value) onCommit(localValue);
+	}, [
+		localValue,
+		value,
+		onCommit
+	]);
+	const handleChange = useCallback((newValue) => {
+		const normalizedValue = newValue ?? null;
+		setLocalValue(normalizedValue);
+		onValueChange?.(normalizedValue);
+	}, [onValueChange]);
+	const handleBlur = useCallback((e) => {
+		commitValue();
+		onBlur?.(e);
+	}, [commitValue, onBlur]);
+	const handleEnter = useCallback(() => {
+		if (commitOnEnter) commitValue();
+		onEnter?.();
+	}, [
+		commitOnEnter,
+		commitValue,
+		onEnter
+	]);
+	return /* @__PURE__ */ jsx(NumberInput, {
+		...props,
+		value: localValue ?? void 0,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		onEnter: handleEnter
+	});
+}
+
 //#endregion
 //#region src/mark-value-renderer/mark-value-renderer.tsx
 /**
@@ -6799,12 +7224,14 @@ const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
 	} },
 	defaultVariants: { side: "right" }
 });
-const SheetContent = React$6.forwardRef(({ side = "right", className, children,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
+const SheetContent = React$6.forwardRef(({ side = "right", className, children, __e2e_test_id__,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
 	ref,
 	className: cn(sheetVariants({ side }), className),
+	"data-test-id": __e2e_test_id__,
 	...props,
 	children: [/* @__PURE__ */ jsxs(SheetPrimitive.Close, {
 		className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
+		"data-test-id": testId(__e2e_test_id__, "close"),
 		children: [/* @__PURE__ */ jsx(Cross2Icon, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Close"
@@ -7220,6 +7647,23 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
 
 //#endregion
 //#region src/slicer/slicer.tsx
+/**
+* Collects all descendant values from a hierarchy option.
+*/
+function getAllDescendantValues(option) {
+	const values = [];
+	if (option.children) for (const child of option.children) values.push(child.value, ...getAllDescendantValues(child));
+	return values;
+}
+/**
+* Checks if an option or any of its descendants contain the search term.
+*/
+function matchesSearch(option, searchTerm) {
+	const term = searchTerm.toLowerCase();
+	if (option.label.toLowerCase().includes(term)) return true;
+	if (option.children) return option.children.some((child) => matchesSearch(child, term));
+	return false;
+}
 function usePersistedState(storageKey, defaultValue) {
 	const [state, setState] = useState(() => {
 		if (!storageKey) return defaultValue;
@@ -7238,7 +7682,21 @@ function usePersistedState(storageKey, defaultValue) {
 	}, [storageKey]);
 	return [state, setPersistedState];
 }
-function Slicer({ filterValues, selectedValues, onChange, title, isLoading = false, optionsHeight = 200, className, defaultCollapsed = false, storageKey }) {
+function Slicer({ filterValues, selectedValues, onChange, title, isLoading = false, optionsHeight = 200, className, defaultCollapsed = false, storageKey, isHierarchy, __e2e_test_id__ }) {
+	const isHierarchyMode = isHierarchy ?? filterValues.some((opt) => opt.children && opt.children.length > 0);
+	const [expandedIds, setExpandedIds] = useState(() => {
+		const firstOption = filterValues[0];
+		if (filterValues.length === 1 && firstOption?.children?.length) return new Set([firstOption.value]);
+		return new Set();
+	});
+	const toggleExpand = useCallback((value) => {
+		setExpandedIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(value)) next.delete(value);
+			else next.add(value);
+			return next;
+		});
+	}, []);
 	const effectiveStorageKey = storageKey === null ? void 0 : storageKey ?? `slicer-collapsed-${title}`;
 	const [isCollapsed, setIsCollapsed] = usePersistedState(effectiveStorageKey, defaultCollapsed);
 	const [searchQuery, setSearchQuery] = useState("");
@@ -7264,14 +7722,15 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 		else newVals = filterValues.map((o) => o.value);
 		onChange(newVals);
 	};
-	const handleOptionToggle = (optionValue, checked) => {
+	const handleOptionToggle = useCallback((optionValue) => {
 		const newSelected = new Set(selectedValues);
-		if (checked) newSelected.add(optionValue);
-		else newSelected.delete(optionValue);
+		if (newSelected.has(optionValue)) newSelected.delete(optionValue);
+		else newSelected.add(optionValue);
 		onChange(Array.from(newSelected));
-	};
+	}, [selectedValues, onChange]);
 	return /* @__PURE__ */ jsxs(Card, {
 		className: cn("flex flex-col overflow-hidden w-56 rounded shadow-sm shrink-0", className),
+		"data-test-id": __e2e_test_id__,
 		children: [/* @__PURE__ */ jsxs(CardHeader, {
 			className: "px-2 py-0 pt-2 flex space-y-0 border-b border-border bg-muted/50 relative min-h-9",
 			children: [
@@ -7284,7 +7743,8 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 					variant: "simple",
 					placeholder: "Search...",
 					value: searchQuery,
-					onChange: (e) => setSearchQuery(e.target.value)
+					onChange: (e) => setSearchQuery(e.target.value),
+					"data-test-id": testId(__e2e_test_id__, "search")
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
@@ -7295,6 +7755,7 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 					},
 					title: isCollapsed ? "Expand slicer" : "Collapse slicer",
 					className: "size-7 absolute top-1 right-9 text-muted-foreground",
+					"data-test-id": testId(__e2e_test_id__, "collapse"),
 					children: /* @__PURE__ */ jsx(ChevronUpIcon$1, { className: cn(isCollapsed && "rotate-180") })
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -7304,16 +7765,18 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 					onClick: handleClear,
 					title: "Clear filter",
 					className: "size-7 absolute top-1 right-1 text-muted-foreground",
+					"data-test-id": testId(__e2e_test_id__, "clear"),
 					children: /* @__PURE__ */ jsx(FilterX, {})
 				})
 			]
 		}), !isCollapsed && /* @__PURE__ */ jsxs(CardContent, {
 			className: "p-1 flex flex-col",
-			children: [/* @__PURE__ */ jsx(Button, {
+			children: [!isHierarchyMode && /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				size: "xs",
 				className: "w-full justify-start px-2 py-1 rounded-sm text-sm font-normal",
 				onClick: handleSelectAll,
+				"data-test-id": testId(__e2e_test_id__, "select-all"),
 				children: searchQuery.length > 0 ? /* @__PURE__ */ jsx(Checkbox, {
 					readOnly: true,
 					checked: isAnyFilteredSelected,
@@ -7336,34 +7799,116 @@ function Slicer({ filterValues, selectedValues, onChange, title, isLoading = fal
 					checkIcon: areAllSelected ? "check" : "square"
 				})
 			}), /* @__PURE__ */ jsx("div", {
-				className: `px-2 py-1 h-(--optionsHeight) shrink-0 overflow-auto`,
+				className: cn("px-2 py-1 h-(--optionsHeight) shrink-0 overflow-auto", isHierarchyMode && "px-1"),
 				style: { "--optionsHeight": `${optionsHeight}px` },
-				children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", {
-					className: "flex size-full items-center justify-center text-sm",
-					children: filterValues.length === 0 ? "No options available" : "No results found"
-				}) : /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }),
-					/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4" }),
-					/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5/6" })
-				] }) : /* @__PURE__ */ jsx(Fragment, { children: filteredOptions.map((option) => /* @__PURE__ */ jsx(SlicerItem, {
-					option,
-					isSelected: selectedValues.has(option.value),
-					onToggle: handleOptionToggle
-				}, option.value)) }) })
+				children: /* @__PURE__ */ jsx(SlicerOptions, {
+					isLoading,
+					isHierarchyMode,
+					filterValues,
+					filteredOptions,
+					selectedValues,
+					expandedIds,
+					onToggleExpand: toggleExpand,
+					onOptionToggle: handleOptionToggle,
+					searchQuery
+				})
 			})]
 		})]
 	});
 }
+const SlicerOptions = ({ isLoading, isHierarchyMode, filterValues, filteredOptions, selectedValues, expandedIds, onToggleExpand, onOptionToggle, searchQuery }) => {
+	if (isLoading) return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }),
+		/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-3/4" }),
+		/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5/6" })
+	] });
+	if (filterValues.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex size-full items-center justify-center text-sm",
+		children: "No options available"
+	});
+	if (isHierarchyMode) return filterValues.map((option) => /* @__PURE__ */ jsx(SlicerHierarchyItem, {
+		option,
+		selectedValues,
+		inheritedSelected: false,
+		expandedIds,
+		onToggleExpand,
+		onSelect: onOptionToggle,
+		searchTerm: searchQuery
+	}, option.value));
+	if (filteredOptions.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex size-full items-center justify-center text-sm",
+		children: "No results found"
+	});
+	return filteredOptions.map((option) => /* @__PURE__ */ jsx(SlicerItem, {
+		option,
+		isSelected: selectedValues.has(option.value),
+		onToggle: onOptionToggle
+	}, option.value));
+};
 const SlicerItem = ({ option, isSelected, onToggle }) => {
+	const hasMatches = option.hasMatches ?? true;
 	return /* @__PURE__ */ jsx(Checkbox, {
 		checked: isSelected,
-		onChange: (e) => onToggle(option.value, e.target.checked),
+		onChange: () => onToggle(option.value),
 		checkIcon: "check",
 		checkboxSize: "sm",
-		className: cn("whitespace-nowrap py-px text-sm", !option.hasMatches && "opacity-50", (option.value == "" || option.value == null || option.value == void 0) && "italic"),
+		className: cn("whitespace-nowrap py-px text-sm", !hasMatches && "opacity-50", (option.value === "" || option.value == null) && "italic"),
 		label: option.label
 	}, option.value);
 };
+/**
+* Hierarchy item component for slicer - renders a single item in the hierarchy tree.
+* Can also be used directly for hierarchy filters in other components like TableFilter.
+*/
+const SlicerHierarchyItem = ({ option, selectedValues, inheritedSelected, expandedIds, onToggleExpand, onSelect, depth = 0, searchTerm = "" }) => {
+	const hasChildren = option.children && option.children.length > 0;
+	const isExpanded = expandedIds.has(option.value);
+	const isDirectlySelected = selectedValues.has(option.value);
+	const isSelected = isDirectlySelected || inheritedSelected;
+	const hasMatches = option.hasMatches ?? true;
+	const hasSelectedDescendants = useMemo(() => {
+		if (!hasChildren) return false;
+		const descendantValues = getAllDescendantValues(option);
+		return descendantValues.some((val) => selectedValues.has(val));
+	}, [
+		option,
+		selectedValues,
+		hasChildren
+	]);
+	const isPartiallySelected = !isDirectlySelected && hasSelectedDescendants && !inheritedSelected;
+	const matchesSelf = searchTerm && option.label.toLowerCase().includes(searchTerm.toLowerCase());
+	const childrenMatchSearch = searchTerm && hasChildren && option.children.some((c) => matchesSearch(c, searchTerm));
+	if (searchTerm && !matchesSelf && !childrenMatchSearch) return null;
+	const shouldShowExpanded = isExpanded || searchTerm !== "" && childrenMatchSearch;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center",
+		style: { paddingLeft: `${depth * 12}px` },
+		children: [hasChildren ? /* @__PURE__ */ jsx(Button, {
+			onClick: () => onToggleExpand(option.value),
+			variant: "extraGhost",
+			size: "sm",
+			className: "size-4",
+			children: shouldShowExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon$1, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRightIcon$1, { className: "size-3.5" })
+		}) : /* @__PURE__ */ jsx("span", { className: "size-4" }), /* @__PURE__ */ jsx(Checkbox, {
+			checked: isSelected || isPartiallySelected,
+			onChange: () => onSelect(option.value),
+			iconStyle: isPartiallySelected || !isDirectlySelected ? "solo" : "default",
+			checkIcon: isPartiallySelected ? "square" : !isDirectlySelected ? "minus" : "check",
+			checkboxSize: "sm",
+			className: cn("whitespace-nowrap py-px text-sm", !hasMatches && "opacity-50", inheritedSelected && !isDirectlySelected && "[&_svg]:opacity-50"),
+			label: option.label
+		})]
+	}), hasChildren && shouldShowExpanded && /* @__PURE__ */ jsx(Fragment, { children: option.children.map((child) => /* @__PURE__ */ jsx(SlicerHierarchyItem, {
+		option: child,
+		selectedValues,
+		inheritedSelected: isSelected,
+		expandedIds,
+		onToggleExpand,
+		onSelect,
+		depth: depth + 1,
+		searchTerm
+	}, child.value)) })] });
+};
 
 //#endregion
 //#region src/slider/slider.tsx
@@ -7486,6 +8031,42 @@ function TabsContent({ className,...props }) {
 	});
 }
 
+//#endregion
+//#region src/textarea/deferred-textarea.tsx
+/**
+* A Textarea that buffers changes locally and only commits to the parent
+* on blur. Useful for forms where you don't want to trigger expensive
+* operations (like API calls) on every keystroke.
+*/
+function DeferredTextarea({ value, onCommit, onValueChange, onBlur,...props }) {
+	const [localValue, setLocalValue] = useState(value);
+	useEffect(() => {
+		setLocalValue(value);
+	}, [value]);
+	const commitValue = useCallback(() => {
+		if (localValue !== value) onCommit(localValue);
+	}, [
+		localValue,
+		value,
+		onCommit
+	]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		setLocalValue(newValue);
+		onValueChange?.(newValue);
+	}, [onValueChange]);
+	const handleBlur = useCallback((e) => {
+		commitValue();
+		onBlur?.(e);
+	}, [commitValue, onBlur]);
+	return /* @__PURE__ */ jsx(Textarea, {
+		...props,
+		value: localValue,
+		onChange: handleChange,
+		onBlur: handleBlur
+	});
+}
+
 //#endregion
 //#region src/toggle/toggle.tsx
 const toggleVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground cursor-pointer", {
@@ -7553,5 +8134,5 @@ const ToggleGroupItem = React$1.forwardRef(({ className, children, variant, size
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, 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, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, 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, 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, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, 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, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, 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, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slicer, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, getCellKey, getCommonPinningStyles, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, navigationMenuTriggerStyle, parseCellKey, sliderVariants, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, 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, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, 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, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, 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, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, 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, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
 //# sourceMappingURL=index.js.map