@rebasepro/ui 0.12.1-canary.gf5f1d39 → 0.13.0

package/dist/index.es.js

@@ -1,10 +1,10 @@
 "use client";
 import * as React$1 from "react";
 import React, { Children, createContext, createRef, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
 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, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowLeftIcon as ArrowLeftIcon$1, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpIcon as ArrowUpIcon$1, ArrowUpToLineIcon, BoldIcon, BookOpenIcon, CalendarIcon, CalendarIcon as CalendarIcon$1, CheckCircle2Icon, 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, CircleDotIcon, CircleIcon, CircleUserIcon, CodeIcon, ColumnsIcon, CopyIcon, DatabaseIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FilterIcon, FilterIcon as FilterIcon$1, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, 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, ListPlusIcon, ListTodoIcon, LoaderIcon, LockIcon, LogOutIcon, MailIcon, Maximize2Icon, MenuIcon, MessageCircleIcon, MinusCircleIcon, MinusIcon, MinusIcon as MinusIcon$1, MoonIcon, MoreVerticalIcon, Music2Icon, PanelLeftIcon, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, 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, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Table2, TableIcon, TagIcon, TerminalIcon, TextIcon, Trash2Icon, TrendingUpIcon, TypeIcon, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VoteIcon, Wand2Icon, WrenchIcon, 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";
@@ -28,10 +28,50 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { FixedSizeList } from "react-window";
 import useMeasure from "react-use-measure";
 import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { DndContext, DragOverlay, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, DragOverlay, PointerSensor, closestCenter, closestCorners, 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/styles.ts
+var CONTROL_HEIGHT = {
+	smallest: 28,
+	small: 32,
+	medium: 40,
+	large: 48,
+	xl: 56,
+	"2xl": 64
+};
+/** Tailwind min-height class per control size. Keep in sync with CONTROL_HEIGHT. */
+var controlHeightMixin = {
+	smallest: "min-h-[28px]",
+	small: "min-h-[32px]",
+	medium: "min-h-[40px]",
+	large: "min-h-[48px]",
+	xl: "min-h-[56px]",
+	"2xl": "min-h-[64px]"
+};
+/** Horizontal padding paired with each size, so gutters scale with height. */
+var controlPaddingMixin = {
+	smallest: "px-2",
+	small: "px-2",
+	medium: "px-3",
+	large: "px-4",
+	xl: "px-6",
+	"2xl": "px-10"
+};
+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-white/[0.07] focus:bg-surface-accent-100/70";
+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-white/[0.055]";
+var fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
+var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
+var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
+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/util/cls.ts
 function cls(...classes) {
 	return twMerge(clsx(classes));
@@ -70,129 +110,200 @@ function hashString(str) {
 }
 //#endregion
 //#region src/util/chip_colors.ts
-var CHIP_COLORS = {
+var CHIP_HUES = [
+	"blue",
+	"cyan",
+	"teal",
+	"green",
+	"yellow",
+	"orange",
+	"red",
+	"pink",
+	"purple",
+	"gray",
+	"indigo",
+	"violet",
+	"fuchsia",
+	"rose",
+	"emerald"
+];
+var HUE_STOPS = {
 	blue: {
-		color: "#cfdfff",
-		text: "#102046",
-		darkColor: "#2750ae",
-		darkText: "#cfdfff"
+		pale: "#cfdfff",
+		mid: "#9cc7ff",
+		solid: "#2d7ff9",
+		deep: "#2750ae",
+		text: "#102046"
+	},
+	cyan: {
+		pale: "#d0f0fd",
+		mid: "#77d1f3",
+		solid: "#18bfff",
+		deep: "#0b76b7",
+		text: "#04283f"
 	},
 	teal: {
-		color: "#c2f5e9",
+		pale: "#c2f5e9",
+		mid: "#72ddc3",
+		solid: "#20d9d2",
+		deep: "#06a09b",
 		text: "#012524",
-		darkColor: "#06a09b",
-		darkText: "#daf3e9"
-	},
-	yellow: {
-		color: "#ffeab6",
-		text: "#3b2501",
-		darkColor: "#b87503",
-		darkText: "#ffeab6"
-	},
-	pink: {
-		color: "#ffdaf6",
-		text: "#400832",
-		darkColor: "#b2158b",
-		darkText: "#ffdaf6"
+		onDeep: "#daf3e9"
 	},
-	purple: {
-		color: "#ede2fe",
-		text: "#280b42",
-		darkColor: "#6b1cb0",
-		darkText: "#ede2fe"
+	green: {
+		pale: "#d1f7c4",
+		mid: "#93e088",
+		solid: "#20c933",
+		deep: "#338a17",
+		text: "#0b1d05"
 	},
-	cyan: {
-		color: "#d0f0fd",
-		text: "#04283f",
-		darkColor: "#0b76b7",
-		darkText: "#d0f0fd"
+	yellow: {
+		pale: "#ffeab6",
+		mid: "#ffd66e",
+		solid: "#fcb400",
+		deep: "#b87503",
+		text: "#3b2501"
 	},
 	orange: {
-		color: "#fee2d5",
-		text: "#6b2613",
-		darkColor: "#d74d26",
-		darkText: "#fee2d5"
-	},
-	green: {
-		color: "#d1f7c4",
-		text: "#0b1d05",
-		darkColor: "#338a17",
-		darkText: "#d1f7c4"
+		pale: "#fee2d5",
+		mid: "#ffa981",
+		solid: "#ff6f2c",
+		deep: "#d74d26",
+		text: "#6b2613"
 	},
 	red: {
-		color: "#ffdce5",
-		text: "#4c0c1c",
-		darkColor: "#ba1e45",
-		darkText: "#ffdce5"
+		pale: "#ffdce5",
+		mid: "#ff9eb7",
+		solid: "#f82b60",
+		deep: "#ba1e45",
+		text: "#4c0c1c"
+	},
+	pink: {
+		pale: "#ffdaf6",
+		mid: "#f99de2",
+		solid: "#ff08c2",
+		deep: "#b2158b",
+		text: "#400832"
+	},
+	purple: {
+		pale: "#ede2fe",
+		mid: "#cdb0ff",
+		solid: "#8b46ff",
+		deep: "#6b1cb0",
+		text: "#280b42"
 	},
 	gray: {
-		color: "#eee",
-		text: "#040404",
-		darkColor: "#444",
-		darkText: "#eee"
+		pale: "#eeeeee",
+		mid: "#cccccc",
+		solid: "#666666",
+		deep: "#444444",
+		text: "#040404"
 	},
 	indigo: {
-		color: "#e0e7ff",
-		text: "#312e81",
-		darkColor: "#4f46e5",
-		darkText: "#e0e7ff"
+		pale: "#e0e7ff",
+		mid: "#a5b4fc",
+		solid: "#6366f1",
+		deep: "#4f46e5",
+		text: "#312e81"
 	},
 	violet: {
-		color: "#ede9fe",
-		text: "#4c1d95",
-		darkColor: "#7c3aed",
-		darkText: "#ede9fe"
+		pale: "#ede9fe",
+		mid: "#c4b5fd",
+		solid: "#8b5cf6",
+		deep: "#7c3aed",
+		text: "#4c1d95"
 	},
 	fuchsia: {
-		color: "#fae8ff",
-		text: "#701a75",
-		darkColor: "#c026d3",
-		darkText: "#fae8ff"
+		pale: "#fae8ff",
+		mid: "#f0abfc",
+		solid: "#d946ef",
+		deep: "#c026d3",
+		text: "#701a75"
 	},
 	rose: {
-		color: "#ffe4e6",
-		text: "#881337",
-		darkColor: "#e11d48",
-		darkText: "#ffe4e6"
+		pale: "#ffe4e6",
+		mid: "#fda4af",
+		solid: "#f43f5e",
+		deep: "#e11d48",
+		text: "#881337"
 	},
 	emerald: {
-		color: "#d1fae5",
-		text: "#064e3b",
-		darkColor: "#059669",
-		darkText: "#d1fae5"
+		pale: "#d1fae5",
+		mid: "#6ee7b7",
+		solid: "#10b981",
+		deep: "#059669",
+		text: "#064e3b"
 	}
 };
+function tone(stops, chipTone) {
+	const onDeep = stops.onDeep ?? stops.pale;
+	switch (chipTone) {
+		case "Light": return {
+			color: stops.mid,
+			text: stops.text,
+			darkColor: stops.solid,
+			darkText: "#fff"
+		};
+		case "Dark": return {
+			color: stops.solid,
+			text: "#fff",
+			darkColor: stops.solid,
+			darkText: "#fff"
+		};
+		case "Darker": return {
+			color: stops.deep,
+			text: onDeep,
+			darkColor: stops.deep,
+			darkText: onDeep
+		};
+		default: return {
+			color: stops.pale,
+			text: stops.text,
+			darkColor: stops.deep,
+			darkText: onDeep
+		};
+	}
+}
+var CHIP_TONES = [
+	"Lighter",
+	"Light",
+	"Dark",
+	"Darker"
+];
+function buildChipColors() {
+	const colors = {};
+	for (const hue of CHIP_HUES) {
+		const stops = HUE_STOPS[hue];
+		for (const chipTone of CHIP_TONES) colors[`${hue}${chipTone}`] = tone(stops, chipTone);
+		colors[hue] = tone(stops, "Lighter");
+	}
+	return colors;
+}
+/**
+* Every chip scheme, keyed by hue and tone.
+*
+* This table used to hold four tones per hue and was flattened to one, which
+* left `blueDark`, `redDarker` and friends resolving to `undefined` — a chip
+* with a colour in its config rendering with no colour at all — and left seeded
+* chips picking from ten schemes, so a five-value enum routinely drew the same
+* background three times. The tones are generated from {@link HUE_STOPS} now,
+* so a new hue brings its whole family with it.
+*/
+var CHIP_COLORS = buildChipColors();
+/**
+* The keys a seeded chip may be assigned, in a stable order.
+*
+* The bare-hue aliases are excluded: they are the same scheme as `<hue>Lighter`
+* and would make the palest tone twice as likely as any other.
+*/
+var CHIP_SEED_KEYS = CHIP_HUES.flatMap((hue) => CHIP_TONES.map((chipTone) => `${hue}${chipTone}`));
 function getColorSchemeForKey(key) {
-	return CHIP_COLORS[key];
+	return CHIP_COLORS[key] ?? getColorSchemeForSeed(String(key));
 }
 function getColorSchemeForSeed(seed) {
-	const hash = hashString(seed);
-	const colorKeys = Object.keys(CHIP_COLORS);
-	return CHIP_COLORS[colorKeys[hash % colorKeys.length]];
+	return CHIP_COLORS[CHIP_SEED_KEYS[hashString(seed) % CHIP_SEED_KEYS.length]];
 }
 //#endregion
-//#region src/components/common/SelectInputLabel.tsx
-function SelectInputLabel({ children, error }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cls("text-sm font-medium ml-3.5 mb-1", error ? "text-red-600 dark:text-red-500" : "text-surface-accent-500 dark:text-surface-accent-300"),
-		children
-	});
-}
-//#endregion
-//#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-white/[0.07] focus:bg-surface-accent-100/70";
-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-white/[0.055]";
-var fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
-var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
-var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
-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
 var PortalContainerContext = createContext(void 0);
 /**
@@ -2438,23 +2549,31 @@ var colorClassesMapping = {
 };
 //#endregion
 //#region src/icons/GitHubIcon.tsx
-function GitHubIcon(props) {
+function GitHubIcon({ size = 24, color, className, onClick, style }) {
+	const px = typeof size === "number" ? size : iconSize[size];
 	return /* @__PURE__ */ jsx("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		className: props.className,
+		className: cls(color ? colorClassesMapping[color] : "", className),
+		onClick,
+		style,
 		fill: "currentColor",
-		width: props.size ?? 24,
-		height: props.size ?? 24,
+		width: px,
+		height: px,
 		viewBox: "0 0 24 24",
 		children: /* @__PURE__ */ jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })
 	});
 }
 //#endregion
 //#region src/icons/HandleIcon.tsx
-function HandleIcon() {
+function HandleIcon({ size = 24, color, className, onClick, style }) {
+	const px = typeof size === "number" ? size : iconSize[size];
 	return /* @__PURE__ */ jsxs("svg", {
-		width: "24",
-		height: "24",
+		xmlns: "http://www.w3.org/2000/svg",
+		className: cls(color ? colorClassesMapping[color] : "", className),
+		onClick,
+		style,
+		width: px,
+		height: px,
 		viewBox: "0 0 100 100",
 		fill: "none",
 		children: [
@@ -2597,6 +2716,52 @@ var AvatarInner = ({ src, alt, children, className, style, outerClassName, hover
 var Avatar = React.forwardRef(AvatarInner);
 //#endregion
 //#region src/components/BooleanSwitch.tsx
+/**
+* Switch geometry, one row per size: track w x h, knob k, and the knob's
+* off/on x-offsets. `on` is always `w - k - inset` so the knob is inset by the
+* same amount at both ends and vertically centred.
+*
+* This is a table rather than inline `cls({...})` conditions on purpose. The
+* offsets used to be computed object keys — `[value ? "translate-x-[24px]" :
+* "translate-x-[3px]"]: size === "large"` — and `large` and `medium` both
+* produced the key `translate-x-[3px]` when off. The later literal overwrote
+* the earlier, so the off-state class was silently dropped for `large` and the
+* knob sat flush against the edge.
+*/
+var SWITCH_GEOMETRY = {
+	smallest: {
+		track: "w-[34px] h-[18px] min-w-[34px] min-h-[18px]",
+		knob: "w-[16px] h-[16px]",
+		off: "translate-x-[1px]",
+		on: "translate-x-[17px]",
+		bar: "w-[16px] h-[6px]",
+		barX: "translate-x-[9px]"
+	},
+	small: {
+		track: "w-[38px] h-[22px] min-w-[38px] min-h-[22px]",
+		knob: "w-[18px] h-[18px]",
+		off: "translate-x-[2px]",
+		on: "translate-x-[18px]",
+		bar: "w-[18px] h-[8px]",
+		barX: "translate-x-[10px]"
+	},
+	medium: {
+		track: "w-[44px] h-[26px] min-w-[44px] min-h-[26px]",
+		knob: "w-[20px] h-[20px]",
+		off: "translate-x-[3px]",
+		on: "translate-x-[21px]",
+		bar: "w-[20px] h-[10px]",
+		barX: "translate-x-[12px]"
+	},
+	large: {
+		track: "w-[48px] h-[28px] min-w-[48px] min-h-[28px]",
+		knob: "w-[22px] h-[22px]",
+		off: "translate-x-[3px]",
+		on: "translate-x-[23px]",
+		bar: "w-[22px] h-[11px]",
+		barX: "translate-x-[13px]"
+	}
+};
 var BooleanSwitch = React.forwardRef(function BooleanSwitch({ value, allowIndeterminate, className, onValueChange, disabled = false, size = "medium", ...props }, ref) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
@@ -2612,23 +2777,9 @@ var BooleanSwitch = React.forwardRef(function BooleanSwitch({ value, allowIndete
 			else onValueChange?.(null);
 			else onValueChange?.(!value);
 		},
-		className: cls(size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[44px] h-[26px] min-w-[44px] min-h-[26px]", "outline-none outline-hidden rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className),
+		className: cls(SWITCH_GEOMETRY[size].track, "outline-none outline-hidden rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className),
 		...props,
-		children: [allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
-			"w-[21px] h-[10px]": size === "medium" || size === "large",
-			"w-[19px] h-[8px]": size === "small",
-			"w-[16px] h-[6px]": size === "smallest",
-			"translate-x-[10px]": size === "medium" || size === "large",
-			"translate-x-[9px]": size === "small",
-			"translate-x-[8px]": size === "smallest"
-		}) }, "knob"), !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
-			"w-[21px] h-[21px]": size === "medium" || size === "large",
-			"w-[19px] h-[19px]": size === "small",
-			"w-[16px] h-[16px]": size === "smallest",
-			[value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
-			[value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small",
-			[value ? "translate-x-[16px]" : "translate-x-[1px]"]: size === "smallest"
-		}) }, "knob")]
+		children: [allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", SWITCH_GEOMETRY[size].bar, SWITCH_GEOMETRY[size].barX) }, "knob"), !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400", SWITCH_GEOMETRY[size].knob, value ? SWITCH_GEOMETRY[size].on : SWITCH_GEOMETRY[size].off) }, "knob")]
 	});
 });
 //#endregion
@@ -2657,12 +2808,7 @@ var BooleanSwitchWithLabel = function BooleanSwitchWithLabel({ value, position =
 		"aria-disabled": disabled || void 0,
 		"aria-labelledby": label ? switchLabelId : void 0,
 		tabIndex: -1,
-		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055]", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-white/[0.03]" : "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]"), 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",
-			"min-h-[64px]": size === "large"
-		}, size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className),
+		className: cls(!invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055]", !invisible && (disabled ? "bg-surface-accent-200/50 dark:bg-white/[0.03]" : "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]"), 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", controlHeightMixin[size], size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className),
 		onClick: disabled ? void 0 : (e) => {
 			if (props.allowIndeterminate) {
 				const onChange = onValueChange;
@@ -2694,17 +2840,17 @@ var ButtonInner = React.memo(React.forwardRef(({ children, className, variant =
 		"w-fit": !fullWidth,
 		"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-red-600 bg-red-600 hover:bg-red-700 focus:ring-red-600 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,
-		"border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": variant === "text" && color === "error" && !disabled,
+		"border border-transparent text-red-600 hover:text-red-600 hover:bg-red-600 hover:bg-opacity-10 hover:bg-red-600/10": variant === "text" && color === "error" && !disabled,
 		"border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "text" && !disabled,
 		"border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "text" && color === "neutral" && !disabled,
 		"border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": variant === "outlined" && color === "primary" && !disabled,
 		"border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
-		"border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
+		"border border-red-500 text-red-600 hover:text-white hover:bg-red-600": variant === "outlined" && color === "error" && !disabled,
 		"border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "outlined" && color === "text" && !disabled,
 		"border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "outlined" && color === "neutral" && !disabled,
 		"text-text-disabled dark:text-text-disabled-dark": disabled,
@@ -2712,13 +2858,7 @@ var ButtonInner = React.memo(React.forwardRef(({ children, className, variant =
 		"border border-surface-500 opacity-50": variant === "outlined" && disabled,
 		"border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": variant === "filled" && disabled
 	});
-	const sizeClasses = cls({
-		"py-1 px-2": size === "small",
-		"py-2 px-4": size === "medium",
-		"py-2.5 px-5": size === "large",
-		"py-3 px-6": size === "xl",
-		"py-4 px-10": size === "2xl"
-	});
+	const sizeClasses = cls("py-0", controlHeightMixin[size], controlPaddingMixin[size]);
 	const iconColorClass = (color === "neutral" || color === "text") && !disabled ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300" : "";
 	if (Component) return /* @__PURE__ */ jsxs(Component, {
 		ref,
@@ -3037,16 +3177,16 @@ var ErrorBoundary = class extends React.Component {
 //#endregion
 //#region src/components/Checkbox.tsx
 var sizeClasses$2 = {
-	large: "w-6 h-6 rounded-md flex items-center justify-center",
-	medium: "w-5 h-5 rounded-md flex items-center justify-center",
-	small: "w-4 h-4 rounded-md flex items-center justify-center",
-	smallest: "w-4 h-4 rounded-md flex items-center justify-center"
+	large: "w-6 h-6 rounded flex items-center justify-center",
+	medium: "w-5 h-5 rounded flex items-center justify-center",
+	small: "w-4 h-4 rounded-sm flex items-center justify-center",
+	smallest: "w-4 h-4 rounded-sm flex items-center justify-center"
 };
 var outerSizeClasses = {
 	medium: "w-10 h-10",
 	small: "w-8 h-8",
 	large: "w-12 h-12 ",
-	smallest: "w-8 h-8"
+	smallest: "w-7 h-7"
 };
 var paddingClasses = {
 	medium: "p-2",
@@ -3072,7 +3212,7 @@ var Checkbox = React.memo(({ id, checked, indeterminate = false, padding = true,
 		children: /* @__PURE__ */ jsx("div", {
 			className: cls(padding ? paddingClasses[size] : "", outerSizeClasses[size], "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "", onCheckedChange ? "cursor-pointer" : "cursor-default"),
 			children: /* @__PURE__ */ jsx("div", {
-				className: cls("border-2 relative transition-colors ease-in-out duration-150", sizeClasses$2[size], disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900", indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500"),
+				className: cls("border-2 shrink-0 relative transition-colors ease-in-out duration-150", sizeClasses$2[size], disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900", indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500"),
 				children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
 					asChild: true,
 					children: indeterminate ? /* @__PURE__ */ jsx(MinusIcon$1, {
@@ -3093,8 +3233,8 @@ Checkbox.displayName = "Checkbox";
 var sizeClassNames = {
 	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"
+	medium: "px-2.5 py-1 text-xs",
+	large: "px-3 py-1.5 text-sm"
 };
 /**
 * Detect if the app is currently in dark mode by checking the
@@ -3272,8 +3412,15 @@ var BASE_COLORS = [
 	"cyan",
 	"gray"
 ];
-function getColorDisplayName(colorKey) {
-	return `${colorKey.charAt(0).toUpperCase()}${colorKey.slice(1)}`;
+var TONES = [
+	"Lighter",
+	"Light",
+	"Dark",
+	"Darker"
+];
+function getColorDisplayName(hue, tone) {
+	const hueName = `${hue.charAt(0).toUpperCase()}${hue.slice(1)}`;
+	return tone === "Lighter" ? hueName : `${hueName} ${tone.toLowerCase()}`;
 }
 /**
 * A color picker component that displays a grid of predefined CHIP_COLORS.
@@ -3298,13 +3445,13 @@ function ColorPicker({ value, onChange, size = "medium", allowClear = true, disa
 				className: "text-surface-accent-700 dark:text-surface-accent-300",
 				children: "Auto (based on ID)"
 			})]
-		}), /* @__PURE__ */ jsx("div", {
+		}), TONES.map((tone) => /* @__PURE__ */ jsx("div", {
 			className: "flex flex-wrap gap-1.5",
 			children: BASE_COLORS.map((base) => {
-				const colorKey = base;
+				const colorKey = tone === "Lighter" ? base : `${base}${tone}`;
 				const colorScheme = CHIP_COLORS[colorKey];
 				const isSelected = value === colorKey;
-				const displayName = getColorDisplayName(colorKey);
+				const displayName = getColorDisplayName(base, tone);
 				return /* @__PURE__ */ jsx(Tooltip, {
 					title: displayName,
 					delayDuration: 300,
@@ -3323,28 +3470,40 @@ function ColorPicker({ value, onChange, size = "medium", allowClear = true, disa
 					})
 				}, colorKey);
 			})
-		})]
+		}, tone))]
 	});
 }
 //#endregion
 //#region src/components/IconButton.tsx
 var buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
-var baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150";
+var baseClasses = "inline-flex items-center justify-center text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150 [&>svg]:shrink-0";
 var colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
 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-7 !h-7 min-w-7 min-h-7",
-	large: "w-12 !h-12 min-w-12 min-h-12"
+	medium: "w-10 !h-10 min-w-10 min-h-10 p-2",
+	small: "w-8 !h-8 min-w-8 min-h-8 p-2",
+	smallest: "w-7 !h-7 min-w-7 min-h-7 p-2",
+	large: "w-12 !h-12 min-w-12 min-h-12 p-2"
 };
 var shapeClasses = {
 	circular: "rounded-full",
 	square: "rounded-md"
 };
+/** Icon size used when the caller doesn't set one on the child. */
+var defaultIconSize = {
+	smallest: 16,
+	small: 18,
+	medium: 20,
+	large: 24
+};
 var IconButtonInner = ({ children, className, size = "medium", variant = "ghost", shape = "circular", disabled, toggled, component, ...props }, ref) => {
 	const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-50 dark:bg-surface-900/50";
 	const Component = component || "button";
 	const isNativeButton = Component === "button";
+	const sizedChildren = React.Children.map(children, (child) => {
+		if (!React.isValidElement(child)) return child;
+		if (child.props.size !== void 0) return child;
+		return React.cloneElement(child, { size: defaultIconSize[size] });
+	});
 	return /* @__PURE__ */ jsx(Component, {
 		type: isNativeButton ? "button" : void 0,
 		role: isNativeButton ? void 0 : "button",
@@ -3353,7 +3512,7 @@ var IconButtonInner = ({ children, className, size = "medium", variant = "ghost"
 		tabIndex: disabled ? -1 : void 0,
 		...props,
 		className: cls(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer", toggled ? "outline outline-2 outline-primary" : "", "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, shapeClasses[shape], sizeClasses$1[size], className),
-		children
+		children: sizedChildren
 	});
 };
 var IconButton = React.forwardRef(IconButtonInner);
@@ -3384,6 +3543,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 	const [internalValue, setInternalValue] = useState("");
 	const [isTyping, setIsTyping] = useState(false);
 	const invalidValue = value !== void 0 && value !== null && (!(value instanceof Date) || isNaN(value.getTime()));
+	const adornmentSize = size === "large" ? "medium" : size === "medium" ? "small" : "smallest";
 	useInjectStyles("DateTimeField", inputStyles);
 	const handleClear = (e) => {
 		e.preventDefault();
@@ -3455,7 +3615,8 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 			let resultDate;
 			if (!timezone) resultDate = new Date(year, month - 1, day, hours, minutes);
 			else {
-				const offsetMinutes = getTimezoneOffsetMinutes(new Date(Date.UTC(year, month - 1, day, hours, minutes)), timezone);
+				const refUtcDate = new Date(Date.UTC(year, month - 1, day, hours, minutes));
+				const offsetMinutes = getTimezoneOffsetMinutes(refUtcDate, timezone);
 				resultDate = /* @__PURE__ */ new Date(Date.UTC(year, month - 1, day, hours, minutes) - offsetMinutes * 6e4);
 			}
 			if (isNaN(resultDate.getTime())) throw new Error("Invalid date");
@@ -3479,8 +3640,8 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 			className: cls("rounded-lg relative max-w-full", !invisible && "bg-surface-accent-200/50 dark:bg-white/[0.055]", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
 				"min-h-[28px]": size === "smallest",
 				"min-h-[32px]": size === "small",
-				"min-h-[44px]": size === "medium",
-				"min-h-[64px]": size === "large"
+				"min-h-[40px]": size === "medium",
+				"min-h-[48px]": size === "large"
 			}, className),
 			style,
 			onClick: () => {
@@ -3488,7 +3649,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 			},
 			children: [
 				label && /* @__PURE__ */ jsx(InputLabel, {
-					className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""),
+					className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-600 dark:text-red-500", disabled ? "opacity-50" : ""),
 					shrink: true,
 					children: label
 				}),
@@ -3503,11 +3664,17 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 					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",
-						"min-h-[64px]": size === "large"
-					}, label ? "pt-8 pb-2" : "py-2", inputClassName, disabled && "border border-transparent outline-hidden opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500")
+						"min-h-[40px]": size === "medium",
+						"min-h-[48px]": size === "large"
+					}, label ? "pt-8 pb-2" : {
+						smallest: "py-0.5",
+						small: "py-1",
+						medium: "py-2",
+						large: "py-3"
+					}[size], inputClassName, disabled && "border border-transparent outline-hidden opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500")
 				}),
 				/* @__PURE__ */ jsx(IconButton, {
+					size: adornmentSize,
 					onClick: (e) => {
 						e.stopPropagation();
 						inputRef.current?.showPicker();
@@ -3516,6 +3683,7 @@ var DateTimeField = ({ value, label, onChange, disabled, clearable, mode = "date
 					children: /* @__PURE__ */ jsx(CalendarIcon$1, {})
 				}),
 				clearable && value && /* @__PURE__ */ jsx(IconButton, {
+					size: adornmentSize,
 					onClick: handleClear,
 					className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ",
 					children: /* @__PURE__ */ jsx(XIcon$1, {})
@@ -3618,7 +3786,7 @@ var Dialog = ({ open, onOpenChange, children, className, containerClassName, ful
 //#region src/components/DialogActions.tsx
 function DialogActions({ children, position = "sticky", translucent = true, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60", translucent ? "backdrop-blur-sm" : "", className),
+		className: cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end shrink-0 bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60", translucent ? "backdrop-blur-sm" : "", className),
 		children
 	});
 }
@@ -3902,15 +4070,21 @@ var MenuItem = React.memo(({ children, dense = false, disabled = false, onClick,
 MenuItem.displayName = "MenuItem";
 //#endregion
 //#region src/components/Menubar.tsx
-function Menubar({ children, onSelect, className }) {
+function Menubar({ children, onSelect, value, defaultValue, onValueChange, className }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
 		onSelect,
+		value,
+		defaultValue,
+		onValueChange,
 		className: cls("z-10 flex bg-white dark:bg-surface-900 p-[3px] rounded-lg shadow-sm", className),
 		children
 	});
 }
-function MenubarMenu({ children }) {
-	return /* @__PURE__ */ jsx(MenubarPrimitive.Menu, { children });
+function MenubarMenu({ children, value }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Menu, {
+		value,
+		children
+	});
 }
 function MenubarTrigger({ children, onSelect, className }) {
 	return /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
@@ -4041,6 +4215,14 @@ function Separator({ orientation, decorative, className }) {
 	});
 }
 //#endregion
+//#region src/components/common/SelectInputLabel.tsx
+function SelectInputLabel({ children, error }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("text-sm font-medium ml-3.5 mb-1", error ? "text-red-600 dark:text-red-500" : "text-surface-accent-500 dark:text-surface-accent-300"),
+		children
+	});
+}
+//#endregion
 //#region src/components/MultiSelect.tsx
 var MultiSelectContext = React$1.createContext(null);
 var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onValueChange, invisible, disabled, placeholder, modalPopover = true, includeClear = true, includeSelectAll = true, useChips = true, className, inputClassName, inputRef, children, renderValues, open, onOpenChange, portalContainer }, ref) => {
@@ -4092,7 +4274,8 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 		}
 	};
 	const toggleOption = (value) => {
-		updateValues(selectedValues.some((v) => String(v) === String(value)) ? selectedValues.filter((v) => String(v) !== String(value)) : [...selectedValues, value]);
+		const newSelectedValues = selectedValues.some((v) => String(v) === String(value)) ? selectedValues.filter((v) => String(v) !== String(value)) : [...selectedValues, value];
+		updateValues(newSelectedValues);
 	};
 	const handleClear = () => {
 		updateValues([]);
@@ -4132,11 +4315,12 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 					className: cls({
 						"min-h-[28px]": size === "smallest",
 						"min-h-[32px]": size === "small",
-						"min-h-[44px]": size === "medium",
-						"min-h-[64px]": size === "large"
+						"min-h-[40px]": size === "medium",
+						"min-h-[48px]": size === "large"
 					}, {
-						"py-1": size === "small" || size === "smallest",
-						"py-2": size === "medium" || size === "large"
+						"py-0": size === "smallest",
+						"py-0.5": size === "small",
+						"py-1": size === "medium" || size === "large"
 					}, {
 						"px-2": size === "small" || size === "smallest",
 						"px-4": size === "medium" || size === "large"
@@ -4149,7 +4333,7 @@ var MultiSelect = React$1.forwardRef(({ value, size = "large", label, error, onV
 								const optionChildren = optionsMap.get(String(value));
 								if (!useChips) return optionChildren;
 								return /* @__PURE__ */ jsxs(Chip, {
-									size: "medium",
+									size: size === "smallest" || size === "small" ? "smallest" : "small",
 									className: cls("flex flex-row items-center p-1"),
 									children: [optionChildren, /* @__PURE__ */ jsx(XIcon$1, {
 										size: iconSize.smallest,
@@ -4409,9 +4593,14 @@ function SearchBar({ onClick, onTextSearch, placeholder = "Search", expandable =
 		setSearchText("");
 		onTextSearch(void 0);
 	}, [onTextSearch]);
-	const heightClass = size === "smallest" ? "h-8" : size === "small" ? "h-[36px]" : "h-[44px]";
-	const iconPaddingClass = size === "smallest" ? "px-2" : size === "small" ? "px-2" : "px-4";
-	const inputPaddingClass = size === "smallest" ? "pl-8" : size === "small" ? "pl-8" : "pl-12";
+	const heightClass = {
+		smallest: "h-[28px]",
+		small: "h-[32px]",
+		medium: "h-[40px]",
+		large: "h-[48px]"
+	}[size];
+	const iconPaddingClass = size === "smallest" || size === "small" ? "px-2" : size === "medium" ? "px-3" : "px-4";
+	const inputPaddingClass = size === "smallest" || size === "small" ? "pl-8" : size === "medium" ? "pl-10" : "pl-12";
 	return /* @__PURE__ */ jsxs("div", {
 		role: "search",
 		"aria-label": "Search",
@@ -4513,8 +4702,8 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 				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",
-					"min-h-[64px]": size === "large",
+					"min-h-[40px]": size === "medium",
+					"min-h-[48px]": size === "large",
 					"w-fit": !fullWidth,
 					"w-full": fullWidth
 				}),
@@ -4532,8 +4721,8 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 					} : "", "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",
-						"min-h-[64px]": size === "large",
+						"min-h-[40px]": size === "medium",
+						"min-h-[48px]": size === "large",
 						"w-full": fullWidth,
 						"w-fit": !fullWidth
 					}, inputClassName),
@@ -4542,8 +4731,8 @@ var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenCh
 						className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
 							"min-h-[28px]": size === "smallest",
 							"min-h-[32px]": size === "small",
-							"min-h-[44px]": size === "medium",
-							"min-h-[64px]": size === "large"
+							"min-h-[40px]": size === "medium",
+							"min-h-[48px]": size === "large"
 						}),
 						children: /* @__PURE__ */ jsx(SelectPrimitive.Value, {
 							onClick: (e) => {
@@ -4928,9 +5117,14 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		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",
-			"min-h-[64px]": size === "large"
-		}, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName),
+			"min-h-[40px]": size === "medium",
+			"min-h-[48px]": size === "large"
+		}, label ? {
+			smallest: "pt-4 pb-1",
+			small: "pt-5 pb-1",
+			medium: "pt-6 pb-2",
+			large: "pt-8 pb-2"
+		}[size] : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName),
 		placeholder: focused || hasValue || !label ? placeholder : void 0,
 		autoFocus,
 		onFocus: () => setFocused(true),
@@ -4944,8 +5138,8 @@ var TextField = forwardRef(({ value, onChange, label, type = "text", multiline =
 		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",
-			"min-h-[64px]": size === "large"
+			"min-h-[40px]": size === "medium",
+			"min-h-[48px]": size === "large"
 		}, className),
 		style,
 		children: [
@@ -5676,6 +5870,7 @@ var VirtualTableHeaderRow = ({ columns, currentSort, onColumnSort, onFilterUpdat
 			const columnFilter = column && filter && filter[column.key] ? filter[column.key] : void 0;
 			const filterForThisProperty = columnFilter ? Array.isArray(columnFilter[0]) ? columnFilter[0] : columnFilter : void 0;
 			const isDraggable = !column.frozen && !!onColumnsOrderChange;
+			const isDragging = draggingColumnId === column.key;
 			return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(SortableColumnHeader, {
 				column,
 				columnIndex,
@@ -5688,7 +5883,7 @@ var VirtualTableHeaderRow = ({ columns, currentSort, onColumnSort, onFilterUpdat
 				onColumnSort,
 				onClickResizeColumn,
 				createFilterField,
-				isDragging: draggingColumnId === column.key,
+				isDragging,
 				isDraggable
 			}) }, "header_" + column.key);
 		}), AddColumnComponent && /* @__PURE__ */ jsx(AddColumnComponent, {})]
@@ -5792,12 +5987,18 @@ var innerElementType = forwardRef(({ children, ...rest }, ref) => {
 	} });
 });
 /**
-* This is a Table component that allows displaying arbitrary data, not
-* necessarily related to entities or properties. It is the component
-* that powers the entity collections but has a generic API, so it
-* can be reused.
+* `React.memo` is not generic-preserving: it takes the props type as its own
+* type argument, so annotating the call with
+* `VirtualTableProps<Record<string, unknown>>` pinned `T` at the boundary and
+* discarded the `<T>` the inner function declares. The exported component was
+* therefore not generic at all — every consumer got `Record<string, unknown>`,
+* `columns` and `cellRenderer` were unrelated to `data`, and a caller writing
+* `<VirtualTable<Post> …>` was told the component expects no type arguments.
 *
-* @group Components
+* Re-asserting the call signature is the standard way to carry a type parameter
+* across `memo`; it is the only cast here, and it restores the generic the
+* implementation always had. Runtime behaviour is unchanged — this is the same
+* memoized component under a type that describes it.
 */
 var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, onEndReached, endOffset = 600, rowHeight = 54, headerHeight = 48, columns: columnsProp, onRowClick, onColumnResize, onColumnResizeEnd, filter: filterInput, checkFilterCombination, onFilterUpdate, sortBy, error, emptyComponent, onSortByUpdate, onScroll: onScrollProp, loading, cellRenderer, hoverRow, createFilterField, rowClassName, style, className, endAdornment, AddColumnComponent, initialScroll = 0, onColumnsOrderChange, extraData }) {
 	const sortByProperty = sortBy ? sortBy[0] : void 0;
@@ -6303,11 +6504,12 @@ function VirtualTableSwitch(props) {
 //#endregion
 //#region src/components/VirtualTable/fields/VirtualTableDateField.tsx
 function VirtualTableDateField(props) {
-	const { disabled, error, mode, timezone, internalValue, updateValue, locale } = props;
+	const { disabled, error, mode, timezone, internalValue, updateValue, small = false, locale } = props;
 	return /* @__PURE__ */ jsx(DateTimeField, {
 		value: internalValue ?? void 0,
 		onChange: (dateValue) => updateValue(dateValue ?? null),
 		invisible: true,
+		size: small ? "small" : "medium",
 		inputClassName: cls("w-full h-full", focusedDisabled),
 		className: cls("w-full h-full", focusedDisabled),
 		mode,
@@ -6332,7 +6534,10 @@ function VirtualTableSelect(props) {
 			});
 			if (isNumber) updateValue(newValue);
 			else updateValue(newValue);
-		} else updateValue(typeof options.find((o) => String(o.value) === updatedValue)?.value === "number" ? parseFloat(updatedValue) : updatedValue || null);
+		} else {
+			const opt = options.find((o) => String(o.value) === updatedValue);
+			updateValue(typeof opt?.value === "number" ? parseFloat(updatedValue) : updatedValue || null);
+		}
 	}, [
 		multiple,
 		updateValue,
@@ -6766,7 +6971,7 @@ function CardView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 }
 //#endregion
 //#region src/views/Kanban/BoardSortableList.tsx
-function BoardSortableList({ columnId, items, ItemComponent, isDragging, isDragOverColumn, loading = false, hasMore = false, onLoadMore }) {
+function BoardSortableList({ columnId, items, ItemComponent, isDragging, isDragOverColumn, loading = false, hasMore = false, error, onLoadMore }) {
 	const { setNodeRef } = useDroppable({
 		id: columnId,
 		data: { type: "ITEM-LIST" }
@@ -6799,16 +7004,16 @@ function BoardSortableList({ columnId, items, ItemComponent, isDragging, isDragO
 	}, [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]),
+		className: useMemo(() => cls("flex flex-col p-2 transition-opacity duration-100 transition-bg ease-linear w-full overflow-y-auto flex-1 min-h-0 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",
+				className: "flex-1 flex items-center justify-center px-3 text-center",
 				children: /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-surface-400 dark:text-surface-500",
-					children: "No items"
+					className: cls("text-xs", error ? "text-red-600 dark:text-red-400" : "text-surface-400 dark:text-surface-500"),
+					children: error ? "Could not load this column" : "No items"
 				})
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [items.map((item, index) => /* @__PURE__ */ jsx(SortableItem, {
 				item,
@@ -6873,7 +7078,7 @@ function BoardColumnTitle({ children, className, color, ...props }) {
 }
 //#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 }) {
+var BoardColumn = memo(function BoardColumn({ id, title, items, ItemComponent, isDragging, isDragOverColumn, allowReorder = false, loading = false, hasMore = false, error, onLoadMore, onAddItem, totalCount, color, style }) {
 	const { setNodeRef, attributes, listeners, isDragging: isColumnBeingDragged, transform, transition } = useSortable({
 		id,
 		data: { type: "COLUMN" },
@@ -6932,35 +7137,53 @@ var BoardColumn = memo(function BoardColumn({ id, title, items, ItemComponent, i
 				isDragOverColumn,
 				loading,
 				hasMore,
+				error,
 				onLoadMore
 			})
 		})]
 	});
 });
 //#endregion
+//#region src/views/Kanban/placement.ts
+/**
+* Where a dropped card ends up in its destination column.
+*
+* Pulled out of the drop handler because it is the part that was wrong twice:
+* once appending a card that had been dropped into the middle of a column, and
+* once refusing to place a card at all when it was released over an empty
+* column rather than over another card. It is pure, so it can be checked
+* without driving a pointer.
+*/
+function placeDroppedCard({ targetItems, movedItem, overId, changedColumn }) {
+	const indexInTarget = targetItems.findIndex((i) => i.id === movedItem.id);
+	const overIndex = targetItems.findIndex((i) => i.id === overId);
+	if (indexInTarget === -1) {
+		const placed = [...targetItems];
+		placed.splice(overIndex === -1 ? targetItems.length : overIndex, 0, movedItem);
+		return placed;
+	}
+	if (overIndex !== -1) return arrayMove(targetItems, indexInTarget, overIndex);
+	if (changedColumn) return targetItems;
+	return arrayMove(targetItems, indexInTarget, targetItems.length - 1);
+}
+//#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]);
+	/**
+	* Which column the card was picked up from.
+	*
+	* `handleDragOver` moves the card between columns in `itemMapState` while
+	* the pointer is still down — that is what makes the gap open up under the
+	* cursor. So by the time the drop is handled, looking the card up by id
+	* finds it in its *destination*, and the board was reporting the move as
+	* source === target: a cross-column drop looked like a plain reorder and
+	* the column property was never written. The card snapped back on the next
+	* fetch.
+	*/
+	const dragSourceColumnRef = useRef(null);
 	const [itemMapState, setItemMapState] = useState(() => {
 		const dataColumnMap = data.reduce((prev, item) => ({
 			...prev,
@@ -7023,27 +7246,9 @@ function Board({ data, columns: columnsProp, columnLabels, columnColors, classNa
 		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") {
+		if (active.data.current?.type === "ITEM") {
 			const columnId = findColumnByItemId(active.id);
+			dragSourceColumnRef.current = columnId ?? null;
 			if (columnId) {
 				const item = itemMapState[columnId]?.find((i) => i.id === active.id);
 				setActiveItem(item || null);
@@ -7065,15 +7270,15 @@ function Board({ data, columns: columnsProp, columnLabels, columnColors, classNa
 		setDragOverColumnId(currentHoveredColumnId);
 		if (active.data.current?.type !== "ITEM") return;
 		const activeId = active.id;
-		const activeColumn = findColumnByItemId(activeId);
+		const activeItemColumn = 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 (!activeItemColumn || !overColumnForMove) return;
+		if (activeItemColumn === overColumnForMove) return;
 		if (itemMapState[overColumnForMove]?.some((i) => i.id === activeId)) return;
 		setItemMapState((currentMap) => {
-			const activeItems = [...currentMap[activeColumn] || []];
+			const activeItems = [...currentMap[activeItemColumn] || []];
 			const overItems = [...currentMap[overColumnForMove] || []];
 			const activeIndex = activeItems.findIndex((i) => i.id === activeId);
 			if (activeIndex === -1) return currentMap;
@@ -7089,20 +7294,24 @@ function Board({ data, columns: columnsProp, columnLabels, columnColors, classNa
 			const newItemMap = { ...currentMap };
 			const [moved] = activeItems.splice(activeIndex, 1);
 			overItems.splice(overIndex, 0, moved);
-			newItemMap[activeColumn] = activeItems;
+			newItemMap[activeItemColumn] = activeItems;
 			newItemMap[overColumnForMove] = overItems;
 			return newItemMap;
 		});
 	};
+	const handleDragCancel = () => {
+		setIsDragging(false);
+		setActiveItem(null);
+		setDragOverColumnId(null);
+		dragSourceColumnRef.current = null;
+	};
 	const handleDragEnd = (event) => {
 		const { active, over } = event;
-		window.removeEventListener("mousemove", handleMouseMove);
-		window.removeEventListener("pointermove", handleMouseMove);
-		setOverlayPos(null);
+		const sourceColumn = dragSourceColumnRef.current;
 		setIsDragging(false);
 		setActiveItem(null);
-		setActiveColumn(null);
 		setDragOverColumnId(null);
+		dragSourceColumnRef.current = null;
 		if (!over) return;
 		const activeId = active.id;
 		const overId = over.id;
@@ -7117,51 +7326,35 @@ function Board({ data, columns: columnsProp, columnLabels, columnColors, classNa
 			}
 			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 currentCol = findColumnByItemId(activeId);
+		let targetCol = findColumnByItemId(overId);
+		if (!targetCol) {
+			if (over.data.current?.type === "ITEM-LIST" || columnsProp.includes(overId)) targetCol = overId;
 		}
-		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] || []);
+		targetCol = targetCol ?? currentCol;
+		if (!currentCol || !targetCol) return;
+		const targetItems = itemMapState[targetCol] || [];
+		const movedItem = (itemMapState[currentCol] || []).find((i) => i.id === activeId);
+		if (!movedItem) return;
+		const finalTargetItems = placeDroppedCard({
+			targetItems,
+			movedItem,
+			overId,
+			changedColumn: (sourceColumn ?? currentCol) !== targetCol
 		});
-		onItemsReorder?.(fullFlattenedList, {
+		onItemsReorder?.(finalTargetItems, {
 			itemId: activeId,
-			sourceColumn: activeCol,
-			targetColumn: overCol
+			sourceColumn: sourceColumn ?? currentCol,
+			targetColumn: targetCol
 		});
 	};
 	return /* @__PURE__ */ jsxs(DndContext, {
 		sensors,
+		collisionDetection: closestCorners,
 		onDragStart: handleDragStart,
 		onDragOver: handleDragOver,
 		onDragEnd: handleDragEnd,
+		onDragCancel: handleDragCancel,
 		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, {
@@ -7180,6 +7373,7 @@ function Board({ data, columns: columnsProp, columnLabels, columnColors, classNa
 						allowReorder: allowColumnReorder,
 						loading: loadingState?.loading,
 						hasMore: loadingState?.hasMore,
+						error: loadingState?.error,
 						totalCount: loadingState?.totalCount,
 						color: columnColors?.[col],
 						onLoadMore: onLoadMoreColumn ? () => onLoadMoreColumn(col) : void 0,
@@ -7189,19 +7383,11 @@ function Board({ data, columns: columnsProp, columnLabels, columnColors, classNa
 			}), 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
-				})
+			zIndex: 9999,
+			children: activeItem && /* @__PURE__ */ jsx(ItemComponent, {
+				item: activeItem,
+				isDragging: true,
+				isClone: true
 			})
 		}), document.body)]
 	});
@@ -7670,7 +7856,7 @@ var SIZE_TO_ROW_HEIGHT = {
 	l: 64,
 	xl: 80
 };
-var SORTABLE_TYPES = new Set([
+var SORTABLE_TYPES = /* @__PURE__ */ new Set([
 	"string",
 	"number",
 	"date"
@@ -7809,7 +7995,7 @@ function resolveTitlePropertyKey(order, properties, idProperty, titleProperty) {
 		PLAIN_TEXT: 60,
 		NAMED: 100
 	};
-	const titleLikeKeys = new Set([
+	const titleLikeKeys = /* @__PURE__ */ new Set([
 		"name",
 		"fullname",
 		"displayname",
@@ -8461,6 +8647,6 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 	});
 }
 //#endregion
-export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionCardView, CollectionKanbanView, CollectionListView, CollectionTableView, CollectionView, CollectionViewToolbar, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, DefaultCellRenderer, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, 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, ListPlusIcon, ListTodoIcon, 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, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, 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, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, VirtualTable as TableView, VirtualTable, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize, lucideIcons, paperMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
+export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, 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, ListPlusIcon, ListTodoIcon, 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, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, iconKeys, iconSize, lucideIcons, paperMixin, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
 
 //# sourceMappingURL=index.es.js.map