@rebasepro/ui 0.6.0 → 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));
@@ -187,15 +189,15 @@ function SelectInputLabel({ children, error }) {
 //#region src/styles.ts
 var focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 var focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
-var focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-0 ring-offset-transparent ";
-var fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100";
-var fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-900 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-900/0";
-var fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90";
-var fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
-var defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
-var paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-var cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-var cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150";
+var focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
+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/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";
 var cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";
 //#endregion
 //#region src/hooks/PortalContainerContext.tsx
@@ -452,7 +454,7 @@ var Alert = ({ children, onDismiss, color = "info", size = "medium", action, out
 	const classes = getColorClasses(color);
 	return /* @__PURE__ */ jsxs("div", {
 		style,
-		className: cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, outerClassName),
+		className: cls(getSizeClasses(size), "w-full", "font-medium", "rounded-lg flex items-center gap-2", classes, outerClassName),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: cls("grow", className),
@@ -553,7 +555,7 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 		"aria-disabled": disabled || void 0,
 		"aria-labelledby": label ? switchLabelId : void 0,
 		tabIndex: -1,
-		className: cls(!invisible && "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100", !invisible && (disabled ? "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90" : "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40"), disabled ? "cursor-default" : "cursor-pointer", "rounded-md max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
+		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-black/30", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-black/20" : "hover:bg-surface-accent-200/70 hover:dark:bg-black/50"), disabled ? "cursor-default" : "cursor-pointer", "rounded-lg max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[44px]": size === "medium",
@@ -584,14 +586,14 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 //#endregion
 //#region src/components/Button.tsx
 var ButtonInner = React.memo(React.forwardRef(({ children, className, variant = "filled", disabled = false, size = "medium", startIcon = null, fullWidth = false, component: Component, color = "neutral", ...props }, ref) => {
-	const baseClasses = "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]";
+	const baseClasses = "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2";
 	const buttonClasses = cls({
 		"w-full": fullWidth,
 		"w-fit": !fullWidth,
-		"border border-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-		"border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
-		"border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 shadow-sm hover:shadow-md text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
-		"border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow-sm hover:shadow-md text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+		"border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
+		"border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
+		"border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+		"border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
 		"border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
 		"border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
 		"border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
@@ -648,7 +650,7 @@ var Card = React.forwardRef(({ children, className, onClick, style, ...props },
 		role: onClick ? "button" : void 0,
 		tabIndex: onClick ? 0 : void 0,
 		onClick,
-		className: cls(cardMixin, onClick && "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150", className),
+		className: cls(cardMixin, onClick && "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150", className),
 		style,
 		...props,
 		children
@@ -1007,10 +1009,10 @@ Checkbox.displayName = "Checkbox";
 //#endregion
 //#region src/components/Chip.tsx
 var sizeClassNames = {
-	smallest: "px-1.5 text-xs",
-	small: "px-2 py-0.5 text-sm",
-	medium: "px-3 py-1 text-sm",
-	large: "px-4 py-1.5 text-sm"
+	smallest: "px-1.5 py-px text-[10px]",
+	small: "px-2 py-0.5 text-xs",
+	medium: "px-2.5 py-0.5 text-xs",
+	large: "px-3 py-1 text-xs"
 };
 /**
 * Detect if the app is currently in dark mode by checking the
@@ -1020,45 +1022,48 @@ function isDarkMode() {
 	return typeof document !== "undefined" && document.documentElement.classList.contains("dark");
 }
 /**
+* Helper to generate rgba from hex or standard colors.
+*/
+function getRgba(hex, alpha) {
+	if (!hex || !hex.startsWith("#")) return hex;
+	let color = hex.slice(1);
+	if (color.length === 3) color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+	return `rgba(${parseInt(color.slice(0, 2), 16)}, ${parseInt(color.slice(2, 4), 16)}, ${parseInt(color.slice(4, 6), 16)}, ${alpha})`;
+}
+/**
 * @group Preview components
 */
-function Chip({ children, colorScheme, error, outlined, onClick, icon, size = "large", className, style }) {
+function Chip({ children, colorScheme, error, outlined, onClick, icon, size = "medium", className, style }) {
 	const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
 	const dark = isDarkMode();
-	const getRgba = (hex, alpha) => {
-		if (!hex || !hex.startsWith("#")) return hex;
-		let color = hex.slice(1);
-		if (color.length === 3) color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-		return `rgba(${parseInt(color.slice(0, 2), 16)}, ${parseInt(color.slice(2, 4), 16)}, ${parseInt(color.slice(4, 6), 16)}, ${alpha})`;
-	};
+	const hasScheme = error || usedColorScheme;
 	let textColor = "";
 	let bgColor = "";
 	let border = "";
 	if (error) textColor = dark ? "#f87171" : "#dc2626";
 	else if (usedColorScheme) textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
-	else textColor = dark ? "#d4d4d4" : "#404040";
-	if (outlined) {
-		bgColor = getRgba(textColor, dark ? .12 : .06);
-		border = `1px solid ${getRgba(textColor, dark ? .25 : .18)}`;
-	} else if (error) {
-		bgColor = dark ? "rgba(220, 38, 38, 0.2)" : "rgba(239, 68, 68, 0.15)";
-		border = `1px solid ${dark ? "rgba(220, 38, 38, 0.4)" : "rgba(239, 68, 68, 0.3)"}`;
-	} else if (usedColorScheme) bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
-	else {
-		bgColor = dark ? "#1f1f1f" : "#f4f4f5";
-		border = `1px solid ${dark ? "#2e2e30" : "#e4e4e7"}`;
+	if (hasScheme) {
+		if (outlined) {
+			bgColor = getRgba(textColor, dark ? .1 : .06);
+			border = `1px solid ${getRgba(textColor, dark ? .2 : .14)}`;
+		} else if (error) {
+			bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
+			border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
+		} else if (usedColorScheme) bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1", "text-ellipsis", "items-center", onClick ? "cursor-pointer hover:bg-surface-accent-300 dark:hover:bg-surface-accent-700" : "", sizeClassNames[size], className),
+		className: cls("rounded-lg max-w-full w-max h-fit font-medium inline-flex gap-1", "text-ellipsis", "items-center", "transition-colors duration-150", !hasScheme && "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark border border-surface-200 dark:border-surface-700", !hasScheme && outlined && "bg-transparent dark:bg-transparent", onClick ? "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5" : "", sizeClassNames[size], className),
 		onClick,
 		style: {
-			backgroundColor: bgColor,
-			color: textColor,
-			border: border || void 0,
+			...hasScheme ? {
+				backgroundColor: bgColor,
+				color: textColor,
+				border: border || void 0
+			} : {},
 			overflow: "hidden",
 			...style
 		},
-		children: [children, icon]
+		children: [icon, children]
 	});
 }
 //#endregion
@@ -1247,7 +1252,7 @@ var colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 da
 var sizeClasses$1 = {
 	medium: "w-10 !h-10 min-w-10 min-h-10",
 	small: "w-8 !h-8 min-w-8 min-h-8",
-	smallest: "w-6 !h-6 min-w-6 min-h-6",
+	smallest: "w-7 !h-7 min-w-7 min-h-7",
 	large: "w-12 !h-12 min-w-12 min-h-12"
 };
 var shapeClasses = {
@@ -1389,7 +1394,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("style", { children: inputStyles }),
 		/* @__PURE__ */ jsxs("div", {
-			className: cls("rounded-md relative max-w-full", !invisible && "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+			className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-accent-200/50 dark:bg-black/30", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
 				"min-h-[28px]": size === "smallest",
 				"min-h-[32px]": size === "small",
 				"min-h-[44px]": size === "medium",
@@ -1413,7 +1418,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 					onFocus: handleFocus,
 					onBlur: handleBlur,
 					disabled,
-					className: cls("w-full outline-hidden bg-transparent leading-normal text-base px-3", clearable ? "pr-14" : "pr-12", "rounded-md", {
+					className: cls("w-full outline-hidden bg-transparent leading-normal text-base px-3", clearable ? "pr-14" : "pr-12", "rounded-lg", {
 						"min-h-[28px]": size === "smallest",
 						"min-h-[32px]": size === "small",
 						"min-h-[44px]": size === "medium",
@@ -1519,7 +1524,7 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 					"aria-describedby": ariaDescribedby,
 					className: cls("relative h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out"),
 					children: /* @__PURE__ */ jsx("div", {
-						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "overflow-hidden", "outline-none focus:outline-none", fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-full" : void 0, "text-surface-accent-900 dark:text-white", "justify-center items-center", fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0, className),
+						className: cls(paperMixin, "rounded-2xl", "z-60", "relative", "overflow-hidden", "outline-none focus:outline-none", fullWidth && !fullScreen ? "w-11/12" : void 0, fullHeight && !fullScreen ? "h-full" : void 0, "text-surface-accent-900 dark:text-white", "justify-center items-center", fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg", "ease-in-out duration-200", scrollable && "overflow-y-auto", displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]", maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0, className),
 						children
 					})
 				})]
@@ -1606,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/60 dark:border-surface-700/60  border", "rounded-md", "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);
@@ -1615,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/60 dark:border-surface-700/60 ", asField && "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100", 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,
@@ -1649,7 +1654,7 @@ function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled,
 		role: "button",
 		"aria-label": typeof title === "string" ? title : typeof uploadDescription === "string" ? uploadDescription : "Upload file",
 		"aria-disabled": disabled || void 0,
-		className: cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid", {
+		className: cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid", {
 			"h-44": size === "large",
 			"h-28": size === "medium",
 			"h-16": size === "small",
@@ -1700,7 +1705,7 @@ var FilterChip = React.forwardRef(function FilterChip({ children, active = false
 		type: "button",
 		onClick,
 		disabled,
-		className: cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-all duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", sizeClasses[size], active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"), disabled && "opacity-50 cursor-not-allowed", className),
+		className: cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", sizeClasses[size], active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"), disabled && "opacity-50 cursor-not-allowed", className),
 		...rest,
 		children: [icon, children]
 	});
@@ -2053,7 +2058,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 					}, {
 						"px-2": size === "small" || size === "smallest",
 						"px-4": size === "medium" || size === "large"
-					}, "select-none rounded-md text-sm", "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName),
+					}, "select-none rounded-lg text-sm", "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName),
 					children: selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", {
 						className: "flex justify-between items-center w-full",
 						children: [/* @__PURE__ */ jsxs("div", {
@@ -2289,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/60 dark:border-surface-700/60 ", 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"),
@@ -2423,7 +2428,7 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 				children: label
 			}) : label,
 			/* @__PURE__ */ jsxs("div", {
-				className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
+				className: cls("select-none rounded-lg text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
 					"min-h-[28px]": size === "smallest",
 					"min-h-[32px]": size === "small",
 					"min-h-[44px]": size === "medium",
@@ -2442,7 +2447,7 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 						"px-4": size === "large",
 						"px-3": size === "medium",
 						"px-2": size === "small" || size === "smallest"
-					} : "", "outline-hidden focus:outline-hidden", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
+					} : "", "outline-hidden focus:outline-hidden", "outline-none focus:outline-none", "select-none rounded-lg text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
 						"min-h-[28px]": size === "smallest",
 						"min-h-[32px]": size === "small",
 						"min-h-[44px]": size === "medium",
@@ -2571,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(() => {
@@ -2602,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
+				})]
 			})]
 		})
 	});
@@ -2825,7 +2833,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		onFocus: () => setFocused(true),
 		onBlur: () => setFocused(false),
 		style: inputStyle,
-		className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName)
+		className: cls(invisible ? focusedInvisibleMixin : "", "rounded-lg resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName)
 	}) : /* @__PURE__ */ jsx("input", {
 		...inputProps,
 		ref: inputRef,
@@ -2835,7 +2843,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		"aria-disabled": disabled || void 0,
 		disabled,
 		style: inputStyle,
-		className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+		className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-lg", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[44px]": size === "medium",
@@ -2851,7 +2859,7 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
+		className: cls("rounded-lg relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
 			"min-h-[28px]": size === "smallest",
 			"min-h-[32px]": size === "small",
 			"min-h-[44px]": size === "medium",
@@ -2933,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/60 dark:border-surface-700/60 "),
+					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", {
@@ -2945,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/60 dark:border-surface-700/60 ", 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
 					})
 				}),
@@ -2954,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/60 dark:border-surface-700/60 "),
+					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 })
 				})
 			]
@@ -2973,7 +2981,7 @@ function Tab({ value, className, innerClassName, children, disabled }) {
 //#endregion
 //#region src/components/Table.tsx
 var Table = React.memo(({ children, className, style, ...rest }) => /* @__PURE__ */ jsx("table", {
-	className: cls("text-left text-surface-900 dark:text-white rounded-md overflow-x-auto", className),
+	className: cls("text-left text-surface-900 dark:text-white rounded-lg overflow-x-auto", className),
 	style,
 	...rest,
 	children
@@ -2993,7 +3001,7 @@ var TableHeader = React.memo(({ children, className, ...rest }) => /* @__PURE__
 var TableRow = React.memo(({ children, className, onClick, style, ...rest }) => /* @__PURE__ */ jsx("tr", {
 	onClick,
 	style,
-	className: cls("bg-white dark:bg-surface-900", onClick ? "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 cursor-pointer" : "", className),
+	className: cls("bg-white dark:bg-surface-900", onClick ? "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer" : "", className),
 	...rest,
 	children
 }));
@@ -3620,7 +3628,7 @@ var VirtualTableRow = React.memo(function VirtualTableRow({ rowData, rowIndex, c
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: cls("flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-800", rowClassName ? rowClassName(rowData) : "", {
-			"hover:!bg-surface-50/75 dark:hover:!bg-surface-800/75": hoverRow,
+			"hover:!bg-primary/[0.03] dark:hover:!bg-primary/5": hoverRow,
 			"cursor-pointer ": onRowClick
 		}),
 		onClick,
@@ -6086,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