@rebasepro/ui 0.6.1 → 0.7.0

package/dist/index.es.js

@@ -1,11 +1,11 @@
 "use client";
 import * as React$1 from "react";
-import React, { Children, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { Children, createContext, createRef, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { AlertCircleIcon, AlertCircleIcon as AlertCircleIcon$1, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon, ArrowLeftIcon as ArrowLeftIcon$1, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CalendarIcon as CalendarIcon$1, CheckCircleIcon, CheckIcon, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronLeftIcon, ChevronLeftIcon as ChevronLeftIcon$1, ChevronRightIcon, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon, ChevronUpIcon as ChevronUpIcon$1, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterIcon as FilterIcon$1, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageOffIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGridIcon, LinkIcon, ListIcon, ListOrderedIcon, LoaderIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MinusCircleIcon, MinusIcon, MinusIcon as MinusIcon$1, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RefreshCwIcon as RefreshCwIcon$1, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SearchIcon as SearchIcon$1, SendIcon, SettingsIcon, ShieldAlertIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, VideoIcon, VoteIcon, Wand2Icon, XCircleIcon, XIcon, XIcon as XIcon$1, icons as lucideIcons } from "lucide-react";
+import { AlertCircleIcon, AlertCircleIcon as AlertCircleIcon$1, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon, ArrowLeftIcon as ArrowLeftIcon$1, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CalendarIcon as CalendarIcon$1, CheckCircleIcon, CheckIcon, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronLeftIcon, ChevronLeftIcon as ChevronLeftIcon$1, ChevronRightIcon, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon, ChevronUpIcon as ChevronUpIcon$1, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterIcon as FilterIcon$1, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GlobeIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, ImageIcon, ImageIcon as ImageIcon$1, ImageOffIcon, InfoIcon, ItalicIcon, Kanban, KanbanIcon, KeyIcon, KeyRoundIcon, LanguagesIcon, LayoutGrid, LayoutGridIcon, LayoutList, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MinusCircleIcon, MinusIcon, MinusIcon as MinusIcon$1, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, QuoteIcon, RefreshCcwIcon, RefreshCwIcon, RefreshCwIcon as RefreshCwIcon$1, RepeatIcon, Rows3Icon, SaveIcon, SearchIcon, SearchIcon as SearchIcon$1, SendIcon, Settings2, SettingsIcon, ShieldAlertIcon, ShieldIcon, ShoppingCartIcon, SlidersHorizontalIcon, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Table2, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TypeIcon, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, VideoIcon, VoteIcon, Wand2Icon, XCircleIcon, XIcon, XIcon as XIcon$1, icons as lucideIcons } from "lucide-react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -23,13 +23,15 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { FixedSizeList } from "react-window";
 import useMeasure from "react-use-measure";
-import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
-import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { DndContext, DragOverlay, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import * as Portal from "@radix-ui/react-portal";
 import { Slot } from "@radix-ui/react-slot";
+import { CSS } from "@dnd-kit/utilities";
 //#region src/util/cls.ts
 function cls(...classes) {
 	return twMerge(clsx(classes));
@@ -192,7 +194,7 @@ var fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
 var fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
 var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
 var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
-var defaultBorderMixin = "border-surface-200 dark:border-surface-700 ";
+var defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
 var paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
 var cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
 var cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
@@ -1609,7 +1611,7 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 		if (expanded !== void 0) setOpen(expanded);
 	}, [expanded]);
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Collapsible.Root, {
-		className: cls(!invisible && "border-surface-200 dark:border-surface-700  border", "rounded-lg", "w-full", className),
+		className: cls(!invisible && "border-surface-200 dark:border-surface-700/60  border", "rounded-lg", "w-full", className),
 		open,
 		onOpenChange: (updatedOpen) => {
 			onExpandedChange?.(updatedOpen);
@@ -1618,7 +1620,7 @@ function ExpandablePanel({ title, children, invisible = false, expanded, onExpan
 		children: [/* @__PURE__ */ jsx(Collapsible.Trigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-surface-200 dark:border-surface-700 ", asField && "bg-surface-accent-200/50 dark:bg-black/30", titleClassName, "cursor-pointer"),
+				className: cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", invisible ? "border-b px-2" : "p-4", open ? "py-6" : "py-4", "transition-all duration-200", invisible && "border-surface-200 dark:border-surface-700/60 ", asField && "bg-surface-accent-200/50 dark:bg-black/30", titleClassName, "cursor-pointer"),
 				role: "button",
 				tabIndex: 0,
 				"aria-expanded": open,
@@ -2292,7 +2294,7 @@ function ResizablePanels({ firstPanel, secondPanel, showFirstPanel = true, showS
 				children: firstPanel
 			}),
 			!stacked && showFirstPanel && showSecondPanel && /* @__PURE__ */ jsx("div", {
-				className: cls("relative z-10 flex flex-shrink-0 items-center justify-center", "border-surface-200 dark:border-surface-700 ", isHorizontal ? "border-l w-px h-full cursor-col-resize" : "border-t h-px w-full cursor-row-resize"),
+				className: cls("relative z-10 flex flex-shrink-0 items-center justify-center", "border-surface-200 dark:border-surface-700/60 ", isHorizontal ? "border-l w-px h-full cursor-col-resize" : "border-t h-px w-full cursor-row-resize"),
 				onMouseDown: handleResizeStart,
 				children: /* @__PURE__ */ jsx("div", {
 					className: cls("absolute flex items-center justify-center group", isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"),
@@ -2574,6 +2576,7 @@ Slider.displayName = "Slider";
 //#region src/components/Sheet.tsx
 var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundOverlay = true, open, onOpenChange, onPointerDownOutside, onInteractOutside, transparent, className, style, overlayClassName, overlayZIndex = "z-50", overlayStyle, portalContainer, ...props }) => {
 	const [displayed, setDisplayed] = useState(false);
+	const [contentEl, setContentEl] = useState(null);
 	const contextContainer = usePortalContainer();
 	const finalContainer = portalContainer ?? contextContainer ?? void 0;
 	useEffect(() => {
@@ -2605,17 +2608,19 @@ var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundO
 				style: overlayStyle
 			}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 				...props,
-				onFocusCapture: (event) => event.preventDefault(),
+				ref: setContentEl,
+				onOpenAutoFocus: (event) => event.preventDefault(),
 				onPointerDownOutside,
 				onInteractOutside,
 				className: cls("outline-none", borderClass[side], defaultBorderMixin, "transform-gpu", "will-change-transform", "text-surface-accent-900 dark:text-white", "fixed transform z-50 transition-[transform,opacity] ease-in-out", !displayed ? "duration-150" : "duration-100", "outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0", transparent ? "" : "shadow-md bg-white dark:bg-surface-900", side === "top" || side === "bottom" ? "w-full" : "h-full", side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0", displayed && open ? "opacity-100" : "opacity-50", !displayed || !open ? transformValue[side] : "", className),
 				style,
 				children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
-					autoFocus: true,
-					tabIndex: 0,
 					className: "sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0",
 					children: title ?? "Sheet"
-				}), children]
+				}), /* @__PURE__ */ jsx(PortalContainerProvider, {
+					container: contentEl,
+					children
+				})]
 			})]
 		})
 	});
@@ -2936,7 +2941,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 					disabled: !showLeftScroll,
 					"aria-label": "Scroll tabs left",
 					onClick: () => scroll("left"),
-					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700 "),
+					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60 "),
 					children: /* @__PURE__ */ jsx(ChevronLeftIcon$1, { size: iconSize.smallest })
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -2948,7 +2953,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 						msOverflowStyle: "none"
 					},
 					children: /* @__PURE__ */ jsx(TabsPrimitive.List, {
-						className: cls(variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border", variant === "standard" && "border-surface-200 dark:border-surface-700 ", variant === "boxy" && "flex items-center h-full", variant === "pill" && "flex items-center gap-0.5", innerClassName),
+						className: cls(variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border", variant === "standard" && "border-surface-200 dark:border-surface-700/60 ", variant === "boxy" && "flex items-center h-full", variant === "pill" && "flex items-center gap-0.5", innerClassName),
 						children
 					})
 				}),
@@ -2957,7 +2962,7 @@ function Tabs({ value, onValueChange, className, innerClassName, variant = "stan
 					disabled: !showRightScroll,
 					"aria-label": "Scroll tabs right",
 					onClick: () => scroll("right"),
-					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700 "),
+					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", "bg-surface-50 dark:bg-surface-900 border shadow-sm", "border-surface-200 dark:border-surface-700/60 "),
 					children: /* @__PURE__ */ jsx(ChevronRightIcon$1, { size: iconSize.smallest })
 				})
 			]
@@ -6089,6 +6094,2043 @@ function HandleIcon() {
 	});
 }
 //#endregion
-export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CalendarIcon, Card, CenteredView, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, LinkIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingButton, LogOutIcon, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftIcon, Paper, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectInputLabel, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TypeIcon, Typography, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, VideoIcon, VirtualTable, VoteIcon, Wand2Icon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, coolIconKeys, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize, keyToIconComponent, lucideIcons, paperMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useOutsideAlerter, usePortalContainer };
+//#region src/views/ListView.tsx
+function getEstimatedRowHeight(size) {
+	switch (size) {
+		case "xs": return 44;
+		case "s": return 52;
+		case "m": return 64;
+		case "l": return 76;
+		case "xl": return 88;
+		default: return 64;
+	}
+}
+var OVERSCAN_COUNT = 8;
+var LOAD_MORE_THRESHOLD = 400;
+function getScrollParent$1(element) {
+	let parent = element?.parentElement ?? null;
+	while (parent) {
+		const style = getComputedStyle(parent);
+		if (style.overflowY === "auto" || style.overflowY === "scroll" || style.overflow === "auto" || style.overflow === "scroll") return parent;
+		parent = parent.parentElement;
+	}
+	return document.documentElement;
+}
+function ListView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, emptyComponent, size = "m", selectedEntityId, renderRow }) {
+	const containerRef = useRef(null);
+	const isLoadingMore = useRef(false);
+	useEffect(() => {
+		if (!dataLoading) isLoadingMore.current = false;
+	}, [dataLoading]);
+	const estimatedRowHeight = getEstimatedRowHeight(size);
+	const [effectiveScrollTop, setEffectiveScrollTop] = useState(0);
+	const [viewportHeight, setViewportHeight] = useState(800);
+	const paginationStateRef = useRef({
+		paginationEnabled,
+		noMoreToLoad,
+		itemCount,
+		pageSize
+	});
+	useEffect(() => {
+		paginationStateRef.current = {
+			paginationEnabled,
+			noMoreToLoad,
+			itemCount,
+			pageSize
+		};
+	}, [
+		paginationEnabled,
+		noMoreToLoad,
+		itemCount,
+		pageSize
+	]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const scrollEl = getScrollParent$1(el);
+		if (!scrollEl) return;
+		let rafId = null;
+		const update = () => {
+			rafId = null;
+			const scrollRect = scrollEl.getBoundingClientRect();
+			const listTopRelative = el.getBoundingClientRect().top - scrollRect.top;
+			setEffectiveScrollTop(Math.max(0, -listTopRelative));
+			setViewportHeight(scrollRect.height);
+			const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
+			if (pe && !nm && !isLoadingMore.current && scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < LOAD_MORE_THRESHOLD) {
+				isLoadingMore.current = true;
+				setItemCount?.((ic ?? ps) + ps);
+			}
+		};
+		const onScroll = () => {
+			if (rafId === null) rafId = requestAnimationFrame(update);
+		};
+		scrollEl.addEventListener("scroll", onScroll, { passive: true });
+		const ro = new ResizeObserver(() => update());
+		ro.observe(scrollEl);
+		update();
+		return () => {
+			scrollEl.removeEventListener("scroll", onScroll);
+			ro.disconnect();
+			if (rafId !== null) cancelAnimationFrame(rafId);
+		};
+	}, [setItemCount]);
+	const totalHeight = data.length * estimatedRowHeight;
+	const startIndex = Math.max(0, Math.floor(effectiveScrollTop / estimatedRowHeight) - OVERSCAN_COUNT);
+	const endIndex = Math.min(data.length, Math.ceil((effectiveScrollTop + viewportHeight) / estimatedRowHeight) + OVERSCAN_COUNT);
+	const visibleData = data.slice(startIndex, endIndex);
+	const offsetY = startIndex * estimatedRowHeight;
+	const footerHeight = dataLoading ? 48 : !dataLoading && noMoreToLoad && data.length > 0 ? 32 : 0;
+	const isInitialLoading = dataLoading && data.length === 0;
+	const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
+	const getItemId = useCallback((item) => {
+		if (item && typeof item === "object" && "id" in item) {
+			const id = item.id;
+			return typeof id === "number" ? id : String(id);
+		}
+		return String(item);
+	}, []);
+	const borderMixinClass = "border-surface-200 dark:border-surface-800";
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cls("w-full", selectedEntityId === void 0 && `rounded-lg overflow-hidden border ${borderMixinClass}`),
+		children: dataLoadingError && data.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center p-8",
+			children: /* @__PURE__ */ jsxs(Typography, {
+				className: "text-red-500",
+				children: ["Error loading data: ", dataLoadingError.message]
+			})
+		}) : isInitialLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center py-12 px-8",
+			children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+		}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "w-full flex items-center justify-center py-12 px-8",
+			children: emptyComponent ?? /* @__PURE__ */ jsx(Typography, {
+				variant: "label",
+				color: "secondary",
+				children: "No entries found"
+			})
+		}) : /* @__PURE__ */ jsxs("div", {
+			style: {
+				height: totalHeight + footerHeight,
+				position: "relative"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						top: offsetY,
+						left: 0,
+						right: 0
+					},
+					children: visibleData.map((item, i) => {
+						const actualIndex = startIndex + i;
+						const isLast = actualIndex === data.length - 1;
+						const id = getItemId(item);
+						const selected = selectedIds?.has(id) ?? false;
+						const highlighted = highlightedIds?.has(id) ?? false;
+						const handleClick = (e) => {
+							if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
+								e.preventDefault();
+								onSelectionChange?.(item, !selected);
+								return;
+							}
+							onItemClick?.(item);
+						};
+						const handleSelectionChange = (val) => {
+							onSelectionChange?.(item, val);
+						};
+						return /* @__PURE__ */ jsx(React.Fragment, { children: renderRow({
+							item,
+							index: actualIndex,
+							style: { height: estimatedRowHeight },
+							className: cls(!isLast && "border-b", !isLast && borderMixinClass),
+							selected,
+							highlighted,
+							isLast,
+							onClick: handleClick,
+							onSelectionChange: handleSelectionChange
+						}) }, id || actualIndex);
+					})
+				}),
+				dataLoading && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center py-3",
+					style: {
+						position: "absolute",
+						top: totalHeight,
+						left: 0,
+						right: 0
+					},
+					children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+				}),
+				!dataLoading && noMoreToLoad && data.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center py-2 dark:bg-surface-900",
+					style: {
+						position: "absolute",
+						top: totalHeight,
+						left: 0,
+						right: 0
+					},
+					children: /* @__PURE__ */ jsxs(Typography, {
+						variant: "caption",
+						color: "secondary",
+						children: [
+							"All ",
+							data.length,
+							" entries loaded"
+						]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/views/CardView.tsx
+function getGridColumnsClass(size) {
+	switch (size) {
+		case "xs": return "grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10";
+		case "s": return "grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8";
+		case "m": return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+		case "l": return "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4";
+		case "xl": return "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3";
+		default: return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+	}
+}
+function getScrollParent(element) {
+	if (!element) return null;
+	let parent = element.parentElement;
+	while (parent) {
+		const overflowY = window.getComputedStyle(parent).overflowY;
+		if (overflowY === "auto" || overflowY === "scroll") return parent;
+		parent = parent.parentElement;
+	}
+	return document.documentElement;
+}
+function CardView({ data, dataLoading = false, noMoreToLoad = false, dataLoadingError, itemCount, setItemCount, pageSize = 50, paginationEnabled = true, onItemClick, selectedIds, highlightedIds, selectionEnabled = true, onSelectionChange, onScroll, initialScroll, size = "m", renderCard, emptyComponent }) {
+	const containerRef = useRef(null);
+	const hasRestoredScroll = useRef(false);
+	const isLoadingMore = useRef(false);
+	const paginationStateRef = useRef({
+		paginationEnabled,
+		noMoreToLoad,
+		itemCount,
+		pageSize
+	});
+	useEffect(() => {
+		paginationStateRef.current = {
+			paginationEnabled,
+			noMoreToLoad,
+			itemCount,
+			pageSize
+		};
+	}, [
+		paginationEnabled,
+		noMoreToLoad,
+		itemCount,
+		pageSize
+	]);
+	useEffect(() => {
+		if (!dataLoading) isLoadingMore.current = false;
+	}, [dataLoading]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const scrollEl = getScrollParent(el);
+		if (!scrollEl) return;
+		let rafId = null;
+		const update = () => {
+			rafId = null;
+			const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
+			if (pe && !nm && !isLoadingMore.current && scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 400) {
+				isLoadingMore.current = true;
+				setItemCount?.((ic ?? ps) + ps);
+			}
+		};
+		const onScrollEvent = () => {
+			if (rafId === null) rafId = requestAnimationFrame(update);
+		};
+		scrollEl.addEventListener("scroll", onScrollEvent, { passive: true });
+		const ro = new ResizeObserver(() => update());
+		ro.observe(scrollEl);
+		update();
+		return () => {
+			scrollEl.removeEventListener("scroll", onScrollEvent);
+			ro.disconnect();
+			if (rafId !== null) cancelAnimationFrame(rafId);
+		};
+	}, [setItemCount]);
+	useEffect(() => {
+		if (!containerRef.current || !initialScroll || hasRestoredScroll.current || data.length === 0) return;
+		const scrollEl = getScrollParent(containerRef.current);
+		if (!scrollEl) return;
+		let attempts = 0;
+		const maxAttempts = 5;
+		const tryRestore = () => {
+			if (scrollEl.scrollHeight >= initialScroll || attempts >= maxAttempts) {
+				scrollEl.scrollTop = initialScroll;
+				hasRestoredScroll.current = true;
+			} else {
+				attempts++;
+				requestAnimationFrame(tryRestore);
+			}
+		};
+		requestAnimationFrame(tryRestore);
+	}, [initialScroll, data.length]);
+	const lastScrollOffset = useRef(0);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el || !onScroll) return;
+		const scrollEl = getScrollParent(el);
+		if (!scrollEl) return;
+		const handleScroll = () => {
+			const currentOffset = scrollEl.scrollTop;
+			const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
+			lastScrollOffset.current = currentOffset;
+			onScroll({
+				scrollDirection: direction,
+				scrollOffset: currentOffset,
+				scrollUpdateWasRequested: false
+			});
+		};
+		scrollEl.addEventListener("scroll", handleScroll, { passive: true });
+		return () => scrollEl.removeEventListener("scroll", handleScroll);
+	}, [onScroll]);
+	const getItemId = useCallback((item) => {
+		if (item && typeof item === "object" && "id" in item) {
+			const id = item.id;
+			return typeof id === "number" ? id : String(id);
+		}
+		return String(item);
+	}, []);
+	const gridColumnsClass = getGridColumnsClass(size);
+	const isInitialLoading = dataLoading && data.length === 0 && !dataLoadingError;
+	const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "w-full p-4",
+		children: dataLoadingError && data.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "h-full flex items-center justify-center p-8",
+			children: /* @__PURE__ */ jsxs(Typography, {
+				className: "text-red-500",
+				children: ["Error loading data: ", dataLoadingError.message]
+			})
+		}) : isInitialLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center py-12 px-8",
+			children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" })
+		}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "w-full flex items-center justify-center py-12 px-8",
+			children: emptyComponent ?? /* @__PURE__ */ jsx(Typography, {
+				variant: "label",
+				color: "secondary",
+				children: "No entries found"
+			})
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "max-w-7xl mx-auto",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cls("grid gap-4", gridColumnsClass),
+				children: data.map((item, index) => {
+					const id = getItemId(item);
+					const selected = selectedIds?.has(id) ?? false;
+					const highlighted = highlightedIds?.has(id) ?? false;
+					const handleClick = (e) => {
+						if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
+							e.preventDefault();
+							onSelectionChange?.(item, !selected);
+							return;
+						}
+						onItemClick?.(item);
+					};
+					const handleSelectionChange = (val) => {
+						onSelectionChange?.(item, val);
+					};
+					return /* @__PURE__ */ jsx(React.Fragment, { children: renderCard(item, {
+						selected,
+						highlighted,
+						onSelectionChange: handleSelectionChange,
+						onClick: handleClick
+					}) }, id || index);
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-center py-8",
+				children: [dataLoading && /* @__PURE__ */ jsx(CircularProgress, { size: "small" }), !dataLoading && noMoreToLoad && data.length > 0 && /* @__PURE__ */ jsxs(Typography, {
+					variant: "caption",
+					color: "secondary",
+					children: [
+						"All ",
+						data.length,
+						" entries loaded"
+					]
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/views/Kanban/BoardSortableList.tsx
+function BoardSortableList({ columnId, items, ItemComponent, isDragging, isDragOverColumn, loading = false, hasMore = false, onLoadMore }) {
+	const { setNodeRef } = useDroppable({
+		id: columnId,
+		data: { type: "ITEM-LIST" }
+	});
+	const sentinelRef = useRef(null);
+	const isLoadingRef = useRef(loading);
+	isLoadingRef.current = loading;
+	const lastLoadTimeRef = useRef(0);
+	useEffect(() => {
+		if (!sentinelRef.current || !hasMore || !onLoadMore) return;
+		const sentinel = sentinelRef.current;
+		const observer = new IntersectionObserver((entries) => {
+			const now = Date.now();
+			if (entries[0].isIntersecting && hasMore && !isLoadingRef.current && now - lastLoadTimeRef.current > 500) {
+				lastLoadTimeRef.current = now;
+				onLoadMore();
+			}
+		}, { threshold: .1 });
+		observer.observe(sentinel);
+		const rect = sentinel.getBoundingClientRect();
+		const containerRect = sentinel.parentElement?.getBoundingClientRect();
+		if (containerRect && rect.top < containerRect.bottom && rect.bottom > containerRect.top) {
+			const now = Date.now();
+			if (hasMore && !isLoadingRef.current && now - lastLoadTimeRef.current > 500) {
+				lastLoadTimeRef.current = now;
+				onLoadMore();
+			}
+		}
+		return () => observer.disconnect();
+	}, [hasMore, onLoadMore]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setNodeRef,
+		className: useMemo(() => cls("flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto no-scrollbar flex-1 rounded-md", isDragging && isDragOverColumn ? "bg-surface-accent-200 dark:bg-surface-900" : isDragging ? "bg-surface-50 dark:bg-surface-900 hover:bg-surface-accent-100 dark:hover:bg-surface-800" : "bg-surface-50 dark:bg-surface-900"), [isDragging, isDragOverColumn]),
+		style: { minHeight: 80 },
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: items.map((i) => i.id),
+			strategy: verticalListSortingStrategy,
+			children: items.length === 0 && !loading ? /* @__PURE__ */ jsx("div", {
+				className: "flex-1 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-surface-400 dark:text-surface-500",
+					children: "No items"
+				})
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [items.map((item, index) => /* @__PURE__ */ jsx(SortableItem, {
+				item,
+				index,
+				columnId,
+				ItemComponent
+			}, item.id)), (loading || hasMore) && /* @__PURE__ */ jsx("div", {
+				ref: sentinelRef,
+				className: "flex items-center justify-center py-2 min-h-6",
+				children: loading && /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" })
+			})] })
+		})
+	});
+}
+var SortableItem = memo(function SortableItem({ item, index, columnId, ItemComponent }) {
+	const { setNodeRef, attributes, listeners, isDragging: isItemBeingDragged, transform, transition } = useSortable({
+		id: item.id,
+		data: {
+			type: "ITEM",
+			columnId
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: setNodeRef,
+		style: useMemo(() => ({
+			transform: CSS.Transform.toString(transform),
+			transition,
+			zIndex: isItemBeingDragged ? 2 : 1,
+			opacity: isItemBeingDragged ? 0 : 1
+		}), [
+			transform,
+			transition,
+			isItemBeingDragged
+		]),
+		...attributes,
+		...listeners,
+		children: /* @__PURE__ */ jsx(ItemComponent, {
+			item,
+			isDragging: isItemBeingDragged,
+			index
+		})
+	});
+});
+//#endregion
+//#region src/views/Kanban/BoardColumnTitle.tsx
+function BoardColumnTitle({ children, className, color, ...props }) {
+	const colorScheme = useMemo(() => {
+		if (!color) return void 0;
+		if (typeof color === "string") return getColorSchemeForKey(color);
+		return color;
+	}, [color]);
+	return /* @__PURE__ */ jsxs(Typography, {
+		variant: "subtitle2",
+		component: "h4",
+		className: cls("py-3 px-3 transition-colors duration-200 flex-grow select-none relative outline-none focus:outline focus:outline-2 focus:outline-offset-2 flex items-center gap-3", className),
+		...props,
+		children: [colorScheme && /* @__PURE__ */ jsx("div", {
+			className: "w-3 h-3 rounded-full flex-shrink-0",
+			style: { backgroundColor: colorScheme.darkColor ?? colorScheme.color }
+		}), children]
+	});
+}
+//#endregion
+//#region src/views/Kanban/BoardColumn.tsx
+var BoardColumn = memo(function BoardColumn({ id, title, items, ItemComponent, isDragging, isDragOverColumn, allowReorder = false, loading = false, hasMore = false, onLoadMore, onAddItem, totalCount, color, style }) {
+	const { setNodeRef, attributes, listeners, isDragging: isColumnBeingDragged, transform, transition } = useSortable({
+		id,
+		data: { type: "COLUMN" },
+		disabled: !allowReorder
+	});
+	const combinedStyle = useMemo(() => ({
+		...style,
+		transform: CSS.Translate.toString(transform),
+		transition,
+		zIndex: isColumnBeingDragged ? 2 : 1
+	}), [
+		style,
+		transform,
+		transition,
+		isColumnBeingDragged
+	]);
+	const dragListeners = allowReorder ? listeners : {};
+	const columnClassName = useMemo(() => cls("border h-full w-80 min-w-80 mx-2 flex flex-col rounded-md border-surface-200 dark:border-surface-800", isColumnBeingDragged ? "ring-2 ring-primary" : ""), [isColumnBeingDragged]);
+	const headerClassName = useMemo(() => cls("flex items-center justify-between px-2 rounded-t-md transition-colors duration-200 ease-in-out", isColumnBeingDragged ? "bg-surface-100 dark:bg-surface-700" : "bg-surface-50 hover:bg-surface-100 dark:bg-surface-800 dark:hover:bg-surface-700", allowReorder ? "cursor-grab" : ""), [isColumnBeingDragged, allowReorder]);
+	const itemIds = useMemo(() => items.map((i) => i.id), [items]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: combinedStyle,
+		...attributes,
+		className: columnClassName,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...dragListeners,
+			className: headerClassName,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(BoardColumnTitle, {
+					"aria-label": `${title} item list`,
+					color,
+					children: title
+				}), totalCount !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-surface-500 dark:text-surface-400",
+					children: totalCount
+				})]
+			}), onAddItem && /* @__PURE__ */ jsx(IconButton, {
+				size: "small",
+				onClick: (e) => {
+					e.stopPropagation();
+					onAddItem();
+				},
+				className: "opacity-60 hover:opacity-100",
+				children: /* @__PURE__ */ jsx(PlusIcon, { size: iconSize.small })
+			})]
+		}), /* @__PURE__ */ jsx(SortableContext, {
+			items: itemIds,
+			strategy: verticalListSortingStrategy,
+			children: /* @__PURE__ */ jsx(BoardSortableList, {
+				columnId: id,
+				items,
+				ItemComponent,
+				isDragging,
+				isDragOverColumn,
+				loading,
+				hasMore,
+				onLoadMore
+			})
+		})]
+	});
+});
+//#endregion
+//#region src/views/Kanban/Board.tsx
+function Board({ data, columns: columnsProp, columnLabels, columnColors, className, assignColumn, allowColumnReorder = false, onColumnReorder, onItemsReorder, ItemComponent, columnLoadingState, onLoadMoreColumn, onAddItemToColumn, AddColumnComponent }) {
+	const [activeItem, setActiveItem] = useState(null);
+	const [activeColumn, setActiveColumn] = useState(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const [dragOverColumnId, setDragOverColumnId] = useState(null);
+	const grabOffsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const [overlayPos, setOverlayPos] = useState(null);
+	const handleMouseMove = useCallback((e) => {
+		setOverlayPos({
+			x: e.clientX - grabOffsetRef.current.x,
+			y: e.clientY - grabOffsetRef.current.y
+		});
+	}, []);
+	useEffect(() => {
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("pointermove", handleMouseMove);
+		};
+	}, [handleMouseMove]);
+	const [itemMapState, setItemMapState] = useState(() => {
+		const dataColumnMap = data.reduce((prev, item) => ({
+			...prev,
+			[item.id]: assignColumn(item)
+		}), {});
+		return columnsProp.reduce((previous, column) => ({
+			...previous,
+			[column]: data.filter((item) => dataColumnMap[item.id] === column)
+		}), {});
+	});
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+	useEffect(() => {
+		if (isDragging) return;
+		const dataColumnMap = data.reduce((prev, item) => ({
+			...prev,
+			[item.id]: assignColumn(item)
+		}), {});
+		const newItemMap = columnsProp.reduce((previous, column) => ({
+			...previous,
+			[column]: data.filter((item) => dataColumnMap[item.id] === column)
+		}), {});
+		setItemMapState((prevMap) => {
+			let changed = false;
+			for (const col of columnsProp) {
+				const prevItems = prevMap[col] ?? [];
+				const newItems = newItemMap[col] ?? [];
+				if (prevItems.length !== newItems.length) {
+					changed = true;
+					continue;
+				}
+				for (let i = 0; i < prevItems.length; i++) if (prevItems[i].id !== newItems[i].id || prevItems[i].data !== newItems[i].data) {
+					changed = true;
+					break;
+				}
+			}
+			if (!changed) return prevMap;
+			const updated = {};
+			for (const col of columnsProp) {
+				const prevItems = prevMap[col] ?? [];
+				const newItems = newItemMap[col] ?? [];
+				const prevById = /* @__PURE__ */ new Map();
+				for (const item of prevItems) prevById.set(item.id, item);
+				updated[col] = newItems.map((newItem) => {
+					const prev = prevById.get(newItem.id);
+					if (prev && prev.data === newItem.data) return prev;
+					return newItem;
+				});
+			}
+			return updated;
+		});
+	}, [
+		data,
+		columnsProp,
+		assignColumn
+	]);
+	const findColumnByItemId = (id) => {
+		return Object.keys(itemMapState).find((col) => itemMapState[col]?.some((i) => i.id === id));
+	};
+	const handleDragStart = (event) => {
+		setIsDragging(true);
+		setDragOverColumnId(null);
+		const { active } = event;
+		const activatorEvt = event.activatorEvent;
+		if (activatorEvt) {
+			const target = activatorEvt.target;
+			const rect = (target.closest("[role='button']") ?? target).getBoundingClientRect();
+			grabOffsetRef.current = {
+				x: activatorEvt.clientX - rect.left,
+				y: activatorEvt.clientY - rect.top
+			};
+			setOverlayPos({
+				x: rect.left,
+				y: rect.top
+			});
+		}
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("pointermove", handleMouseMove);
+		if (active.data.current?.type === "COLUMN") {
+			const columnId = active.id;
+			const column = columnsProp.find((col) => String(col) === columnId);
+			if (column) setActiveColumn(column);
+		} else if (active.data.current?.type === "ITEM") {
+			const columnId = findColumnByItemId(active.id);
+			if (columnId) {
+				const item = itemMapState[columnId]?.find((i) => i.id === active.id);
+				setActiveItem(item || null);
+			}
+		}
+	};
+	const handleDragOver = (event) => {
+		const { active, over } = event;
+		if (!over) {
+			setDragOverColumnId(null);
+			return;
+		}
+		let currentHoveredColumnId = null;
+		const overId = over.id;
+		const overDataType = over.data.current?.type;
+		if (overDataType === "ITEM-LIST" || overDataType === "COLUMN") currentHoveredColumnId = overId;
+		else if (overDataType === "ITEM") currentHoveredColumnId = findColumnByItemId(overId) || null;
+		else if (columnsProp.includes(overId)) currentHoveredColumnId = overId;
+		setDragOverColumnId(currentHoveredColumnId);
+		if (active.data.current?.type !== "ITEM") return;
+		const activeId = active.id;
+		const activeColumn = findColumnByItemId(activeId);
+		let overColumnForMove = findColumnByItemId(overId);
+		if (!overColumnForMove && overDataType === "ITEM-LIST") overColumnForMove = overId;
+		if (!overColumnForMove && columnsProp.includes(overId)) overColumnForMove = overId;
+		if (!activeColumn || !overColumnForMove) return;
+		if (activeColumn === overColumnForMove) return;
+		if (itemMapState[overColumnForMove]?.some((i) => i.id === activeId)) return;
+		setItemMapState((currentMap) => {
+			const activeItems = [...currentMap[activeColumn] || []];
+			const overItems = [...currentMap[overColumnForMove] || []];
+			const activeIndex = activeItems.findIndex((i) => i.id === activeId);
+			if (activeIndex === -1) return currentMap;
+			let overIndex;
+			if (overDataType === "ITEM-LIST" || columnsProp.includes(overId) && !findColumnByItemId(overId)) overIndex = overItems.length;
+			else {
+				overIndex = overItems.findIndex((i) => i.id === overId);
+				if (overIndex !== -1) {
+					const modifier = (active.rect.current.translated?.top ?? 0) + (active.rect.current.translated?.height ?? 0) / 2 > (over?.rect.top ?? 0) + (over?.rect.height ?? 0) / 2 ? 1 : 0;
+					overIndex = overIndex >= 0 ? overIndex + modifier : overItems.length;
+				} else overIndex = overItems.length;
+			}
+			const newItemMap = { ...currentMap };
+			const [moved] = activeItems.splice(activeIndex, 1);
+			overItems.splice(overIndex, 0, moved);
+			newItemMap[activeColumn] = activeItems;
+			newItemMap[overColumnForMove] = overItems;
+			return newItemMap;
+		});
+	};
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		window.removeEventListener("mousemove", handleMouseMove);
+		window.removeEventListener("pointermove", handleMouseMove);
+		setOverlayPos(null);
+		setIsDragging(false);
+		setActiveItem(null);
+		setActiveColumn(null);
+		setDragOverColumnId(null);
+		if (!over) return;
+		const activeId = active.id;
+		const overId = over.id;
+		if (active.data.current?.type === "COLUMN") {
+			if (activeId !== overId) {
+				const oldIndex = columnsProp.indexOf(activeId);
+				const newIndex = columnsProp.indexOf(overId);
+				if (oldIndex !== -1 && newIndex !== -1) {
+					const reordered = arrayMove(columnsProp, oldIndex, newIndex);
+					onColumnReorder?.(reordered);
+				}
+			}
+			return;
+		}
+		const activeCol = findColumnByItemId(activeId);
+		let overCol = findColumnByItemId(overId);
+		if (!overCol) {
+			if (over.data.current?.type === "ITEM-LIST" || columnsProp.includes(overId)) overCol = overId;
+		}
+		if (!activeCol || !overCol) return;
+		const isSameColumn = activeCol === overCol;
+		const activeItems = itemMapState[activeCol] || [];
+		const overItems = itemMapState[overCol] || [];
+		const activeIndex = activeItems.findIndex((i) => i.id === activeId);
+		let overIndex;
+		if (over.id === overCol) overIndex = overItems.length;
+		else overIndex = overItems.findIndex((i) => i.id === overId);
+		if (activeIndex === -1 || overIndex === -1) return;
+		let finalItems = [];
+		if (isSameColumn) finalItems = arrayMove(activeItems, activeIndex, overIndex);
+		else {
+			const newActiveItems = [...activeItems];
+			const newOverItems = [...overItems];
+			const [moved] = newActiveItems.splice(activeIndex, 1);
+			newOverItems.splice(overIndex, 0, moved);
+			finalItems = [...newActiveItems, ...newOverItems];
+		}
+		const fullFlattenedList = [];
+		columnsProp.forEach((col) => {
+			if (col === activeCol) if (isSameColumn) fullFlattenedList.push(...finalItems);
+			else fullFlattenedList.push(...activeItems.filter((i) => i.id !== activeId));
+			else if (col === overCol) {
+				const newOverItems = [...overItems];
+				const [moved] = [...activeItems].splice(activeIndex, 1);
+				newOverItems.splice(overIndex, 0, moved);
+				fullFlattenedList.push(...newOverItems);
+			} else fullFlattenedList.push(...itemMapState[col] || []);
+		});
+		onItemsReorder?.(fullFlattenedList, {
+			itemId: activeId,
+			sourceColumn: activeCol,
+			targetColumn: overCol
+		});
+	};
+	return /* @__PURE__ */ jsxs(DndContext, {
+		sensors,
+		onDragStart: handleDragStart,
+		onDragOver: handleDragOver,
+		onDragEnd: handleDragEnd,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cls("flex flex-row h-full w-full overflow-x-auto p-4 select-none items-start", className),
+			children: [/* @__PURE__ */ jsx(SortableContext, {
+				items: columnsProp,
+				children: columnsProp.map((col, index) => {
+					const colItems = itemMapState[col] || [];
+					const loadingState = columnLoadingState?.[col];
+					return /* @__PURE__ */ jsx(BoardColumn, {
+						id: String(col),
+						title: columnLabels?.[col] ?? String(col),
+						items: colItems,
+						index,
+						ItemComponent,
+						isDragging,
+						isDragOverColumn: dragOverColumnId === String(col),
+						allowReorder: allowColumnReorder,
+						loading: loadingState?.loading,
+						hasMore: loadingState?.hasMore,
+						totalCount: loadingState?.totalCount,
+						color: columnColors?.[col],
+						onLoadMore: onLoadMoreColumn ? () => onLoadMoreColumn(col) : void 0,
+						onAddItem: onAddItemToColumn ? () => onAddItemToColumn(col) : void 0
+					}, String(col));
+				})
+			}), AddColumnComponent]
+		}), typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsx(DragOverlay, {
+			dropAnimation: null,
+			children: isDragging && activeItem && /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "fixed",
+					left: overlayPos?.x ?? 0,
+					top: overlayPos?.y ?? 0,
+					pointerEvents: "none",
+					zIndex: 9999
+				},
+				children: /* @__PURE__ */ jsx(ItemComponent, {
+					item: activeItem,
+					isDragging: true,
+					isClone: true
+				})
+			})
+		}), document.body)]
+	});
+}
+//#endregion
+//#region src/views/KanbanView.tsx
+function KanbanView(props) {
+	return /* @__PURE__ */ jsx(Board, { ...props });
+}
+//#endregion
+//#region src/views/CollectionView/CollectionViewToolbar.tsx
+var VIEW_MODE_ICONS = {
+	list: /* @__PURE__ */ jsx(LayoutList, { size: iconSize.small }),
+	table: /* @__PURE__ */ jsx(Table2, { size: iconSize.small }),
+	cards: /* @__PURE__ */ jsx(LayoutGrid, { size: iconSize.small }),
+	kanban: /* @__PURE__ */ jsx(Kanban, { size: iconSize.small })
+};
+var VIEW_MODE_LABELS = {
+	list: "List",
+	table: "Table",
+	cards: "Cards",
+	kanban: "Board"
+};
+var SIZE_LABELS = {
+	xs: "Extra Small",
+	s: "Small",
+	m: "Medium",
+	l: "Large",
+	xl: "Extra Large"
+};
+/**
+* Toolbar for the headless CollectionView.
+*
+* Renders a search bar, view mode toggle (popover with toggle button group),
+* optional size selector, optional kanban property selector, and action slots.
+*
+* @group Collection View
+*/
+function CollectionViewToolbar({ viewMode, onViewModeChange, enabledViews = [
+	"list",
+	"table",
+	"cards",
+	"kanban"
+], size = "m", onSizeChange, searchString, onSearchChange, loading, actionsStart, actionsEnd, compact, kanbanPropertyOptions, selectedKanbanProperty, onKanbanPropertyChange }) {
+	const [popoverOpen, setPopoverOpen] = useState(false);
+	const viewOptions = enabledViews.map((mode) => ({
+		value: mode,
+		label: VIEW_MODE_LABELS[mode],
+		icon: VIEW_MODE_ICONS[mode]
+	}));
+	const handleViewModeChange = useCallback((mode) => {
+		onViewModeChange?.(mode);
+	}, [onViewModeChange]);
+	const handleSizeChange = useCallback((value) => {
+		onSizeChange?.(value);
+	}, [onSizeChange]);
+	const handleKanbanPropertyChange = useCallback((value) => {
+		onKanbanPropertyChange?.(value);
+	}, [onKanbanPropertyChange]);
+	const showViewToggle = onViewModeChange && enabledViews.length > 1;
+	const showSizeSelector = onSizeChange && viewMode !== "kanban";
+	const showKanbanSelector = kanbanPropertyOptions && kanbanPropertyOptions.length > 0 && viewMode === "kanban" && onKanbanPropertyChange;
+	const showPopover = showViewToggle || showSizeSelector || showKanbanSelector;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("flex items-center gap-2 px-2 flex-shrink-0", "border-b border-surface-200 dark:border-surface-800", compact ? "py-0.5 gap-1" : "py-1"),
+		children: [
+			actionsStart,
+			onSearchChange && /* @__PURE__ */ jsx(SearchBar, {
+				onTextSearch: onSearchChange,
+				size: "small",
+				initialValue: searchString,
+				loading,
+				expandable: true
+			}),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			actionsEnd,
+			showPopover && /* @__PURE__ */ jsx(Popover, {
+				open: popoverOpen,
+				onOpenChange: setPopoverOpen,
+				side: "bottom",
+				align: "end",
+				trigger: /* @__PURE__ */ jsx(IconButton, {
+					size: "small",
+					onClick: () => setPopoverOpen((prev) => !prev),
+					children: /* @__PURE__ */ jsx(Settings2, { size: iconSize.small })
+				}),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "p-3 min-w-[200px] flex flex-col gap-3",
+					children: [
+						showViewToggle && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "font-medium uppercase tracking-wider",
+								children: "View"
+							}), /* @__PURE__ */ jsx(ToggleButtonGroup, {
+								value: viewMode,
+								onValueChange: handleViewModeChange,
+								options: viewOptions
+							})]
+						}),
+						showSizeSelector && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "font-medium uppercase tracking-wider",
+								children: "Size"
+							}), /* @__PURE__ */ jsx(Select, {
+								value: size,
+								onValueChange: handleSizeChange,
+								size: "small",
+								children: Object.keys(SIZE_LABELS).map((sizeKey) => /* @__PURE__ */ jsx(SelectItem, {
+									value: sizeKey,
+									children: SIZE_LABELS[sizeKey]
+								}, sizeKey))
+							})]
+						}),
+						showKanbanSelector && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "font-medium uppercase tracking-wider",
+								children: "Group by"
+							}), /* @__PURE__ */ jsx(Select, {
+								value: selectedKanbanProperty,
+								onValueChange: handleKanbanPropertyChange,
+								size: "small",
+								children: kanbanPropertyOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+									value: option.key,
+									children: option.label
+								}, option.key))
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/views/CollectionView/DefaultCellRenderer.tsx
+/**
+* Resolve an enum key to its display label and optional color.
+*/
+function resolveEnumLabel(enumValues, value) {
+	if (!enumValues) return void 0;
+	const key = String(value);
+	if (enumValues instanceof Map) {
+		const config = enumValues.get(value);
+		if (!config) return void 0;
+		if (typeof config === "string") return { label: config };
+		return {
+			label: config.label,
+			color: config.color
+		};
+	}
+	const config = enumValues[key];
+	if (!config) return void 0;
+	if (typeof config === "string") return { label: config };
+	return {
+		label: config.label,
+		color: config.color
+	};
+}
+/**
+* Format a date value using Intl.DateTimeFormat.
+*/
+function formatDate(value, includeTime) {
+	if (value == null) return "—";
+	const date = value instanceof Date ? value : new Date(String(value));
+	if (isNaN(date.getTime())) return String(value);
+	const options = includeTime ? {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	} : {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	};
+	return new Intl.DateTimeFormat(void 0, options).format(date);
+}
+/**
+* Type guard for geopoint-like objects.
+*/
+function isGeoPoint(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const obj = value;
+	return typeof obj.lat === "number" && typeof obj.lng === "number";
+}
+/**
+* Default cell renderer for the headless CollectionView.
+* Handles all built-in property types without depending on any Rebase core types.
+*
+* @group Preview components
+*/
+function DefaultCellRenderer({ row, propertyKey, property, value, size, width, height }) {
+	if (value === null || value === void 0) return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		color: "secondary",
+		className: "px-1",
+		children: "—"
+	});
+	if (property.Preview) {
+		const PreviewComponent = property.Preview;
+		return /* @__PURE__ */ jsx(PreviewComponent, {
+			row,
+			propertyKey,
+			property,
+			value,
+			size,
+			width,
+			height
+		});
+	}
+	switch (property.type) {
+		case "string": return renderString(property, value);
+		case "number": return renderNumber(property, value);
+		case "boolean": return renderBoolean(value);
+		case "date": return renderDate(property, value);
+		case "array": return renderArray(property, value);
+		case "map": return renderMap(value);
+		case "reference":
+		case "relation": return renderReference(value);
+		case "geopoint": return renderGeopoint(value);
+		default: return /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			color: "secondary",
+			noWrap: true,
+			className: "px-1",
+			children: JSON.stringify(value)
+		});
+	}
+}
+function renderString(property, value) {
+	const strValue = String(value);
+	if (property.enum) {
+		const resolved = resolveEnumLabel(property.enum, value);
+		return /* @__PURE__ */ jsx(Chip, {
+			size: "small",
+			colorScheme: resolved?.color ? {
+				color: resolved.color,
+				text: "#fff"
+			} : void 0,
+			children: resolved?.label ?? strValue
+		});
+	}
+	if (property.previewAsTag) return /* @__PURE__ */ jsx(Chip, {
+		size: "small",
+		children: strValue
+	});
+	if (property.url) return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		noWrap: true,
+		component: "a",
+		href: typeof property.url === "string" ? property.url : strValue,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: cls("px-1 text-primary hover:underline cursor-pointer"),
+		children: strValue
+	});
+	if (property.email) return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		noWrap: true,
+		component: "a",
+		href: `mailto:${strValue}`,
+		className: cls("px-1 text-primary hover:underline cursor-pointer"),
+		children: strValue
+	});
+	if (property.markdown) return /* @__PURE__ */ jsx("div", {
+		className: "px-1 max-h-[100px] overflow-hidden",
+		children: /* @__PURE__ */ jsx(Markdown, {
+			source: strValue,
+			size: "small"
+		})
+	});
+	if (property.storage) return /* @__PURE__ */ jsxs("div", {
+		className: cls("px-1 flex items-center justify-center", "w-[40px] h-[40px] rounded overflow-hidden"),
+		children: [strValue ? /* @__PURE__ */ jsx("img", {
+			src: strValue,
+			alt: "",
+			className: "w-full h-full object-cover",
+			onError: (e) => {
+				const target = e.currentTarget;
+				target.style.display = "none";
+				const fallback = target.nextElementSibling;
+				if (fallback instanceof HTMLElement) fallback.style.display = "flex";
+			}
+		}) : null, /* @__PURE__ */ jsx("div", {
+			className: cls("w-full h-full items-center justify-center rounded", "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark", strValue ? "hidden" : "flex"),
+			children: /* @__PURE__ */ jsx(ImageIcon$1, { size: iconSize.small })
+		})]
+	});
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: strValue.length > 50 ? strValue : void 0,
+		side: "bottom",
+		children: /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			noWrap: true,
+			className: "px-1",
+			children: strValue
+		})
+	});
+}
+function renderNumber(property, value) {
+	const numStr = String(value);
+	if (property.enum) {
+		const resolved = resolveEnumLabel(property.enum, value);
+		return /* @__PURE__ */ jsx(Chip, {
+			size: "small",
+			colorScheme: resolved?.color ? {
+				color: resolved.color,
+				text: "#fff"
+			} : void 0,
+			children: resolved?.label ?? numStr
+		});
+	}
+	return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		noWrap: true,
+		align: "right",
+		className: "px-1 tabular-nums",
+		children: numStr
+	});
+}
+function renderBoolean(value) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-1 flex items-center",
+		children: /* @__PURE__ */ jsx(BooleanSwitch, {
+			value: !!value,
+			size: "small",
+			disabled: true
+		})
+	});
+}
+function renderDate(property, value) {
+	return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		noWrap: true,
+		className: "px-1 tabular-nums",
+		children: formatDate(value, property.mode === "date_time")
+	});
+}
+function renderArray(property, value) {
+	if (!Array.isArray(value)) return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		color: "secondary",
+		className: "px-1",
+		children: "—"
+	});
+	if (property.of?.enum && value.length > 0) return /* @__PURE__ */ jsx("div", {
+		className: "px-1 flex flex-wrap gap-1 overflow-hidden",
+		children: value.map((item, i) => {
+			const resolved = resolveEnumLabel(property.of.enum, item);
+			return /* @__PURE__ */ jsx(Chip, {
+				size: "smallest",
+				colorScheme: resolved?.color ? {
+					color: resolved.color,
+					text: "#fff"
+				} : void 0,
+				children: resolved?.label ?? String(item)
+			}, i);
+		})
+	});
+	if (value.length > 0 && value.every((item) => typeof item === "string")) return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		noWrap: true,
+		className: "px-1",
+		children: value.join(", ")
+	});
+	return /* @__PURE__ */ jsxs(Typography, {
+		variant: "body2",
+		color: "secondary",
+		className: "px-1",
+		children: [
+			value.length,
+			" ",
+			value.length === 1 ? "item" : "items"
+		]
+	});
+}
+function renderMap(value) {
+	if (typeof value !== "object" || value === null) return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		color: "secondary",
+		className: "px-1",
+		children: "—"
+	});
+	const fieldCount = Object.keys(value).length;
+	return /* @__PURE__ */ jsxs(Typography, {
+		variant: "body2",
+		color: "secondary",
+		className: "px-1",
+		children: [
+			fieldCount,
+			" ",
+			fieldCount === 1 ? "field" : "fields"
+		]
+	});
+}
+function renderReference(value) {
+	return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		noWrap: true,
+		className: "px-1",
+		children: String(value)
+	});
+}
+function renderGeopoint(value) {
+	if (isGeoPoint(value)) return /* @__PURE__ */ jsxs(Typography, {
+		variant: "body2",
+		noWrap: true,
+		className: "px-1 tabular-nums",
+		children: [
+			value.lat.toFixed(6),
+			", ",
+			value.lng.toFixed(6)
+		]
+	});
+	return /* @__PURE__ */ jsx(Typography, {
+		variant: "body2",
+		color: "secondary",
+		className: "px-1",
+		children: String(value)
+	});
+}
+//#endregion
+//#region src/views/CollectionView/utils.ts
+/**
+* Traverse an object by dot-separated path.
+* Returns `undefined` if any segment is missing.
+*/
+function getValueInPath(obj, path) {
+	if (!obj) return void 0;
+	const parts = path.split(".");
+	let current = obj;
+	for (const part of parts) {
+		if (current === null || current === void 0 || typeof current !== "object") return void 0;
+		current = current[part];
+	}
+	return current;
+}
+//#endregion
+//#region src/views/CollectionView/CollectionTableView.tsx
+var DEFAULT_COLUMN_WIDTHS = {
+	string: 200,
+	number: 140,
+	date: 160,
+	boolean: 120,
+	array: 200,
+	map: 200,
+	reference: 200,
+	relation: 200,
+	geopoint: 180
+};
+var FALLBACK_COLUMN_WIDTH = 200;
+var SIZE_TO_ROW_HEIGHT = {
+	xs: 36,
+	s: 44,
+	m: 52,
+	l: 64,
+	xl: 80
+};
+var SORTABLE_TYPES = new Set([
+	"string",
+	"number",
+	"date"
+]);
+var VIEW_SIZE_TO_RENDERER_SIZE = {
+	xs: "tiny",
+	s: "small",
+	m: "medium",
+	l: "large",
+	xl: "large"
+};
+/**
+* Headless table view that wraps {@link VirtualTable}.
+*
+* Converts property configurations into virtual table columns and wires up
+* sorting, pagination, and cell rendering without coupling to any data layer.
+*
+* @group Collection View
+*/
+function CollectionTableView({ dataController, properties, propertiesOrder, displayedColumnIds, onRowClick, cellRenderer, size = "m", emptyComponent, hoverRow = true, className, onColumnResize, onColumnsOrderChange }) {
+	const columns = useMemo(() => {
+		const order = propertiesOrder ?? Object.keys(properties);
+		return (displayedColumnIds ? order.filter((key) => displayedColumnIds.includes(key)) : order.filter((key) => {
+			const prop = properties[key];
+			return prop && !prop.hideFromCollection;
+		})).map((key) => {
+			const prop = properties[key];
+			if (!prop) return null;
+			return {
+				key,
+				width: prop.columnWidth || DEFAULT_COLUMN_WIDTHS[prop.type] || FALLBACK_COLUMN_WIDTH,
+				title: prop.name,
+				sortable: SORTABLE_TYPES.has(prop.type),
+				resizable: true
+			};
+		}).filter((col) => col !== null);
+	}, [
+		properties,
+		propertiesOrder,
+		displayedColumnIds
+	]);
+	const rowHeight = SIZE_TO_ROW_HEIGHT[size];
+	const rendererSize = VIEW_SIZE_TO_RENDERER_SIZE[size];
+	const tableCellRenderer = useCallback((params) => {
+		if (!params.rowData) return null;
+		const propertyConfig = properties[params.column.key];
+		if (!propertyConfig) return null;
+		const value = getValueInPath(params.rowData, params.column.key);
+		const cellProps = {
+			row: params.rowData,
+			propertyKey: params.column.key,
+			property: propertyConfig,
+			value,
+			size: rendererSize,
+			width: params.width
+		};
+		if (cellRenderer) {
+			const custom = cellRenderer(cellProps);
+			if (custom !== void 0) return /* @__PURE__ */ jsx("div", {
+				className: "flex items-center h-full px-1 overflow-hidden",
+				children: custom
+			});
+		}
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex items-center h-full px-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx(DefaultCellRenderer, { ...cellProps })
+		});
+	}, [
+		properties,
+		cellRenderer,
+		rendererSize
+	]);
+	const handleRowClick = useCallback(({ rowData }) => {
+		onRowClick?.(rowData);
+	}, [onRowClick]);
+	const handleEndReached = useCallback(() => {
+		if (dataController.paginationEnabled && !dataController.noMoreToLoad) {
+			const currentCount = dataController.itemCount ?? dataController.pageSize ?? 50;
+			const pageSize = dataController.pageSize ?? 50;
+			dataController.setItemCount?.(currentCount + pageSize);
+		}
+	}, [
+		dataController.paginationEnabled,
+		dataController.noMoreToLoad,
+		dataController.itemCount,
+		dataController.pageSize,
+		dataController.setItemCount
+	]);
+	const handleColumnResize = useCallback((params) => {
+		onColumnResize?.({
+			key: params.key,
+			width: params.width
+		});
+	}, [onColumnResize]);
+	const handleColumnsOrderChange = useCallback((newColumns) => {
+		onColumnsOrderChange?.(newColumns.map((col) => col.key));
+	}, [onColumnsOrderChange]);
+	return /* @__PURE__ */ jsx(VirtualTable, {
+		data: dataController.data,
+		columns,
+		cellRenderer: tableCellRenderer,
+		rowHeight,
+		sortBy: dataController.sortBy,
+		onSortByUpdate: dataController.setSortBy,
+		onRowClick: handleRowClick,
+		onEndReached: handleEndReached,
+		onColumnResize: handleColumnResize,
+		onColumnsOrderChange: handleColumnsOrderChange,
+		loading: dataController.loading,
+		emptyComponent,
+		error: dataController.error,
+		hoverRow,
+		className: cls("h-full", className),
+		onScroll: dataController.onScroll,
+		initialScroll: dataController.initialScroll
+	});
+}
+//#endregion
+//#region src/views/CollectionView/CollectionCardView.tsx
+/**
+* Headless card grid view that wraps {@link CardView}.
+*
+* Renders each item as a card with an optional image, title,
+* preview properties, and selection support.
+*
+* @group Collection View
+*/
+function CollectionCardView({ dataController, properties, propertiesOrder, idProperty = "id", titleProperty, onRowClick, cellRenderer, size = "m", selectionEnabled, selectionController, highlightedItems, emptyComponent, className }) {
+	const order = useMemo(() => propertiesOrder ?? Object.keys(properties), [propertiesOrder, properties]);
+	const titlePropertyKey = useMemo(() => {
+		if (titleProperty) return titleProperty;
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) return key;
+		}
+		return idProperty;
+	}, [
+		titleProperty,
+		order,
+		properties,
+		idProperty
+	]);
+	const imageProperty = useMemo(() => {
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && prop.storage) return key;
+		}
+	}, [order, properties]);
+	const previewProperties = useMemo(() => {
+		const result = [];
+		for (const key of order) {
+			if (key === titlePropertyKey || key === imageProperty) continue;
+			const prop = properties[key];
+			if (prop && !prop.hideFromCollection) {
+				result.push({
+					key,
+					property: prop
+				});
+				if (result.length >= 3) break;
+			}
+		}
+		return result;
+	}, [
+		order,
+		properties,
+		titlePropertyKey,
+		imageProperty
+	]);
+	const selectedIds = useMemo(() => {
+		if (!selectionController?.selectedItems) return void 0;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of selectionController.selectedItems) {
+			const id = getValueInPath(item, idProperty);
+			if (id !== void 0 && id !== null) ids.add(id);
+		}
+		return ids;
+	}, [selectionController?.selectedItems, idProperty]);
+	const highlightedIds = useMemo(() => {
+		if (!highlightedItems) return void 0;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of highlightedItems) {
+			const id = getValueInPath(item, idProperty);
+			if (id !== void 0 && id !== null) ids.add(id);
+		}
+		return ids;
+	}, [highlightedItems, idProperty]);
+	const handleSelectionChange = useCallback((item, selected) => {
+		if (!selectionController) return;
+		selectionController.setSelectedItems((prev) => {
+			if (selected) return [...prev, item];
+			const itemId = getValueInPath(item, idProperty);
+			return prev.filter((existing) => {
+				return getValueInPath(existing, idProperty) !== itemId;
+			});
+		});
+	}, [selectionController, idProperty]);
+	const renderCard = useCallback((item, extra) => {
+		const titleValue = getValueInPath(item, titlePropertyKey);
+		const imageValue = imageProperty ? getValueInPath(item, imageProperty) : void 0;
+		const hasImage = typeof imageValue === "string" && imageValue.length > 0;
+		return /* @__PURE__ */ jsxs(Card, {
+			onClick: (e) => {
+				if (e) extra.onClick(e);
+			},
+			className: cls("overflow-hidden relative", extra.selected && "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75", extra.highlighted && !extra.selected && "ring-1 ring-primary/50"),
+			children: [
+				imageProperty && (hasImage ? /* @__PURE__ */ jsx("img", {
+					src: imageValue,
+					alt: "",
+					className: "w-full h-32 object-cover rounded-t-lg"
+				}) : /* @__PURE__ */ jsx("div", { className: cls("h-24 rounded-t-lg", "bg-surface-accent-200/50 dark:bg-black/30") })),
+				selectionEnabled && /* @__PURE__ */ jsx("div", {
+					className: "absolute top-2 right-2",
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: extra.selected,
+						onCheckedChange: extra.onSelectionChange,
+						size: "small"
+					})
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle2",
+					noWrap: true,
+					className: "px-3 pt-2 pb-1",
+					children: String(titleValue ?? "")
+				}),
+				previewProperties.map(({ key, property }) => {
+					const value = getValueInPath(item, key);
+					if (cellRenderer) {
+						const custom = cellRenderer({
+							row: item,
+							propertyKey: key,
+							property,
+							value,
+							size: "small"
+						});
+						if (custom !== void 0) return /* @__PURE__ */ jsx("div", {
+							className: "px-3 py-0.5",
+							children: custom
+						}, key);
+					}
+					return /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-0.5",
+						children: /* @__PURE__ */ jsx(DefaultCellRenderer, {
+							row: item,
+							propertyKey: key,
+							property,
+							value,
+							size: "small"
+						})
+					}, key);
+				}),
+				/* @__PURE__ */ jsx("div", { className: "pb-2" })
+			]
+		});
+	}, [
+		titlePropertyKey,
+		imageProperty,
+		previewProperties,
+		cellRenderer,
+		selectionEnabled
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("w-full h-full overflow-auto", className),
+		children: /* @__PURE__ */ jsx(CardView, {
+			data: dataController.data,
+			dataLoading: dataController.loading,
+			noMoreToLoad: dataController.noMoreToLoad,
+			dataLoadingError: dataController.error,
+			itemCount: dataController.itemCount,
+			setItemCount: dataController.setItemCount,
+			pageSize: dataController.pageSize,
+			paginationEnabled: dataController.paginationEnabled,
+			onItemClick: onRowClick,
+			selectedIds,
+			highlightedIds,
+			selectionEnabled: !!selectionEnabled,
+			onSelectionChange: handleSelectionChange,
+			size,
+			renderCard,
+			emptyComponent
+		})
+	});
+}
+//#endregion
+//#region src/views/CollectionView/CollectionListView.tsx
+/**
+* Headless list view that wraps {@link ListView}.
+*
+* Each row displays a title (bold), subtitle with 1–2 secondary property values,
+* and optional selection support.
+*
+* @group Collection View
+*/
+function CollectionListView({ dataController, properties, propertiesOrder, idProperty = "id", titleProperty, onRowClick, cellRenderer, size = "m", selectionEnabled, selectionController, highlightedItems, emptyComponent, className }) {
+	const order = useMemo(() => propertiesOrder ?? Object.keys(properties), [propertiesOrder, properties]);
+	const titlePropertyKey = useMemo(() => {
+		if (titleProperty) return titleProperty;
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) return key;
+		}
+		return idProperty;
+	}, [
+		titleProperty,
+		order,
+		properties,
+		idProperty
+	]);
+	const subtitleProperties = useMemo(() => {
+		const result = [];
+		for (const key of order) {
+			if (key === titlePropertyKey) continue;
+			const prop = properties[key];
+			if (prop && !prop.hideFromCollection) {
+				result.push({
+					key,
+					property: prop
+				});
+				if (result.length >= 2) break;
+			}
+		}
+		return result;
+	}, [
+		order,
+		properties,
+		titlePropertyKey
+	]);
+	const selectedIds = useMemo(() => {
+		if (!selectionController?.selectedItems) return void 0;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of selectionController.selectedItems) {
+			const id = getValueInPath(item, idProperty);
+			if (id !== void 0 && id !== null) ids.add(id);
+		}
+		return ids;
+	}, [selectionController?.selectedItems, idProperty]);
+	const highlightedIds = useMemo(() => {
+		if (!highlightedItems) return void 0;
+		const ids = /* @__PURE__ */ new Set();
+		for (const item of highlightedItems) {
+			const id = getValueInPath(item, idProperty);
+			if (id !== void 0 && id !== null) ids.add(id);
+		}
+		return ids;
+	}, [highlightedItems, idProperty]);
+	const handleSelectionChange = useCallback((item, selected) => {
+		if (!selectionController) return;
+		selectionController.setSelectedItems((prev) => {
+			if (selected) return [...prev, item];
+			const itemId = getValueInPath(item, idProperty);
+			return prev.filter((existing) => {
+				return getValueInPath(existing, idProperty) !== itemId;
+			});
+		});
+	}, [selectionController, idProperty]);
+	const renderRow = useCallback((params) => {
+		const { item, style, className: rowClassName, selected, highlighted, onClick, onSelectionChange } = params;
+		const titleValue = getValueInPath(item, titlePropertyKey);
+		return /* @__PURE__ */ jsxs("div", {
+			style,
+			className: cls("flex items-center gap-3 px-4 cursor-pointer", "hover:bg-surface-50 dark:hover:bg-surface-700", "transition-colors duration-100", selected && "bg-primary-50 dark:bg-primary-900/20", highlighted && "bg-surface-100 dark:bg-surface-800", rowClassName),
+			onClick,
+			children: [selectionEnabled && /* @__PURE__ */ jsx("div", {
+				className: "flex-shrink-0",
+				onClick: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					checked: selected,
+					onCheckedChange: onSelectionChange,
+					size: "small"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0 py-1",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle2",
+					noWrap: true,
+					children: String(titleValue ?? "")
+				}), subtitleProperties.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2",
+					children: subtitleProperties.map(({ key, property }) => {
+						const value = getValueInPath(item, key);
+						if (cellRenderer) {
+							const custom = cellRenderer({
+								row: item,
+								propertyKey: key,
+								property,
+								value,
+								size: "tiny"
+							});
+							if (custom !== void 0) return /* @__PURE__ */ jsx(React.Fragment, { children: custom }, key);
+						}
+						return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(DefaultCellRenderer, {
+							row: item,
+							propertyKey: key,
+							property,
+							value,
+							size: "tiny"
+						}) }, key);
+					})
+				})]
+			})]
+		});
+	}, [
+		titlePropertyKey,
+		subtitleProperties,
+		cellRenderer,
+		selectionEnabled
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("w-full h-full overflow-auto", className),
+		children: /* @__PURE__ */ jsx(ListView, {
+			data: dataController.data,
+			dataLoading: dataController.loading,
+			noMoreToLoad: dataController.noMoreToLoad,
+			dataLoadingError: dataController.error,
+			itemCount: dataController.itemCount,
+			setItemCount: dataController.setItemCount,
+			pageSize: dataController.pageSize,
+			paginationEnabled: dataController.paginationEnabled,
+			onItemClick: onRowClick,
+			selectedIds,
+			highlightedIds,
+			selectionEnabled: !!selectionEnabled,
+			onSelectionChange: handleSelectionChange,
+			size,
+			renderRow,
+			emptyComponent
+		})
+	});
+}
+//#endregion
+//#region src/views/CollectionView/CollectionKanbanView.tsx
+function getEnumLabel(enumConfig, key) {
+	if (!enumConfig) return key;
+	if (enumConfig instanceof Map) {
+		const cfg = enumConfig.get(key);
+		if (!cfg) return key;
+		return typeof cfg === "string" ? cfg : cfg.label;
+	}
+	const cfg = enumConfig[key];
+	if (!cfg) return key;
+	return typeof cfg === "string" ? cfg : cfg.label;
+}
+/**
+* Headless kanban view that wraps {@link KanbanView}.
+*
+* Groups data by a kanban property's enum values into columns.
+* Each card displays a title and 1–2 preview properties.
+*
+* @group Collection View
+*/
+function CollectionKanbanView({ dataController, properties, propertiesOrder, idProperty = "id", titleProperty, kanbanProperty, onRowClick, cellRenderer, emptyComponent, onRowCreate, className }) {
+	const order = useMemo(() => propertiesOrder ?? Object.keys(properties), [propertiesOrder, properties]);
+	const columns = useMemo(() => {
+		const kanbanConfig = properties[kanbanProperty];
+		if (kanbanConfig?.enum) {
+			if (kanbanConfig.enum instanceof Map) return Array.from(kanbanConfig.enum.keys()).map(String);
+			return Object.keys(kanbanConfig.enum);
+		}
+		const seen = /* @__PURE__ */ new Set();
+		for (const row of dataController.data) {
+			const val = getValueInPath(row, kanbanProperty);
+			if (val !== null && val !== void 0) seen.add(String(val));
+		}
+		return Array.from(seen);
+	}, [
+		properties,
+		kanbanProperty,
+		dataController.data
+	]);
+	const columnLabels = useMemo(() => {
+		const kanbanConfig = properties[kanbanProperty];
+		const labels = {};
+		for (const col of columns) labels[col] = getEnumLabel(kanbanConfig?.enum, col);
+		return labels;
+	}, [
+		properties,
+		kanbanProperty,
+		columns
+	]);
+	const titlePropertyKey = useMemo(() => {
+		if (titleProperty) return titleProperty;
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) return key;
+		}
+		return idProperty;
+	}, [
+		titleProperty,
+		order,
+		properties,
+		idProperty
+	]);
+	const previewProperties = useMemo(() => {
+		const result = [];
+		for (const key of order) {
+			if (key === titlePropertyKey || key === kanbanProperty) continue;
+			const prop = properties[key];
+			if (prop && !prop.hideFromCollection) {
+				result.push({
+					key,
+					property: prop
+				});
+				if (result.length >= 2) break;
+			}
+		}
+		return result;
+	}, [
+		order,
+		properties,
+		titlePropertyKey,
+		kanbanProperty
+	]);
+	const boardItems = useMemo(() => {
+		return dataController.data.map((row, index) => {
+			const id = getValueInPath(row, idProperty);
+			return {
+				id: id !== null && id !== void 0 ? String(id) : String(index),
+				data: row
+			};
+		});
+	}, [dataController.data, idProperty]);
+	const assignColumn = useCallback((item) => {
+		const val = getValueInPath(item.data, kanbanProperty);
+		const strVal = val !== null && val !== void 0 ? String(val) : "";
+		if (columns.includes(strVal)) return strVal;
+		return columns[0] ?? "";
+	}, [kanbanProperty, columns]);
+	const ItemComponent = useMemo(() => {
+		function KanbanCard(props) {
+			const { item } = props;
+			const titleValue = getValueInPath(item.data, titlePropertyKey);
+			return /* @__PURE__ */ jsxs(Card, {
+				onClick: () => onRowClick?.(item.data),
+				className: cls("p-3", cardClickableMixin, props.isDragging && "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75", props.isDragging && "shadow-lg opacity-75"),
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle2",
+					noWrap: true,
+					children: String(titleValue ?? "")
+				}), previewProperties.map(({ key, property }) => {
+					const value = getValueInPath(item.data, key);
+					if (cellRenderer) {
+						const custom = cellRenderer({
+							row: item.data,
+							propertyKey: key,
+							property,
+							value,
+							size: "tiny"
+						});
+						if (custom !== void 0) return /* @__PURE__ */ jsx("div", {
+							className: "mt-1",
+							children: custom
+						}, key);
+					}
+					return /* @__PURE__ */ jsx("div", {
+						className: "mt-1",
+						children: /* @__PURE__ */ jsx(DefaultCellRenderer, {
+							row: item.data,
+							propertyKey: key,
+							property,
+							value,
+							size: "tiny"
+						})
+					}, key);
+				})]
+			});
+		}
+		return KanbanCard;
+	}, [
+		titlePropertyKey,
+		previewProperties,
+		cellRenderer,
+		onRowClick
+	]);
+	const handleAddItemToColumn = useCallback((column) => {
+		onRowCreate?.({ [kanbanProperty]: column });
+	}, [onRowCreate, kanbanProperty]);
+	if (columns.length === 0 && !dataController.loading) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center p-8",
+		children: emptyComponent ?? /* @__PURE__ */ jsx(Typography, {
+			variant: "body2",
+			color: "secondary",
+			children: "No columns available for kanban view."
+		})
+	});
+	return /* @__PURE__ */ jsx(KanbanView, {
+		columns,
+		columnLabels,
+		data: boardItems,
+		assignColumn,
+		ItemComponent,
+		onAddItemToColumn: onRowCreate ? handleAddItemToColumn : void 0,
+		className
+	});
+}
+//#endregion
+//#region src/views/CollectionView/CollectionView.tsx
+var DEFAULT_ENABLED_VIEWS = [
+	"list",
+	"table",
+	"cards",
+	"kanban"
+];
+/**
+* A data-agnostic collection view component that orchestrates table, card,
+* list, and kanban views — driven entirely by props.
+*
+* Zero imports from any entity or data layer. This component lives in
+* `@rebasepro/ui` and can be used with any data source.
+*
+* @example
+* ```tsx
+* import { CollectionView } from "@rebasepro/ui";
+*
+* <CollectionView
+*     dataController={{ data: myRows, loading: false, noMoreToLoad: true }}
+*     properties={{
+*         name: { type: "string", name: "Name" },
+*         email: { type: "string", name: "Email" },
+*     }}
+*     title="Contacts"
+*     onRowClick={(row) => openDetail(row.id)}
+* />
+* ```
+*
+* @group Collection View
+*/
+function CollectionView({ dataController, properties, propertiesOrder, displayedColumnIds, idProperty = "id", titleProperty, title, viewMode: viewModeProp, defaultViewMode = "list", enabledViews = DEFAULT_ENABLED_VIEWS, onViewModeChange: onViewModeChangeProp, size: sizeProp, defaultSize = "m", onSizeChange: onSizeChangeProp, kanbanProperty: kanbanPropertyProp, kanbanPropertyOptions, onKanbanPropertyChange: onKanbanPropertyChangeProp, onRowClick, onRowCreate, canCreate = true, selectionEnabled, selectionController, highlightedItems, onMultipleDelete, cellRenderer, emptyComponent, toolbarActionsStart, toolbarActionsEnd, hideToolbar, hoverRow = true, onColumnResize, onColumnsOrderChange, className }) {
+	const [internalViewMode, setInternalViewMode] = useState(defaultViewMode);
+	const viewMode = viewModeProp ?? internalViewMode;
+	const onViewModeChange = useCallback((mode) => {
+		setInternalViewMode(mode);
+		onViewModeChangeProp?.(mode);
+	}, [onViewModeChangeProp]);
+	const [internalSize, setInternalSize] = useState(defaultSize);
+	const size = sizeProp ?? internalSize;
+	const onSizeChange = useCallback((s) => {
+		setInternalSize(s);
+		onSizeChangeProp?.(s);
+	}, [onSizeChangeProp]);
+	const [internalKanbanProperty, setInternalKanbanProperty] = useState(kanbanPropertyProp);
+	const kanbanProperty = kanbanPropertyProp ?? internalKanbanProperty;
+	const onKanbanPropertyChange = useCallback((property) => {
+		setInternalKanbanProperty(property);
+		onKanbanPropertyChangeProp?.(property);
+	}, [onKanbanPropertyChangeProp]);
+	const resolvedKanbanProperty = useMemo(() => {
+		if (kanbanProperty) return kanbanProperty;
+		const order = propertiesOrder ?? Object.keys(properties);
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && prop.enum) return key;
+		}
+	}, [
+		kanbanProperty,
+		properties,
+		propertiesOrder
+	]);
+	const resolvedKanbanPropertyOptions = useMemo(() => {
+		if (kanbanPropertyOptions) return kanbanPropertyOptions;
+		const options = [];
+		const order = propertiesOrder ?? Object.keys(properties);
+		for (const key of order) {
+			const prop = properties[key];
+			if (prop && prop.type === "string" && prop.enum) options.push({
+				key,
+				label: prop.name
+			});
+		}
+		return options;
+	}, [
+		kanbanPropertyOptions,
+		properties,
+		propertiesOrder
+	]);
+	const sharedProps = {
+		dataController,
+		properties,
+		propertiesOrder,
+		idProperty,
+		titleProperty,
+		onRowClick,
+		cellRenderer,
+		selectionEnabled,
+		selectionController,
+		highlightedItems,
+		emptyComponent
+	};
+	function renderView() {
+		switch (viewMode) {
+			case "table": return /* @__PURE__ */ jsx(CollectionTableView, {
+				...sharedProps,
+				displayedColumnIds,
+				size,
+				hoverRow,
+				onColumnResize,
+				onColumnsOrderChange
+			});
+			case "cards": return /* @__PURE__ */ jsx(CollectionCardView, {
+				...sharedProps,
+				size
+			});
+			case "kanban": return resolvedKanbanProperty ? /* @__PURE__ */ jsx(CollectionKanbanView, {
+				...sharedProps,
+				kanbanProperty: resolvedKanbanProperty,
+				onRowCreate
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center p-8",
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					color: "secondary",
+					children: "No enum property available for kanban grouping."
+				})
+			});
+			default: return /* @__PURE__ */ jsx(CollectionListView, {
+				...sharedProps,
+				size
+			});
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("overflow-hidden h-full w-full rounded-md flex flex-col", "dark:bg-surface-800", className),
+		children: [
+			dataController.error && dataController.data.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-4 px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 flex-shrink-0",
+				children: /* @__PURE__ */ jsxs(Typography, {
+					variant: "body2",
+					className: "text-red-700 dark:text-red-300 flex-1",
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: "Warning:" }),
+						" ",
+						dataController.error.message || "Failed to update data."
+					]
+				})
+			}),
+			!hideToolbar && /* @__PURE__ */ jsx(CollectionViewToolbar, {
+				viewMode,
+				onViewModeChange: enabledViews.length > 1 ? onViewModeChange : void 0,
+				enabledViews,
+				size,
+				onSizeChange,
+				searchString: dataController.searchString,
+				onSearchChange: dataController.setSearchString,
+				loading: dataController.loading,
+				actionsStart: toolbarActionsStart,
+				actionsEnd: toolbarActionsEnd,
+				kanbanPropertyOptions: viewMode === "kanban" ? resolvedKanbanPropertyOptions : void 0,
+				selectedKanbanProperty: resolvedKanbanProperty,
+				onKanbanPropertyChange
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-hidden",
+				children: renderView()
+			})
+		]
+	});
+}
+//#endregion
+export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CalendarIcon, Card, CardView, CenteredView, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionCardView, CollectionKanbanView, CollectionListView, CollectionTableView, CollectionView, CollectionViewToolbar, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, DefaultCellRenderer, Dialog, DialogActions, DialogContent, DialogTitle, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftIcon, Paper, PauseIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectInputLabel, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, VirtualTable as TableView, VirtualTable, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TypeIcon, Typography, UnderlineIcon, UndoIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, VideoIcon, VoteIcon, Wand2Icon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, coolIconKeys, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize, keyToIconComponent, lucideIcons, paperMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useOutsideAlerter, usePortalContainer };
 
 //# sourceMappingURL=index.es.js.map